@mdigital_ui/ui 0.4.2 → 0.4.4

package/dist/chunk-BKLJDEUX.js

@@ -0,0 +1,857 @@
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-ROQGBDET.js';
+import { colorVars } from './chunk-G6QIIWKU.js';
+import { getValidationStatus, cn, iconSizes, statusMessageVariants } from './chunk-RAS6HUEI.js';
+import React3 from 'react';
+import ReactDatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import { Calendar, X, Clock, ChevronsLeft, ChevronsRight, ChevronLeft, ChevronRight } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var pickerInputVariants = cva(
+  "w-full placeholder:text-text-secondary/50 disabled:opacity-50 disabled:cursor-not-allowed outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background text-text-primary transition-colors",
+  {
+    variants: {
+      variant: {
+        outline: "bg-background border rounded-md",
+        filled: "bg-surface border border-transparent rounded-md"
+      },
+      status: {
+        default: "border-border",
+        error: "border-error",
+        warning: "border-warning",
+        info: "border-info",
+        success: "border-success"
+      },
+      size: {
+        xs: "h-(--input-height-xs) px-(--input-padding-x-xs) text-xs",
+        sm: "h-(--input-height-sm) px-(--input-padding-x-sm) text-sm",
+        md: "h-(--input-height-md) px-(--input-padding-x-md) text-base",
+        lg: "h-(--input-height-lg) px-(--input-padding-x-lg) text-lg"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: "max-w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "outline",
+      status: "default",
+      size: "md",
+      fullWidth: true
+    }
+  }
+);
+var datePickerBaseStyles = `
+  datePicker_day
+  [&_.react-datepicker]:!bg-background
+  [&_.react-datepicker]:!border-border
+  [&_.react-datepicker]:!text-text-primary
+  [&_.react-datepicker]:!flex
+  [&_.react-datepicker]:!gap-0
+  [&_.react-datepicker__header]:!bg-transparent
+  [&_.react-datepicker__header]:!border-none
+  [&_.react-datepicker__header]:!p-0
+  [&_.react-datepicker__month-container]:!flex
+  [&_.react-datepicker__month-container]:!flex-col
+  [&_.react-datepicker__month]:!m-0
+  [&_.react-datepicker__month]:!p-4
+  [&_.react-datepicker__week]:!grid
+  [&_.react-datepicker__week]:!grid-cols-7
+  [&_.react-datepicker__week]:!gap-1
+  [&_.react-datepicker__day-names]:!grid
+  [&_.react-datepicker__day-names]:!grid-cols-7
+  [&_.react-datepicker__day-names]:!gap-1
+  [&_.react-datepicker__day-names]:!px-4
+  [&_.react-datepicker__day-names]:!pt-4
+  [&_.react-datepicker__day-names]:!pb-2
+  [&_.react-datepicker__day-name]:!text-text-secondary
+  [&_.react-datepicker__day-name]:!text-sm
+  [&_.react-datepicker__day-name]:!font-medium
+  [&_.react-datepicker__day-name]:!text-center
+  [&_.react-datepicker__day-name]:!w-auto
+  [&_.react-datepicker__day-name]:!m-0
+  [&_.react-datepicker__day]:!w-10
+  [&_.react-datepicker__day]:!h-10
+  [&_.react-datepicker__day]:!leading-10
+  [&_.react-datepicker__day]:!text-center
+  [&_.react-datepicker__day]:!rounded-md
+  [&_.react-datepicker__day]:!text-text-primary
+  [&_.react-datepicker__day]:!text-sm
+  [&_.react-datepicker__day]:!m-0
+  [&_.react-datepicker__day]:!cursor-pointer
+  [&_.react-datepicker__day]:!transition-colors
+  [&_.react-datepicker__day--selected]:datePicker_daySelected
+  [&_.react-datepicker__day]:hover:!bg-surface
+  [&_.react-datepicker__day--disabled]:!cursor-not-allowed
+  [&_.react-datepicker__day--disabled]:!opacity-40
+  [&_.react-datepicker__day--disabled]:hover:!bg-transparent
+  [&_.react-datepicker__day--outside-month]:!text-text-secondary
+  [&_.react-datepicker__day--today]:datePicker_dayToday
+  [&_.react-datepicker__day--today]:!font-semibold
+  [&_.react-datepicker__current-month]:!hidden
+  [&_.react-datepicker__navigation]:!hidden
+  [&_.react-datepicker__time-container]:!border-border
+  [&_.react-datepicker__time-list-item]:hover:!bg-surface
+  [&_.react-datepicker__time-list]:!bg-background
+`;
+var datePickerSlotColorStyles = `
+  [&_.react-datepicker__day--selected]:![background-color:var(--_c-bg)]
+  [&_.react-datepicker__day--selected]:![color:var(--_c-fg)]
+  [&_.react-datepicker__day--keyboard-selected]:![background-color:color-mix(in_oklch,var(--_c-bg)_50%,transparent)]
+  [&_.react-datepicker__day--today]:!border
+  [&_.react-datepicker__day--today]:![border-color:var(--_c-border)]
+  [&_.react-datepicker__time-list-item--selected]:![background-color:var(--_c-bg)]
+  [&_.react-datepicker__time-list-item--selected]:![color:var(--_c-fg)]
+  [&_.react-datepicker__day--in-selecting-range]:![background-color:color-mix(in_oklch,var(--_c-bg)_30%,transparent)]
+  [&_.react-datepicker__day--in-range]:![background-color:color-mix(in_oklch,var(--_c-bg)_10%,transparent)]
+  [&_.react-datepicker__day--range-start]:![background-color:var(--_c-bg)]
+  [&_.react-datepicker__day--range-start]:![color:var(--_c-fg)]
+  [&_.react-datepicker__day--range-end]:![background-color:var(--_c-bg)]
+  [&_.react-datepicker__day--range-end]:![color:var(--_c-fg)]
+`;
+var getDatePickerStyles = (_color, classNames) => {
+  return cn(
+    datePickerBaseStyles,
+    datePickerSlotColorStyles,
+    classNames?.day && `[&_.react-datepicker__day]:${classNames.day}`,
+    classNames?.daySelected && `[&_.react-datepicker__day--selected]:${classNames.daySelected}`,
+    classNames?.dayToday && `[&_.react-datepicker__day--today]:${classNames.dayToday}`
+  );
+};
+var CalendarHeader = ({
+  date,
+  decreaseMonth,
+  increaseMonth,
+  decreaseYear,
+  increaseYear,
+  prevMonthButtonDisabled,
+  nextMonthButtonDisabled,
+  prevYearButtonDisabled,
+  nextYearButtonDisabled,
+  showMonthSelector = false,
+  onMonthClick,
+  onYearClick,
+  headerClassName,
+  navigationClassName
+}) => {
+  const monthName = date.toLocaleDateString("en-US", { month: "long" });
+  const year = date.getFullYear();
+  return /* @__PURE__ */ jsxs("div", { className: cn("datePicker_header", "flex items-center justify-between px-4 py-3 bg-surface border-b border-border", headerClassName), "data-slot": "header", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("datePicker_navigation", "flex items-center gap-1", navigationClassName), "data-slot": "navigation", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: decreaseYear,
+          disabled: prevYearButtonDisabled || showMonthSelector,
+          className: "p-1 rounded hover:bg-surface text-text-primary disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+          "aria-label": "Previous year",
+          children: /* @__PURE__ */ jsx(ChevronsLeft, { className: iconSizes.sm })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: decreaseMonth,
+          disabled: prevMonthButtonDisabled || showMonthSelector,
+          className: "p-1 rounded hover:bg-surface text-text-primary disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+          "aria-label": "Previous month",
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: iconSizes.sm })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onMonthClick,
+          className: "text-sm font-medium text-text-primary hover:text-primary transition-colors",
+          children: monthName
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onYearClick,
+          className: "text-sm font-medium text-text-primary hover:text-primary transition-colors",
+          children: year
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cn("datePicker_navigation", "flex items-center gap-1", navigationClassName), "data-slot": "navigation", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: increaseMonth,
+          disabled: nextMonthButtonDisabled || showMonthSelector,
+          className: "p-1 rounded hover:bg-surface text-text-primary disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+          "aria-label": "Next month",
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: iconSizes.sm })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: increaseYear,
+          disabled: nextYearButtonDisabled || showMonthSelector,
+          className: "p-1 rounded hover:bg-surface text-text-primary disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+          "aria-label": "Next year",
+          children: /* @__PURE__ */ jsx(ChevronsRight, { className: iconSizes.sm })
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/date-picker/shared.ts
+var pickerSelectedClasses = "bg-slot text-slot-fg";
+var YearSelector = ({
+  date,
+  onYearSelect,
+  onDecadeChange,
+  color = "primary"
+}) => {
+  const currentYear = date.getFullYear();
+  const startYear = Math.floor(currentYear / 10) * 10;
+  const years = Array.from({ length: 12 }, (_, i) => startYear - 1 + i);
+  return /* @__PURE__ */ jsxs("div", { className: cn("p-4 bg-background", colorVars[color]), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onDecadeChange(currentYear - 10),
+          className: "p-1 rounded hover:bg-surface text-text-primary transition-colors",
+          "aria-label": "Previous decade",
+          children: /* @__PURE__ */ jsx(ChevronsLeft, { className: iconSizes.sm })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium text-text-primary", children: [
+        startYear,
+        "-",
+        startYear + 9
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onDecadeChange(currentYear + 10),
+          className: "p-1 rounded hover:bg-surface text-text-primary transition-colors",
+          "aria-label": "Next decade",
+          children: /* @__PURE__ */ jsx(ChevronsRight, { className: iconSizes.sm })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: years.map((year) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onYearSelect(year),
+        className: cn(
+          "px-4 py-2 rounded text-sm font-medium transition-colors",
+          year === currentYear ? pickerSelectedClasses : year < startYear || year > startYear + 9 ? "text-text-secondary opacity-50" : "text-text-primary hover:bg-surface"
+        ),
+        children: year
+      },
+      year
+    )) })
+  ] });
+};
+var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var MonthSelector = ({
+  date,
+  onMonthSelect,
+  onYearClick,
+  onYearChange,
+  color = "primary"
+}) => {
+  const currentMonth = date.getMonth();
+  const currentYear = date.getFullYear();
+  return /* @__PURE__ */ jsxs("div", { className: cn("p-4 bg-background", colorVars[color]), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onYearChange(currentYear - 1),
+          className: "p-1 rounded hover:bg-surface text-text-primary transition-colors",
+          "aria-label": "Previous year",
+          children: /* @__PURE__ */ jsx(ChevronsLeft, { className: iconSizes.sm })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onYearClick,
+          className: "text-sm font-medium text-text-primary hover:text-slot transition-colors",
+          children: currentYear
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onYearChange(currentYear + 1),
+          className: "p-1 rounded hover:bg-surface text-text-primary transition-colors",
+          "aria-label": "Next year",
+          children: /* @__PURE__ */ jsx(ChevronsRight, { className: iconSizes.sm })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: MONTHS.map((month, index) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onMonthSelect(index),
+        className: cn(
+          "px-4 py-2 rounded text-sm font-medium transition-colors",
+          index === currentMonth ? pickerSelectedClasses : "text-text-primary hover:bg-surface"
+        ),
+        children: month
+      },
+      month
+    )) })
+  ] });
+};
+var PickerWrapper = ({
+  label,
+  error,
+  warning,
+  info,
+  success,
+  helperText,
+  messagePosition = "bottom",
+  required = false,
+  fullWidth = true,
+  children,
+  classNames
+}) => {
+  const uniqueId = React3.useId();
+  const helperId = `picker-helper-${uniqueId}`;
+  const { status, message: helperMessage } = getValidationStatus({ error, warning, info, success, helperText });
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full flex flex-col relative", !fullWidth && "inline-block"), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center relative mb-0.5", children: [
+      label && /* @__PURE__ */ jsxs("label", { className: cn("datePicker_label", "text-sm font-medium text-text-secondary", classNames?.label), "data-slot": "label", children: [
+        label,
+        required && /* @__PURE__ */ jsx("span", { className: "text-error ml-1", children: "*" })
+      ] }),
+      helperMessage && messagePosition === "top" && /* @__PURE__ */ jsx("p", { id: helperId, className: cn("datePicker_helper", statusMessageVariants({ status }), classNames?.helper), "data-slot": "helper", children: helperMessage })
+    ] }),
+    children,
+    helperMessage && messagePosition === "bottom" && /* @__PURE__ */ jsx("p", { id: helperId, className: cn("datePicker_helper", "mt-0.5", statusMessageVariants({ status }), classNames?.helper), "data-slot": "helper", children: helperMessage })
+  ] });
+};
+var RangePickerComponent = React3.memo(
+  ({
+    variant = "outline",
+    size = "md",
+    color = "primary",
+    label,
+    error,
+    warning,
+    info,
+    success,
+    helperText,
+    messagePosition = "bottom",
+    placeholder = "Select date range...",
+    disabled = false,
+    required = false,
+    clearable = false,
+    fullWidth = true,
+    className,
+    classNames,
+    ref,
+    startDate,
+    endDate,
+    defaultStartDate,
+    defaultEndDate,
+    onChange,
+    minDate,
+    maxDate,
+    dateFormat = "MM/dd/yyyy"
+  }) => {
+    const [internalStartDate, setInternalStartDate] = React3.useState(defaultStartDate || null);
+    const [internalEndDate, setInternalEndDate] = React3.useState(defaultEndDate || null);
+    const currentStartDate = startDate !== void 0 ? startDate : internalStartDate;
+    const currentEndDate = endDate !== void 0 ? endDate : internalEndDate;
+    const [isOpen, setIsOpen] = React3.useState(false);
+    const [showMonthSelector, setShowMonthSelector] = React3.useState(false);
+    const [showYearSelector, setShowYearSelector] = React3.useState(false);
+    const [viewDate, setViewDate] = React3.useState(currentStartDate || /* @__PURE__ */ new Date());
+    const [hoverDate, setHoverDate] = React3.useState(null);
+    const { status } = getValidationStatus({ error, warning, info, success, helperText });
+    React3.useEffect(() => {
+      if (startDate) setViewDate(startDate);
+    }, [startDate]);
+    const handleChange = (dates) => {
+      if (startDate === void 0 && endDate === void 0) {
+        setInternalStartDate(dates[0]);
+        setInternalEndDate(dates[1]);
+      }
+      onChange?.(dates);
+      setHoverDate(null);
+      if (dates[0] && dates[1]) {
+        setIsOpen(false);
+        setShowMonthSelector(false);
+        setShowYearSelector(false);
+      }
+    };
+    const handleClear = (e) => {
+      e.stopPropagation();
+      if (startDate === void 0 && endDate === void 0) {
+        setInternalStartDate(null);
+        setInternalEndDate(null);
+      }
+      onChange?.([null, null]);
+    };
+    const handleMonthSelect = (month) => {
+      const newDate = new Date(viewDate);
+      newDate.setMonth(month);
+      setViewDate(newDate);
+      setShowMonthSelector(false);
+    };
+    const handleYearSelect = (year) => {
+      const newDate = new Date(viewDate);
+      newDate.setFullYear(year);
+      setViewDate(newDate);
+      setShowYearSelector(false);
+      setShowMonthSelector(true);
+    };
+    const handleYearChange = (year) => {
+      const newDate = new Date(viewDate);
+      newDate.setFullYear(year);
+      setViewDate(newDate);
+    };
+    const handleDecadeChange = (year) => {
+      const newDate = new Date(viewDate);
+      newDate.setFullYear(year);
+      setViewDate(newDate);
+    };
+    const showClear = clearable && (currentStartDate || currentEndDate) && !disabled;
+    const formatDate = React3.useCallback(
+      (date) => {
+        const d = new Date(date);
+        const year = d.getFullYear();
+        const month = String(d.getMonth() + 1).padStart(2, "0");
+        const day = String(d.getDate()).padStart(2, "0");
+        return dateFormat.replace("yyyy", String(year)).replace("MM", month).replace("dd", day);
+      },
+      [dateFormat]
+    );
+    const getDisplayValue = () => {
+      if (hoverDate && currentStartDate && !currentEndDate) {
+        return { confirmed: `${formatDate(currentStartDate)} - `, preview: formatDate(hoverDate) };
+      }
+      if (hoverDate && !currentStartDate && !currentEndDate) {
+        return { confirmed: "", preview: formatDate(hoverDate) };
+      }
+      if (!currentStartDate && !currentEndDate) return { confirmed: "", preview: "" };
+      const start = currentStartDate ? formatDate(currentStartDate) : "";
+      const end = currentEndDate ? formatDate(currentEndDate) : "";
+      if (start && end) return { confirmed: `${start} - ${end}`, preview: "" };
+      if (start) return { confirmed: `${start}`, preview: " - ..." };
+      return { confirmed: "", preview: "" };
+    };
+    const { confirmed, preview } = getDisplayValue();
+    const customHeader = (props) => /* @__PURE__ */ jsx(
+      CalendarHeader,
+      {
+        ...props,
+        showMonthSelector,
+        onMonthClick: () => setShowMonthSelector(!showMonthSelector),
+        onYearClick: () => setShowYearSelector(true),
+        headerClassName: classNames?.header,
+        navigationClassName: classNames?.navigation
+      }
+    );
+    return /* @__PURE__ */ jsx(PickerWrapper, { label, error, warning, info, success, helperText, messagePosition, required, fullWidth, classNames, children: /* @__PURE__ */ jsxs("div", { ref, className: cn("datePicker_root", "relative w-full", classNames?.root), "data-slot": "root", children: [
+      /* @__PURE__ */ jsx("div", { className: cn("absolute left-3 flex items-center h-full top-0 text-text-secondary pointer-events-none z-10", classNames?.icon), "data-slot": "icon", children: /* @__PURE__ */ jsx(Calendar, { className: iconSizes[size] }) }),
+      /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: (open) => {
+        setIsOpen(open);
+        if (!open) {
+          setShowMonthSelector(false);
+          setShowYearSelector(false);
+          setHoverDate(null);
+        }
+      }, children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            onClick: () => setIsOpen(!isOpen),
+            "aria-expanded": isOpen,
+            "aria-haspopup": "dialog",
+            className: cn("datePicker_trigger", pickerInputVariants({ variant, status, size, fullWidth }), colorVars[color], "focus-visible:ring-slot", "pl-10 flex items-center justify-start cursor-pointer", showClear && "pr-10", className, classNames?.trigger),
+            "data-slot": "trigger",
+            children: confirmed || preview ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              confirmed && /* @__PURE__ */ jsx("span", { children: confirmed }),
+              preview && /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: preview })
+            ] }) : /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: placeholder })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverContent, { className: "p-0 w-auto", align: "start", sideOffset: 4, onOpenAutoFocus: (e) => e.preventDefault(), children: showYearSelector ? /* @__PURE__ */ jsx(YearSelector, { date: viewDate, onYearSelect: handleYearSelect, onDecadeChange: handleDecadeChange, color }) : showMonthSelector ? /* @__PURE__ */ jsx(MonthSelector, { date: viewDate, onMonthSelect: handleMonthSelect, onYearClick: () => setShowYearSelector(true), onYearChange: handleYearChange, color }) : /* @__PURE__ */ jsx("div", { className: cn("datePicker_calendar", colorVars[color], getDatePickerStyles(color, classNames), classNames?.calendar), "data-slot": "calendar", children: /* @__PURE__ */ jsx(
+          ReactDatePicker,
+          {
+            selectsRange: true,
+            startDate: currentStartDate,
+            endDate: currentEndDate,
+            onChange: handleChange,
+            disabled,
+            minDate,
+            maxDate,
+            dateFormat,
+            renderCustomHeader: customHeader,
+            openToDate: viewDate,
+            onMonthChange: setViewDate,
+            monthsShown: 2,
+            onDayMouseEnter: setHoverDate,
+            inline: true
+          }
+        ) }) })
+      ] }),
+      showClear && /* @__PURE__ */ jsx("button", { type: "button", onClick: handleClear, className: cn("absolute right-3 flex items-center h-full top-0 text-text-secondary hover:text-text-primary z-10", classNames?.clear), "aria-label": "Clear date range", "data-slot": "clear", children: /* @__PURE__ */ jsx(X, { className: iconSizes[size] }) })
+    ] }) });
+  }
+);
+RangePickerComponent.displayName = "RangePicker";
+var TimeColumn = React3.memo(({ items, selected, onSelect, onHover, onLeave }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: "flex flex-col h-[240px] overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-background",
+    onMouseLeave: onLeave,
+    children: items.map((item) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onSelect(item),
+        onMouseEnter: () => onHover?.(item),
+        className: cn(
+          "px-4 py-2 text-sm font-medium transition-colors text-center min-h-[40px] flex items-center justify-center",
+          item === selected ? "bg-surface text-text-primary font-semibold" : "text-text-secondary hover:bg-surface/50"
+        ),
+        children: typeof item === "number" ? String(item).padStart(2, "0") : item
+      },
+      item
+    ))
+  }
+));
+TimeColumn.displayName = "TimeColumn";
+var TimeColumnPicker = ({
+  value,
+  onChange,
+  onPreview,
+  timeFormat = "h:mm aa",
+  color = "primary"
+}) => {
+  const is12Hour = timeFormat.includes("aa");
+  const currentDate = value || /* @__PURE__ */ new Date();
+  const currentHour = currentDate.getHours();
+  const currentMinute = currentDate.getMinutes();
+  const [selectedHour, setSelectedHour] = React3.useState(
+    is12Hour ? currentHour % 12 || 12 : currentHour
+  );
+  const [selectedMinute, setSelectedMinute] = React3.useState(currentMinute);
+  const [selectedPeriod, setSelectedPeriod] = React3.useState(
+    currentHour >= 12 ? "PM" : "AM"
+  );
+  const [hoverHour, setHoverHour] = React3.useState(null);
+  const [hoverMinute, setHoverMinute] = React3.useState(null);
+  const [hoverPeriod, setHoverPeriod] = React3.useState(null);
+  const hours = is12Hour ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i);
+  const minutes = Array.from({ length: 60 }, (_, i) => i);
+  const periods = ["AM", "PM"];
+  React3.useEffect(() => {
+    if (hoverHour !== null || hoverMinute !== null || hoverPeriod !== null) {
+      const previewHour = hoverHour ?? selectedHour;
+      const previewMinute = hoverMinute ?? selectedMinute;
+      const previewPeriod = hoverPeriod ?? selectedPeriod;
+      const formattedHour = String(previewHour).padStart(2, "0");
+      const formattedMinute = String(previewMinute).padStart(2, "0");
+      const previewString = is12Hour ? `${previewHour}:${formattedMinute} ${previewPeriod}` : `${formattedHour}:${formattedMinute}`;
+      onPreview?.(previewString);
+    } else {
+      onPreview?.("");
+    }
+  }, [hoverHour, hoverMinute, hoverPeriod, selectedHour, selectedMinute, selectedPeriod, is12Hour, onPreview]);
+  const handleOkClick = () => {
+    const newDate = new Date(currentDate);
+    let finalHour = selectedHour;
+    if (is12Hour) {
+      if (selectedPeriod === "PM" && selectedHour !== 12) finalHour = selectedHour + 12;
+      else if (selectedPeriod === "AM" && selectedHour === 12) finalHour = 0;
+    }
+    newDate.setHours(finalHour);
+    newDate.setMinutes(selectedMinute);
+    newDate.setSeconds(0);
+    onPreview?.("");
+    onChange(newDate);
+  };
+  const handleNowClick = () => {
+    const now = /* @__PURE__ */ new Date();
+    const nowHour = now.getHours();
+    setSelectedHour(is12Hour ? nowHour % 12 || 12 : nowHour);
+    setSelectedMinute(now.getMinutes());
+    setSelectedPeriod(nowHour >= 12 ? "PM" : "AM");
+    onPreview?.("");
+    onChange(now);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col bg-background", colorVars[color]), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-0", children: [
+      /* @__PURE__ */ jsx(TimeColumn, { items: hours, selected: selectedHour, onSelect: (item) => setSelectedHour(item), onHover: (item) => setHoverHour(item), onLeave: () => setHoverHour(null) }),
+      /* @__PURE__ */ jsx(TimeColumn, { items: minutes, selected: selectedMinute, onSelect: (item) => setSelectedMinute(item), onHover: (item) => setHoverMinute(item), onLeave: () => setHoverMinute(null) }),
+      is12Hour && /* @__PURE__ */ jsx(TimeColumn, { items: periods, selected: selectedPeriod, onSelect: (item) => setSelectedPeriod(item), onHover: (item) => setHoverPeriod(item), onLeave: () => setHoverPeriod(null) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-3 border-t border-border flex gap-2", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: handleNowClick, className: "flex-1 px-4 py-2 bg-surface text-text-primary rounded-md hover:bg-surface/80 transition-colors font-medium text-sm border border-border", children: "Now" }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: handleOkClick, className: cn("flex-1 px-4 py-2 rounded-md hover:opacity-90 transition-colors font-medium text-sm", pickerSelectedClasses), children: "OK" })
+    ] })
+  ] });
+};
+var TimePickerComponent = React3.memo(
+  ({
+    variant = "outline",
+    size = "md",
+    color = "primary",
+    label,
+    error,
+    warning,
+    info,
+    success,
+    helperText,
+    messagePosition = "bottom",
+    placeholder = "Select time...",
+    disabled = false,
+    required = false,
+    clearable = false,
+    fullWidth = true,
+    className,
+    classNames,
+    ref,
+    value,
+    defaultValue,
+    onChange,
+    timeFormat = "h:mm aa"
+  }) => {
+    const [internalValue, setInternalValue] = React3.useState(defaultValue || null);
+    const currentValue = value !== void 0 ? value : internalValue;
+    const [isOpen, setIsOpen] = React3.useState(false);
+    const [previewTime, setPreviewTime] = React3.useState("");
+    const { status } = getValidationStatus({ error, warning, info, success, helperText });
+    const handleTimeChange = (date) => {
+      if (value === void 0) setInternalValue(date);
+      onChange?.(date);
+      setPreviewTime("");
+      setIsOpen(false);
+    };
+    const handleClear = (e) => {
+      e.stopPropagation();
+      if (value === void 0) setInternalValue(null);
+      onChange?.(null);
+    };
+    const showClear = clearable && currentValue && !disabled;
+    const formatTime = (date) => new Date(date).toLocaleTimeString("en-US", {
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: timeFormat.includes("aa")
+    });
+    const getDisplayValue = () => {
+      if (previewTime) return { confirmed: "", preview: previewTime };
+      if (currentValue) return { confirmed: formatTime(currentValue), preview: "" };
+      return { confirmed: "", preview: "" };
+    };
+    const { confirmed, preview } = getDisplayValue();
+    return /* @__PURE__ */ jsx(PickerWrapper, { label, error, warning, info, success, helperText, messagePosition, required, fullWidth, classNames, children: /* @__PURE__ */ jsxs("div", { ref, className: cn("datePicker_root", "relative w-full", classNames?.root), "data-slot": "root", children: [
+      /* @__PURE__ */ jsx("div", { className: cn("absolute left-3 flex items-center h-full top-0 text-text-secondary pointer-events-none z-10", classNames?.icon), "data-slot": "icon", children: /* @__PURE__ */ jsx(Clock, { className: iconSizes[size] }) }),
+      /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: (open) => {
+        setIsOpen(open);
+        if (!open) setPreviewTime("");
+      }, children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            onClick: () => setIsOpen(!isOpen),
+            "aria-expanded": isOpen,
+            "aria-haspopup": "dialog",
+            className: cn("datePicker_trigger", pickerInputVariants({ variant, status, size, fullWidth }), colorVars[color], "focus-visible:ring-slot", "pl-10 flex items-center justify-start cursor-pointer", showClear && "pr-10", className, classNames?.trigger),
+            "data-slot": "trigger",
+            children: confirmed || preview ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              confirmed && /* @__PURE__ */ jsx("span", { children: confirmed }),
+              preview && /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: preview })
+            ] }) : /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: placeholder })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverContent, { className: "p-0 w-auto", align: "start", sideOffset: 4, onOpenAutoFocus: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx(TimeColumnPicker, { value: currentValue, onChange: handleTimeChange, onPreview: setPreviewTime, timeFormat, color }) })
+      ] }),
+      showClear && /* @__PURE__ */ jsx("button", { type: "button", onClick: handleClear, className: cn("absolute right-3 flex items-center h-full top-0 text-text-secondary hover:text-text-primary z-10", classNames?.clear), "aria-label": "Clear time", "data-slot": "clear", children: /* @__PURE__ */ jsx(X, { className: iconSizes[size] }) })
+    ] }) });
+  }
+);
+TimePickerComponent.displayName = "TimePicker";
+var DatePickerComponent = React3.memo(
+  ({
+    variant = "outline",
+    size = "md",
+    color = "primary",
+    label,
+    error,
+    warning,
+    info,
+    success,
+    helperText,
+    messagePosition = "bottom",
+    placeholder = "Select date...",
+    disabled = false,
+    required = false,
+    clearable = false,
+    fullWidth = true,
+    className,
+    classNames,
+    ref,
+    value,
+    defaultValue,
+    onChange,
+    minDate,
+    maxDate,
+    dateFormat = "MM/dd/yyyy"
+  }) => {
+    const [internalValue, setInternalValue] = React3.useState(defaultValue || null);
+    const currentValue = value !== void 0 ? value : internalValue;
+    const [isOpen, setIsOpen] = React3.useState(false);
+    const [showMonthSelector, setShowMonthSelector] = React3.useState(false);
+    const [showYearSelector, setShowYearSelector] = React3.useState(false);
+    const [viewDate, setViewDate] = React3.useState(currentValue || /* @__PURE__ */ new Date());
+    const [hoverDate, setHoverDate] = React3.useState(null);
+    const { status } = getValidationStatus({ error, warning, info, success, helperText });
+    React3.useEffect(() => {
+      if (value) setViewDate(value);
+    }, [value]);
+    const handleDateChange = (date) => {
+      if (value === void 0) setInternalValue(date);
+      onChange?.(date);
+      setHoverDate(null);
+      setIsOpen(false);
+      setShowMonthSelector(false);
+      setShowYearSelector(false);
+    };
+    const handleClear = (e) => {
+      e.stopPropagation();
+      if (value === void 0) setInternalValue(null);
+      onChange?.(null);
+    };
+    const handleMonthSelect = (month) => {
+      const newDate = new Date(viewDate);
+      newDate.setMonth(month);
+      setViewDate(newDate);
+      setShowMonthSelector(false);
+    };
+    const handleYearSelect = (year) => {
+      const newDate = new Date(viewDate);
+      newDate.setFullYear(year);
+      setViewDate(newDate);
+      setShowYearSelector(false);
+      setShowMonthSelector(true);
+    };
+    const handleYearChange = (year) => {
+      const newDate = new Date(viewDate);
+      newDate.setFullYear(year);
+      setViewDate(newDate);
+    };
+    const handleDecadeChange = (year) => {
+      const newDate = new Date(viewDate);
+      newDate.setFullYear(year);
+      setViewDate(newDate);
+    };
+    const showClear = clearable && currentValue && !disabled;
+    const formatDate = React3.useCallback(
+      (date) => {
+        const d = new Date(date);
+        const year = d.getFullYear();
+        const month = String(d.getMonth() + 1).padStart(2, "0");
+        const day = String(d.getDate()).padStart(2, "0");
+        return dateFormat.replace("yyyy", String(year)).replace("MM", month).replace("dd", day);
+      },
+      [dateFormat]
+    );
+    const getDisplayValue = () => {
+      if (hoverDate) return { confirmed: "", preview: formatDate(hoverDate) };
+      if (currentValue) return { confirmed: formatDate(currentValue), preview: "" };
+      return { confirmed: "", preview: "" };
+    };
+    const { confirmed, preview } = getDisplayValue();
+    const customHeader = (props) => /* @__PURE__ */ jsx(
+      CalendarHeader,
+      {
+        ...props,
+        showMonthSelector,
+        onMonthClick: () => setShowMonthSelector(!showMonthSelector),
+        onYearClick: () => setShowYearSelector(true),
+        headerClassName: classNames?.header,
+        navigationClassName: classNames?.navigation
+      }
+    );
+    return /* @__PURE__ */ jsx(PickerWrapper, { label, error, warning, info, success, helperText, messagePosition, required, fullWidth, classNames, children: /* @__PURE__ */ jsxs("div", { ref, className: cn("datePicker_root", "relative w-full", classNames?.root), "data-slot": "root", children: [
+      /* @__PURE__ */ jsx("div", { className: cn("absolute left-3 flex items-center h-full top-0 text-text-secondary pointer-events-none z-10", classNames?.icon), "data-slot": "icon", children: /* @__PURE__ */ jsx(Calendar, { className: iconSizes[size] }) }),
+      /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: (open) => {
+        setIsOpen(open);
+        if (!open) {
+          setShowMonthSelector(false);
+          setShowYearSelector(false);
+          setHoverDate(null);
+        }
+      }, children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            onClick: () => setIsOpen(!isOpen),
+            "aria-expanded": isOpen,
+            "aria-haspopup": "dialog",
+            className: cn("datePicker_trigger", pickerInputVariants({ variant, status, size, fullWidth }), colorVars[color], "focus-visible:ring-slot", "pl-10 flex items-center justify-start cursor-pointer", showClear && "pr-10", className, classNames?.trigger),
+            "data-slot": "trigger",
+            children: confirmed || preview ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              confirmed && /* @__PURE__ */ jsx("span", { children: confirmed }),
+              preview && /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: preview })
+            ] }) : /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: placeholder })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverContent, { className: "p-0 w-auto", align: "start", sideOffset: 4, onOpenAutoFocus: (e) => e.preventDefault(), children: showYearSelector ? /* @__PURE__ */ jsx(YearSelector, { date: viewDate, onYearSelect: handleYearSelect, onDecadeChange: handleDecadeChange, color }) : showMonthSelector ? /* @__PURE__ */ jsx(MonthSelector, { date: viewDate, onMonthSelect: handleMonthSelect, onYearClick: () => setShowYearSelector(true), onYearChange: handleYearChange, color }) : /* @__PURE__ */ jsx("div", { className: cn("datePicker_calendar", colorVars[color], getDatePickerStyles(color, classNames), classNames?.calendar), "data-slot": "calendar", children: /* @__PURE__ */ jsx(
+          ReactDatePicker,
+          {
+            selected: currentValue,
+            onChange: handleDateChange,
+            disabled,
+            minDate,
+            maxDate,
+            dateFormat,
+            renderCustomHeader: customHeader,
+            openToDate: viewDate,
+            onMonthChange: setViewDate,
+            onDayMouseEnter: setHoverDate,
+            inline: true
+          }
+        ) }) })
+      ] }),
+      showClear && /* @__PURE__ */ jsx("button", { type: "button", onClick: handleClear, className: cn("absolute right-3 flex items-center h-full top-0 text-text-secondary hover:text-text-primary z-10", classNames?.clear), "aria-label": "Clear date", "data-slot": "clear", children: /* @__PURE__ */ jsx(X, { className: iconSizes[size] }) })
+    ] }) });
+  }
+);
+DatePickerComponent.displayName = "DatePicker";
+var DatePicker = Object.assign(DatePickerComponent, {
+  RangePicker: RangePickerComponent,
+  TimePicker: TimePickerComponent
+});
+
+export { DatePicker, RangePickerComponent, TimePickerComponent };
+//# sourceMappingURL=chunk-BKLJDEUX.js.map
+//# sourceMappingURL=chunk-BKLJDEUX.js.map