@motor-hero/ui-kit 0.34.0 → 0.35.0

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

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../src/components/date-picker.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,MAAM,WAAW,eAAe;IAC9B;mEAC+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAA;IACvC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAkTD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAEhD;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,eAAe,qBAEpD"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../src/components/date-picker.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,MAAM,WAAW,eAAe;IAC9B;mEAC+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAA;IACvC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAqUD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAEhD;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,eAAe,qBAEpD"}

package/dist/index.cjs

@@ -1334,29 +1334,37 @@ function toMatchers(minDate, maxDate, disabledDates) {
 }
 var triggerInputClass = "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 pr-10 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive";
 var fieldInputClass = "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+var navButtonClass2 = "inline-flex size-(--cell-size) shrink-0 select-none items-center justify-center rounded-md p-0 transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:opacity-50";
 var calendarClassNames = {
-  months: "flex flex-col",
-  month: "flex flex-col gap-4",
-  month_caption: "flex justify-center pt-1 relative items-center h-7",
-  caption_label: "text-sm font-medium",
-  nav: "flex items-center gap-1 absolute inset-x-0 top-0 justify-between px-1",
-  button_previous: "inline-flex size-7 items-center justify-center rounded-md border border-input bg-transparent p-0 opacity-50 hover:opacity-100",
-  button_next: "inline-flex size-7 items-center justify-center rounded-md border border-input bg-transparent p-0 opacity-50 hover:opacity-100",
-  month_grid: "w-full border-collapse space-y-1",
+  months: "relative flex flex-col gap-4",
+  month: "flex w-full flex-col gap-4",
+  month_caption: "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+  caption_label: "flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium select-none [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+  dropdowns: "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+  dropdown_root: "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
+  dropdown: "absolute inset-0 bg-popover opacity-0",
+  nav: "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+  button_previous: navButtonClass2,
+  button_next: navButtonClass2,
+  month_grid: "w-full border-collapse",
   weekdays: "flex",
-  weekday: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-  week: "flex w-full mt-2",
-  day: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20",
-  day_button: "inline-flex size-8 items-center justify-center rounded-md p-0 font-normal hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100",
-  selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground rounded-md [&>button]:bg-primary [&>button]:text-primary-foreground",
+  weekday: "flex-1 select-none rounded-md text-[0.8rem] font-normal text-muted-foreground",
+  week: "mt-2 flex w-full",
+  day: "relative aspect-square h-full w-full select-none p-0 text-center aria-selected:[&>button]:bg-primary aria-selected:[&>button]:text-primary-foreground aria-selected:[&>button]:hover:bg-primary",
+  day_button: "inline-flex aspect-square size-auto w-full min-w-(--cell-size) items-center justify-center rounded-md p-0 font-normal transition-colors hover:bg-accent hover:text-accent-foreground",
   today: "bg-accent text-accent-foreground rounded-md",
   outside: "text-muted-foreground opacity-50",
   disabled: "text-muted-foreground opacity-50 pointer-events-none",
   hidden: "invisible"
 };
 var calendarComponents = {
-  Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react7.ChevronLeft, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react7.ChevronRight, { className: "size-4" })
+  Chevron: ({ orientation }) => {
+    if (orientation === "left") return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react7.ChevronLeft, { className: "size-4" });
+    if (orientation === "right") return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react7.ChevronRight, { className: "size-4" });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react7.ChevronDown, { className: "size-4" });
+  }
 };
+var formatMonthDropdown = (date) => date.toLocaleString("pt-BR", { month: "short" });
 function DatePickerImpl({
   value,
   onChange,
@@ -1381,6 +1389,8 @@ function DatePickerImpl({
   const committedDate = withTime ? dateTimeToDate(value) : dateOnlyToDate(value);
   const displayValue = displayFor(value, withTime);
   const matchers = toMatchers(minDate, maxDate, disabledDates);
+  const startMonth = dateOnlyToDate(minDate) ?? (0, import_date_fns.subYears)(/* @__PURE__ */ new Date(), 100);
+  const endMonth = dateOnlyToDate(maxDate) ?? (0, import_date_fns.endOfYear)(/* @__PURE__ */ new Date());
   const setOpen = (next) => {
     setOpenRaw(next);
     if (next) {
@@ -1477,11 +1487,15 @@ function DatePickerImpl({
       {
         mode: "single",
         locale: import_locale.ptBR,
+        captionLayout: "dropdown",
+        formatters: { formatMonthDropdown },
+        startMonth,
+        endMonth,
         selected: withTime ? pendingDate : committedDate,
         defaultMonth: (withTime ? pendingDate : committedDate) ?? /* @__PURE__ */ new Date(),
         onSelect: (date) => date && handleCalendarSelect(date),
         disabled: matchers,
-        className: withTime ? "p-0" : "p-3",
+        className: cn(withTime ? "p-0" : "p-3", "[--cell-size:2rem]"),
         classNames: calendarClassNames,
         components: calendarComponents
       }