@ginia/ui 0.1.24 → 0.1.25

package/AGENTS.md

@@ -8,6 +8,8 @@
 - **Storybook (live)**: <https://ginia-ui.vercel.app>
 - **Component index (machine-readable)**: <https://ginia-ui.vercel.app/llms.txt>
 
+After changing stories or UI docs, run `pnpm build-storybook` locally to confirm the static build (Vercel runs it on deploy). Dev server: `pnpm storybook`.
+
 ---
 
 ## Setup (in a consumer project)
@@ -65,4 +67,5 @@ import { cn } from "@ginia/ui";
 7. **Icons**: Icons are re-exported from `lucide-react` and should be imported from `@ginia/ui/icons`. For consistent sizing and accessibility, prefer using the `<Icon />` component from `@ginia/ui`.
 8. **Typography**: Use `<Typography variant="…" />` for headings, body, lead, caption, and display styles. Pass `className` to merge extra Tailwind utilities. Each variant has a default HTML tag; override with `as` or `asChild` when you need a different element (e.g. a link styled as a heading).
 9. **Brand lockup**: `<Wordmark />` combines the official `<Logo />` SVG with custom text (default “Ginia”). Use `className` on the root, `text` for the word, `size` (`sm` | `md` | `lg`), and optional `label` for screen readers (defaults to `text`).
-10. **No business logic** in components — they are purely presentational.
+10. **Dates**: `<Calendar />` (react-day-picker) defaults to Spanish via `locale={es}`. `<DatePicker />` uses month/year dropdowns and `locale` from `date-fns` (default `es`); pass `enUS` or another locale when needed. Optional `fromYear` / `toYear` bound the year list.
+11. **No business logic** in components — they are purely presentational.

package/dist/components/ui/button/button.cjs

@@ -36,7 +36,7 @@ const buttonVariants = (0, import_class_variance_authority.cva)(
         destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 focus-visible:ring-destructive/20",
         outline: "bg-card text-primary border border-input hover:bg-primary hover:text-primary-foreground shadow-sm",
         secondary: "bg-accent text-accent-foreground hover:bg-accent/90 shadow-sm",
-        ghost: "hover:bg-secondary hover:text-secondary-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
         success: "bg-success text-success-foreground shadow-sm hover:bg-success/90",
         warning: "bg-warning text-warning-foreground shadow-sm hover:bg-warning/90"

package/dist/components/ui/button/button.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../../lib/utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring/20 focus-visible:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary hover:bg-primary-dark text-primary-foreground shadow-sm\",\n        destructive:\n          \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 focus-visible:ring-destructive/20\",\n        outline:\n          \"bg-card text-primary border border-input hover:bg-primary hover:text-primary-foreground shadow-sm\",\n        secondary: \"bg-accent text-accent-foreground hover:bg-accent/90 shadow-sm\",\n        ghost: \"hover:bg-secondary hover:text-secondary-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n        success: \"bg-success text-success-foreground shadow-sm hover:bg-success/90\",\n        warning: \"bg-warning text-warning-foreground shadow-sm hover:bg-warning/90\",\n      },\n      size: {\n        default: \"px-4 py-2\",\n        sm: \"px-3 py-1.5 text-sm\",\n        lg: \"px-5 py-2.5 text-base\",\n        icon: \"size-9 p-2\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n  }) {\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDI;AAhDJ,wBAAqB;AACrB,sCAAuC;AAEvC,mBAAmB;AAEnB,MAAM,qBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aACE;AAAA,QACF,SACE;AAAA,QACF,WAAW;AAAA,QACX,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAGK;AACH,QAAM,OAAO,UAAU,yBAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAW,iBAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,MACzD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/ui/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../../lib/utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring/20 focus-visible:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary hover:bg-primary-dark text-primary-foreground shadow-sm\",\n        destructive:\n          \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 focus-visible:ring-destructive/20\",\n        outline:\n          \"bg-card text-primary border border-input hover:bg-primary hover:text-primary-foreground shadow-sm\",\n        secondary: \"bg-accent text-accent-foreground hover:bg-accent/90 shadow-sm\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n        success: \"bg-success text-success-foreground shadow-sm hover:bg-success/90\",\n        warning: \"bg-warning text-warning-foreground shadow-sm hover:bg-warning/90\",\n      },\n      size: {\n        default: \"px-4 py-2\",\n        sm: \"px-3 py-1.5 text-sm\",\n        lg: \"px-5 py-2.5 text-base\",\n        icon: \"size-9 p-2\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n  }) {\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDI;AAhDJ,wBAAqB;AACrB,sCAAuC;AAEvC,mBAAmB;AAEnB,MAAM,qBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aACE;AAAA,QACF,SACE;AAAA,QACF,WAAW;AAAA,QACX,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAGK;AACH,QAAM,OAAO,UAAU,yBAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAW,iBAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,MACzD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/ui/button/button.js

@@ -12,7 +12,7 @@ const buttonVariants = cva(
         destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 focus-visible:ring-destructive/20",
         outline: "bg-card text-primary border border-input hover:bg-primary hover:text-primary-foreground shadow-sm",
         secondary: "bg-accent text-accent-foreground hover:bg-accent/90 shadow-sm",
-        ghost: "hover:bg-secondary hover:text-secondary-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
         success: "bg-success text-success-foreground shadow-sm hover:bg-success/90",
         warning: "bg-warning text-warning-foreground shadow-sm hover:bg-warning/90"

package/dist/components/ui/button/button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../../lib/utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring/20 focus-visible:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary hover:bg-primary-dark text-primary-foreground shadow-sm\",\n        destructive:\n          \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 focus-visible:ring-destructive/20\",\n        outline:\n          \"bg-card text-primary border border-input hover:bg-primary hover:text-primary-foreground shadow-sm\",\n        secondary: \"bg-accent text-accent-foreground hover:bg-accent/90 shadow-sm\",\n        ghost: \"hover:bg-secondary hover:text-secondary-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n        success: \"bg-success text-success-foreground shadow-sm hover:bg-success/90\",\n        warning: \"bg-warning text-warning-foreground shadow-sm hover:bg-warning/90\",\n      },\n      size: {\n        default: \"px-4 py-2\",\n        sm: \"px-3 py-1.5 text-sm\",\n        lg: \"px-5 py-2.5 text-base\",\n        icon: \"size-9 p-2\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n  }) {\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n"],"mappings":";AAmDI;AAhDJ,SAAS,YAAY;AACrB,SAAS,WAA8B;AAEvC,SAAS,UAAU;AAEnB,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aACE;AAAA,QACF,SACE;AAAA,QACF,WAAW;AAAA,QACX,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAGK;AACH,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,MACzD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/ui/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../../lib/utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring/20 focus-visible:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary hover:bg-primary-dark text-primary-foreground shadow-sm\",\n        destructive:\n          \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 focus-visible:ring-destructive/20\",\n        outline:\n          \"bg-card text-primary border border-input hover:bg-primary hover:text-primary-foreground shadow-sm\",\n        secondary: \"bg-accent text-accent-foreground hover:bg-accent/90 shadow-sm\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n        success: \"bg-success text-success-foreground shadow-sm hover:bg-success/90\",\n        warning: \"bg-warning text-warning-foreground shadow-sm hover:bg-warning/90\",\n      },\n      size: {\n        default: \"px-4 py-2\",\n        sm: \"px-3 py-1.5 text-sm\",\n        lg: \"px-5 py-2.5 text-base\",\n        icon: \"size-9 p-2\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n  }) {\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n"],"mappings":";AAmDI;AAhDJ,SAAS,YAAY;AACrB,SAAS,WAA8B;AAEvC,SAAS,UAAU;AAEnB,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aACE;AAAA,QACF,SACE;AAAA,QACF,WAAW;AAAA,QACX,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAGK;AACH,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,MACzD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/ui/calendar/calendar.cjs

@@ -24,14 +24,16 @@ __export(calendar_exports, {
 module.exports = __toCommonJS(calendar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react_day_picker = require("react-day-picker");
+var import_locale = require("date-fns/locale");
 var import_utils = require("../../../lib/utils");
 var import_button = require("../button");
-function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
+function Calendar({ className, classNames, showOutsideDays = true, locale = import_locale.es, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react_day_picker.DayPicker,
     {
       showOutsideDays,
-      className: (0, import_utils.cn)("p-3", className),
+      locale,
+      className: (0, import_utils.cn)("rounded-md bg-white p-3 dark:bg-card", className),
       classNames: {
         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
         month: "space-y-4",

package/dist/components/ui/calendar/calendar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/calendar/calendar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { DayPicker } from \"react-day-picker\";\n\nimport { cn } from \"../../../lib/utils\";\nimport { buttonVariants } from \"../button\";\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>;\n\nfunction Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\",\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell: \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: \"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\",\n        ),\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle: \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      {...props}\n    />\n  );\n}\n\nexport { Calendar };\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAYI;AATJ,8BAA0B;AAE1B,mBAAmB;AACnB,oBAA+B;AAI/B,SAAS,SAAS,EAAE,WAAW,YAAY,kBAAkB,MAAM,GAAG,MAAM,GAAkB;AAC5F,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW,iBAAG,OAAO,SAAS;AAAA,MAC9B,YAAY;AAAA,QACV,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK;AAAA,QACL,gBAAY;AAAA,cACV,8BAAe,EAAE,SAAS,UAAU,CAAC;AAAA,UACrC;AAAA,QACF;AAAA,QACA,qBAAqB;AAAA,QACrB,iBAAiB;AAAA,QACjB,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WAAW;AAAA,QACX,KAAK;AAAA,QACL,MAAM;AAAA,QACN,SAAK;AAAA,cACH,8BAAe,EAAE,SAAS,QAAQ,CAAC;AAAA,UACnC;AAAA,QACF;AAAA,QACA,eAAe;AAAA,QACf,cACE;AAAA,QACF,WAAW;AAAA,QACX,aACE;AAAA,QACF,cAAc;AAAA,QACd,kBAAkB;AAAA,QAClB,YAAY;AAAA,QACZ,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/ui/calendar/calendar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { DayPicker } from \"react-day-picker\";\nimport { es } from \"date-fns/locale\";\n\nimport { cn } from \"../../../lib/utils\";\nimport { buttonVariants } from \"../button\";\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>;\n\nfunction Calendar({ className, classNames, showOutsideDays = true, locale = es, ...props }: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      locale={locale}\n      className={cn(\"rounded-md bg-white p-3 dark:bg-card\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\",\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell: \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: \"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\",\n        ),\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle: \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      {...props}\n    />\n  );\n}\n\nexport { Calendar };\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAaI;AAVJ,8BAA0B;AAC1B,oBAAmB;AAEnB,mBAAmB;AACnB,oBAA+B;AAI/B,SAAS,SAAS,EAAE,WAAW,YAAY,kBAAkB,MAAM,SAAS,kBAAI,GAAG,MAAM,GAAkB;AACzG,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAW,iBAAG,wCAAwC,SAAS;AAAA,MAC/D,YAAY;AAAA,QACV,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK;AAAA,QACL,gBAAY;AAAA,cACV,8BAAe,EAAE,SAAS,UAAU,CAAC;AAAA,UACrC;AAAA,QACF;AAAA,QACA,qBAAqB;AAAA,QACrB,iBAAiB;AAAA,QACjB,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WAAW;AAAA,QACX,KAAK;AAAA,QACL,MAAM;AAAA,QACN,SAAK;AAAA,cACH,8BAAe,EAAE,SAAS,QAAQ,CAAC;AAAA,UACnC;AAAA,QACF;AAAA,QACA,eAAe;AAAA,QACf,cACE;AAAA,QACF,WAAW;AAAA,QACX,aACE;AAAA,QACF,cAAc;AAAA,QACd,kBAAkB;AAAA,QAClB,YAAY;AAAA,QACZ,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/ui/calendar/calendar.d.cts

@@ -3,6 +3,6 @@ import * as React from 'react';
 import { DayPicker } from 'react-day-picker';
 
 type CalendarProps = React.ComponentProps<typeof DayPicker>;
-declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare function Calendar({ className, classNames, showOutsideDays, locale, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
 
 export { Calendar, type CalendarProps };

package/dist/components/ui/calendar/calendar.d.ts

@@ -3,6 +3,6 @@ import * as React from 'react';
 import { DayPicker } from 'react-day-picker';
 
 type CalendarProps = React.ComponentProps<typeof DayPicker>;
-declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare function Calendar({ className, classNames, showOutsideDays, locale, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
 
 export { Calendar, type CalendarProps };

package/dist/components/ui/calendar/calendar.js

@@ -1,14 +1,16 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { DayPicker } from "react-day-picker";
+import { es } from "date-fns/locale";
 import { cn } from "../../../lib/utils";
 import { buttonVariants } from "../button";
-function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
+function Calendar({ className, classNames, showOutsideDays = true, locale = es, ...props }) {
   return /* @__PURE__ */ jsx(
     DayPicker,
     {
       showOutsideDays,
-      className: cn("p-3", className),
+      locale,
+      className: cn("rounded-md bg-white p-3 dark:bg-card", className),
       classNames: {
         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
         month: "space-y-4",

package/dist/components/ui/calendar/calendar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/calendar/calendar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { DayPicker } from \"react-day-picker\";\n\nimport { cn } from \"../../../lib/utils\";\nimport { buttonVariants } from \"../button\";\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>;\n\nfunction Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\",\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell: \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: \"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\",\n        ),\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle: \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      {...props}\n    />\n  );\n}\n\nexport { Calendar };\n"],"mappings":";AAYI;AATJ,SAAS,iBAAiB;AAE1B,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAI/B,SAAS,SAAS,EAAE,WAAW,YAAY,kBAAkB,MAAM,GAAG,MAAM,GAAkB;AAC5F,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,OAAO,SAAS;AAAA,MAC9B,YAAY;AAAA,QACV,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK;AAAA,QACL,YAAY;AAAA,UACV,eAAe,EAAE,SAAS,UAAU,CAAC;AAAA,UACrC;AAAA,QACF;AAAA,QACA,qBAAqB;AAAA,QACrB,iBAAiB;AAAA,QACjB,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WAAW;AAAA,QACX,KAAK;AAAA,QACL,MAAM;AAAA,QACN,KAAK;AAAA,UACH,eAAe,EAAE,SAAS,QAAQ,CAAC;AAAA,UACnC;AAAA,QACF;AAAA,QACA,eAAe;AAAA,QACf,cACE;AAAA,QACF,WAAW;AAAA,QACX,aACE;AAAA,QACF,cAAc;AAAA,QACd,kBAAkB;AAAA,QAClB,YAAY;AAAA,QACZ,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/ui/calendar/calendar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { DayPicker } from \"react-day-picker\";\nimport { es } from \"date-fns/locale\";\n\nimport { cn } from \"../../../lib/utils\";\nimport { buttonVariants } from \"../button\";\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>;\n\nfunction Calendar({ className, classNames, showOutsideDays = true, locale = es, ...props }: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      locale={locale}\n      className={cn(\"rounded-md bg-white p-3 dark:bg-card\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\",\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell: \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: \"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\",\n        ),\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle: \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      {...props}\n    />\n  );\n}\n\nexport { Calendar };\n"],"mappings":";AAaI;AAVJ,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AAEnB,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAI/B,SAAS,SAAS,EAAE,WAAW,YAAY,kBAAkB,MAAM,SAAS,IAAI,GAAG,MAAM,GAAkB;AACzG,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,GAAG,wCAAwC,SAAS;AAAA,MAC/D,YAAY;AAAA,QACV,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK;AAAA,QACL,YAAY;AAAA,UACV,eAAe,EAAE,SAAS,UAAU,CAAC;AAAA,UACrC;AAAA,QACF;AAAA,QACA,qBAAqB;AAAA,QACrB,iBAAiB;AAAA,QACjB,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WAAW;AAAA,QACX,KAAK;AAAA,QACL,MAAM;AAAA,QACN,KAAK;AAAA,UACH,eAAe,EAAE,SAAS,QAAQ,CAAC;AAAA,UACnC;AAAA,QACF;AAAA,QACA,eAAe;AAAA,QACf,cACE;AAAA,QACF,WAAW;AAAA,QACX,aACE;AAAA,QACF,cAAc;AAAA,QACd,kBAAkB;AAAA,QAClB,YAAY;AAAA,QACZ,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/ui/date-picker/date-picker.cjs

@@ -40,64 +40,140 @@ var import_lucide_react = require("lucide-react");
 var import_utils = require("../../../lib/utils");
 var import_button = require("../button");
 var import_popover = require("../popover");
-const monthNames = [
-  "Enero",
-  "Febrero",
-  "Marzo",
-  "Abril",
-  "Mayo",
-  "Junio",
-  "Julio",
-  "Agosto",
-  "Septiembre",
-  "Octubre",
-  "Noviembre",
-  "Diciembre"
-];
-const dayNames = ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "S\xE1"];
+function getWeekStartsOn(locale) {
+  const w = locale.options?.weekStartsOn;
+  if (w === void 0) return 1;
+  return w;
+}
+function useMonthLabels(locale) {
+  return React.useMemo(
+    () => Array.from({ length: 12 }, (_, i) => (0, import_date_fns.format)(new Date(2024, i, 1), "LLL", { locale })),
+    [locale]
+  );
+}
+function weekdayTwoLetterLabel(abbrev) {
+  const graphemes = [...abbrev.normalize("NFC")];
+  if (graphemes.length <= 2) {
+    return abbrev;
+  }
+  return graphemes.slice(0, 2).join("");
+}
+function useWeekdayLabels(locale) {
+  return React.useMemo(() => {
+    const weekStartsOn = getWeekStartsOn(locale);
+    const start = (0, import_date_fns.startOfWeek)(new Date(2024, 0, 3), { weekStartsOn });
+    return Array.from({ length: 7 }, (_, i) => {
+      const abbrev = (0, import_date_fns.format)((0, import_date_fns.addDays)(start, i), "EEE", { locale });
+      return weekdayTwoLetterLabel(abbrev);
+    });
+  }, [locale]);
+}
+function getDaysInMonth(date, weekStartsOn) {
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  const lastDay = new Date(year, month + 1, 0);
+  const daysInMonth = lastDay.getDate();
+  const firstDay = new Date(year, month, 1);
+  const startingDayOfWeek = firstDay.getDay();
+  const offset = (startingDayOfWeek - weekStartsOn + 7) % 7;
+  const days = [];
+  for (let i = 0; i < offset; i++) {
+    days.push(null);
+  }
+  for (let day = 1; day <= daysInMonth; day++) {
+    days.push(new Date(year, month, day));
+  }
+  return days;
+}
+function DatePickerSelect({
+  className,
+  wrapperClassName,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_utils.cn)("relative", wrapperClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "select",
+      {
+        ...props,
+        className: (0, import_utils.cn)(
+          "h-9 w-full min-w-0 cursor-pointer appearance-none rounded-md border border-input bg-card py-0 pl-2 pr-9 text-left text-sm shadow-xs outline-none",
+          "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        children
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_lucide_react.ChevronDown,
+      {
+        className: "pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 shrink-0 text-muted-foreground opacity-80",
+        "aria-hidden": true
+      }
+    )
+  ] });
+}
 function DatePicker({
   value,
   onChange,
   placeholder = "Seleccionar fecha",
   disabled = false,
-  className
+  className,
+  locale = import_locale.es,
+  fromYear,
+  toYear
 }) {
   const [open, setOpen] = React.useState(false);
-  const [currentMonth, setCurrentMonth] = React.useState(value || /* @__PURE__ */ new Date());
-  const getDaysInMonth = (date) => {
-    const year = date.getFullYear();
-    const month = date.getMonth();
-    const firstDay = new Date(year, month, 1);
-    const lastDay = new Date(year, month + 1, 0);
-    const daysInMonth = lastDay.getDate();
-    const startingDayOfWeek = firstDay.getDay();
-    const days2 = [];
-    for (let i = 0; i < startingDayOfWeek; i++) {
-      days2.push(null);
+  const [currentMonth, setCurrentMonth] = React.useState(() => {
+    const base = value ?? /* @__PURE__ */ new Date();
+    return new Date(base.getFullYear(), base.getMonth(), 1);
+  });
+  const monthLabels = useMonthLabels(locale);
+  const weekdayLabels = useWeekdayLabels(locale);
+  const weekStartsOn = getWeekStartsOn(locale);
+  React.useEffect(() => {
+    if (value) {
+      setCurrentMonth(new Date(value.getFullYear(), value.getMonth(), 1));
     }
-    for (let day = 1; day <= daysInMonth; day++) {
-      days2.push(new Date(Date.UTC(year, month, day)));
+  }, [value]);
+  const days = React.useMemo(
+    () => getDaysInMonth(currentMonth, weekStartsOn),
+    [currentMonth, weekStartsOn]
+  );
+  const yearOptions = React.useMemo(() => {
+    const y = (/* @__PURE__ */ new Date()).getFullYear();
+    const from = fromYear ?? y - 100;
+    const to = toYear ?? y + 10;
+    const list = [];
+    for (let i = from; i <= to; i++) {
+      list.push(i);
     }
-    return days2;
-  };
-  const days = getDaysInMonth(currentMonth);
+    return list;
+  }, [fromYear, toYear]);
   const handleDateSelect = (date) => {
     onChange?.(date);
     setOpen(false);
   };
   const goToPreviousMonth = () => {
-    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1));
+    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1));
   };
   const goToNextMonth = () => {
-    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1));
+    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1));
+  };
+  const setMonthFromSelect = (monthIndex) => {
+    setCurrentMonth(new Date(currentMonth.getFullYear(), monthIndex, 1));
+  };
+  const setYearFromSelect = (year) => {
+    setCurrentMonth(new Date(year, currentMonth.getMonth(), 1));
   };
   const isToday = (date) => {
     const today = /* @__PURE__ */ new Date();
-    return date.getUTCFullYear() === today.getFullYear() && date.getUTCMonth() === today.getMonth() && date.getUTCDate() === today.getDate();
+    return date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate();
   };
   const isSelected = (date) => {
     if (!value) return false;
-    return date.getUTCFullYear() === value.getFullYear() && date.getUTCMonth() === value.getMonth() && date.getUTCDate() === value.getDate();
+    return date.getFullYear() === value.getFullYear() && date.getMonth() === value.getMonth() && date.getDate() === value.getDate();
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_popover.Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -112,32 +188,78 @@ function DatePicker({
         ),
         disabled,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Calendar, { className: "mr-2 h-4 w-4" }),
-          value ? (0, import_date_fns.format)(value, "dd/MM/yyyy", { locale: import_locale.es }) : placeholder
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Calendar, { className: "mr-2 h-4 w-4 shrink-0" }),
+          value ? (0, import_date_fns.format)(value, "P", { locale }) : placeholder
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { variant: "outline", size: "sm", onClick: goToPreviousMonth, className: "h-7 w-7 p-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronLeft, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-sm font-medium", children: [
-          monthNames[currentMonth.getMonth()],
-          " ",
-          currentMonth.getFullYear()
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { variant: "outline", size: "sm", onClick: goToNextMonth, className: "h-7 w-7 p-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronRight, { className: "h-4 w-4" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.PopoverContent, { className: "w-auto bg-white p-0 dark:bg-card", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-3 flex flex-wrap items-center justify-center gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_button.Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: goToPreviousMonth,
+            className: "h-9 w-9 shrink-0 p-0",
+            "aria-label": locale.code?.startsWith("es") ? "Mes anterior" : "Previous month",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronLeft, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          DatePickerSelect,
+          {
+            wrapperClassName: "w-[6.75rem] shrink-0",
+            value: currentMonth.getMonth(),
+            onChange: (e) => setMonthFromSelect(Number(e.target.value)),
+            "aria-label": locale.code?.startsWith("es") ? "Mes" : "Month",
+            children: monthLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: i, children: label }, label))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          DatePickerSelect,
+          {
+            wrapperClassName: "w-[5.5rem] shrink-0",
+            className: "tabular-nums text-center",
+            value: currentMonth.getFullYear(),
+            onChange: (e) => setYearFromSelect(Number(e.target.value)),
+            "aria-label": locale.code?.startsWith("es") ? "A\xF1o" : "Year",
+            children: yearOptions.map((y) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: y, children: y }, y))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_button.Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: goToNextMonth,
+            className: "h-9 w-9 shrink-0 p-0",
+            "aria-label": locale.code?.startsWith("es") ? "Mes siguiente" : "Next month",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronRight, { className: "h-4 w-4" })
+          }
+        )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-2 grid grid-cols-7 gap-1", children: dayNames.map((day) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "py-2 text-center text-xs font-medium text-muted-foreground", children: day }, day)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-2 grid grid-cols-7 gap-1", children: weekdayLabels.map((day, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: "px-0.5 py-2 text-center text-sm font-medium capitalize leading-tight text-muted-foreground",
+          children: day
+        },
+        i
+      )) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-7 gap-1", children: days.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex h-9 w-9 items-center justify-center", children: day ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_button.Button,
         {
+          type: "button",
           variant: "ghost",
           size: "sm",
           className: (0, import_utils.cn)(
             "h-9 w-9 p-0 font-normal",
-            isSelected(day) && "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
-            isToday(day) && !isSelected(day) && "bg-accent text-accent-foreground",
-            "hover:bg-muted"
+            isSelected(day) && "bg-primary text-primary-foreground hover:bg-primary-dark hover:text-primary-foreground",
+            isToday(day) && !isSelected(day) && "bg-accent text-accent-foreground hover:bg-accent/80 hover:text-accent-foreground",
+            !isSelected(day) && !isToday(day) && "hover:bg-muted hover:text-foreground"
           ),
           onClick: () => handleDateSelect(day),
           children: day.getDate()

package/dist/components/ui/date-picker/date-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/date-picker/date-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { format } from \"date-fns\";\nimport { es } from \"date-fns/locale\";\nimport { Calendar as CalendarIcon, ChevronLeft, ChevronRight } from \"lucide-react\";\n\nimport { cn } from \"../../../lib/utils\";\nimport { Button } from \"../button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover\";\n\nexport interface DatePickerProps {\n  value?: Date;\n  onChange?: (date: Date | undefined) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  className?: string;\n}\n\nconst monthNames = [\n  \"Enero\",\n  \"Febrero\",\n  \"Marzo\",\n  \"Abril\",\n  \"Mayo\",\n  \"Junio\",\n  \"Julio\",\n  \"Agosto\",\n  \"Septiembre\",\n  \"Octubre\",\n  \"Noviembre\",\n  \"Diciembre\",\n];\nconst dayNames = [\"Do\", \"Lu\", \"Ma\", \"Mi\", \"Ju\", \"Vi\", \"Sá\"];\n\nfunction DatePicker({\n  value,\n  onChange,\n  placeholder = \"Seleccionar fecha\",\n  disabled = false,\n  className,\n}: DatePickerProps) {\n  const [open, setOpen] = React.useState(false);\n  const [currentMonth, setCurrentMonth] = React.useState(value || new Date());\n\n  const getDaysInMonth = (date: Date) => {\n    const year = date.getFullYear();\n    const month = date.getMonth();\n    const firstDay = new Date(year, month, 1);\n    const lastDay = new Date(year, month + 1, 0);\n    const daysInMonth = lastDay.getDate();\n    const startingDayOfWeek = firstDay.getDay();\n\n    const days: (Date | null)[] = [];\n\n    for (let i = 0; i < startingDayOfWeek; i++) {\n      days.push(null);\n    }\n\n    for (let day = 1; day <= daysInMonth; day++) {\n      days.push(new Date(Date.UTC(year, month, day)));\n    }\n\n    return days;\n  };\n\n  const days = getDaysInMonth(currentMonth);\n\n  const handleDateSelect = (date: Date) => {\n    onChange?.(date);\n    setOpen(false);\n  };\n\n  const goToPreviousMonth = () => {\n    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1));\n  };\n\n  const goToNextMonth = () => {\n    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1));\n  };\n\n  const isToday = (date: Date) => {\n    const today = new Date();\n    return (\n      date.getUTCFullYear() === today.getFullYear() &&\n      date.getUTCMonth() === today.getMonth() &&\n      date.getUTCDate() === today.getDate()\n    );\n  };\n\n  const isSelected = (date: Date) => {\n    if (!value) return false;\n    return (\n      date.getUTCFullYear() === value.getFullYear() &&\n      date.getUTCMonth() === value.getMonth() &&\n      date.getUTCDate() === value.getDate()\n    );\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          data-slot=\"date-picker\"\n          className={cn(\n            \"w-full justify-start text-left font-normal\",\n            !value && \"text-muted-foreground\",\n            className,\n          )}\n          disabled={disabled}\n        >\n          <CalendarIcon className=\"mr-2 h-4 w-4\" />\n          {value ? format(value, \"dd/MM/yyyy\", { locale: es }) : placeholder}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <div className=\"p-3\">\n          <div className=\"mb-4 flex items-center justify-between\">\n            <Button variant=\"outline\" size=\"sm\" onClick={goToPreviousMonth} className=\"h-7 w-7 p-0\">\n              <ChevronLeft className=\"h-4 w-4\" />\n            </Button>\n            <div className=\"text-sm font-medium\">\n              {monthNames[currentMonth.getMonth()]} {currentMonth.getFullYear()}\n            </div>\n            <Button variant=\"outline\" size=\"sm\" onClick={goToNextMonth} className=\"h-7 w-7 p-0\">\n              <ChevronRight className=\"h-4 w-4\" />\n            </Button>\n          </div>\n\n          <div className=\"mb-2 grid grid-cols-7 gap-1\">\n            {dayNames.map((day) => (\n              <div key={day} className=\"py-2 text-center text-xs font-medium text-muted-foreground\">\n                {day}\n              </div>\n            ))}\n          </div>\n\n          <div className=\"grid grid-cols-7 gap-1\">\n            {days.map((day, index) => (\n              <div key={index} className=\"flex h-9 w-9 items-center justify-center\">\n                {day ? (\n                  <Button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className={cn(\n                      \"h-9 w-9 p-0 font-normal\",\n                      isSelected(day) &&\n                        \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground\",\n                      isToday(day) && !isSelected(day) && \"bg-accent text-accent-foreground\",\n                      \"hover:bg-muted\",\n                    )}\n                    onClick={() => handleDateSelect(day)}\n                  >\n                    {day.getDate()}\n                  </Button>\n                ) : (\n                  <div className=\"h-9 w-9\" />\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport { DatePicker };\n"],"mappings":"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","names":["days","CalendarIcon"]}
+{"version":3,"sources":["../../../../src/components/ui/date-picker/date-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { addDays, format, startOfWeek } from \"date-fns\";\nimport type { Locale } from \"date-fns\";\nimport { es } from \"date-fns/locale\";\nimport {\n  Calendar as CalendarIcon,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n} from \"lucide-react\";\n\nimport { cn } from \"../../../lib/utils\";\nimport { Button } from \"../button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover\";\n\nexport interface DatePickerProps {\n  value?: Date;\n  onChange?: (date: Date | undefined) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  className?: string;\n  /**\n   * Locale de `date-fns` para nombres de mes/día y formato de la fecha en el botón.\n   * Por defecto español (`es`).\n   */\n  locale?: Locale;\n  /** Año mínimo en el selector (inclusive). */\n  fromYear?: number;\n  /** Año máximo en el selector (inclusive). */\n  toYear?: number;\n}\n\nfunction getWeekStartsOn(locale: Locale): 0 | 1 | 2 | 3 | 4 | 5 | 6 {\n  const w = locale.options?.weekStartsOn;\n  if (w === undefined) return 1;\n  return w as 0 | 1 | 2 | 3 | 4 | 5 | 6;\n}\n\n/** Meses abreviados (`LLL`) para que el `<select>` sea compacto dentro del popover. */\nfunction useMonthLabels(locale: Locale) {\n  return React.useMemo(\n    () => Array.from({ length: 12 }, (_, i) => format(new Date(2024, i, 1), \"LLL\", { locale })),\n    [locale],\n  );\n}\n\n/** Abreviatura del día en exactamente dos caracteres visibles (p. ej. lun → lu, Wed → We). */\nfunction weekdayTwoLetterLabel(abbrev: string): string {\n  const graphemes = [...abbrev.normalize(\"NFC\")];\n  if (graphemes.length <= 2) {\n    return abbrev;\n  }\n  return graphemes.slice(0, 2).join(\"\");\n}\n\nfunction useWeekdayLabels(locale: Locale) {\n  return React.useMemo(() => {\n    const weekStartsOn = getWeekStartsOn(locale);\n    const start = startOfWeek(new Date(2024, 0, 3), { weekStartsOn });\n    return Array.from({ length: 7 }, (_, i) => {\n      const abbrev = format(addDays(start, i), \"EEE\", { locale });\n      return weekdayTwoLetterLabel(abbrev);\n    });\n  }, [locale]);\n}\n\nfunction getDaysInMonth(date: Date, weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6) {\n  const year = date.getFullYear();\n  const month = date.getMonth();\n  const lastDay = new Date(year, month + 1, 0);\n  const daysInMonth = lastDay.getDate();\n  const firstDay = new Date(year, month, 1);\n  const startingDayOfWeek = firstDay.getDay();\n  const offset = (startingDayOfWeek - weekStartsOn + 7) % 7;\n\n  const days: (Date | null)[] = [];\n  for (let i = 0; i < offset; i++) {\n    days.push(null);\n  }\n  for (let day = 1; day <= daysInMonth; day++) {\n    days.push(new Date(year, month, day));\n  }\n  return days;\n}\n\n/** Select nativo sin flecha del sistema: el chevron es un icono con margen fijo (padding fiable en todos los navegadores). */\nfunction DatePickerSelect({\n  className,\n  wrapperClassName,\n  children,\n  ...props\n}: React.ComponentProps<\"select\"> & { wrapperClassName?: string }) {\n  return (\n    <div className={cn(\"relative\", wrapperClassName)}>\n      <select\n        {...props}\n        className={cn(\n          \"h-9 w-full min-w-0 cursor-pointer appearance-none rounded-md border border-input bg-card py-0 pl-2 pr-9 text-left text-sm shadow-xs outline-none\",\n          \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          className,\n        )}\n      >\n        {children}\n      </select>\n      <ChevronDown\n        className=\"pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 shrink-0 text-muted-foreground opacity-80\"\n        aria-hidden\n      />\n    </div>\n  );\n}\n\nfunction DatePicker({\n  value,\n  onChange,\n  placeholder = \"Seleccionar fecha\",\n  disabled = false,\n  className,\n  locale = es,\n  fromYear,\n  toYear,\n}: DatePickerProps) {\n  const [open, setOpen] = React.useState(false);\n  const [currentMonth, setCurrentMonth] = React.useState(() => {\n    const base = value ?? new Date();\n    return new Date(base.getFullYear(), base.getMonth(), 1);\n  });\n\n  const monthLabels = useMonthLabels(locale);\n  const weekdayLabels = useWeekdayLabels(locale);\n  const weekStartsOn = getWeekStartsOn(locale);\n\n  React.useEffect(() => {\n    if (value) {\n      setCurrentMonth(new Date(value.getFullYear(), value.getMonth(), 1));\n    }\n  }, [value]);\n\n  const days = React.useMemo(\n    () => getDaysInMonth(currentMonth, weekStartsOn),\n    [currentMonth, weekStartsOn],\n  );\n\n  const yearOptions = React.useMemo(() => {\n    const y = new Date().getFullYear();\n    const from = fromYear ?? y - 100;\n    const to = toYear ?? y + 10;\n    const list: number[] = [];\n    for (let i = from; i <= to; i++) {\n      list.push(i);\n    }\n    return list;\n  }, [fromYear, toYear]);\n\n  const handleDateSelect = (date: Date) => {\n    onChange?.(date);\n    setOpen(false);\n  };\n\n  const goToPreviousMonth = () => {\n    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1));\n  };\n\n  const goToNextMonth = () => {\n    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1));\n  };\n\n  const setMonthFromSelect = (monthIndex: number) => {\n    setCurrentMonth(new Date(currentMonth.getFullYear(), monthIndex, 1));\n  };\n\n  const setYearFromSelect = (year: number) => {\n    setCurrentMonth(new Date(year, currentMonth.getMonth(), 1));\n  };\n\n  const isToday = (date: Date) => {\n    const today = new Date();\n    return (\n      date.getFullYear() === today.getFullYear() &&\n      date.getMonth() === today.getMonth() &&\n      date.getDate() === today.getDate()\n    );\n  };\n\n  const isSelected = (date: Date) => {\n    if (!value) return false;\n    return (\n      date.getFullYear() === value.getFullYear() &&\n      date.getMonth() === value.getMonth() &&\n      date.getDate() === value.getDate()\n    );\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          data-slot=\"date-picker\"\n          className={cn(\n            \"w-full justify-start text-left font-normal\",\n            !value && \"text-muted-foreground\",\n            className,\n          )}\n          disabled={disabled}\n        >\n          <CalendarIcon className=\"mr-2 h-4 w-4 shrink-0\" />\n          {value ? format(value, \"P\", { locale }) : placeholder}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto bg-white p-0 dark:bg-card\" align=\"start\">\n        <div className=\"p-3\">\n          <div className=\"mb-3 flex flex-wrap items-center justify-center gap-1.5\">\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={goToPreviousMonth}\n              className=\"h-9 w-9 shrink-0 p-0\"\n              aria-label={locale.code?.startsWith(\"es\") ? \"Mes anterior\" : \"Previous month\"}\n            >\n              <ChevronLeft className=\"h-4 w-4\" />\n            </Button>\n            <DatePickerSelect\n              wrapperClassName=\"w-[6.75rem] shrink-0\"\n              value={currentMonth.getMonth()}\n              onChange={(e) => setMonthFromSelect(Number(e.target.value))}\n              aria-label={locale.code?.startsWith(\"es\") ? \"Mes\" : \"Month\"}\n            >\n              {monthLabels.map((label, i) => (\n                <option key={label} value={i}>\n                  {label}\n                </option>\n              ))}\n            </DatePickerSelect>\n            <DatePickerSelect\n              wrapperClassName=\"w-[5.5rem] shrink-0\"\n              className=\"tabular-nums text-center\"\n              value={currentMonth.getFullYear()}\n              onChange={(e) => setYearFromSelect(Number(e.target.value))}\n              aria-label={locale.code?.startsWith(\"es\") ? \"Año\" : \"Year\"}\n            >\n              {yearOptions.map((y) => (\n                <option key={y} value={y}>\n                  {y}\n                </option>\n              ))}\n            </DatePickerSelect>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={goToNextMonth}\n              className=\"h-9 w-9 shrink-0 p-0\"\n              aria-label={locale.code?.startsWith(\"es\") ? \"Mes siguiente\" : \"Next month\"}\n            >\n              <ChevronRight className=\"h-4 w-4\" />\n            </Button>\n          </div>\n\n          <div className=\"mb-2 grid grid-cols-7 gap-1\">\n            {weekdayLabels.map((day, i) => (\n              <div\n                key={i}\n                className=\"px-0.5 py-2 text-center text-sm font-medium capitalize leading-tight text-muted-foreground\"\n              >\n                {day}\n              </div>\n            ))}\n          </div>\n\n          <div className=\"grid grid-cols-7 gap-1\">\n            {days.map((day, index) => (\n              <div key={index} className=\"flex h-9 w-9 items-center justify-center\">\n                {day ? (\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className={cn(\n                      \"h-9 w-9 p-0 font-normal\",\n                      isSelected(day) &&\n                        \"bg-primary text-primary-foreground hover:bg-primary-dark hover:text-primary-foreground\",\n                      isToday(day) &&\n                        !isSelected(day) &&\n                        \"bg-accent text-accent-foreground hover:bg-accent/80 hover:text-accent-foreground\",\n                      !isSelected(day) && !isToday(day) && \"hover:bg-muted hover:text-foreground\",\n                    )}\n                    onClick={() => handleDateSelect(day)}\n                  >\n                    {day.getDate()}\n                  </Button>\n                ) : (\n                  <div className=\"h-9 w-9\" />\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport { DatePicker };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+FI;AA7FJ,YAAuB;AACvB,sBAA6C;AAE7C,oBAAmB;AACnB,0BAKO;AAEP,mBAAmB;AACnB,oBAAuB;AACvB,qBAAwD;AAmBxD,SAAS,gBAAgB,QAA2C;AAClE,QAAM,IAAI,OAAO,SAAS;AAC1B,MAAI,MAAM,OAAW,QAAO;AAC5B,SAAO;AACT;AAGA,SAAS,eAAe,QAAgB;AACtC,SAAO,MAAM;AAAA,IACX,MAAM,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,CAAC,GAAG,UAAM,wBAAO,IAAI,KAAK,MAAM,GAAG,CAAC,GAAG,OAAO,EAAE,OAAO,CAAC,CAAC;AAAA,IAC1F,CAAC,MAAM;AAAA,EACT;AACF;AAGA,SAAS,sBAAsB,QAAwB;AACrD,QAAM,YAAY,CAAC,GAAG,OAAO,UAAU,KAAK,CAAC;AAC7C,MAAI,UAAU,UAAU,GAAG;AACzB,WAAO;AAAA,EACT;AACA,SAAO,UAAU,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE;AACtC;AAEA,SAAS,iBAAiB,QAAgB;AACxC,SAAO,MAAM,QAAQ,MAAM;AACzB,UAAM,eAAe,gBAAgB,MAAM;AAC3C,UAAM,YAAQ,6BAAY,IAAI,KAAK,MAAM,GAAG,CAAC,GAAG,EAAE,aAAa,CAAC;AAChE,WAAO,MAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM;AACzC,YAAM,aAAS,4BAAO,yBAAQ,OAAO,CAAC,GAAG,OAAO,EAAE,OAAO,CAAC;AAC1D,aAAO,sBAAsB,MAAM;AAAA,IACrC,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AACb;AAEA,SAAS,eAAe,MAAY,cAAyC;AAC3E,QAAM,OAAO,KAAK,YAAY;AAC9B,QAAM,QAAQ,KAAK,SAAS;AAC5B,QAAM,UAAU,IAAI,KAAK,MAAM,QAAQ,GAAG,CAAC;AAC3C,QAAM,cAAc,QAAQ,QAAQ;AACpC,QAAM,WAAW,IAAI,KAAK,MAAM,OAAO,CAAC;AACxC,QAAM,oBAAoB,SAAS,OAAO;AAC1C,QAAM,UAAU,oBAAoB,eAAe,KAAK;AAExD,QAAM,OAAwB,CAAC;AAC/B,WAAS,IAAI,GAAG,IAAI,QAAQ,KAAK;AAC/B,SAAK,KAAK,IAAI;AAAA,EAChB;AACA,WAAS,MAAM,GAAG,OAAO,aAAa,OAAO;AAC3C,SAAK,KAAK,IAAI,KAAK,MAAM,OAAO,GAAG,CAAC;AAAA,EACtC;AACA,SAAO;AACT;AAGA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmE;AACjE,SACE,6CAAC,SAAI,eAAW,iBAAG,YAAY,gBAAgB,GAC7C;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAW;AAAA;AAAA,IACb;AAAA,KACF;AAEJ;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,MAAM;AAC3D,UAAM,OAAO,SAAS,oBAAI,KAAK;AAC/B,WAAO,IAAI,KAAK,KAAK,YAAY,GAAG,KAAK,SAAS,GAAG,CAAC;AAAA,EACxD,CAAC;AAED,QAAM,cAAc,eAAe,MAAM;AACzC,QAAM,gBAAgB,iBAAiB,MAAM;AAC7C,QAAM,eAAe,gBAAgB,MAAM;AAE3C,QAAM,UAAU,MAAM;AACpB,QAAI,OAAO;AACT,sBAAgB,IAAI,KAAK,MAAM,YAAY,GAAG,MAAM,SAAS,GAAG,CAAC,CAAC;AAAA,IACpE;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,OAAO,MAAM;AAAA,IACjB,MAAM,eAAe,cAAc,YAAY;AAAA,IAC/C,CAAC,cAAc,YAAY;AAAA,EAC7B;AAEA,QAAM,cAAc,MAAM,QAAQ,MAAM;AACtC,UAAM,KAAI,oBAAI,KAAK,GAAE,YAAY;AACjC,UAAM,OAAO,YAAY,IAAI;AAC7B,UAAM,KAAK,UAAU,IAAI;AACzB,UAAM,OAAiB,CAAC;AACxB,aAAS,IAAI,MAAM,KAAK,IAAI,KAAK;AAC/B,WAAK,KAAK,CAAC;AAAA,IACb;AACA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,MAAM,CAAC;AAErB,QAAM,mBAAmB,CAAC,SAAe;AACvC,eAAW,IAAI;AACf,YAAQ,KAAK;AAAA,EACf;AAEA,QAAM,oBAAoB,MAAM;AAC9B,oBAAgB,IAAI,KAAK,aAAa,YAAY,GAAG,aAAa,SAAS,IAAI,GAAG,CAAC,CAAC;AAAA,EACtF;AAEA,QAAM,gBAAgB,MAAM;AAC1B,oBAAgB,IAAI,KAAK,aAAa,YAAY,GAAG,aAAa,SAAS,IAAI,GAAG,CAAC,CAAC;AAAA,EACtF;AAEA,QAAM,qBAAqB,CAAC,eAAuB;AACjD,oBAAgB,IAAI,KAAK,aAAa,YAAY,GAAG,YAAY,CAAC,CAAC;AAAA,EACrE;AAEA,QAAM,oBAAoB,CAAC,SAAiB;AAC1C,oBAAgB,IAAI,KAAK,MAAM,aAAa,SAAS,GAAG,CAAC,CAAC;AAAA,EAC5D;AAEA,QAAM,UAAU,CAAC,SAAe;AAC9B,UAAM,QAAQ,oBAAI,KAAK;AACvB,WACE,KAAK,YAAY,MAAM,MAAM,YAAY,KACzC,KAAK,SAAS,MAAM,MAAM,SAAS,KACnC,KAAK,QAAQ,MAAM,MAAM,QAAQ;AAAA,EAErC;AAEA,QAAM,aAAa,CAAC,SAAe;AACjC,QAAI,CAAC,MAAO,QAAO;AACnB,WACE,KAAK,YAAY,MAAM,MAAM,YAAY,KACzC,KAAK,SAAS,MAAM,MAAM,SAAS,KACnC,KAAK,QAAQ,MAAM,MAAM,QAAQ;AAAA,EAErC;AAEA,SACE,6CAAC,0BAAQ,MAAY,cAAc,SACjC;AAAA,gDAAC,iCAAe,SAAO,MACrB;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,aAAU;AAAA,QACV,eAAW;AAAA,UACT;AAAA,UACA,CAAC,SAAS;AAAA,UACV;AAAA,QACF;AAAA,QACA;AAAA,QAEA;AAAA,sDAAC,oBAAAA,UAAA,EAAa,WAAU,yBAAwB;AAAA,UAC/C,YAAQ,wBAAO,OAAO,KAAK,EAAE,OAAO,CAAC,IAAI;AAAA;AAAA;AAAA,IAC5C,GACF;AAAA,IACA,4CAAC,iCAAe,WAAU,oCAAmC,OAAM,SACjE,uDAAC,SAAI,WAAU,OACb;AAAA,mDAAC,SAAI,WAAU,2DACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YACV,cAAY,OAAO,MAAM,WAAW,IAAI,IAAI,iBAAiB;AAAA,YAE7D,sDAAC,mCAAY,WAAU,WAAU;AAAA;AAAA,QACnC;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,kBAAiB;AAAA,YACjB,OAAO,aAAa,SAAS;AAAA,YAC7B,UAAU,CAAC,MAAM,mBAAmB,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,YAC1D,cAAY,OAAO,MAAM,WAAW,IAAI,IAAI,QAAQ;AAAA,YAEnD,sBAAY,IAAI,CAAC,OAAO,MACvB,4CAAC,YAAmB,OAAO,GACxB,mBADU,KAEb,CACD;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,kBAAiB;AAAA,YACjB,WAAU;AAAA,YACV,OAAO,aAAa,YAAY;AAAA,YAChC,UAAU,CAAC,MAAM,kBAAkB,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,YACzD,cAAY,OAAO,MAAM,WAAW,IAAI,IAAI,WAAQ;AAAA,YAEnD,sBAAY,IAAI,CAAC,MAChB,4CAAC,YAAe,OAAO,GACpB,eADU,CAEb,CACD;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YACV,cAAY,OAAO,MAAM,WAAW,IAAI,IAAI,kBAAkB;AAAA,YAE9D,sDAAC,oCAAa,WAAU,WAAU;AAAA;AAAA,QACpC;AAAA,SACF;AAAA,MAEA,4CAAC,SAAI,WAAU,+BACZ,wBAAc,IAAI,CAAC,KAAK,MACvB;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA,UAET;AAAA;AAAA,QAHI;AAAA,MAIP,CACD,GACH;AAAA,MAEA,4CAAC,SAAI,WAAU,0BACZ,eAAK,IAAI,CAAC,KAAK,UACd,4CAAC,SAAgB,WAAU,4CACxB,gBACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,eAAW;AAAA,YACT;AAAA,YACA,WAAW,GAAG,KACZ;AAAA,YACF,QAAQ,GAAG,KACT,CAAC,WAAW,GAAG,KACf;AAAA,YACF,CAAC,WAAW,GAAG,KAAK,CAAC,QAAQ,GAAG,KAAK;AAAA,UACvC;AAAA,UACA,SAAS,MAAM,iBAAiB,GAAG;AAAA,UAElC,cAAI,QAAQ;AAAA;AAAA,MACf,IAEA,4CAAC,SAAI,WAAU,WAAU,KApBnB,KAsBV,CACD,GACH;AAAA,OACF,GACF;AAAA,KACF;AAEJ;","names":["CalendarIcon"]}

package/dist/components/ui/date-picker/date-picker.d.cts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Locale } from 'date-fns';
 
 interface DatePickerProps {
     value?: Date;
@@ -6,7 +7,16 @@ interface DatePickerProps {
     placeholder?: string;
     disabled?: boolean;
     className?: string;
+    /**
+     * Locale de `date-fns` para nombres de mes/día y formato de la fecha en el botón.
+     * Por defecto español (`es`).
+     */
+    locale?: Locale;
+    /** Año mínimo en el selector (inclusive). */
+    fromYear?: number;
+    /** Año máximo en el selector (inclusive). */
+    toYear?: number;
 }
-declare function DatePicker({ value, onChange, placeholder, disabled, className, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare function DatePicker({ value, onChange, placeholder, disabled, className, locale, fromYear, toYear, }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
 export { DatePicker, type DatePickerProps };

package/dist/components/ui/date-picker/date-picker.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Locale } from 'date-fns';
 
 interface DatePickerProps {
     value?: Date;
@@ -6,7 +7,16 @@ interface DatePickerProps {
     placeholder?: string;
     disabled?: boolean;
     className?: string;
+    /**
+     * Locale de `date-fns` para nombres de mes/día y formato de la fecha en el botón.
+     * Por defecto español (`es`).
+     */
+    locale?: Locale;
+    /** Año mínimo en el selector (inclusive). */
+    fromYear?: number;
+    /** Año máximo en el selector (inclusive). */
+    toYear?: number;
 }
-declare function DatePicker({ value, onChange, placeholder, disabled, className, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare function DatePicker({ value, onChange, placeholder, disabled, className, locale, fromYear, toYear, }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
 export { DatePicker, type DatePickerProps };

package/dist/components/ui/date-picker/date-picker.js

@@ -1,70 +1,151 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { format } from "date-fns";
+import { addDays, format, startOfWeek } from "date-fns";
 import { es } from "date-fns/locale";
-import { Calendar as CalendarIcon, ChevronLeft, ChevronRight } from "lucide-react";
+import {
+  Calendar as CalendarIcon,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight
+} from "lucide-react";
 import { cn } from "../../../lib/utils";
 import { Button } from "../button";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
-const monthNames = [
-  "Enero",
-  "Febrero",
-  "Marzo",
-  "Abril",
-  "Mayo",
-  "Junio",
-  "Julio",
-  "Agosto",
-  "Septiembre",
-  "Octubre",
-  "Noviembre",
-  "Diciembre"
-];
-const dayNames = ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "S\xE1"];
+function getWeekStartsOn(locale) {
+  const w = locale.options?.weekStartsOn;
+  if (w === void 0) return 1;
+  return w;
+}
+function useMonthLabels(locale) {
+  return React.useMemo(
+    () => Array.from({ length: 12 }, (_, i) => format(new Date(2024, i, 1), "LLL", { locale })),
+    [locale]
+  );
+}
+function weekdayTwoLetterLabel(abbrev) {
+  const graphemes = [...abbrev.normalize("NFC")];
+  if (graphemes.length <= 2) {
+    return abbrev;
+  }
+  return graphemes.slice(0, 2).join("");
+}
+function useWeekdayLabels(locale) {
+  return React.useMemo(() => {
+    const weekStartsOn = getWeekStartsOn(locale);
+    const start = startOfWeek(new Date(2024, 0, 3), { weekStartsOn });
+    return Array.from({ length: 7 }, (_, i) => {
+      const abbrev = format(addDays(start, i), "EEE", { locale });
+      return weekdayTwoLetterLabel(abbrev);
+    });
+  }, [locale]);
+}
+function getDaysInMonth(date, weekStartsOn) {
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  const lastDay = new Date(year, month + 1, 0);
+  const daysInMonth = lastDay.getDate();
+  const firstDay = new Date(year, month, 1);
+  const startingDayOfWeek = firstDay.getDay();
+  const offset = (startingDayOfWeek - weekStartsOn + 7) % 7;
+  const days = [];
+  for (let i = 0; i < offset; i++) {
+    days.push(null);
+  }
+  for (let day = 1; day <= daysInMonth; day++) {
+    days.push(new Date(year, month, day));
+  }
+  return days;
+}
+function DatePickerSelect({
+  className,
+  wrapperClassName,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", wrapperClassName), children: [
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        ...props,
+        className: cn(
+          "h-9 w-full min-w-0 cursor-pointer appearance-none rounded-md border border-input bg-card py-0 pl-2 pr-9 text-left text-sm shadow-xs outline-none",
+          "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ChevronDown,
+      {
+        className: "pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 shrink-0 text-muted-foreground opacity-80",
+        "aria-hidden": true
+      }
+    )
+  ] });
+}
 function DatePicker({
   value,
   onChange,
   placeholder = "Seleccionar fecha",
   disabled = false,
-  className
+  className,
+  locale = es,
+  fromYear,
+  toYear
 }) {
   const [open, setOpen] = React.useState(false);
-  const [currentMonth, setCurrentMonth] = React.useState(value || /* @__PURE__ */ new Date());
-  const getDaysInMonth = (date) => {
-    const year = date.getFullYear();
-    const month = date.getMonth();
-    const firstDay = new Date(year, month, 1);
-    const lastDay = new Date(year, month + 1, 0);
-    const daysInMonth = lastDay.getDate();
-    const startingDayOfWeek = firstDay.getDay();
-    const days2 = [];
-    for (let i = 0; i < startingDayOfWeek; i++) {
-      days2.push(null);
+  const [currentMonth, setCurrentMonth] = React.useState(() => {
+    const base = value ?? /* @__PURE__ */ new Date();
+    return new Date(base.getFullYear(), base.getMonth(), 1);
+  });
+  const monthLabels = useMonthLabels(locale);
+  const weekdayLabels = useWeekdayLabels(locale);
+  const weekStartsOn = getWeekStartsOn(locale);
+  React.useEffect(() => {
+    if (value) {
+      setCurrentMonth(new Date(value.getFullYear(), value.getMonth(), 1));
     }
-    for (let day = 1; day <= daysInMonth; day++) {
-      days2.push(new Date(Date.UTC(year, month, day)));
+  }, [value]);
+  const days = React.useMemo(
+    () => getDaysInMonth(currentMonth, weekStartsOn),
+    [currentMonth, weekStartsOn]
+  );
+  const yearOptions = React.useMemo(() => {
+    const y = (/* @__PURE__ */ new Date()).getFullYear();
+    const from = fromYear ?? y - 100;
+    const to = toYear ?? y + 10;
+    const list = [];
+    for (let i = from; i <= to; i++) {
+      list.push(i);
     }
-    return days2;
-  };
-  const days = getDaysInMonth(currentMonth);
+    return list;
+  }, [fromYear, toYear]);
   const handleDateSelect = (date) => {
     onChange?.(date);
     setOpen(false);
   };
   const goToPreviousMonth = () => {
-    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1));
+    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1));
   };
   const goToNextMonth = () => {
-    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1));
+    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1));
+  };
+  const setMonthFromSelect = (monthIndex) => {
+    setCurrentMonth(new Date(currentMonth.getFullYear(), monthIndex, 1));
+  };
+  const setYearFromSelect = (year) => {
+    setCurrentMonth(new Date(year, currentMonth.getMonth(), 1));
   };
   const isToday = (date) => {
     const today = /* @__PURE__ */ new Date();
-    return date.getUTCFullYear() === today.getFullYear() && date.getUTCMonth() === today.getMonth() && date.getUTCDate() === today.getDate();
+    return date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate();
   };
   const isSelected = (date) => {
     if (!value) return false;
-    return date.getUTCFullYear() === value.getFullYear() && date.getUTCMonth() === value.getMonth() && date.getUTCDate() === value.getDate();
+    return date.getFullYear() === value.getFullYear() && date.getMonth() === value.getMonth() && date.getDate() === value.getDate();
   };
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
@@ -79,32 +160,78 @@ function DatePicker({
         ),
         disabled,
         children: [
-          /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }),
-          value ? format(value, "dd/MM/yyyy", { locale: es }) : placeholder
+          /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4 shrink-0" }),
+          value ? format(value, "P", { locale }) : placeholder
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
-      /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: goToPreviousMonth, className: "h-7 w-7 p-0", children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium", children: [
-          monthNames[currentMonth.getMonth()],
-          " ",
-          currentMonth.getFullYear()
-        ] }),
-        /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: goToNextMonth, className: "h-7 w-7 p-0", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) })
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto bg-white p-0 dark:bg-card", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-3 flex flex-wrap items-center justify-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: goToPreviousMonth,
+            className: "h-9 w-9 shrink-0 p-0",
+            "aria-label": locale.code?.startsWith("es") ? "Mes anterior" : "Previous month",
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DatePickerSelect,
+          {
+            wrapperClassName: "w-[6.75rem] shrink-0",
+            value: currentMonth.getMonth(),
+            onChange: (e) => setMonthFromSelect(Number(e.target.value)),
+            "aria-label": locale.code?.startsWith("es") ? "Mes" : "Month",
+            children: monthLabels.map((label, i) => /* @__PURE__ */ jsx("option", { value: i, children: label }, label))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DatePickerSelect,
+          {
+            wrapperClassName: "w-[5.5rem] shrink-0",
+            className: "tabular-nums text-center",
+            value: currentMonth.getFullYear(),
+            onChange: (e) => setYearFromSelect(Number(e.target.value)),
+            "aria-label": locale.code?.startsWith("es") ? "A\xF1o" : "Year",
+            children: yearOptions.map((y) => /* @__PURE__ */ jsx("option", { value: y, children: y }, y))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: goToNextMonth,
+            className: "h-9 w-9 shrink-0 p-0",
+            "aria-label": locale.code?.startsWith("es") ? "Mes siguiente" : "Next month",
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "mb-2 grid grid-cols-7 gap-1", children: dayNames.map((day) => /* @__PURE__ */ jsx("div", { className: "py-2 text-center text-xs font-medium text-muted-foreground", children: day }, day)) }),
+      /* @__PURE__ */ jsx("div", { className: "mb-2 grid grid-cols-7 gap-1", children: weekdayLabels.map((day, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "px-0.5 py-2 text-center text-sm font-medium capitalize leading-tight text-muted-foreground",
+          children: day
+        },
+        i
+      )) }),
       /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((day, index) => /* @__PURE__ */ jsx("div", { className: "flex h-9 w-9 items-center justify-center", children: day ? /* @__PURE__ */ jsx(
         Button,
         {
+          type: "button",
           variant: "ghost",
           size: "sm",
           className: cn(
             "h-9 w-9 p-0 font-normal",
-            isSelected(day) && "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
-            isToday(day) && !isSelected(day) && "bg-accent text-accent-foreground",
-            "hover:bg-muted"
+            isSelected(day) && "bg-primary text-primary-foreground hover:bg-primary-dark hover:text-primary-foreground",
+            isToday(day) && !isSelected(day) && "bg-accent text-accent-foreground hover:bg-accent/80 hover:text-accent-foreground",
+            !isSelected(day) && !isToday(day) && "hover:bg-muted hover:text-foreground"
           ),
           onClick: () => handleDateSelect(day),
           children: day.getDate()

package/dist/components/ui/date-picker/date-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/date-picker/date-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { format } from \"date-fns\";\nimport { es } from \"date-fns/locale\";\nimport { Calendar as CalendarIcon, ChevronLeft, ChevronRight } from \"lucide-react\";\n\nimport { cn } from \"../../../lib/utils\";\nimport { Button } from \"../button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover\";\n\nexport interface DatePickerProps {\n  value?: Date;\n  onChange?: (date: Date | undefined) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  className?: string;\n}\n\nconst monthNames = [\n  \"Enero\",\n  \"Febrero\",\n  \"Marzo\",\n  \"Abril\",\n  \"Mayo\",\n  \"Junio\",\n  \"Julio\",\n  \"Agosto\",\n  \"Septiembre\",\n  \"Octubre\",\n  \"Noviembre\",\n  \"Diciembre\",\n];\nconst dayNames = [\"Do\", \"Lu\", \"Ma\", \"Mi\", \"Ju\", \"Vi\", \"Sá\"];\n\nfunction DatePicker({\n  value,\n  onChange,\n  placeholder = \"Seleccionar fecha\",\n  disabled = false,\n  className,\n}: DatePickerProps) {\n  const [open, setOpen] = React.useState(false);\n  const [currentMonth, setCurrentMonth] = React.useState(value || new Date());\n\n  const getDaysInMonth = (date: Date) => {\n    const year = date.getFullYear();\n    const month = date.getMonth();\n    const firstDay = new Date(year, month, 1);\n    const lastDay = new Date(year, month + 1, 0);\n    const daysInMonth = lastDay.getDate();\n    const startingDayOfWeek = firstDay.getDay();\n\n    const days: (Date | null)[] = [];\n\n    for (let i = 0; i < startingDayOfWeek; i++) {\n      days.push(null);\n    }\n\n    for (let day = 1; day <= daysInMonth; day++) {\n      days.push(new Date(Date.UTC(year, month, day)));\n    }\n\n    return days;\n  };\n\n  const days = getDaysInMonth(currentMonth);\n\n  const handleDateSelect = (date: Date) => {\n    onChange?.(date);\n    setOpen(false);\n  };\n\n  const goToPreviousMonth = () => {\n    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1));\n  };\n\n  const goToNextMonth = () => {\n    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1));\n  };\n\n  const isToday = (date: Date) => {\n    const today = new Date();\n    return (\n      date.getUTCFullYear() === today.getFullYear() &&\n      date.getUTCMonth() === today.getMonth() &&\n      date.getUTCDate() === today.getDate()\n    );\n  };\n\n  const isSelected = (date: Date) => {\n    if (!value) return false;\n    return (\n      date.getUTCFullYear() === value.getFullYear() &&\n      date.getUTCMonth() === value.getMonth() &&\n      date.getUTCDate() === value.getDate()\n    );\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          data-slot=\"date-picker\"\n          className={cn(\n            \"w-full justify-start text-left font-normal\",\n            !value && \"text-muted-foreground\",\n            className,\n          )}\n          disabled={disabled}\n        >\n          <CalendarIcon className=\"mr-2 h-4 w-4\" />\n          {value ? format(value, \"dd/MM/yyyy\", { locale: es }) : placeholder}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <div className=\"p-3\">\n          <div className=\"mb-4 flex items-center justify-between\">\n            <Button variant=\"outline\" size=\"sm\" onClick={goToPreviousMonth} className=\"h-7 w-7 p-0\">\n              <ChevronLeft className=\"h-4 w-4\" />\n            </Button>\n            <div className=\"text-sm font-medium\">\n              {monthNames[currentMonth.getMonth()]} {currentMonth.getFullYear()}\n            </div>\n            <Button variant=\"outline\" size=\"sm\" onClick={goToNextMonth} className=\"h-7 w-7 p-0\">\n              <ChevronRight className=\"h-4 w-4\" />\n            </Button>\n          </div>\n\n          <div className=\"mb-2 grid grid-cols-7 gap-1\">\n            {dayNames.map((day) => (\n              <div key={day} className=\"py-2 text-center text-xs font-medium text-muted-foreground\">\n                {day}\n              </div>\n            ))}\n          </div>\n\n          <div className=\"grid grid-cols-7 gap-1\">\n            {days.map((day, index) => (\n              <div key={index} className=\"flex h-9 w-9 items-center justify-center\">\n                {day ? (\n                  <Button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className={cn(\n                      \"h-9 w-9 p-0 font-normal\",\n                      isSelected(day) &&\n                        \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground\",\n                      isToday(day) && !isSelected(day) && \"bg-accent text-accent-foreground\",\n                      \"hover:bg-muted\",\n                    )}\n                    onClick={() => handleDateSelect(day)}\n                  >\n                    {day.getDate()}\n                  </Button>\n                ) : (\n                  <div className=\"h-9 w-9\" />\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport { DatePicker };\n"],"mappings":";AAsGQ,SAUE,KAVF;AApGR,YAAY,WAAW;AACvB,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,SAAS,YAAY,cAAc,aAAa,oBAAoB;AAEpE,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,SAAS,SAAS,gBAAgB,sBAAsB;AAUxD,MAAM,aAAa;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACA,MAAM,WAAW,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,OAAI;AAE1D,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AACF,GAAoB;AAClB,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,SAAS,oBAAI,KAAK,CAAC;AAE1E,QAAM,iBAAiB,CAAC,SAAe;AACrC,UAAM,OAAO,KAAK,YAAY;AAC9B,UAAM,QAAQ,KAAK,SAAS;AAC5B,UAAM,WAAW,IAAI,KAAK,MAAM,OAAO,CAAC;AACxC,UAAM,UAAU,IAAI,KAAK,MAAM,QAAQ,GAAG,CAAC;AAC3C,UAAM,cAAc,QAAQ,QAAQ;AACpC,UAAM,oBAAoB,SAAS,OAAO;AAE1C,UAAMA,QAAwB,CAAC;AAE/B,aAAS,IAAI,GAAG,IAAI,mBAAmB,KAAK;AAC1C,MAAAA,MAAK,KAAK,IAAI;AAAA,IAChB;AAEA,aAAS,MAAM,GAAG,OAAO,aAAa,OAAO;AAC3C,MAAAA,MAAK,KAAK,IAAI,KAAK,KAAK,IAAI,MAAM,OAAO,GAAG,CAAC,CAAC;AAAA,IAChD;AAEA,WAAOA;AAAA,EACT;AAEA,QAAM,OAAO,eAAe,YAAY;AAExC,QAAM,mBAAmB,CAAC,SAAe;AACvC,eAAW,IAAI;AACf,YAAQ,KAAK;AAAA,EACf;AAEA,QAAM,oBAAoB,MAAM;AAC9B,oBAAgB,IAAI,KAAK,aAAa,YAAY,GAAG,aAAa,SAAS,IAAI,CAAC,CAAC;AAAA,EACnF;AAEA,QAAM,gBAAgB,MAAM;AAC1B,oBAAgB,IAAI,KAAK,aAAa,YAAY,GAAG,aAAa,SAAS,IAAI,CAAC,CAAC;AAAA,EACnF;AAEA,QAAM,UAAU,CAAC,SAAe;AAC9B,UAAM,QAAQ,oBAAI,KAAK;AACvB,WACE,KAAK,eAAe,MAAM,MAAM,YAAY,KAC5C,KAAK,YAAY,MAAM,MAAM,SAAS,KACtC,KAAK,WAAW,MAAM,MAAM,QAAQ;AAAA,EAExC;AAEA,QAAM,aAAa,CAAC,SAAe;AACjC,QAAI,CAAC,MAAO,QAAO;AACnB,WACE,KAAK,eAAe,MAAM,MAAM,YAAY,KAC5C,KAAK,YAAY,MAAM,MAAM,SAAS,KACtC,KAAK,WAAW,MAAM,MAAM,QAAQ;AAAA,EAExC;AAEA,SACE,qBAAC,WAAQ,MAAY,cAAc,SACjC;AAAA,wBAAC,kBAAe,SAAO,MACrB;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,aAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA,CAAC,SAAS;AAAA,UACV;AAAA,QACF;AAAA,QACA;AAAA,QAEA;AAAA,8BAAC,gBAAa,WAAU,gBAAe;AAAA,UACtC,QAAQ,OAAO,OAAO,cAAc,EAAE,QAAQ,GAAG,CAAC,IAAI;AAAA;AAAA;AAAA,IACzD,GACF;AAAA,IACA,oBAAC,kBAAe,WAAU,cAAa,OAAM,SAC3C,+BAAC,SAAI,WAAU,OACb;AAAA,2BAAC,SAAI,WAAU,0CACb;AAAA,4BAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,SAAS,mBAAmB,WAAU,eACxE,8BAAC,eAAY,WAAU,WAAU,GACnC;AAAA,QACA,qBAAC,SAAI,WAAU,uBACZ;AAAA,qBAAW,aAAa,SAAS,CAAC;AAAA,UAAE;AAAA,UAAE,aAAa,YAAY;AAAA,WAClE;AAAA,QACA,oBAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,SAAS,eAAe,WAAU,eACpE,8BAAC,gBAAa,WAAU,WAAU,GACpC;AAAA,SACF;AAAA,MAEA,oBAAC,SAAI,WAAU,+BACZ,mBAAS,IAAI,CAAC,QACb,oBAAC,SAAc,WAAU,8DACtB,iBADO,GAEV,CACD,GACH;AAAA,MAEA,oBAAC,SAAI,WAAU,0BACZ,eAAK,IAAI,CAAC,KAAK,UACd,oBAAC,SAAgB,WAAU,4CACxB,gBACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,WAAW;AAAA,YACT;AAAA,YACA,WAAW,GAAG,KACZ;AAAA,YACF,QAAQ,GAAG,KAAK,CAAC,WAAW,GAAG,KAAK;AAAA,YACpC;AAAA,UACF;AAAA,UACA,SAAS,MAAM,iBAAiB,GAAG;AAAA,UAElC,cAAI,QAAQ;AAAA;AAAA,MACf,IAEA,oBAAC,SAAI,WAAU,WAAU,KAjBnB,KAmBV,CACD,GACH;AAAA,OACF,GACF;AAAA,KACF;AAEJ;","names":["days"]}
+{"version":3,"sources":["../../../../src/components/ui/date-picker/date-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { addDays, format, startOfWeek } from \"date-fns\";\nimport type { Locale } from \"date-fns\";\nimport { es } from \"date-fns/locale\";\nimport {\n  Calendar as CalendarIcon,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n} from \"lucide-react\";\n\nimport { cn } from \"../../../lib/utils\";\nimport { Button } from \"../button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover\";\n\nexport interface DatePickerProps {\n  value?: Date;\n  onChange?: (date: Date | undefined) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  className?: string;\n  /**\n   * Locale de `date-fns` para nombres de mes/día y formato de la fecha en el botón.\n   * Por defecto español (`es`).\n   */\n  locale?: Locale;\n  /** Año mínimo en el selector (inclusive). */\n  fromYear?: number;\n  /** Año máximo en el selector (inclusive). */\n  toYear?: number;\n}\n\nfunction getWeekStartsOn(locale: Locale): 0 | 1 | 2 | 3 | 4 | 5 | 6 {\n  const w = locale.options?.weekStartsOn;\n  if (w === undefined) return 1;\n  return w as 0 | 1 | 2 | 3 | 4 | 5 | 6;\n}\n\n/** Meses abreviados (`LLL`) para que el `<select>` sea compacto dentro del popover. */\nfunction useMonthLabels(locale: Locale) {\n  return React.useMemo(\n    () => Array.from({ length: 12 }, (_, i) => format(new Date(2024, i, 1), \"LLL\", { locale })),\n    [locale],\n  );\n}\n\n/** Abreviatura del día en exactamente dos caracteres visibles (p. ej. lun → lu, Wed → We). */\nfunction weekdayTwoLetterLabel(abbrev: string): string {\n  const graphemes = [...abbrev.normalize(\"NFC\")];\n  if (graphemes.length <= 2) {\n    return abbrev;\n  }\n  return graphemes.slice(0, 2).join(\"\");\n}\n\nfunction useWeekdayLabels(locale: Locale) {\n  return React.useMemo(() => {\n    const weekStartsOn = getWeekStartsOn(locale);\n    const start = startOfWeek(new Date(2024, 0, 3), { weekStartsOn });\n    return Array.from({ length: 7 }, (_, i) => {\n      const abbrev = format(addDays(start, i), \"EEE\", { locale });\n      return weekdayTwoLetterLabel(abbrev);\n    });\n  }, [locale]);\n}\n\nfunction getDaysInMonth(date: Date, weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6) {\n  const year = date.getFullYear();\n  const month = date.getMonth();\n  const lastDay = new Date(year, month + 1, 0);\n  const daysInMonth = lastDay.getDate();\n  const firstDay = new Date(year, month, 1);\n  const startingDayOfWeek = firstDay.getDay();\n  const offset = (startingDayOfWeek - weekStartsOn + 7) % 7;\n\n  const days: (Date | null)[] = [];\n  for (let i = 0; i < offset; i++) {\n    days.push(null);\n  }\n  for (let day = 1; day <= daysInMonth; day++) {\n    days.push(new Date(year, month, day));\n  }\n  return days;\n}\n\n/** Select nativo sin flecha del sistema: el chevron es un icono con margen fijo (padding fiable en todos los navegadores). */\nfunction DatePickerSelect({\n  className,\n  wrapperClassName,\n  children,\n  ...props\n}: React.ComponentProps<\"select\"> & { wrapperClassName?: string }) {\n  return (\n    <div className={cn(\"relative\", wrapperClassName)}>\n      <select\n        {...props}\n        className={cn(\n          \"h-9 w-full min-w-0 cursor-pointer appearance-none rounded-md border border-input bg-card py-0 pl-2 pr-9 text-left text-sm shadow-xs outline-none\",\n          \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          className,\n        )}\n      >\n        {children}\n      </select>\n      <ChevronDown\n        className=\"pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 shrink-0 text-muted-foreground opacity-80\"\n        aria-hidden\n      />\n    </div>\n  );\n}\n\nfunction DatePicker({\n  value,\n  onChange,\n  placeholder = \"Seleccionar fecha\",\n  disabled = false,\n  className,\n  locale = es,\n  fromYear,\n  toYear,\n}: DatePickerProps) {\n  const [open, setOpen] = React.useState(false);\n  const [currentMonth, setCurrentMonth] = React.useState(() => {\n    const base = value ?? new Date();\n    return new Date(base.getFullYear(), base.getMonth(), 1);\n  });\n\n  const monthLabels = useMonthLabels(locale);\n  const weekdayLabels = useWeekdayLabels(locale);\n  const weekStartsOn = getWeekStartsOn(locale);\n\n  React.useEffect(() => {\n    if (value) {\n      setCurrentMonth(new Date(value.getFullYear(), value.getMonth(), 1));\n    }\n  }, [value]);\n\n  const days = React.useMemo(\n    () => getDaysInMonth(currentMonth, weekStartsOn),\n    [currentMonth, weekStartsOn],\n  );\n\n  const yearOptions = React.useMemo(() => {\n    const y = new Date().getFullYear();\n    const from = fromYear ?? y - 100;\n    const to = toYear ?? y + 10;\n    const list: number[] = [];\n    for (let i = from; i <= to; i++) {\n      list.push(i);\n    }\n    return list;\n  }, [fromYear, toYear]);\n\n  const handleDateSelect = (date: Date) => {\n    onChange?.(date);\n    setOpen(false);\n  };\n\n  const goToPreviousMonth = () => {\n    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1));\n  };\n\n  const goToNextMonth = () => {\n    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1));\n  };\n\n  const setMonthFromSelect = (monthIndex: number) => {\n    setCurrentMonth(new Date(currentMonth.getFullYear(), monthIndex, 1));\n  };\n\n  const setYearFromSelect = (year: number) => {\n    setCurrentMonth(new Date(year, currentMonth.getMonth(), 1));\n  };\n\n  const isToday = (date: Date) => {\n    const today = new Date();\n    return (\n      date.getFullYear() === today.getFullYear() &&\n      date.getMonth() === today.getMonth() &&\n      date.getDate() === today.getDate()\n    );\n  };\n\n  const isSelected = (date: Date) => {\n    if (!value) return false;\n    return (\n      date.getFullYear() === value.getFullYear() &&\n      date.getMonth() === value.getMonth() &&\n      date.getDate() === value.getDate()\n    );\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          data-slot=\"date-picker\"\n          className={cn(\n            \"w-full justify-start text-left font-normal\",\n            !value && \"text-muted-foreground\",\n            className,\n          )}\n          disabled={disabled}\n        >\n          <CalendarIcon className=\"mr-2 h-4 w-4 shrink-0\" />\n          {value ? format(value, \"P\", { locale }) : placeholder}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto bg-white p-0 dark:bg-card\" align=\"start\">\n        <div className=\"p-3\">\n          <div className=\"mb-3 flex flex-wrap items-center justify-center gap-1.5\">\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={goToPreviousMonth}\n              className=\"h-9 w-9 shrink-0 p-0\"\n              aria-label={locale.code?.startsWith(\"es\") ? \"Mes anterior\" : \"Previous month\"}\n            >\n              <ChevronLeft className=\"h-4 w-4\" />\n            </Button>\n            <DatePickerSelect\n              wrapperClassName=\"w-[6.75rem] shrink-0\"\n              value={currentMonth.getMonth()}\n              onChange={(e) => setMonthFromSelect(Number(e.target.value))}\n              aria-label={locale.code?.startsWith(\"es\") ? \"Mes\" : \"Month\"}\n            >\n              {monthLabels.map((label, i) => (\n                <option key={label} value={i}>\n                  {label}\n                </option>\n              ))}\n            </DatePickerSelect>\n            <DatePickerSelect\n              wrapperClassName=\"w-[5.5rem] shrink-0\"\n              className=\"tabular-nums text-center\"\n              value={currentMonth.getFullYear()}\n              onChange={(e) => setYearFromSelect(Number(e.target.value))}\n              aria-label={locale.code?.startsWith(\"es\") ? \"Año\" : \"Year\"}\n            >\n              {yearOptions.map((y) => (\n                <option key={y} value={y}>\n                  {y}\n                </option>\n              ))}\n            </DatePickerSelect>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={goToNextMonth}\n              className=\"h-9 w-9 shrink-0 p-0\"\n              aria-label={locale.code?.startsWith(\"es\") ? \"Mes siguiente\" : \"Next month\"}\n            >\n              <ChevronRight className=\"h-4 w-4\" />\n            </Button>\n          </div>\n\n          <div className=\"mb-2 grid grid-cols-7 gap-1\">\n            {weekdayLabels.map((day, i) => (\n              <div\n                key={i}\n                className=\"px-0.5 py-2 text-center text-sm font-medium capitalize leading-tight text-muted-foreground\"\n              >\n                {day}\n              </div>\n            ))}\n          </div>\n\n          <div className=\"grid grid-cols-7 gap-1\">\n            {days.map((day, index) => (\n              <div key={index} className=\"flex h-9 w-9 items-center justify-center\">\n                {day ? (\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className={cn(\n                      \"h-9 w-9 p-0 font-normal\",\n                      isSelected(day) &&\n                        \"bg-primary text-primary-foreground hover:bg-primary-dark hover:text-primary-foreground\",\n                      isToday(day) &&\n                        !isSelected(day) &&\n                        \"bg-accent text-accent-foreground hover:bg-accent/80 hover:text-accent-foreground\",\n                      !isSelected(day) && !isToday(day) && \"hover:bg-muted hover:text-foreground\",\n                    )}\n                    onClick={() => handleDateSelect(day)}\n                  >\n                    {day.getDate()}\n                  </Button>\n                ) : (\n                  <div className=\"h-9 w-9\" />\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport { DatePicker };\n"],"mappings":"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","names":[]}

package/dist/components/ui/date-picker/index.d.cts

@@ -1,2 +1,3 @@
 export { DatePicker, DatePickerProps } from './date-picker.cjs';
 import 'react/jsx-runtime';
+import 'date-fns';

package/dist/components/ui/date-picker/index.d.ts

@@ -1,2 +1,3 @@
 export { DatePicker, DatePickerProps } from './date-picker.js';
 import 'react/jsx-runtime';
+import 'date-fns';

package/dist/components/ui/index.d.cts

@@ -74,6 +74,7 @@ import '@radix-ui/react-collapsible';
 import '@radix-ui/react-dialog';
 import 'cmdk';
 import '@radix-ui/react-context-menu';
+import 'date-fns';
 import 'vaul';
 import '@radix-ui/react-dropdown-menu';
 import 'react-hook-form';

package/dist/components/ui/index.d.ts

@@ -74,6 +74,7 @@ import '@radix-ui/react-collapsible';
 import '@radix-ui/react-dialog';
 import 'cmdk';
 import '@radix-ui/react-context-menu';
+import 'date-fns';
 import 'vaul';
 import '@radix-ui/react-dropdown-menu';
 import 'react-hook-form';

package/dist/index.d.cts

@@ -85,6 +85,7 @@ import '@radix-ui/react-collapsible';
 import '@radix-ui/react-dialog';
 import 'cmdk';
 import '@radix-ui/react-context-menu';
+import 'date-fns';
 import 'vaul';
 import '@radix-ui/react-dropdown-menu';
 import 'react-hook-form';

package/dist/index.d.ts

@@ -85,6 +85,7 @@ import '@radix-ui/react-collapsible';
 import '@radix-ui/react-dialog';
 import 'cmdk';
 import '@radix-ui/react-context-menu';
+import 'date-fns';
 import 'vaul';
 import '@radix-ui/react-dropdown-menu';
 import 'react-hook-form';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ginia/ui",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "description": "Ginia Design System — Unified UI component library for all Ginia hubs",
   "license": "MIT",
   "private": false,