art-bd-ui 1.0.6 → 1.0.7

package/dist/cjs/_virtual/range.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _commonjsHelpers = require('./_commonjsHelpers.js');
+var range$1 = require('../node_modules/lodash/range.js');
+
+var rangeExports = range$1.__require();
+var range = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(rangeExports);
+
+exports.default = range;

package/dist/cjs/components/forms/input/input.js

@@ -36,3 +36,4 @@ const Input = React.forwardRef((_a, ref) => {
 Input.displayName = "Input";
 
 exports.Input = Input;
+exports.inputVariants = inputVariants;

package/dist/cjs/components/ui/alert/alert.js

@@ -32,3 +32,4 @@ function AlertDescription(_a) {
 exports.Alert = Alert;
 exports.AlertDescription = AlertDescription;
 exports.AlertTitle = AlertTitle;
+exports.alertVariants = alertVariants;

package/dist/cjs/components/ui/badge/badge.js

@@ -28,4 +28,3 @@ const Badge = (_a) => {
 Badge.displayName = "Badge";
 
 exports.Badge = Badge;
-exports.badgeVariants = badgeVariants;

package/dist/cjs/components/ui/calendar/calendar.js

@@ -3,22 +3,55 @@
 
 var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var utils = require('../../../lib/utils.js');
 var icon = require('../../media/icon/icon.js');
 var button = require('../../buttons/button/button.js');
+var select = require('../../forms/select/select.js');
 var DayPicker = require('../../../node_modules/react-day-picker/dist/esm/DayPicker.js');
 
-function Calendar(_a) {
+const Chevron = (_a) => {
+    var { className, orientation } = _a, props = tslib_es6.__rest(_a, ["className", "orientation"]);
+    return (jsxRuntime.jsx(icon.Icon, Object.assign({ name: `chevron-${orientation}`, className: utils.cn("h-4 w-4", className) }, props)));
+};
+const Dropdown = (props) => {
+    const { options, value, onChange } = props;
+    const handleValueChange = (newValue) => {
+        if (onChange) {
+            const syntheticEvent = {
+                target: {
+                    value: newValue,
+                },
+            };
+            onChange(syntheticEvent);
+        }
+    };
+    return (jsxRuntime.jsxs(select.Select, { value: value === null || value === void 0 ? void 0 : value.toString(), onValueChange: handleValueChange, children: [jsxRuntime.jsx(select.SelectTrigger, { children: jsxRuntime.jsx(select.SelectValue, {}) }), jsxRuntime.jsx(select.SelectContent, { children: jsxRuntime.jsx(select.SelectGroup, { children: options === null || options === void 0 ? void 0 : options.map((option) => (jsxRuntime.jsx(select.SelectItem, { value: option.value.toString(), disabled: option.disabled, children: option.label }, option.value))) }) })] }));
+};
+const components = {
+    Chevron,
+    Dropdown,
+};
+const Calendar = React.memo((_a) => {
+    var _b, _c;
     var { className, classNames, showOutsideDays = true } = _a, props = tslib_es6.__rest(_a, ["className", "classNames", "showOutsideDays"]);
-    return (jsxRuntime.jsx(DayPicker.DayPicker, Object.assign({ showOutsideDays: showOutsideDays, className: utils.cn("p-3", className), classNames: Object.assign({ months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", month: "space-y-4", caption: "flex justify-center pt-1 relative items-center", caption_label: "text-sm font-medium", nav: "space-x-1 flex items-center", nav_button: utils.cn(button.buttonVariants({ variant: "outline" }), "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"), nav_button_previous: "absolute left-1", nav_button_next: "absolute right-1", table: "w-full border-collapse space-y-1", head_row: "flex", head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]", row: "flex w-full mt-2", cell: utils.cn("relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md", props.mode === "range"
-                ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-                : "[&:has([aria-selected])]:rounded-md"), day: utils.cn(button.buttonVariants({ variant: "ghost" }), "h-8 w-8 p-0 font-normal aria-selected:opacity-100"), day_range_start: "day-range-start", day_range_end: "day-range-end", day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground", day_today: "bg-accent text-accent-foreground", day_outside: "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground", day_disabled: "text-muted-foreground opacity-50", day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground", day_hidden: "invisible" }, classNames), components: {
-            Chevron: (_a) => {
-                var { className, orientation } = _a, props = tslib_es6.__rest(_a, ["className", "orientation"]);
-                return (jsxRuntime.jsx(icon.Icon, Object.assign({ name: `chevron-${orientation}`, className: utils.cn("h-4 w-4", className) }, props)));
-            },
-        } }, props)));
-}
+    const selectedMonth = (_b = props.month) === null || _b === void 0 ? void 0 : _b.getMonth();
+    const selectedYear = (_c = props.month) === null || _c === void 0 ? void 0 : _c.getFullYear();
+    const disabledLeftNavigation = React.useMemo(() => {
+        if (selectedMonth && props.startMonth) {
+            return selectedMonth === props.startMonth.getMonth() && selectedYear === props.startMonth.getFullYear();
+        }
+        return false;
+    }, [selectedMonth, selectedYear, props.startMonth]);
+    const disabledRightNavigation = React.useMemo(() => {
+        if (selectedMonth && props.endMonth) {
+            return selectedMonth === props.endMonth.getMonth() && selectedYear === props.endMonth.getFullYear();
+        }
+        return false;
+    }, [selectedMonth, selectedYear, props.endMonth]);
+    const _classNames = React.useMemo(() => (Object.assign({ months: "flex flex-col sm:flex-row space-y-4 sm:space-y-0 justify-center", month: "flex flex-col items-center space-y-4", month_caption: "flex justify-center pt-1 relative items-center", caption_label: "text-sm font-medium", nav: "space-x-1 flex items-center", dropdowns: "inline-flex gap-2 items-center", button_previous: utils.cn(button.buttonVariants({ variant: "outline" }), "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-5 top-5", disabledLeftNavigation && "pointer-events-none"), button_next: utils.cn(button.buttonVariants({ variant: "outline" }), "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-5 top-5", disabledRightNavigation && "pointer-events-none"), month_grid: "w-full border-collapse space-y-1", weekdays: utils.cn("flex", props.showWeekNumber && "justify-end"), weekday: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]", week: "flex w-full mt-2", day: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 rounded-1", day_button: utils.cn(button.buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100 rounded-l-md rounded-r-md"), range_end: "day-range-end", selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-l-md rounded-r-md", today: "bg-accent text-accent-foreground", outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30", disabled: "text-muted-foreground opacity-50", range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground", hidden: "invisible" }, classNames)), [props.showWeekNumber, disabledLeftNavigation, disabledRightNavigation, classNames]);
+    return (jsxRuntime.jsx(DayPicker.DayPicker, Object.assign({ captionLayout: "dropdown", showOutsideDays: showOutsideDays, className: utils.cn("p-3", className), classNames: _classNames, components: components }, props)));
+});
 Calendar.displayName = "Calendar";
 
 exports.Calendar = Calendar;

package/dist/cjs/components/ui/card/card.js

@@ -52,3 +52,4 @@ exports.CardDescription = CardDescription;
 exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
+exports.cardVariants = cardVariants;

package/dist/cjs/components/ui/date-pickers/date-time-picker/date-time-picker.js

@@ -0,0 +1,88 @@
+"use client";
+'use strict';
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var timePicker = require('../time-picker/time-picker.js');
+var calendar = require('../../calendar/calendar.js');
+var utils = require('../../../../lib/utils.js');
+var popover = require('../../../popovers/popover/popover.js');
+var button = require('../../../buttons/button/button.js');
+var uk = require('../../../../node_modules/date-fns/locale/uk.js');
+var enUS = require('../../../../node_modules/date-fns/locale/en-US.js');
+var add = require('../../../../node_modules/date-fns/add.js');
+var format = require('../../../../node_modules/date-fns/format.js');
+
+const getDateFnsLocale = (locale) => (locale === "ua" ? uk.uk : enUS.enUS);
+const DateTimePicker = React.forwardRef((_a, ref) => {
+    var _b, _c;
+    var { locale = "en", defaultPopupValue = new Date(new Date().setHours(0, 0, 0, 0)), value, onChange, onMonthChange, hourCycle = 24, disabled = false, displayFormat, granularity = "second", placeholder = "Pick a date", className } = _a, props = tslib_es6.__rest(_a, ["locale", "defaultPopupValue", "value", "onChange", "onMonthChange", "hourCycle", "disabled", "displayFormat", "granularity", "placeholder", "className"]);
+    const buttonRef = React.useRef(null);
+    const [month, setMonth] = React.useState(value !== null && value !== void 0 ? value : defaultPopupValue);
+    const [displayDate, setDisplayDate] = React.useState(value !== null && value !== void 0 ? value : undefined);
+    onMonthChange || (onMonthChange = onChange);
+    /**
+     * Makes sure display date updates when value change on
+     * parent component
+     */
+    React.useEffect(() => {
+        setDisplayDate(value);
+    }, [value]);
+    /**
+     * carry over the current time when a user clicks a new day
+     * instead of resetting to 00:00
+     */
+    const handleMonthChange = (newDay) => {
+        var _a, _b, _c, _d, _e, _f;
+        if (!newDay) {
+            return;
+        }
+        if (!defaultPopupValue) {
+            newDay.setHours((_a = month === null || month === void 0 ? void 0 : month.getHours()) !== null && _a !== void 0 ? _a : 0, (_b = month === null || month === void 0 ? void 0 : month.getMinutes()) !== null && _b !== void 0 ? _b : 0, (_c = month === null || month === void 0 ? void 0 : month.getSeconds()) !== null && _c !== void 0 ? _c : 0);
+            onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(newDay);
+            setMonth(newDay);
+            return;
+        }
+        const diff = newDay.getTime() - defaultPopupValue.getTime();
+        const diffInDays = diff / (1000 * 60 * 60 * 24);
+        const newDateFull = add.add(defaultPopupValue, { days: Math.ceil(diffInDays) });
+        newDateFull.setHours((_d = month === null || month === void 0 ? void 0 : month.getHours()) !== null && _d !== void 0 ? _d : 0, (_e = month === null || month === void 0 ? void 0 : month.getMinutes()) !== null && _e !== void 0 ? _e : 0, (_f = month === null || month === void 0 ? void 0 : month.getSeconds()) !== null && _f !== void 0 ? _f : 0);
+        onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(newDateFull);
+        setMonth(newDateFull);
+    };
+    const onSelect = (newDay) => {
+        if (!newDay) {
+            return;
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(newDay);
+        setMonth(newDay);
+        setDisplayDate(newDay);
+    };
+    React.useImperativeHandle(ref, () => (Object.assign(Object.assign({}, buttonRef.current), { value: displayDate })), [displayDate]);
+    const initHourFormat = {
+        hour24: (_b = displayFormat === null || displayFormat === void 0 ? void 0 : displayFormat.hour24) !== null && _b !== void 0 ? _b : `PPP HH:mm${!granularity || granularity === "second" ? ":ss" : ""}`,
+        hour12: (_c = displayFormat === null || displayFormat === void 0 ? void 0 : displayFormat.hour12) !== null && _c !== void 0 ? _c : `PP hh:mm${!granularity || granularity === "second" ? ":ss" : ""} b`,
+    };
+    const loc = getDateFnsLocale(locale);
+    return (jsxRuntime.jsxs(popover.Popover, { children: [jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, disabled: disabled, children: jsxRuntime.jsx(button.Button, { ref: buttonRef, variant: "outline", leftIcon: "calendar", className: utils.cn("w-full justify-start text-left font-normal", !displayDate && "text-muted-foreground", className), children: displayDate
+                        ? format.formatDate(displayDate, hourCycle === 24 ? initHourFormat.hour24 : initHourFormat.hour12, {
+                            locale: loc,
+                        })
+                        : placeholder }) }), jsxRuntime.jsxs(popover.PopoverContent, { className: "w-auto p-0", children: [jsxRuntime.jsx(calendar.Calendar, Object.assign({ mode: "single", selected: displayDate, month: month, onSelect: (newDate) => {
+                            var _a, _b, _c;
+                            if (newDate) {
+                                newDate.setHours((_a = month === null || month === void 0 ? void 0 : month.getHours()) !== null && _a !== void 0 ? _a : 0, (_b = month === null || month === void 0 ? void 0 : month.getMinutes()) !== null && _b !== void 0 ? _b : 0, (_c = month === null || month === void 0 ? void 0 : month.getSeconds()) !== null && _c !== void 0 ? _c : 0);
+                                onSelect(newDate);
+                            }
+                        }, onMonthChange: handleMonthChange, locale: loc }, props)), granularity !== "day" && (jsxRuntime.jsx("div", { className: "border-border border-t p-3", children: jsxRuntime.jsx(timePicker.TimePicker, { value: month, onChange: (value) => {
+                                onChange === null || onChange === void 0 ? void 0 : onChange(value);
+                                setDisplayDate(value);
+                                if (value) {
+                                    setMonth(value);
+                                }
+                            }, hourCycle: hourCycle, granularity: granularity }) }))] })] }));
+});
+DateTimePicker.displayName = "DateTimePicker";
+
+exports.DateTimePicker = DateTimePicker;

package/dist/cjs/components/ui/date-pickers/month-select/month-select.js

@@ -0,0 +1,25 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var select = require('../../../forms/select/select.js');
+var enUS = require('../../../../node_modules/date-fns/locale/en-US.js');
+var format = require('../../../../node_modules/date-fns/format.js');
+
+function genMonths(locale) {
+    return Array.from({ length: 12 }, (_, i) => ({
+        value: i,
+        label: format.formatDate(new Date(2021, i), "MMMM", { locale }),
+    }));
+}
+const defaultLocale = enUS.enUS;
+const MonthSelect = React.forwardRef(({ value: month, onChange, locale = defaultLocale }, ref) => {
+    const MONTHS = React.useMemo(() => genMonths(locale), []);
+    return (jsxRuntime.jsxs(select.Select, { defaultValue: month === null || month === void 0 ? void 0 : month.toString(), onValueChange: (value) => {
+            onChange === null || onChange === void 0 ? void 0 : onChange(Number.parseInt(value, 10));
+        }, children: [jsxRuntime.jsx(select.SelectTrigger, { ref: ref, className: "focus:bg-accent focus:text-accent-foreground w-fit gap-1 border-none p-0", children: jsxRuntime.jsx(select.SelectValue, {}) }), jsxRuntime.jsx(select.SelectContent, { children: MONTHS.map((month) => (jsxRuntime.jsx(select.SelectItem, { value: month.value.toString(), children: month.label }, month.value))) })] }));
+});
+MonthSelect.displayName = "MonthSelect";
+
+exports.MonthSelect = MonthSelect;

package/dist/cjs/components/ui/date-pickers/time-picker/components/time-period-select.js

@@ -0,0 +1,33 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('../../utils.js');
+var select = require('../../../../forms/select/select.js');
+var flex = require('../../../../layout/flex/flex.js');
+
+const TimePeriodSelect = React.forwardRef(({ period, setPeriod, date, onDateChange, onLeftFocus, onRightFocus }, ref) => {
+    const handleKeyDown = (e) => {
+        if (e.key === "ArrowRight")
+            onRightFocus === null || onRightFocus === void 0 ? void 0 : onRightFocus();
+        if (e.key === "ArrowLeft")
+            onLeftFocus === null || onLeftFocus === void 0 ? void 0 : onLeftFocus();
+    };
+    const handleValueChange = (value) => {
+        setPeriod === null || setPeriod === void 0 ? void 0 : setPeriod(value);
+        /**
+         * trigger an update whenever the user switches between AM and PM;
+         * otherwise user must manually change the hour each time
+         */
+        if (date) {
+            const tempDate = new Date(date);
+            const hours = utils.display12HourValue(date.getHours());
+            onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(utils.setDateByType(tempDate, hours.toString(), "12hours", period === "AM" ? "PM" : "AM"));
+        }
+    };
+    return (jsxRuntime.jsx(flex.Flex, { align: "center", className: "h-10", children: jsxRuntime.jsxs(select.Select, { defaultValue: period, onValueChange: (value) => handleValueChange(value), children: [jsxRuntime.jsx(select.SelectTrigger, { ref: ref, className: "focus:bg-accent focus:text-accent-foreground w-[65px]", onKeyDown: handleKeyDown, children: jsxRuntime.jsx(select.SelectValue, {}) }), jsxRuntime.jsxs(select.SelectContent, { children: [jsxRuntime.jsx(select.SelectItem, { value: "AM", children: "AM" }), jsxRuntime.jsx(select.SelectItem, { value: "PM", children: "PM" })] })] }) }));
+});
+TimePeriodSelect.displayName = "TimePeriodSelect";
+
+exports.TimePeriodSelect = TimePeriodSelect;

package/dist/cjs/components/ui/date-pickers/time-picker/components/time-picker-input.js

@@ -0,0 +1,78 @@
+"use client";
+'use strict';
+
+var tslib_es6 = require('../../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('../../utils.js');
+var utils$1 = require('../../../../../lib/utils.js');
+var input = require('../../../../forms/input/input.js');
+
+const TimePickerInput = React.forwardRef((_a, ref) => {
+    var { className, type = "tel", value, id, name, date = new Date(new Date().setHours(0, 0, 0, 0)), onDateChange, onChange, onKeyDown, picker, period, onLeftFocus, onRightFocus } = _a, props = tslib_es6.__rest(_a, ["className", "type", "value", "id", "name", "date", "onDateChange", "onChange", "onKeyDown", "picker", "period", "onLeftFocus", "onRightFocus"]);
+    const [flag, setFlag] = React.useState(false);
+    const [prevIntKey, setPrevIntKey] = React.useState("0");
+    /**
+     * allow the user to enter the second digit within 2 seconds
+     * otherwise start again with entering first digit
+     */
+    React.useEffect(() => {
+        if (flag) {
+            const timer = setTimeout(() => {
+                setFlag(false);
+            }, 2000);
+            return () => clearTimeout(timer);
+        }
+    }, [flag]);
+    const calculatedValue = React.useMemo(() => {
+        return utils.getDateByType(date, picker);
+    }, [date, picker]);
+    const calculateNewValue = (key) => {
+        /*
+         * If picker is '12hours' and the first digit is 0, then the second digit is automatically set to 1.
+         * The second entered digit will break the condition and the value will be set to 10-12.
+         */
+        if (picker === "12hours") {
+            if (flag && calculatedValue.slice(1, 2) === "1" && prevIntKey === "0")
+                return `0${key}`;
+        }
+        return !flag ? `0${key}` : calculatedValue.slice(1, 2) + key;
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Tab")
+            return;
+        e.preventDefault();
+        if (e.key === "ArrowRight")
+            onRightFocus === null || onRightFocus === void 0 ? void 0 : onRightFocus();
+        if (e.key === "ArrowLeft")
+            onLeftFocus === null || onLeftFocus === void 0 ? void 0 : onLeftFocus();
+        if (["ArrowUp", "ArrowDown"].includes(e.key)) {
+            const step = e.key === "ArrowUp" ? 1 : -1;
+            const newValue = utils.getArrowByType(calculatedValue, step, picker);
+            if (flag)
+                setFlag(false);
+            const tempDate = date ? new Date(date) : new Date();
+            onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(utils.setDateByType(tempDate, newValue, picker, period));
+        }
+        if (e.key >= "0" && e.key <= "9") {
+            if (picker === "12hours")
+                setPrevIntKey(e.key);
+            const newValue = calculateNewValue(e.key);
+            if (flag)
+                onRightFocus === null || onRightFocus === void 0 ? void 0 : onRightFocus();
+            setFlag((prev) => !prev);
+            const tempDate = date ? new Date(date) : new Date();
+            onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(utils.setDateByType(tempDate, newValue, picker, period));
+        }
+    };
+    return (jsxRuntime.jsx(input.Input, Object.assign({ ref: ref, id: id || picker, name: name || picker, className: utils$1.cn("focus:bg-accent focus:text-accent-foreground w-[48px] text-center font-mono text-base tabular-nums caret-transparent [&::-webkit-inner-spin-button]:appearance-none", className), value: value || calculatedValue, onChange: (e) => {
+            e.preventDefault();
+            onChange === null || onChange === void 0 ? void 0 : onChange(e);
+        }, type: type, inputMode: "decimal", onKeyDown: (e) => {
+            onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+            handleKeyDown(e);
+        } }, props)));
+});
+TimePickerInput.displayName = "TimePickerInput";
+
+exports.TimePickerInput = TimePickerInput;

package/dist/cjs/components/ui/date-pickers/time-picker/time-picker.js

@@ -0,0 +1,35 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var timePickerInput = require('./components/time-picker-input.js');
+var timePeriodSelect = require('./components/time-period-select.js');
+var icon = require('../../../media/icon/icon.js');
+var flex = require('../../../layout/flex/flex.js');
+
+const TimePicker = React.forwardRef(({ value: date, onChange, hourCycle = 24, granularity = "second" }, ref) => {
+    const minuteRef = React.useRef(null);
+    const hourRef = React.useRef(null);
+    const secondRef = React.useRef(null);
+    const periodRef = React.useRef(null);
+    const [period, setPeriod] = React.useState(date && date.getHours() >= 12 ? "PM" : "AM");
+    React.useImperativeHandle(ref, () => ({
+        minuteRef: minuteRef.current,
+        hourRef: hourRef.current,
+        secondRef: secondRef.current,
+        periodRef: periodRef.current,
+    }), [minuteRef, hourRef, secondRef]);
+    return (jsxRuntime.jsxs(flex.Flex, { align: "center", justify: "center", gap: 2, children: [jsxRuntime.jsx("label", { htmlFor: "datetime-picker-hour-input", className: "inline-flex items-center cursor-pointer", children: jsxRuntime.jsx(icon.Icon, { name: "clock", className: "mr-2 h-4 w-4" }) }), jsxRuntime.jsx(timePickerInput.TimePickerInput, { picker: hourCycle === 24 ? "hours" : "12hours", date: date, id: "datetime-picker-hour-input", onDateChange: onChange, ref: hourRef, period: period, onRightFocus: () => { var _a; return (_a = minuteRef === null || minuteRef === void 0 ? void 0 : minuteRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } }), (granularity === "minute" || granularity === "second") && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [":", jsxRuntime.jsx(timePickerInput.TimePickerInput, { picker: "minutes", date: date, onDateChange: onChange, ref: minuteRef, onLeftFocus: () => { var _a; return (_a = hourRef === null || hourRef === void 0 ? void 0 : hourRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, onRightFocus: () => { var _a; return (_a = secondRef === null || secondRef === void 0 ? void 0 : secondRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } })] })), granularity === "second" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [":", jsxRuntime.jsx(timePickerInput.TimePickerInput, { ref: secondRef, picker: "seconds", date: date, onDateChange: onChange, onLeftFocus: () => { var _a; return (_a = minuteRef === null || minuteRef === void 0 ? void 0 : minuteRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, onRightFocus: () => { var _a; return (_a = periodRef === null || periodRef === void 0 ? void 0 : periodRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } })] })), hourCycle === 12 && (jsxRuntime.jsx("div", { className: "grid gap-1 text-center", children: jsxRuntime.jsx(timePeriodSelect.TimePeriodSelect, { ref: periodRef, period: period, setPeriod: setPeriod, date: date, onDateChange: (date) => {
+                        onChange === null || onChange === void 0 ? void 0 : onChange(date);
+                        if (date && (date === null || date === void 0 ? void 0 : date.getHours()) >= 12) {
+                            setPeriod("PM");
+                        }
+                        else {
+                            setPeriod("AM");
+                        }
+                    }, onLeftFocus: () => { var _a; return (_a = secondRef === null || secondRef === void 0 ? void 0 : secondRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } }) }))] }));
+});
+TimePicker.displayName = "TimePicker";
+
+exports.TimePicker = TimePicker;

package/dist/cjs/components/ui/date-pickers/utils.js

@@ -0,0 +1,177 @@
+'use strict';
+
+/**
+ * regular expression to check for valid hour format (01-23)
+ */
+function isValidHour(value) {
+    return /^(0[0-9]|1[0-9]|2[0-3])$/.test(value);
+}
+/**
+ * regular expression to check for valid 12 hour format (01-12)
+ */
+function isValid12Hour(value) {
+    return /^(0[1-9]|1[0-2])$/.test(value);
+}
+/**
+ * regular expression to check for valid minute format (00-59)
+ */
+function isValidMinuteOrSecond(value) {
+    return /^[0-5][0-9]$/.test(value);
+}
+function getValidNumber(value, { max, min = 0, loop = false }) {
+    let numericValue = parseInt(value, 10);
+    if (!Number.isNaN(numericValue)) {
+        if (!loop) {
+            if (numericValue > max)
+                numericValue = max;
+            if (numericValue < min)
+                numericValue = min;
+        }
+        else {
+            if (numericValue > max)
+                numericValue = min;
+            if (numericValue < min)
+                numericValue = max;
+        }
+        return numericValue.toString().padStart(2, "0");
+    }
+    return "00";
+}
+function getValidHour(value) {
+    if (isValidHour(value))
+        return value;
+    return getValidNumber(value, { max: 23 });
+}
+function getValid12Hour(value) {
+    if (isValid12Hour(value))
+        return value;
+    return getValidNumber(value, { min: 1, max: 12 });
+}
+function getValidMinuteOrSecond(value) {
+    if (isValidMinuteOrSecond(value))
+        return value;
+    return getValidNumber(value, { max: 59 });
+}
+function getValidArrowNumber(value, { min, max, step }) {
+    let numericValue = parseInt(value, 10);
+    if (!Number.isNaN(numericValue)) {
+        numericValue += step;
+        return getValidNumber(String(numericValue), { min, max, loop: true });
+    }
+    return "00";
+}
+function getValidArrowHour(value, step) {
+    return getValidArrowNumber(value, { min: 0, max: 23, step });
+}
+function getValidArrow12Hour(value, step) {
+    return getValidArrowNumber(value, { min: 1, max: 12, step });
+}
+function getValidArrowMinuteOrSecond(value, step) {
+    return getValidArrowNumber(value, { min: 0, max: 59, step });
+}
+function setMinutes(date, value) {
+    const minutes = getValidMinuteOrSecond(value);
+    date.setMinutes(parseInt(minutes, 10));
+    return date;
+}
+function setSeconds(date, value) {
+    const seconds = getValidMinuteOrSecond(value);
+    date.setSeconds(parseInt(seconds, 10));
+    return date;
+}
+function setHours(date, value) {
+    const hours = getValidHour(value);
+    date.setHours(parseInt(hours, 10));
+    return date;
+}
+function set12Hours(date, value, period) {
+    const hours = parseInt(getValid12Hour(value), 10);
+    const convertedHours = convert12HourTo24Hour(hours, period);
+    date.setHours(convertedHours);
+    return date;
+}
+function setDateByType(date, value, type, period) {
+    switch (type) {
+        case "minutes":
+            return setMinutes(date, value);
+        case "seconds":
+            return setSeconds(date, value);
+        case "hours":
+            return setHours(date, value);
+        case "12hours": {
+            if (!period)
+                return date;
+            return set12Hours(date, value, period);
+        }
+        default:
+            return date;
+    }
+}
+function getDateByType(date, type) {
+    if (!date)
+        return "00";
+    switch (type) {
+        case "minutes":
+            return getValidMinuteOrSecond(String(date.getMinutes()));
+        case "seconds":
+            return getValidMinuteOrSecond(String(date.getSeconds()));
+        case "hours":
+            return getValidHour(String(date.getHours()));
+        case "12hours":
+            return getValid12Hour(String(display12HourValue(date.getHours())));
+        default:
+            return "00";
+    }
+}
+function getArrowByType(value, step, type) {
+    switch (type) {
+        case "minutes":
+            return getValidArrowMinuteOrSecond(value, step);
+        case "seconds":
+            return getValidArrowMinuteOrSecond(value, step);
+        case "hours":
+            return getValidArrowHour(value, step);
+        case "12hours":
+            return getValidArrow12Hour(value, step);
+        default:
+            return "00";
+    }
+}
+/**
+ * handles value change of 12-hour input
+ * 12:00 PM is 12:00
+ * 12:00 AM is 00:00
+ */
+function convert12HourTo24Hour(hour, period) {
+    if (period === "PM") {
+        if (hour <= 11) {
+            return hour + 12;
+        }
+        return hour;
+    }
+    if (period === "AM") {
+        if (hour === 12)
+            return 0;
+        return hour;
+    }
+    return hour;
+}
+/**
+ * time is stored in the 24-hour form,
+ * but needs to be displayed to the user
+ * in its 12-hour representation
+ */
+function display12HourValue(hours) {
+    if (hours === 0 || hours === 12)
+        return "12";
+    if (hours >= 22)
+        return `${hours - 12}`;
+    if (hours % 12 > 9)
+        return `${hours}`;
+    return `0${hours % 12}`;
+}
+
+exports.display12HourValue = display12HourValue;
+exports.getArrowByType = getArrowByType;
+exports.getDateByType = getDateByType;
+exports.setDateByType = setDateByType;

package/dist/cjs/components/ui/date-pickers/year-select/year-select.js

@@ -0,0 +1,17 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var range = require('../../../../_virtual/range.js');
+var select = require('../../../forms/select/select.js');
+
+const YearSelect = React.forwardRef(({ value: year, onChange, minYear = 1940, maxYear = new Date().getFullYear() + 50 }, ref) => {
+    const YEARS = React.useMemo(() => range.default(minYear, maxYear, 1).map((y) => ({ value: y, label: y.toString() })), [minYear, maxYear]);
+    return (jsxRuntime.jsxs(select.Select, { defaultValue: year === null || year === void 0 ? void 0 : year.toString(), onValueChange: (value) => {
+            onChange === null || onChange === void 0 ? void 0 : onChange(Number.parseInt(value, 10));
+        }, children: [jsxRuntime.jsx(select.SelectTrigger, { ref: ref, className: "focus:bg-accent focus:text-accent-foreground w-fit gap-1 border-none p-0", children: jsxRuntime.jsx(select.SelectValue, {}) }), jsxRuntime.jsx(select.SelectContent, { position: "item-aligned", className: "max-h-[320px]", children: YEARS.map((year) => (jsxRuntime.jsx(select.SelectItem, { value: year.value.toString(), children: year.label }, year.value))) })] }));
+});
+YearSelect.displayName = "YearSelect";
+
+exports.YearSelect = YearSelect;