@bizapps/ui 1.3.7 → 1.4.1

package/dist/main.js

@@ -1,15 +1,17 @@
 "use client";
-import { SearchIcon, BellIcon, CircleHelpIcon, ChevronDownIcon, ChevronLeftIcon, MoreHorizontalIcon, ChevronRightIcon, MinusIcon, CheckIcon, LoaderCircle, ChevronUpIcon, X, ChevronLeft, ChevronRight, ExternalLinkIcon, XIcon, ChevronsUpDownIcon, UploadIcon, Loader2Icon, LoaderIcon, PipetteIcon, CalendarIcon, MenuIcon, Pencil, Clock, Funnel, ArrowUp, ArrowDown, ArrowUpDown, Ellipsis, Rows2, Eye, Search, House, Plane, Wallet, LayoutDashboardIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, CircleCheckIcon } from 'lucide-react';
+import { SearchIcon, BellIcon, CircleHelpIcon, ChevronDownIcon, ChevronLeftIcon, MoreHorizontalIcon, ChevronRightIcon, MinusIcon, CheckIcon, LoaderCircle, ChevronUpIcon, X, ChevronLeft, ChevronRight, ExternalLinkIcon, ChevronsUpDownIcon, XIcon, UploadIcon, Loader2Icon, LoaderIcon, PipetteIcon, CalendarIcon, MenuIcon, Pencil, Clock, Funnel, ArrowUp, ArrowDown, ArrowUpDown, Ellipsis, Rows2, Eye, Search, House, Plane, Wallet, LayoutDashboardIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, CircleCheckIcon } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { createContext, memo, useRef, useState, useMemo, useCallback, useEffect, forwardRef, Fragment, useId, useContext, useLayoutEffect } from 'react';
-import { Avatar as Avatar$1, Checkbox as Checkbox$1, Slot, Select as Select$1, Label as Label$1, Toggle as Toggle$1, ToggleGroup, Separator as Separator$1, Progress as Progress$1, Slider as Slider$1, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1, Popover as Popover$1, Dialog as Dialog$1, AlertDialog as AlertDialog$1, Accordion as Accordion$1, DropdownMenu as DropdownMenu$1, RadioGroup as RadioGroup$1, NavigationMenu as NavigationMenu$1 } from 'radix-ui';
+import { Avatar as Avatar$1, Checkbox as Checkbox$1, Slot, Select as Select$1, Label as Label$1, Popover as Popover$1, Toggle as Toggle$1, ToggleGroup, Separator as Separator$1, Progress as Progress$1, Slider as Slider$1, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1, Dialog as Dialog$1, AlertDialog as AlertDialog$1, Accordion as Accordion$1, DropdownMenu as DropdownMenu$1, RadioGroup as RadioGroup$1, NavigationMenu as NavigationMenu$1 } from 'radix-ui';
 import { isSameDay, isToday, format, addDays } from 'date-fns';
 import useEmblaCarousel from 'embla-carousel-react';
-import { motion, AnimatePresence } from 'motion/react';
+import { parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js';
 import { Command } from 'cmdk';
+import { VE, UY, US, SV, PY, PT, PE, PA, NI, MX, IT, IN, HN, GT, GB, FR, ES, EC, DO, DE, CU, CR, CO, CL, CA, BR, BO, AR } from 'country-flag-icons/react/3x2';
+import { motion, AnimatePresence } from 'motion/react';
 import { useDropzone } from 'react-dropzone';
 import Color from 'color';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
@@ -1047,6 +1049,410 @@ function Link({
     }
   );
 }
+function Popover({ ...props }) {
+  return /* @__PURE__ */ jsx(Popover$1.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Popover$1.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  container,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Portal, { container, children: /* @__PURE__ */ jsx(
+    Popover$1.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground ring-foreground/5 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 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-1 rounded-3xl p-4 text-sm shadow-lg ring-1 outline-hidden duration-100",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function PopoverAnchor({ ...props }) {
+  return /* @__PURE__ */ jsx(Popover$1.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+function PopoverHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "popover-header",
+      className: cn("flex flex-col gap-1 text-sm", className),
+      ...props
+    }
+  );
+}
+function PopoverTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "popover-title",
+      className: cn("text-base font-medium", className),
+      ...props
+    }
+  );
+}
+function PopoverDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "popover-description",
+      className: cn("text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function stripLeadingDialCode(raw, dialCode) {
+  if (!raw.startsWith("+")) {
+    return raw.replace(/\D/g, "");
+  }
+  const parsed = parsePhoneNumberFromString(raw);
+  if (parsed) {
+    return parsed.nationalNumber;
+  }
+  const digits = raw.replace(/\D/g, "");
+  const code = dialCode.replace(/\D/g, "");
+  return code && digits.startsWith(code) ? digits.length > code.length ? digits.slice(code.length) : "" : digits;
+}
+var flagByCode = {
+  AR: AR,
+  BO: BO,
+  BR: BR,
+  CA: CA,
+  CL: CL,
+  CO: CO,
+  CR: CR,
+  CU: CU,
+  DE: DE,
+  DO: DO,
+  EC: EC,
+  ES: ES,
+  FR: FR,
+  GB: GB,
+  GT: GT,
+  HN: HN,
+  IN: IN,
+  IT: IT,
+  MX: MX,
+  NI: NI,
+  PA: PA,
+  PE: PE,
+  PT: PT,
+  PY: PY,
+  SV: SV,
+  US: US,
+  UY: UY,
+  VE: VE
+};
+function CountryFlag({
+  code,
+  flagUrl,
+  className
+}) {
+  if (flagUrl) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: flagUrl,
+        alt: "",
+        "aria-hidden": "true",
+        className: cn("size-4 shrink-0 rounded-[2px] object-cover", className)
+      }
+    );
+  }
+  const FlagComponent = flagByCode[(code || "").toUpperCase()];
+  if (FlagComponent) {
+    return /* @__PURE__ */ jsx(
+      FlagComponent,
+      {
+        "aria-hidden": "true",
+        className: cn("size-4 shrink-0 rounded-[2px]", className)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("bg-muted size-4 shrink-0 rounded-full", className) });
+}
+function PhoneField({
+  countries,
+  value,
+  onValueChange,
+  defaultCountry,
+  placeholder = "Phone number",
+  disabled = false,
+  className,
+  container,
+  name,
+  ...inputProps
+}) {
+  const [open, setOpen] = useState(false);
+  const [pickedCode, setPickedCode] = useState(
+    (defaultCountry ?? countries[0]?.code)?.toUpperCase()
+  );
+  const [internalValue, setInternalValue] = useState("");
+  const listRef = useRef(null);
+  const inputRef = useRef(null);
+  const caretRef = useRef(null);
+  const listId = `${useId()}-countries-list`;
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const parsed = currentValue ? parsePhoneNumberFromString(currentValue) : void 0;
+  const parsedCountry = parsed?.country;
+  const parsedCallingCode = parsed?.countryCallingCode;
+  const countryInList = parsedCountry !== void 0 && countries.some((country) => country.code.toUpperCase() === parsedCountry);
+  const callingCodeInList = parsedCallingCode !== void 0 && countries.some(
+    (country) => country.dialCode.replace(/\D/g, "") === parsedCallingCode
+  );
+  const representedCode = countryInList ? parsedCountry : callingCodeInList ? countries.find(
+    (country) => country.dialCode.replace(/\D/g, "") === parsedCallingCode
+  )?.code : void 0;
+  const selectedCode = representedCode ?? pickedCode ?? defaultCountry ?? countries[0]?.code;
+  const selectedCountry = countries.find(
+    (country) => country.code.toUpperCase() === selectedCode?.toUpperCase()
+  ) ?? countries[0];
+  const dialCode = selectedCountry ? selectedCountry.dialCode.replace(/\D/g, "") : "";
+  const emitDialCode = parsedCallingCode ?? dialCode;
+  const nationalDigits = parsed ? parsed.nationalNumber : currentValue ? stripLeadingDialCode(currentValue, dialCode) : "";
+  const canFormat = selectedCountry !== void 0 && (!parsed || countryInList || callingCodeInList);
+  const inputValue = selectedCountry && canFormat && nationalDigits ? new AsYouType((selectedCountry.code || "").toUpperCase()).input(
+    nationalDigits
+  ) : nationalDigits;
+  const isInvalid = inputProps["aria-invalid"] === true || inputProps["aria-invalid"] === "true";
+  useLayoutEffect(() => {
+    const input = inputRef.current;
+    const caret = caretRef.current;
+    if (!input || !caret || document.activeElement !== input) {
+      return;
+    }
+    const digitsBefore = caret.raw.slice(0, caret.start).replace(/\D/g, "").length;
+    let position = 0;
+    if (digitsBefore > 0) {
+      let digitsSeen = 0;
+      for (let i = 0; i < inputValue.length; i++) {
+        if (/\d/.test(inputValue[i])) {
+          digitsSeen += 1;
+        }
+        position = i + 1;
+        if (digitsSeen >= digitsBefore) {
+          break;
+        }
+      }
+    }
+    input.setSelectionRange(position, position + (caret.end - caret.start));
+    caretRef.current = null;
+  }, [inputValue]);
+  const handleSearchChange = () => {
+    requestAnimationFrame(() => listRef.current?.scrollTo({ top: 0 }));
+  };
+  function handleCountrySelect(code) {
+    setPickedCode(code);
+    setOpen(false);
+    const nextCountry = countries.find(
+      (country) => country.code.toUpperCase() === code.toUpperCase()
+    );
+    if (nextCountry && nationalDigits) {
+      const next = `+${nextCountry.dialCode.replace(/\D/g, "")}${nationalDigits}`;
+      onValueChange?.(next);
+      if (!isControlled) {
+        setInternalValue(next);
+      }
+    }
+  }
+  function deriveFromE164(e164) {
+    const parsed2 = parsePhoneNumberFromString(e164);
+    if (!parsed2?.nationalNumber) {
+      return void 0;
+    }
+    const countryMatch = parsed2.country ? countries.find((country) => country.code.toUpperCase() === parsed2.country) : void 0;
+    const nextPickedCode = countryMatch ? countryMatch.code : parsed2.countryCallingCode ? countries.find(
+      (country) => country.dialCode.replace(/\D/g, "") === parsed2.countryCallingCode
+    )?.code : void 0;
+    return {
+      nationalNumber: parsed2.nationalNumber,
+      emitCode: parsed2.countryCallingCode,
+      nextPickedCode
+    };
+  }
+  function handleInputChange(raw, nativeEvent) {
+    const input = inputRef.current;
+    if (input) {
+      caretRef.current = {
+        raw,
+        start: input.selectionStart ?? raw.length,
+        end: input.selectionEnd ?? raw.length
+      };
+    }
+    if (!selectedCountry) return;
+    let national = stripLeadingDialCode(raw, dialCode);
+    let emitCode = emitDialCode;
+    let nextPickedCode;
+    const plusIndex = raw.indexOf("+");
+    if (plusIndex === 0) {
+      const derived = deriveFromE164(raw);
+      if (derived) {
+        emitCode = derived.emitCode || emitDialCode;
+        nextPickedCode = derived.nextPickedCode;
+      } else if (nativeEvent?.inputType === "insertFromPaste") {
+        national = "";
+      }
+    } else if (plusIndex > 0) {
+      const pasted = nativeEvent?.inputType === "insertFromPaste" && nativeEvent.data?.startsWith("+") ? nativeEvent.data : void 0;
+      if (pasted) {
+        const derived = deriveFromE164(pasted);
+        const prefixDigits = raw.slice(0, plusIndex).replace(/\D/g, "");
+        const suffixDigits = raw.slice(plusIndex + pasted.length).replace(/\D/g, "");
+        if (derived) {
+          national = prefixDigits + derived.nationalNumber + suffixDigits;
+          emitCode = derived.emitCode || emitDialCode;
+          nextPickedCode = derived.nextPickedCode;
+        } else {
+          national = prefixDigits + suffixDigits;
+        }
+      }
+    }
+    if (nextPickedCode) {
+      setPickedCode(nextPickedCode);
+    }
+    if (!national) {
+      onValueChange?.("");
+      if (!isControlled) {
+        setInternalValue("");
+      }
+      return;
+    }
+    const next = `+${emitCode}${national}`;
+    onValueChange?.(next);
+    if (!isControlled) {
+      setInternalValue(next);
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "phone-field",
+      "data-invalid": isInvalid || void 0,
+      className: cn(
+        "border-input flex h-9 w-full min-w-0 items-center overflow-hidden rounded-md border bg-transparent shadow-xs transition-[color,box-shadow]",
+        "focus-within:border-ring focus-within:ring-ring/30 focus-within:ring-3",
+        "data-[invalid=true]:border-destructive data-[invalid=true]:ring-destructive/20 data-[invalid=true]:ring-3",
+        "dark:data-[invalid=true]:border-destructive/50 dark:data-[invalid=true]:ring-destructive/40",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-slot": "phone-field-country-select",
+              disabled,
+              "aria-expanded": open,
+              "aria-haspopup": "listbox",
+              "aria-controls": open ? listId : void 0,
+              "aria-label": selectedCountry ? `${selectedCountry.name} ${selectedCountry.dialCode}` : void 0,
+              className: cn(
+                "flex h-full shrink-0 cursor-pointer items-center gap-1.5 border-r border-input px-2.5 text-sm font-medium outline-none select-none",
+                "hover:bg-muted",
+                "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+              ),
+              children: selectedCountry && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                /* @__PURE__ */ jsx(
+                  CountryFlag,
+                  {
+                    code: selectedCountry.code,
+                    flagUrl: selectedCountry.flagUrl
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: selectedCountry.dialCode }),
+                /* @__PURE__ */ jsx(ChevronsUpDownIcon, { size: 14, className: "text-muted-foreground shrink-0" })
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            PopoverContent,
+            {
+              className: "w-72 rounded-xl p-0",
+              align: "start",
+              container,
+              children: /* @__PURE__ */ jsxs(Command, { className: "rounded-xl", label: "Search countries", children: [
+                /* @__PURE__ */ jsxs("div", { className: "border-border flex items-center gap-2 border-b px-3", children: [
+                  /* @__PURE__ */ jsx(SearchIcon, { size: 14, className: "text-muted-foreground shrink-0" }),
+                  /* @__PURE__ */ jsx(
+                    Command.Input,
+                    {
+                      placeholder: "Search country...",
+                      onValueChange: handleSearchChange,
+                      className: "placeholder:text-muted-foreground flex h-9 w-full bg-transparent py-2 text-sm outline-none"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { id: listId, children: /* @__PURE__ */ jsxs(Command.List, { ref: listRef, className: "max-h-56 overflow-y-auto p-1", children: [
+                  /* @__PURE__ */ jsx(Command.Empty, { className: "text-muted-foreground py-4 text-center text-sm", children: "No country found." }),
+                  countries.map((country) => /* @__PURE__ */ jsxs(
+                    Command.Item,
+                    {
+                      value: country.code,
+                      keywords: [country.name, country.dialCode],
+                      "data-slot": "phone-field-country-item",
+                      onSelect: () => handleCountrySelect(country.code),
+                      className: cn(
+                        "flex cursor-pointer items-center justify-between gap-2 rounded-md px-2 py-1.5 text-sm outline-none select-none",
+                        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground",
+                        "hover:bg-accent hover:text-accent-foreground"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+                          /* @__PURE__ */ jsx(CountryFlag, { code: country.code, flagUrl: country.flagUrl }),
+                          /* @__PURE__ */ jsx("span", { className: "truncate", children: country.name })
+                        ] }),
+                        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground tabular-nums", children: country.dialCode }),
+                          selectedCode?.toUpperCase() === country.code.toUpperCase() && /* @__PURE__ */ jsx(
+                            CheckIcon,
+                            {
+                              size: 14,
+                              className: "text-[var(--color-main-blue-primary)] shrink-0"
+                            }
+                          )
+                        ] })
+                      ]
+                    },
+                    country.code
+                  ))
+                ] }) })
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref: inputRef,
+            ...inputProps,
+            "data-slot": "phone-field-input",
+            type: "tel",
+            value: inputValue,
+            onChange: (event) => handleInputChange(event.target.value, event.nativeEvent),
+            placeholder,
+            disabled,
+            autoComplete: inputProps.autoComplete ?? "tel",
+            className: cn(
+              "h-full flex-1 rounded-none border-0 bg-transparent shadow-none",
+              "px-3 focus-visible:border-transparent focus-visible:ring-0"
+            )
+          }
+        ),
+        name !== void 0 && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: currentValue, "data-slot": "phone-field-hidden-input" })
+      ]
+    }
+  );
+}
 function PinInput({
   length = 6,
   value = "",
@@ -2111,66 +2517,6 @@ function TooltipContent({
     }
   ) });
 }
-function Popover({ ...props }) {
-  return /* @__PURE__ */ jsx(Popover$1.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx(Popover$1.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  container,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Popover$1.Portal, { container, children: /* @__PURE__ */ jsx(
-    Popover$1.Content,
-    {
-      "data-slot": "popover-content",
-      align,
-      sideOffset,
-      className: cn(
-        "bg-popover text-popover-foreground ring-foreground/5 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 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-1 rounded-3xl p-4 text-sm shadow-lg ring-1 outline-hidden duration-100",
-        className
-      ),
-      ...props
-    }
-  ) });
-}
-function PopoverAnchor({ ...props }) {
-  return /* @__PURE__ */ jsx(Popover$1.Anchor, { "data-slot": "popover-anchor", ...props });
-}
-function PopoverHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "popover-header",
-      className: cn("flex flex-col gap-1 text-sm", className),
-      ...props
-    }
-  );
-}
-function PopoverTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "popover-title",
-      className: cn("text-base font-medium", className),
-      ...props
-    }
-  );
-}
-function PopoverDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      "data-slot": "popover-description",
-      className: cn("text-muted-foreground", className),
-      ...props
-    }
-  );
-}
 var TEXT_SIZES = [12, 14, 16, 18, 20, 24, 28, 32, 40, 48];
 var TEXT_WEIGHTS = [100, 200, 300, 400, 500, 700, 800, 900];
 function Text({
@@ -4196,22 +4542,52 @@ function DatePicker({
   disabled = false,
   className,
   fromDate,
-  toDate
+  toDate,
+  numberOfMonths = 1
 }) {
   const [open, setOpen] = useState(false);
+  const [awaitingRangeEnd, setAwaitingRangeEnd] = useState(false);
   const label = useMemo(() => {
     if (mode === "range") {
       const range = selected;
-      if (range?.from && range?.to)
-        return `${format(range.from, "MMM d, yyyy")} \u2013 ${format(range.to, "MMM d, yyyy")}`;
-      if (range?.from) return `${format(range.from, "MMM d, yyyy")} \u2013 \u2026`;
-      return placeholder;
+      if (!range?.from) return placeholder;
+      if (!range.to) return `${format(range.from, "MMM d, yyyy")} \u2013 \u2026`;
+      return `${format(range.from, "MMM d, yyyy")} \u2013 ${format(range.to, "MMM d, yyyy")}`;
     }
     const date = selected;
     return date ? format(date, "MMM d, yyyy") : placeholder;
   }, [mode, selected, placeholder]);
+  const handleOpenChange = (nextOpen) => {
+    setOpen(nextOpen);
+    if (!nextOpen) setAwaitingRangeEnd(false);
+  };
+  const handleRangeSelect = (range, triggerDate) => {
+    const emit = onSelect;
+    if (!awaitingRangeEnd) {
+      setAwaitingRangeEnd(true);
+      emit?.({ from: triggerDate, to: void 0 });
+      return;
+    }
+    emit?.(range);
+    if (!range?.from || !range.to) {
+      setAwaitingRangeEnd(!!range?.from);
+      return;
+    }
+    setAwaitingRangeEnd(false);
+    setOpen(false);
+  };
+  const dateConstraints = useMemo(() => {
+    const disabledMatchers = [];
+    if (fromDate) disabledMatchers.push({ before: fromDate });
+    if (toDate) disabledMatchers.push({ after: toDate });
+    return {
+      ...disabledMatchers.length > 0 && { disabled: disabledMatchers },
+      ...fromDate && { startMonth: fromDate },
+      ...toDate && { endMonth: toDate }
+    };
+  }, [fromDate, toDate]);
   const hasValue = mode === "range" ? !!selected?.from : !!selected;
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
       {
@@ -4235,14 +4611,10 @@ function DatePicker({
         ...{
           mode: "range",
           selected,
-          onSelect: (range) => {
-            onSelect?.(range);
-            if (range?.to) setOpen(false);
-          },
-          fromDate,
-          toDate,
-          numberOfMonths: 2,
-          initialFocus: true
+          onSelect: handleRangeSelect,
+          ...dateConstraints,
+          numberOfMonths,
+          autoFocus: true
         }
       }
     ) : /* @__PURE__ */ jsx(
@@ -4255,9 +4627,9 @@ function DatePicker({
             onSelect?.(date);
             setOpen(false);
           },
-          fromDate,
-          toDate,
-          initialFocus: true
+          ...dateConstraints,
+          numberOfMonths,
+          autoFocus: true
         }
       }
     ) })
@@ -8771,6 +9143,6 @@ function TCCEProvider({
   return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: tooltipDelayDuration, children: /* @__PURE__ */ jsx(AbilityProvider, { permissions, children: /* @__PURE__ */ jsx(Toaster, { position: toasterPosition, children }) }) });
 }
 
-export { AbilityProvider, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge2 as Badge, BottomNav, BottomNavTabs, BottomNavTabsContent, BottomNavTabsList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Can, CanNot, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHue, ColorPickerOutput, ColorPickerPresets, ColorPickerSelection, Combobox, DataTable, DataTableCardView, DataTableColumnFilter, DataTableFooter, DataTableHeaderCell, DataTableRowActions, DataTableSearch, DataTableSkeleton, DataTableToolbar, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneContent, DropzoneEmptyState, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventCalendar, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FilterOption, Input, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, Link, Logo, MiniCalendar, MiniCalendarDay, MiniCalendarDays, MiniCalendarNavigation, Navbar, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PinInput, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, SegmentedControlItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, SpinnerDots, SpinnerLoader, Status, StatusIndicator, StatusLabel, Switch, TCCEProvider, TEXT_SIZES, TEXT_WEIGHTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, Toaster, Toggle, ToggleGroup2 as ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, animation, avatarVariants, badgeVariants2 as badgeVariants, buttonVariants, columnFiltersToArrayQueryParams, columnFiltersToJsonString, columnFiltersToQueryParams, columnFiltersToRecord, createBackendParams, createBackendParamsWithFilters, duration, ease, fadeIn, getActiveFilterCount, getActiveFilterValues, getColumnValueCounts, getUniqueColumnValues, hasActiveFilters, linkVariants, logos, matchPermission, mergeFilters, multiSelectFilter, navigationMenuTriggerStyle, parseJsonToFilters, parseQueryParamsToFilters, progressIndicatorVariants, progressVariants, scaleIn, searchInArray, skeletonVariants, slideRight, slideUp, sortRecordToSortingState, sortingStateToJsonString, sortingStateToRecord, spinnerDotsVariants, spinnerLoaderVariants, spinnerVariants, spring, stagger, toggleVariants, tooltipContentVariants, transition, useAbility, useAppForm, useCan, useCarousel, useColorPicker, useColumnFilter, useSidebar, useTableContext, useTableData, useTableFiltering, useTableGlobalFilter, useTableSizing, useTableSorting, useTableVisibility, useToast };
+export { AbilityProvider, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge2 as Badge, BottomNav, BottomNavTabs, BottomNavTabsContent, BottomNavTabsList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Can, CanNot, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHue, ColorPickerOutput, ColorPickerPresets, ColorPickerSelection, Combobox, DataTable, DataTableCardView, DataTableColumnFilter, DataTableFooter, DataTableHeaderCell, DataTableRowActions, DataTableSearch, DataTableSkeleton, DataTableToolbar, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneContent, DropzoneEmptyState, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventCalendar, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FilterOption, Input, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, Link, Logo, MiniCalendar, MiniCalendarDay, MiniCalendarDays, MiniCalendarNavigation, Navbar, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PhoneField, PinInput, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, SegmentedControlItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, SpinnerDots, SpinnerLoader, Status, StatusIndicator, StatusLabel, Switch, TCCEProvider, TEXT_SIZES, TEXT_WEIGHTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, Toaster, Toggle, ToggleGroup2 as ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, animation, avatarVariants, badgeVariants2 as badgeVariants, buttonVariants, columnFiltersToArrayQueryParams, columnFiltersToJsonString, columnFiltersToQueryParams, columnFiltersToRecord, createBackendParams, createBackendParamsWithFilters, duration, ease, fadeIn, getActiveFilterCount, getActiveFilterValues, getColumnValueCounts, getUniqueColumnValues, hasActiveFilters, linkVariants, logos, matchPermission, mergeFilters, multiSelectFilter, navigationMenuTriggerStyle, parseJsonToFilters, parseQueryParamsToFilters, progressIndicatorVariants, progressVariants, scaleIn, searchInArray, skeletonVariants, slideRight, slideUp, sortRecordToSortingState, sortingStateToJsonString, sortingStateToRecord, spinnerDotsVariants, spinnerLoaderVariants, spinnerVariants, spring, stagger, toggleVariants, tooltipContentVariants, transition, useAbility, useAppForm, useCan, useCarousel, useColorPicker, useColumnFilter, useSidebar, useTableContext, useTableData, useTableFiltering, useTableGlobalFilter, useTableSizing, useTableSorting, useTableVisibility, useToast };
 //# sourceMappingURL=main.js.map
 //# sourceMappingURL=main.js.map