@szum-tech/design-system 3.12.3 → 3.14.0

package/dist/chunk-VL3TPVSB.js

@@ -0,0 +1,2299 @@
+import { Input } from './chunk-S3ZUFD6U.js';
+import { Spinner } from './chunk-P5IUC7HJ.js';
+import { useDirection, useComposedRefs as useComposedRefs$1 } from './chunk-VK2FJ65F.js';
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-IZU3KULT.js';
+import { Select, SelectContent, SelectItem } from './chunk-XKCLVPUC.js';
+import { useComposedRefs } from './chunk-4IGU5SVP.js';
+import { useLazyRef, useAsRef, useIsomorphicLayoutEffect } from './chunk-G24PWQKG.js';
+import { cn } from './chunk-ZD2QRAOX.js';
+import * as React16 from 'react';
+import { Slot as Slot$1 } from '@radix-ui/react-slot';
+import { Direction, Slot, Slider } from 'radix-ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { PipetteIcon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { Toaster as Toaster$1 } from 'sonner';
+export { toast } from 'sonner';
+
+function VisuallyHiddenInput(props) {
+  const { control, value, checked, bubbles = true, type = "hidden", style, ...inputProps } = props;
+  const isCheckInput = React16.useMemo(() => type === "checkbox" || type === "radio" || type === "switch", [type]);
+  const inputRef = React16.useRef(null);
+  const prevValueRef = React16.useRef({
+    value: isCheckInput ? checked : value,
+    previous: isCheckInput ? checked : value
+  });
+  const prevValue = React16.useMemo(() => {
+    const currentValue = isCheckInput ? checked : value;
+    if (prevValueRef.current.value !== currentValue) {
+      prevValueRef.current.previous = prevValueRef.current.value;
+      prevValueRef.current.value = currentValue;
+    }
+    return prevValueRef.current.previous;
+  }, [isCheckInput, value, checked]);
+  const [controlSize, setControlSize] = React16.useState({});
+  React16.useLayoutEffect(() => {
+    if (!control) {
+      setControlSize({});
+      return;
+    }
+    setControlSize({
+      width: control.offsetWidth,
+      height: control.offsetHeight
+    });
+    if (typeof window === "undefined") return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      if (!Array.isArray(entries) || !entries.length) return;
+      const entry = entries[0];
+      if (!entry) return;
+      let width;
+      let height;
+      if ("borderBoxSize" in entry) {
+        const borderSizeEntry = entry.borderBoxSize;
+        const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+        width = borderSize.inlineSize;
+        height = borderSize.blockSize;
+      } else {
+        width = control.offsetWidth;
+        height = control.offsetHeight;
+      }
+      setControlSize({ width, height });
+    });
+    resizeObserver.observe(control, { box: "border-box" });
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [control]);
+  React16.useEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    const inputProto = window.HTMLInputElement.prototype;
+    const propertyKey = isCheckInput ? "checked" : "value";
+    const eventType = isCheckInput ? "click" : "input";
+    const currentValue = isCheckInput ? checked : value;
+    const serializedCurrentValue = isCheckInput ? checked : typeof value === "object" && value !== null ? JSON.stringify(value) : value;
+    const descriptor = Object.getOwnPropertyDescriptor(inputProto, propertyKey);
+    const setter = descriptor?.set;
+    if (prevValue !== currentValue && setter) {
+      const event = new Event(eventType, { bubbles });
+      setter.call(input, serializedCurrentValue);
+      input.dispatchEvent(event);
+    }
+  }, [prevValue, value, checked, bubbles, isCheckInput]);
+  const composedStyle = React16.useMemo(() => {
+    return {
+      ...style,
+      ...controlSize.width !== void 0 && controlSize.height !== void 0 ? controlSize : {},
+      border: 0,
+      clip: "rect(0 0 0 0)",
+      clipPath: "inset(50%)",
+      height: "1px",
+      margin: "-1px",
+      overflow: "hidden",
+      padding: 0,
+      position: "absolute",
+      whiteSpace: "nowrap",
+      width: "1px"
+    };
+  }, [style, controlSize]);
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      ...inputProps,
+      ref: inputRef,
+      "aria-hidden": isCheckInput,
+      tabIndex: -1,
+      defaultChecked: isCheckInput ? checked : void 0,
+      style: composedStyle
+    }
+  );
+}
+
+// src/components/color-picker/color-picker.constants.ts
+var COLOR_PICKER_ROOT_NAME = "ColorPicker";
+var COLOR_PICKER_IMPL_NAME = "ColorPickerImpl";
+var COLOR_PICKER_TRIGGER_NAME = "ColorPickerTrigger";
+var COLOR_PICKER_CONTENT_NAME = "ColorPickerContent";
+var COLOR_PICKER_AREA_NAME = "ColorPickerArea";
+var COLOR_PICKER_HUE_SLIDER_NAME = "ColorPickerHueSlider";
+var COLOR_PICKER_ALPHA_SLIDER_NAME = "ColorPickerAlphaSlider";
+var COLOR_PICKER_SWATCH_NAME = "ColorPickerSwatch";
+var COLOR_PICKER_EYE_DROPPER_NAME = "ColorPickerEyeDropper";
+var COLOR_PICKER_FORMAT_SELECT_NAME = "ColorPickerFormatSelect";
+var COLOR_PICKER_INPUT_NAME = "ColorPickerInput";
+var COLOR_FORMATS = ["hex", "rgb", "hsl", "hsb"];
+var ColorPickerContext = React16.createContext(null);
+function useColorPickerContext(consumerName) {
+  const context = React16.useContext(ColorPickerContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${COLOR_PICKER_ROOT_NAME}\``);
+  }
+  return context;
+}
+
+// src/components/color-picker/color-picker.utils.ts
+function hexToRgb(hex, alpha) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: Number.parseInt(result[1] ?? "0", 16),
+    g: Number.parseInt(result[2] ?? "0", 16),
+    b: Number.parseInt(result[3] ?? "0", 16),
+    a: alpha ?? 1
+  } : { r: 0, g: 0, b: 0, a: alpha ?? 1 };
+}
+function rgbToHex(color) {
+  const toHex = (n) => {
+    const hex = Math.round(n).toString(16);
+    return hex.length === 1 ? `0${hex}` : hex;
+  };
+  return `#${toHex(color.r)}${toHex(color.g)}${toHex(color.b)}`;
+}
+function rgbToHsv(color) {
+  const r = color.r / 255;
+  const g = color.g / 255;
+  const b = color.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const diff = max - min;
+  let h = 0;
+  if (diff !== 0) {
+    switch (max) {
+      case r:
+        h = (g - b) / diff % 6;
+        break;
+      case g:
+        h = (b - r) / diff + 2;
+        break;
+      case b:
+        h = (r - g) / diff + 4;
+        break;
+    }
+  }
+  h = Math.round(h * 60);
+  if (h < 0) h += 360;
+  const s = max === 0 ? 0 : diff / max;
+  return {
+    h,
+    s: Math.round(s * 100),
+    v: Math.round(max * 100),
+    a: color.a
+  };
+}
+function hsvToRgb(hsv) {
+  const h = hsv.h / 360;
+  const s = hsv.s / 100;
+  const v = hsv.v / 100;
+  const i = Math.floor(h * 6);
+  const f = h * 6 - i;
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+  let r;
+  let g;
+  let b;
+  switch (i % 6) {
+    case 0: {
+      r = v;
+      g = t;
+      b = p;
+      break;
+    }
+    case 1: {
+      r = q;
+      g = v;
+      b = p;
+      break;
+    }
+    case 2: {
+      r = p;
+      g = v;
+      b = t;
+      break;
+    }
+    case 3: {
+      r = p;
+      g = q;
+      b = v;
+      break;
+    }
+    case 4: {
+      r = t;
+      g = p;
+      b = v;
+      break;
+    }
+    case 5: {
+      r = v;
+      g = p;
+      b = q;
+      break;
+    }
+    default: {
+      r = 0;
+      g = 0;
+      b = 0;
+    }
+  }
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255),
+    a: hsv.a
+  };
+}
+function rgbToHsl(color) {
+  const r = color.r / 255;
+  const g = color.g / 255;
+  const b = color.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const diff = max - min;
+  const sum = max + min;
+  const l = sum / 2;
+  let h = 0;
+  let s = 0;
+  if (diff !== 0) {
+    s = l > 0.5 ? diff / (2 - sum) : diff / sum;
+    if (max === r) {
+      h = (g - b) / diff + (g < b ? 6 : 0);
+    } else if (max === g) {
+      h = (b - r) / diff + 2;
+    } else if (max === b) {
+      h = (r - g) / diff + 4;
+    }
+    h /= 6;
+  }
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  };
+}
+function hslToRgb(hsl, alpha = 1) {
+  const h = hsl.h / 360;
+  const s = hsl.s / 100;
+  const l = hsl.l / 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(h * 6 % 2 - 1));
+  const m = l - c / 2;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (h >= 0 && h < 1 / 6) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (h >= 1 / 6 && h < 2 / 6) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (h >= 2 / 6 && h < 3 / 6) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (h >= 3 / 6 && h < 4 / 6) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (h >= 4 / 6 && h < 5 / 6) {
+    r = x;
+    g = 0;
+    b = c;
+  } else if (h >= 5 / 6 && h < 1) {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255),
+    a: alpha
+  };
+}
+function colorToString(color, format = "hex") {
+  switch (format) {
+    case "hex":
+      return rgbToHex(color);
+    case "rgb":
+      return color.a < 1 ? `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})` : `rgb(${color.r}, ${color.g}, ${color.b})`;
+    case "hsl": {
+      const hsl = rgbToHsl(color);
+      return color.a < 1 ? `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${color.a})` : `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
+    }
+    case "hsb": {
+      const hsv = rgbToHsv(color);
+      return color.a < 1 ? `hsba(${hsv.h}, ${hsv.s}%, ${hsv.v}%, ${color.a})` : `hsb(${hsv.h}, ${hsv.s}%, ${hsv.v}%)`;
+    }
+    default:
+      return rgbToHex(color);
+  }
+}
+function parseColorString(value) {
+  const trimmed = value.trim();
+  if (trimmed.startsWith("#")) {
+    const hexMatch = trimmed.match(/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6})$/);
+    if (hexMatch) return hexToRgb(trimmed);
+  }
+  const rgbMatch = trimmed.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/);
+  if (rgbMatch) {
+    return {
+      r: Number.parseInt(rgbMatch[1] ?? "0", 10),
+      g: Number.parseInt(rgbMatch[2] ?? "0", 10),
+      b: Number.parseInt(rgbMatch[3] ?? "0", 10),
+      a: rgbMatch[4] ? Number.parseFloat(rgbMatch[4]) : 1
+    };
+  }
+  const hslMatch = trimmed.match(/^hsla?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([\d.]+))?\s*\)$/);
+  if (hslMatch) {
+    const h = Number.parseInt(hslMatch[1] ?? "0", 10);
+    const s = Number.parseInt(hslMatch[2] ?? "0", 10) / 100;
+    const l = Number.parseInt(hslMatch[3] ?? "0", 10) / 100;
+    const a = hslMatch[4] ? Number.parseFloat(hslMatch[4]) : 1;
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+    const m = l - c / 2;
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    if (h >= 0 && h < 60) {
+      r = c;
+      g = x;
+    } else if (h >= 60 && h < 120) {
+      r = x;
+      g = c;
+    } else if (h >= 120 && h < 180) {
+      g = c;
+      b = x;
+    } else if (h >= 180 && h < 240) {
+      g = x;
+      b = c;
+    } else if (h >= 240 && h < 300) {
+      r = x;
+      b = c;
+    } else if (h >= 300 && h < 360) {
+      r = c;
+      b = x;
+    }
+    return {
+      r: Math.round((r + m) * 255),
+      g: Math.round((g + m) * 255),
+      b: Math.round((b + m) * 255),
+      a
+    };
+  }
+  const hsbMatch = trimmed.match(/^hsba?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([\d.]+))?\s*\)$/);
+  if (hsbMatch) {
+    const h = Number.parseInt(hsbMatch[1] ?? "0", 10);
+    const s = Number.parseInt(hsbMatch[2] ?? "0", 10);
+    const v = Number.parseInt(hsbMatch[3] ?? "0", 10);
+    const a = hsbMatch[4] ? Number.parseFloat(hsbMatch[4]) : 1;
+    return hsvToRgb({ h, s, v, a });
+  }
+  return null;
+}
+
+// src/components/color-picker/color-picker.store.tsx
+var ColorPickerStoreContext = React16.createContext(null);
+function useColorPickerStoreContext(consumerName) {
+  const context = React16.useContext(ColorPickerStoreContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`ColorPicker\``);
+  }
+  return context;
+}
+function useColorPickerStore(selector) {
+  const store = useColorPickerStoreContext("useColorPickerStore");
+  const getSnapshot = React16.useCallback(() => selector(store.getState()), [store, selector]);
+  return React16.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+function createColorPickerStore(listenersRef, stateRef, propsRef) {
+  const store = {
+    subscribe: (cb) => {
+      listenersRef.current.add(cb);
+      return () => listenersRef.current.delete(cb);
+    },
+    getState: () => stateRef.current,
+    setColor: (value) => {
+      if (Object.is(stateRef.current.color, value)) return;
+      const prevState = { ...stateRef.current };
+      stateRef.current.color = value;
+      if (propsRef.current.onValueChange) {
+        propsRef.current.onValueChange(colorToString(value, prevState.format));
+      }
+      store.notify();
+    },
+    setHsv: (value) => {
+      if (Object.is(stateRef.current.hsv, value)) return;
+      const prevState = { ...stateRef.current };
+      stateRef.current.hsv = value;
+      if (propsRef.current.onValueChange) {
+        propsRef.current.onValueChange(colorToString(hsvToRgb(value), prevState.format));
+      }
+      store.notify();
+    },
+    setOpen: (value) => {
+      if (Object.is(stateRef.current.open, value)) return;
+      stateRef.current.open = value;
+      propsRef.current.onOpenChange?.(value);
+      store.notify();
+    },
+    setFormat: (value) => {
+      if (Object.is(stateRef.current.format, value)) return;
+      stateRef.current.format = value;
+      propsRef.current.onFormatChange?.(value);
+      store.notify();
+    },
+    notify: () => {
+      for (const cb of listenersRef.current) cb();
+    }
+  };
+  return store;
+}
+function ColorPicker(props) {
+  const {
+    value: valueProp,
+    defaultValue = "#000000",
+    onValueChange,
+    format: formatProp,
+    defaultFormat = "hex",
+    onFormatChange,
+    defaultOpen,
+    open: openProp,
+    onOpenChange,
+    modal,
+    name,
+    disabled,
+    inline,
+    readOnly,
+    required,
+    ...rootProps
+  } = props;
+  const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
+  const stateRef = useLazyRef(() => {
+    const colorString = valueProp ?? defaultValue;
+    const color = hexToRgb(colorString);
+    return {
+      color,
+      hsv: rgbToHsv(color),
+      open: openProp ?? defaultOpen ?? false,
+      format: formatProp ?? defaultFormat
+    };
+  });
+  const propsRef = useAsRef({ onValueChange, onOpenChange, onFormatChange });
+  const store = React16.useMemo(
+    () => createColorPickerStore(listenersRef, stateRef, propsRef),
+    [listenersRef, stateRef, propsRef]
+  );
+  return /* @__PURE__ */ jsx(ColorPickerStoreContext.Provider, { value: store, children: /* @__PURE__ */ jsx(
+    ColorPickerImpl,
+    {
+      ...rootProps,
+      value: valueProp,
+      defaultOpen,
+      open: openProp,
+      modal,
+      name,
+      disabled,
+      inline,
+      readOnly,
+      required
+    }
+  ) });
+}
+function ColorPickerImpl(props) {
+  const {
+    value: valueProp,
+    dir: dirProp,
+    defaultOpen,
+    open: openProp,
+    modal,
+    name,
+    ref,
+    asChild,
+    disabled,
+    inline,
+    readOnly,
+    required,
+    ...rootProps
+  } = props;
+  const store = useColorPickerStoreContext(COLOR_PICKER_IMPL_NAME);
+  const dir = Direction.useDirection(dirProp);
+  const [formTrigger, setFormTrigger] = React16.useState(null);
+  const composedRef = useComposedRefs(ref, (node) => setFormTrigger(node));
+  const isFormControl = formTrigger ? !!formTrigger.closest("form") : true;
+  useIsomorphicLayoutEffect(() => {
+    if (valueProp !== void 0) {
+      const currentState = store.getState();
+      const color = hexToRgb(valueProp, currentState.color.a);
+      store.setColor(color);
+      store.setHsv(rgbToHsv(color));
+    }
+  }, [valueProp]);
+  useIsomorphicLayoutEffect(() => {
+    if (openProp !== void 0) {
+      store.setOpen(openProp);
+    }
+  }, [openProp]);
+  const contextValue = React16.useMemo(
+    () => ({ dir, disabled, inline, readOnly, required }),
+    [dir, disabled, inline, readOnly, required]
+  );
+  const value = useColorPickerStore((state) => rgbToHex(state.color));
+  const open = useColorPickerStore((state) => state.open);
+  const RootPrimitive = asChild ? Slot.Slot : "div";
+  if (inline) {
+    return /* @__PURE__ */ jsxs(ColorPickerContext.Provider, { value: contextValue, children: [
+      /* @__PURE__ */ jsx(RootPrimitive, { "data-slot": "color-picker", ...rootProps, ref: composedRef }),
+      isFormControl && /* @__PURE__ */ jsx(
+        VisuallyHiddenInput,
+        {
+          type: "hidden",
+          control: formTrigger,
+          name,
+          value,
+          disabled,
+          readOnly,
+          required
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(ColorPickerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(Popover, { defaultOpen, open, onOpenChange: store.setOpen, modal, children: [
+    /* @__PURE__ */ jsx(RootPrimitive, { "data-slot": "color-picker", ...rootProps, ref: composedRef }),
+    isFormControl && /* @__PURE__ */ jsx(
+      VisuallyHiddenInput,
+      {
+        type: "hidden",
+        control: formTrigger,
+        name,
+        value,
+        disabled,
+        readOnly,
+        required
+      }
+    )
+  ] }) });
+}
+function ColorPickerTrigger(props) {
+  const { asChild, disabled, ...triggerProps } = props;
+  const context = useColorPickerContext(COLOR_PICKER_TRIGGER_NAME);
+  const isDisabled = disabled || context.disabled;
+  const TriggerPrimitive = asChild ? Slot.Slot : Button;
+  return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled: isDisabled, children: /* @__PURE__ */ jsx(TriggerPrimitive, { "data-slot": "color-picker-trigger", ...triggerProps }) });
+}
+function ColorPickerContent(props) {
+  const { asChild, className, children, ...popoverContentProps } = props;
+  const context = useColorPickerContext(COLOR_PICKER_CONTENT_NAME);
+  if (context.inline) {
+    const ContentPrimitive = asChild ? Slot.Slot : "div";
+    return /* @__PURE__ */ jsx(
+      ContentPrimitive,
+      {
+        "data-slot": "color-picker-content",
+        ...popoverContentProps,
+        className: cn("flex w-[340px] flex-col gap-4 p-4", className),
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    PopoverContent,
+    {
+      "data-slot": "color-picker-content",
+      asChild,
+      ...popoverContentProps,
+      className: cn("flex w-[340px] flex-col gap-4 p-4", className),
+      children
+    }
+  );
+}
+function ColorPickerArea(props) {
+  const {
+    asChild,
+    onPointerDown: onPointerDownProp,
+    onPointerMove: onPointerMoveProp,
+    onPointerUp: onPointerUpProp,
+    className,
+    ref,
+    ...areaProps
+  } = props;
+  const propsRef = useAsRef({
+    onPointerDown: onPointerDownProp,
+    onPointerMove: onPointerMoveProp,
+    onPointerUp: onPointerUpProp
+  });
+  const context = useColorPickerContext(COLOR_PICKER_AREA_NAME);
+  const store = useColorPickerStoreContext(COLOR_PICKER_AREA_NAME);
+  const hsv = useColorPickerStore((state) => state.hsv);
+  const isDraggingRef = React16.useRef(false);
+  const areaRef = React16.useRef(null);
+  const composedRef = useComposedRefs(ref, areaRef);
+  const updateColorFromPosition = React16.useCallback(
+    (clientX, clientY) => {
+      if (!areaRef.current) return;
+      const rect = areaRef.current.getBoundingClientRect();
+      const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+      const y = Math.max(0, Math.min(1, 1 - (clientY - rect.top) / rect.height));
+      const newHsv = {
+        h: hsv?.h ?? 0,
+        s: Math.round(x * 100),
+        v: Math.round(y * 100),
+        a: hsv?.a ?? 1
+      };
+      store.setHsv(newHsv);
+      store.setColor(hsvToRgb(newHsv));
+    },
+    [hsv, store]
+  );
+  const onPointerDown = React16.useCallback(
+    (event) => {
+      if (context.disabled) return;
+      propsRef.current.onPointerDown?.(event);
+      if (event.defaultPrevented) return;
+      isDraggingRef.current = true;
+      areaRef.current?.setPointerCapture(event.pointerId);
+      updateColorFromPosition(event.clientX, event.clientY);
+    },
+    [context.disabled, updateColorFromPosition, propsRef]
+  );
+  const onPointerMove = React16.useCallback(
+    (event) => {
+      propsRef.current.onPointerMove?.(event);
+      if (event.defaultPrevented) return;
+      if (isDraggingRef.current) updateColorFromPosition(event.clientX, event.clientY);
+    },
+    [updateColorFromPosition, propsRef]
+  );
+  const onPointerUp = React16.useCallback(
+    (event) => {
+      propsRef.current.onPointerUp?.(event);
+      if (event.defaultPrevented) return;
+      isDraggingRef.current = false;
+      areaRef.current?.releasePointerCapture(event.pointerId);
+    },
+    [propsRef]
+  );
+  const hue = hsv?.h ?? 0;
+  const backgroundHue = hsvToRgb({ h: hue, s: 100, v: 100, a: 1 });
+  const AreaPrimitive = asChild ? Slot.Slot : "div";
+  return /* @__PURE__ */ jsxs(
+    AreaPrimitive,
+    {
+      "data-slot": "color-picker-area",
+      ...areaProps,
+      className: cn(
+        "relative h-40 w-full cursor-crosshair touch-none rounded-sm border",
+        context.disabled && "pointer-events-none opacity-50",
+        className
+      ),
+      ref: composedRef,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 overflow-hidden rounded-sm", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0",
+              style: { backgroundColor: `rgb(${backgroundHue.r}, ${backgroundHue.g}, ${backgroundHue.b})` }
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: { background: "linear-gradient(to right, #fff, transparent)" } }),
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: { background: "linear-gradient(to bottom, transparent, #000)" } })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-sm",
+            style: { left: `${hsv?.s ?? 0}%`, top: `${100 - (hsv?.v ?? 0)}%` }
+          }
+        )
+      ]
+    }
+  );
+}
+function ColorPickerHueSlider(props) {
+  const { className, ...sliderProps } = props;
+  const context = useColorPickerContext(COLOR_PICKER_HUE_SLIDER_NAME);
+  const store = useColorPickerStoreContext(COLOR_PICKER_HUE_SLIDER_NAME);
+  const hsv = useColorPickerStore((state) => state.hsv);
+  const onValueChange = React16.useCallback(
+    (values) => {
+      const newHsv = { h: values[0] ?? 0, s: hsv?.s ?? 0, v: hsv?.v ?? 0, a: hsv?.a ?? 1 };
+      store.setHsv(newHsv);
+      store.setColor(hsvToRgb(newHsv));
+    },
+    [hsv, store]
+  );
+  return /* @__PURE__ */ jsxs(
+    Slider.Root,
+    {
+      "data-slot": "color-picker-hue-slider",
+      ...sliderProps,
+      max: 360,
+      step: 1,
+      className: cn("relative flex w-full touch-none items-center select-none", className),
+      value: [hsv?.h ?? 0],
+      onValueChange,
+      disabled: context.disabled,
+      children: [
+        /* @__PURE__ */ jsx(Slider.Track, { className: "relative h-3 w-full grow overflow-hidden rounded-full bg-[linear-gradient(to_right,#ff0000_0%,#ffff00_16.66%,#00ff00_33.33%,#00ffff_50%,#0000ff_66.66%,#ff00ff_83.33%,#ff0000_100%)]", children: /* @__PURE__ */ jsx(Slider.Range, { className: "absolute h-full" }) }),
+        /* @__PURE__ */ jsx(Slider.Thumb, { className: "border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" })
+      ]
+    }
+  );
+}
+function ColorPickerAlphaSlider(props) {
+  const { className, ...sliderProps } = props;
+  const context = useColorPickerContext(COLOR_PICKER_ALPHA_SLIDER_NAME);
+  const store = useColorPickerStoreContext(COLOR_PICKER_ALPHA_SLIDER_NAME);
+  const color = useColorPickerStore((state) => state.color);
+  const hsv = useColorPickerStore((state) => state.hsv);
+  const onValueChange = React16.useCallback(
+    (values) => {
+      const alpha = (values[0] ?? 0) / 100;
+      store.setColor({ ...color, a: alpha });
+      store.setHsv({ ...hsv, a: alpha });
+    },
+    [color, hsv, store]
+  );
+  const gradientColor = `rgb(${color?.r ?? 0}, ${color?.g ?? 0}, ${color?.b ?? 0})`;
+  return /* @__PURE__ */ jsxs(
+    Slider.Root,
+    {
+      "data-slot": "color-picker-alpha-slider",
+      ...sliderProps,
+      max: 100,
+      step: 1,
+      disabled: context.disabled,
+      className: cn("relative flex w-full touch-none items-center select-none", className),
+      value: [Math.round((color?.a ?? 1) * 100)],
+      onValueChange,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Slider.Track,
+          {
+            className: "relative h-3 w-full grow overflow-hidden rounded-full",
+            style: {
+              background: "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
+              backgroundSize: "8px 8px",
+              backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0 rounded-full",
+                  style: { background: `linear-gradient(to right, transparent, ${gradientColor})` }
+                }
+              ),
+              /* @__PURE__ */ jsx(Slider.Range, { className: "absolute h-full" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Slider.Thumb, { className: "border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" })
+      ]
+    }
+  );
+}
+function ColorPickerSwatch(props) {
+  const { asChild, className, ...swatchProps } = props;
+  const context = useColorPickerContext(COLOR_PICKER_SWATCH_NAME);
+  const color = useColorPickerStore((state) => state.color);
+  const format = useColorPickerStore((state) => state.format);
+  const backgroundStyle = React16.useMemo(() => {
+    if (!color) {
+      return {
+        background: "linear-gradient(to bottom right, transparent calc(50% - 1px), hsl(var(--destructive)) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) no-repeat"
+      };
+    }
+    const colorString = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;
+    if (color.a < 1) {
+      return {
+        background: `linear-gradient(${colorString}, ${colorString}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0% 50% / 8px 8px`
+      };
+    }
+    return { backgroundColor: colorString };
+  }, [color]);
+  const ariaLabel = !color ? "No color selected" : `Current color: ${colorToString(color, format)}`;
+  const SwatchPrimitive = asChild ? Slot.Slot : "div";
+  return /* @__PURE__ */ jsx(
+    SwatchPrimitive,
+    {
+      role: "img",
+      "aria-label": ariaLabel,
+      "data-slot": "color-picker-swatch",
+      ...swatchProps,
+      className: cn("box-border size-8 rounded-sm border shadow-sm", context.disabled && "opacity-50", className),
+      style: { ...backgroundStyle, forcedColorAdjust: "none" }
+    }
+  );
+}
+function ColorPickerEyeDropper(props) {
+  const { size: sizeProp, children, disabled, ...buttonProps } = props;
+  const context = useColorPickerContext(COLOR_PICKER_EYE_DROPPER_NAME);
+  const store = useColorPickerStoreContext(COLOR_PICKER_EYE_DROPPER_NAME);
+  const color = useColorPickerStore((state) => state.color);
+  const isDisabled = disabled || context.disabled;
+  const onEyeDropper = React16.useCallback(async () => {
+    if (!window.EyeDropper) return;
+    try {
+      const eyeDropper = new window.EyeDropper();
+      const result = await eyeDropper.open();
+      if (result.sRGBHex) {
+        const newColor = hexToRgb(result.sRGBHex, color?.a ?? 1);
+        store.setColor(newColor);
+        store.setHsv(rgbToHsv(newColor));
+      }
+    } catch (error) {
+      console.warn("EyeDropper error:", error);
+    }
+  }, [color, store]);
+  const hasEyeDropper = typeof window !== "undefined" && !!window.EyeDropper;
+  if (!hasEyeDropper) return null;
+  const size = sizeProp ?? (children ? "default" : "icon");
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "data-slot": "color-picker-eye-dropper",
+      ...buttonProps,
+      variant: "outline",
+      size,
+      onClick: onEyeDropper,
+      disabled: isDisabled,
+      children: children ?? /* @__PURE__ */ jsx(PipetteIcon, {})
+    }
+  );
+}
+function ColorPickerFormatSelect(props) {
+  const { size, disabled, className, ...selectProps } = props;
+  const context = useColorPickerContext(COLOR_PICKER_FORMAT_SELECT_NAME);
+  const store = useColorPickerStoreContext(COLOR_PICKER_FORMAT_SELECT_NAME);
+  const isDisabled = disabled || context.disabled;
+  const format = useColorPickerStore((state) => state.format);
+  const onFormatChange = React16.useCallback(
+    (value) => {
+      store.setFormat(value);
+    },
+    [store]
+  );
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      "data-slot": "color-picker-format-select",
+      ...selectProps,
+      value: format,
+      onValueChange: onFormatChange,
+      disabled: isDisabled,
+      size: size ?? "sm",
+      className: cn(className),
+      children: /* @__PURE__ */ jsx(SelectContent, { children: COLOR_FORMATS.map((f) => /* @__PURE__ */ jsx(SelectItem, { value: f, children: f.toUpperCase() }, f)) })
+    }
+  );
+}
+var inputGroupItemVariants = cva(
+  "h-8 [-moz-appearance:textfield] focus-visible:z-10 focus-visible:ring-1 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none",
+  {
+    variants: {
+      position: {
+        first: "rounded-e-none",
+        middle: "-ms-px rounded-none border-l-0",
+        last: "-ms-px rounded-s-none border-l-0",
+        isolated: ""
+      }
+    },
+    defaultVariants: {
+      position: "isolated"
+    }
+  }
+);
+function ColorPickerInput(props) {
+  const store = useColorPickerStoreContext(COLOR_PICKER_INPUT_NAME);
+  const context = useColorPickerContext(COLOR_PICKER_INPUT_NAME);
+  const color = useColorPickerStore((state) => state.color);
+  const format = useColorPickerStore((state) => state.format);
+  const hsv = useColorPickerStore((state) => state.hsv);
+  const onColorChange = React16.useCallback(
+    (newColor) => {
+      const newHsv = rgbToHsv(newColor);
+      store.setColor(newColor);
+      store.setHsv(newHsv);
+    },
+    [store]
+  );
+  if (format === "hex") {
+    return /* @__PURE__ */ jsx(HexInput, { color, onColorChange, context, ...props });
+  }
+  if (format === "rgb") {
+    return /* @__PURE__ */ jsx(RgbInput, { color, onColorChange, context, ...props });
+  }
+  if (format === "hsl") {
+    return /* @__PURE__ */ jsx(HslInput, { color, onColorChange, context, ...props });
+  }
+  if (format === "hsb") {
+    return /* @__PURE__ */ jsx(HsbInput, { hsv, onColorChange, context, ...props });
+  }
+}
+function InputGroupItem({ className, position, ...props }) {
+  return /* @__PURE__ */ jsx(Input, { "data-slot": "color-picker-input", className: cn(inputGroupItemVariants({ position, className })), ...props });
+}
+function HexInput(props) {
+  const { color, onColorChange, context, withoutAlpha, className, ...inputProps } = props;
+  const hexValue = rgbToHex(color);
+  const alphaValue = Math.round((color?.a ?? 1) * 100);
+  const onHexChange = React16.useCallback(
+    (event) => {
+      const value = event.target.value;
+      const parsedColor = parseColorString(value);
+      if (parsedColor) {
+        onColorChange({ ...parsedColor, a: color?.a ?? 1 });
+      }
+    },
+    [color, onColorChange]
+  );
+  const onAlphaChange = React16.useCallback(
+    (event) => {
+      const value = Number.parseInt(event.target.value, 10);
+      if (!Number.isNaN(value) && value >= 0 && value <= 100) {
+        onColorChange({ ...color, a: value / 100 });
+      }
+    },
+    [color, onColorChange]
+  );
+  if (withoutAlpha) {
+    return /* @__PURE__ */ jsx(
+      InputGroupItem,
+      {
+        "aria-label": "Hex color value",
+        position: "isolated",
+        ...inputProps,
+        placeholder: "#000000",
+        className: cn("font-code", className),
+        value: hexValue,
+        onChange: onHexChange,
+        disabled: context.disabled
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "color-picker-input-wrapper", className: cn("flex flex-1 items-center", className), children: [
+    /* @__PURE__ */ jsx(
+      InputGroupItem,
+      {
+        "aria-label": "Hex color value",
+        position: "first",
+        ...inputProps,
+        placeholder: "#000000",
+        className: "font-code flex-1",
+        value: hexValue,
+        onChange: onHexChange,
+        disabled: context.disabled
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InputGroupItem,
+      {
+        "aria-label": "Alpha transparency percentage",
+        position: "last",
+        ...inputProps,
+        placeholder: "100",
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        min: "0",
+        max: "100",
+        className: "w-14",
+        value: alphaValue,
+        onChange: onAlphaChange,
+        disabled: context.disabled
+      }
+    )
+  ] });
+}
+function RgbInput(props) {
+  const { color, onColorChange, context, withoutAlpha, className, ...inputProps } = props;
+  const rValue = Math.round(color?.r ?? 0);
+  const gValue = Math.round(color?.g ?? 0);
+  const bValue = Math.round(color?.b ?? 0);
+  const alphaValue = Math.round((color?.a ?? 1) * 100);
+  const onChannelChange = React16.useCallback(
+    (channel, max, isAlpha = false) => (event) => {
+      const value = Number.parseInt(event.target.value, 10);
+      if (!Number.isNaN(value) && value >= 0 && value <= max) {
+        const newValue = isAlpha ? value / 100 : value;
+        onColorChange({ ...color, [channel]: newValue });
+      }
+    },
+    [color, onColorChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "color-picker-input-wrapper", className: cn("flex flex-1 items-center", className), children: [
+    /* @__PURE__ */ jsx(
+      InputGroupItem,
+      {
+        "aria-label": "Red color component (0-255)",
+        position: "first",
+        ...inputProps,
+        placeholder: "0",
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        min: "0",
+        max: "255",
+        className: "w-14",
+        value: rValue,
+        onChange: onChannelChange("r", 255),
+        disabled: context.disabled
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InputGroupItem,
+      {
+        "aria-label": "Green color component (0-255)",
+        position: "middle",
+        ...inputProps,
+        placeholder: "0",
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        min: "0",
+        max: "255",
+        className: "w-14",
+        value: gValue,
+        onChange: onChannelChange("g", 255),
+        disabled: context.disabled
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InputGroupItem,
+      {
+        "aria-label": "Blue color component (0-255)",
+        position: withoutAlpha ? "last" : "middle",
+        ...inputProps,
+        placeholder: "0",
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        min: "0",
+        max: "255",
+        className: "w-14",
+        value: bValue,
+        onChange: onChannelChange("b", 255),
+        disabled: context.disabled
+      }
+    ),
+    !withoutAlpha && /* @__PURE__ */ jsx(
+      InputGroupItem,
+      {
+        "aria-label": "Alpha transparency percentage",
+        position: "last",
+        ...inputProps,
+        placeholder: "100",
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        min: "0",
+        max: "100",
+        className: "w-14",
+        value: alphaValue,
+        onChange: onChannelChange("a", 100, true),
+        disabled: context.disabled
+      }
+    )
+  ] });
+}
+function HslInput(props) {
+  const { color, onColorChange, context, withoutAlpha, className, ...inputProps } = props;
+  const hsl = React16.useMemo(() => rgbToHsl(color), [color]);
+  const alphaValue = Math.round((color?.a ?? 1) * 100);
+  const onHslChannelChange = React16.useCallback(
+    (channel, max) => (event) => {
+      const value = Number.parseInt(event.target.value, 10);
+      if (!Number.isNaN(value) && value >= 0 && value <= max) {
+        const newHsl = { ...hsl, [channel]: value };
+        const newColor = hslToRgb(newHsl, color?.a ?? 1);
+        onColorChange(newColor);
+      }
+    },
+    [hsl, color, onColorChange]
+  );
+  const onAlphaChange = React16.useCallback(
+    (event) => {
+      const value = Number.parseInt(event.target.value, 10);
+      if (!Number.isNaN(value) && value >= 0 && value <= 100) {
+        onColorChange({ ...color, a: value / 100 });
+      }
+    },
+    [color, onColorChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "color-picker-input-wrapper", className: cn("flex items-center", className), children: [
+    /* @__PURE__ */ jsx(
+      InputGroupItem,
+      {
+        "aria-label": "Hue degree (0-360)",
+        position: "first",
+        ...inputProps,
+        placeholder: "0",
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        min: "0",
+        max: "360",
+        className: "w-14",
+        value: hsl.h,
+        onChange: onHslChannelChange("h", 360),
+        disabled: context.disabled
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InputGroupItem,
+      {
+        "aria-label": "Saturation percentage (0-100)",
+        position: "middle",
+        ...inputProps,
+        placeholder: "0",
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        min: "0",
+        max: "100",
+        className: "w-14",
+        value: hsl.s,
+        onChange: onHslChannelChange("s", 100),
+        disabled: context.disabled
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InputGroupItem,
+      {
+        "aria-label": "Lightness percentage (0-100)",
+        position: withoutAlpha ? "last" : "middle",
+        ...inputProps,
+        placeholder: "0",
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        min: "0",
+        max: "100",
+        className: "w-14",
+        value: hsl.l,
+        onChange: onHslChannelChange("l", 100),
+        disabled: context.disabled
+      }
+    ),
+    !withoutAlpha && /* @__PURE__ */ jsx(
+      InputGroupItem,
+      {
+        "aria-label": "Alpha transparency percentage",
+        position: "last",
+        ...inputProps,
+        placeholder: "100",
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        min: "0",
+        max: "100",
+        className: "w-14",
+        value: alphaValue,
+        onChange: onAlphaChange,
+        disabled: context.disabled
+      }
+    )
+  ] });
+}
+function HsbInput(props) {
+  const { hsv, onColorChange, context, withoutAlpha, className, ...inputProps } = props;
+  const alphaValue = Math.round((hsv?.a ?? 1) * 100);
+  const onHsvChannelChange = React16.useCallback(
+    (channel, max) => (event) => {
+      const value = Number.parseInt(event.target.value, 10);
+      if (!Number.isNaN(value) && value >= 0 && value <= max) {
+        const newHsv = { ...hsv, [channel]: value };
+        const newColor = hsvToRgb(newHsv);
+        onColorChange(newColor);
+      }
+    },
+    [hsv, onColorChange]
+  );
+  const onAlphaChange = React16.useCallback(
+    (event) => {
+      const value = Number.parseInt(event.target.value, 10);
+      if (!Number.isNaN(value) && value >= 0 && value <= 100) {
+        const currentColor = hsvToRgb(hsv);
+        onColorChange({ ...currentColor, a: value / 100 });
+      }
+    },
+    [hsv, onColorChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "color-picker-input-wrapper", className: cn("flex items-center", className), children: [
+    /* @__PURE__ */ jsx(
+      InputGroupItem,
+      {
+        "aria-label": "Hue degree (0-360)",
+        position: "first",
+        ...inputProps,
+        placeholder: "0",
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        min: "0",
+        max: "360",
+        className: "w-14",
+        value: hsv?.h ?? 0,
+        onChange: onHsvChannelChange("h", 360),
+        disabled: context.disabled
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InputGroupItem,
+      {
+        "aria-label": "Saturation percentage (0-100)",
+        position: "middle",
+        ...inputProps,
+        placeholder: "0",
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        min: "0",
+        max: "100",
+        className: "w-14",
+        value: hsv?.s ?? 0,
+        onChange: onHsvChannelChange("s", 100),
+        disabled: context.disabled
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InputGroupItem,
+      {
+        "aria-label": "Brightness percentage (0-100)",
+        position: withoutAlpha ? "last" : "middle",
+        ...inputProps,
+        placeholder: "0",
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        min: "0",
+        max: "100",
+        className: "w-14",
+        value: hsv?.v ?? 0,
+        onChange: onHsvChannelChange("v", 100),
+        disabled: context.disabled
+      }
+    ),
+    !withoutAlpha && /* @__PURE__ */ jsx(
+      InputGroupItem,
+      {
+        "aria-label": "Alpha transparency percentage",
+        position: "last",
+        ...inputProps,
+        placeholder: "100",
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        min: "0",
+        max: "100",
+        className: "w-14",
+        value: alphaValue,
+        onChange: onAlphaChange,
+        disabled: context.disabled
+      }
+    )
+  ] });
+}
+
+// src/components/stepper/stepper.constants.ts
+var STEPPER_ROOT_NAME = "Stepper";
+var STEPPER_NAV_NAME = "StepperNav";
+var STEPPER_ITEM_NAME = "StepperItem";
+var STEPPER_TRIGGER_NAME = "StepperTrigger";
+var STEPPER_INDICATOR_NAME = "StepperIndicator";
+var STEPPER_TITLE_NAME = "StepperTitle";
+var STEPPER_DESCRIPTION_NAME = "StepperDescription";
+var STEPPER_CONTENT_NAME = "StepperContent";
+var STEPPER_PREV_TRIGGER_NAME = "StepperPrevTrigger";
+var STEPPER_NEXT_TRIGGER_NAME = "StepperNextTrigger";
+var STEPPER_ENTRY_FOCUS = "stepperFocusGroup.onEntryFocus";
+var STEPPER_EVENT_OPTIONS = { bubbles: false, cancelable: true };
+var STEPPER_ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
+var STEPPER_MAP_KEY_TO_FOCUS_INTENT = {
+  ArrowLeft: "prev",
+  ArrowUp: "prev",
+  ArrowRight: "next",
+  ArrowDown: "next",
+  PageUp: "first",
+  Home: "first",
+  PageDown: "last",
+  End: "last"
+};
+
+// src/components/stepper/stepper.context.tsx
+var StepperContext = React16.createContext(null);
+function useStepperContext(consumerName) {
+  const context = React16.useContext(StepperContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${STEPPER_ROOT_NAME}\``);
+  }
+  return context;
+}
+function createStepperStore(listenersRef, stateRef, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate) {
+  const store = {
+    subscribe: (cb) => {
+      if (listenersRef.current) {
+        listenersRef.current.add(cb);
+        return () => listenersRef.current?.delete(cb);
+      }
+      return () => {
+      };
+    },
+    getState: () => stateRef.current ?? {
+      steps: /* @__PURE__ */ new Map(),
+      value: void 0
+    },
+    setState: (key, value) => {
+      const state = stateRef.current;
+      if (!state || Object.is(state[key], value)) return;
+      if (key === "value" && typeof value === "string") {
+        state.value = value;
+        onValueChange?.(value);
+      } else {
+        state[key] = value;
+      }
+      store.notify();
+    },
+    setStateWithValidation: async (value, direction) => {
+      if (!onValidate) {
+        store.setState("value", value);
+        return true;
+      }
+      try {
+        const isValid = await onValidate(value, direction);
+        if (isValid) {
+          store.setState("value", value);
+        }
+        return isValid;
+      } catch {
+        return false;
+      }
+    },
+    hasValidation: () => !!onValidate,
+    addStep: (newStep) => {
+      const state = stateRef.current;
+      if (state) {
+        state.steps = new Map(state.steps);
+        state.steps.set(newStep.value, newStep);
+        onValueAdd?.(newStep.value);
+        store.notify();
+      }
+    },
+    removeStep: (value) => {
+      const state = stateRef.current;
+      if (state) {
+        state.steps = new Map(state.steps);
+        state.steps.delete(value);
+        onValueRemove?.(value);
+        store.notify();
+      }
+    },
+    setStep: ({ value, disabled, loading, completed }) => {
+      const state = stateRef.current;
+      if (state) {
+        const step = state.steps.get(value);
+        if (step) {
+          const updatedStep = { ...step, completed, disabled, loading };
+          state.steps = new Map(state.steps);
+          state.steps.set(value, updatedStep);
+          if (completed !== step.completed) {
+            onValueComplete?.(value, completed);
+          }
+          store.notify();
+        }
+      }
+    },
+    notify: () => {
+      if (listenersRef.current) {
+        for (const cb of listenersRef.current) {
+          cb();
+        }
+      }
+    }
+  };
+  return store;
+}
+var StepperStoreContext = React16.createContext(null);
+function useStepperStoreContext(consumerName) {
+  const context = React16.useContext(StepperStoreContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${STEPPER_ROOT_NAME}\``);
+  }
+  return context;
+}
+function useStepperStore(selector) {
+  const store = useStepperStoreContext("useStore");
+  const getSnapshot = React16.useCallback(() => selector(store.getState()), [selector, store]);
+  return React16.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+function Stepper({
+  value,
+  defaultValue,
+  onValueChange,
+  onValueComplete,
+  onValueAdd,
+  onValueRemove,
+  onValidate,
+  id: idProp,
+  dir: dirProp,
+  orientation = "horizontal",
+  activationMode = "automatic",
+  asChild,
+  disabled = false,
+  nonInteractive = false,
+  loop = false,
+  className,
+  indicators = {},
+  ...rootProps
+}) {
+  const id = React16.useId();
+  const rootId = idProp ?? id;
+  const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
+  const stateRef = useLazyRef(() => ({
+    steps: /* @__PURE__ */ new Map(),
+    value: value ?? defaultValue
+  }));
+  const store = React16.useMemo(
+    () => createStepperStore(listenersRef, stateRef, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate),
+    [listenersRef, stateRef, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate]
+  );
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0) {
+      store.setState("value", value);
+    }
+  }, [value]);
+  const dir = useDirection(dirProp);
+  const contextValue = React16.useMemo(
+    () => ({
+      id: rootId,
+      dir,
+      orientation,
+      activationMode,
+      disabled,
+      nonInteractive,
+      loop,
+      indicators
+    }),
+    [rootId, dir, orientation, activationMode, disabled, nonInteractive, loop, indicators]
+  );
+  const RootPrimitive = asChild ? Slot$1 : "div";
+  return /* @__PURE__ */ jsx(StepperStoreContext.Provider, { value: store, children: /* @__PURE__ */ jsx(StepperContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    RootPrimitive,
+    {
+      id: rootId,
+      "data-disabled": disabled ? "" : void 0,
+      "data-orientation": orientation,
+      "data-slot": "stepper",
+      dir,
+      ...rootProps,
+      className: cn("flex w-full flex-col gap-4 data-[orientation=vertical]:flex-row", className)
+    }
+  ) }) });
+}
+
+// src/components/stepper/stepper.types.ts
+var StepperFocusIntent = {
+  FIRST: "first",
+  LAST: "last",
+  PREV: "prev",
+  NEXT: "next"
+};
+var StepperOrientation = {
+  HORIZONTAL: "horizontal",
+  VERTICAL: "vertical"
+};
+var StepperNavigationDirection = {
+  NEXT: "next",
+  PREV: "prev"
+};
+var StepperActivationMode = {
+  AUTOMATIC: "automatic",
+  MANUAL: "manual"
+};
+var StepperDataState = {
+  INACTIVE: "inactive",
+  ACTIVE: "active",
+  COMPLETED: "completed"
+};
+var StepperFocusContext = React16.createContext(null);
+function useStepperFocusContext(consumerName) {
+  const context = React16.useContext(StepperFocusContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`FocusProvider\``);
+  }
+  return context;
+}
+
+// src/components/stepper/stepper.utils.tsx
+function focusFirst(candidates, preventScroll = false) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+  for (const candidateRef of candidates) {
+    const candidate = candidateRef.current;
+    if (!candidate) continue;
+    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+    candidate.focus({ preventScroll });
+    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+  }
+}
+function getDataState(value, itemValue, stepState, steps, variant = "item") {
+  const stepKeys = Array.from(steps.keys());
+  const currentIndex = stepKeys.indexOf(itemValue);
+  if (stepState?.completed) {
+    return StepperDataState.COMPLETED;
+  }
+  if (value === itemValue) {
+    return variant === "separator" ? StepperDataState.INACTIVE : StepperDataState.ACTIVE;
+  }
+  if (value) {
+    const activeIndex = stepKeys.indexOf(value);
+    if (activeIndex > currentIndex) {
+      return StepperDataState.COMPLETED;
+    }
+  }
+  return StepperDataState.INACTIVE;
+}
+function getId(id, variant, value) {
+  return `${id}-${variant}-${value}`;
+}
+function wrapArray(array, startIndex) {
+  return array.map((_, index) => array[(startIndex + index) % array.length]);
+}
+function getDirectionAwareKey(key, dir) {
+  if (dir !== "rtl") return key;
+  return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
+}
+function getFocusIntent(event, dir, orientation) {
+  const key = getDirectionAwareKey(event.key, dir);
+  if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
+  if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
+  return STEPPER_MAP_KEY_TO_FOCUS_INTENT[key];
+}
+function StepperNav({ className, children, asChild, ref, ...listProps }) {
+  const context = useStepperContext(STEPPER_NAV_NAME);
+  const orientation = context.orientation;
+  const currentValue = useStepperStore((state) => state.value);
+  const [tabStopId, setTabStopId] = React16.useState(null);
+  const [isTabbingBackOut, setIsTabbingBackOut] = React16.useState(false);
+  const [focusableItemCount, setFocusableItemCount] = React16.useState(0);
+  const isClickFocusRef = React16.useRef(false);
+  const itemsRef = React16.useRef(/* @__PURE__ */ new Map());
+  const listRef = React16.useRef(null);
+  const composedRef = useComposedRefs$1(ref, listRef);
+  const onItemFocus = React16.useCallback((tabStopId2) => {
+    setTabStopId(tabStopId2);
+  }, []);
+  const onItemShiftTab = React16.useCallback(() => {
+    setIsTabbingBackOut(true);
+  }, []);
+  const onFocusableItemAdd = React16.useCallback(() => {
+    setFocusableItemCount((prevCount) => prevCount + 1);
+  }, []);
+  const onFocusableItemRemove = React16.useCallback(() => {
+    setFocusableItemCount((prevCount) => prevCount - 1);
+  }, []);
+  const onItemRegister = React16.useCallback((item) => {
+    itemsRef.current.set(item.id, item);
+  }, []);
+  const onItemUnregister = React16.useCallback((id) => {
+    itemsRef.current.delete(id);
+  }, []);
+  const getItems = React16.useCallback(() => {
+    return Array.from(itemsRef.current.values()).filter((item) => item.ref.current).sort((a, b) => {
+      const elementA = a.ref.current;
+      const elementB = b.ref.current;
+      if (!elementA || !elementB) return 0;
+      const position = elementA.compareDocumentPosition(elementB);
+      if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+        return -1;
+      }
+      if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+        return 1;
+      }
+      return 0;
+    });
+  }, []);
+  const onBlur = React16.useCallback(
+    (event) => {
+      listProps.onBlur?.(event);
+      if (event.defaultPrevented) return;
+      setIsTabbingBackOut(false);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [listProps.onBlur]
+  );
+  const onFocus = React16.useCallback(
+    (event) => {
+      listProps.onFocus?.(event);
+      if (event.defaultPrevented) return;
+      const isKeyboardFocus = !isClickFocusRef.current;
+      if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
+        const entryFocusEvent = new CustomEvent(STEPPER_ENTRY_FOCUS, STEPPER_EVENT_OPTIONS);
+        event.currentTarget.dispatchEvent(entryFocusEvent);
+        if (!entryFocusEvent.defaultPrevented) {
+          const items = Array.from(itemsRef.current.values()).filter((item) => !item.disabled);
+          const selectedItem = currentValue ? items.find((item) => item.value === currentValue) : void 0;
+          const activeItem = items.find((item) => item.active);
+          const currentItem = items.find((item) => item.id === tabStopId);
+          const candidateItems = [selectedItem, activeItem, currentItem, ...items].filter(
+            Boolean
+          );
+          const candidateRefs = candidateItems.map((item) => item.ref);
+          focusFirst(candidateRefs, false);
+        }
+      }
+      isClickFocusRef.current = false;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [listProps.onFocus, isTabbingBackOut, currentValue, tabStopId]
+  );
+  const onMouseDown = React16.useCallback(
+    (event) => {
+      listProps.onMouseDown?.(event);
+      if (event.defaultPrevented) return;
+      isClickFocusRef.current = true;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [listProps.onMouseDown]
+  );
+  const focusContextValue = React16.useMemo(
+    () => ({
+      tabStopId,
+      onItemFocus,
+      onItemShiftTab,
+      onFocusableItemAdd,
+      onFocusableItemRemove,
+      onItemRegister,
+      onItemUnregister,
+      getItems
+    }),
+    [
+      tabStopId,
+      onItemFocus,
+      onItemShiftTab,
+      onFocusableItemAdd,
+      onFocusableItemRemove,
+      onItemRegister,
+      onItemUnregister,
+      getItems
+    ]
+  );
+  const StepperNavPrimitive = asChild ? Slot$1 : "nav";
+  return /* @__PURE__ */ jsx(StepperFocusContext.Provider, { value: focusContextValue, children: /* @__PURE__ */ jsx(
+    StepperNavPrimitive,
+    {
+      role: "tablist",
+      "data-slot": "stepper-nav",
+      "aria-orientation": orientation,
+      "data-orientation": orientation,
+      dir: context.dir,
+      tabIndex: isTabbingBackOut || focusableItemCount === 0 ? -1 : 0,
+      ref: composedRef,
+      onBlur,
+      onFocus,
+      onMouseDown,
+      className: cn(
+        "group/stepper-nav inline-flex gap-4",
+        "data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...listProps,
+      children
+    }
+  ) });
+}
+var StepperItemContext = React16.createContext(null);
+function useStepperItemContext(consumerName) {
+  const context = React16.useContext(StepperItemContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${STEPPER_ITEM_NAME}\``);
+  }
+  return context;
+}
+function StepperItem({
+  value: itemValue,
+  completed = false,
+  disabled = false,
+  loading = false,
+  asChild,
+  className,
+  children,
+  ...props
+}) {
+  const { orientation, dir } = useStepperContext(STEPPER_ITEM_NAME);
+  const store = useStepperStoreContext(STEPPER_ITEM_NAME);
+  const value = useStepperStore((state) => state.value);
+  useIsomorphicLayoutEffect(() => {
+    store.addStep({ value: itemValue, completed, disabled, loading });
+    return () => {
+      store.removeStep(itemValue);
+    };
+  }, [itemValue, completed, disabled, loading]);
+  useIsomorphicLayoutEffect(() => {
+    store.setStep({ value: itemValue, completed, disabled, loading });
+  }, [itemValue, completed, disabled, loading]);
+  const stepState = useStepperStore((state) => state.steps.get(itemValue));
+  const steps = useStepperStore((state) => state.steps);
+  const dataState = getDataState(value, itemValue, stepState, steps);
+  const itemContextValue = React16.useMemo(
+    () => ({
+      value: itemValue,
+      stepState
+    }),
+    [itemValue, stepState]
+  );
+  const StepperItemPrimitive = asChild ? Slot$1 : "div";
+  return /* @__PURE__ */ jsx(StepperItemContext.Provider, { value: itemContextValue, children: /* @__PURE__ */ jsxs(
+    StepperItemPrimitive,
+    {
+      "data-disabled": stepState?.disabled ? "" : void 0,
+      "data-orientation": orientation,
+      "data-state": dataState,
+      "data-slot": "stepper-item",
+      dir,
+      className: cn(
+        "group/step flex flex-1 flex-col justify-end data-[disabled]:opacity-50",
+        "",
+        // "group-data-[orientation=horizontal]/stepper-nav:flex-row group-data-[orientation=vertical]/stepper-nav:flex-col",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-state": dataState,
+            className: cn(
+              "bg-border h-1 w-full transition-colors duration-500",
+              "data-[state=active]:bg-primary data-[state=completed]:bg-success"
+            )
+          }
+        )
+      ]
+    }
+  ) });
+}
+function StepperTrigger({ asChild, disabled, className, ref, ...triggerProps }) {
+  const context = useStepperContext(STEPPER_TRIGGER_NAME);
+  const itemContext = useStepperItemContext(STEPPER_TRIGGER_NAME);
+  const store = useStepperStoreContext(STEPPER_TRIGGER_NAME);
+  const focusContext = useStepperFocusContext(STEPPER_TRIGGER_NAME);
+  const value = useStepperStore((state) => state.value);
+  const itemValue = itemContext.value;
+  const stepState = useStepperStore((state) => state.steps.get(itemValue));
+  const activationMode = context.activationMode;
+  const orientation = context.orientation;
+  const loop = context.loop;
+  const steps = useStepperStore((state) => state.steps);
+  const stepIndex = Array.from(steps.keys()).indexOf(itemValue);
+  const stepPosition = stepIndex + 1;
+  const stepCount = steps.size;
+  const triggerId = getId(context.id, "trigger", itemValue);
+  const contentId = getId(context.id, "content", itemValue);
+  const titleId = getId(context.id, "title", itemValue);
+  const descriptionId = getId(context.id, "description", itemValue);
+  const isDisabled = context.disabled || stepState?.disabled || disabled;
+  const isActive = value === itemValue;
+  const isTabStop = focusContext.tabStopId === triggerId;
+  const dataState = getDataState(value, itemValue, stepState, steps);
+  const triggerRef = React16.useRef(null);
+  const composedRef = useComposedRefs$1(ref, triggerRef);
+  const isArrowKeyPressedRef = React16.useRef(false);
+  const isMouseClickRef = React16.useRef(false);
+  React16.useEffect(() => {
+    function onKeyDown2(event) {
+      if (STEPPER_ARROW_KEYS.includes(event.key)) {
+        isArrowKeyPressedRef.current = true;
+      }
+    }
+    function onKeyUp() {
+      isArrowKeyPressedRef.current = false;
+    }
+    document.addEventListener("keydown", onKeyDown2);
+    document.addEventListener("keyup", onKeyUp);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown2);
+      document.removeEventListener("keyup", onKeyUp);
+    };
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    focusContext.onItemRegister({
+      id: triggerId,
+      ref: triggerRef,
+      value: itemValue,
+      active: isTabStop,
+      disabled: !!isDisabled
+    });
+    if (!isDisabled) {
+      focusContext.onFocusableItemAdd();
+    }
+    return () => {
+      focusContext.onItemUnregister(triggerId);
+      if (!isDisabled) {
+        focusContext.onFocusableItemRemove();
+      }
+    };
+  }, [focusContext, triggerId, itemValue, isTabStop, isDisabled]);
+  const onClick = React16.useCallback(
+    async (event) => {
+      triggerProps.onClick?.(event);
+      if (event.defaultPrevented) return;
+      if (!isDisabled && !context.nonInteractive) {
+        const currentStepIndex = Array.from(steps.keys()).indexOf(value ?? "");
+        const targetStepIndex = Array.from(steps.keys()).indexOf(itemValue);
+        const direction = targetStepIndex > currentStepIndex ? "next" : "prev";
+        await store.setStateWithValidation(itemValue, direction);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isDisabled, context.nonInteractive, store, itemValue, value, steps, triggerProps.onClick]
+  );
+  const onFocus = React16.useCallback(
+    async (event) => {
+      triggerProps.onFocus?.(event);
+      if (event.defaultPrevented) return;
+      focusContext.onItemFocus(triggerId);
+      const isKeyboardFocus = !isMouseClickRef.current;
+      if (!isActive && !isDisabled && activationMode !== "manual" && !context.nonInteractive && isKeyboardFocus) {
+        const currentStepIndex = Array.from(steps.keys()).indexOf(value || "");
+        const targetStepIndex = Array.from(steps.keys()).indexOf(itemValue);
+        const direction = targetStepIndex > currentStepIndex ? "next" : "prev";
+        await store.setStateWithValidation(itemValue, direction);
+      }
+      isMouseClickRef.current = false;
+    },
+    [
+      triggerProps,
+      focusContext,
+      triggerId,
+      isActive,
+      isDisabled,
+      activationMode,
+      context.nonInteractive,
+      steps,
+      value,
+      itemValue,
+      store
+    ]
+  );
+  const onKeyDown = React16.useCallback(
+    async (event) => {
+      triggerProps.onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      if (event.key === "Enter" && context.nonInteractive) {
+        event.preventDefault();
+        return;
+      }
+      if ((event.key === "Enter" || event.key === " ") && activationMode === "manual" && !context.nonInteractive) {
+        event.preventDefault();
+        if (!isDisabled && triggerRef.current) {
+          triggerRef.current.click();
+        }
+        return;
+      }
+      if (event.key === "Tab" && event.shiftKey) {
+        focusContext.onItemShiftTab();
+        return;
+      }
+      if (event.target !== event.currentTarget) return;
+      const focusIntent = getFocusIntent(event, context.dir, orientation);
+      if (focusIntent !== void 0) {
+        if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+        event.preventDefault();
+        const items = focusContext.getItems().filter((item) => !item.disabled);
+        let candidateRefs = items.map((item) => item.ref);
+        if (focusIntent === "last") {
+          candidateRefs.reverse();
+        } else if (focusIntent === "prev" || focusIntent === "next") {
+          if (focusIntent === "prev") candidateRefs.reverse();
+          const currentIndex = candidateRefs.findIndex((ref2) => ref2.current === event.currentTarget);
+          candidateRefs = loop ? wrapArray(candidateRefs, currentIndex + 1) : candidateRefs.slice(currentIndex + 1);
+        }
+        if (store.hasValidation() && candidateRefs.length > 0) {
+          const nextRef = candidateRefs[0];
+          const nextElement = nextRef?.current;
+          const nextItem = items.find((item) => item.ref.current === nextElement);
+          if (nextItem && nextItem.value !== itemValue) {
+            const currentStepIndex = Array.from(steps.keys()).indexOf(value || "");
+            const targetStepIndex = Array.from(steps.keys()).indexOf(nextItem.value);
+            const direction = targetStepIndex > currentStepIndex ? "next" : "prev";
+            if (direction === "next") {
+              const isValid = await store.setStateWithValidation(nextItem.value, direction);
+              if (!isValid) return;
+            } else {
+              store.setState("value", nextItem.value);
+            }
+            queueMicrotask(() => nextElement?.focus());
+            return;
+          }
+        }
+        queueMicrotask(() => focusFirst(candidateRefs));
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      focusContext,
+      context.nonInteractive,
+      context.dir,
+      activationMode,
+      orientation,
+      loop,
+      isDisabled,
+      triggerProps.onKeyDown,
+      store,
+      itemValue,
+      value,
+      steps
+    ]
+  );
+  const onMouseDown = React16.useCallback(
+    (event) => {
+      triggerProps.onMouseDown?.(event);
+      if (event.defaultPrevented) {
+        return;
+      }
+      isMouseClickRef.current = true;
+      if (isDisabled) {
+        event.preventDefault();
+      } else {
+        focusContext.onItemFocus(triggerId);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [focusContext, triggerId, isDisabled, triggerProps.onMouseDown]
+  );
+  const TriggerPrimitive = asChild ? Slot$1 : "button";
+  return /* @__PURE__ */ jsx(
+    TriggerPrimitive,
+    {
+      id: triggerId,
+      role: "tab",
+      type: "button",
+      disabled: isDisabled,
+      tabIndex: isTabStop ? 0 : -1,
+      ref: composedRef,
+      "data-slot": "stepper-trigger",
+      "data-disabled": isDisabled ? "" : void 0,
+      "data-state": dataState,
+      "aria-controls": contentId,
+      "aria-current": isActive ? "step" : void 0,
+      "aria-describedby": `${titleId} ${descriptionId}`,
+      "aria-posinset": stepPosition,
+      "aria-selected": isActive,
+      "aria-setsize": stepCount,
+      className: cn(
+        "inline-flex w-full cursor-pointer items-center gap-3 rounded text-left transition-colors duration-500 outline-none",
+        "disabled:pointer-events-none",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        className
+      ),
+      onClick,
+      onFocus,
+      onKeyDown,
+      onMouseDown,
+      ...triggerProps
+    }
+  );
+}
+function StepperIndicator({ className, children, asChild, ref, ...props }) {
+  const { indicators, dir } = useStepperContext(STEPPER_INDICATOR_NAME);
+  const itemContext = useStepperItemContext(STEPPER_INDICATOR_NAME);
+  const value = useStepperStore((state) => state.value);
+  const itemValue = itemContext.value;
+  const stepState = useStepperStore((state) => state.steps.get(itemValue));
+  const steps = useStepperStore((state) => state.steps);
+  const stepPosition = Array.from(steps.keys()).indexOf(itemValue) + 1;
+  const dataState = getDataState(value, itemValue, stepState, steps);
+  const StepperIndicatorPrimitive = asChild ? Slot$1 : "div";
+  return /* @__PURE__ */ jsx(
+    StepperIndicatorPrimitive,
+    {
+      "data-slot": "stepper-indicator",
+      "data-state": dataState,
+      dir,
+      ref,
+      className: cn(
+        "bg-muted border-border text-muted-foreground relative flex size-6 shrink-0 items-center justify-center self-end overflow-hidden rounded-t border-x border-t text-xs transition-colors duration-500",
+        "data-[state=completed]:bg-success/50 data-[state=completed]:border-success data-[state=completed]:text-success-foreground",
+        "data-[state=active]:bg-primary/50 data-[state=active]:border-primary data-[state=active]:text-primary-foreground",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "absolute", children: typeof children === "function" ? children(dataState) : indicators && (itemContext.stepState?.loading && indicators.loading || dataState === "completed" && indicators.completed || dataState === "active" && indicators.active || dataState === "inactive" && indicators.inactive) ? itemContext.stepState?.loading && indicators.loading || dataState === "completed" && indicators.completed || dataState === "active" && indicators.active || dataState === "inactive" && indicators.inactive : children ? children : stepPosition })
+    }
+  );
+}
+function StepperTitle({ className, asChild = false, ...props }) {
+  const context = useStepperContext(STEPPER_TITLE_NAME);
+  const itemContext = useStepperItemContext(STEPPER_TITLE_NAME);
+  const titleId = getId(context.id, "title", itemContext.value);
+  const TitlePrimitive = asChild ? Slot$1 : "h3";
+  return /* @__PURE__ */ jsx(
+    TitlePrimitive,
+    {
+      id: titleId,
+      "data-slot": "stepper-title",
+      dir: context.dir,
+      className: cn("text-sm leading-none font-medium", className),
+      ...props
+    }
+  );
+}
+function StepperDescription({ className, asChild, ...props }) {
+  const context = useStepperContext(STEPPER_DESCRIPTION_NAME);
+  const itemContext = useStepperItemContext(STEPPER_DESCRIPTION_NAME);
+  const descriptionId = getId(context.id, "description", itemContext.value);
+  const StepperDescriptionPrimitive = asChild ? Slot$1 : "span";
+  return /* @__PURE__ */ jsx(
+    StepperDescriptionPrimitive,
+    {
+      id: descriptionId,
+      "data-slot": "stepper-description",
+      dir: context.dir,
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function StepperPanel({ children, asChild = false, className, ...props }) {
+  const currentValue = useStepperStore((state) => state.value);
+  const StepperPanelPrimitive = asChild ? Slot$1 : "div";
+  return /* @__PURE__ */ jsx(
+    StepperPanelPrimitive,
+    {
+      "data-slot": "stepper-panel",
+      "data-state": currentValue,
+      className: cn("w-full", className),
+      ...props,
+      children
+    }
+  );
+}
+function StepperContent({
+  value: valueProp,
+  asChild = false,
+  forceMount = false,
+  className,
+  ...props
+}) {
+  const context = useStepperContext(STEPPER_CONTENT_NAME);
+  const value = useStepperStore((state) => state.value);
+  const contentId = getId(context.id, "content", valueProp);
+  const triggerId = getId(context.id, "trigger", valueProp);
+  const isActive = value === valueProp;
+  if (!isActive && !forceMount) {
+    return null;
+  }
+  const ContentPrimitive = asChild ? Slot$1 : "div";
+  return /* @__PURE__ */ jsx(
+    ContentPrimitive,
+    {
+      id: contentId,
+      role: "tabpanel",
+      "data-state": value,
+      "aria-labelledby": triggerId,
+      "data-slot": "stepper-content",
+      dir: context.dir,
+      className: cn("w-full", className, !isActive && forceMount && "hidden"),
+      hidden: !isActive && forceMount,
+      ...props
+    }
+  );
+}
+function StepperNextTrigger({ asChild = false, onClick, disabled, ...props }) {
+  const store = useStepperStoreContext(STEPPER_NEXT_TRIGGER_NAME);
+  const value = useStepperStore((state) => state.value);
+  const steps = useStepperStore((state) => state.steps);
+  const stepKeys = Array.from(steps.keys());
+  const currentIndex = value ? stepKeys.indexOf(value) : -1;
+  const isDisabled = disabled || currentIndex >= stepKeys.length - 1;
+  const handleClick = React16.useCallback(
+    async (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented || isDisabled) {
+        return;
+      }
+      const nextIndex = Math.min(currentIndex + 1, stepKeys.length - 1);
+      const nextStepValue = stepKeys[nextIndex];
+      if (nextStepValue) {
+        await store.setStateWithValidation(nextStepValue, "next");
+      }
+    },
+    [onClick, isDisabled, currentIndex, stepKeys, store]
+  );
+  const StepperNextTriggerPrimitive = asChild ? Slot$1 : "button";
+  return /* @__PURE__ */ jsx(
+    StepperNextTriggerPrimitive,
+    {
+      type: "button",
+      "data-slot": "stepper-next-trigger",
+      disabled: isDisabled,
+      onClick: handleClick,
+      ...props
+    }
+  );
+}
+function StepperPrevTrigger({ asChild = false, disabled, onClick, ...props }) {
+  const store = useStepperStoreContext(STEPPER_PREV_TRIGGER_NAME);
+  const value = useStepperStore((state) => state.value);
+  const steps = useStepperStore((state) => state.steps);
+  const stepKeys = Array.from(steps.keys());
+  const currentIndex = value ? stepKeys.indexOf(value) : -1;
+  const isDisabled = disabled || currentIndex <= 0;
+  const handleClick = React16.useCallback(
+    async (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented || isDisabled) {
+        return;
+      }
+      const prevIndex = Math.max(currentIndex - 1, 0);
+      const prevStepValue = stepKeys[prevIndex];
+      if (prevStepValue) {
+        store.setState("value", prevStepValue);
+      }
+    },
+    [currentIndex, isDisabled, onClick, stepKeys, store]
+  );
+  const StepperPrevTriggerPrimitive = asChild ? Slot$1 : "button";
+  return /* @__PURE__ */ jsx(
+    StepperPrevTriggerPrimitive,
+    {
+      type: "button",
+      "data-slot": "stepper-prev-trigger",
+      disabled: isDisabled,
+      onClick: handleClick,
+      ...props
+    }
+  );
+}
+var Toaster = ({ theme = "system", ...props }) => {
+  return /* @__PURE__ */ jsx(
+    Toaster$1,
+    {
+      className: "group",
+      icons: {
+        success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4" }),
+        info: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }),
+        warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" }),
+        error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "size-4" }),
+        loading: /* @__PURE__ */ jsx(Spinner, {})
+      },
+      toastOptions: {
+        classNames: {
+          toast: "!bg-popover !text-popover-foreground !border !border-border !rounded",
+          description: "!text-muted-foreground"
+        }
+      },
+      theme,
+      ...props
+    }
+  );
+};
+var buttonVariants = cva(
+  [
+    "inline-flex shrink-0 items-center justify-center gap-2 rounded text-sm font-medium whitespace-nowrap transition-all outline-none",
+    "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring",
+    "aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        error: "bg-error hover:bg-error/90 focus-visible:ring-error/20 dark:focus-visible:ring-error/40 dark:bg-error/60 text-white",
+        outline: "bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 gap-1.5 rounded px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      },
+      fullWidth: {
+        true: "w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      fullWidth: false
+    }
+  }
+);
+function Button({
+  asChild = false,
+  variant = "default",
+  disabled = false,
+  fullWidth = false,
+  loadingPosition: loadingPositionProp = "start",
+  children,
+  type = "button",
+  loading = false,
+  size = "default",
+  endIcon,
+  startIcon,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot$1 : "button";
+  const isDisabled = disabled || loading;
+  const loadingPosition = size?.startsWith("icon") ? "center" : loadingPositionProp;
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "aria-disabled": isDisabled || void 0,
+      className: cn(buttonVariants({ fullWidth, size, variant }), className),
+      "data-state": loading ? "loading" : void 0,
+      disabled: isDisabled,
+      role: Comp !== "button" ? "button" : void 0,
+      tabIndex: isDisabled ? -1 : 0,
+      type: Comp === "button" ? type : void 0,
+      "data-size": size,
+      "data-variant": variant,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ButtonContent,
+        {
+          loading,
+          size,
+          loadingPosition,
+          startIcon,
+          endIcon,
+          asChild,
+          children
+        }
+      )
+    }
+  );
+}
+function ButtonContent({
+  children,
+  loading = false,
+  loadingPosition = "start",
+  startIcon,
+  asChild,
+  endIcon,
+  ...props
+}) {
+  const isStartLoading = loading && loadingPosition === "start";
+  const StartIcon = isStartLoading ? /* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading" }) : startIcon || null;
+  const isEndLoading = loading && loadingPosition === "end";
+  const EndIcon = isEndLoading ? /* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading" }) : endIcon || null;
+  const isCenterLoading = loading && loadingPosition === "center";
+  return asChild && React16.isValidElement(children) ? React16.cloneElement(
+    children,
+    props,
+    /* @__PURE__ */ jsxs(React16.Fragment, { children: [
+      StartIcon,
+      isCenterLoading ? /* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading" }) : React16.isValidElement(children) ? children.props?.children : null,
+      EndIcon
+    ] })
+  ) : /* @__PURE__ */ jsxs(React16.Fragment, { children: [
+    StartIcon,
+    isCenterLoading ? /* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading" }) : children,
+    EndIcon
+  ] });
+}
+
+export { Button, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerContent, ColorPickerEyeDropper, ColorPickerFormatSelect, ColorPickerHueSlider, ColorPickerInput, ColorPickerSwatch, ColorPickerTrigger, Stepper, StepperActivationMode, StepperContent, StepperDataState, StepperDescription, StepperFocusIntent, StepperIndicator, StepperItem, StepperNav, StepperNavigationDirection, StepperNextTrigger, StepperOrientation, StepperPanel, StepperPrevTrigger, StepperTitle, StepperTrigger, Toaster, useColorPickerStore, useStepperContext, useStepperFocusContext, useStepperItemContext };