@myrjfa/ui 1.1.0 → 1.1.1

package/dist/misc/carousel.js

@@ -1,58 +1,38 @@
 "use client";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "@myrjfa/state/dist/lib/utils";
 import useEmblaCarousel from "embla-carousel-react";
 import { ArrowLeft, ArrowRight } from "lucide-react";
 import React from "react";
 import { Button } from "./button";
-var CarouselContext = React.createContext(null);
+const CarouselContext = React.createContext(null);
 function useCarousel() {
-    var context = React.useContext(CarouselContext);
+    const context = React.useContext(CarouselContext);
     if (!context) {
         throw new Error("useCarousel must be used within a <Carousel />");
     }
     return context;
 }
-function Carousel(_a) {
-    var _b = _a.orientation, orientation = _b === void 0 ? "horizontal" : _b, opts = _a.opts, setApi = _a.setApi, plugins = _a.plugins, className = _a.className, children = _a.children, props = __rest(_a, ["orientation", "opts", "setApi", "plugins", "className", "children"]);
-    var _c = useEmblaCarousel(__assign(__assign({}, opts), { axis: orientation === "horizontal" ? "x" : "y" }), plugins), carouselRef = _c[0], api = _c[1];
-    var _d = React.useState(false), canScrollPrev = _d[0], setCanScrollPrev = _d[1];
-    var _e = React.useState(false), canScrollNext = _e[0], setCanScrollNext = _e[1];
-    var onSelect = React.useCallback(function (api) {
+function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }) {
+    const [carouselRef, api] = useEmblaCarousel({
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+    }, plugins);
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+    const onSelect = React.useCallback((api) => {
         if (!api)
             return;
         setCanScrollPrev(api.canScrollPrev());
         setCanScrollNext(api.canScrollNext());
     }, []);
-    var scrollPrev = React.useCallback(function () {
+    const scrollPrev = React.useCallback(() => {
         api === null || api === void 0 ? void 0 : api.scrollPrev();
     }, [api]);
-    var scrollNext = React.useCallback(function () {
+    const scrollNext = React.useCallback(() => {
         api === null || api === void 0 ? void 0 : api.scrollNext();
     }, [api]);
-    var handleKeyDown = React.useCallback(function (event) {
+    const handleKeyDown = React.useCallback((event) => {
         if (event.key === "ArrowLeft") {
             event.preventDefault();
             scrollPrev();
@@ -62,54 +42,50 @@ function Carousel(_a) {
             scrollNext();
         }
     }, [scrollPrev, scrollNext]);
-    React.useEffect(function () {
+    React.useEffect(() => {
         if (!api || !setApi)
             return;
         setApi(api);
     }, [api, setApi]);
-    React.useEffect(function () {
+    React.useEffect(() => {
         if (!api)
             return;
         onSelect(api);
         api.on("reInit", onSelect);
         api.on("select", onSelect);
-        return function () {
+        return () => {
             api === null || api === void 0 ? void 0 : api.off("select", onSelect);
         };
     }, [api, onSelect]);
     return (_jsx(CarouselContext.Provider, { value: {
-            carouselRef: carouselRef,
+            carouselRef,
             api: api,
-            opts: opts,
+            opts,
             orientation: orientation || ((opts === null || opts === void 0 ? void 0 : opts.axis) === "y" ? "vertical" : "horizontal"),
-            scrollPrev: scrollPrev,
-            scrollNext: scrollNext,
-            canScrollPrev: canScrollPrev,
-            canScrollNext: canScrollNext,
-        }, children: _jsx("div", __assign({ onKeyDownCapture: handleKeyDown, className: cn("relative", className), role: "region", "aria-roledescription": "carousel", "data-slot": "carousel" }, props, { children: children })) }));
+            scrollPrev,
+            scrollNext,
+            canScrollPrev,
+            canScrollNext,
+        }, children: _jsx("div", { onKeyDownCapture: handleKeyDown, className: cn("relative", className), role: "region", "aria-roledescription": "carousel", "data-slot": "carousel", ...props, children: children }) }));
 }
-function CarouselContent(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    var _b = useCarousel(), carouselRef = _b.carouselRef, orientation = _b.orientation;
-    return (_jsx("div", { ref: carouselRef, className: "overflow-hidden", "data-slot": "carousel-content", children: _jsx("div", __assign({ className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className) }, props)) }));
+function CarouselContent({ className, ...props }) {
+    const { carouselRef, orientation } = useCarousel();
+    return (_jsx("div", { ref: carouselRef, className: "overflow-hidden", "data-slot": "carousel-content", children: _jsx("div", { className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className), ...props }) }));
 }
-function CarouselItem(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    var orientation = useCarousel().orientation;
-    return (_jsx("div", __assign({ role: "group", "aria-roledescription": "slide", "data-slot": "carousel-item", className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className) }, props)));
+function CarouselItem({ className, ...props }) {
+    const { orientation } = useCarousel();
+    return (_jsx("div", { role: "group", "aria-roledescription": "slide", "data-slot": "carousel-item", className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className), ...props }));
 }
-function CarouselPrevious(_a) {
-    var className = _a.className, _b = _a.variant, variant = _b === void 0 ? "outline" : _b, _c = _a.size, size = _c === void 0 ? "icon" : _c, props = __rest(_a, ["className", "variant", "size"]);
-    var _d = useCarousel(), orientation = _d.orientation, scrollPrev = _d.scrollPrev, canScrollPrev = _d.canScrollPrev;
-    return (_jsxs(Button, __assign({ "data-slot": "carousel-previous", variant: variant, size: size, className: cn("absolute size-8 rounded-full", orientation === "horizontal"
+function CarouselPrevious({ className, variant = "outline", size = "icon", ...props }) {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+    return (_jsxs(Button, { "data-slot": "carousel-previous", variant: variant, size: size, className: cn("absolute size-8 rounded-full", orientation === "horizontal"
             ? "top-1/2 left-2"
-            : "top-2 left-1/2 rotate-90", className), disabled: !canScrollPrev, onClick: scrollPrev }, props, { children: [_jsx(ArrowLeft, {}), _jsx("span", { className: "sr-only", children: "Previous slide" })] })));
+            : "top-2 left-1/2 rotate-90", className), disabled: !canScrollPrev, onClick: scrollPrev, ...props, children: [_jsx(ArrowLeft, {}), _jsx("span", { className: "sr-only", children: "Previous slide" })] }));
 }
-function CarouselNext(_a) {
-    var className = _a.className, _b = _a.variant, variant = _b === void 0 ? "outline" : _b, _c = _a.size, size = _c === void 0 ? "icon" : _c, props = __rest(_a, ["className", "variant", "size"]);
-    var _d = useCarousel(), orientation = _d.orientation, scrollNext = _d.scrollNext, canScrollNext = _d.canScrollNext;
-    return (_jsxs(Button, __assign({ "data-slot": "carousel-next", variant: variant, size: size, className: cn("absolute size-8 rounded-full", orientation === "horizontal"
+function CarouselNext({ className, variant = "outline", size = "icon", ...props }) {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+    return (_jsxs(Button, { "data-slot": "carousel-next", variant: variant, size: size, className: cn("absolute size-8 rounded-full", orientation === "horizontal"
             ? "top-1/2 right-2"
-            : "bottom-2 left-1/2 rotate-90", className), disabled: !canScrollNext, onClick: scrollNext }, props, { children: [_jsx(ArrowRight, {}), _jsx("span", { className: "sr-only", children: "Next slide" })] })));
+            : "bottom-2 left-1/2 rotate-90", className), disabled: !canScrollNext, onClick: scrollNext, ...props, children: [_jsx(ArrowRight, {}), _jsx("span", { className: "sr-only", children: "Next slide" })] }));
 }
 export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };

package/dist/misc/checkbox.js

@@ -1,32 +1,9 @@
 "use client";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { cn } from "@myrjfa/state/dist/lib/utils";
 import { CheckIcon } from "lucide-react";
-function Checkbox(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(CheckboxPrimitive.Root, __assign({ className: cn("peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className) }, props, { children: _jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current transition-none", children: _jsx(CheckIcon, { className: "size-3.5" }) }, "checkbox-indicator") }), "checkbox"));
+function Checkbox({ className, ...props }) {
+    return (_jsx(CheckboxPrimitive.Root, { className: cn("peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current transition-none", children: _jsx(CheckIcon, { className: "size-3.5" }) }, "checkbox-indicator") }, "checkbox"));
 }
 export { Checkbox };

package/dist/misc/command.js

@@ -1,65 +1,34 @@
 "use client";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "@myrjfa/state/dist/lib/utils";
 import { Command as CommandPrimitive } from "cmdk";
 import { SearchIcon } from "lucide-react";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "./dialog";
-function Command(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(CommandPrimitive, __assign({ "data-slot": "command", className: cn("bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className) }, props)));
+function Command({ className, ...props }) {
+    return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn("bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className), ...props }));
 }
-function CommandDialog(_a) {
-    var _b = _a.title, title = _b === void 0 ? "Command Palette" : _b, _c = _a.description, description = _c === void 0 ? "Search for a command to run..." : _c, children = _a.children, props = __rest(_a, ["title", "description", "children"]);
-    return (_jsxs(Dialog, __assign({}, props, { children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: "overflow-hidden p-0", children: _jsx(Command, { className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: children }) })] })));
+function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, ...props }) {
+    return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: "overflow-hidden p-0", children: _jsx(Command, { className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: children }) })] }));
 }
-function CommandInput(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsxs("div", { "data-slot": "command-input-wrapper", className: "flex h-9 items-center gap-2 border-b px-3", children: [_jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }), _jsx(CommandPrimitive.Input, __assign({ "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 CommandInput({ className, ...props }) {
+    return (_jsxs("div", { "data-slot": "command-input-wrapper", className: "flex h-9 items-center gap-2 border-b px-3", children: [_jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }), _jsx(CommandPrimitive.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(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(CommandPrimitive.List, __assign({ "data-slot": "command-list", className: cn("max-h-[250px] scroll-py-1 overflow-x-hidden overflow-y-auto", className) }, props)));
+function CommandList({ className, ...props }) {
+    return (_jsx(CommandPrimitive.List, { "data-slot": "command-list", className: cn("max-h-[350px] scroll-py-1 overflow-x-hidden overflow-y-auto touch-pan-y z-[300]", className), ...props }));
 }
-function CommandEmpty(_a) {
-    var props = __rest(_a, []);
-    return (_jsx(CommandPrimitive.Empty, __assign({ "data-slot": "command-empty", className: "py-6 text-center text-sm" }, props)));
+function CommandEmpty({ ...props }) {
+    return (_jsx(CommandPrimitive.Empty, { "data-slot": "command-empty", className: "py-6 text-center text-sm", ...props }));
 }
-function CommandGroup(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(CommandPrimitive.Group, __assign({ "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 CommandGroup({ className, ...props }) {
+    return (_jsx(CommandPrimitive.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 CommandSeparator(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(CommandPrimitive.Separator, __assign({ "data-slot": "command-separator", className: cn("bg-border -mx-1 h-px", className) }, props)));
+function CommandSeparator({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Separator, { "data-slot": "command-separator", className: cn("bg-border -mx-1 h-px", className), ...props }));
 }
-function CommandItem(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(CommandPrimitive.Item, __assign({ "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)));
+function CommandItem({ className, ...props }) {
+    return (_jsx(CommandPrimitive.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 }));
 }
-function CommandShortcut(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("span", __assign({ "data-slot": "command-shortcut", className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className) }, props)));
+function CommandShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "command-shortcut", className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className), ...props }));
 }
 export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/dist/misc/datepicker.js

@@ -1,13 +1,4 @@
 "use client";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from "@myrjfa/state/dist/lib/utils";
 import { format } from "date-fns";
@@ -16,43 +7,42 @@ import { useEffect, useState } from "react";
 import { Button } from "./button";
 import { FormControl, FormItem, FormLabel, } from "./form";
 import { Popover, PopoverContent, PopoverTrigger, } from "./popover";
-export function DatePicker(_a) {
-    var field = _a.field, _b = _a.minDate, minDate = _b === void 0 ? new Date("1900-01-01") : _b, _c = _a.maxDate, maxDate = _c === void 0 ? new Date("2100-01-01") : _c, _d = _a.label, label = _d === void 0 ? "Date of birth" : _d;
-    var _e = useState(false), open = _e[0], setOpen = _e[1];
+export function DatePicker({ field, minDate = new Date("1900-01-01"), maxDate = new Date("2100-01-01"), label = "Date of birth" }) {
+    const [open, setOpen] = useState(false);
     // Create state for the calendar view
-    var _f = useState(field.value || new Date()), calendarDate = _f[0], setCalendarDate = _f[1];
-    var _g = useState("days"), view = _g[0], setView = _g[1]; // "days", "months", or "years"
-    var _h = useState(function () {
-        var year = (field.value || new Date()).getFullYear();
-        var startYear = Math.floor(year / 10) * 10;
+    const [calendarDate, setCalendarDate] = useState(field.value || new Date());
+    const [view, setView] = useState("days"); // "days", "months", or "years"
+    const [yearRange, setYearRange] = useState(() => {
+        const year = (field.value || new Date()).getFullYear();
+        const startYear = Math.floor(year / 10) * 10;
         return [startYear, startYear + 9];
-    }), yearRange = _h[0], setYearRange = _h[1];
+    });
     // Update calendar date when field.value changes
-    useEffect(function () {
+    useEffect(() => {
         if (field.value) {
             setCalendarDate(field.value);
         }
     }, [field.value]);
     // Get min and max years constraints
-    var minYear = minDate.getFullYear();
-    var maxYear = maxDate.getFullYear();
+    const minYear = minDate.getFullYear();
+    const maxYear = maxDate.getFullYear();
     // Month names
-    var months = [
+    const months = [
         "January", "February", "March", "April", "May", "June",
         "July", "August", "September", "October", "November", "December"
     ];
     // Get days of the current month view
-    var getDaysInMonth = function (year, month) {
-        var daysInMonth = new Date(year, month + 1, 0).getDate();
-        var firstDayOfMonth = new Date(year, month, 1).getDay();
-        var prevMonthDays = [];
-        var currentMonthDays = [];
-        var nextMonthDays = [];
+    const getDaysInMonth = (year, month) => {
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const firstDayOfMonth = new Date(year, month, 1).getDay();
+        const prevMonthDays = [];
+        const currentMonthDays = [];
+        const nextMonthDays = [];
         // Previous month days
-        var prevMonth = month === 0 ? 11 : month - 1;
-        var prevMonthYear = month === 0 ? year - 1 : year;
-        var daysInPrevMonth = new Date(prevMonthYear, prevMonth + 1, 0).getDate();
-        for (var i = firstDayOfMonth - 1; i >= 0; i--) {
+        const prevMonth = month === 0 ? 11 : month - 1;
+        const prevMonthYear = month === 0 ? year - 1 : year;
+        const daysInPrevMonth = new Date(prevMonthYear, prevMonth + 1, 0).getDate();
+        for (let i = firstDayOfMonth - 1; i >= 0; i--) {
             prevMonthDays.unshift({
                 day: daysInPrevMonth - i,
                 month: prevMonth,
@@ -61,19 +51,19 @@ export function DatePicker(_a) {
             });
         }
         // Current month days
-        for (var i = 1; i <= daysInMonth; i++) {
+        for (let i = 1; i <= daysInMonth; i++) {
             currentMonthDays.push({
                 day: i,
-                month: month,
-                year: year,
+                month,
+                year,
                 isCurrentMonth: true
             });
         }
         // Next month days
-        var nextMonth = month === 11 ? 0 : month + 1;
-        var nextMonthYear = month === 11 ? year + 1 : year;
-        var remainingDays = 42 - (prevMonthDays.length + currentMonthDays.length);
-        for (var i = 1; i <= remainingDays; i++) {
+        const nextMonth = month === 11 ? 0 : month + 1;
+        const nextMonthYear = month === 11 ? year + 1 : year;
+        const remainingDays = 42 - (prevMonthDays.length + currentMonthDays.length);
+        for (let i = 1; i <= remainingDays; i++) {
             nextMonthDays.push({
                 day: i,
                 month: nextMonth,
@@ -81,10 +71,10 @@ export function DatePicker(_a) {
                 isCurrentMonth: false
             });
         }
-        return __spreadArray(__spreadArray(__spreadArray([], prevMonthDays, true), currentMonthDays, true), nextMonthDays, true);
+        return [...prevMonthDays, ...currentMonthDays, ...nextMonthDays];
     };
     // Check if a day is selected
-    var isSelected = function (day, month, year) {
+    const isSelected = (day, month, year) => {
         if (!field.value)
             return false;
         return field.value.getDate() === day &&
@@ -92,76 +82,76 @@ export function DatePicker(_a) {
             field.value.getFullYear() === year;
     };
     // Check if a day is disabled
-    var isDisabled = function (day, month, year) {
-        var date = new Date(year, month, day);
+    const isDisabled = (day, month, year) => {
+        const date = new Date(year, month, day);
         return date < minDate || date > maxDate;
     };
     // Handler for day selection
-    var handleDaySelect = function (day, month, year) {
-        var selectedDate = new Date(year, month, day);
+    const handleDaySelect = (day, month, year) => {
+        const selectedDate = new Date(year, month, day);
         field.onChange(selectedDate);
         setOpen(false);
     };
     // Handle month selection
-    var handleMonthSelect = function (monthIndex) {
-        var newDate = new Date(calendarDate.getFullYear(), monthIndex, 1);
+    const handleMonthSelect = (monthIndex) => {
+        const newDate = new Date(calendarDate.getFullYear(), monthIndex, 1);
         if (newDate >= minDate && newDate <= maxDate) {
             setCalendarDate(newDate);
             setView("days");
         }
     };
     // Handle year selection
-    var handleYearSelect = function (year) {
-        var newDate = new Date(year, calendarDate.getMonth(), 1);
+    const handleYearSelect = (year) => {
+        const newDate = new Date(year, calendarDate.getMonth(), 1);
         if (newDate >= minDate && newDate <= maxDate) {
             setCalendarDate(newDate);
             setView("months");
         }
     };
     // Navigate to previous month
-    var prevMonth = function () {
-        var prevMonthDate = new Date(calendarDate);
+    const prevMonth = () => {
+        const prevMonthDate = new Date(calendarDate);
         prevMonthDate.setMonth(prevMonthDate.getMonth() - 1);
         setCalendarDate(prevMonthDate);
     };
     // Navigate to next month
-    var nextMonth = function () {
-        var nextMonthDate = new Date(calendarDate);
+    const nextMonth = () => {
+        const nextMonthDate = new Date(calendarDate);
         nextMonthDate.setMonth(nextMonthDate.getMonth() + 1);
         setCalendarDate(nextMonthDate);
     };
     // Navigate to previous year range
-    var prevYearRange = function () {
+    const prevYearRange = () => {
         setYearRange([yearRange[0] - 10, yearRange[1] - 10]);
     };
     // Navigate to next year range
-    var nextYearRange = function () {
+    const nextYearRange = () => {
         setYearRange([yearRange[0] + 10, yearRange[1] + 10]);
     };
     // Toggle between day, month, and year views
-    var toggleView = function () {
+    const toggleView = () => {
         if (view === "days") {
             setView("months");
         }
         else if (view === "months") {
-            var year = calendarDate.getFullYear();
-            var startYear = Math.floor(year / 10) * 10;
+            const year = calendarDate.getFullYear();
+            const startYear = Math.floor(year / 10) * 10;
             setYearRange([startYear, startYear + 9]);
             setView("years");
         }
     };
     // Render the header
-    var renderHeader = function () {
+    const renderHeader = () => {
         if (view === "days") {
             return (_jsxs("div", { className: "flex justify-between items-center mb-2", children: [_jsx("button", { type: "button", className: "p-1 rounded-full hover:bg-gray-200", onClick: prevMonth, children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsxs("button", { type: "button", className: "font-semibold hover:bg-muted px-2 py-1 rounded", onClick: toggleView, children: [months[calendarDate.getMonth()], " ", calendarDate.getFullYear()] }), _jsx("button", { type: "button", className: "p-1 rounded-full hover:bg-gray-200", onClick: nextMonth, children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] }));
         }
         else if (view === "months") {
-            return (_jsxs("div", { className: "flex justify-between items-center mb-2", children: [_jsx("button", { type: "button", className: "p-1 rounded-full hover:bg-gray-200", onClick: function () {
-                            var newDate = new Date(calendarDate);
+            return (_jsxs("div", { className: "flex justify-between items-center mb-2", children: [_jsx("button", { type: "button", className: "p-1 rounded-full hover:bg-gray-200", onClick: () => {
+                            const newDate = new Date(calendarDate);
                             newDate.setFullYear(newDate.getFullYear() - 1);
                             setCalendarDate(newDate);
-                        }, children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", className: "font-semibold hover:bg-muted px-2 py-1 rounded", onClick: toggleView, children: calendarDate.getFullYear() }), _jsx("button", { type: "button", className: "p-1 rounded-full hover:bg-gray-200", onClick: function () {
-                            var newDate = new Date(calendarDate);
+                        }, children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", className: "font-semibold hover:bg-muted px-2 py-1 rounded", onClick: toggleView, children: calendarDate.getFullYear() }), _jsx("button", { type: "button", className: "p-1 rounded-full hover:bg-gray-200", onClick: () => {
+                            const newDate = new Date(calendarDate);
                             newDate.setFullYear(newDate.getFullYear() + 1);
                             setCalendarDate(newDate);
                         }, children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] }));
@@ -171,27 +161,27 @@ export function DatePicker(_a) {
         }
     };
     // Render the calendar content based on the current view
-    var renderCalendarContent = function () {
+    const renderCalendarContent = () => {
         if (view === "days") {
-            var daysInMonth = getDaysInMonth(calendarDate.getFullYear(), calendarDate.getMonth());
-            return (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-7 gap-1 mb-1", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(function (day) { return (_jsx("div", { className: "text-center text-xs font-medium text-gray-500", children: day }, day)); }) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: daysInMonth.map(function (dayInfo, index) {
-                            var day = dayInfo.day, month = dayInfo.month, year = dayInfo.year, isCurrentMonth = dayInfo.isCurrentMonth;
-                            var isDateSelected = isSelected(day, month, year);
-                            var isDateDisabled = isDisabled(day, month, year);
-                            return (_jsx("button", { type: "button", disabled: isDateDisabled, className: cn("h-8 w-8 text-sm rounded-full flex items-center justify-center", !isCurrentMonth && "text-muted-foreground", isDateSelected && !isDateDisabled && "bg-black text-white", !isDateSelected && !isDateDisabled && "hover:bg-muted", isDateDisabled && "text-gray-300 cursor-not-allowed"), onClick: function () { return handleDaySelect(day, month, year); }, children: day }, index));
+            const daysInMonth = getDaysInMonth(calendarDate.getFullYear(), calendarDate.getMonth());
+            return (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-7 gap-1 mb-1", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (_jsx("div", { className: "text-center text-xs font-medium text-gray-500", children: day }, day))) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: daysInMonth.map((dayInfo, index) => {
+                            const { day, month, year, isCurrentMonth } = dayInfo;
+                            const isDateSelected = isSelected(day, month, year);
+                            const isDateDisabled = isDisabled(day, month, year);
+                            return (_jsx("button", { type: "button", disabled: isDateDisabled, className: cn("h-8 w-8 text-sm rounded-full flex items-center justify-center", !isCurrentMonth && "text-muted-foreground", isDateSelected && !isDateDisabled && "bg-black text-white", !isDateSelected && !isDateDisabled && "hover:bg-muted", isDateDisabled && "text-gray-300 cursor-not-allowed"), onClick: () => handleDaySelect(day, month, year), children: day }, index));
                         }) })] }));
         }
         else if (view === "months") {
-            return (_jsx("div", { className: "grid grid-cols-3 gap-2 p-2", children: months.map(function (month, index) {
-                    var isMonthDisabled = (calendarDate.getFullYear() === minYear && index < minDate.getMonth()) ||
+            return (_jsx("div", { className: "grid grid-cols-3 gap-2 p-2", children: months.map((month, index) => {
+                    const isMonthDisabled = (calendarDate.getFullYear() === minYear && index < minDate.getMonth()) ||
                         (calendarDate.getFullYear() === maxYear && index > maxDate.getMonth());
-                    return (_jsx("button", { type: "button", disabled: isMonthDisabled, className: cn("py-2 rounded text-sm", calendarDate.getMonth() === index && "bg-black text-white", !isMonthDisabled && calendarDate.getMonth() !== index && "hover:bg-muted", isMonthDisabled && "text-gray-300 cursor-not-allowed"), onClick: function () { return handleMonthSelect(index); }, children: month.substring(0, 3) }, month));
+                    return (_jsx("button", { type: "button", disabled: isMonthDisabled, className: cn("py-2 rounded text-sm", calendarDate.getMonth() === index && "bg-black text-white", !isMonthDisabled && calendarDate.getMonth() !== index && "hover:bg-muted", isMonthDisabled && "text-gray-300 cursor-not-allowed"), onClick: () => handleMonthSelect(index), children: month.substring(0, 3) }, month));
                 }) }));
         }
         else if (view === "years") {
-            return (_jsx("div", { className: "grid grid-cols-3 gap-2 p-2", children: Array.from({ length: 10 }, function (_, i) { return yearRange[0] + i; }).map(function (year) {
-                    var isYearDisabled = year < minYear || year > maxYear;
-                    return (_jsx("button", { type: "button", disabled: isYearDisabled, className: cn("py-2 rounded text-sm", calendarDate.getFullYear() === year && "bg-black text-white", !isYearDisabled && calendarDate.getFullYear() !== year && "hover:bg-muted", isYearDisabled && "text-gray-300 cursor-not-allowed"), onClick: function () { return handleYearSelect(year); }, children: year }, year));
+            return (_jsx("div", { className: "grid grid-cols-3 gap-2 p-2", children: Array.from({ length: 10 }, (_, i) => yearRange[0] + i).map((year) => {
+                    const isYearDisabled = year < minYear || year > maxYear;
+                    return (_jsx("button", { type: "button", disabled: isYearDisabled, className: cn("py-2 rounded text-sm", calendarDate.getFullYear() === year && "bg-black text-white", !isYearDisabled && calendarDate.getFullYear() !== year && "hover:bg-muted", isYearDisabled && "text-gray-300 cursor-not-allowed"), onClick: () => handleYearSelect(year), children: year }, year));
                 }) }));
         }
     };