@sth87/shadcn-design-system 0.0.1

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

@@ -0,0 +1,886 @@
+import { jsx as k, jsxs as Pt } from "react/jsx-runtime";
+import { Slot as z, cn as B, useComposedRefs as vt } from "@dsui/ui/index";
+import { Check as kt } from "lucide-react";
+import * as o from "react";
+const gt = "Stepper", At = "StepperList", ct = "StepperItem", at = "StepperTrigger", lt = "StepperIndicator", ft = "StepperSeparator", pt = "StepperTitle", mt = "StepperDescription", Et = "StepperContent", Nt = "StepperPrev", Rt = "StepperNext", Tt = "stepperFocusGroup.onEntryFocus", Mt = { bubbles: !1, cancelable: !0 }, Dt = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], st = {
+  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"
+    },
+    separator: {
+      active: "bg-primary",
+      completed: "bg-primary",
+      inactive: "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"
+    },
+    separator: {
+      active: "bg-secondary",
+      completed: "bg-secondary",
+      inactive: "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"
+    },
+    separator: {
+      active: "bg-accent",
+      completed: "bg-accent",
+      inactive: "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"
+    },
+    separator: {
+      active: "bg-destructive",
+      completed: "bg-destructive",
+      inactive: "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"
+    },
+    separator: {
+      active: "bg-muted",
+      completed: "bg-muted",
+      inactive: "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"
+    },
+    separator: {
+      active: "bg-success",
+      completed: "bg-success",
+      inactive: "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"
+    },
+    separator: {
+      active: "bg-error",
+      completed: "bg-error",
+      inactive: "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"
+    },
+    separator: {
+      active: "bg-warning",
+      completed: "bg-warning",
+      inactive: "bg-border"
+    }
+  }
+};
+function Ot(e, t, n) {
+  return t ? "" : e ? st[e].indicator[n] : st.primary.indicator[n];
+}
+function xt(e, t, n) {
+  return t ? "" : e ? st[e].separator[n] : st.primary.separator[n];
+}
+function dt(e, t, n) {
+  if (e)
+    return n ? t === "active" || t === "completed" ? {
+      borderColor: e,
+      backgroundColor: e,
+      color: "white"
+    } : {
+      borderColor: "hsl(var(--muted))",
+      backgroundColor: "hsl(var(--background))",
+      color: "hsl(var(--muted-foreground))"
+    } : t === "active" || t === "completed" ? {
+      backgroundColor: e
+    } : {
+      backgroundColor: "hsl(var(--border))"
+    };
+}
+function H(e, t, n) {
+  return `${e}-${t}-${n}`;
+}
+const Vt = {
+  ArrowLeft: "prev",
+  ArrowUp: "prev",
+  ArrowRight: "next",
+  ArrowDown: "next",
+  PageUp: "first",
+  Home: "first",
+  PageDown: "last",
+  End: "last"
+};
+function Ft(e, t) {
+  return t !== "rtl" ? e : e === "ArrowLeft" ? "ArrowRight" : e === "ArrowRight" ? "ArrowLeft" : e;
+}
+function _t(e, t, n) {
+  const l = Ft(e.key, t);
+  if (!(n === "horizontal" && ["ArrowUp", "ArrowDown"].includes(l)) && !(n === "vertical" && ["ArrowLeft", "ArrowRight"].includes(l)))
+    return Vt[l];
+}
+function yt(e, t = !1) {
+  const n = document.activeElement;
+  for (const l of e) {
+    const b = l.current;
+    if (b && (b === n || (b.focus({ preventScroll: t }), document.activeElement !== n)))
+      return;
+  }
+}
+function Lt(e, t) {
+  return e.map(
+    (n, l) => e[(t + l) % e.length]
+  );
+}
+const Q = typeof window > "u" ? o.useEffect : o.useLayoutEffect;
+function zt(e) {
+  const t = o.useRef(e);
+  return Q(() => {
+    t.current = e;
+  }), t;
+}
+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";
+}
+const Kt = o.createContext(void 0);
+function $t(e) {
+  const t = o.useContext(Kt);
+  return e ?? t ?? "ltr";
+}
+const Ct = o.createContext(null);
+function tt(e) {
+  const t = o.useContext(Ct);
+  if (!t)
+    throw new Error(`\`${e}\` must be used within \`${gt}\``);
+  return t;
+}
+function R(e) {
+  const t = tt("useStore"), n = o.useCallback(
+    () => e(t.getState()),
+    [t, e]
+  );
+  return o.useSyncExternalStore(t.subscribe, n, n);
+}
+const St = o.createContext(null);
+function X(e) {
+  const t = o.useContext(St);
+  if (!t)
+    throw new Error(`\`${e}\` must be used within \`${gt}\``);
+  return t;
+}
+function Xt(e) {
+  const {
+    value: t,
+    defaultValue: n,
+    onValueChange: l,
+    onValueComplete: b,
+    onValueAdd: s,
+    onValueRemove: i,
+    onValidate: m,
+    id: p,
+    dir: a,
+    orientation: v = "horizontal",
+    activationMode: d = "automatic",
+    asChild: c,
+    disabled: C = !1,
+    nonInteractive: y = !1,
+    loop: A = !1,
+    color: g,
+    customColor: x,
+    variant: T = "normal",
+    labelPosition: M = "right",
+    className: V,
+    ...w
+  } = e, O = bt(() => /* @__PURE__ */ new Set()), h = bt(() => ({
+    steps: /* @__PURE__ */ new Map(),
+    value: t ?? n ?? ""
+  })), I = zt({
+    onValueChange: l,
+    onValueComplete: b,
+    onValueAdd: s,
+    onValueRemove: i,
+    onValidate: m
+  }), u = o.useMemo(() => ({
+    subscribe: (r) => (O.current.add(r), () => O.current.delete(r)),
+    getState: () => h.current,
+    setState: (r, S) => {
+      Object.is(h.current[r], S) || (r === "value" && typeof S == "string" ? (h.current.value = S, I.current.onValueChange?.(S)) : h.current[r] = S, u.notify());
+    },
+    setStateWithValidation: async (r, S) => {
+      if (!I.current.onValidate)
+        return u.setState("value", r), !0;
+      try {
+        const N = await I.current.onValidate(r, S);
+        return N && u.setState("value", r), N;
+      } catch {
+        return !1;
+      }
+    },
+    hasValidation: () => !!I.current.onValidate,
+    addStep: (r, S, N) => {
+      const E = { value: r, completed: S, disabled: N };
+      h.current.steps.set(r, E), I.current.onValueAdd?.(r), u.notify();
+    },
+    removeStep: (r) => {
+      h.current.steps.delete(r), I.current.onValueRemove?.(r), u.notify();
+    },
+    setStep: (r, S, N) => {
+      const E = h.current.steps.get(r);
+      if (E) {
+        const P = { ...E, completed: S, disabled: N };
+        h.current.steps.set(r, P), S !== E.completed && I.current.onValueComplete?.(r, S), u.notify();
+      }
+    },
+    notify: () => {
+      for (const r of O.current)
+        r();
+    }
+  }), [O, h, I]);
+  Q(() => {
+    t !== void 0 && u.setState("value", t);
+  }, [t, u]);
+  const F = $t(a), K = o.useId(), $ = p ?? K, _ = o.useMemo(
+    () => ({
+      id: $,
+      dir: F,
+      orientation: v,
+      activationMode: d,
+      disabled: C,
+      nonInteractive: y,
+      loop: A,
+      color: g,
+      customColor: x,
+      variant: T,
+      labelPosition: M
+    }),
+    [
+      $,
+      F,
+      v,
+      d,
+      C,
+      y,
+      A,
+      g,
+      x,
+      T,
+      M
+    ]
+  ), Y = c ? z : "div";
+  return /* @__PURE__ */ k(Ct.Provider, { value: u, children: /* @__PURE__ */ k(St.Provider, { value: _, children: /* @__PURE__ */ k(
+    Y,
+    {
+      id: $,
+      "data-disabled": C ? "" : void 0,
+      "data-orientation": v,
+      "data-slot": "stepper",
+      dir: F,
+      ...w,
+      className: B(
+        "flex gap-6",
+        v === "horizontal" ? "w-full flex-col" : "flex-row",
+        V
+      )
+    }
+  ) }) });
+}
+const ht = o.createContext(null);
+function Ut(e) {
+  const t = o.useContext(ht);
+  if (!t)
+    throw new Error(
+      `\`${e}\` must be used within \`FocusProvider\``
+    );
+  return t;
+}
+function Jt(e) {
+  const { className: t, children: n, asChild: l, ref: b, ...s } = e, i = X(At), m = i.orientation, p = 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) => {
+    v(r);
+  }, []), V = o.useCallback(() => {
+    c(!0);
+  }, []), w = o.useCallback(() => {
+    y((r) => r + 1);
+  }, []), O = o.useCallback(() => {
+    y((r) => r - 1);
+  }, []), h = o.useCallback((r) => {
+    g.current.set(r.id, r);
+  }, []), I = o.useCallback((r) => {
+    g.current.delete(r);
+  }, []), u = o.useCallback(() => Array.from(g.current.values()).filter((r) => r.ref.current).sort((r, S) => {
+    const N = r.ref.current, E = S.ref.current;
+    if (!N || !E) return 0;
+    const P = N.compareDocumentPosition(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);
+    },
+    [s.onBlur]
+  ), K = o.useCallback(
+    (r) => {
+      if (s.onFocus?.(r), r.defaultPrevented) return;
+      const S = !A.current;
+      if (r.target === r.currentTarget && S && !d) {
+        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 = p ? E.find((W) => W.value === p) : void 0, j = E.find((W) => W.active), rt = E.find((W) => W.id === a), ot = [
+            P,
+            j,
+            rt,
+            ...E
+          ].filter(Boolean).map((W) => W.ref);
+          yt(ot, !1);
+        }
+      }
+      A.current = !1;
+    },
+    [s.onFocus, d, p, a]
+  ), $ = o.useCallback(
+    (r) => {
+      s.onMouseDown?.(r), !r.defaultPrevented && (A.current = !0);
+    },
+    [s.onMouseDown]
+  ), _ = o.useMemo(
+    () => ({
+      tabStopId: a,
+      onItemFocus: M,
+      onItemShiftTab: V,
+      onFocusableItemAdd: w,
+      onFocusableItemRemove: O,
+      onItemRegister: h,
+      onItemUnregister: I,
+      getItems: u
+    }),
+    [
+      a,
+      M,
+      V,
+      w,
+      O,
+      h,
+      I,
+      u
+    ]
+  ), Y = l ? z : "div";
+  return /* @__PURE__ */ k(ht.Provider, { value: _, children: /* @__PURE__ */ k(
+    Y,
+    {
+      role: "tablist",
+      "aria-orientation": m,
+      "data-orientation": m,
+      "data-slot": "stepper-list",
+      dir: i.dir,
+      tabIndex: d || C === 0 ? -1 : 0,
+      ...s,
+      ref: T,
+      className: B(
+        "flex outline-none",
+        m === "horizontal" ? "flex-row items-center" : "flex-col items-start",
+        t
+      ),
+      onBlur: F,
+      onFocus: K,
+      onMouseDown: $,
+      children: n
+    }
+  ) });
+}
+const It = o.createContext(
+  null
+);
+function et(e) {
+  const t = o.useContext(It);
+  if (!t)
+    throw new Error(`\`${e}\` must be used within \`${ct}\``);
+  return t;
+}
+function Qt(e) {
+  const {
+    value: t,
+    completed: n = !1,
+    disabled: l = !1,
+    asChild: b,
+    className: s,
+    children: i,
+    ref: m,
+    ...p
+  } = 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), () => {
+    v.removeStep(t);
+  }), [t, n, l]), Q(() => {
+    v.setStep(t, n, l);
+  }, [t, n, 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,
+      stepState: y
+    }),
+    [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`;
+  }, h = o.useMemo(() => {
+    if (d === "horizontal" && (c === "top" || c === "bottom")) {
+      const u = o.Children.toArray(i);
+      let F = null, K = null, $ = null;
+      const _ = [];
+      u.forEach((P) => {
+        if (o.isValidElement(P)) {
+          const j = P.props["data-slot"];
+          j === "stepper-trigger" || P.type === Wt ? (F = P, o.Children.toArray(
+            P.props.children
+          ).forEach((U) => {
+            o.isValidElement(U) && (U.props["data-slot"] === "stepper-indicator" || U.type === wt) && (K = U);
+          })) : j === "stepper-separator" || P.type === Bt ? $ = P : _.push(P);
+        } else
+          _.push(P);
+      });
+      const Y = T - 1, r = Y >= 0 ? x[Y] : null, S = r ? Z(
+        C,
+        r,
+        A.get(r),
+        A,
+        "separator"
+      ) : "inactive";
+      let N = null;
+      if (!M) {
+        const P = a.color, j = a.customColor;
+        N = /* @__PURE__ */ k(
+          "div",
+          {
+            className: B(
+              "h-px flex-1 transition-colors",
+              xt(P, j, S)
+            ),
+            style: dt(j, S, !1),
+            "aria-hidden": "true"
+          },
+          "left-separator"
+        );
+      }
+      const E = /* @__PURE__ */ Pt(
+        "div",
+        {
+          className: "flex w-full items-center justify-center",
+          children: [
+            N,
+            M && /* @__PURE__ */ k("div", { className: "h-px flex-1 bg-transparent", "aria-hidden": "true" }),
+            K,
+            !V && $,
+            V && /* @__PURE__ */ k("div", { className: "h-px flex-1 bg-transparent", "aria-hidden": "true" })
+          ]
+        },
+        "indicator-row"
+      );
+      return c === "top" ? [F, E, ..._] : [E, F, ..._];
+    }
+    return i;
+  }, [
+    i,
+    d,
+    c,
+    M,
+    V,
+    T,
+    x,
+    A,
+    C,
+    a.color,
+    a.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-state": g,
+      "data-slot": "stepper-item",
+      "data-label-position": c,
+      dir: a.dir,
+      ...p,
+      ref: m,
+      className: B(O(), s),
+      children: h
+    }
+  ) });
+}
+function Wt(e) {
+  const { asChild: t, disabled: n, className: l, ref: b, ...s } = e, i = X(at), m = et(at), p = tt(at), a = Ut(at), v = R((f) => f.value), d = m.value, c = R((f) => f.steps.get(d)), C = i.activationMode, y = i.orientation, A = i.loop, g = i.labelPosition ?? "right", x = R((f) => f.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);
+  o.useEffect(() => {
+    function f(q) {
+      Dt.includes(q.key) && (r.current = !0);
+    }
+    function D() {
+      r.current = !1;
+    }
+    return document.addEventListener("keydown", f), document.addEventListener("keyup", D), () => {
+      document.removeEventListener("keydown", f), document.removeEventListener("keyup", D);
+    };
+  }, []), Q(() => (a.onItemRegister({
+    id: w,
+    ref: _,
+    value: d,
+    active: K,
+    disabled: !!u
+  }), u || a.onFocusableItemAdd(), () => {
+    a.onItemUnregister(w), u || a.onFocusableItemRemove();
+  }), [a, w, d, K, u]);
+  const N = o.useCallback(
+    async (f) => {
+      if (s.onClick?.(f), !f.defaultPrevented && !u && !i.nonInteractive) {
+        const D = Array.from(x.keys()).indexOf(v ?? ""), L = Array.from(x.keys()).indexOf(d) > D ? "next" : "prev";
+        await p.setStateWithValidation(d, L);
+      }
+    },
+    [
+      u,
+      i.nonInteractive,
+      p,
+      d,
+      v,
+      x,
+      s.onClick
+    ]
+  ), E = o.useCallback(
+    async (f) => {
+      if (s.onFocus?.(f), f.defaultPrevented) return;
+      a.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 p.setStateWithValidation(d, G);
+      }
+      S.current = !1;
+    },
+    [
+      a,
+      w,
+      C,
+      F,
+      u,
+      i.nonInteractive,
+      p,
+      d,
+      v,
+      x,
+      s.onFocus
+    ]
+  ), P = o.useCallback(
+    async (f) => {
+      if (s.onKeyDown?.(f), f.defaultPrevented) return;
+      if (f.key === "Enter" && i.nonInteractive) {
+        f.preventDefault();
+        return;
+      }
+      if ((f.key === "Enter" || f.key === " ") && C === "manual" && !i.nonInteractive) {
+        f.preventDefault(), !u && _.current && _.current.click();
+        return;
+      }
+      if (f.key === "Tab" && f.shiftKey) {
+        a.onItemShiftTab();
+        return;
+      }
+      if (f.target !== f.currentTarget) return;
+      const D = _t(f, i.dir, y);
+      if (D !== void 0) {
+        if (f.metaKey || f.ctrlKey || f.altKey || f.shiftKey)
+          return;
+        f.preventDefault();
+        const q = a.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 === f.currentTarget
+          );
+          L = A ? Lt(L, G + 1) : L.slice(G + 1);
+        }
+        if (p.hasValidation() && L.length > 0) {
+          const nt = L[0]?.current, J = q.find(
+            (it) => it.ref.current === nt
+          );
+          if (J && J.value !== d) {
+            const it = Array.from(x.keys()).indexOf(
+              v || ""
+            ), ut = Array.from(x.keys()).indexOf(
+              J.value
+            ) > it ? "next" : "prev";
+            if (ut === "next") {
+              if (!await p.setStateWithValidation(
+                J.value,
+                ut
+              )) return;
+            } else
+              p.setState("value", J.value);
+            queueMicrotask(() => nt?.focus());
+            return;
+          }
+        }
+        queueMicrotask(() => yt(L));
+      }
+    },
+    [
+      a,
+      i.nonInteractive,
+      i.dir,
+      C,
+      y,
+      A,
+      u,
+      s.onKeyDown,
+      p,
+      d,
+      v,
+      x
+    ]
+  ), j = o.useCallback(
+    (f) => {
+      s.onMouseDown?.(f), !f.defaultPrevented && (S.current = !0, u ? f.preventDefault() : a.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]);
+  return /* @__PURE__ */ k(
+    t ? z : "button",
+    {
+      id: w,
+      role: "tab",
+      type: "button",
+      "aria-controls": O,
+      "aria-current": F ? "step" : void 0,
+      "aria-describedby": `${h} ${I}`,
+      "aria-posinset": M,
+      "aria-selected": F,
+      "aria-setsize": V,
+      "data-disabled": u ? "" : void 0,
+      "data-state": $,
+      "data-slot": "stepper-trigger",
+      "data-wrap-indicator": U ? "" : void 0,
+      disabled: u,
+      tabIndex: K ? 0 : -1,
+      ...s,
+      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",
+        U ? "" : rt(),
+        l
+      ),
+      onClick: N,
+      onFocus: E,
+      onKeyDown: P,
+      onMouseDown: j,
+      children: ot
+    }
+  );
+}
+function wt(e) {
+  const {
+    className: t,
+    children: n,
+    asChild: l,
+    ref: b,
+    color: s,
+    customColor: i,
+    variant: m,
+    ...p
+  } = 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";
+  return /* @__PURE__ */ k(
+    O,
+    {
+      "data-state": g,
+      "data-variant": M,
+      "data-slot": "stepper-indicator",
+      dir: a.dir,
+      ...p,
+      ref: b,
+      style: { ...p.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",
+        V,
+        t
+      ),
+      children: !h && (typeof n == "function" ? n(g) : n || (g === "completed" ? /* @__PURE__ */ k(kt, { className: "size-4" }) : A))
+    }
+  );
+}
+function Bt(e) {
+  const {
+    className: t,
+    asChild: n,
+    forceMount: l = !1,
+    ref: b,
+    color: s,
+    customColor: i,
+    ...m
+  } = e, p = X(ft), a = et(ft), v = R((h) => h.value), d = p.orientation, c = p.labelPosition ?? "right", C = R((h) => h.steps);
+  if (Array.from(C.keys()).indexOf(a.value) === C.size - 1 && !l)
+    return null;
+  const g = Z(
+    v,
+    a.value,
+    a.stepState,
+    C,
+    "separator"
+  ), x = s ?? p.color, T = i ?? p.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";
+  return /* @__PURE__ */ k(
+    w,
+    {
+      role: "separator",
+      "aria-hidden": "true",
+      "aria-orientation": d,
+      "data-orientation": d,
+      "data-state": g,
+      "data-slot": "stepper-separator",
+      dir: p.dir,
+      ...m,
+      ref: b,
+      style: { ...m.style, ...V },
+      className: B(
+        "transition-colors",
+        O(),
+        M,
+        t
+      )
+    }
+  );
+}
+function Zt(e) {
+  const { className: t, asChild: n, ref: l, ...b } = e, s = X(pt), i = et(pt), m = H(s.id, "title", i.value);
+  return /* @__PURE__ */ k(
+    n ? z : "span",
+    {
+      id: m,
+      "data-slot": "title",
+      dir: s.dir,
+      ...b,
+      ref: l,
+      className: B("font-medium 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);
+  return /* @__PURE__ */ k(
+    n ? z : "span",
+    {
+      id: m,
+      "data-slot": "description",
+      dir: s.dir,
+      ...b,
+      ref: l,
+      className: B("text-muted-foreground text-xs", t)
+    }
+  );
+}
+function ee(e) {
+  const {
+    value: t,
+    asChild: n,
+    forceMount: l = !1,
+    ref: b,
+    className: s,
+    ...i
+  } = e, m = X(Et), p = R((c) => c.value), a = H(m.id, "content", t), v = H(m.id, "trigger", t);
+  return t !== p && !l ? null : /* @__PURE__ */ k(
+    n ? z : "div",
+    {
+      id: a,
+      role: "tabpanel",
+      "aria-labelledby": v,
+      "data-slot": "stepper-content",
+      dir: m.dir,
+      ...i,
+      ref: b,
+      className: B("flex-1 outline-none", s)
+    }
+  );
+}
+function re(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()), p = s ? m.indexOf(s) : -1, a = n || p <= 0, v = o.useCallback(
+    async (c) => {
+      if (l.onClick?.(c), c.defaultPrevented || a) return;
+      const C = Math.max(p - 1, 0), y = m[C];
+      y && b.setState("value", y);
+    },
+    [l.onClick, a, p, m, b]
+  );
+  return /* @__PURE__ */ k(
+    t ? z : "button",
+    {
+      type: "button",
+      "data-slot": "stepper-prev",
+      disabled: a,
+      ...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()), p = s ? m.indexOf(s) : -1, a = n || p >= m.length - 1, v = o.useCallback(
+    async (c) => {
+      if (l.onClick?.(c), c.defaultPrevented || a) return;
+      const C = Math.min(p + 1, m.length - 1), y = m[C];
+      y && await b.setStateWithValidation(y, "next");
+    },
+    [l.onClick, a, p, m, b]
+  );
+  return /* @__PURE__ */ k(
+    t ? z : "button",
+    {
+      type: "button",
+      "data-slot": "stepper-next",
+      disabled: a,
+      ...l,
+      onClick: v
+    }
+  );
+}
+export {
+  ee as StepperContent,
+  te as StepperDescription,
+  wt as StepperIndicator,
+  Qt as StepperItem,
+  Jt as StepperList,
+  oe as StepperNext,
+  re as StepperPrev,
+  Xt as StepperRoot,
+  Bt as StepperSeparator,
+  Zt as StepperTitle,
+  Wt as StepperTrigger,
+  R as useStepper
+};
+//# sourceMappingURL=Stepper.js.map