formanitor 0.0.29 → 0.0.30

package/dist/index.cjs

@@ -1715,29 +1715,66 @@ var RepeatableWidget = ({
     showError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-red-500", children: error })
   ] });
 };
+function CalendarDropdown(props) {
+  const { options, value, onChange } = props;
+  const handleValueChange = (newValue) => {
+    if (!onChange) return;
+    const syntheticEvent = {
+      target: { value: newValue }
+    };
+    onChange(syntheticEvent);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: value?.toString(), onValueChange: handleValueChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-7 px-2 text-sm", "aria-label": props["aria-label"], children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+      SelectItem,
+      {
+        value: option.value.toString(),
+        disabled: option.disabled,
+        children: option.label
+      },
+      option.value.toString()
+    )) })
+  ] });
+}
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
   ...props
 }) {
+  const captionLayout = props.captionLayout ?? "dropdown";
+  const isDropdownCaption = captionLayout === "dropdown" || captionLayout === "dropdown-months" || captionLayout === "dropdown-years";
+  const startMonth = props.startMonth ?? (isDropdownCaption ? new Date(1900, 0) : void 0);
+  const endMonth = props.endMonth ?? (isDropdownCaption ? new Date(2100, 11) : void 0);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactDayPicker.DayPicker,
     {
       showOutsideDays,
+      captionLayout,
+      hideNavigation: props.hideNavigation ?? isDropdownCaption,
+      navLayout: props.navLayout ?? (isDropdownCaption ? "around" : void 0),
+      startMonth,
+      endMonth,
       className: cn("p-3 relative", className),
       classNames: {
         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
         month: "space-y-4",
         caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
+        caption_label: cn(
+          "text-sm font-medium",
+          isDropdownCaption && "sr-only"
+        ),
+        dropdowns: "flex items-center gap-2",
+        months_dropdown: "h-7 rounded-md border border-input bg-background px-2 text-sm",
+        years_dropdown: "h-7 rounded-md border border-input bg-background px-2 text-sm",
         nav: "space-x-1 flex items-center",
         nav_button: cn(
           buttonVariants({ variant: "outline" }),
           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
+        nav_button_previous: isDropdownCaption ? "" : "absolute left-1",
+        nav_button_next: isDropdownCaption ? "" : "absolute right-1",
         table: "w-full border-collapse space-y-1",
         head_row: "flex",
         head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
@@ -1758,12 +1795,12 @@ function Calendar({
         button_previous: cn(
           buttonVariants({ variant: "outline" }),
           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-          "absolute left-1 top-3"
+          isDropdownCaption ? "" : "absolute left-1 top-3"
         ),
         button_next: cn(
           buttonVariants({ variant: "outline" }),
           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-          "absolute right-1 top-3"
+          isDropdownCaption ? "" : "absolute right-1 top-3"
         ),
         month_grid: "w-full border-collapse space-y-1",
         weekdays: "flex",
@@ -1783,9 +1820,11 @@ function Calendar({
         ...classNames
       },
       components: {
-        IconLeft: ({ ...props2 }) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" }),
-        IconRight: ({ ...props2 }) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" }),
-        // @ts-ignore
+        IconLeft: () => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" }),
+        IconRight: () => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" }),
+        // @ts-expect-error react-day-picker v9 component typing differences
+        Dropdown: CalendarDropdown,
+        // @ts-expect-error react-day-picker v9 component typing differences
         Chevron: ({ orientation }) => {
           const Icon2 = orientation === "left" ? lucideReact.ChevronLeft : lucideReact.ChevronRight;
           return /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-4 w-4" });