@wow-two-beta/ui 0.0.11 → 0.0.13

package/dist/{chunk-PFM3IQKM.js → chunk-A4N52LL6.js}

@@ -1,7 +1,8 @@
-import { useFormControl, FormControlProvider, Portal, AnchoredPositioner, DismissableLayer } from './chunk-YANOG5YR.js';
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-EU6JT5B4.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';
@@ -91,7 +92,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,7 +2030,7 @@ Combobox.Group = ComboboxGroup;
 Combobox.Separator = ComboboxSeparator;
 Combobox.Empty = ComboboxEmpty;
 
-// src/forms/_dateUtils.ts
+// src/forms/DateExtensions.ts
 var WEEKDAYS_SHORT = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 var MONTHS_LONG = [
   "January",
@@ -2584,7 +2585,6 @@ var DatePicker = forwardRef(function DatePicker2({
   state,
   className,
   disabled,
-  onClick,
   ...rest
 }, forwardedRef) {
   const [date, setDate] = useControlled({
@@ -2596,23 +2596,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 +2611,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 +2644,6 @@ var TimePicker = forwardRef(function TimePicker2({
   state,
   className,
   disabled,
-  onClick,
   ...rest
 }, forwardedRef) {
   const [time, setTime] = useControlled({
@@ -2680,7 +2655,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 +2677,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 +2691,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 +2778,6 @@ var DateRangePicker = forwardRef(
     state,
     className,
     disabled,
-    onClick,
     ...rest
   }, forwardedRef) {
     const [range, setRange] = useControlled({
@@ -2837,33 +2789,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 +2813,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 +2833,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-PFM3IQKM.js.map
-//# sourceMappingURL=chunk-PFM3IQKM.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-A4N52LL6.js.map
+//# sourceMappingURL=chunk-A4N52LL6.js.map