fix: (#95)

fix: `Date Picker` style

apps/www/public/registry/frameworks/tailwindcss/date-picker.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "date-picker.tsx",
-      "content": "import { cn } from \"@/libs/cn\";\nimport type {\n  DatePickerContentProps,\n  DatePickerInputProps,\n  DatePickerRangeTextProps,\n  DatePickerRootProps,\n  DatePickerTableCellProps,\n  DatePickerTableCellTriggerProps,\n  DatePickerTableHeaderProps,\n  DatePickerTableProps,\n  DatePickerTableRowProps,\n  DatePickerViewControlProps,\n  DatePickerViewProps,\n  DatePickerViewTriggerProps\n} from \"@ark-ui/solid\";\nimport { DatePicker as DatePickerPrimitive } from \"@ark-ui/solid\";\nimport type { VoidProps } from \"solid-js\";\nimport { splitProps } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport { buttonVariants } from \"./button\";\n\nexport const DatePickerLabel = DatePickerPrimitive.Label;\nexport const DatePickerTableHead = DatePickerPrimitive.TableHead;\nexport const DatePickerTableBody = DatePickerPrimitive.TableBody;\nexport const DatePickerClearTrigger = DatePickerPrimitive.ClearTrigger;\nexport const DatePickerYearSelect = DatePickerPrimitive.YearSelect;\nexport const DatePickerMonthSelect = DatePickerPrimitive.MonthSelect;\nexport const DatePickerContext = DatePickerPrimitive.Context;\nexport const DatePickerRootProvider = DatePickerPrimitive.RootProvider;\n\nexport const DatePicker = (props: DatePickerRootProps) => {\n  return (\n    <DatePickerPrimitive.Root\n      format={e =>\n        new Intl.DateTimeFormat(\"en-US\", {\n          dateStyle: \"long\"\n        }).format(new Date(e.toString()))\n      }\n      {...props}\n    />\n  );\n};\n\nexport const DatePickerView = (props: DatePickerViewProps) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return <DatePickerPrimitive.View class={cn(\"space-y-4\", local.class)} {...rest} />;\n};\n\nexport const DatePickerViewControl = (props: DatePickerViewControlProps) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <DatePickerPrimitive.ViewControl\n      class={cn(\"flex items-center justify-between\", local.class)}\n      {...rest}\n    >\n      <DatePickerPrimitive.PrevTrigger\n        class={cn(\n          buttonVariants({\n            variant: \"outline\"\n          }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        )}\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" viewBox=\"0 0 24 24\">\n          <path\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"m15 6l-6 6l6 6\"\n          />\n        </svg>\n      </DatePickerPrimitive.PrevTrigger>\n      {local.children}\n      <DatePickerPrimitive.NextTrigger\n        class={cn(\n          buttonVariants({\n            variant: \"outline\"\n          }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        )}\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" viewBox=\"0 0 24 24\">\n          <path\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"m9 6l6 6l-6 6\"\n          />\n        </svg>\n      </DatePickerPrimitive.NextTrigger>\n    </DatePickerPrimitive.ViewControl>\n  );\n};\n\nexport const DatePickerRangeText = (props: VoidProps<DatePickerRangeTextProps>) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return <DatePickerPrimitive.RangeText class={cn(\"text-sm font-medium\", local.class)} {...rest} />;\n};\n\nexport const DatePickerTable = (props: DatePickerTableProps) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <DatePickerPrimitive.Table\n      class={cn(\"w-full border-collapse space-y-1\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport const DatePickerTableRow = (props: DatePickerTableRowProps) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return <DatePickerPrimitive.TableRow class={cn(\"mt-2 flex w-full\", local.class)} {...rest} />;\n};\n\nexport const DatePickerTableHeader = (props: DatePickerTableHeaderProps) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <DatePickerPrimitive.TableHeader\n      class={cn(\"w-8 flex-1 text-[0.8rem] font-normal text-muted-foreground\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport const DatePickerTableCell = (props: DatePickerTableCellProps) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <DatePickerPrimitive.TableCell\n      class={cn(\n        \"p-0 text-center text-sm\",\n        \"has-[[data-in-range]]:bg-accent has-[[data-in-range]]:first-of-type:rounded-l-md has-[[data-in-range]]:last-of-type:rounded-r-md\",\n        \"has-[[data-range-end]]:rounded-r-md has-[[data-range-start]]:rounded-l-md\",\n        \"has-[[data-outside-range][data-in-range]]:bg-accent/50\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport const DatePickerTableCellTrigger = (props: DatePickerTableCellTriggerProps) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <DatePickerPrimitive.TableCellTrigger\n      class={cn(\n        buttonVariants({ variant: \"ghost\" }),\n        \"size-8 p-0 font-normal data-[selected]:opacity-100\",\n        \"data-[today]:bg-accent data-[today]:text-accent-foreground\",\n        \"[&:is([data-today][data-selected])]:bg-primary [&:is([data-today][data-selected])]:text-primary-foreground\",\n        \"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground\",\n        \"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50\",\n        \"data-[outside-range]:text-muted-foreground data-[outside-range]:opacity-50\",\n        \"[&:is([data-outside-range][data-in-range])]:bg-accent/50 [&:is([data-outside-range][data-in-range])]:text-muted-foreground [&:is([data-outside-range][data-in-range])]:opacity-30\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport const DatePickerViewTrigger = (props: DatePickerViewTriggerProps) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <DatePickerPrimitive.ViewTrigger\n      class={cn(buttonVariants({ variant: \"ghost\" }), \"h-7\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport const DatePickerContent = (props: DatePickerContentProps) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <Portal>\n      <DatePickerPrimitive.Positioner>\n        <DatePickerPrimitive.Content\n          class={cn(\n            \"rounded-md border bg-popover p-3 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n            local.class\n          )}\n          {...rest}\n        >\n          {local.children}\n        </DatePickerPrimitive.Content>\n      </DatePickerPrimitive.Positioner>\n    </Portal>\n  );\n};\n\nexport const DatePickerInput = (props: DatePickerInputProps) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <DatePickerPrimitive.Control class=\"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\">\n      <DatePickerPrimitive.Input\n        class={cn(\"w-full appearance-none bg-transparent outline-none\", local.class)}\n        {...rest}\n      />\n      <DatePickerPrimitive.Trigger class=\"transition-shadow focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-1 h-4 w-4\" viewBox=\"0 0 24 24\">\n          <path\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm12-4v4M8 3v4m-4 4h16m-9 4h1m0 0v3\"\n          />\n        </svg>\n      </DatePickerPrimitive.Trigger>\n    </DatePickerPrimitive.Control>\n  );\n};\n"
+      "content": "import { cn } from \"@/libs/cn\";\nimport type {\n  DatePickerContentProps,\n  DatePickerInputProps,\n  DatePickerRangeTextProps,\n  DatePickerRootProps,\n  DatePickerTableCellProps,\n  DatePickerTableCellTriggerProps,\n  DatePickerTableHeaderProps,\n  DatePickerTableProps,\n  DatePickerTableRowProps,\n  DatePickerViewControlProps,\n  DatePickerViewProps,\n  DatePickerViewTriggerProps\n} from \"@ark-ui/solid\";\nimport { DatePicker as DatePickerPrimitive } from \"@ark-ui/solid\";\nimport type { VoidProps } from \"solid-js\";\nimport { splitProps } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport { buttonVariants } from \"./button\";\n\nexport const DatePickerLabel = DatePickerPrimitive.Label;\nexport const DatePickerTableHead = DatePickerPrimitive.TableHead;\nexport const DatePickerTableBody = DatePickerPrimitive.TableBody;\nexport const DatePickerClearTrigger = DatePickerPrimitive.ClearTrigger;\nexport const DatePickerYearSelect = DatePickerPrimitive.YearSelect;\nexport const DatePickerMonthSelect = DatePickerPrimitive.MonthSelect;\nexport const DatePickerContext = DatePickerPrimitive.Context;\nexport const DatePickerRootProvider = DatePickerPrimitive.RootProvider;\n\nexport const DatePicker = (props: DatePickerRootProps) => {\n  return (\n    <DatePickerPrimitive.Root\n      format={e => {\n        const parsedDate = new Date(Date.parse(e.toString()));\n\n        const normalizedDate = new Date(\n          parsedDate.getUTCFullYear(),\n          parsedDate.getUTCMonth(),\n          parsedDate.getUTCDate()\n        );\n\n        return new Intl.DateTimeFormat(\"en-US\", {\n          dateStyle: \"long\"\n        }).format(normalizedDate);\n      }}\n      {...props}\n    />\n  );\n};\n\nexport const DatePickerView = (props: DatePickerViewProps) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return <DatePickerPrimitive.View class={cn(\"space-y-4\", local.class)} {...rest} />;\n};\n\nexport const DatePickerViewControl = (props: DatePickerViewControlProps) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <DatePickerPrimitive.ViewControl\n      class={cn(\"flex items-center justify-between\", local.class)}\n      {...rest}\n    >\n      <DatePickerPrimitive.PrevTrigger\n        class={cn(\n          buttonVariants({\n            variant: \"outline\"\n          }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        )}\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" viewBox=\"0 0 24 24\">\n          <path\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"m15 6l-6 6l6 6\"\n          />\n        </svg>\n      </DatePickerPrimitive.PrevTrigger>\n      {local.children}\n      <DatePickerPrimitive.NextTrigger\n        class={cn(\n          buttonVariants({\n            variant: \"outline\"\n          }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        )}\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" viewBox=\"0 0 24 24\">\n          <path\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"m9 6l6 6l-6 6\"\n          />\n        </svg>\n      </DatePickerPrimitive.NextTrigger>\n    </DatePickerPrimitive.ViewControl>\n  );\n};\n\nexport const DatePickerRangeText = (props: VoidProps<DatePickerRangeTextProps>) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return <DatePickerPrimitive.RangeText class={cn(\"text-sm font-medium\", local.class)} {...rest} />;\n};\n\nexport const DatePickerTable = (props: DatePickerTableProps) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <DatePickerPrimitive.Table\n      class={cn(\"w-full border-collapse space-y-1\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport const DatePickerTableRow = (props: DatePickerTableRowProps) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return <DatePickerPrimitive.TableRow class={cn(\"mt-2 flex w-full\", local.class)} {...rest} />;\n};\n\nexport const DatePickerTableHeader = (props: DatePickerTableHeaderProps) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <DatePickerPrimitive.TableHeader\n      class={cn(\"w-8 flex-1 text-[0.8rem] font-normal text-muted-foreground\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport const DatePickerTableCell = (props: DatePickerTableCellProps) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <DatePickerPrimitive.TableCell\n      class={cn(\n        \"p-0 text-center text-sm flex-1\",\n        \"has-[[data-in-range]]:bg-accent has-[[data-in-range]]:first-of-type:rounded-l-md has-[[data-in-range]]:last-of-type:rounded-r-md\",\n        \"has-[[data-range-end]]:rounded-r-md has-[[data-range-start]]:rounded-l-md\",\n        \"has-[[data-outside-range][data-in-range]]:bg-accent/50\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport const DatePickerTableCellTrigger = (props: DatePickerTableCellTriggerProps) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <DatePickerPrimitive.TableCellTrigger\n      class={cn(\n        buttonVariants({ variant: \"ghost\" }),\n        \"size-8 p-0 font-normal data-[selected]:opacity-100 w-full\",\n        \"data-[today]:bg-accent data-[today]:text-accent-foreground\",\n        \"[&:is([data-today][data-selected])]:bg-primary [&:is([data-today][data-selected])]:text-primary-foreground\",\n        \"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground\",\n        \"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50\",\n        \"data-[outside-range]:text-muted-foreground data-[outside-range]:opacity-50\",\n        \"[&:is([data-outside-range][data-in-range])]:bg-accent/50 [&:is([data-outside-range][data-in-range])]:text-muted-foreground [&:is([data-outside-range][data-in-range])]:opacity-30\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport const DatePickerViewTrigger = (props: DatePickerViewTriggerProps) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <DatePickerPrimitive.ViewTrigger\n      class={cn(buttonVariants({ variant: \"ghost\" }), \"h-7\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport const DatePickerContent = (props: DatePickerContentProps) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <Portal>\n      <DatePickerPrimitive.Positioner>\n        <DatePickerPrimitive.Content\n          class={cn(\n            \"rounded-md border bg-popover p-3 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n            local.class\n          )}\n          {...rest}\n        >\n          {local.children}\n        </DatePickerPrimitive.Content>\n      </DatePickerPrimitive.Positioner>\n    </Portal>\n  );\n};\n\nexport const DatePickerInput = (props: DatePickerInputProps) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <DatePickerPrimitive.Control class=\"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\">\n      <DatePickerPrimitive.Input\n        class={cn(\"w-full appearance-none bg-transparent outline-none\", local.class)}\n        {...rest}\n      />\n      <DatePickerPrimitive.Trigger class=\"transition-shadow focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-1 h-4 w-4\" viewBox=\"0 0 24 24\">\n          <path\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm12-4v4M8 3v4m-4 4h16m-9 4h1m0 0v3\"\n          />\n        </svg>\n      </DatePickerPrimitive.Trigger>\n    </DatePickerPrimitive.Control>\n  );\n};\n"
     }
   ],
   "type": "components:ui"