@algodomain/smart-forms 0.1.3 → 0.1.4

package/dist/{chunk-CT6GW6PK.js → chunk-BNQNL7GF.js}

@@ -1,16 +1,19 @@
-import { useSmartForm, useFormField, useFieldDetection, Label, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, cn, Input } from './chunk-3L7TKJIB.js';
-import * as React4 from 'react';
-import { useRef, useEffect, useMemo, useState } from 'react';
+import { useSmartForm, useFormField, useFieldDetection, Label, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, cn, SmartInput, Input } from './chunk-RHECLW3K.js';
+import * as React6 from 'react';
+import React6__default, { useRef, useEffect, useState } from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { InfoIcon, Calendar as Calendar$1, X, CheckIcon, CircleIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from 'lucide-react';
+import { InfoIcon, SearchIcon, CalendarIcon, ChevronDownIcon, X, CheckIcon, CircleIcon, ChevronsUpDown, Check, Plus, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { format } from 'date-fns';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
+import { Command as Command$1 } from 'cmdk';
+import { eachYearOfInterval, endOfYear, startOfYear, eachMonthOfInterval, isBefore, isAfter, format } from 'date-fns';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 
 function Checkbox({
   className,
@@ -428,6 +431,36 @@ var SmartSelect = ({
     error && /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm mt-1", children: error })
   ] });
 };
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all 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:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
@@ -470,6 +503,323 @@ function Button({
     }
   );
 }
+function Command({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1,
+    {
+      "data-slot": "command",
+      className: cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "command-input-wrapper",
+      className: "flex h-9 items-center gap-2 border-b px-3",
+      children: [
+        /* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ jsx(
+          Command$1.Input,
+          {
+            "data-slot": "command-input",
+            className: cn(
+              "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+              className
+            ),
+            ...props
+          }
+        )
+      ]
+    }
+  );
+}
+function CommandList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.List,
+    {
+      "data-slot": "command-list",
+      className: cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandEmpty({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.Empty,
+    {
+      "data-slot": "command-empty",
+      className: "py-6 text-center text-sm",
+      ...props
+    }
+  );
+}
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.Group,
+    {
+      "data-slot": "command-group",
+      className: cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.Item,
+    {
+      "data-slot": "command-item",
+      className: cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function Combobox({
+  options,
+  value = "",
+  onChange,
+  placeholder = "Select option...",
+  searchPlaceholder = "Search...",
+  noResultsText = "No results found.",
+  width = "100%",
+  isDisabled = false,
+  allowCustom = false
+}) {
+  const [open, setOpen] = React6__default.useState(false);
+  const [searchValue, setSearchValue] = useState("");
+  const containerStyles = {
+    width
+  };
+  const combinedOptions = allowCustom ? [
+    ...options,
+    ...searchValue && !options.some(
+      (opt) => opt.label.toLowerCase() === searchValue.toLowerCase()
+    ) ? [
+      {
+        value: searchValue.toLowerCase().replace(/\s+/g, "-"),
+        label: searchValue
+      }
+    ] : []
+  ] : options;
+  const filteredOptions = combinedOptions.filter(
+    (option) => option.label.toLowerCase().includes(searchValue.toLowerCase())
+  );
+  return /* @__PURE__ */ jsx("div", { style: containerStyles, children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        role: "combobox",
+        "aria-expanded": open,
+        style: containerStyles,
+        className: `flex items-center justify-between relative ${isDisabled ? "cursor-not-allowed opacity-50" : ""}`,
+        disabled: isDisabled,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 text-left", children: /* @__PURE__ */ jsx("div", { className: "truncate", children: value ? combinedOptions.find((option) => option.value === value)?.label || value : placeholder }) }),
+          /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 flex-shrink-0 opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] p-0", children: /* @__PURE__ */ jsxs(Command, { className: "w-full", children: [
+      /* @__PURE__ */ jsx(
+        CommandInput,
+        {
+          value: searchValue,
+          onValueChange: setSearchValue,
+          placeholder: searchPlaceholder,
+          className: "h-9"
+        }
+      ),
+      /* @__PURE__ */ jsx(CommandList, { children: filteredOptions.length > 0 ? /* @__PURE__ */ jsx(CommandGroup, { className: "max-h-[200px] overflow-y-auto", children: filteredOptions.map((option) => /* @__PURE__ */ jsxs(
+        CommandItem,
+        {
+          value: option.value,
+          onSelect: (currentValue) => {
+            onChange(currentValue === value ? "" : currentValue);
+            setOpen(false);
+            setSearchValue("");
+          },
+          className: "flex items-center",
+          style: { width: "100%" },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full min-w-0", children: [
+              /* @__PURE__ */ jsx(
+                Check,
+                {
+                  className: `mr-2 h-4 w-4 flex-shrink-0 ${value === option.value ? "opacity-100" : "opacity-0"}`
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children: option.label })
+            ] }),
+            option.badge && /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: "outline",
+                className: "ml-2 text-[10px] px-2 py-0 h-5 font-normal",
+                children: option.badge
+              }
+            )
+          ]
+        },
+        option.value
+      )) }) : /* @__PURE__ */ jsxs(CommandEmpty, { children: [
+        allowCustom && searchValue && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            className: "w-full justify-start",
+            onClick: () => {
+              const newOption = {
+                value: searchValue.toLowerCase().replace(/\s+/g, "-")};
+              onChange(newOption.value);
+              setOpen(false);
+              setSearchValue("");
+            },
+            children: [
+              /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+              'Add "',
+              searchValue,
+              '" as a new option'
+            ]
+          }
+        ),
+        !searchValue && noResultsText
+      ] }) })
+    ] }) })
+  ] }) });
+}
+var SmartCombobox = ({
+  field,
+  label,
+  options,
+  className = "",
+  placeholder,
+  allowCustom = false,
+  validation,
+  required = false,
+  defaultValue,
+  info,
+  subLabel,
+  disabled,
+  hidden
+}) => {
+  const { formData } = useSmartForm();
+  const { value, error, onChange, fieldRef, registerValidation } = useFormField(field);
+  const fieldDetection = useFieldDetection();
+  const hasRegistered = useRef(false);
+  const hasSetDefault = useRef(false);
+  const isDisabled = typeof disabled === "function" ? disabled(formData) : disabled || false;
+  const isHidden = typeof hidden === "function" ? hidden(formData) : hidden || false;
+  if (isHidden) return null;
+  useEffect(() => {
+    if (validation && !hasRegistered.current) {
+      hasRegistered.current = true;
+      registerValidation(field, validation);
+    }
+  }, [validation, field, registerValidation]);
+  useEffect(() => {
+    if (fieldDetection?.registerField) {
+      fieldDetection.registerField(field);
+    }
+  }, [field, fieldDetection]);
+  useEffect(() => {
+    if (defaultValue !== void 0 && !hasSetDefault.current && (value === void 0 || value === null || value === "")) {
+      onChange(defaultValue);
+      hasSetDefault.current = true;
+    }
+  }, [defaultValue, value, onChange]);
+  return /* @__PURE__ */ jsxs("div", { className: `flex-1 min-w-0 ${className}`, children: [
+    label && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs(Label, { className: "text-sm font-medium text-foreground", children: [
+          label,
+          " ",
+          required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+        ] }),
+        info && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(InfoIcon, { className: "h-4 w-4 text-muted-foreground cursor-pointer mr-2" }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { className: "max-w-xs", children: info }) })
+        ] }) })
+      ] }),
+      subLabel && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: subLabel })
+    ] }),
+    /* @__PURE__ */ jsx("div", { ref: fieldRef, "data-field": field, children: /* @__PURE__ */ jsx(
+      Combobox,
+      {
+        options: (options || []).map((o) => ({ value: o.value, label: o.label })),
+        value: value || "",
+        onChange: (newValue) => onChange(newValue),
+        placeholder: placeholder || (label ? `Select ${label.toLowerCase()}` : `Select ${field}`),
+        allowCustom,
+        isDisabled
+      }
+    ) }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm mt-1", children: error })
+  ] });
+};
 function Calendar({
   className,
   classNames,
@@ -622,8 +972,8 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = getDefaultClassNames();
-  const ref = React4.useRef(null);
-  React4.useEffect(() => {
+  const ref = React6.useRef(null);
+  React6.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsx(
@@ -646,165 +996,295 @@ function CalendarDayButton({
     }
   );
 }
-function Popover({
+function Collapsible({
   ...props
 }) {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
 }
-function PopoverTrigger({
+function CollapsibleTrigger2({
   ...props
 }) {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ jsx(
+    CollapsiblePrimitive.CollapsibleTrigger,
+    {
+      "data-slot": "collapsible-trigger",
+      ...props
+    }
+  );
 }
-function PopoverContent({
+function CollapsibleContent2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CollapsiblePrimitive.CollapsibleContent,
+    {
+      "data-slot": "collapsible-content",
+      ...props
+    }
+  );
+}
+function ScrollArea({
   className,
-  align = "center",
-  sideOffset = 4,
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-    PopoverPrimitive.Content,
+  return /* @__PURE__ */ jsxs(
+    ScrollAreaPrimitive.Root,
     {
-      "data-slot": "popover-content",
-      align,
-      sideOffset,
+      "data-slot": "scroll-area",
+      className: cn("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollAreaPrimitive.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(ScrollBar, {}),
+        /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      orientation,
       className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
         className
       ),
-      ...props
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ScrollAreaPrimitive.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "bg-border relative flex-1 rounded-full"
+        }
+      )
     }
-  ) });
+  );
 }
 var SmartDatePicker = ({
   field,
   label,
-  className = "",
-  placeholder,
-  validation,
-  required = false,
-  allowPast = true,
-  allowFuture = true,
-  valueAsString = true,
-  minDate,
-  maxDate,
-  defaultValue,
-  info,
-  subLabel,
-  disabled,
-  hidden
+  className,
+  ...props
 }) => {
-  const { formData } = useSmartForm();
-  const { value, error, onChange, fieldRef, registerValidation } = useFormField(field);
-  const fieldDetection = useFieldDetection();
-  const hasRegistered = useRef(false);
-  const hasSetDefault = useRef(false);
-  const isDisabled = typeof disabled === "function" ? disabled(formData) : disabled || false;
-  const isHidden = typeof hidden === "function" ? hidden(formData) : hidden || false;
-  if (isHidden) return null;
-  const parsedValue = useMemo(() => {
-    if (!value) return void 0;
-    if (value instanceof Date) return value;
-    const d = new Date(value);
-    return isNaN(d.getTime()) ? void 0 : d;
-  }, [value]);
-  const [open, setOpen] = useState(false);
-  useEffect(() => {
-    if (validation && !hasRegistered.current) {
-      hasRegistered.current = true;
-      registerValidation(field, validation);
-    }
-  }, [validation, field, registerValidation]);
-  useEffect(() => {
-    if (fieldDetection?.registerField) {
-      fieldDetection.registerField(field);
-    }
-  }, [field, fieldDetection]);
-  useEffect(() => {
-    if (defaultValue !== void 0 && !hasSetDefault.current && (value === void 0 || value === null || value === "")) {
-      onChange(defaultValue);
-      hasSetDefault.current = true;
-    }
-  }, [defaultValue, value, onChange]);
-  const today = useMemo(() => /* @__PURE__ */ new Date(), []);
-  const disabledMatcher = (date) => {
-    if (!allowPast) {
-      const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
-      if (date < startOfToday) return true;
-    }
-    if (!allowFuture) {
-      const startOfTomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
-      if (date >= startOfTomorrow) return true;
-    }
-    if (minDate && date < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())) return true;
-    if (maxDate && date > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
-    return false;
-  };
-  const handleSelect = (selected) => {
-    if (!selected) {
-      onChange(void 0);
-      return;
-    }
-    if (valueAsString) {
-      const iso = format(selected, "yyyy-MM-dd");
-      onChange(iso);
-    } else {
-      onChange(selected);
+  const today = /* @__PURE__ */ new Date();
+  const [month, setMonth] = useState(today);
+  const [date, setDate] = useState(today);
+  const [isYearView, setIsYearView] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const startDate = new Date(1980, 6);
+  const endDate = new Date(2030, 6);
+  const years = eachYearOfInterval({
+    start: startOfYear(startDate),
+    end: endOfYear(endDate)
+  });
+  const handleDateSelect = (selectedDate) => {
+    setDate(selectedDate);
+    if (selectedDate) {
+      setIsOpen(false);
+      setIsYearView(false);
     }
-    setOpen(false);
   };
-  const buttonText = useMemo(() => {
-    if (!parsedValue) return placeholder || `Select ${label || field}`;
-    return format(parsedValue, "dd/MM/yyyy");
-  }, [parsedValue, placeholder, label, field]);
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex-1 min-w-0", className), children: [
-    label && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsxs(Label, { className: "text-sm font-medium text-foreground", children: [
-          label,
-          " ",
-          required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
-        ] }),
-        info && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(InfoIcon, { className: "h-4 w-4 text-muted-foreground cursor-pointer mr-2" }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { className: "max-w-xs", children: info }) })
-        ] }) })
-      ] }),
-      subLabel && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: subLabel })
-    ] }),
-    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        Button,
-        {
-          ref: fieldRef,
-          variant: "outline",
-          className: cn(
-            "w-full justify-start text-left font-normal",
-            !parsedValue && "text-muted-foreground",
-            error && "border-destructive"
+  return /* @__PURE__ */ jsx("div", { className: "w-[280px]", children: /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      SmartInput,
+      {
+        field,
+        label,
+        syncValue: date,
+        type: "date",
+        className: `${className ?? ""} cursor-pointer`,
+        icon: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4" }),
+        iconPosition: "right",
+        ...props
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        mode: "single",
+        selected: date,
+        onSelect: handleDateSelect,
+        month,
+        onMonthChange: setMonth,
+        defaultMonth: /* @__PURE__ */ new Date(),
+        startMonth: startDate,
+        endMonth: endDate,
+        className: "overflow-hidden rounded-md p-2",
+        classNames: {
+          month_caption: "ml-2.5 mr-20 justify-start",
+          nav: "flex absolute w-fit right-0 items-center"
+        },
+        components: {
+          CaptionLabel: (props2) => /* @__PURE__ */ jsx(
+            CaptionLabel,
+            {
+              isYearView,
+              setIsYearView,
+              ...props2
+            }
           ),
-          "data-field": field,
-          disabled: isDisabled,
-          children: [
-            /* @__PURE__ */ jsx(Calendar$1, { className: "mr-2 h-4 w-4" }),
-            buttonText
-          ]
+          MonthGrid: (props2) => {
+            return /* @__PURE__ */ jsx(
+              MonthGrid,
+              {
+                className: props2.className,
+                isYearView,
+                setIsYearView,
+                startDate,
+                endDate,
+                years,
+                currentYear: month.getFullYear(),
+                currentMonth: month.getMonth(),
+                onMonthSelect: (selectedMonth) => {
+                  setMonth(selectedMonth);
+                  setIsYearView(false);
+                },
+                children: props2.children
+              }
+            );
+          }
         }
-      ) }),
-      /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(
-        Calendar,
+      }
+    ) })
+  ] }) });
+};
+function MonthGrid({
+  className,
+  children,
+  isYearView,
+  startDate,
+  endDate,
+  years,
+  currentYear,
+  currentMonth,
+  onMonthSelect
+}) {
+  const currentYearRef = useRef(null);
+  const currentMonthButtonRef = useRef(null);
+  const scrollAreaRef = useRef(null);
+  useEffect(() => {
+    if (isYearView && currentYearRef.current && scrollAreaRef.current) {
+      const viewport = scrollAreaRef.current.querySelector(
+        "[data-radix-scroll-area-viewport]"
+      );
+      if (viewport) {
+        const yearTop = currentYearRef.current.offsetTop;
+        viewport.scrollTop = yearTop;
+      }
+      setTimeout(() => {
+        currentMonthButtonRef.current?.focus();
+      }, 100);
+    }
+  }, [isYearView]);
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx("table", { className, children }),
+    isYearView && /* @__PURE__ */ jsx("div", { className: "bg-background absolute inset-0 z-20 -mx-2 -mb-2", children: /* @__PURE__ */ jsx(ScrollArea, { ref: scrollAreaRef, className: "h-full", children: years.map((year) => {
+      const months = eachMonthOfInterval({
+        start: startOfYear(year),
+        end: endOfYear(year)
+      });
+      const isCurrentYear = year.getFullYear() === currentYear;
+      return /* @__PURE__ */ jsx(
+        "div",
         {
-          mode: "single",
-          selected: parsedValue,
-          onSelect: handleSelect,
-          disabled: disabledMatcher,
-          initialFocus: true
-        }
-      ) })
-    ] }),
-    error && /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm mt-1", children: error })
+          ref: isCurrentYear ? currentYearRef : void 0,
+          children: /* @__PURE__ */ jsx(
+            CollapsibleYear,
+            {
+              title: year.getFullYear().toString(),
+              open: isCurrentYear,
+              children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: months.map((month) => {
+                const isDisabled = isBefore(month, startDate) || isAfter(month, endDate);
+                const isCurrentMonth = month.getMonth() === currentMonth && year.getFullYear() === currentYear;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: isCurrentMonth ? currentMonthButtonRef : void 0,
+                    className: `inline-flex h-7 items-center justify-center rounded-md px-3 text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 ${isCurrentMonth ? "bg-primary text-primary-foreground hover:bg-primary/90" : "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground"}`,
+                    disabled: isDisabled,
+                    onClick: () => onMonthSelect(month),
+                    children: format(month, "MMM")
+                  },
+                  month.getTime()
+                );
+              }) })
+            }
+          )
+        },
+        year.getFullYear()
+      );
+    }) }) })
   ] });
-};
+}
+function CaptionLabel({
+  children,
+  isYearView,
+  setIsYearView
+}) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      className: "data-[state=open]:text-muted-foreground/80 -ms-2 flex items-center gap-2 text-sm font-medium hover:bg-transparent [&[data-state=open]>svg]:rotate-180",
+      variant: "ghost",
+      size: "sm",
+      onClick: () => setIsYearView((prev) => !prev),
+      "data-state": isYearView ? "open" : "closed",
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          ChevronDownIcon,
+          {
+            className: "text-muted-foreground/80 shrink-0 transition-transform duration-200",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+}
+function CollapsibleYear({
+  title,
+  children,
+  open
+}) {
+  return /* @__PURE__ */ jsxs(Collapsible, { className: "border-t px-2 py-1.5", defaultOpen: open, children: [
+    /* @__PURE__ */ jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        className: "flex w-full justify-start gap-2 text-sm font-medium hover:bg-transparent [&[data-state=open]>svg]:rotate-180",
+        variant: "ghost",
+        size: "sm",
+        children: [
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              className: "text-muted-foreground/80 shrink-0 transition-transform duration-200",
+              "aria-hidden": "true"
+            }
+          ),
+          title
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(CollapsibleContent2, { className: "data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden px-3 py-1 text-sm transition-all", children })
+  ] });
+}
 var SmartTags = ({
   field,
   label,
@@ -977,6 +1457,6 @@ var SmartTags = ({
   ] });
 };
 
-export { Button, Popover, PopoverContent, PopoverTrigger, SmartCheckbox, SmartDatePicker, SmartRadioGroup, SmartSelect, SmartTags };
-//# sourceMappingURL=chunk-CT6GW6PK.js.map
-//# sourceMappingURL=chunk-CT6GW6PK.js.map
+export { Badge, Button, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Popover, PopoverContent, PopoverTrigger, SmartCheckbox, SmartCombobox, SmartDatePicker, SmartRadioGroup, SmartSelect, SmartTags };
+//# sourceMappingURL=chunk-BNQNL7GF.js.map
+//# sourceMappingURL=chunk-BNQNL7GF.js.map