@mdigital_ui/ui 0.1.0

package/dist/chunk-7AEGBABZ.js

@@ -0,0 +1,1102 @@
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-3PFA3YG6.js';
+import { cn, iconSizes } from './chunk-YNNAOXU5.js';
+import React 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 focus:border-primary placeholder:text-text-muted disabled:opacity-50 disabled:cursor-not-allowed outline-none 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 hover:border-primary/50",
+        error: "border-error",
+        warning: "border-warning",
+        info: "border-info",
+        success: "border-success"
+      },
+      size: {
+        xs: "h-8 px-2.5 text-xs",
+        sm: "h-[var(--input-height-sm)] px-3 text-sm",
+        md: "h-[var(--input-height-md)] px-4 text-base",
+        lg: "h-[var(--input-height-lg)] px-5 text-lg"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: "max-w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "outline",
+      status: "default",
+      size: "md",
+      fullWidth: true
+    }
+  }
+);
+var datePickerStyles = `
+  [&_.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__day--selected]:!bg-primary
+  [&_.react-datepicker__day--keyboard-selected]:!bg-primary/50
+  [&_.react-datepicker__day]:hover:!bg-surface
+  [&_.react-datepicker__day-name]:!text-text-muted
+  [&_.react-datepicker__current-month]:!hidden
+  [&_.react-datepicker__navigation]:!hidden
+  [&_.react-datepicker__time-container]:!border-border
+  [&_.react-datepicker__time-list-item--selected]:!bg-primary
+  [&_.react-datepicker__time-list-item--selected]:!text-white
+  [&_.react-datepicker__time-list-item]:hover:!bg-surface
+  [&_.react-datepicker__time-list]:!bg-background
+  [&_.react-datepicker__day--in-selecting-range]:!bg-primary/30
+  [&_.react-datepicker__day--in-range]:!bg-primary/10
+`;
+var YearSelector = ({
+  date,
+  onYearSelect,
+  onDecadeChange
+}) => {
+  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: "p-4 bg-background", 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-muted 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-muted 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 ? "bg-primary text-white" : year < startYear || year > startYear + 9 ? "text-text-muted opacity-50" : "text-text-primary hover:bg-surface"
+        ),
+        children: year
+      },
+      year
+    )) })
+  ] });
+};
+var MonthSelector = ({
+  date,
+  onMonthSelect,
+  onYearClick,
+  onYearChange
+}) => {
+  const months = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec"
+  ];
+  const currentMonth = date.getMonth();
+  const currentYear = date.getFullYear();
+  return /* @__PURE__ */ jsxs("div", { className: "p-4 bg-background", 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-muted 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-primary transition-colors",
+          children: currentYear
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onYearChange(currentYear + 1),
+          className: "p-1 rounded hover:bg-muted 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 ? "bg-primary text-white" : "text-text-primary hover:bg-surface"
+        ),
+        children: month
+      },
+      month
+    )) })
+  ] });
+};
+var CustomCalendarHeader = ({
+  date,
+  decreaseMonth,
+  increaseMonth,
+  decreaseYear,
+  increaseYear,
+  prevMonthButtonDisabled,
+  nextMonthButtonDisabled,
+  prevYearButtonDisabled,
+  nextYearButtonDisabled,
+  showMonthSelector = false,
+  onMonthClick,
+  onYearClick
+}) => {
+  const monthName = date.toLocaleDateString("en-US", { month: "long" });
+  const year = date.getFullYear();
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 bg-surface border-b border-border", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: decreaseYear,
+          disabled: prevYearButtonDisabled || showMonthSelector,
+          className: "p-1 rounded hover:bg-muted text-text-primary disabled:opacity-30 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-muted text-text-primary disabled:opacity-30 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: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: increaseMonth,
+          disabled: nextMonthButtonDisabled || showMonthSelector,
+          className: "p-1 rounded hover:bg-muted text-text-primary disabled:opacity-30 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-muted text-text-primary disabled:opacity-30 disabled:cursor-not-allowed transition-colors",
+          "aria-label": "Next year",
+          children: /* @__PURE__ */ jsx(ChevronsRight, { className: iconSizes.sm })
+        }
+      )
+    ] })
+  ] });
+};
+var PickerWrapper = ({
+  label,
+  error,
+  warning,
+  info,
+  success,
+  helperText,
+  messagePosition = "bottom",
+  required = false,
+  fullWidth = true,
+  children
+}) => {
+  let status = "default";
+  const helperMessage = error || warning || info || success || helperText;
+  if (error) {
+    status = "error";
+  } else if (warning) {
+    status = "warning";
+  } else if (success) {
+    status = "success";
+  } else if (info) {
+    status = "info";
+  }
+  if (!label && !helperMessage) return /* @__PURE__ */ jsx(Fragment, { children });
+  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("p", { className: "text-sm font-medium text-text-muted", children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { className: "text-error ml-1", children: "*" })
+          ] }),
+          helperMessage && messagePosition === "top" && /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: `picker-helper-${status}`,
+              className: cn(
+                "text-xs",
+                status === "error" && "text-error",
+                status === "warning" && "text-warning",
+                status === "info" && "text-info",
+                status === "success" && "text-success",
+                status === "default" && "text-text-muted"
+              ),
+              children: helperMessage
+            }
+          )
+        ] }),
+        children,
+        helperMessage && messagePosition === "bottom" && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: `picker-helper-${status}`,
+            className: cn(
+              "text-xs mt-0.5",
+              status === "error" && "text-error",
+              status === "warning" && "text-warning",
+              status === "info" && "text-info",
+              status === "success" && "text-success",
+              status === "default" && "text-text-muted"
+            ),
+            children: helperMessage
+          }
+        )
+      ]
+    }
+  );
+};
+var DatePickerComponent = React.memo(
+  ({
+    variant = "outline",
+    size = "md",
+    label,
+    error,
+    warning,
+    info,
+    success,
+    helperText,
+    messagePosition = "bottom",
+    placeholder = "Select date...",
+    disabled = false,
+    required = false,
+    clearable = false,
+    fullWidth = true,
+    className,
+    value,
+    defaultValue,
+    onChange,
+    minDate,
+    maxDate,
+    dateFormat = "MM/dd/yyyy"
+  }) => {
+    const [internalValue, setInternalValue] = React.useState(
+      defaultValue || null
+    );
+    const currentValue = value !== void 0 ? value : internalValue;
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [showMonthSelector, setShowMonthSelector] = React.useState(false);
+    const [showYearSelector, setShowYearSelector] = React.useState(false);
+    const [viewDate, setViewDate] = React.useState(currentValue || /* @__PURE__ */ new Date());
+    const [hoverDate, setHoverDate] = React.useState(null);
+    const datePickerRef = React.useRef(null);
+    let status = "default";
+    if (error) status = "error";
+    else if (warning) status = "warning";
+    else if (success) status = "success";
+    else if (info) status = "info";
+    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 = (date) => {
+      return new Date(date).toLocaleDateString("en-US", {
+        month: "2-digit",
+        day: "2-digit",
+        year: "numeric"
+      });
+    };
+    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(
+      CustomCalendarHeader,
+      {
+        ...props,
+        showMonthSelector,
+        onMonthClick: () => setShowMonthSelector(!showMonthSelector),
+        onYearClick: () => setShowYearSelector(true)
+      }
+    );
+    const triggerButton = /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: () => setIsOpen(!isOpen),
+        className: cn(
+          pickerInputVariants({ variant, status, size, fullWidth }),
+          "pl-10 flex items-center justify-start cursor-pointer",
+          showClear && "pr-10",
+          className
+        ),
+        children: confirmed || preview ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          confirmed && /* @__PURE__ */ jsx("span", { children: confirmed }),
+          preview && /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: preview })
+        ] }) : /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: placeholder })
+      }
+    );
+    return /* @__PURE__ */ jsx(
+      PickerWrapper,
+      {
+        label,
+        error,
+        warning,
+        info,
+        success,
+        helperText,
+        messagePosition,
+        required,
+        fullWidth,
+        children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute left-3 flex items-center h-full top-0 text-text-muted pointer-events-none z-10", 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: triggerButton }),
+                /* @__PURE__ */ jsx(
+                  PopoverContent,
+                  {
+                    className: "p-0 w-auto",
+                    align: "start",
+                    sideOffset: 4,
+                    onOpenAutoFocus: (e) => e.preventDefault(),
+                    children: /* @__PURE__ */ jsx(Fragment, { children: showYearSelector ? /* @__PURE__ */ jsx(
+                      YearSelector,
+                      {
+                        date: viewDate,
+                        onYearSelect: handleYearSelect,
+                        onDecadeChange: handleDecadeChange
+                      }
+                    ) : showMonthSelector ? /* @__PURE__ */ jsx(
+                      MonthSelector,
+                      {
+                        date: viewDate,
+                        onMonthSelect: handleMonthSelect,
+                        onYearClick: () => setShowYearSelector(true),
+                        onYearChange: handleYearChange
+                      }
+                    ) : /* @__PURE__ */ jsx("div", { className: datePickerStyles, children: /* @__PURE__ */ jsx(
+                      ReactDatePicker,
+                      {
+                        ref: datePickerRef,
+                        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: "absolute right-3 flex items-center h-full top-0 text-text-muted hover:text-text-primary z-10",
+              "aria-label": "Clear date",
+              children: /* @__PURE__ */ jsx(X, { className: iconSizes[size] })
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+DatePickerComponent.displayName = "DatePicker";
+var RangePickerComponent = React.memo(
+  ({
+    variant = "outline",
+    size = "md",
+    label,
+    error,
+    warning,
+    info,
+    success,
+    helperText,
+    messagePosition = "bottom",
+    placeholder = "Select date range...",
+    disabled = false,
+    required = false,
+    clearable = false,
+    fullWidth = true,
+    className,
+    startDate,
+    endDate,
+    defaultStartDate,
+    defaultEndDate,
+    onChange,
+    minDate,
+    maxDate,
+    dateFormat = "MM/dd/yyyy"
+  }) => {
+    const [internalStartDate, setInternalStartDate] = React.useState(defaultStartDate || null);
+    const [internalEndDate, setInternalEndDate] = React.useState(
+      defaultEndDate || null
+    );
+    const currentStartDate = startDate !== void 0 ? startDate : internalStartDate;
+    const currentEndDate = endDate !== void 0 ? endDate : internalEndDate;
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [showMonthSelector, setShowMonthSelector] = React.useState(false);
+    const [showYearSelector, setShowYearSelector] = React.useState(false);
+    const [viewDate, setViewDate] = React.useState(
+      currentStartDate || /* @__PURE__ */ new Date()
+    );
+    const [hoverDate, setHoverDate] = React.useState(null);
+    const datePickerRef = React.useRef(null);
+    let status = "default";
+    if (error) status = "error";
+    else if (warning) status = "warning";
+    else if (success) status = "success";
+    else if (info) status = "info";
+    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 = (date) => {
+      return new Date(date).toLocaleDateString("en-US", {
+        month: "2-digit",
+        day: "2-digit",
+        year: "numeric"
+      });
+    };
+    const getDisplayValue = () => {
+      if (hoverDate && currentStartDate && !currentEndDate) {
+        const start2 = formatDate(currentStartDate);
+        const hover = formatDate(hoverDate);
+        return { confirmed: `${start2} - `, preview: hover };
+      }
+      if (hoverDate && !currentStartDate && !currentEndDate) {
+        const hover = formatDate(hoverDate);
+        return { confirmed: "", preview: hover };
+      }
+      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: rangeConfirmed, preview: rangePreview } = getDisplayValue();
+    const customHeader = (props) => /* @__PURE__ */ jsx(
+      CustomCalendarHeader,
+      {
+        ...props,
+        showMonthSelector,
+        onMonthClick: () => setShowMonthSelector(!showMonthSelector),
+        onYearClick: () => setShowYearSelector(true)
+      }
+    );
+    const rangeTriggerButton = /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: () => setIsOpen(!isOpen),
+        className: cn(
+          pickerInputVariants({ variant, status, size, fullWidth }),
+          "pl-10 flex items-center justify-start cursor-pointer",
+          showClear && "pr-10",
+          className
+        ),
+        children: rangeConfirmed || rangePreview ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          rangeConfirmed && /* @__PURE__ */ jsx("span", { children: rangeConfirmed }),
+          rangePreview && /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: rangePreview })
+        ] }) : /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: placeholder })
+      }
+    );
+    return /* @__PURE__ */ jsx(
+      PickerWrapper,
+      {
+        label,
+        error,
+        warning,
+        info,
+        success,
+        helperText,
+        messagePosition,
+        required,
+        fullWidth,
+        children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute left-3 flex items-center h-full top-0 text-text-muted pointer-events-none z-10", 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: rangeTriggerButton }),
+                /* @__PURE__ */ jsx(
+                  PopoverContent,
+                  {
+                    className: "p-0 w-auto",
+                    align: "start",
+                    sideOffset: 4,
+                    onOpenAutoFocus: (e) => e.preventDefault(),
+                    children: /* @__PURE__ */ jsx(Fragment, { children: showYearSelector ? /* @__PURE__ */ jsx(
+                      YearSelector,
+                      {
+                        date: viewDate,
+                        onYearSelect: handleYearSelect,
+                        onDecadeChange: handleDecadeChange
+                      }
+                    ) : showMonthSelector ? /* @__PURE__ */ jsx(
+                      MonthSelector,
+                      {
+                        date: viewDate,
+                        onMonthSelect: handleMonthSelect,
+                        onYearClick: () => setShowYearSelector(true),
+                        onYearChange: handleYearChange
+                      }
+                    ) : /* @__PURE__ */ jsx("div", { className: datePickerStyles, children: /* @__PURE__ */ jsx(
+                      ReactDatePicker,
+                      {
+                        ref: datePickerRef,
+                        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: "absolute right-3 flex items-center h-full top-0 text-text-muted hover:text-text-primary z-10",
+              "aria-label": "Clear date range",
+              children: /* @__PURE__ */ jsx(X, { className: iconSizes[size] })
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+RangePickerComponent.displayName = "RangePicker";
+var TimeColumn = React.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-muted 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"
+}) => {
+  const is12Hour = timeFormat.includes("aa");
+  const currentDate = value || /* @__PURE__ */ new Date();
+  const currentHour = currentDate.getHours();
+  const currentMinute = currentDate.getMinutes();
+  const [selectedHour, setSelectedHour] = React.useState(
+    is12Hour ? currentHour % 12 || 12 : currentHour
+  );
+  const [selectedMinute, setSelectedMinute] = React.useState(currentMinute);
+  const [selectedPeriod, setSelectedPeriod] = React.useState(
+    currentHour >= 12 ? "PM" : "AM"
+  );
+  const [hoverHour, setHoverHour] = React.useState(null);
+  const [hoverMinute, setHoverMinute] = React.useState(null);
+  const [hoverPeriod, setHoverPeriod] = React.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"];
+  React.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();
+    const nowMinute = now.getMinutes();
+    setSelectedHour(is12Hour ? nowHour % 12 || 12 : nowHour);
+    setSelectedMinute(nowMinute);
+    setSelectedPeriod(nowHour >= 12 ? "PM" : "AM");
+    onPreview?.("");
+    onChange(now);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col bg-background", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-0", children: [
+      /* @__PURE__ */ jsx(
+        TimeColumn,
+        {
+          items: hours,
+          selected: selectedHour,
+          onSelect: setSelectedHour,
+          onHover: setHoverHour,
+          onLeave: () => setHoverHour(null)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TimeColumn,
+        {
+          items: minutes,
+          selected: selectedMinute,
+          onSelect: setSelectedMinute,
+          onHover: setHoverMinute,
+          onLeave: () => setHoverMinute(null)
+        }
+      ),
+      is12Hour && /* @__PURE__ */ jsx(
+        TimeColumn,
+        {
+          items: periods,
+          selected: selectedPeriod,
+          onSelect: setSelectedPeriod,
+          onHover: setHoverPeriod,
+          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: "flex-1 px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors font-medium text-sm",
+          children: "OK"
+        }
+      )
+    ] })
+  ] });
+};
+var TimePickerComponent = React.memo(
+  ({
+    variant = "outline",
+    size = "md",
+    label,
+    error,
+    warning,
+    info,
+    success,
+    helperText,
+    messagePosition = "bottom",
+    placeholder = "Select time...",
+    disabled = false,
+    required = false,
+    clearable = false,
+    fullWidth = true,
+    className,
+    value,
+    defaultValue,
+    onChange,
+    timeFormat = "h:mm aa"
+  }) => {
+    const [internalValue, setInternalValue] = React.useState(
+      defaultValue || null
+    );
+    const currentValue = value !== void 0 ? value : internalValue;
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [previewTime, setPreviewTime] = React.useState("");
+    let status = "default";
+    if (error) status = "error";
+    else if (warning) status = "warning";
+    else if (success) status = "success";
+    else if (info) status = "info";
+    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) => {
+      return 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: timeConfirmed, preview: timePreview } = getDisplayValue();
+    const timeTriggerButton = /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: () => setIsOpen(!isOpen),
+        className: cn(
+          pickerInputVariants({ variant, status, size, fullWidth }),
+          "pl-10 flex items-center justify-start cursor-pointer",
+          showClear && "pr-10",
+          className
+        ),
+        children: timeConfirmed || timePreview ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          timeConfirmed && /* @__PURE__ */ jsx("span", { children: timeConfirmed }),
+          timePreview && /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: timePreview })
+        ] }) : /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: placeholder })
+      }
+    );
+    return /* @__PURE__ */ jsx(
+      PickerWrapper,
+      {
+        label,
+        error,
+        warning,
+        info,
+        success,
+        helperText,
+        messagePosition,
+        required,
+        fullWidth,
+        children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute left-3 flex items-center h-full top-0 text-text-muted pointer-events-none z-10", 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: timeTriggerButton }),
+                /* @__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
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          showClear && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleClear,
+              className: "absolute right-3 flex items-center h-full top-0 text-text-muted hover:text-text-primary z-10",
+              "aria-label": "Clear time",
+              children: /* @__PURE__ */ jsx(X, { className: iconSizes[size] })
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+TimePickerComponent.displayName = "TimePicker";
+var DatePicker = Object.assign(DatePickerComponent, {
+  RangePicker: RangePickerComponent,
+  TimePicker: TimePickerComponent
+});
+
+export { DatePicker, RangePickerComponent, TimePickerComponent };
+//# sourceMappingURL=chunk-7AEGBABZ.js.map
+//# sourceMappingURL=chunk-7AEGBABZ.js.map