@wow-two-beta/ui 0.0.10 → 0.0.12

package/dist/{chunk-6KCV4GOI.js → chunk-K6V4KLRO.js}

@@ -7,8 +7,8 @@ import { composeRefs } from './chunk-DN7WBRIV.js';
 import { cn } from './chunk-KZ4VFY2T.js';
 import * as React from 'react';
 import { forwardRef, useRef, useImperativeHandle, useState, Children, isValidElement, cloneElement, useId as useId$1, createContext, useMemo, useCallback, useEffect, useContext } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Minus, Plus, EyeOff, Eye, Search, X, Check, Upload, ChevronDown } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Minus, Plus, EyeOff, Eye, Search, X, Check, Upload, ChevronDown, ChevronLeft, ChevronRight, Calendar as Calendar$1, Clock } from 'lucide-react';
 import { FocusScope } from '@radix-ui/react-focus-scope';
 
 var Label = forwardRef(
@@ -91,7 +91,7 @@ var Legend = forwardRef(
 );
 Legend.displayName = "Legend";
 
-// src/forms/_styles.ts
+// src/forms/InputStyles.ts
 var inputBaseVariants = tv({
   base: "flex w-full rounded-md border bg-background text-foreground placeholder:text-subtle-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60 read-only:bg-muted",
   variants: {
@@ -2029,6 +2029,882 @@ Combobox.Group = ComboboxGroup;
 Combobox.Separator = ComboboxSeparator;
 Combobox.Empty = ComboboxEmpty;
 
-export { CharacterCount, Checkbox, CheckboxField, CheckboxGroup, ChoiceCard, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxSeparator, CurrencyInput, EmailInput, Fieldset, FilePicker, FormErrorMessage, FormField, FormHelperText, InputAddon, InputGroup, Label, LabeledInput, Legend, Listbox, ListboxEmpty, ListboxGroup, ListboxItem, ListboxSeparator, MaskedInput, MultiSelect, MultiSelectContent, MultiSelectItem, MultiSelectTags, MultiSelectTrigger, NumberInput, PasswordInput, PasswordStrength, PercentInput, PinInput, Radio, RadioField, RadioGroup, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Switch, SwitchField, TelInput, TextInput, Textarea, UrlInput };
-//# sourceMappingURL=chunk-6KCV4GOI.js.map
-//# sourceMappingURL=chunk-6KCV4GOI.js.map
+// src/forms/DateExtensions.ts
+var WEEKDAYS_SHORT = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var MONTHS_LONG = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function startOfDay(d) {
+  const c = new Date(d);
+  c.setHours(0, 0, 0, 0);
+  return c;
+}
+function isSameDay(a, b) {
+  if (!a || !b) return false;
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isToday(d) {
+  return isSameDay(d, /* @__PURE__ */ new Date());
+}
+function addMonths(d, n) {
+  const c = new Date(d);
+  c.setMonth(c.getMonth() + n);
+  return c;
+}
+function addDays(d, n) {
+  const c = new Date(d);
+  c.setDate(c.getDate() + n);
+  return c;
+}
+function startOfMonth(d) {
+  return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+function buildMonthGrid(year, month) {
+  const first = new Date(year, month, 1);
+  const firstWeekday = first.getDay();
+  const start = addDays(first, -firstWeekday);
+  const cells = [];
+  for (let i = 0; i < 42; i++) {
+    const date = addDays(start, i);
+    cells.push({ date, outOfMonth: date.getMonth() !== month });
+  }
+  return cells;
+}
+function formatISODate(d) {
+  if (!d) return "";
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+function parseISODate(s) {
+  if (!s) return null;
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
+  if (!m) return null;
+  const [, y, mo, d] = m;
+  if (!y || !mo || !d) return null;
+  const date = new Date(Number(y), Number(mo) - 1, Number(d));
+  if (isNaN(date.getTime())) return null;
+  return date;
+}
+function formatISOTime(d) {
+  if (!d) return "";
+  const h = String(d.getHours()).padStart(2, "0");
+  const m = String(d.getMinutes()).padStart(2, "0");
+  return `${h}:${m}`;
+}
+function parseISOTime(s) {
+  if (!s) return null;
+  const m = /^(\d{2}):(\d{2})$/.exec(s);
+  if (!m) return null;
+  const [, h, mi] = m;
+  if (!h || !mi) return null;
+  const hours = Number(h);
+  const minutes = Number(mi);
+  if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return null;
+  return { hours, minutes };
+}
+function isDateDisabled(d, options) {
+  const { min, max, isDisabled } = options;
+  if (min && startOfDay(d) < startOfDay(min)) return true;
+  if (max && startOfDay(d) > startOfDay(max)) return true;
+  if (isDisabled?.(d)) return true;
+  return false;
+}
+function isInRange(d, start, end) {
+  if (!start || !end) return false;
+  const t = startOfDay(d).getTime();
+  const s = startOfDay(start).getTime();
+  const e = startOfDay(end).getTime();
+  return t >= Math.min(s, e) && t <= Math.max(s, e);
+}
+var Calendar = forwardRef(function Calendar2({
+  value,
+  defaultValue,
+  onChange,
+  defaultMonth,
+  min,
+  max,
+  isDisabled,
+  "aria-label": ariaLabel = "Calendar",
+  className,
+  ...rest
+}, ref) {
+  const [selected, setSelected] = useControlled({
+    controlled: value,
+    default: defaultValue ?? null,
+    onChange
+  });
+  const [viewMonth, setViewMonth] = useState(
+    () => startOfMonth(defaultMonth ?? selected ?? /* @__PURE__ */ new Date())
+  );
+  const [focusedDate, setFocusedDate] = useState(
+    () => selected ?? /* @__PURE__ */ new Date()
+  );
+  const gridRef = useRef(null);
+  useEffect(() => {
+    const cell = gridRef.current?.querySelector(
+      `[data-date="${focusedDate.toDateString()}"]`
+    );
+    cell?.focus();
+  }, [focusedDate]);
+  const moveFocus = useCallback(
+    (next) => {
+      if (next.getMonth() !== viewMonth.getMonth() || next.getFullYear() !== viewMonth.getFullYear()) {
+        setViewMonth(startOfMonth(next));
+      }
+      setFocusedDate(next);
+    },
+    [viewMonth]
+  );
+  const onCellKeyDown = useCallback(
+    (e, date) => {
+      switch (e.key) {
+        case "ArrowRight":
+          e.preventDefault();
+          moveFocus(addDays(date, 1));
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          moveFocus(addDays(date, -1));
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          moveFocus(addDays(date, 7));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          moveFocus(addDays(date, -7));
+          break;
+        case "Home":
+          e.preventDefault();
+          moveFocus(addDays(date, -date.getDay()));
+          break;
+        case "End":
+          e.preventDefault();
+          moveFocus(addDays(date, 6 - date.getDay()));
+          break;
+        case "PageDown":
+          e.preventDefault();
+          moveFocus(addMonths(date, e.shiftKey ? 12 : 1));
+          break;
+        case "PageUp":
+          e.preventDefault();
+          moveFocus(addMonths(date, e.shiftKey ? -12 : -1));
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (!isDateDisabled(date, { min, max, isDisabled })) {
+            setSelected(date);
+          }
+          break;
+      }
+    },
+    [moveFocus, setSelected, min, max, isDisabled]
+  );
+  const cells = buildMonthGrid(viewMonth.getFullYear(), viewMonth.getMonth());
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "application",
+      "aria-label": ariaLabel,
+      className: cn(
+        "inline-flex flex-col gap-2 rounded-md border border-border bg-popover p-3 text-popover-foreground",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-1", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Previous month",
+              onClick: () => setViewMonth((m) => addMonths(m, -1)),
+              className: "grid h-7 w-7 place-items-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium", "aria-live": "polite", children: [
+            MONTHS_LONG[viewMonth.getMonth()],
+            " ",
+            viewMonth.getFullYear()
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Next month",
+              onClick: () => setViewMonth((m) => addMonths(m, 1)),
+              className: "grid h-7 w-7 place-items-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-0 px-1", children: WEEKDAYS_SHORT.map((w) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "grid h-7 w-9 place-items-center text-xs font-medium text-muted-foreground",
+            children: w
+          },
+          w
+        )) }),
+        /* @__PURE__ */ jsx("div", { ref: gridRef, className: "grid grid-cols-7 gap-0 px-1", role: "grid", children: cells.map(({ date, outOfMonth }) => {
+          const disabled = isDateDisabled(date, { min, max, isDisabled });
+          const isSelectedCell = isSameDay(selected, date);
+          const isFocusedCell = isSameDay(focusedDate, date);
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "gridcell",
+              "data-date": date.toDateString(),
+              "aria-selected": isSelectedCell,
+              "aria-disabled": disabled || void 0,
+              "data-selected": isSelectedCell ? "" : void 0,
+              "data-today": isToday(date) ? "" : void 0,
+              "data-out-of-month": outOfMonth ? "" : void 0,
+              "data-disabled": disabled ? "" : void 0,
+              tabIndex: isFocusedCell ? 0 : -1,
+              disabled,
+              onClick: () => {
+                if (disabled) return;
+                setSelected(date);
+                setFocusedDate(date);
+                if (outOfMonth) setViewMonth(startOfMonth(date));
+              },
+              onKeyDown: (e) => onCellKeyDown(e, date),
+              className: cn(
+                "grid h-9 w-9 place-items-center rounded-sm text-sm transition-colors",
+                "hover:bg-muted hover:text-foreground",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                outOfMonth && "text-muted-foreground/60",
+                isToday(date) && !isSelectedCell && "border border-border",
+                isSelectedCell && "bg-primary text-primary-foreground hover:bg-primary",
+                disabled && "pointer-events-none opacity-40"
+              ),
+              children: date.getDate()
+            },
+            date.toDateString()
+          );
+        }) })
+      ]
+    }
+  );
+});
+var DateField = forwardRef(function DateField2({ value, defaultValue, onChange, min, max, size, state, className, id, disabled, required, ...rest }, ref) {
+  const ctx = useFormControl();
+  const [current, setCurrent] = useControlled({
+    controlled: value,
+    default: defaultValue ?? null,
+    onChange
+  });
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      type: "date",
+      id: id ?? ctx?.id,
+      disabled: disabled ?? ctx?.isDisabled,
+      required: required ?? ctx?.isRequired,
+      "aria-invalid": ctx?.isInvalid || void 0,
+      "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+      value: formatISODate(current),
+      min: formatISODate(min),
+      max: formatISODate(max),
+      onChange: (e) => setCurrent(parseISODate(e.target.value)),
+      className: cn(inputBaseVariants({ size, state: state ?? (ctx?.isInvalid ? "invalid" : "default") }), className),
+      ...rest
+    }
+  );
+});
+function timeToString(t) {
+  if (!t) return "";
+  const date = /* @__PURE__ */ new Date();
+  date.setHours(t.hours, t.minutes, 0, 0);
+  return formatISOTime(date);
+}
+var TimeField = forwardRef(function TimeField2({ value, defaultValue, onChange, size, state, className, id, disabled, required, ...rest }, ref) {
+  const ctx = useFormControl();
+  const [current, setCurrent] = useControlled({
+    controlled: value,
+    default: defaultValue ?? null,
+    onChange
+  });
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      type: "time",
+      id: id ?? ctx?.id,
+      disabled: disabled ?? ctx?.isDisabled,
+      required: required ?? ctx?.isRequired,
+      "aria-invalid": ctx?.isInvalid || void 0,
+      "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+      value: timeToString(current),
+      onChange: (e) => setCurrent(parseISOTime(e.target.value)),
+      className: cn(inputBaseVariants({ size, state: state ?? (ctx?.isInvalid ? "invalid" : "default") }), className),
+      ...rest
+    }
+  );
+});
+var RangeCalendar = forwardRef(
+  function RangeCalendar2({
+    value,
+    defaultValue,
+    onChange,
+    defaultMonth,
+    min,
+    max,
+    isDisabled,
+    "aria-label": ariaLabel = "Date range",
+    className,
+    ...rest
+  }, ref) {
+    const [range, setRange] = useControlled({
+      controlled: value,
+      default: defaultValue ?? null,
+      onChange
+    });
+    const [viewMonth, setViewMonth] = useState(
+      () => startOfMonth(defaultMonth ?? range?.start ?? /* @__PURE__ */ new Date())
+    );
+    const [focusedDate, setFocusedDate] = useState(
+      () => range?.start ?? /* @__PURE__ */ new Date()
+    );
+    const [hoveredDate, setHoveredDate] = useState(null);
+    const [pendingStart, setPendingStart] = useState(null);
+    const gridRef = useRef(null);
+    useEffect(() => {
+      const cell = gridRef.current?.querySelector(
+        `[data-date="${focusedDate.toDateString()}"]`
+      );
+      cell?.focus();
+    }, [focusedDate]);
+    const moveFocus = useCallback(
+      (next) => {
+        if (next.getMonth() !== viewMonth.getMonth() || next.getFullYear() !== viewMonth.getFullYear()) {
+          setViewMonth(startOfMonth(next));
+        }
+        setFocusedDate(next);
+      },
+      [viewMonth]
+    );
+    const onSelectDay = useCallback(
+      (date) => {
+        if (isDateDisabled(date, { min, max, isDisabled })) return;
+        if (!pendingStart) {
+          setPendingStart(date);
+          setRange({ start: date, end: null });
+          return;
+        }
+        const startTime = startOfDay(pendingStart).getTime();
+        const endTime = startOfDay(date).getTime();
+        const finalStart = startTime <= endTime ? pendingStart : date;
+        const finalEnd = startTime <= endTime ? date : pendingStart;
+        setRange({ start: finalStart, end: finalEnd });
+        setPendingStart(null);
+      },
+      [pendingStart, setRange, min, max, isDisabled]
+    );
+    const onCellKeyDown = useCallback(
+      (e, date) => {
+        switch (e.key) {
+          case "ArrowRight":
+            e.preventDefault();
+            moveFocus(addDays(date, 1));
+            break;
+          case "ArrowLeft":
+            e.preventDefault();
+            moveFocus(addDays(date, -1));
+            break;
+          case "ArrowDown":
+            e.preventDefault();
+            moveFocus(addDays(date, 7));
+            break;
+          case "ArrowUp":
+            e.preventDefault();
+            moveFocus(addDays(date, -7));
+            break;
+          case "Home":
+            e.preventDefault();
+            moveFocus(addDays(date, -date.getDay()));
+            break;
+          case "End":
+            e.preventDefault();
+            moveFocus(addDays(date, 6 - date.getDay()));
+            break;
+          case "PageDown":
+            e.preventDefault();
+            moveFocus(addMonths(date, e.shiftKey ? 12 : 1));
+            break;
+          case "PageUp":
+            e.preventDefault();
+            moveFocus(addMonths(date, e.shiftKey ? -12 : -1));
+            break;
+          case "Enter":
+          case " ":
+            e.preventDefault();
+            onSelectDay(date);
+            break;
+        }
+      },
+      [moveFocus, onSelectDay]
+    );
+    const cells = buildMonthGrid(viewMonth.getFullYear(), viewMonth.getMonth());
+    const previewEnd = pendingStart ? hoveredDate : range?.end;
+    const isStart = (d) => isSameDay(d, range?.start ?? null) || isSameDay(d, pendingStart);
+    const isEnd = (d) => isSameDay(d, range?.end ?? null);
+    const inRange = (d) => isInRange(d, pendingStart ?? range?.start, previewEnd ?? null);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "application",
+        "aria-label": ariaLabel,
+        className: cn(
+          "inline-flex flex-col gap-2 rounded-md border border-border bg-popover p-3 text-popover-foreground",
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-1", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Previous month",
+                onClick: () => setViewMonth((m) => addMonths(m, -1)),
+                className: "grid h-7 w-7 place-items-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium", "aria-live": "polite", children: [
+              MONTHS_LONG[viewMonth.getMonth()],
+              " ",
+              viewMonth.getFullYear()
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Next month",
+                onClick: () => setViewMonth((m) => addMonths(m, 1)),
+                className: "grid h-7 w-7 place-items-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-0 px-1", children: WEEKDAYS_SHORT.map((w) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "grid h-7 w-9 place-items-center text-xs font-medium text-muted-foreground",
+              children: w
+            },
+            w
+          )) }),
+          /* @__PURE__ */ jsx("div", { ref: gridRef, className: "grid grid-cols-7 gap-0 px-1", role: "grid", children: cells.map(({ date, outOfMonth }) => {
+            const disabled = isDateDisabled(date, { min, max, isDisabled });
+            const startCell = isStart(date);
+            const endCell = isEnd(date);
+            const rangeCell = inRange(date) && !startCell && !endCell;
+            const isFocusedCell = isSameDay(focusedDate, date);
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "gridcell",
+                "data-date": date.toDateString(),
+                "data-range-start": startCell ? "" : void 0,
+                "data-range-end": endCell ? "" : void 0,
+                "data-in-range": rangeCell ? "" : void 0,
+                "data-today": isToday(date) ? "" : void 0,
+                "data-out-of-month": outOfMonth ? "" : void 0,
+                "data-disabled": disabled ? "" : void 0,
+                "aria-selected": startCell || endCell,
+                "aria-disabled": disabled || void 0,
+                tabIndex: isFocusedCell ? 0 : -1,
+                disabled,
+                onPointerEnter: () => setHoveredDate(date),
+                onPointerLeave: () => setHoveredDate((h) => isSameDay(h, date) ? null : h),
+                onClick: () => {
+                  onSelectDay(date);
+                  setFocusedDate(date);
+                  if (outOfMonth) setViewMonth(startOfMonth(date));
+                },
+                onKeyDown: (e) => onCellKeyDown(e, date),
+                className: cn(
+                  "grid h-9 w-9 place-items-center text-sm transition-colors",
+                  "hover:bg-muted hover:text-foreground",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  outOfMonth && "text-muted-foreground/60",
+                  isToday(date) && !startCell && !endCell && "border border-border rounded-sm",
+                  rangeCell && "bg-primary-soft text-primary-soft-foreground",
+                  startCell && "bg-primary text-primary-foreground rounded-l-sm",
+                  endCell && "bg-primary text-primary-foreground rounded-r-sm",
+                  !startCell && !endCell && !rangeCell && "rounded-sm",
+                  disabled && "pointer-events-none opacity-40"
+                ),
+                children: date.getDate()
+              },
+              date.toDateString()
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+var defaultFormat = (d) => d.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+var DatePicker = forwardRef(function DatePicker2({
+  value,
+  defaultValue,
+  onChange,
+  placeholder = "Pick a date",
+  format = defaultFormat,
+  min,
+  max,
+  isDisabled: dayDisabled,
+  invalid,
+  name,
+  size,
+  state,
+  className,
+  disabled,
+  onClick,
+  ...rest
+}, forwardedRef) {
+  const [date, setDate] = useControlled({
+    controlled: value,
+    default: defaultValue ?? null,
+    onChange
+  });
+  const [open, setOpen] = useControlled({
+    controlled: void 0,
+    default: false
+  });
+  const triggerRef = useRef(null);
+  const triggerState = state ?? (invalid ? "invalid" : "default");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: composeRefs(forwardedRef, triggerRef),
+        type: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "data-state": open ? "open" : "closed",
+        disabled,
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented) return;
+          setOpen(!open);
+        },
+        className: cn(selectTriggerVariants({ size, state: triggerState }), className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn("truncate", !date && "text-subtle-foreground"), children: date ? format(date) : placeholder }),
+          /* @__PURE__ */ jsx(Calendar$1, { className: "h-4 w-4 shrink-0 text-muted-foreground" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(AnchoredPositioner, { anchor: triggerRef.current, placement: "bottom-start", offset: 6, children: /* @__PURE__ */ jsx(FocusScope, { asChild: true, trapped: true, loop: true, children: /* @__PURE__ */ jsx(
+      DismissableLayer,
+      {
+        onEscape: () => {
+          setOpen(false);
+          requestAnimationFrame(() => triggerRef.current?.focus());
+        },
+        onOutsidePointerDown: (e) => {
+          if (triggerRef.current?.contains(e.target)) return;
+          setOpen(false);
+        },
+        children: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            value: date,
+            onChange: (d) => {
+              setDate(d);
+              setOpen(false);
+              requestAnimationFrame(() => triggerRef.current?.focus());
+            },
+            defaultMonth: date ?? /* @__PURE__ */ new Date(),
+            min,
+            max,
+            isDisabled: dayDisabled,
+            className: "shadow-md"
+          }
+        )
+      }
+    ) }) }) }),
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: formatISODate(date) })
+  ] });
+});
+var defaultFormat2 = (t) => `${String(t.hours).padStart(2, "0")}:${String(t.minutes).padStart(2, "0")}`;
+var HOURS = Array.from({ length: 24 }, (_, i) => i);
+var TimePicker = forwardRef(function TimePicker2({
+  value,
+  defaultValue,
+  onChange,
+  minuteStep = 5,
+  placeholder = "Pick a time",
+  format = defaultFormat2,
+  invalid,
+  name,
+  size,
+  state,
+  className,
+  disabled,
+  onClick,
+  ...rest
+}, forwardedRef) {
+  const [time, setTime] = useControlled({
+    controlled: value,
+    default: defaultValue ?? null,
+    onChange
+  });
+  const [open, setOpen] = useControlled({
+    controlled: void 0,
+    default: false
+  });
+  const triggerRef = useRef(null);
+  const hoursRef = useRef(null);
+  const minutesRef = useRef(null);
+  const minutes = useMemo(() => {
+    const list = [];
+    for (let m = 0; m < 60; m += minuteStep) list.push(m);
+    return list;
+  }, [minuteStep]);
+  useEffect(() => {
+    if (!open) return;
+    requestAnimationFrame(() => {
+      hoursRef.current?.querySelector("[data-selected]")?.scrollIntoView({ block: "center" });
+      minutesRef.current?.querySelector("[data-selected]")?.scrollIntoView({ block: "center" });
+    });
+  }, [open]);
+  const triggerState = state ?? (invalid ? "invalid" : "default");
+  const update = (next) => {
+    const merged = {
+      hours: next.hours ?? time?.hours ?? 0,
+      minutes: next.minutes ?? time?.minutes ?? 0
+    };
+    setTime(merged);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: composeRefs(forwardedRef, triggerRef),
+        type: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "data-state": open ? "open" : "closed",
+        disabled,
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented) return;
+          setOpen(!open);
+        },
+        className: cn(selectTriggerVariants({ size, state: triggerState }), className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn("truncate", !time && "text-subtle-foreground"), children: time ? format(time) : placeholder }),
+          /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4 shrink-0 text-muted-foreground" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(AnchoredPositioner, { anchor: triggerRef.current, placement: "bottom-start", offset: 6, children: /* @__PURE__ */ jsx(FocusScope, { asChild: true, trapped: true, loop: true, children: /* @__PURE__ */ jsx(
+      DismissableLayer,
+      {
+        onEscape: () => {
+          setOpen(false);
+          requestAnimationFrame(() => triggerRef.current?.focus());
+        },
+        onOutsidePointerDown: (e) => {
+          if (triggerRef.current?.contains(e.target)) return;
+          setOpen(false);
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "z-50 flex gap-1 rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-md outline-none animate-in fade-in-0 zoom-in-95", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: hoursRef,
+              role: "listbox",
+              "aria-label": "Hours",
+              className: "flex max-h-56 flex-col gap-0.5 overflow-y-auto pr-1",
+              children: HOURS.map((h) => {
+                const selected = time?.hours === h;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": selected,
+                    "data-selected": selected ? "" : void 0,
+                    onClick: () => update({ hours: h }),
+                    className: cn(
+                      "grid h-8 w-12 place-items-center rounded-sm text-sm transition-colors hover:bg-muted",
+                      selected && "bg-primary text-primary-foreground hover:bg-primary"
+                    ),
+                    children: String(h).padStart(2, "0")
+                  },
+                  h
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "w-px self-stretch bg-border" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: minutesRef,
+              role: "listbox",
+              "aria-label": "Minutes",
+              className: "flex max-h-56 flex-col gap-0.5 overflow-y-auto pl-1",
+              children: minutes.map((m) => {
+                const selected = time?.minutes === m;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": selected,
+                    "data-selected": selected ? "" : void 0,
+                    onClick: () => update({ minutes: m }),
+                    className: cn(
+                      "grid h-8 w-12 place-items-center rounded-sm text-sm transition-colors hover:bg-muted",
+                      selected && "bg-primary text-primary-foreground hover:bg-primary"
+                    ),
+                    children: String(m).padStart(2, "0")
+                  },
+                  m
+                );
+              })
+            }
+          )
+        ] })
+      }
+    ) }) }) }),
+    name && time && /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "hidden",
+        name,
+        value: `${String(time.hours).padStart(2, "0")}:${String(time.minutes).padStart(2, "0")}`
+      }
+    )
+  ] });
+});
+var defaultFormat3 = (d) => d.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+var DateRangePicker = forwardRef(
+  function DateRangePicker2({
+    value,
+    defaultValue,
+    onChange,
+    placeholder = "Pick a range",
+    format = defaultFormat3,
+    min,
+    max,
+    isDisabled: dayDisabled,
+    invalid,
+    name,
+    size,
+    state,
+    className,
+    disabled,
+    onClick,
+    ...rest
+  }, forwardedRef) {
+    const [range, setRange] = useControlled({
+      controlled: value,
+      default: defaultValue ?? null,
+      onChange
+    });
+    const [open, setOpen] = useControlled({
+      controlled: void 0,
+      default: false
+    });
+    const triggerRef = useRef(null);
+    const triggerState = state ?? (invalid ? "invalid" : "default");
+    const wasComplete = useRef(false);
+    useEffect(() => {
+      const complete = !!(range?.start && range?.end);
+      if (complete && !wasComplete.current && open) {
+        setOpen(false);
+        requestAnimationFrame(() => triggerRef.current?.focus());
+      }
+      wasComplete.current = complete;
+    }, [range, open, setOpen]);
+    const display = range?.start ? range.end ? `${format(range.start)} \u2192 ${format(range.end)}` : `${format(range.start)} \u2192 \u2026` : null;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: composeRefs(forwardedRef, triggerRef),
+          type: "button",
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          "data-state": open ? "open" : "closed",
+          disabled,
+          onClick: (e) => {
+            onClick?.(e);
+            if (e.defaultPrevented) return;
+            setOpen(!open);
+          },
+          className: cn(selectTriggerVariants({ size, state: triggerState }), className),
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: cn("truncate", !display && "text-subtle-foreground"), children: display ?? placeholder }),
+            /* @__PURE__ */ jsx(Calendar$1, { className: "h-4 w-4 shrink-0 text-muted-foreground" })
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(AnchoredPositioner, { anchor: triggerRef.current, placement: "bottom-start", offset: 6, children: /* @__PURE__ */ jsx(FocusScope, { asChild: true, trapped: true, loop: true, children: /* @__PURE__ */ jsx(
+        DismissableLayer,
+        {
+          onEscape: () => {
+            setOpen(false);
+            requestAnimationFrame(() => triggerRef.current?.focus());
+          },
+          onOutsidePointerDown: (e) => {
+            if (triggerRef.current?.contains(e.target)) return;
+            setOpen(false);
+          },
+          children: /* @__PURE__ */ jsx(
+            RangeCalendar,
+            {
+              value: range,
+              onChange: setRange,
+              defaultMonth: range?.start ?? /* @__PURE__ */ new Date(),
+              min,
+              max,
+              isDisabled: dayDisabled,
+              className: "shadow-md"
+            }
+          )
+        }
+      ) }) }) }),
+      name && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("input", { type: "hidden", name: `${name}_start`, value: formatISODate(range?.start) }),
+        /* @__PURE__ */ jsx("input", { type: "hidden", name: `${name}_end`, value: formatISODate(range?.end) })
+      ] })
+    ] });
+  }
+);
+
+export { Calendar, CharacterCount, Checkbox, CheckboxField, CheckboxGroup, ChoiceCard, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxSeparator, CurrencyInput, DateField, DatePicker, DateRangePicker, EmailInput, Fieldset, FilePicker, FormErrorMessage, FormField, FormHelperText, InputAddon, InputGroup, Label, LabeledInput, Legend, Listbox, ListboxEmpty, ListboxGroup, ListboxItem, ListboxSeparator, MaskedInput, MultiSelect, MultiSelectContent, MultiSelectItem, MultiSelectTags, MultiSelectTrigger, NumberInput, PasswordInput, PasswordStrength, PercentInput, PinInput, Radio, RadioField, RadioGroup, RangeCalendar, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Switch, SwitchField, TelInput, TextInput, Textarea, TimeField, TimePicker, UrlInput };
+//# sourceMappingURL=chunk-K6V4KLRO.js.map
+//# sourceMappingURL=chunk-K6V4KLRO.js.map