@wow-two-beta/ui 0.0.12 → 0.0.14

package/dist/{chunk-K6V4KLRO.js → chunk-BQTO7XY6.js}

@@ -1,15 +1,15 @@
-import { useFormControl, FormControlProvider, Portal, AnchoredPositioner, DismissableLayer } from './chunk-YANOG5YR.js';
+import { PopoverTrigger, Popover, PopoverContent } from './chunk-FS6DTWWH.js';
 import { useControlled } from './chunk-4P2TFUVW.js';
+import { useFormControl, FormControlProvider, RovingFocusGroup, useRovingFocusItem, Portal, AnchoredPositioner, DismissableLayer } from './chunk-YMSAS7M7.js';
 import { useId } from './chunk-KDXJQNB6.js';
-import { tv } from './chunk-BMBIZLO4.js';
+import { tv, dataAttr } from './chunk-BMBIZLO4.js';
 import { Icon } from './chunk-TDX22OWF.js';
 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, 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';
+import { Minus, Plus, EyeOff, Eye, Search, X, Check, Upload, ChevronDown, Calendar as Calendar$1, Clock, ChevronLeft, ChevronRight } from 'lucide-react';
 
 var Label = forwardRef(
   ({ className, required, htmlFor, id, children, ...props }, ref) => {
@@ -1388,6 +1388,7 @@ function Select({
   defaultOpen = false,
   open: openProp,
   onOpenChange,
+  placement = "bottom",
   children
 }) {
   const [openState, setOpenState] = useControlled({
@@ -1400,7 +1401,6 @@ function Select({
     default: defaultValue ?? "",
     onChange: onValueChange
   });
-  const triggerRef = useRef(null);
   const [labels, setLabels] = useState({});
   const registerLabel = useCallback((v, label) => {
     setLabels((prev) => prev[v] === label ? prev : { ...prev, [v]: label });
@@ -1417,7 +1417,6 @@ function Select({
     (next) => {
       setValueState(next);
       setOpenState(false);
-      requestAnimationFrame(() => triggerRef.current?.focus());
     },
     [setValueState, setOpenState]
   );
@@ -1427,7 +1426,6 @@ function Select({
       setOpen: setOpenState,
       value: valueState,
       onSelect,
-      triggerRef,
       labels,
       registerLabel,
       unregisterLabel,
@@ -1448,26 +1446,27 @@ function Select({
       invalid
     ]
   );
-  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: ctx, children });
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open: openState,
+      onOpenChange: setOpenState,
+      placement,
+      offset: 6,
+      children
+    }
+  ) });
 }
 var SelectTrigger = forwardRef(
-  function SelectTrigger2({ size, state, className, onClick, children, ...rest }, forwardedRef) {
+  function SelectTrigger2({ size, state, className, children, ...rest }, ref) {
     const ctx = useSelectContext();
     const triggerState = state ?? (ctx.invalid ? "invalid" : "default");
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
-        ref: composeRefs(forwardedRef, ctx.triggerRef),
+        ref,
         type: "button",
-        "aria-haspopup": "listbox",
-        "aria-expanded": ctx.open,
-        "data-state": ctx.open ? "open" : "closed",
         disabled: ctx.disabled,
-        onClick: (e) => {
-          onClick?.(e);
-          if (e.defaultPrevented) return;
-          ctx.setOpen(!ctx.open);
-        },
         className: cn(selectTriggerVariants({ size, state: triggerState }), className),
         ...rest,
         children: [
@@ -1483,7 +1482,7 @@ var SelectTrigger = forwardRef(
           )
         ]
       }
-    );
+    ) });
   }
 );
 function SelectValue({ placeholder, children }) {
@@ -1492,35 +1491,18 @@ function SelectValue({ placeholder, children }) {
   const label = ctx.value ? ctx.labels[ctx.value] ?? ctx.value : null;
   return /* @__PURE__ */ jsx("span", { className: cn("truncate", !label && "text-subtle-foreground"), children: label ?? placeholder });
 }
-function SelectContent({
-  className,
-  placement = "bottom",
-  offset = 6,
-  children
-}) {
+function SelectContent({ className, children }) {
   const ctx = useSelectContext();
-  if (!ctx.open) return null;
-  return /* @__PURE__ */ jsxs(Portal, { children: [
-    /* @__PURE__ */ jsx(AnchoredPositioner, { anchor: ctx.triggerRef.current, placement, offset, children: /* @__PURE__ */ jsx(FocusScope, { asChild: true, trapped: true, loop: true, children: /* @__PURE__ */ jsx(
-      DismissableLayer,
+  return /* @__PURE__ */ jsxs(PopoverContent, { bare: true, children: [
+    /* @__PURE__ */ jsx(
+      Listbox,
       {
-        onEscape: () => ctx.setOpen(false),
-        onOutsidePointerDown: (e) => {
-          if (ctx.triggerRef.current?.contains(e.target)) return;
-          ctx.setOpen(false);
-        },
-        children: /* @__PURE__ */ jsx(
-          Listbox,
-          {
-            value: ctx.value,
-            onValueChange: (v) => ctx.onSelect(v),
-            className: cn("min-w-[var(--radix-anchor-width)]", className),
-            style: ctx.triggerRef.current ? { minWidth: ctx.triggerRef.current.offsetWidth } : void 0,
-            children
-          }
-        )
+        value: ctx.value,
+        onValueChange: (v) => ctx.onSelect(v),
+        className: cn("min-w-[var(--anchor-width)]", className),
+        children
       }
-    ) }) }),
+    ),
     ctx.name && /* @__PURE__ */ jsx("input", { type: "hidden", name: ctx.name, value: ctx.value })
   ] });
 }
@@ -1555,6 +1537,7 @@ function MultiSelect({
   defaultOpen = false,
   open: openProp,
   onOpenChange,
+  placement = "bottom",
   children
 }) {
   const [openState, setOpenState] = useControlled({
@@ -1567,7 +1550,6 @@ function MultiSelect({
     default: defaultValue ?? [],
     onChange: onValueChange
   });
-  const triggerRef = useRef(null);
   const [labels, setLabels] = useState({});
   const registerLabel = useCallback((v, label) => {
     setLabels((prev) => prev[v] === label ? prev : { ...prev, [v]: label });
@@ -1586,7 +1568,6 @@ function MultiSelect({
       setOpen: setOpenState,
       values: valuesState,
       setValues: setValuesState,
-      triggerRef,
       labels,
       registerLabel,
       unregisterLabel,
@@ -1607,26 +1588,27 @@ function MultiSelect({
       invalid
     ]
   );
-  return /* @__PURE__ */ jsx(MultiSelectContext.Provider, { value: ctx, children });
+  return /* @__PURE__ */ jsx(MultiSelectContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open: openState,
+      onOpenChange: setOpenState,
+      placement,
+      offset: 6,
+      children
+    }
+  ) });
 }
 var MultiSelectTrigger = forwardRef(
-  function MultiSelectTrigger2({ size, state, className, onClick, onKeyDown, children, ...rest }, forwardedRef) {
+  function MultiSelectTrigger2({ size, state, className, onKeyDown, children, ...rest }, ref) {
     const ctx = useMultiSelectContext();
     const triggerState = state ?? (ctx.invalid ? "invalid" : "default");
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
-        ref: composeRefs(forwardedRef, ctx.triggerRef),
+        ref,
         type: "button",
-        "aria-haspopup": "listbox",
-        "aria-expanded": ctx.open,
-        "data-state": ctx.open ? "open" : "closed",
         disabled: ctx.disabled,
-        onClick: (e) => {
-          onClick?.(e);
-          if (e.defaultPrevented) return;
-          ctx.setOpen(!ctx.open);
-        },
         onKeyDown: (e) => {
           onKeyDown?.(e);
           if (e.defaultPrevented) return;
@@ -1653,7 +1635,7 @@ var MultiSelectTrigger = forwardRef(
           )
         ]
       }
-    );
+    ) });
   }
 );
 function MultiSelectTags({ placeholder }) {
@@ -1687,39 +1669,19 @@ function MultiSelectTags({ placeholder }) {
     v
   )) });
 }
-function MultiSelectContent({
-  className,
-  placement = "bottom",
-  offset = 6,
-  children
-}) {
+function MultiSelectContent({ className, children }) {
   const ctx = useMultiSelectContext();
-  if (!ctx.open) return null;
-  return /* @__PURE__ */ jsxs(Portal, { children: [
-    /* @__PURE__ */ jsx(AnchoredPositioner, { anchor: ctx.triggerRef.current, placement, offset, children: /* @__PURE__ */ jsx(FocusScope, { asChild: true, trapped: true, loop: true, children: /* @__PURE__ */ jsx(
-      DismissableLayer,
+  return /* @__PURE__ */ jsxs(PopoverContent, { bare: true, children: [
+    /* @__PURE__ */ jsx(
+      Listbox,
       {
-        onEscape: () => {
-          ctx.setOpen(false);
-          requestAnimationFrame(() => ctx.triggerRef.current?.focus());
-        },
-        onOutsidePointerDown: (e) => {
-          if (ctx.triggerRef.current?.contains(e.target)) return;
-          ctx.setOpen(false);
-        },
-        children: /* @__PURE__ */ jsx(
-          Listbox,
-          {
-            multiple: true,
-            value: ctx.values,
-            onValueChange: (v) => ctx.setValues(v),
-            className: cn(className),
-            style: ctx.triggerRef.current ? { minWidth: ctx.triggerRef.current.offsetWidth } : void 0,
-            children
-          }
-        )
+        multiple: true,
+        value: ctx.values,
+        onValueChange: (v) => ctx.setValues(v),
+        className: cn("min-w-[var(--anchor-width)]", className),
+        children
       }
-    ) }) }),
+    ),
     ctx.name && ctx.values.map((v) => /* @__PURE__ */ jsx("input", { type: "hidden", name: ctx.name, value: v }, v))
   ] });
 }
@@ -2129,29 +2091,17 @@ function isInRange(d, start, end) {
   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,
+function MonthGrid({
+  viewMonth,
+  onViewMonthChange,
+  focusedDate,
+  onFocusedDateChange,
+  isDayDisabled,
+  onDayActivate,
+  dayProps,
   "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()
-  );
+  className
+}) {
   const gridRef = useRef(null);
   useEffect(() => {
     const cell = gridRef.current?.querySelector(
@@ -2162,14 +2112,14 @@ var Calendar = forwardRef(function Calendar2({
   const moveFocus = useCallback(
     (next) => {
       if (next.getMonth() !== viewMonth.getMonth() || next.getFullYear() !== viewMonth.getFullYear()) {
-        setViewMonth(startOfMonth(next));
+        onViewMonthChange(startOfMonth(next));
       }
-      setFocusedDate(next);
+      onFocusedDateChange(next);
     },
-    [viewMonth]
+    [viewMonth, onViewMonthChange, onFocusedDateChange]
   );
   const onCellKeyDown = useCallback(
-    (e, date) => {
+    (e, date, outOfMonth) => {
       switch (e.key) {
         case "ArrowRight":
           e.preventDefault();
@@ -2206,26 +2156,22 @@ var Calendar = forwardRef(function Calendar2({
         case "Enter":
         case " ":
           e.preventDefault();
-          if (!isDateDisabled(date, { min, max, isDisabled })) {
-            setSelected(date);
-          }
+          if (!isDayDisabled?.(date)) onDayActivate?.(date, { outOfMonth });
           break;
       }
     },
-    [moveFocus, setSelected, min, max, isDisabled]
+    [moveFocus, onDayActivate, isDayDisabled]
   );
   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(
@@ -2233,7 +2179,7 @@ var Calendar = forwardRef(function Calendar2({
             {
               type: "button",
               "aria-label": "Previous month",
-              onClick: () => setViewMonth((m) => addMonths(m, -1)),
+              onClick: () => onViewMonthChange(addMonths(viewMonth, -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" })
             }
@@ -2248,7 +2194,7 @@ var Calendar = forwardRef(function Calendar2({
             {
               type: "button",
               "aria-label": "Next month",
-              onClick: () => setViewMonth((m) => addMonths(m, 1)),
+              onClick: () => onViewMonthChange(addMonths(viewMonth, 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" })
             }
@@ -2263,18 +2209,17 @@ var Calendar = forwardRef(function Calendar2({
           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 disabled = isDayDisabled?.(date) ?? false;
           const isFocusedCell = isSameDay(focusedDate, date);
+          const consumerProps = dayProps?.(date, { outOfMonth }) ?? {};
+          const { className: cellClassName, ...consumerRest } = consumerProps;
           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,
@@ -2282,19 +2227,19 @@ var Calendar = forwardRef(function Calendar2({
               disabled,
               onClick: () => {
                 if (disabled) return;
-                setSelected(date);
-                setFocusedDate(date);
-                if (outOfMonth) setViewMonth(startOfMonth(date));
+                onDayActivate?.(date, { outOfMonth });
+                onFocusedDateChange(date);
+                if (outOfMonth) onViewMonthChange(startOfMonth(date));
               },
-              onKeyDown: (e) => onCellKeyDown(e, date),
+              onKeyDown: (e) => onCellKeyDown(e, date, outOfMonth),
+              ...consumerRest,
               className: cn(
-                "grid h-9 w-9 place-items-center rounded-sm text-sm transition-colors",
+                "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) && !isSelectedCell && "border border-border",
-                isSelectedCell && "bg-primary text-primary-foreground hover:bg-primary",
-                disabled && "pointer-events-none opacity-40"
+                disabled && "pointer-events-none opacity-40",
+                cellClassName
               ),
               children: date.getDate()
             },
@@ -2304,6 +2249,52 @@ var Calendar = forwardRef(function Calendar2({
       ]
     }
   );
+}
+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());
+  return /* @__PURE__ */ jsx("div", { ref, className: cn(className), ...rest, children: /* @__PURE__ */ jsx(
+    MonthGrid,
+    {
+      viewMonth,
+      onViewMonthChange: setViewMonth,
+      focusedDate,
+      onFocusedDateChange: setFocusedDate,
+      isDayDisabled: (d) => isDateDisabled(d, { min, max, isDisabled }),
+      onDayActivate: (d) => setSelected(d),
+      dayProps: (date) => {
+        const isSelectedCell = isSameDay(selected, date);
+        return {
+          "aria-selected": isSelectedCell,
+          "data-selected": isSelectedCell ? "" : void 0,
+          className: cn(
+            "rounded-sm",
+            isToday(date) && !isSelectedCell && "border border-border",
+            isSelectedCell && "bg-primary text-primary-foreground hover:bg-primary"
+          )
+        };
+      },
+      "aria-label": ariaLabel
+    }
+  ) });
 });
 var DateField = forwardRef(function DateField2({ value, defaultValue, onChange, min, max, size, state, className, id, disabled, required, ...rest }, ref) {
   const ctx = useFormControl();
@@ -2382,190 +2373,59 @@ var RangeCalendar = forwardRef(
     const [viewMonth, setViewMonth] = useState(
       () => startOfMonth(defaultMonth ?? range?.start ?? /* @__PURE__ */ new Date())
     );
-    const [focusedDate, setFocusedDate] = useState(
-      () => 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 handleActivate = (date) => {
+      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);
+    };
     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",
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(className), ...rest, children: /* @__PURE__ */ jsx(
+      MonthGrid,
       {
-        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" })
-              }
+        viewMonth,
+        onViewMonthChange: setViewMonth,
+        focusedDate,
+        onFocusedDateChange: setFocusedDate,
+        isDayDisabled: (d) => isDateDisabled(d, { min, max, isDisabled }),
+        onDayActivate: handleActivate,
+        dayProps: (date) => {
+          const startCell = isStart(date);
+          const endCell = isEnd(date);
+          const rangeCell = inRange(date) && !startCell && !endCell;
+          const selected = startCell || endCell;
+          return {
+            "aria-selected": selected,
+            "data-range-start": startCell ? "" : void 0,
+            "data-range-end": endCell ? "" : void 0,
+            "data-in-range": rangeCell ? "" : void 0,
+            onPointerEnter: () => setHoveredDate(date),
+            onPointerLeave: () => setHoveredDate((h) => isSameDay(h, date) ? null : h),
+            className: cn(
+              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"
             )
-          ] }),
-          /* @__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()
-            );
-          }) })
-        ]
+          };
+        },
+        "aria-label": ariaLabel
       }
-    );
+    ) });
   }
 );
 var defaultFormat = (d) => d.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
@@ -2584,7 +2444,6 @@ var DatePicker = forwardRef(function DatePicker2({
   state,
   className,
   disabled,
-  onClick,
   ...rest
 }, forwardedRef) {
   const [date, setDate] = useControlled({
@@ -2596,23 +2455,14 @@ var DatePicker = forwardRef(function DatePicker2({
     controlled: void 0,
     default: false
   });
-  const triggerRef = useRef(null);
   const triggerState = state ?? (invalid ? "invalid" : "default");
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, placement: "bottom-start", offset: 6, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
-        ref: composeRefs(forwardedRef, triggerRef),
+        ref: forwardedRef,
         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: [
@@ -2620,36 +2470,21 @@ var DatePicker = forwardRef(function DatePicker2({
           /* @__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,
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { bare: true, children: /* @__PURE__ */ jsx(
+      Calendar,
       {
-        onEscape: () => {
-          setOpen(false);
-          requestAnimationFrame(() => triggerRef.current?.focus());
-        },
-        onOutsidePointerDown: (e) => {
-          if (triggerRef.current?.contains(e.target)) return;
+        value: date,
+        onChange: (d) => {
+          setDate(d);
           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"
-          }
-        )
+        defaultMonth: date ?? /* @__PURE__ */ new Date(),
+        min,
+        max,
+        isDisabled: dayDisabled
       }
-    ) }) }) }),
+    ) }),
     name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: formatISODate(date) })
   ] });
 });
@@ -2668,7 +2503,6 @@ var TimePicker = forwardRef(function TimePicker2({
   state,
   className,
   disabled,
-  onClick,
   ...rest
 }, forwardedRef) {
   const [time, setTime] = useControlled({
@@ -2680,7 +2514,6 @@ var TimePicker = forwardRef(function TimePicker2({
     controlled: void 0,
     default: false
   });
-  const triggerRef = useRef(null);
   const hoursRef = useRef(null);
   const minutesRef = useRef(null);
   const minutes = useMemo(() => {
@@ -2703,21 +2536,13 @@ var TimePicker = forwardRef(function TimePicker2({
     };
     setTime(merged);
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, placement: "bottom-start", offset: 6, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
-        ref: composeRefs(forwardedRef, triggerRef),
+        ref: forwardedRef,
         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: [
@@ -2725,79 +2550,66 @@ var TimePicker = forwardRef(function TimePicker2({
           /* @__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
-                );
-              })
-            }
-          )
-        ] })
-      }
-    ) }) }) }),
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { bare: true, children: /* @__PURE__ */ jsxs("div", { className: "flex gap-1 rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-md", 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",
       {
@@ -2825,7 +2637,6 @@ var DateRangePicker = forwardRef(
     state,
     className,
     disabled,
-    onClick,
     ...rest
   }, forwardedRef) {
     const [range, setRange] = useControlled({
@@ -2837,33 +2648,23 @@ var DateRangePicker = forwardRef(
       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(
+    return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, placement: "bottom-start", offset: 6, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
         "button",
         {
-          ref: composeRefs(forwardedRef, triggerRef),
+          ref: forwardedRef,
           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: [
@@ -2871,32 +2672,18 @@ var DateRangePicker = forwardRef(
             /* @__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,
+      ) }),
+      /* @__PURE__ */ jsx(PopoverContent, { bare: true, children: /* @__PURE__ */ jsx(
+        RangeCalendar,
         {
-          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"
-            }
-          )
+          value: range,
+          onChange: setRange,
+          defaultMonth: range?.start ?? /* @__PURE__ */ new Date(),
+          min,
+          max,
+          isDisabled: dayDisabled
         }
-      ) }) }) }),
+      ) }),
       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) })
@@ -2905,6 +2692,1040 @@ var DateRangePicker = forwardRef(
   }
 );
 
-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
+// src/forms/colorSwatch/ColorSwatch.variants.ts
+var colorSwatchVariants = tv({
+  base: "inline-block shrink-0 border border-border bg-[image:linear-gradient(45deg,_#ddd_25%,_transparent_25%),_linear-gradient(-45deg,_#ddd_25%,_transparent_25%),_linear-gradient(45deg,_transparent_75%,_#ddd_75%),_linear-gradient(-45deg,_transparent_75%,_#ddd_75%)] bg-[length:8px_8px] bg-[position:0_0,_0_4px,_4px_-4px,_-4px_0px]",
+  variants: {
+    size: {
+      xs: "h-4 w-4",
+      sm: "h-5 w-5",
+      md: "h-6 w-6",
+      lg: "h-9 w-9"
+    },
+    shape: {
+      square: "rounded-sm",
+      circle: "rounded-full"
+    },
+    interactive: {
+      true: "cursor-pointer transition-shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 hover:shadow-sm",
+      false: ""
+    },
+    selected: {
+      true: "ring-2 ring-ring ring-offset-1",
+      false: ""
+    },
+    disabled: {
+      true: "cursor-not-allowed opacity-50",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    shape: "square",
+    interactive: false,
+    selected: false,
+    disabled: false
+  }
+});
+var ColorSwatch = forwardRef(function ColorSwatch2({ color = "#000000", size, shape, selected, disabled, className, onClick, style, ...rest }, ref) {
+  const interactive = !!onClick;
+  const classes = cn(
+    colorSwatchVariants({ size, shape, interactive, selected, disabled }),
+    className
+  );
+  const styleWithColor = {
+    ...style,
+    boxShadow: `inset 0 0 0 100px ${color}`
+  };
+  if (interactive) {
+    const buttonProps = rest;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        disabled,
+        onClick,
+        style: styleWithColor,
+        className: classes,
+        ...buttonProps
+      }
+    );
+  }
+  const divProps = rest;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      style: styleWithColor,
+      className: classes,
+      ...divProps
+    }
+  );
+});
+
+// src/forms/ColorExtensions.ts
+function clamp01(n) {
+  return Math.max(0, Math.min(1, n));
+}
+function clampHue(h) {
+  let v = h % 360;
+  if (v < 0) v += 360;
+  return v;
+}
+function clampByte(n) {
+  return Math.max(0, Math.min(255, Math.round(n)));
+}
+function parseHex(input) {
+  if (!input) return null;
+  const s = input.trim().replace(/^#/, "");
+  let m = null;
+  if (/^[0-9a-fA-F]{3}$/.test(s)) {
+    m = s.split("").map((c) => c + c).join("");
+  } else if (/^[0-9a-fA-F]{4}$/.test(s)) {
+    m = s.split("").map((c) => c + c).join("");
+  } else if (/^[0-9a-fA-F]{6}$/.test(s) || /^[0-9a-fA-F]{8}$/.test(s)) {
+    m = s;
+  }
+  if (!m) return null;
+  const r = parseInt(m.slice(0, 2), 16);
+  const g = parseInt(m.slice(2, 4), 16);
+  const b = parseInt(m.slice(4, 6), 16);
+  const a = m.length === 8 ? parseInt(m.slice(6, 8), 16) / 255 : 1;
+  return { r, g, b, a };
+}
+function formatHex(rgb, options) {
+  if (!rgb) return "";
+  const r = clampByte(rgb.r).toString(16).padStart(2, "0");
+  const g = clampByte(rgb.g).toString(16).padStart(2, "0");
+  const b = clampByte(rgb.b).toString(16).padStart(2, "0");
+  const includeAlpha = options?.withAlpha ?? (rgb.a !== void 0 && rgb.a < 1);
+  if (includeAlpha) {
+    const a = clampByte((rgb.a ?? 1) * 255).toString(16).padStart(2, "0");
+    return `#${r}${g}${b}${a}`;
+  }
+  return `#${r}${g}${b}`;
+}
+function rgbToHsv({ r, g, b, a = 1 }) {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const d = max - min;
+  let h = 0;
+  if (d !== 0) {
+    if (max === rn) h = (gn - bn) / d % 6;
+    else if (max === gn) h = (bn - rn) / d + 2;
+    else h = (rn - gn) / d + 4;
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  const s = max === 0 ? 0 : d / max;
+  const v = max;
+  return { h, s, v, a };
+}
+function hsvToRgb({ h, s, v, a = 1 }) {
+  const c = v * s;
+  const hh = clampHue(h) / 60;
+  const x = c * (1 - Math.abs(hh % 2 - 1));
+  let r1 = 0;
+  let g1 = 0;
+  let b1 = 0;
+  if (hh >= 0 && hh < 1) [r1, g1, b1] = [c, x, 0];
+  else if (hh < 2) [r1, g1, b1] = [x, c, 0];
+  else if (hh < 3) [r1, g1, b1] = [0, c, x];
+  else if (hh < 4) [r1, g1, b1] = [0, x, c];
+  else if (hh < 5) [r1, g1, b1] = [x, 0, c];
+  else [r1, g1, b1] = [c, 0, x];
+  const m = v - c;
+  return {
+    r: Math.round((r1 + m) * 255),
+    g: Math.round((g1 + m) * 255),
+    b: Math.round((b1 + m) * 255),
+    a
+  };
+}
+function parseColorToHsv(input) {
+  const rgb = parseHex(input);
+  if (!rgb) return null;
+  return rgbToHsv(rgb);
+}
+function hsvToHex(hsv, options) {
+  return formatHex(hsvToRgb(hsv), options);
+}
+function commitHex(text, withAlpha) {
+  const normalised = text.startsWith("#") ? text : `#${text}`;
+  const rgb = parseHex(normalised);
+  if (!rgb) return null;
+  return formatHex(rgb, { withAlpha });
+}
+var ColorField = forwardRef(function ColorField2({
+  value,
+  defaultValue,
+  onChange,
+  swatchShape = "square",
+  withAlpha = false,
+  size,
+  state,
+  className,
+  id,
+  disabled,
+  required,
+  onBlur,
+  onKeyDown,
+  ...rest
+}, ref) {
+  const ctx = useFormControl();
+  const [committed, setCommitted] = useControlled({
+    controlled: value,
+    default: defaultValue ?? null,
+    onChange
+  });
+  const [draft, setDraft] = useState(committed ?? "");
+  useEffect(() => {
+    setDraft(committed ?? "");
+  }, [committed]);
+  const commit = () => {
+    if (!draft) {
+      setCommitted(null);
+      return;
+    }
+    const next = commitHex(draft, withAlpha);
+    if (next) {
+      setCommitted(next);
+      setDraft(next);
+    } else {
+      setDraft(committed ?? "");
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-flex w-full items-stretch", children: [
+    /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-y-0 left-2 flex items-center", children: /* @__PURE__ */ jsx(ColorSwatch, { color: committed ?? "#00000000", size: "sm", shape: swatchShape }) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "text",
+        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,
+        spellCheck: false,
+        autoCapitalize: "none",
+        autoCorrect: "off",
+        value: draft,
+        onChange: (e) => setDraft(e.target.value),
+        onBlur: (e) => {
+          onBlur?.(e);
+          commit();
+        },
+        onKeyDown: (e) => {
+          onKeyDown?.(e);
+          if (e.defaultPrevented) return;
+          if (e.key === "Enter") {
+            e.preventDefault();
+            commit();
+          }
+        },
+        className: cn(
+          inputBaseVariants({ size, state: state ?? (ctx?.isInvalid ? "invalid" : "default") }),
+          "pl-9 font-mono uppercase",
+          className
+        ),
+        ...rest
+      }
+    )
+  ] });
+});
+function channelMax(channel) {
+  return channel === "hue" ? 360 : 1;
+}
+function defaultStep(channel) {
+  return channel === "hue" ? 1 : 0.01;
+}
+function buildGradient(channel, color) {
+  if (channel === "hue") {
+    return "linear-gradient(to right, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%))";
+  }
+  const ctx = color ?? { h: 0, s: 1, v: 1 };
+  if (channel === "saturation") {
+    const start = hsvToHex({ h: ctx.h, s: 0, v: ctx.v });
+    const end = hsvToHex({ h: ctx.h, s: 1, v: ctx.v });
+    return `linear-gradient(to right, ${start}, ${end})`;
+  }
+  if (channel === "value") {
+    const end = hsvToHex({ h: ctx.h, s: ctx.s, v: 1 });
+    return `linear-gradient(to right, #000000, ${end})`;
+  }
+  const opaque = hsvToHex({ h: ctx.h, s: ctx.s, v: ctx.v });
+  return `linear-gradient(to right, transparent, ${opaque})`;
+}
+var CHECKERBOARD = {
+  backgroundImage: "linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%)",
+  backgroundSize: "8px 8px",
+  backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px"
+};
+var ColorSlider = forwardRef(function ColorSlider2({
+  channel = "hue",
+  value,
+  defaultValue,
+  onChange,
+  color,
+  step,
+  disabled = false,
+  className,
+  "aria-label": ariaLabel,
+  ...rest
+}, forwardedRef) {
+  const max = channelMax(channel);
+  const stepValue = step ?? defaultStep(channel);
+  const [val, setVal] = useControlled({
+    controlled: value,
+    default: defaultValue ?? 0,
+    onChange
+  });
+  const trackRef = useRef(null);
+  const updateFromClientX = useCallback(
+    (clientX) => {
+      const track = trackRef.current;
+      if (!track) return;
+      const rect = track.getBoundingClientRect();
+      const ratio2 = clamp01((clientX - rect.left) / rect.width);
+      const next = ratio2 * max;
+      setVal(channel === "hue" ? clampHue(next) : clamp01(next));
+    },
+    [channel, max, setVal]
+  );
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      e.target.setPointerCapture?.(e.pointerId);
+      updateFromClientX(e.clientX);
+    },
+    [disabled, updateFromClientX]
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (disabled) return;
+      if (e.buttons !== 1) return;
+      updateFromClientX(e.clientX);
+    },
+    [disabled, updateFromClientX]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (disabled) return;
+      let next = val;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          next = val + stepValue;
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          next = val - stepValue;
+          break;
+        case "PageUp":
+          next = val + stepValue * 10;
+          break;
+        case "PageDown":
+          next = val - stepValue * 10;
+          break;
+        case "Home":
+          next = 0;
+          break;
+        case "End":
+          next = max;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      setVal(channel === "hue" ? clampHue(next) : clamp01(next));
+    },
+    [channel, disabled, max, setVal, stepValue, val]
+  );
+  const ratio = channel === "hue" ? clampHue(val) / 360 : clamp01(val);
+  const gradient = buildGradient(channel, color);
+  const trackStyle = {
+    backgroundImage: gradient,
+    ...channel === "alpha" ? { backgroundColor: "transparent" } : null
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: forwardedRef,
+      className: cn("relative inline-flex w-full select-none items-center", className),
+      ...rest,
+      children: [
+        channel === "alpha" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-0 rounded-full",
+            style: CHECKERBOARD
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: composeRefs(trackRef),
+            role: "slider",
+            tabIndex: disabled ? -1 : 0,
+            "aria-label": ariaLabel ?? `${channel} slider`,
+            "aria-valuemin": 0,
+            "aria-valuemax": max,
+            "aria-valuenow": Math.round(val * 100) / 100,
+            "aria-disabled": disabled || void 0,
+            "aria-orientation": "horizontal",
+            "data-disabled": disabled ? "" : void 0,
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onKeyDown: handleKeyDown,
+            style: trackStyle,
+            className: cn(
+              "relative h-3 w-full rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              disabled && "pointer-events-none opacity-50"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: "absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white bg-transparent shadow-md ring-1 ring-black/20",
+                style: { left: `${ratio * 100}%` }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+var ColorArea = forwardRef(function ColorArea2({
+  hue = 0,
+  saturation,
+  defaultSaturation,
+  value,
+  defaultValue,
+  onChange,
+  step = 0.01,
+  disabled = false,
+  className,
+  "aria-label": ariaLabel = "Saturation and value",
+  ...rest
+}, forwardedRef) {
+  const [s, setS] = useControlled({
+    controlled: saturation,
+    default: defaultSaturation ?? 1
+  });
+  const [v, setV] = useControlled({
+    controlled: value,
+    default: defaultValue ?? 1
+  });
+  const trackRef = useRef(null);
+  const emit = useCallback(
+    (nextS, nextV) => {
+      const cs = clamp01(nextS);
+      const cv = clamp01(nextV);
+      setS(cs);
+      setV(cv);
+      onChange?.({ saturation: cs, value: cv });
+    },
+    [onChange, setS, setV]
+  );
+  const updateFromClient = useCallback(
+    (clientX, clientY) => {
+      const track = trackRef.current;
+      if (!track) return;
+      const rect = track.getBoundingClientRect();
+      const xRatio = clamp01((clientX - rect.left) / rect.width);
+      const yRatio = clamp01((clientY - rect.top) / rect.height);
+      emit(xRatio, 1 - yRatio);
+    },
+    [emit]
+  );
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      e.target.setPointerCapture?.(e.pointerId);
+      updateFromClient(e.clientX, e.clientY);
+    },
+    [disabled, updateFromClient]
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (disabled || e.buttons !== 1) return;
+      updateFromClient(e.clientX, e.clientY);
+    },
+    [disabled, updateFromClient]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (disabled) return;
+      const big = step * 10;
+      let nextS = s;
+      let nextV = v;
+      switch (e.key) {
+        case "ArrowRight":
+          nextS = s + step;
+          break;
+        case "ArrowLeft":
+          nextS = s - step;
+          break;
+        case "ArrowUp":
+          nextV = v + step;
+          break;
+        case "ArrowDown":
+          nextV = v - step;
+          break;
+        case "PageUp":
+          nextV = v + big;
+          break;
+        case "PageDown":
+          nextV = v - big;
+          break;
+        case "Home":
+          nextS = 0;
+          nextV = 1;
+          break;
+        case "End":
+          nextS = 1;
+          nextV = 0;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      emit(nextS, nextV);
+    },
+    [disabled, emit, s, step, v]
+  );
+  const baseColor = `hsl(${hue}, 100%, 50%)`;
+  const trackStyle = {
+    backgroundImage: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent)`,
+    backgroundColor: baseColor
+  };
+  const thumbColor = hsvToHex({ h: hue, s, v });
+  const thumbStyle = {
+    left: `${s * 100}%`,
+    top: `${(1 - v) * 100}%`,
+    backgroundColor: thumbColor
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: composeRefs(forwardedRef, trackRef),
+      role: "slider",
+      tabIndex: disabled ? -1 : 0,
+      "aria-label": ariaLabel,
+      "aria-valuetext": `saturation ${(s * 100).toFixed(0)}%, value ${(v * 100).toFixed(0)}%`,
+      "aria-disabled": disabled || void 0,
+      "data-disabled": disabled ? "" : void 0,
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onKeyDown: handleKeyDown,
+      style: trackStyle,
+      className: cn(
+        "relative aspect-square w-full select-none rounded-md border border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        disabled && "pointer-events-none opacity-50",
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          style: thumbStyle,
+          className: "absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-md ring-1 ring-black/20"
+        }
+      )
+    }
+  );
+});
+function angleFromCenter(clientX, clientY, rect) {
+  const cx = rect.left + rect.width / 2;
+  const cy = rect.top + rect.height / 2;
+  const dx = clientX - cx;
+  const dy = clientY - cy;
+  const angle = Math.atan2(dx, -dy) * 180 / Math.PI;
+  return (angle + 360) % 360;
+}
+var ColorWheel = forwardRef(function ColorWheel2({
+  value,
+  defaultValue,
+  onChange,
+  size = 200,
+  thickness = 30,
+  step = 1,
+  disabled = false,
+  className,
+  "aria-label": ariaLabel = "Hue",
+  ...rest
+}, forwardedRef) {
+  const [hue, setHue] = useControlled({
+    controlled: value,
+    default: defaultValue ?? 0,
+    onChange
+  });
+  const trackRef = useRef(null);
+  const updateFromClient = useCallback(
+    (clientX, clientY) => {
+      const track = trackRef.current;
+      if (!track) return;
+      setHue(clampHue(angleFromCenter(clientX, clientY, track.getBoundingClientRect())));
+    },
+    [setHue]
+  );
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      e.target.setPointerCapture?.(e.pointerId);
+      updateFromClient(e.clientX, e.clientY);
+    },
+    [disabled, updateFromClient]
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (disabled || e.buttons !== 1) return;
+      updateFromClient(e.clientX, e.clientY);
+    },
+    [disabled, updateFromClient]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (disabled) return;
+      let next = hue;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          next = hue + step;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          next = hue - step;
+          break;
+        case "PageUp":
+          next = hue + step * 10;
+          break;
+        case "PageDown":
+          next = hue - step * 10;
+          break;
+        case "Home":
+          next = 0;
+          break;
+        case "End":
+          next = 359;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      setHue(clampHue(next));
+    },
+    [disabled, hue, setHue, step]
+  );
+  const radius = (size - thickness) / 2;
+  const angleRad = hue * Math.PI / 180;
+  const thumbX = size / 2 + radius * Math.sin(angleRad);
+  const thumbY = size / 2 - radius * Math.cos(angleRad);
+  const wheelStyle = {
+    width: size,
+    height: size,
+    background: "conic-gradient(from 0deg, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%))",
+    WebkitMaskImage: `radial-gradient(circle, transparent ${radius - thickness / 2}px, black ${radius - thickness / 2 + 1}px, black ${radius + thickness / 2}px, transparent ${radius + thickness / 2 + 1}px)`,
+    maskImage: `radial-gradient(circle, transparent ${radius - thickness / 2}px, black ${radius - thickness / 2 + 1}px, black ${radius + thickness / 2}px, transparent ${radius + thickness / 2 + 1}px)`
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: composeRefs(forwardedRef, trackRef),
+      role: "slider",
+      tabIndex: disabled ? -1 : 0,
+      "aria-label": ariaLabel,
+      "aria-valuemin": 0,
+      "aria-valuemax": 360,
+      "aria-valuenow": Math.round(hue),
+      "aria-disabled": disabled || void 0,
+      "data-disabled": disabled ? "" : void 0,
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onKeyDown: handleKeyDown,
+      style: wheelStyle,
+      className: cn(
+        "relative inline-block select-none rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        disabled && "pointer-events-none opacity-50",
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          style: {
+            left: thumbX,
+            top: thumbY,
+            backgroundColor: `hsl(${hue}, 100%, 50%)`
+          },
+          className: "pointer-events-none absolute h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-md ring-1 ring-black/30"
+        }
+      )
+    }
+  );
+});
+function ColorSwatchItem({ color, selected, disabled, size, shape, onSelect }) {
+  const roving = useRovingFocusItem();
+  return /* @__PURE__ */ jsx(
+    ColorSwatch,
+    {
+      ref: roving.ref,
+      color,
+      size,
+      shape,
+      selected,
+      disabled,
+      tabIndex: roving.tabIndex,
+      onClick: () => onSelect(color),
+      onKeyDown: (e) => {
+        roving.onKeyDown(e);
+        if (e.defaultPrevented) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onSelect(color);
+        }
+      },
+      onFocus: roving.onFocus,
+      "data-roving-focus-item": true,
+      "aria-label": color
+    }
+  );
+}
+function ColorSwatchPicker({
+  colors,
+  value,
+  defaultValue,
+  onChange,
+  swatchSize = "md",
+  swatchShape = "square",
+  disabled = false,
+  className,
+  ...rest
+}) {
+  const [selected, setSelected] = useControlled({
+    controlled: value,
+    default: defaultValue ?? null,
+    onChange
+  });
+  return /* @__PURE__ */ jsx(
+    RovingFocusGroup,
+    {
+      orientation: "both",
+      loop: true,
+      className: cn("flex flex-wrap gap-1.5", className),
+      ...rest,
+      children: colors.map((c) => /* @__PURE__ */ jsx(
+        ColorSwatchItem,
+        {
+          color: c,
+          selected: selected === c,
+          disabled,
+          size: swatchSize,
+          shape: swatchShape,
+          onSelect: (color) => setSelected(color)
+        },
+        c
+      ))
+    }
+  );
+}
+var FALLBACK_HSV = { h: 217, s: 0.91, v: 0.96, a: 1 };
+var ColorPicker = forwardRef(function ColorPicker2({
+  value,
+  defaultValue = "#3b82f6",
+  onChange,
+  withAlpha = false,
+  presets,
+  triggerSize = "md",
+  disabled = false,
+  name,
+  className,
+  "aria-label": ariaLabel = "Pick a color"
+}, ref) {
+  const [hex, setHex] = useControlled({
+    controlled: value,
+    default: defaultValue ?? null,
+    onChange
+  });
+  const [hsv, setHsvState] = useState(() => parseColorToHsv(hex) ?? FALLBACK_HSV);
+  useEffect(() => {
+    if (!hex) return;
+    const parsed = parseColorToHsv(hex);
+    if (!parsed) return;
+    const currentHex = hsvToHex(hsv, { withAlpha });
+    if (currentHex.toLowerCase() !== hex.toLowerCase()) {
+      setHsvState({ ...parsed, a: hsv.a });
+    }
+  }, [hex, withAlpha]);
+  const updateHsv = (next) => {
+    setHsvState(next);
+    setHex(hsvToHex(next, { withAlpha }));
+  };
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": ariaLabel,
+        disabled,
+        className: cn(
+          "inline-flex items-center gap-2 rounded-md border border-border bg-background px-2 py-1 text-sm transition-colors hover:border-border-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(ColorSwatch, { color: hex ?? "#00000000", size: triggerSize }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono uppercase", children: hex ?? "\u2014" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "flex w-64 flex-col gap-3", children: [
+      /* @__PURE__ */ jsx(
+        ColorArea,
+        {
+          hue: hsv.h,
+          saturation: hsv.s,
+          value: hsv.v,
+          onChange: ({ saturation, value: value2 }) => updateHsv({ ...hsv, s: saturation, v: value2 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ColorSlider,
+        {
+          channel: "hue",
+          value: hsv.h,
+          onChange: (h) => updateHsv({ ...hsv, h }),
+          "aria-label": "Hue"
+        }
+      ),
+      withAlpha && /* @__PURE__ */ jsx(
+        ColorSlider,
+        {
+          channel: "alpha",
+          value: hsv.a ?? 1,
+          color: hsv,
+          onChange: (a) => updateHsv({ ...hsv, a }),
+          "aria-label": "Alpha"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ColorField,
+        {
+          value: hex,
+          onChange: (next) => setHex(next),
+          withAlpha
+        }
+      ),
+      presets && presets.length > 0 && /* @__PURE__ */ jsx(
+        ColorSwatchPicker,
+        {
+          colors: presets,
+          value: hex,
+          onChange: setHex,
+          swatchSize: "sm"
+        }
+      )
+    ] }),
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: hex ?? "" })
+  ] });
+});
+var StepperContext = createContext(null);
+function useStepperContext() {
+  const ctx = useContext(StepperContext);
+  if (!ctx) throw new Error("Stepper.* must be used inside <Stepper>");
+  return ctx;
+}
+var Stepper = forwardRef(function Stepper2({
+  value,
+  defaultValue,
+  onValueChange,
+  orientation = "horizontal",
+  className,
+  children,
+  ...rest
+}, ref) {
+  const [active, setActive] = useControlled({
+    controlled: value,
+    default: defaultValue ?? "",
+    onChange: onValueChange
+  });
+  const baseId = useId$1();
+  const stepsRef = useRef([]);
+  const registerStep = useCallback((v) => {
+    if (!stepsRef.current.includes(v)) stepsRef.current.push(v);
+  }, []);
+  const unregisterStep = useCallback((v) => {
+    stepsRef.current = stepsRef.current.filter((x) => x !== v);
+  }, []);
+  const ctx = useMemo(
+    () => ({
+      value: active,
+      setValue: setActive,
+      orientation,
+      baseId,
+      registerStep,
+      unregisterStep,
+      stepsRef
+    }),
+    [active, setActive, orientation, baseId, registerStep, unregisterStep]
+  );
+  return /* @__PURE__ */ jsx(StepperContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-orientation": orientation,
+      className: cn(
+        orientation === "vertical" ? "flex gap-4" : "flex flex-col gap-4",
+        className
+      ),
+      ...rest,
+      children
+    }
+  ) });
+});
+var StepperList = forwardRef(function StepperList2({ className, children, ...rest }, ref) {
+  const ctx = useStepperContext();
+  return /* @__PURE__ */ jsx(
+    RovingFocusGroup,
+    {
+      ref,
+      orientation: ctx.orientation,
+      role: "tablist",
+      "aria-orientation": ctx.orientation,
+      "data-orientation": ctx.orientation,
+      className: cn(
+        "flex",
+        ctx.orientation === "vertical" ? "flex-col gap-4" : "flex-row items-center gap-2",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+var StepperStep = forwardRef(function StepperStep2({ value, description, disabled = false, className, onClick, children, ...rest }, ref) {
+  const ctx = useStepperContext();
+  const roving = useRovingFocusItem();
+  useEffect(() => {
+    ctx.registerStep(value);
+    return () => ctx.unregisterStep(value);
+  }, [ctx, value]);
+  const ordered = ctx.stepsRef.current;
+  const idx = ordered.indexOf(value);
+  const activeIdx = ordered.indexOf(ctx.value);
+  const status = idx < activeIdx ? "complete" : idx === activeIdx ? "active" : "pending";
+  const stepId = `${ctx.baseId}-step-${value}`;
+  const panelId = `${ctx.baseId}-panel-${value}`;
+  const stepNumber = idx + 1;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: (node) => {
+          roving.ref(node);
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        id: stepId,
+        type: "button",
+        role: "tab",
+        "aria-selected": status === "active",
+        "aria-controls": panelId,
+        "aria-current": status === "active" ? "step" : void 0,
+        "data-status": status,
+        "data-disabled": dataAttr(disabled),
+        tabIndex: roving.tabIndex,
+        disabled,
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented || disabled) return;
+          ctx.setValue(value);
+        },
+        onFocus: roving.onFocus,
+        onKeyDown: roving.onKeyDown,
+        className: cn(
+          "group flex items-center gap-2 text-left text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm",
+          disabled && "pointer-events-none opacity-50",
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "grid h-7 w-7 shrink-0 place-items-center rounded-full border-2 text-xs font-semibold transition-colors",
+                status === "pending" && "border-border text-muted-foreground",
+                status === "active" && "border-primary bg-primary text-primary-foreground",
+                status === "complete" && "border-primary bg-primary text-primary-foreground"
+              ),
+              children: status === "complete" ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) : stepNumber
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "font-medium",
+                  status === "pending" ? "text-muted-foreground" : "text-foreground"
+                ),
+                children
+              }
+            ),
+            description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: description })
+          ] })
+        ]
+      }
+    ),
+    ctx.orientation === "horizontal" && idx < ordered.length - 1 && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "h-px flex-1 transition-colors",
+          status === "pending" ? "bg-border" : "bg-primary"
+        )
+      }
+    )
+  ] });
+});
+var StepperPanel = forwardRef(function StepperPanel2({ value, className, children, ...rest }, ref) {
+  const ctx = useStepperContext();
+  if (ctx.value !== value) return null;
+  const stepId = `${ctx.baseId}-step-${value}`;
+  const panelId = `${ctx.baseId}-panel-${value}`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      id: panelId,
+      role: "tabpanel",
+      "aria-labelledby": stepId,
+      tabIndex: 0,
+      className: cn("flex-1 outline-none", className),
+      ...rest,
+      children
+    }
+  );
+});
+Stepper.List = StepperList;
+Stepper.Step = StepperStep;
+Stepper.Panel = StepperPanel;
+
+export { Calendar, CharacterCount, Checkbox, CheckboxField, CheckboxGroup, ChoiceCard, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, 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, Stepper, StepperList, StepperPanel, StepperStep, Switch, SwitchField, TelInput, TextInput, Textarea, TimeField, TimePicker, UrlInput, colorSwatchVariants };
+//# sourceMappingURL=chunk-BQTO7XY6.js.map
+//# sourceMappingURL=chunk-BQTO7XY6.js.map