@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/stepper-accordion.agent-ckKYZCIP.js

@@ -0,0 +1,322 @@
+import { jsx as t, jsxs as i, Fragment as y } from "react/jsx-runtime";
+import { forwardRef as F, useMemo as R, useImperativeHandle as P } from "react";
+import * as p from "@radix-ui/react-accordion";
+import { c as v } from "./index-D2ZczOXr.js";
+import { useTranslation as $ } from "react-i18next";
+import { s as E } from "./stepper-C-sIpRRU.js";
+import { C as H } from "./chevron-down-BX_NP2Yh.js";
+import { c as U } from "./createLucideIcon-CrFbzy84.js";
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const B = [
+  ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
+  ["path", { d: "M7 11V7a5 5 0 0 1 10 0v4", key: "fwvmzm" }]
+], D = U("lock", B), N = "step-", x = (e) => `${N}${e}`, G = (e) => Number(e.slice(N.length)), u = [
+  "ds:[stroke-dasharray:1] ds:[stroke-dashoffset:1]",
+  "ds:animate-[stepper-icon-draw_var(--animation-duration)_var(--ease-out)_forwards]",
+  "ds:motion-reduce:animate-none ds:motion-reduce:[stroke-dashoffset:0]"
+].join(" ");
+function O() {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className: "ds:size-4",
+      children: /* @__PURE__ */ t("path", { pathLength: "1", d: "M5 12l5 5L20 7", className: u })
+    }
+  );
+}
+function W() {
+  return /* @__PURE__ */ i(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className: "ds:size-4",
+      children: [
+        /* @__PURE__ */ t("path", { pathLength: "1", d: "M6 6l12 12", className: u }),
+        /* @__PURE__ */ t("path", { pathLength: "1", d: "M18 6l-12 12", className: u })
+      ]
+    }
+  );
+}
+const q = [
+  "ds:inline-flex ds:shrink-0 ds:items-center ds:justify-center",
+  "ds:min-w-[var(--min-target-size)] ds:min-h-[var(--min-target-size)]",
+  "ds:size-[var(--min-target-size)]",
+  "ds:rounded-[var(--radius-full)]",
+  "ds:text-[var(--font-size-sm)] ds:font-[var(--font-weight-semibold)]",
+  "ds:border ds:border-[var(--border)]",
+  "ds:transition-[background-color,border-color,color]",
+  "ds:duration-[var(--animation-duration)] ds:ease-[var(--ease-out)]",
+  "ds:motion-reduce:transition-none"
+].join(" "), X = v(q, {
+  variants: {
+    state: {
+      upcoming: "ds:bg-[var(--background)] ds:text-[var(--muted-foreground)]",
+      current: [
+        "ds:border-[var(--primary)] ds:bg-[var(--primary)] ds:text-[var(--primary-foreground)]",
+        "ds:animate-[stepper-indicator-pop_var(--animation-duration)_var(--ease-out)_both]",
+        "ds:motion-reduce:animate-none"
+      ].join(" "),
+      completed: "ds:border-[var(--primary)] ds:bg-[var(--primary)] ds:text-[var(--primary-foreground)]",
+      error: [
+        "ds:border-[var(--destructive)] ds:bg-[var(--destructive)] ds:text-[var(--destructive-foreground)]",
+        "ds:animate-[stepper-indicator-pop_var(--animation-duration)_var(--ease-out)_both]",
+        "ds:motion-reduce:animate-none"
+      ].join(" ")
+    }
+  }
+}), Z = v(
+  [
+    "ds:group/item ds:overflow-hidden ds:rounded-[var(--radius-md)]",
+    "ds:border ds:border-[var(--border)] ds:bg-[var(--card)]",
+    "ds:data-[state=open]:border-[var(--primary)]",
+    "ds:transition-[border-color] ds:duration-[var(--animation-duration)] ds:ease-[var(--ease-out)]",
+    "ds:motion-reduce:transition-none"
+  ].join(" "),
+  {
+    variants: {
+      tone: {
+        neutral: "",
+        error: "ds:data-[state=open]:border-[var(--destructive)]"
+      }
+    },
+    defaultVariants: { tone: "neutral" }
+  }
+), J = [
+  "ds:flex ds:w-full ds:items-center ds:gap-[var(--spacing-sm)]",
+  "ds:min-h-[var(--min-target-size)]",
+  "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
+  "ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]",
+  "ds:text-start",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:disabled:cursor-not-allowed",
+  "ds:transition-[background-color] ds:duration-[var(--animation-duration)] ds:ease-[var(--ease-out)]",
+  "ds:motion-reduce:transition-none",
+  "ds:hover:enabled:bg-[var(--muted)]/40"
+].join(" "), Q = (e) => [
+  "type-body-sm",
+  e === "current" || e === "error" ? "ds:font-[var(--font-weight-semibold)] ds:text-[var(--foreground)]" : e === "completed" ? "ds:text-[var(--foreground)]" : "ds:text-[var(--muted-foreground)]"
+].join(" "), Y = [
+  "type-meta ds:text-[var(--muted-foreground)]",
+  "ds:mt-[var(--spacing-xs)]"
+].join(" "), k = [
+  "type-meta",
+  "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]",
+  "ds:text-[var(--muted-foreground)]"
+].join(" "), ee = [
+  "ds:size-4 ds:shrink-0 ds:text-[var(--muted-foreground)]",
+  "ds:transition-transform ds:duration-[var(--animation-duration)] ds:ease-[var(--ease-out)]",
+  "ds:motion-reduce:transition-none",
+  "ds:group-data-[state=open]/item:rotate-180"
+].join(" "), te = [
+  "type-meta ds:text-[var(--muted-foreground)]",
+  "ds:ps-[calc(var(--min-target-size)+var(--spacing-md)+var(--spacing-sm))]",
+  "ds:pe-[var(--spacing-md)] ds:pb-[var(--spacing-sm)]",
+  "ds:group-data-[state=open]/item:hidden"
+].join(" "), re = [
+  "ds:overflow-hidden",
+  "ds:data-[state=open]:animate-[accordion-down_var(--animation-duration)_var(--ease-out)]",
+  "ds:data-[state=closed]:animate-[accordion-up_var(--animation-duration)_var(--ease-in)]"
+].join(" "), se = [
+  "ds:ps-[calc(var(--min-target-size)+var(--spacing-md)+var(--spacing-sm))]",
+  "ds:pe-[var(--spacing-md)] ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-md)]"
+].join(" "), ae = v("ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", {
+  variants: {}
+}), ne = F(
+  ({
+    activeStep: e,
+    steps: l,
+    onStepChange: o,
+    "aria-label": w,
+    id: g,
+    className: j,
+    ...C
+  }, _) => {
+    const { t: d } = $(), c = l.length, n = Math.max(0, Math.min(e, c - 1)), A = w ?? d("navigation.stepper.label"), f = d("navigation.stepper.edit"), S = d("navigation.stepper.locked"), z = d("navigation.stepper.completed"), L = d("navigation.stepper.error"), M = (s) => {
+      if (!s) return;
+      const r = G(s);
+      Number.isFinite(r) && r !== n && (o == null || o(r));
+    }, h = R(
+      () => ({
+        getCurrentStep: () => n,
+        getTotalSteps: () => c,
+        getOpenSteps: () => [n],
+        gotoStep: (s) => {
+          if (!o) return;
+          const r = Math.max(0, Math.min(s, Math.max(c - 1, 0)));
+          r !== n && o(r);
+        },
+        next: () => {
+          o && n < c - 1 && o(n + 1);
+        },
+        previous: () => {
+          o && n > 0 && o(n - 1);
+        }
+      }),
+      [n, c, o]
+    );
+    return P(_, () => h, [h]), /* @__PURE__ */ t(
+      p.Root,
+      {
+        type: "single",
+        value: x(n),
+        onValueChange: M,
+        collapsible: !1,
+        "aria-label": A,
+        id: g,
+        "data-component": "stepper-accordion",
+        "data-component-id": g,
+        className: ae({ className: j }),
+        ...C,
+        children: l.map((s, r) => {
+          const a = E(r, n, s.status), m = a === "current" || a === "error", V = a === "upcoming", T = a === "error" ? "error" : "neutral", b = d("navigation.stepper.stepN", { n: r + 1 }), I = a === "completed" ? /* @__PURE__ */ i(y, { children: [
+            /* @__PURE__ */ t(O, {}),
+            /* @__PURE__ */ t("span", { className: "ds:sr-only", children: z })
+          ] }) : a === "error" ? /* @__PURE__ */ i(y, { children: [
+            /* @__PURE__ */ t(W, {}),
+            /* @__PURE__ */ t("span", { className: "ds:sr-only", children: L })
+          ] }) : /* @__PURE__ */ t("span", { children: r + 1 }), K = a === "completed" ? /* @__PURE__ */ t("span", { className: k, children: f }) : a === "upcoming" ? /* @__PURE__ */ i("span", { className: k, children: [
+            /* @__PURE__ */ t(D, { "aria-hidden": "true", className: "ds:size-3" }),
+            S
+          ] }) : null;
+          return /* @__PURE__ */ i(
+            p.Item,
+            {
+              value: x(r),
+              "data-step-id": String(r),
+              className: Z({ tone: T }),
+              children: [
+                /* @__PURE__ */ t(p.Header, { className: "ds:flex", children: /* @__PURE__ */ i(
+                  p.Trigger,
+                  {
+                    disabled: V,
+                    "aria-disabled": m || void 0,
+                    "aria-label": a === "completed" ? `${b}, ${f}` : b,
+                    "aria-current": m ? "step" : void 0,
+                    className: J,
+                    children: [
+                      /* @__PURE__ */ t(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          className: X({ state: a }),
+                          children: I
+                        }
+                      ),
+                      /* @__PURE__ */ i("span", { className: "ds:flex ds:min-w-0 ds:flex-1 ds:flex-col", children: [
+                        /* @__PURE__ */ t("span", { className: Q(a), children: s.label }),
+                        s.description ? /* @__PURE__ */ t("span", { className: Y, children: s.description }) : null
+                      ] }),
+                      K,
+                      m ? null : /* @__PURE__ */ t(
+                        H,
+                        {
+                          "aria-hidden": "true",
+                          className: ee
+                        }
+                      )
+                    ]
+                  }
+                ) }),
+                s.summary && a === "completed" ? /* @__PURE__ */ t("div", { className: te, children: s.summary }) : null,
+                /* @__PURE__ */ t(p.Content, { className: re, children: /* @__PURE__ */ t("div", { className: se, children: s.content }) })
+              ]
+            },
+            r
+          );
+        })
+      }
+    );
+  }
+);
+ne.displayName = "StepperAccordion";
+const ue = {
+  id: "stepper-accordion",
+  capabilities: ["expand", "navigate"],
+  state: {
+    currentStep: {
+      type: "number",
+      descriptionKey: "ui.agent.stepperAccordion.state.currentStep",
+      description: "Zero-indexed active step.",
+      read: (e) => e.getCurrentStep()
+    },
+    totalSteps: {
+      type: "number",
+      descriptionKey: "ui.agent.stepperAccordion.state.totalSteps",
+      description: "Total number of steps in the flow.",
+      read: (e) => e.getTotalSteps()
+    },
+    openSteps: {
+      type: "number[]",
+      descriptionKey: "ui.agent.stepperAccordion.state.openSteps",
+      description: "Indices of currently-open step panels (singleton under Radix single mode).",
+      read: (e) => e.getOpenSteps()
+    }
+  },
+  actions: {
+    goto_step: {
+      safety: "read",
+      argsType: "{ step: number }",
+      descriptionKey: "ui.agent.stepperAccordion.actions.gotoStep",
+      description: "Activate the given step. Upcoming steps are gated by the consumer’s validation in onStepChange.",
+      invoke: (e, l) => {
+        e.gotoStep(l.step);
+      }
+    },
+    next: {
+      safety: "read",
+      descriptionKey: "ui.agent.stepperAccordion.actions.next",
+      description: "Advance to the next step. Subject to the consumer’s onStepChange validation.",
+      invoke: (e) => {
+        e.next();
+      }
+    },
+    previous: {
+      safety: "read",
+      descriptionKey: "ui.agent.stepperAccordion.actions.previous",
+      description: "Return to the previous step (re-opens a completed step in edit mode).",
+      invoke: (e) => {
+        e.previous();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "stepper-accordion",
+      description: "Marks the StepperAccordion root."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    },
+    item: {
+      attr: "data-step-id",
+      description: "Stable opaque id of a step (the zero-indexed step number as a string)."
+    }
+  }
+};
+export {
+  ne as S,
+  ue as s
+};
+//# sourceMappingURL=stepper-accordion.agent-ckKYZCIP.js.map