@motor-hero/ui-kit 0.34.1 → 0.35.0

package/dist/index.js

@@ -1213,9 +1213,9 @@ function ColorPicker({
 // src/components/date-picker.tsx
 import * as PopoverPrimitive4 from "@radix-ui/react-popover";
 import { InputMask } from "@react-input/mask";
-import { format, isValid, parse } from "date-fns";
+import { endOfYear, format, isValid, parse, subYears } from "date-fns";
 import { ptBR } from "date-fns/locale";
-import { CalendarIcon, ChevronLeft, ChevronRight, Clock } from "lucide-react";
+import { CalendarIcon, ChevronDown, ChevronLeft, ChevronRight, Clock } from "lucide-react";
 import * as React9 from "react";
 import { DayPicker } from "react-day-picker";
 import { Drawer as DrawerPrimitive3 } from "vaul";
@@ -1266,7 +1266,10 @@ var calendarClassNames = {
   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: "text-sm font-medium select-none",
+  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,
@@ -1282,8 +1285,13 @@ var calendarClassNames = {
   hidden: "invisible"
 };
 var calendarComponents = {
-  Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ jsx20(ChevronLeft, { className: "size-4" }) : /* @__PURE__ */ jsx20(ChevronRight, { className: "size-4" })
+  Chevron: ({ orientation }) => {
+    if (orientation === "left") return /* @__PURE__ */ jsx20(ChevronLeft, { className: "size-4" });
+    if (orientation === "right") return /* @__PURE__ */ jsx20(ChevronRight, { className: "size-4" });
+    return /* @__PURE__ */ jsx20(ChevronDown, { className: "size-4" });
+  }
 };
+var formatMonthDropdown = (date) => date.toLocaleString("pt-BR", { month: "short" });
 function DatePickerImpl({
   value,
   onChange,
@@ -1308,6 +1316,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) ?? subYears(/* @__PURE__ */ new Date(), 100);
+  const endMonth = dateOnlyToDate(maxDate) ?? endOfYear(/* @__PURE__ */ new Date());
   const setOpen = (next) => {
     setOpenRaw(next);
     if (next) {
@@ -1404,6 +1414,10 @@ function DatePickerImpl({
       {
         mode: "single",
         locale: ptBR,
+        captionLayout: "dropdown",
+        formatters: { formatMonthDropdown },
+        startMonth,
+        endMonth,
         selected: withTime ? pendingDate : committedDate,
         defaultMonth: (withTime ? pendingDate : committedDate) ?? /* @__PURE__ */ new Date(),
         onSelect: (date) => date && handleCalendarSelect(date),