@sth87/shadcn-design-system 0.0.35 → 0.1.0

package/dist/esm/components/Stepper/Stepper.js

@@ -33,113 +33,113 @@ import "@radix-ui/react-slider";
 import "../../packages/ui/src/components/tabs.js";
 import "../../packages/ui/src/components/toggle.js";
 import { useComposedRefs as vt } from "../../packages/ui/src/lib/compose-refs.js";
-const gt = "Stepper", At = "StepperList", ct = "StepperItem", at = "StepperTrigger", lt = "StepperIndicator", pt = "StepperSeparator", ft = "StepperTitle", mt = "StepperDescription", Et = "StepperContent", Nt = "StepperPrev", Rt = "StepperNext", Tt = "stepperFocusGroup.onEntryFocus", Mt = { bubbles: !1, cancelable: !0 }, Dt = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], st = {
+const gt = "Stepper", At = "StepperList", dt = "StepperItem", nt = "StepperTrigger", lt = "StepperIndicator", pt = "StepperSeparator", ft = "StepperTitle", mt = "StepperDescription", Et = "StepperContent", Nt = "StepperPrev", Rt = "StepperNext", Tt = "stepperFocusGroup.onEntryFocus", Mt = { bubbles: !1, cancelable: !0 }, Dt = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], at = {
   primary: {
     indicator: {
-      active: "border-primary bg-primary text-primary-foreground data-[variant=dot]:bg-primary/30 data-[variant=dot]:border-primary/0",
-      completed: "border-primary bg-primary text-primary-foreground data-[variant=dot]:bg-primary/30 data-[variant=dot]:border-primary/0",
-      inactive: "border-muted bg-background text-muted-foreground data-[variant=dot]:bg-muted/30 data-[variant=dot]:border-muted/0"
+      active: "ds:border-primary ds:bg-primary ds:text-primary-foreground ds:data-[variant=dot]:bg-primary/30 ds:data-[variant=dot]:border-primary/0",
+      completed: "ds:border-primary ds:bg-primary ds:text-primary-foreground ds:data-[variant=dot]:bg-primary/30 ds:data-[variant=dot]:border-primary/0",
+      inactive: "ds:border-muted ds:bg-background ds:text-muted-foreground ds:data-[variant=dot]:bg-muted/30 ds:data-[variant=dot]:border-muted/0"
     },
     separator: {
-      active: "bg-primary",
-      completed: "bg-primary",
-      inactive: "bg-border"
+      active: "ds:bg-primary",
+      completed: "ds:bg-primary",
+      inactive: "ds:bg-border"
     }
   },
   secondary: {
     indicator: {
-      active: "border-secondary bg-secondary text-secondary-foreground data-[variant=dot]:bg-secondary/30 data-[variant=dot]:border-secondary/0",
-      completed: "border-secondary bg-secondary text-secondary-foreground data-[variant=dot]:bg-secondary/30 data-[variant=dot]:border-secondary/0",
-      inactive: "border-muted bg-background text-muted-foreground data-[variant=dot]:bg-muted/30 data-[variant=dot]:border-muted/0"
+      active: "ds:border-secondary ds:bg-secondary ds:text-secondary-foreground ds:data-[variant=dot]:bg-secondary/30 ds:data-[variant=dot]:border-secondary/0",
+      completed: "ds:border-secondary ds:bg-secondary ds:text-secondary-foreground ds:data-[variant=dot]:bg-secondary/30 ds:data-[variant=dot]:border-secondary/0",
+      inactive: "ds:border-muted ds:bg-background ds:text-muted-foreground ds:data-[variant=dot]:bg-muted/30 ds:data-[variant=dot]:border-muted/0"
     },
     separator: {
-      active: "bg-secondary",
-      completed: "bg-secondary",
-      inactive: "bg-border"
+      active: "ds:bg-secondary",
+      completed: "ds:bg-secondary",
+      inactive: "ds:bg-border"
     }
   },
   accent: {
     indicator: {
-      active: "border-accent bg-accent text-accent-foreground data-[variant=dot]:bg-accent/30 data-[variant=dot]:border-accent/0",
-      completed: "border-accent bg-accent text-accent-foreground data-[variant=dot]:bg-accent/30 data-[variant=dot]:border-accent/0",
-      inactive: "border-muted bg-background text-muted-foreground data-[variant=dot]:bg-muted/30 data-[variant=dot]:border-muted/0"
+      active: "ds:border-accent ds:bg-accent ds:text-accent-foreground ds:data-[variant=dot]:bg-accent/30 ds:data-[variant=dot]:border-accent/0",
+      completed: "ds:border-accent ds:bg-accent ds:text-accent-foreground ds:data-[variant=dot]:bg-accent/30 ds:data-[variant=dot]:border-accent/0",
+      inactive: "ds:border-muted ds:bg-background ds:text-muted-foreground ds:data-[variant=dot]:bg-muted/30 ds:data-[variant=dot]:border-muted/0"
     },
     separator: {
-      active: "bg-accent",
-      completed: "bg-accent",
-      inactive: "bg-border"
+      active: "ds:bg-accent",
+      completed: "ds:bg-accent",
+      inactive: "ds:bg-border"
     }
   },
   destructive: {
     indicator: {
-      active: "border-destructive bg-destructive text-destructive-foreground data-[variant=dot]:bg-destructive/30 data-[variant=dot]:border-destructive/0",
-      completed: "border-destructive bg-destructive text-destructive-foreground data-[variant=dot]:bg-destructive/30 data-[variant=dot]:border-destructive/0",
-      inactive: "border-muted bg-background text-muted-foreground data-[variant=dot]:bg-muted/30 data-[variant=dot]:border-muted/0"
+      active: "ds:border-destructive ds:bg-destructive ds:text-destructive-foreground ds:data-[variant=dot]:bg-destructive/30 ds:data-[variant=dot]:border-destructive/0",
+      completed: "ds:border-destructive ds:bg-destructive ds:text-destructive-foreground ds:data-[variant=dot]:bg-destructive/30 ds:data-[variant=dot]:border-destructive/0",
+      inactive: "ds:border-muted ds:bg-background ds:text-muted-foreground ds:data-[variant=dot]:bg-muted/30 ds:data-[variant=dot]:border-muted/0"
     },
     separator: {
-      active: "bg-destructive",
-      completed: "bg-destructive",
-      inactive: "bg-border"
+      active: "ds:bg-destructive",
+      completed: "ds:bg-destructive",
+      inactive: "ds:bg-border"
     }
   },
   muted: {
     indicator: {
-      active: "border-muted bg-muted text-muted-foreground data-[variant=dot]:bg-muted/30 data-[variant=dot]:border-muted/0",
-      completed: "border-muted bg-muted text-muted-foreground data-[variant=dot]:bg-muted/30 data-[variant=dot]:border-muted/0",
-      inactive: "border-muted bg-background text-muted-foreground data-[variant=dot]:bg-muted/30 data-[variant=dot]:border-muted/0"
+      active: "ds:border-muted ds:bg-muted ds:text-muted-foreground ds:data-[variant=dot]:bg-muted/30 ds:data-[variant=dot]:border-muted/0",
+      completed: "ds:border-muted ds:bg-muted ds:text-muted-foreground ds:data-[variant=dot]:bg-muted/30 ds:data-[variant=dot]:border-muted/0",
+      inactive: "ds:border-muted ds:bg-background ds:text-muted-foreground ds:data-[variant=dot]:bg-muted/30 ds:data-[variant=dot]:border-muted/0"
     },
     separator: {
-      active: "bg-muted",
-      completed: "bg-muted",
-      inactive: "bg-border"
+      active: "ds:bg-muted",
+      completed: "ds:bg-muted",
+      inactive: "ds:bg-border"
     }
   },
   success: {
     indicator: {
-      active: "border-success bg-success text-success-foreground data-[variant=dot]:bg-success/30 data-[variant=dot]:border-success/0",
-      completed: "border-success bg-success text-success-foreground data-[variant=dot]:bg-success/30 data-[variant=dot]:border-success/0",
-      inactive: "border-muted bg-background text-muted-foreground data-[variant=dot]:bg-muted/30 data-[variant=dot]:border-muted/0"
+      active: "ds:border-success ds:bg-success ds:text-success-foreground ds:data-[variant=dot]:bg-success/30 ds:data-[variant=dot]:border-success/0",
+      completed: "ds:border-success ds:bg-success ds:text-success-foreground ds:data-[variant=dot]:bg-success/30 ds:data-[variant=dot]:border-success/0",
+      inactive: "ds:border-muted ds:bg-background ds:text-muted-foreground ds:data-[variant=dot]:bg-muted/30 ds:data-[variant=dot]:border-muted/0"
     },
     separator: {
-      active: "bg-success",
-      completed: "bg-success",
-      inactive: "bg-border"
+      active: "ds:bg-success",
+      completed: "ds:bg-success",
+      inactive: "ds:bg-border"
     }
   },
   error: {
     indicator: {
-      active: "border-error bg-error text-error-foreground data-[variant=dot]:bg-error/30 data-[variant=dot]:border-error/0",
-      completed: "border-error bg-error text-error-foreground data-[variant=dot]:bg-error/30 data-[variant=dot]:border-error/0",
-      inactive: "border-muted bg-background text-muted-foreground data-[variant=dot]:bg-muted/30 data-[variant=dot]:border-muted/0"
+      active: "ds:border-error ds:bg-error ds:text-error-foreground ds:data-[variant=dot]:bg-error/30 ds:data-[variant=dot]:border-error/0",
+      completed: "ds:border-error ds:bg-error ds:text-error-foreground ds:data-[variant=dot]:bg-error/30 ds:data-[variant=dot]:border-error/0",
+      inactive: "ds:border-muted ds:bg-background ds:text-muted-foreground ds:data-[variant=dot]:bg-muted/30 ds:data-[variant=dot]:border-muted/0"
     },
     separator: {
-      active: "bg-error",
-      completed: "bg-error",
-      inactive: "bg-border"
+      active: "ds:bg-error",
+      completed: "ds:bg-error",
+      inactive: "ds:bg-border"
     }
   },
   warning: {
     indicator: {
-      active: "border-warning bg-warning text-warning-foreground data-[variant=dot]:bg-warning/30 data-[variant=dot]:border-warning/0",
-      completed: "border-warning bg-warning text-warning-foreground data-[variant=dot]:bg-warning/30 data-[variant=dot]:border-warning/0",
-      inactive: "border-muted bg-background text-muted-foreground data-[variant=dot]:bg-muted/30 data-[variant=dot]:border-muted/0"
+      active: "ds:border-warning ds:bg-warning ds:text-warning-foreground ds:data-[variant=dot]:bg-warning/30 ds:data-[variant=dot]:border-warning/0",
+      completed: "ds:border-warning ds:bg-warning ds:text-warning-foreground ds:data-[variant=dot]:bg-warning/30 ds:data-[variant=dot]:border-warning/0",
+      inactive: "ds:border-muted ds:bg-background ds:text-muted-foreground ds:data-[variant=dot]:bg-muted/30 ds:data-[variant=dot]:border-muted/0"
     },
     separator: {
-      active: "bg-warning",
-      completed: "bg-warning",
-      inactive: "bg-border"
+      active: "ds:bg-warning",
+      completed: "ds:bg-warning",
+      inactive: "ds:bg-border"
     }
   }
 };
-function Ot(e, t, n) {
-  return t ? "" : e ? st[e].indicator[n] : st.primary.indicator[n];
+function Ot(e, t, s) {
+  return t ? "" : e ? at[e].indicator[s] : at.primary.indicator[s];
 }
-function xt(e, t, n) {
-  return t ? "" : e ? st[e].separator[n] : st.primary.separator[n];
+function xt(e, t, s) {
+  return t ? "" : e ? at[e].separator[s] : at.primary.separator[s];
 }
-function dt(e, t, n) {
+function ct(e, t, s) {
   if (e)
-    return n ? t === "active" || t === "completed" ? {
+    return s ? t === "active" || t === "completed" ? {
       borderColor: e,
       backgroundColor: e,
       color: "white"
@@ -153,8 +153,8 @@ function dt(e, t, n) {
       backgroundColor: "hsl(var(--border))"
     };
 }
-function H(e, t, n) {
-  return `${e}-${t}-${n}`;
+function H(e, t, s) {
+  return `${e}-${t}-${s}`;
 }
 const Vt = {
   ArrowLeft: "prev",
@@ -169,22 +169,22 @@ const Vt = {
 function Ft(e, t) {
   return t !== "rtl" ? e : e === "ArrowLeft" ? "ArrowRight" : e === "ArrowRight" ? "ArrowLeft" : e;
 }
-function _t(e, t, n) {
+function _t(e, t, s) {
   const l = Ft(e.key, t);
-  if (!(n === "horizontal" && ["ArrowUp", "ArrowDown"].includes(l)) && !(n === "vertical" && ["ArrowLeft", "ArrowRight"].includes(l)))
+  if (!(s === "horizontal" && ["ArrowUp", "ArrowDown"].includes(l)) && !(s === "vertical" && ["ArrowLeft", "ArrowRight"].includes(l)))
     return Vt[l];
 }
 function yt(e, t = !1) {
-  const n = document.activeElement;
+  const s = document.activeElement;
   for (const l of e) {
     const b = l.current;
-    if (b && (b === n || (b.focus({ preventScroll: t }), document.activeElement !== n)))
+    if (b && (b === s || (b.focus({ preventScroll: t }), document.activeElement !== s)))
       return;
   }
 }
 function Lt(e, t) {
   return e.map(
-    (n, l) => e[(t + l) % e.length]
+    (s, l) => e[(t + l) % e.length]
   );
 }
 const Q = typeof window > "u" ? o.useEffect : o.useLayoutEffect;
@@ -198,9 +198,9 @@ function bt(e) {
   const t = o.useRef(null);
   return t.current === null && (t.current = e()), t;
 }
-function Z(e, t, n, l, b = "item") {
-  const s = Array.from(l.keys()), i = s.indexOf(t);
-  return n?.completed ? "completed" : e === t ? b === "separator" ? "inactive" : "active" : e && s.indexOf(e) > i ? "completed" : "inactive";
+function Z(e, t, s, l, b = "item") {
+  const a = Array.from(l.keys()), i = a.indexOf(t);
+  return s?.completed ? "completed" : e === t ? b === "separator" ? "inactive" : "active" : e && a.indexOf(e) > i ? "completed" : "inactive";
 }
 const Kt = o.createContext(void 0);
 function $t(e) {
@@ -215,11 +215,11 @@ function tt(e) {
   return t;
 }
 function R(e) {
-  const t = tt("useStore"), n = o.useCallback(
+  const t = tt("useStore"), s = o.useCallback(
     () => e(t.getState()),
     [t, e]
   );
-  return o.useSyncExternalStore(t.subscribe, n, n);
+  return o.useSyncExternalStore(t.subscribe, s, s);
 }
 const St = o.createContext(null);
 function X(e) {
@@ -231,17 +231,17 @@ function X(e) {
 function Ae(e) {
   const {
     value: t,
-    defaultValue: n,
+    defaultValue: s,
     onValueChange: l,
     onValueComplete: b,
-    onValueAdd: s,
+    onValueAdd: a,
     onValueRemove: i,
     onValidate: m,
     id: f,
-    dir: a,
+    dir: n,
     orientation: v = "horizontal",
-    activationMode: d = "automatic",
-    asChild: c,
+    activationMode: c = "automatic",
+    asChild: d,
     disabled: C = !1,
     nonInteractive: y = !1,
     loop: A = !1,
@@ -253,11 +253,11 @@ function Ae(e) {
     ...w
   } = e, O = bt(() => /* @__PURE__ */ new Set()), h = bt(() => ({
     steps: /* @__PURE__ */ new Map(),
-    value: t ?? n ?? ""
+    value: t ?? s ?? ""
   })), I = zt({
     onValueChange: l,
     onValueComplete: b,
-    onValueAdd: s,
+    onValueAdd: a,
     onValueRemove: i,
     onValidate: m
   }), u = o.useMemo(() => ({
@@ -299,12 +299,12 @@ function Ae(e) {
   Q(() => {
     t !== void 0 && u.setState("value", t);
   }, [t, u]);
-  const F = $t(a), K = o.useId(), $ = f ?? K, _ = o.useMemo(
+  const F = $t(n), K = o.useId(), $ = f ?? K, _ = o.useMemo(
     () => ({
       id: $,
       dir: F,
       orientation: v,
-      activationMode: d,
+      activationMode: c,
       disabled: C,
       nonInteractive: y,
       loop: A,
@@ -317,7 +317,7 @@ function Ae(e) {
       $,
       F,
       v,
-      d,
+      c,
       C,
       y,
       A,
@@ -326,7 +326,7 @@ function Ae(e) {
       T,
       M
     ]
-  ), Y = c ? z : "div";
+  ), Y = d ? z : "div";
   return /* @__PURE__ */ k(Ct.Provider, { value: u, children: /* @__PURE__ */ k(St.Provider, { value: _, children: /* @__PURE__ */ k(
     Y,
     {
@@ -337,8 +337,8 @@ function Ae(e) {
       dir: F,
       ...w,
       className: B(
-        "flex gap-6",
-        v === "horizontal" ? "w-full flex-col" : "flex-row",
+        "ds:flex ds:gap-6",
+        v === "horizontal" ? "ds:w-full ds:flex-col" : "ds:flex-row",
         V
       )
     }
@@ -354,10 +354,10 @@ function Ut(e) {
   return t;
 }
 function Ee(e) {
-  const { className: t, children: n, asChild: l, ref: b, ...s } = e, i = X(At), m = i.orientation, f = R((r) => r.value), [a, v] = o.useState(null), [d, c] = o.useState(!1), [C, y] = o.useState(0), A = o.useRef(!1), g = o.useRef(/* @__PURE__ */ new Map()), x = o.useRef(null), T = vt(b, x), M = o.useCallback((r) => {
+  const { className: t, children: s, asChild: l, ref: b, ...a } = e, i = X(At), m = i.orientation, f = R((r) => r.value), [n, v] = o.useState(null), [c, d] = o.useState(!1), [C, y] = o.useState(0), A = o.useRef(!1), g = o.useRef(/* @__PURE__ */ new Map()), x = o.useRef(null), T = vt(b, x), M = o.useCallback((r) => {
     v(r);
   }, []), V = o.useCallback(() => {
-    c(!0);
+    d(!0);
   }, []), w = o.useCallback(() => {
     y((r) => r + 1);
   }, []), O = o.useCallback(() => {
@@ -373,19 +373,19 @@ function Ee(e) {
     return P & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : P & Node.DOCUMENT_POSITION_PRECEDING ? 1 : 0;
   }), []), F = o.useCallback(
     (r) => {
-      s.onBlur?.(r), !r.defaultPrevented && c(!1);
+      a.onBlur?.(r), !r.defaultPrevented && d(!1);
     },
-    [s.onBlur]
+    [a.onBlur]
   ), K = o.useCallback(
     (r) => {
-      if (s.onFocus?.(r), r.defaultPrevented) return;
+      if (a.onFocus?.(r), r.defaultPrevented) return;
       const S = !A.current;
-      if (r.target === r.currentTarget && S && !d) {
+      if (r.target === r.currentTarget && S && !c) {
         const N = new CustomEvent(Tt, Mt);
         if (r.currentTarget.dispatchEvent(N), !N.defaultPrevented) {
           const E = Array.from(g.current.values()).filter(
             (W) => !W.disabled
-          ), P = f ? E.find((W) => W.value === f) : void 0, j = E.find((W) => W.active), rt = E.find((W) => W.id === a), ot = [
+          ), P = f ? E.find((W) => W.value === f) : void 0, j = E.find((W) => W.active), rt = E.find((W) => W.id === n), ot = [
             P,
             j,
             rt,
@@ -396,15 +396,15 @@ function Ee(e) {
       }
       A.current = !1;
     },
-    [s.onFocus, d, f, a]
+    [a.onFocus, c, f, n]
   ), $ = o.useCallback(
     (r) => {
-      s.onMouseDown?.(r), !r.defaultPrevented && (A.current = !0);
+      a.onMouseDown?.(r), !r.defaultPrevented && (A.current = !0);
     },
-    [s.onMouseDown]
+    [a.onMouseDown]
   ), _ = o.useMemo(
     () => ({
-      tabStopId: a,
+      tabStopId: n,
       onItemFocus: M,
       onItemShiftTab: V,
       onFocusableItemAdd: w,
@@ -414,7 +414,7 @@ function Ee(e) {
       getItems: u
     }),
     [
-      a,
+      n,
       M,
       V,
       w,
@@ -432,18 +432,18 @@ function Ee(e) {
       "data-orientation": m,
       "data-slot": "stepper-list",
       dir: i.dir,
-      tabIndex: d || C === 0 ? -1 : 0,
-      ...s,
+      tabIndex: c || C === 0 ? -1 : 0,
+      ...a,
       ref: T,
       className: B(
-        "flex outline-none",
-        m === "horizontal" ? "flex-row items-center" : "flex-col items-start",
+        "ds:flex ds:outline-none",
+        m === "horizontal" ? "ds:flex-row ds:items-center" : "ds:flex-col ds:items-start",
         t
       ),
       onBlur: F,
       onFocus: K,
       onMouseDown: $,
-      children: n
+      children: s
     }
   ) });
 }
@@ -453,25 +453,25 @@ const It = o.createContext(
 function et(e) {
   const t = o.useContext(It);
   if (!t)
-    throw new Error(`\`${e}\` must be used within \`${ct}\``);
+    throw new Error(`\`${e}\` must be used within \`${dt}\``);
   return t;
 }
 function Ne(e) {
   const {
     value: t,
-    completed: n = !1,
+    completed: s = !1,
     disabled: l = !1,
     asChild: b,
-    className: s,
+    className: a,
     children: i,
     ref: m,
     ...f
-  } = e, a = X(ct), v = tt(ct), d = a.orientation, c = a.labelPosition ?? "right", C = R((u) => u.value);
-  Q(() => (v.addStep(t, n, l), () => {
+  } = e, n = X(dt), v = tt(dt), c = n.orientation, d = n.labelPosition ?? "right", C = R((u) => u.value);
+  Q(() => (v.addStep(t, s, l), () => {
     v.removeStep(t);
-  }), [t, n, l]), Q(() => {
-    v.setStep(t, n, l);
-  }, [t, n, l]);
+  }), [t, s, l]), Q(() => {
+    v.setStep(t, s, l);
+  }, [t, s, l]);
   const y = R((u) => u.steps.get(t)), A = R((u) => u.steps), g = Z(C, t, y, A), x = Array.from(A.keys()), T = x.indexOf(t), M = T === 0, V = T === x.length - 1, w = o.useMemo(
     () => ({
       value: t,
@@ -479,10 +479,10 @@ function Ne(e) {
     }),
     [t, y]
   ), O = () => {
-    const u = "relative flex";
-    return d === "horizontal" ? c === "top" || c === "bottom" ? `${u} flex-col items-center flex-1 gap-2` : `${u} flex-row items-center not-last:flex-1` : `${u} flex-col`;
+    const u = "ds:relative ds:flex";
+    return c === "horizontal" ? d === "top" || d === "bottom" ? `${u} flex-col items-center flex-1 gap-2` : `${u} flex-row items-center not-last:flex-1` : `${u} flex-col`;
   }, h = o.useMemo(() => {
-    if (d === "horizontal" && (c === "top" || c === "bottom")) {
+    if (c === "horizontal" && (d === "top" || d === "bottom")) {
       const u = o.Children.toArray(i);
       let F = null, K = null, $ = null;
       const _ = [];
@@ -506,15 +506,15 @@ function Ne(e) {
       ) : "inactive";
       let N = null;
       if (!M) {
-        const P = a.color, j = a.customColor;
+        const P = n.color, j = n.customColor;
         N = /* @__PURE__ */ k(
           "div",
           {
             className: B(
-              "h-px flex-1 transition-colors",
+              "ds:h-px ds:flex-1 ds:transition-colors",
               xt(P, j, S)
             ),
-            style: dt(j, S, !1),
+            style: ct(j, S, !1),
             "aria-hidden": "true"
           },
           "left-separator"
@@ -523,51 +523,51 @@ function Ne(e) {
       const E = /* @__PURE__ */ Pt(
         "div",
         {
-          className: "flex w-full items-center justify-center",
+          className: "ds:flex ds:w-full ds:items-center ds:justify-center",
           children: [
             N,
-            M && /* @__PURE__ */ k("div", { className: "h-px flex-1 bg-transparent", "aria-hidden": "true" }),
+            M && /* @__PURE__ */ k("div", { className: "ds:h-px ds:flex-1 ds:bg-transparent", "aria-hidden": "true" }),
             K,
             !V && $,
-            V && /* @__PURE__ */ k("div", { className: "h-px flex-1 bg-transparent", "aria-hidden": "true" })
+            V && /* @__PURE__ */ k("div", { className: "ds:h-px ds:flex-1 ds:bg-transparent", "aria-hidden": "true" })
           ]
         },
         "indicator-row"
       );
-      return c === "top" ? [F, E, ..._] : [E, F, ..._];
+      return d === "top" ? [F, E, ..._] : [E, F, ..._];
     }
     return i;
   }, [
     i,
-    d,
     c,
+    d,
     M,
     V,
     T,
     x,
     A,
     C,
-    a.color,
-    a.customColor
+    n.color,
+    n.customColor
   ]), I = b ? z : "div";
   return /* @__PURE__ */ k(It.Provider, { value: w, children: /* @__PURE__ */ k(
     I,
     {
       "data-disabled": y?.disabled ? "" : void 0,
-      "data-orientation": d,
+      "data-orientation": c,
       "data-state": g,
       "data-slot": "stepper-item",
-      "data-label-position": c,
-      dir: a.dir,
+      "data-label-position": d,
+      dir: n.dir,
       ...f,
       ref: m,
-      className: B(O(), s),
+      className: B(O(), a),
       children: h
     }
   ) });
 }
 function Wt(e) {
-  const { asChild: t, disabled: n, className: l, ref: b, ...s } = e, i = X(at), m = et(at), f = tt(at), a = Ut(at), v = R((p) => p.value), d = m.value, c = R((p) => p.steps.get(d)), C = i.activationMode, y = i.orientation, A = i.loop, g = i.labelPosition ?? "right", x = R((p) => p.steps), M = Array.from(x.keys()).indexOf(d) + 1, V = x.size, w = H(i.id, "trigger", d), O = H(i.id, "content", d), h = H(i.id, "title", d), I = H(i.id, "description", d), u = i.disabled || c?.disabled || n, F = v === d, K = a.tabStopId === w, $ = Z(v, d, c, x), _ = o.useRef(null), Y = vt(b, _), r = o.useRef(!1), S = o.useRef(!1);
+  const { asChild: t, disabled: s, className: l, ref: b, ...a } = e, i = X(nt), m = et(nt), f = tt(nt), n = Ut(nt), v = R((p) => p.value), c = m.value, d = R((p) => p.steps.get(c)), C = i.activationMode, y = i.orientation, A = i.loop, g = i.labelPosition ?? "right", x = R((p) => p.steps), M = Array.from(x.keys()).indexOf(c) + 1, V = x.size, w = H(i.id, "trigger", c), O = H(i.id, "content", c), h = H(i.id, "title", c), I = H(i.id, "description", c), u = i.disabled || d?.disabled || s, F = v === c, K = n.tabStopId === w, $ = Z(v, c, d, x), _ = o.useRef(null), Y = vt(b, _), r = o.useRef(!1), S = o.useRef(!1);
   o.useEffect(() => {
     function p(q) {
       Dt.includes(q.key) && (r.current = !0);
@@ -578,58 +578,58 @@ function Wt(e) {
     return document.addEventListener("keydown", p), document.addEventListener("keyup", D), () => {
       document.removeEventListener("keydown", p), document.removeEventListener("keyup", D);
     };
-  }, []), Q(() => (a.onItemRegister({
+  }, []), Q(() => (n.onItemRegister({
     id: w,
     ref: _,
-    value: d,
+    value: c,
     active: K,
     disabled: !!u
-  }), u || a.onFocusableItemAdd(), () => {
-    a.onItemUnregister(w), u || a.onFocusableItemRemove();
-  }), [a, w, d, K, u]);
+  }), u || n.onFocusableItemAdd(), () => {
+    n.onItemUnregister(w), u || n.onFocusableItemRemove();
+  }), [n, w, c, K, u]);
   const N = o.useCallback(
     async (p) => {
-      if (s.onClick?.(p), !p.defaultPrevented && !u && !i.nonInteractive) {
-        const D = Array.from(x.keys()).indexOf(v ?? ""), L = Array.from(x.keys()).indexOf(d) > D ? "next" : "prev";
-        await f.setStateWithValidation(d, L);
+      if (a.onClick?.(p), !p.defaultPrevented && !u && !i.nonInteractive) {
+        const D = Array.from(x.keys()).indexOf(v ?? ""), L = Array.from(x.keys()).indexOf(c) > D ? "next" : "prev";
+        await f.setStateWithValidation(c, L);
       }
     },
     [
       u,
       i.nonInteractive,
       f,
-      d,
+      c,
       v,
       x,
-      s.onClick
+      a.onClick
     ]
   ), E = o.useCallback(
     async (p) => {
-      if (s.onFocus?.(p), p.defaultPrevented) return;
-      a.onItemFocus(w);
+      if (a.onFocus?.(p), p.defaultPrevented) return;
+      n.onItemFocus(w);
       const D = !S.current;
       if (!F && !u && C !== "manual" && !i.nonInteractive && D) {
-        const q = Array.from(x.keys()).indexOf(v || ""), G = Array.from(x.keys()).indexOf(d) > q ? "next" : "prev";
-        await f.setStateWithValidation(d, G);
+        const q = Array.from(x.keys()).indexOf(v || ""), G = Array.from(x.keys()).indexOf(c) > q ? "next" : "prev";
+        await f.setStateWithValidation(c, G);
       }
       S.current = !1;
     },
     [
-      a,
+      n,
       w,
       C,
       F,
       u,
       i.nonInteractive,
       f,
-      d,
+      c,
       v,
       x,
-      s.onFocus
+      a.onFocus
     ]
   ), P = o.useCallback(
     async (p) => {
-      if (s.onKeyDown?.(p), p.defaultPrevented) return;
+      if (a.onKeyDown?.(p), p.defaultPrevented) return;
       if (p.key === "Enter" && i.nonInteractive) {
         p.preventDefault();
         return;
@@ -639,7 +639,7 @@ function Wt(e) {
         return;
       }
       if (p.key === "Tab" && p.shiftKey) {
-        a.onItemShiftTab();
+        n.onItemShiftTab();
         return;
       }
       if (p.target !== p.currentTarget) return;
@@ -648,22 +648,22 @@ function Wt(e) {
         if (p.metaKey || p.ctrlKey || p.altKey || p.shiftKey)
           return;
         p.preventDefault();
-        const q = a.getItems().filter((G) => !G.disabled);
+        const q = n.getItems().filter((G) => !G.disabled);
         let L = q.map((G) => G.ref);
         if (D === "last")
           L.reverse();
         else if (D === "prev" || D === "next") {
           D === "prev" && L.reverse();
           const G = L.findIndex(
-            (nt) => nt.current === p.currentTarget
+            (st) => st.current === p.currentTarget
           );
           L = A ? Lt(L, G + 1) : L.slice(G + 1);
         }
         if (f.hasValidation() && L.length > 0) {
-          const nt = L[0]?.current, J = q.find(
-            (it) => it.ref.current === nt
+          const st = L[0]?.current, J = q.find(
+            (it) => it.ref.current === st
           );
-          if (J && J.value !== d) {
+          if (J && J.value !== c) {
             const it = Array.from(x.keys()).indexOf(
               v || ""
             ), ut = Array.from(x.keys()).indexOf(
@@ -676,7 +676,7 @@ function Wt(e) {
               )) return;
             } else
               f.setState("value", J.value);
-            queueMicrotask(() => nt?.focus());
+            queueMicrotask(() => st?.focus());
             return;
           }
         }
@@ -684,25 +684,25 @@ function Wt(e) {
       }
     },
     [
-      a,
+      n,
       i.nonInteractive,
       i.dir,
       C,
       y,
       A,
       u,
-      s.onKeyDown,
+      a.onKeyDown,
       f,
-      d,
+      c,
       v,
       x
     ]
   ), j = o.useCallback(
     (p) => {
-      s.onMouseDown?.(p), !p.defaultPrevented && (S.current = !0, u ? p.preventDefault() : a.onItemFocus(w));
+      a.onMouseDown?.(p), !p.defaultPrevented && (S.current = !0, u ? p.preventDefault() : n.onItemFocus(w));
     },
-    [a, w, u, s.onMouseDown]
-  ), rt = () => y === "horizontal" && (g === "top" || g === "bottom") ? g === "top" ? "flex-col-reverse" : "flex-col" : g === "top" ? "flex-col-reverse" : g === "bottom" ? "flex-col" : g === "left" ? "flex-row-reverse" : "flex-row", U = y === "horizontal" && (g === "top" || g === "bottom"), ot = o.useMemo(() => U ? o.Children.toArray(s.children).filter((D) => o.isValidElement(D) ? !(D.props["data-slot"] === "stepper-indicator" || D.type === wt) : !0) : s.children, [U, s.children]);
+    [n, w, u, a.onMouseDown]
+  ), rt = () => y === "horizontal" && (g === "top" || g === "bottom") ? g === "top" ? "flex-col-reverse" : "flex-col" : g === "top" ? "flex-col-reverse" : g === "bottom" ? "flex-col" : g === "left" ? "flex-row-reverse" : "flex-row", U = y === "horizontal" && (g === "top" || g === "bottom"), ot = o.useMemo(() => U ? o.Children.toArray(a.children).filter((D) => o.isValidElement(D) ? !(D.props["data-slot"] === "stepper-indicator" || D.type === wt) : !0) : a.children, [U, a.children]);
   return /* @__PURE__ */ k(
     t ? z : "button",
     {
@@ -721,11 +721,11 @@ function Wt(e) {
       "data-wrap-indicator": U ? "" : void 0,
       disabled: u,
       tabIndex: K ? 0 : -1,
-      ...s,
+      ...a,
       ref: Y,
       className: B(
-        "inline-flex items-center justify-center gap-3 rounded-md text-left outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        "not-has-data-[slot=description]:rounded-full not-has-data-[slot=title]:rounded-full",
+        "ds:inline-flex ds:items-center ds:justify-center ds:gap-3 ds:rounded-md ds:text-left ds:outline-none ds:transition-all ds:focus-visible:border-ring ds:focus-visible:ring-[3px] ds:focus-visible:ring-ring/50 ds:disabled:pointer-events-none ds:disabled:opacity-50 ds:aria-invalid:border-destructive ds:aria-invalid:ring-destructive/20 ds:dark:aria-invalid:ring-destructive/40 ds:[&_svg:not([class*='size-'])]:size-4 ds:[&_svg]:pointer-events-none ds:[&_svg]:shrink-0",
+        "ds:not-has-data-[slot=description]:rounded-full ds:not-has-data-[slot=title]:rounded-full",
         U ? "" : rt(),
         l
       ),
@@ -740,60 +740,60 @@ function Wt(e) {
 function wt(e) {
   const {
     className: t,
-    children: n,
+    children: s,
     asChild: l,
     ref: b,
-    color: s,
+    color: a,
     customColor: i,
     variant: m,
     ...f
-  } = e, a = X(lt), v = et(lt), d = R((I) => I.value), c = v.value, C = R((I) => I.steps.get(c)), y = R((I) => I.steps), A = Array.from(y.keys()).indexOf(c) + 1, g = Z(d, c, C, y), x = s ?? a.color, T = i ?? a.customColor, M = m ?? a.variant ?? "normal", V = Ot(x, T, g), w = dt(T, g, !0), O = l ? z : "div", h = M === "dot";
+  } = e, n = X(lt), v = et(lt), c = R((I) => I.value), d = v.value, C = R((I) => I.steps.get(d)), y = R((I) => I.steps), A = Array.from(y.keys()).indexOf(d) + 1, g = Z(c, d, C, y), x = a ?? n.color, T = i ?? n.customColor, M = m ?? n.variant ?? "normal", V = Ot(x, T, g), w = ct(T, g, !0), O = l ? z : "div", h = M === "dot";
   return /* @__PURE__ */ k(
     O,
     {
       "data-state": g,
       "data-variant": M,
       "data-slot": "stepper-indicator",
-      dir: a.dir,
+      dir: n.dir,
       ...f,
       ref: b,
       style: { ...f.style, ...w },
       className: B(
-        "flex shrink-0 items-center justify-center rounded-full border-2 font-medium text-sm transition-colors",
-        h ? "size-7 data-[variant=dot]:size-2" : "size-7",
+        "ds:flex ds:shrink-0 ds:items-center ds:justify-center ds:rounded-full ds:border-2 ds:font-medium ds:text-sm ds:transition-colors",
+        h ? "ds:size-7 ds:data-[variant=dot]:size-2" : "ds:size-7",
         V,
         t
       ),
-      children: !h && (typeof n == "function" ? n(g) : n || (g === "completed" ? /* @__PURE__ */ k(kt, { className: "size-4" }) : A))
+      children: !h && (typeof s == "function" ? s(g) : s || (g === "completed" ? /* @__PURE__ */ k(kt, { className: "ds:size-4" }) : A))
     }
   );
 }
 function Bt(e) {
   const {
     className: t,
-    asChild: n,
+    asChild: s,
     forceMount: l = !1,
     ref: b,
-    color: s,
+    color: a,
     customColor: i,
     ...m
-  } = e, f = X(pt), a = et(pt), v = R((h) => h.value), d = f.orientation, c = f.labelPosition ?? "right", C = R((h) => h.steps);
-  if (Array.from(C.keys()).indexOf(a.value) === C.size - 1 && !l)
+  } = e, f = X(pt), n = et(pt), v = R((h) => h.value), c = f.orientation, d = f.labelPosition ?? "right", C = R((h) => h.steps);
+  if (Array.from(C.keys()).indexOf(n.value) === C.size - 1 && !l)
     return null;
   const g = Z(
     v,
-    a.value,
-    a.stepState,
+    n.value,
+    n.stepState,
     C,
     "separator"
-  ), x = s ?? f.color, T = i ?? f.customColor, M = xt(x, T, g), V = dt(T, g, !1), w = n ? z : "div", O = () => d === "horizontal" ? "h-px flex-1" : c === "top" || c === "bottom" ? "w-px absolute left-1/2 -translate-x-1/2 top-full h-full -z-10" : c === "left" ? "w-px absolute right-0 top-full h-full -z-10 translate-x-1/2" : "w-px absolute left-0 top-full h-full -z-10 -translate-x-1/2";
+  ), x = a ?? f.color, T = i ?? f.customColor, M = xt(x, T, g), V = ct(T, g, !1), w = s ? z : "div", O = () => c === "horizontal" ? "h-px flex-1" : d === "top" || d === "bottom" ? "w-px absolute left-1/2 -translate-x-1/2 top-full h-full -z-10" : d === "left" ? "w-px absolute right-0 top-full h-full -z-10 translate-x-1/2" : "w-px absolute left-0 top-full h-full -z-10 -translate-x-1/2";
   return /* @__PURE__ */ k(
     w,
     {
       role: "separator",
       "aria-hidden": "true",
-      "aria-orientation": d,
-      "data-orientation": d,
+      "aria-orientation": c,
+      "data-orientation": c,
       "data-state": g,
       "data-slot": "stepper-separator",
       dir: f.dir,
@@ -801,7 +801,7 @@ function Bt(e) {
       ref: b,
       style: { ...m.style, ...V },
       className: B(
-        "transition-colors",
+        "ds:transition-colors",
         O(),
         M,
         t
@@ -810,91 +810,91 @@ function Bt(e) {
   );
 }
 function Re(e) {
-  const { className: t, asChild: n, ref: l, ...b } = e, s = X(ft), i = et(ft), m = H(s.id, "title", i.value);
+  const { className: t, asChild: s, ref: l, ...b } = e, a = X(ft), i = et(ft), m = H(a.id, "title", i.value);
   return /* @__PURE__ */ k(
-    n ? z : "span",
+    s ? z : "span",
     {
       id: m,
       "data-slot": "title",
-      dir: s.dir,
+      dir: a.dir,
       ...b,
       ref: l,
-      className: B("font-medium text-sm", t)
+      className: B("ds:font-medium ds:text-sm", t)
     }
   );
 }
 function Te(e) {
-  const { className: t, asChild: n, ref: l, ...b } = e, s = X(mt), i = et(mt), m = H(s.id, "description", i.value);
+  const { className: t, asChild: s, ref: l, ...b } = e, a = X(mt), i = et(mt), m = H(a.id, "description", i.value);
   return /* @__PURE__ */ k(
-    n ? z : "span",
+    s ? z : "span",
     {
       id: m,
       "data-slot": "description",
-      dir: s.dir,
+      dir: a.dir,
       ...b,
       ref: l,
-      className: B("text-muted-foreground text-xs", t)
+      className: B("ds:text-muted-foreground ds:text-xs", t)
     }
   );
 }
 function Me(e) {
   const {
     value: t,
-    asChild: n,
+    asChild: s,
     forceMount: l = !1,
     ref: b,
-    className: s,
+    className: a,
     ...i
-  } = e, m = X(Et), f = R((c) => c.value), a = H(m.id, "content", t), v = H(m.id, "trigger", t);
+  } = e, m = X(Et), f = R((d) => d.value), n = H(m.id, "content", t), v = H(m.id, "trigger", t);
   return t !== f && !l ? null : /* @__PURE__ */ k(
-    n ? z : "div",
+    s ? z : "div",
     {
-      id: a,
+      id: n,
       role: "tabpanel",
       "aria-labelledby": v,
       "data-slot": "stepper-content",
       dir: m.dir,
       ...i,
       ref: b,
-      className: B("flex-1 outline-none", s)
+      className: B("ds:flex-1 ds:outline-none", a)
     }
   );
 }
 function De(e) {
-  const { asChild: t, disabled: n, ...l } = e, b = tt(Nt), s = R((c) => c.value), i = R((c) => c.steps), m = Array.from(i.keys()), f = s ? m.indexOf(s) : -1, a = n || f <= 0, v = o.useCallback(
-    async (c) => {
-      if (l.onClick?.(c), c.defaultPrevented || a) return;
+  const { asChild: t, disabled: s, ...l } = e, b = tt(Nt), a = R((d) => d.value), i = R((d) => d.steps), m = Array.from(i.keys()), f = a ? m.indexOf(a) : -1, n = s || f <= 0, v = o.useCallback(
+    async (d) => {
+      if (l.onClick?.(d), d.defaultPrevented || n) return;
       const C = Math.max(f - 1, 0), y = m[C];
       y && b.setState("value", y);
     },
-    [l.onClick, a, f, m, b]
+    [l.onClick, n, f, m, b]
   );
   return /* @__PURE__ */ k(
     t ? z : "button",
     {
       type: "button",
       "data-slot": "stepper-prev",
-      disabled: a,
+      disabled: n,
       ...l,
       onClick: v
     }
   );
 }
 function Oe(e) {
-  const { asChild: t, disabled: n, ...l } = e, b = tt(Rt), s = R((c) => c.value), i = R((c) => c.steps), m = Array.from(i.keys()), f = s ? m.indexOf(s) : -1, a = n || f >= m.length - 1, v = o.useCallback(
-    async (c) => {
-      if (l.onClick?.(c), c.defaultPrevented || a) return;
+  const { asChild: t, disabled: s, ...l } = e, b = tt(Rt), a = R((d) => d.value), i = R((d) => d.steps), m = Array.from(i.keys()), f = a ? m.indexOf(a) : -1, n = s || f >= m.length - 1, v = o.useCallback(
+    async (d) => {
+      if (l.onClick?.(d), d.defaultPrevented || n) return;
       const C = Math.min(f + 1, m.length - 1), y = m[C];
       y && await b.setStateWithValidation(y, "next");
     },
-    [l.onClick, a, f, m, b]
+    [l.onClick, n, f, m, b]
   );
   return /* @__PURE__ */ k(
     t ? z : "button",
     {
       type: "button",
       "data-slot": "stepper-next",
-      disabled: a,
+      disabled: n,
       ...l,
       onClick: v
     }