mada-design-system 0.3.0 → 0.4.0

package/index.es52.js

@@ -1,62 +1,45 @@
-import { jsx as u, jsxs as o } from "react/jsx-runtime";
-import { useState as p } from "react";
-import "./index.es2.js";
-import n from "./index.es154.js";
-import d from "./index.es155.js";
-import { Stack as y } from "./index.es41.js";
-import { cn as f } from "./index.es82.js";
-function R({ max: e = 5, onChange: a, value: m = 0, ...t }) {
-  const [s, i] = p(0);
-  return /* @__PURE__ */ u(y, { gap: "none", children: Array.from({ length: e }, (c, r) => /* @__PURE__ */ u(
-    x,
-    {
-      star: r + 1,
-      rating: m,
-      hoverRating: s,
-      onHover: (l) => !t.readOnly && i(l),
-      onClick: (l) => !t.readOnly && (a == null ? void 0 : a(l)),
-      ...t
+import { jsx as o } from "react/jsx-runtime";
+import { Slot as l } from "@radix-ui/react-slot";
+import { cva as g } from "./index.es104.js";
+import * as f from "react";
+import { cn as t } from "./index.es84.js";
+const m = g(
+  "inline-flex items-center rounded-full gap-space-02 [&>svg]:size-space-05 font-medium text-body-02 justify-center focus:outline-border-black focus:outline focus:outline-2 focus:outline-offset-1 transition-colors  disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-disabled-text-default-disabled disabled:bg-disabled-background-disabled",
+  {
+    variants: {
+      size: {
+        default: "p-[20px] ",
+        sm: "p-space-04"
+      },
+      colors: {
+        primary: "bg-button-background-primary text-icon-oncolor hover:bg-button-background-primary-hovered active:bg-button-background-primary-pressed focus:bg-button-background-primary-focused ",
+        neutral: "bg-button-background-black text-icon-oncolor hover:bg-button-background-black-hovered active:bg-button-background-black-pressed focus:bg-button-background-black-focused",
+        oncolor: "bg-button-background-oncolor text-icon-default hover:bg-button-background-oncolor-hovered active:bg-button-background-oncolor-pressed focus:bg-button-background-oncolor-focused disabled:text-disabled-icon-default-oncolor-disabled disabled:bg-button-background-disabled-oncolor",
+        "Secondary-Solid": "bg-button-background-neutral text-icon-default hover:bg-button-background-neutral-pressed active:bg-button-background-neutral-selected focus:bg-button-background-neutral-focused"
+      }
     },
-    r
-  )) });
-}
-function x({ star: e, rating: a, hoverRating: m, onHover: t, onClick: s, readOnly: i, variant: c = "default", size: r = "default" }) {
-  return /* @__PURE__ */ o(
-    "button",
-    {
-      onMouseEnter: () => t == null ? void 0 : t(e),
-      onMouseLeave: () => t == null ? void 0 : t(0),
-      onClick: () => s == null ? void 0 : s(e),
-      className: f("group relative flex   items-center justify-center", {
-        "size-space-08": r === "default",
-        "size-space-06": r === "sm",
-        "size-space-05": r === "xs",
-        "cursor-default": i
-      }),
-      children: [
-        /* @__PURE__ */ u(
-          n,
-          {
-            className: f("absolute size-full   shrink-0 ", {
-              "group-hover:opacity-0": !i
-            })
-          }
-        ),
-        /* @__PURE__ */ u(
-          d,
-          {
-            className: f("absolute   size-full   shrink-0   opacity-0 transition-all", {
-              "opacity-100": e <= (m || a),
-              "group-hover:opacity-100": !i,
-              "text-secondary": c === "default",
-              "text-primary": c === "brand"
-            })
-          }
-        )
-      ]
+    defaultVariants: {
+      size: "default",
+      colors: "primary"
     }
-  );
-}
+  }
+), p = f.forwardRef(
+  ({ className: e, size: n, colors: a, children: r, asChild: b = !1, position: d, ...c }, u) => {
+    const s = b ? l : "button", i = "floating-button";
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        className: t(
+          "fixed m-space-03 duration-300 animate-in slide-in-from-bottom-10",
+          d === "bottomRight" ? "bottom-0 end-0" : "bottom-0 start-0"
+        ),
+        children: /* @__PURE__ */ o(s, { className: t(m({ size: n, colors: a, className: e })), ref: u, "aria-label": i, ...c, children: r })
+      }
+    );
+  }
+);
+p.displayName = "FloatingButton";
 export {
-  R as Rating
+  p as FloatingButton,
+  m as floatingButtonVariants
 };

package/index.es53.js

@@ -1,79 +1,41 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import * as a from "react";
-import { cn as p } from "./index.es82.js";
-import { cva as b } from "./index.es103.js";
-import { ShouldRender as x } from "./index.es14.js";
-import h from "./index.es156.js";
-const f = b("group relative flex shrink-0 items-start justify-start ", {
+import { jsxs as s, Fragment as f, jsx as t } from "react/jsx-runtime";
+import { cva as y } from "./index.es104.js";
+import { forwardRef as g } from "react";
+import { cn as c } from "./index.es84.js";
+import "./index.es2.js";
+import { ShouldRender as p } from "./index.es14.js";
+const u = y("text-body-02", {
   variants: {
     variant: {
-      circle: "peer border border-border-primary-default text-text-primary items-center justify-center rounded-full w-space-06 h-space-06 text-body-02 font-medium data-[state=upcoming]:border-border-neutral-primary data-[state=upcoming]:text-border-neutral-primary data-[state=complete]:bg-background-primary  data-[state=complete]:text-icon-oncolor",
-      dot: "peer items-center justify-center rounded-full w-space-06 h-space-06 "
+      ordered: "list-decimal rtl:[&>ol]:list-[arabic-letters] [&>ol]:list-[lower-alpha] [&>ol]:list-inside ",
+      unordered: "list-disc [&>ul]:list-[circle] [&>ul]:list-inside ",
+      "with-icon": "list-none [&>li>svg]:size-space-04  [&>li]:gap-space-02 [&>ul]:list-inside [&>li]:flex [&>li]:items-center"
     },
-    orientation: {
-      vertical: "flex-col   ",
-      horizontal: "flex-row  "
+    colors: {
+      primary: "text-text-primary",
+      neutral: "text-text-default",
+      onColor: "text-text-oncolor-primary"
     }
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    variant: "ordered",
+    colors: "primary"
   }
-}), g = a.createContext({
-  variant: "circle",
-  orientation: "horizontal",
-  activeStep: 0
-}), S = ({ activeStep: o, variant: t, orientation: e, children: n }) => /* @__PURE__ */ r(g.Provider, { value: { activeStep: o, variant: t, orientation: e }, children: n }), w = a.forwardRef(
-  ({ activeStep: o = 0, orientation: t = "horizontal", variant: e = "circle", className: n, children: i, ...s }, c) => {
-    const d = a.useMemo(() => {
-      let u = 0;
-      const y = a.Children.count(i);
-      return a.Children.map(i, (l) => a.isValidElement(l) && l.type.displayName === "Step" ? a.cloneElement(l, {
-        "data-index": ++u,
-        lastStep: y === u
-      }) : l);
-    }, [i]);
-    return /* @__PURE__ */ r("div", { ref: c, className: p(f({ orientation: t }), n), ...s, "data-orientation": t, children: /* @__PURE__ */ r(S, { activeStep: o, variant: e, orientation: t, children: d }) });
-  }
-);
-w.displayName = "Stepper";
-const N = a.forwardRef(({ className: o, children: t, ...e }, n) => {
-  const { activeStep: i, variant: s } = a.useContext(g), c = (e == null ? void 0 : e["data-index"]) ?? 0, d = p({
-    upcoming: i < c,
-    current: i === c,
-    complete: i > c
-  });
-  return /* @__PURE__ */ m("div", { className: "relative flex min-w-space-08 max-w-space-12 flex-col gap-space-02 group-data-[orientation=vertical]:min-h-space-08 group-data-[orientation=vertical]:flex-row ", children: [
-    /* @__PURE__ */ m("div", { ref: n, "data-state": d, className: p(f({ variant: s }), o), ...e, children: [
-      /* @__PURE__ */ m(x, { shouldRender: s === "circle", children: [
-        d !== "complete" && /* @__PURE__ */ r("span", { children: c }),
-        d === "complete" && /* @__PURE__ */ r(h, { size: 20 })
-      ] }),
-      /* @__PURE__ */ r(x, { shouldRender: s === "dot", children: /* @__PURE__ */ r("div", { className: "size-space-02 bg-border-neutral-primary group-data-[state=current]:border-2 group-data-[state=current]:border-primary  group-data-[state=complete]:bg-background-primary   rounded-full" }) })
-    ] }),
-    /* @__PURE__ */ r("div", { className: "me-space-04 hidden flex-col gap-space-01 md:flex ", children: t }),
-    !e.lastStep && /* @__PURE__ */ r(v, {})
+}), L = ({ children: o, variant: l, colors: e, items: r, icon: i, className: n, ...a }) => {
+  const d = l === "ordered" ? "ol" : "ul";
+  return /* @__PURE__ */ s(f, { children: [
+    /* @__PURE__ */ t(p, { shouldRender: !!(r != null && r.length), children: /* @__PURE__ */ t(d, { className: c(u({ variant: l, colors: e, className: n })), ...a, children: r == null ? void 0 : r.map((m, x) => /* @__PURE__ */ s(h, { children: [
+      !!i && l === "with-icon" && i,
+      m
+    ] }, x)) }) }),
+    /* @__PURE__ */ t(p, { shouldRender: !(r != null && r.length), children: /* @__PURE__ */ t(d, { className: c(u({ variant: l, colors: e, className: n })), ...a, children: o }) })
   ] });
-});
-N.displayName = "Step";
-const C = a.forwardRef(({ className: o, children: t, ...e }, n) => /* @__PURE__ */ r("span", { ref: n, className: p("text-body-02 font-medium text-text-display", o), ...e, children: t }));
-C.displayName = "StepTitle";
-const R = a.forwardRef(
-  ({ className: o, children: t, ...e }, n) => /* @__PURE__ */ r("p", { ref: n, className: p("text-wrap text-body-01 text-text-paragraph-primary", o), ...e, children: t })
-);
-R.displayName = "StepDescription";
-const v = a.forwardRef(({ className: o, children: t, ...e }, n) => /* @__PURE__ */ r(
-  "div",
-  {
-    ref: n,
-    className: p(
-      "absolute start-space-06 top-space-04 h-[2px] w-[calc(100%_-_32px)] bg-border-background-neutral group-data-[orientation=vertical]:start-space-04  group-data-[orientation=vertical]:top-space-06  group-data-[orientation=vertical]:h-[calc(100%_-_32px)] group-data-[orientation=vertical]:w-[2px] peer-data-[state=complete]:bg-background-primary",
-      o
-    ),
-    ...e,
-    children: t
-  }
-));
-v.displayName = "StepConnector";
+};
+L.displayName = "List";
+const h = g(({ children: o, ...l }, e) => /* @__PURE__ */ t("li", { ref: e, ...l, className: "", children: o }));
+h.displayName = "ListItem";
 export {
-  N as Step,
-  R as StepDescription,
-  C as StepTitle,
-  w as Stepper
+  L as List,
+  h as ListItem
 };

package/index.es54.js

@@ -1,268 +1,62 @@
-import { jsx as s, jsxs as L } from "react/jsx-runtime";
-import O from "./index.es157.js";
-import * as t from "react";
-import { Button as T } from "./index.es22.js";
-import Q from "./index.es112.js";
-import U from "./index.es113.js";
-import { cn as m } from "./index.es82.js";
-const D = t.createContext(null);
-function V() {
-  const c = t.useContext(D);
-  if (!c)
-    throw new Error("useCarousel must be used within a <Carousel />");
-  return c;
-}
-const G = t.forwardRef(
-  ({ orientation: c = "horizontal", opts: i, setApi: S, plugins: k, className: P, children: d, ...y }, z) => {
-    const [E, r] = O(
-      {
-        ...i,
-        axis: c === "horizontal" ? "x" : "y"
-      },
-      k
-    ), [h, w] = t.useState(!1), [I, R] = t.useState(!1), a = t.useCallback((u) => {
-      u && (w(u.canScrollPrev()), R(u.canScrollNext()));
-    }, []), e = t.useCallback(() => {
-      r == null || r.scrollPrev();
-    }, [r]), $ = t.useCallback(() => {
-      r == null || r.scrollNext();
-    }, [r]), n = t.useCallback(
-      (u) => {
-        u.key === "ArrowLeft" ? (u.preventDefault(), e()) : u.key === "ArrowRight" && (u.preventDefault(), $());
-      },
-      [e, $]
-    );
-    return t.useEffect(() => {
-      !r || !S || S(r);
-    }, [r, S]), t.useEffect(() => {
-      if (r)
-        return a(r), r.on("reInit", a), r.on("select", a), () => {
-          r == null || r.off("select", a);
-        };
-    }, [r, a]), /* @__PURE__ */ s(
-      D.Provider,
-      {
-        value: {
-          carouselRef: E,
-          api: r,
-          opts: i,
-          orientation: c || ((i == null ? void 0 : i.axis) === "y" ? "vertical" : "horizontal"),
-          scrollPrev: e,
-          scrollNext: $,
-          canScrollPrev: h,
-          canScrollNext: I
-        },
-        children: /* @__PURE__ */ s(
-          "div",
-          {
-            ref: z,
-            onKeyDownCapture: n,
-            className: m("relative", P),
-            role: "region",
-            "aria-roledescription": "carousel",
-            ...y,
-            children: d
-          }
-        )
-      }
-    );
-  }
-);
-G.displayName = "CarouselPrimitive";
-const K = t.forwardRef(({ className: c, ...i }, S) => {
-  const { carouselRef: k, orientation: P } = V();
-  return /* @__PURE__ */ s("div", { ref: k, className: "overflow-hidden", children: /* @__PURE__ */ s("div", { ref: S, className: m("flex", P === "horizontal" ? "mx-4" : "-mt-4 flex-col", c), ...i }) });
-});
-K.displayName = "CarouselContent";
-const B = t.forwardRef(({ className: c, ...i }, S) => /* @__PURE__ */ s("div", { ref: S, role: "group", "aria-roledescription": "slide", className: m("min-w-0 shrink-0 grow-0 basis-full", c), ...i }));
-B.displayName = "CarouselItem";
-function re({
-  children: c,
-  className: i,
-  itemClassName: S,
-  showDots: k = !0,
-  showArrows: P = !0,
-  loop: d = !0,
-  autoplay: y = !1,
-  autoplayInterval: z = 5e3,
-  containerClassName: E,
-  maxDots: r = null,
-  itemWidth: h = 230,
-  slidesToShow: w,
-  showPartial: I = !0,
-  dir: R = "rtl",
-  type: a = "multiple"
-}) {
-  const [e, $] = t.useState(), [n, u] = t.useState(0), [o, F] = t.useState(0), [v, b] = t.useState(!1), [_, q] = t.useState(!0), A = t.useId(), M = t.useMemo(() => a === "single" ? "100%" : w ? `calc(${100 / w}% - ${I ? "1rem" : "0px"})` : typeof h == "number" ? `${h}px` : h, [a, w, h, I]), x = t.useCallback(
-    (l) => {
-      if (!e || v)
-        return;
-      b(!0);
-      const C = e.selectedScrollSnap();
-      if (C === l) {
-        b(!1);
-        return;
-      }
-      const p = C < l ? 1 : -1;
-      if (Math.abs(C - l) === 1) {
-        p > 0 ? e.scrollNext() : e.scrollPrev(), setTimeout(() => b(!1), 300);
-        return;
-      }
-      let N = 0;
-      const f = Math.abs(C - l), g = () => {
-        N < f ? (p > 0 ? e.scrollNext() : e.scrollPrev(), N++, setTimeout(g, 150)) : b(!1);
-      };
-      g();
+import { jsx as u, jsxs as o } from "react/jsx-runtime";
+import { useState as p } from "react";
+import "./index.es2.js";
+import n from "./index.es159.js";
+import d from "./index.es160.js";
+import { Stack as y } from "./index.es41.js";
+import { cn as f } from "./index.es84.js";
+function R({ max: e = 5, onChange: a, value: m = 0, ...t }) {
+  const [s, i] = p(0);
+  return /* @__PURE__ */ u(y, { gap: "none", children: Array.from({ length: e }, (c, r) => /* @__PURE__ */ u(
+    x,
+    {
+      star: r + 1,
+      rating: m,
+      hoverRating: s,
+      onHover: (l) => !t.readOnly && i(l),
+      onClick: (l) => !t.readOnly && (a == null ? void 0 : a(l)),
+      ...t
     },
-    [e, v]
-  ), j = t.useCallback(() => {
-    !e || v || (d && n === o - 1 ? x(0) : (b(!0), e.scrollNext(), setTimeout(() => b(!1), 300)));
-  }, [e, v, d, n, o, x]), H = t.useCallback(() => {
-    !e || v || (b(!0), d && n === 0 ? x(o - 1) : (e.scrollPrev(), setTimeout(() => b(!1), 300)));
-  }, [e, v, d, n, o, x]);
-  t.useEffect(() => {
-    if (!e)
-      return;
-    F(e.scrollSnapList().length);
-    const l = () => {
-      u(e.selectedScrollSnap());
-    };
-    return u(e.selectedScrollSnap()), e.on("select", l), e.on("reInit", l), () => {
-      e.off("select", l), e.off("reInit", l);
-    };
-  }, [e]), t.useEffect(() => {
-    if (!e)
-      return;
-    const l = e.scrollSnapList().length, C = e.canScrollNext(), p = e.canScrollPrev();
-    q(C || p || l > 1);
-  }, [e, o, n]), t.useEffect(() => {
-    if (!e || !y)
-      return;
-    const l = setInterval(() => {
-      v || j();
-    }, z);
-    return () => clearInterval(l);
-  }, [e, y, z, v, j]);
-  const J = () => {
-    if (!r || o <= r)
-      return Array.from({ length: o }).map((N, f) => /* @__PURE__ */ s(
-        "button",
-        {
-          className: `size-space-04 rounded-full transition-colors focus:outline-none ${n === f ? "bg-primary" : "bg-background-neutral-200"}`,
-          onClick: () => x(f),
-          disabled: v,
-          "aria-label": `Go to slide ${f + 1}`
-        },
-        `${A}-dot-${f}`
-      ));
-    const l = [], C = o - (r - 1), p = Math.max(1, C);
-    for (let N = 0; N < r; N++) {
-      let f, g;
-      N === r - 1 ? (f = o - 1, g = n >= o - p) : (f = N, g = n === N), l.push(
-        /* @__PURE__ */ s(
-          "button",
-          {
-            className: `size-space-04 rounded-full transition-colors focus:outline-none ${g ? "bg-primary" : "bg-background-neutral-200"}`,
-            onClick: () => x(f),
-            disabled: v,
-            "aria-label": `Go to slide ${f + 1}`
-          },
-          `${A}-dot-${N}`
-        )
-      );
-    }
-    return l;
-  };
-  return /* @__PURE__ */ s("div", { className: m("w-full ", E), children: /* @__PURE__ */ L(
-    G,
+    r
+  )) });
+}
+function x({ star: e, rating: a, hoverRating: m, onHover: t, onClick: s, readOnly: i, variant: c = "default", size: r = "default" }) {
+  return /* @__PURE__ */ o(
+    "button",
     {
-      dir: R,
-      setApi: $,
-      opts: {
-        align: "start",
-        loop: !1,
-        skipSnaps: !1,
-        containScroll: "trimSnaps",
-        dragFree: !1,
-        direction: R,
-        slidesToScroll: 1
-      },
-      className: m("relative w-full", i),
+      onMouseEnter: () => t == null ? void 0 : t(e),
+      onMouseLeave: () => t == null ? void 0 : t(0),
+      onClick: () => s == null ? void 0 : s(e),
+      className: f("group relative flex   items-center justify-center", {
+        "size-space-08": r === "default",
+        "size-space-06": r === "sm",
+        "size-space-05": r === "xs",
+        "cursor-default": i
+      }),
       children: [
-        /* @__PURE__ */ s(K, { className: " gap-space-04", children: t.Children.map(c, (l, C) => /* @__PURE__ */ s(
-          B,
+        /* @__PURE__ */ u(
+          n,
           {
-            className: m("transition-transform duration-300 ", S),
-            style: {
-              flex: `0 0 ${M}`,
-              maxWidth: M
-            },
-            children: l
-          },
-          `${A}-item-${C}`
-        )) }),
-        _ && /* @__PURE__ */ L(
-          "div",
+            className: f("absolute size-full   shrink-0 ", {
+              "group-hover:opacity-0": !i
+            })
+          }
+        ),
+        /* @__PURE__ */ u(
+          d,
           {
-            className: m({
-              "container mt-space-05 flex items-center justify-between": a === "multiple"
-            }),
-            children: [
-              P && /* @__PURE__ */ L(
-                "div",
-                {
-                  className: m({
-                    "flex items-center gap-2": a === "multiple",
-                    "absolute inset-x-space-04 top-1/2 z-0 mx-auto flex max-w-container -translate-y-1/2 items-center justify-between": a === "single"
-                  }),
-                  children: [
-                    /* @__PURE__ */ s(
-                      T,
-                      {
-                        onClick: H,
-                        colors: "primary",
-                        variant: !d && n === 0 ? "outline" : "default",
-                        size: "icon",
-                        "aria-label": "Previous slide",
-                        className: m(!d && n === 0 && "!pointer-events-none"),
-                        children: /* @__PURE__ */ s(Q, { className: "ltr:rotate-180" })
-                      }
-                    ),
-                    /* @__PURE__ */ s(
-                      T,
-                      {
-                        onClick: j,
-                        colors: "primary",
-                        variant: !d && n === o - 1 ? "outline" : "default",
-                        size: "icon",
-                        "aria-label": "Next slide",
-                        className: m(!d && n === o - 1 && "!pointer-events-none"),
-                        children: /* @__PURE__ */ s(U, { className: "ltr:rotate-180" })
-                      }
-                    )
-                  ]
-                }
-              ),
-              k && o > 0 && /* @__PURE__ */ s(
-                "div",
-                {
-                  className: m("flex  gap-space-02", {
-                    " items-center": a === "multiple",
-                    "absolute inset-x-0 bottom-space-08 justify-center": a === "single"
-                  }),
-                  children: J()
-                }
-              )
-            ]
+            className: f("absolute   size-full   shrink-0   opacity-0 transition-all", {
+              "opacity-100": e <= (m || a),
+              "group-hover:opacity-100": !i,
+              "text-secondary": c === "default",
+              "text-primary": c === "brand"
+            })
           }
         )
       ]
     }
-  ) });
+  );
 }
 export {
-  re as Carousel,
-  K as CarouselContent,
-  B as CarouselItem,
-  G as CarouselPrimitive
+  R as Rating
 };

package/index.es55.js

@@ -1,35 +1,88 @@
-import { jsx as r } from "react/jsx-runtime";
-import * as a from "@radix-ui/react-hover-card";
-import * as s from "react";
-import { cn as d } from "./index.es82.js";
-const v = a.Root, u = a.Trigger, l = s.forwardRef(({ className: t, align: o = "center", variant: e, sideOffset: i = 4, ...n }, p) => /* @__PURE__ */ r(
-  a.Content,
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import * as a from "react";
+import { cn as i } from "./index.es84.js";
+import { cva as b } from "./index.es104.js";
+import { ShouldRender as x } from "./index.es14.js";
+import h from "./index.es161.js";
+const f = b("group relative flex shrink-0 items-start justify-start ", {
+  variants: {
+    variant: {
+      circle: "peer border border-border-primary-default text-text-primary items-center justify-center rounded-full w-space-06 h-space-06 text-body-02 font-medium data-[state=upcoming]:border-border-neutral-primary data-[state=upcoming]:text-border-neutral-primary data-[state=complete]:bg-background-primary  data-[state=complete]:text-icon-oncolor",
+      dot: "peer items-center justify-center rounded-full w-space-06 h-space-06 "
+    },
+    orientation: {
+      vertical: "flex-col   ",
+      horizontal: "flex-row  "
+    }
+  }
+}), g = a.createContext({
+  variant: "circle",
+  orientation: "horizontal",
+  activeStep: 0
+}), S = ({ activeStep: o, variant: t, orientation: n, children: e }) => /* @__PURE__ */ r(g.Provider, { value: { activeStep: o, variant: t, orientation: n }, children: e }), w = a.forwardRef(
+  ({ activeStep: o = 0, orientation: t = "horizontal", variant: n = "circle", className: e, children: s, ...d }, l) => {
+    const c = a.useMemo(() => {
+      let p = 0;
+      const y = a.Children.count(s);
+      return a.Children.map(s, (m) => a.isValidElement(m) && m.type.displayName === "Step" ? a.cloneElement(m, {
+        "data-index": ++p,
+        lastStep: y === p
+      }) : m);
+    }, [s]);
+    return /* @__PURE__ */ r("div", { ref: l, className: i(f({ orientation: t }), e), ...d, "data-orientation": t, children: /* @__PURE__ */ r(S, { activeStep: o, variant: n, orientation: t, children: c }) });
+  }
+);
+w.displayName = "Stepper";
+const N = a.forwardRef(({ className: o, children: t, progressClassName: n, ...e }, s) => {
+  const { activeStep: d, variant: l } = a.useContext(g), c = (e == null ? void 0 : e["data-index"]) ?? 0, p = i({
+    upcoming: d < c,
+    current: d === c,
+    complete: d > c
+  });
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: i(
+        "relative flex min-w-space-08 max-w-space-12 flex-col gap-space-02 group-data-[orientation=vertical]:min-h-space-08 group-data-[orientation=vertical]:flex-row",
+        o
+      ),
+      children: [
+        /* @__PURE__ */ u("div", { ref: s, "data-state": p, className: i(f({ variant: l }), n), ...e, children: [
+          /* @__PURE__ */ u(x, { shouldRender: l === "circle", children: [
+            p !== "complete" && /* @__PURE__ */ r("span", { children: c }),
+            p === "complete" && /* @__PURE__ */ r(h, { size: 20 })
+          ] }),
+          /* @__PURE__ */ r(x, { shouldRender: l === "dot", children: /* @__PURE__ */ r("div", { className: "size-space-02 rounded-full bg-border-neutral-primary group-data-[state=current]:border-2  group-data-[state=current]:border-primary   group-data-[state=complete]:bg-background-primary" }) })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "me-space-04 hidden flex-col gap-space-01 md:flex ", children: t }),
+        !e.lastStep && /* @__PURE__ */ r(v, {})
+      ]
+    }
+  );
+});
+N.displayName = "Step";
+const C = a.forwardRef(({ className: o, children: t, ...n }, e) => /* @__PURE__ */ r("span", { ref: e, className: i("text-body-02 font-medium text-text-display", o), ...n, children: t }));
+C.displayName = "StepTitle";
+const R = a.forwardRef(
+  ({ className: o, children: t, ...n }, e) => /* @__PURE__ */ r("p", { ref: e, className: i("text-wrap text-body-01 text-text-paragraph-primary", o), ...n, children: t })
+);
+R.displayName = "StepDescription";
+const v = a.forwardRef(({ className: o, children: t, ...n }, e) => /* @__PURE__ */ r(
+  "div",
   {
-    ref: p,
-    align: o,
-    sideOffset: i,
-    className: d(
-      `z-50  flex max-w-96 origin-[--radix-hover-card-content-transform-origin] flex-col gap-space-02 text-wrap rounded p-space-02  text-caption-01 shadow-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2
-            [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-space-02 [&>svg]:top-space-02 [&>svg]:size-[24px]  [&>svg]:rounded-full [&>svg]:bg-icon-neutral [&>svg]:p-space-01 [&>svg]:text-icon-oncolor [&>svg~*]:ps-[32px]
-            `,
-      {
-        "bg-popover text-popover-foreground ": e === "default",
-        "bg-background-neutral-800 text-neutral-100": e === "inverted"
-      },
-      t
+    ref: e,
+    className: i(
+      "absolute start-space-06 top-space-04 h-[2px] w-[calc(100%_-_32px)] bg-border-background-neutral group-data-[orientation=vertical]:start-space-04  group-data-[orientation=vertical]:top-space-06  group-data-[orientation=vertical]:h-[calc(100%_-_32px)] group-data-[orientation=vertical]:w-[2px] peer-data-[state=complete]:bg-background-primary",
+      o
     ),
-    ...n
+    ...n,
+    children: t
   }
 ));
-l.displayName = a.Content.displayName;
-const c = s.forwardRef(({ className: t, ...o }, e) => /* @__PURE__ */ r("h5", { ref: e, className: d("font-semibold", t), ...o }));
-c.displayName = "HoverCardTitle";
-const m = s.forwardRef(({ className: t, ...o }, e) => /* @__PURE__ */ r("div", { ref: e, className: d(t), ...o }));
-m.displayName = "HoverCardDescription";
+v.displayName = "StepConnector";
 export {
-  v as HoverCard,
-  l as HoverCardContent,
-  m as HoverCardDescription,
-  c as HoverCardTitle,
-  u as HoverCardTrigger
+  N as Step,
+  R as StepDescription,
+  C as StepTitle,
+  w as Stepper
 };