npm - @fabio.caffarello/react-design-system - Versions diffs - 3.12.0 → 4.0.0 - Mend

@fabio.caffarello/react-design-system 3.12.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (159) hide show

package/dist/granular/ui/components/Stepper/Stepper.js CHANGED Viewed

@@ -1,105 +1,107 @@
 "use client";
-var R = Object.defineProperty, D = Object.defineProperties;
-var E = Object.getOwnPropertyDescriptors;
-var q = Object.getOwnPropertySymbols;
-var G = Object.prototype.hasOwnProperty, H = Object.prototype.propertyIsEnumerable;
-var I = (t, i, a) => i in t ? R(t, i, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[i] = a, g = (t, i) => {
-  for (var a in i || (i = {}))
-    G.call(i, a) && I(t, a, i[a]);
-  if (q)
-    for (var a of q(i))
-      H.call(i, a) && I(t, a, i[a]);
+var D = Object.defineProperty, E = Object.defineProperties;
+var G = Object.getOwnPropertyDescriptors;
+var I = Object.getOwnPropertySymbols;
+var H = Object.prototype.hasOwnProperty, J = Object.prototype.propertyIsEnumerable;
+var L = (t, l, c) => l in t ? D(t, l, { enumerable: !0, configurable: !0, writable: !0, value: c }) : t[l] = c, p = (t, l) => {
+  for (var c in l || (l = {}))
+    H.call(l, c) && L(t, c, l[c]);
+  if (I)
+    for (var c of I(l))
+      J.call(l, c) && L(t, c, l[c]);
   return t;
-}, h = (t, i) => D(t, E(i));
+}, N = (t, l) => E(t, G(l));
 import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { useState as J } from "react";
-import { Check as z } from "lucide-react";
-import { getSpacingClass as l } from "../../tokens/spacing.js";
-import { getRadiusClass as b } from "../../tokens/radius.js";
-import { getAnimationClass as B } from "../../tokens/animations.js";
-import { Button as u } from "../../primitives/Button/Button.js";
-import K from "../../primitives/Separator/Separator.js";
-function Z({
+import { useState as K } from "react";
+import { Check as M, AlertCircle as O } from "lucide-react";
+import { getSpacingClass as a } from "../../tokens/spacing.js";
+import { getRadiusClass as $ } from "../../tokens/radius.js";
+import { getAnimationClass as z } from "../../tokens/animations.js";
+import { Button as x } from "../../primitives/Button/Button.js";
+import Q from "../../primitives/Separator/Separator.js";
+function ee({
   steps: t,
-  currentStep: i,
-  defaultCurrentStep: a = 0,
-  onStepChange: o,
-  onComplete: $,
-  allowNavigation: m = !0,
-  showStepNumbers: N = !0,
-  orientation: F = "horizontal",
+  currentStep: l,
+  defaultCurrentStep: c = 0,
+  onStepChange: m,
+  onComplete: v,
+  allowNavigation: b = !0,
+  showStepNumbers: F = !0,
+  orientation: R = "horizontal",
   className: y = ""
 }) {
-  const [L, x] = J(a), f = i !== void 0, d = f ? i : L, k = (e) => e < d ? "completed" : e === d ? "active" : "pending", j = () => {
+  const [C, g] = K(c), u = l !== void 0, d = u ? l : C, k = (e) => e < d ? "completed" : e === d ? "active" : "pending", j = () => {
     if (d < t.length - 1) {
       const e = d + 1;
-      f || x(e), o == null || o(e);
+      u || g(e), m == null || m(e);
     } else
-      $ == null || $();
-  }, S = () => {
+      v == null || v();
+  }, A = () => {
     if (d > 0) {
       const e = d - 1;
-      f || x(e), o == null || o(e);
+      u || g(e), m == null || m(e);
     }
-  }, p = (e) => {
-    m && (t[e].disabled || (f || x(e), o == null || o(e)));
-  }, w = t[d], A = d === 0, P = d === t.length - 1;
-  return F === "vertical" ? /* @__PURE__ */ n("div", { className: `flex ${l("base", "gap")} ${y}`, children: [
-    /* @__PURE__ */ r("div", { className: "flex flex-col", children: t.map((e, s) => {
-      const c = e.status || k(s), v = s === d;
+  }, h = (e) => {
+    b && (t[e].disabled || (u || g(e), m == null || m(e)));
+  }, o = t[d], w = d === 0, P = d === t.length - 1, q = (e, i, s) => `Step ${i + 1}${e.title ? `: ${e.title}` : ""}${s === "error" ? " (error)" : ""}`, B = (e, i) => e === "completed" ? /* @__PURE__ */ r(M, { className: "h-5 w-5" }) : e === "error" ? /* @__PURE__ */ r(O, { className: "h-5 w-5", "aria-hidden": "true" }) : F ? i + 1 : null;
+  return R === "vertical" ? /* @__PURE__ */ n("div", { className: `flex ${a("base", "gap")} ${y}`, children: [
+    /* @__PURE__ */ r("div", { className: "flex flex-col", children: t.map((e, i) => {
+      const s = e.status || k(i), f = i === d;
       return /* @__PURE__ */ n(
         "div",
         {
-          className: `flex items-start ${l("md", "gap")}`,
+          className: `flex items-start ${a("md", "gap")}`,
           children: [
             /* @__PURE__ */ n("div", { className: "flex flex-col items-center", children: [
               /* @__PURE__ */ r(
                 "button",
-                h(g({
+                N(p({
                   type: "button",
-                  onClick: () => p(s),
-                  disabled: !m || e.disabled,
-                  "aria-label": e.title ? `Step ${s + 1}: ${e.title}` : `Step ${s + 1}`
-                }, c === "pending" ? { "data-marker": "pending" } : {}), {
+                  onClick: () => h(i),
+                  disabled: !b || e.disabled,
+                  "aria-current": f ? "step" : void 0,
+                  "aria-label": q(e, i, s)
+                }, s === "pending" ? { "data-marker": "pending" } : {}), {
                   className: `
                       flex
                       items-center
                       justify-center
                       w-10
                       h-10
-                      ${b("full")}
+                      ${$("full")}
                       border-2
-                      ${B("base")}
-                      ${c === "completed" ? "bg-success border-success text-fg-inverse" : c === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : c === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
-                      ${!m || e.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
+                      ${z("base")}
+                      ${s === "completed" ? "bg-success border-success text-fg-inverse" : s === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : s === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
+                      ${!b || e.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
                     `,
-                  children: c === "completed" ? /* @__PURE__ */ r(z, { className: "h-5 w-5" }) : N ? s + 1 : null
+                  children: B(s, i)
                 })
               ),
-              s < t.length - 1 && /* @__PURE__ */ r(
+              i < t.length - 1 && /* @__PURE__ */ r(
                 "div",
                 {
                   className: `
                         w-0.5
                         h-12
-                        ${l("sm", "mt")}
-                        ${c === "completed" ? "bg-success" : "bg-line-emphasis"}
+                        ${a("sm", "mt")}
+                        ${s === "completed" ? "bg-success" : "bg-line-emphasis"}
                       `
                 }
               )
             ] }),
-            /* @__PURE__ */ n("div", { className: `flex-1 ${l("xl", "pb")}`, children: [
+            /* @__PURE__ */ n("div", { className: `flex-1 ${a("xl", "pb")}`, children: [
               /* @__PURE__ */ r(
                 "button",
                 {
                   type: "button",
-                  onClick: () => p(s),
-                  disabled: !m || e.disabled,
+                  onClick: () => h(i),
+                  disabled: !b || e.disabled,
+                  id: `${e.id}-title`,
                   className: `
                       text-left
-                      ${v ? "font-semibold" : "font-medium"}
-                      ${c === "active" ? "text-fg-brand-emphasis" : "text-fg-secondary"}
-                      ${!m || e.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
+                      ${f ? "font-semibold" : "font-medium"}
+                      ${s === "active" ? "text-fg-brand-emphasis" : "text-fg-secondary"}
+                      ${!b || e.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
                     `,
                   children: e.title
                 }
@@ -107,7 +109,7 @@ function Z({
               e.description && /* @__PURE__ */ r(
                 "p",
                 {
-                  className: `text-sm text-fg-tertiary ${l("xs", "mt")}`,
+                  className: `text-sm text-fg-tertiary ${a("xs", "mt")}`,
                   children: e.description
                 }
               )
@@ -121,75 +123,79 @@ function Z({
       /* @__PURE__ */ r(
         "div",
         {
+          role: "region",
+          "aria-labelledby": o ? `${o.id}-title` : void 0,
           className: `
-            ${l("lg", "p")}
+            ${a("lg", "p")}
             border
             border-line-default
-            ${b("lg")}
+            ${$("lg")}
             bg-surface-base
           `,
-          children: w.content
+          children: o == null ? void 0 : o.content
         }
       ),
       /* @__PURE__ */ n(
         "div",
         {
-          className: `flex justify-between ${l("base", "mt")} ${l("base", "gap")}`,
+          className: `flex justify-between ${a("base", "mt")} ${a("base", "gap")}`,
           children: [
             /* @__PURE__ */ r(
-              u,
+              x,
               {
                 variant: "outline",
-                onClick: S,
-                disabled: A,
+                onClick: A,
+                disabled: w,
                 children: "Previous"
               }
             ),
-            /* @__PURE__ */ r(u, { variant: "primary", onClick: j, children: P ? "Complete" : "Next" })
+            /* @__PURE__ */ r(x, { variant: "primary", onClick: j, children: P ? "Complete" : "Next" })
           ]
         }
       )
     ] })
-  ] }) : /* @__PURE__ */ n("div", { className: `${l("lg", "space-y")} ${y}`, children: [
-    /* @__PURE__ */ r("div", { className: "flex items-center", children: t.map((e, s) => {
-      const c = e.status || k(s), v = s === d;
+  ] }) : /* @__PURE__ */ n("div", { className: `${a("lg", "space-y")} ${y}`, children: [
+    /* @__PURE__ */ r("div", { className: "flex items-center", children: t.map((e, i) => {
+      const s = e.status || k(i), f = i === d;
       return /* @__PURE__ */ n("div", { className: "flex items-center flex-1", children: [
         /* @__PURE__ */ n("div", { className: "flex flex-col items-center flex-1", children: [
           /* @__PURE__ */ r(
             "button",
-            h(g({
+            N(p({
               type: "button",
-              onClick: () => p(s),
-              disabled: !m || e.disabled,
-              "aria-label": e.title ? `Step ${s + 1}: ${e.title}` : `Step ${s + 1}`
-            }, c === "pending" ? { "data-marker": "pending" } : {}), {
+              onClick: () => h(i),
+              disabled: !b || e.disabled,
+              "aria-current": f ? "step" : void 0,
+              "aria-label": q(e, i, s)
+            }, s === "pending" ? { "data-marker": "pending" } : {}), {
               className: `
                     flex
                     items-center
                     justify-center
                     w-10
                     h-10
-                    ${b("full")}
+                    ${$("full")}
                     border-2
-                    ${B("base")}
-                    ${c === "completed" ? "bg-success border-success text-fg-inverse" : c === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : c === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
-                    ${!m || e.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
+                    ${z("base")}
+                    ${s === "completed" ? "bg-success border-success text-fg-inverse" : s === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : s === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
+                    ${!b || e.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
                   `,
-              children: c === "completed" ? /* @__PURE__ */ r(z, { className: "h-5 w-5" }) : N ? s + 1 : null
+              children: B(s, i)
             })
           ),
           /* @__PURE__ */ n(
             "div",
             {
-              className: `${l("sm", "mt")} text-center ${l("sm", "px")}`,
+              className: `${a("sm", "mt")} text-center ${a("sm", "px")}`,
               children: [
                 /* @__PURE__ */ r(
                   "p",
                   {
+                    id: `${e.id}-title`,
                     className: `
                       text-sm
                       font-medium
-                      ${v ? "text-fg-brand-emphasis" : "text-fg-secondary"}
+                      ${f ? "text-fg-brand-emphasis" : "text-fg-secondary"}
                     `,
                     children: e.title
                   }
@@ -197,7 +203,7 @@ function Z({
                 e.description && /* @__PURE__ */ r(
                   "p",
                   {
-                    className: `text-xs text-fg-tertiary ${l("xs", "mt")}`,
+                    className: `text-xs text-fg-tertiary ${a("xs", "mt")}`,
                     children: e.description
                   }
                 )
@@ -205,11 +211,11 @@ function Z({
             }
           )
         ] }),
-        s < t.length - 1 && /* @__PURE__ */ r("div", { className: `flex-1 ${l("base", "mx")}`, children: /* @__PURE__ */ r(
-          K,
+        i < t.length - 1 && /* @__PURE__ */ r("div", { className: `flex-1 ${a("base", "mx")}`, children: /* @__PURE__ */ r(
+          Q,
           {
             className: `
-                      ${c === "completed" ? "border-success" : "border-line-emphasis"}
+                      ${s === "completed" ? "border-success" : "border-line-emphasis"}
                     `
           }
         ) })
@@ -218,31 +224,33 @@ function Z({
     /* @__PURE__ */ r(
       "div",
       {
+        role: "region",
+        "aria-labelledby": o ? `${o.id}-title` : void 0,
         className: `
-        ${l("lg", "p")}
+        ${a("lg", "p")}
         border
         border-line-default
-        ${b("lg")}
+        ${$("lg")}
         bg-surface-base
       `,
-        children: w.content
+        children: o == null ? void 0 : o.content
       }
     ),
-    /* @__PURE__ */ n("div", { className: `flex justify-between ${l("base", "gap")}`, children: [
+    /* @__PURE__ */ n("div", { className: `flex justify-between ${a("base", "gap")}`, children: [
       /* @__PURE__ */ r(
-        u,
+        x,
         {
           variant: "outline",
-          onClick: S,
-          disabled: A,
+          onClick: A,
+          disabled: w,
           children: "Previous"
         }
       ),
-      /* @__PURE__ */ r(u, { variant: "primary", onClick: j, children: P ? "Complete" : "Next" })
+      /* @__PURE__ */ r(x, { variant: "primary", onClick: j, children: P ? "Complete" : "Next" })
     ] })
   ] });
 }
 export {
-  Z as default
+  ee as default
 };
 //# sourceMappingURL=Stepper.js.map

package/dist/granular/ui/components/Stepper/Stepper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stepper.js","sources":["../../../../../src/ui/components/Stepper/Stepper.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type ReactNode } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getAnimationClass } from \"../../tokens/animations\";\nimport Button from \"../../primitives/Button/Button\";\nimport Separator from \"../../primitives/Separator/Separator\";\n\nexport type StepperStatus = \"pending\" \| \"active\" \| \"completed\" \| \"error\";\n\nexport interface StepperStep {\n id: string;\n title: string;\n description?: string;\n content: ReactNode;\n status?: StepperStatus;\n disabled?: boolean;\n}\n\nexport interface StepperProps {\n steps: StepperStep[];\n currentStep?: number;\n defaultCurrentStep?: number;\n onStepChange?: (stepIndex: number) => void;\n onComplete?: () => void;\n allowNavigation?: boolean;\n showStepNumbers?: boolean;\n orientation?: \"horizontal\" \| \"vertical\";\n className?: string;\n}\n\n/*\n Stepper Component\n \n A multi-step wizard component for guided workflows.\n * Supports validation, navigation, and completion callbacks.\n * Follows Atomic Design principles as an Organism component.\n \n @example\n * ```tsx\n * <Stepper\n * steps={[\n * { id: '1', title: 'Step 1', content: <div>Content 1</div> },\n * { id: '2', title: 'Step 2', content: <div>Content 2</div> },\n * ]}\n * onComplete={() => console.log('Completed!')}\n * />\n * ```\n /\nexport default function Stepper({\n steps,\n currentStep: controlledCurrentStep,\n defaultCurrentStep = 0,\n onStepChange,\n onComplete,\n allowNavigation = true,\n showStepNumbers = true,\n orientation = \"horizontal\",\n className = \"\",\n}: StepperProps) {\n const [internalCurrentStep, setInternalCurrentStep] =\n useState(defaultCurrentStep);\n\n const isControlled = controlledCurrentStep !== undefined;\n const currentStepIndex = isControlled\n ? controlledCurrentStep\n : internalCurrentStep;\n\n const getStepStatus = (index: number): StepperStatus => {\n if (index < currentStepIndex) return \"completed\";\n if (index === currentStepIndex) return \"active\";\n return \"pending\";\n };\n\n const handleNext = () => {\n if (currentStepIndex < steps.length - 1) {\n const nextStep = currentStepIndex + 1;\n if (!isControlled) {\n setInternalCurrentStep(nextStep);\n }\n onStepChange?.(nextStep);\n } else {\n onComplete?.();\n }\n };\n\n const handlePrevious = () => {\n if (currentStepIndex > 0) {\n const prevStep = currentStepIndex - 1;\n if (!isControlled) {\n setInternalCurrentStep(prevStep);\n }\n onStepChange?.(prevStep);\n }\n };\n\n const handleStepClick = (index: number) => {\n if (!allowNavigation) return;\n if (steps[index].disabled) return;\n\n if (!isControlled) {\n setInternalCurrentStep(index);\n }\n onStepChange?.(index);\n };\n\n const currentStep = steps[currentStepIndex];\n const isFirstStep = currentStepIndex === 0;\n const isLastStep = currentStepIndex === steps.length - 1;\n\n if (orientation === \"vertical\") {\n return (\n <div className={`flex ${getSpacingClass(\"base\", \"gap\")} ${className}`}>\n {/ Steps List /}\n <div className=\"flex flex-col\">\n {steps.map((step, index) => {\n const status = step.status \|\| getStepStatus(index);\n const isActive = index === currentStepIndex;\n\n return (\n <div\n key={step.id}\n className={`flex items-start ${getSpacingClass(\"md\", \"gap\")}`}\n >\n {/ Step Indicator /}\n <div className=\"flex flex-col items-center\">\n <button\n type=\"button\"\n onClick={() => handleStepClick(index)}\n disabled={!allowNavigation \|\| step.disabled}\n aria-label={\n step.title\n ? `Step ${index + 1}: ${step.title}`\n : `Step ${index + 1}`\n }\n // data-marker=\"pending\" — see .claude/rules/colors.md\n // \"fg-quaternary: AA-by-construction exception\". Anchors\n // the directed a11y suppression to the pending-marker\n // ROLE, not to style classes; survives a future restyle\n // of the bubble.\n {...(status === \"pending\"\n ? { \"data-marker\": \"pending\" }\n : {})}\n className={`\n flex\n items-center\n justify-center\n w-10\n h-10\n ${getRadiusClass(\"full\")}\n border-2\n ${getAnimationClass(\"base\")}\n ${\n status === \"completed\"\n ? `${\"bg-success\"} ${\"border-success\"} text-fg-inverse`\n : status === \"active\"\n ? `${\"bg-surface-brand-strong\"} ${\"border-line-brand\"} text-fg-inverse`\n : status === \"error\"\n ? `${\"bg-error\"} ${\"border-error\"} text-fg-inverse`\n : \"bg-surface-base border-line-emphasis text-fg-quaternary\"\n }\n ${!allowNavigation \|\| step.disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\"}\n `}\n >\n {status === \"completed\" ? (\n <Check className=\"h-5 w-5\" />\n ) : showStepNumbers ? (\n index + 1\n ) : null}\n </button>\n {index < steps.length - 1 && (\n <div\n className={`\n w-0.5\n h-12\n ${getSpacingClass(\"sm\", \"mt\")}\n ${status === \"completed\" ? \"bg-success\" : \"bg-line-emphasis\"}\n `}\n />\n )}\n </div>\n\n {/ Step Content /}\n <div className={`flex-1 ${getSpacingClass(\"xl\", \"pb\")}`}>\n <button\n type=\"button\"\n onClick={() => handleStepClick(index)}\n disabled={!allowNavigation \|\| step.disabled}\n className={`\n text-left\n ${isActive ? \"font-semibold\" : \"font-medium\"}\n ${status === \"active\" ? \"text-fg-brand-emphasis\" : \"text-fg-secondary\"}\n ${!allowNavigation \|\| step.disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\"}\n `}\n >\n {step.title}\n </button>\n {step.description && (\n <p\n className={`text-sm text-fg-tertiary ${getSpacingClass(\"xs\", \"mt\")}`}\n >\n {step.description}\n </p>\n )}\n </div>\n </div>\n );\n })}\n </div>\n\n {/ Step Content /}\n <div className=\"flex-1\">\n <div\n className={`\n ${getSpacingClass(\"lg\", \"p\")}\n border\n border-line-default\n ${getRadiusClass(\"lg\")}\n bg-surface-base\n `}\n >\n {currentStep.content}\n </div>\n\n {/ Navigation /}\n <div\n className={`flex justify-between ${getSpacingClass(\"base\", \"mt\")} ${getSpacingClass(\"base\", \"gap\")}`}\n >\n <Button\n variant=\"outline\"\n onClick={handlePrevious}\n disabled={isFirstStep}\n >\n Previous\n </Button>\n <Button variant=\"primary\" onClick={handleNext}>\n {isLastStep ? \"Complete\" : \"Next\"}\n </Button>\n </div>\n </div>\n </div>\n );\n }\n\n // Horizontal orientation\n return (\n <div className={`${getSpacingClass(\"lg\", \"space-y\")} ${className}`}>\n {/ Steps List /}\n <div className=\"flex items-center\">\n {steps.map((step, index) => {\n const status = step.status \|\| getStepStatus(index);\n const isActive = index === currentStepIndex;\n\n return (\n <div key={step.id} className=\"flex items-center flex-1\">\n <div className=\"flex flex-col items-center flex-1\">\n <button\n type=\"button\"\n onClick={() => handleStepClick(index)}\n disabled={!allowNavigation \|\| step.disabled}\n aria-label={\n step.title\n ? `Step ${index + 1}: ${step.title}`\n : `Step ${index + 1}`\n }\n // data-marker=\"pending\" — see .claude/rules/colors.md\n // \"fg-quaternary: AA-by-construction exception\".\n {...(status === \"pending\"\n ? { \"data-marker\": \"pending\" }\n : {})}\n className={`\n flex\n items-center\n justify-center\n w-10\n h-10\n ${getRadiusClass(\"full\")}\n border-2\n ${getAnimationClass(\"base\")}\n ${\n status === \"completed\"\n ? `${\"bg-success\"} ${\"border-success\"} text-fg-inverse`\n : status === \"active\"\n ? `${\"bg-surface-brand-strong\"} ${\"border-line-brand\"} text-fg-inverse`\n : status === \"error\"\n ? `${\"bg-error\"} ${\"border-error\"} text-fg-inverse`\n : \"bg-surface-base border-line-emphasis text-fg-quaternary\"\n }\n ${!allowNavigation \|\| step.disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\"}\n `}\n >\n {status === \"completed\" ? (\n <Check className=\"h-5 w-5\" />\n ) : showStepNumbers ? (\n index + 1\n ) : null}\n </button>\n <div\n className={`${getSpacingClass(\"sm\", \"mt\")} text-center ${getSpacingClass(\"sm\", \"px\")}`}\n >\n <p\n className={`\n text-sm\n font-medium\n ${isActive ? \"text-fg-brand-emphasis\" : \"text-fg-secondary\"}\n `}\n >\n {step.title}\n </p>\n {step.description && (\n <p\n className={`text-xs text-fg-tertiary ${getSpacingClass(\"xs\", \"mt\")}`}\n >\n {step.description}\n </p>\n )}\n </div>\n </div>\n {index < steps.length - 1 && (\n <div className={`flex-1 ${getSpacingClass(\"base\", \"mx\")}`}>\n <Separator\n className={`\n ${status === \"completed\" ? \"border-success\" : \"border-line-emphasis\"}\n `}\n />\n </div>\n )}\n </div>\n );\n })}\n </div>\n\n {/ Step Content /}\n <div\n className={`\n ${getSpacingClass(\"lg\", \"p\")}\n border\n border-line-default\n ${getRadiusClass(\"lg\")}\n bg-surface-base\n `}\n >\n {currentStep.content}\n </div>\n\n {/ Navigation */}\n <div className={`flex justify-between ${getSpacingClass(\"base\", \"gap\")}`}>\n <Button\n variant=\"outline\"\n onClick={handlePrevious}\n disabled={isFirstStep}\n >\n Previous\n </Button>\n <Button variant=\"primary\" onClick={handleNext}>\n {isLastStep ? \"Complete\" : \"Next\"}\n </Button>\n </div>\n </div>\n );\n}\n"],"names":["Stepper","steps","controlledCurrentStep","defaultCurrentStep","onStepChange","onComplete","allowNavigation","showStepNumbers","orientation","className","internalCurrentStep","setInternalCurrentStep","useState","isControlled","currentStepIndex","getStepStatus","index","handleNext","nextStep","handlePrevious","prevStep","handleStepClick","currentStep","isFirstStep","isLastStep","jsxs","getSpacingClass","jsx","step","status","isActive","__spreadProps","__spreadValues","getRadiusClass","getAnimationClass","Check","Button","Separator"],"mappings":"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"}
1	+ {"version":3,"file":"Stepper.js","sources":["../../../../../src/ui/components/Stepper/Stepper.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type ReactNode } from \"react\";\nimport { Check, AlertCircle } from \"lucide-react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getAnimationClass } from \"../../tokens/animations\";\nimport Button from \"../../primitives/Button/Button\";\nimport Separator from \"../../primitives/Separator/Separator\";\n\nexport type StepperStatus = \"pending\" \| \"active\" \| \"completed\" \| \"error\";\n\nexport interface StepperStep {\n id: string;\n title: string;\n description?: string;\n content: ReactNode;\n status?: StepperStatus;\n disabled?: boolean;\n}\n\nexport interface StepperProps {\n steps: StepperStep[];\n currentStep?: number;\n defaultCurrentStep?: number;\n onStepChange?: (stepIndex: number) => void;\n onComplete?: () => void;\n allowNavigation?: boolean;\n showStepNumbers?: boolean;\n orientation?: \"horizontal\" \| \"vertical\";\n className?: string;\n}\n\n/*\n Stepper Component\n \n A multi-step wizard component for guided workflows.\n * Supports validation, navigation, and completion callbacks.\n \n @example\n * ```tsx\n * <Stepper\n * steps={[\n * { id: '1', title: 'Step 1', content: <div>Content 1</div> },\n * { id: '2', title: 'Step 2', content: <div>Content 2</div> },\n * ]}\n * onComplete={() => console.log('Completed!')}\n * />\n * ```\n /\nexport default function Stepper({\n steps,\n currentStep: controlledCurrentStep,\n defaultCurrentStep = 0,\n onStepChange,\n onComplete,\n allowNavigation = true,\n showStepNumbers = true,\n orientation = \"horizontal\",\n className = \"\",\n}: StepperProps) {\n const [internalCurrentStep, setInternalCurrentStep] =\n useState(defaultCurrentStep);\n\n const isControlled = controlledCurrentStep !== undefined;\n const currentStepIndex = isControlled\n ? controlledCurrentStep\n : internalCurrentStep;\n\n const getStepStatus = (index: number): StepperStatus => {\n if (index < currentStepIndex) return \"completed\";\n if (index === currentStepIndex) return \"active\";\n return \"pending\";\n };\n\n const handleNext = () => {\n if (currentStepIndex < steps.length - 1) {\n const nextStep = currentStepIndex + 1;\n if (!isControlled) {\n setInternalCurrentStep(nextStep);\n }\n onStepChange?.(nextStep);\n } else {\n onComplete?.();\n }\n };\n\n const handlePrevious = () => {\n if (currentStepIndex > 0) {\n const prevStep = currentStepIndex - 1;\n if (!isControlled) {\n setInternalCurrentStep(prevStep);\n }\n onStepChange?.(prevStep);\n }\n };\n\n const handleStepClick = (index: number) => {\n if (!allowNavigation) return;\n if (steps[index].disabled) return;\n\n if (!isControlled) {\n setInternalCurrentStep(index);\n }\n onStepChange?.(index);\n };\n\n const currentStep = steps[currentStepIndex];\n const isFirstStep = currentStepIndex === 0;\n const isLastStep = currentStepIndex === steps.length - 1;\n\n // Accessible name carries error status so it is perceivable to screen\n // readers (the bubble glyph is decorative; aria-label wins on a button).\n // Error previously had neither glyph nor text — only red color (WCAG\n // 1.4.1). Completed already carries the Check glyph, so its name stays\n // unchanged. Active/current is conveyed via aria-current=\"step\".\n const stepAriaLabel = (\n step: StepperStep,\n index: number,\n status: StepperStatus,\n ): string =>\n `Step ${index + 1}${step.title ? `: ${step.title}` : \"\"}${\n status === \"error\" ? \" (error)\" : \"\"\n }`;\n\n // Non-color status signal in the bubble: completed → check, error →\n // alert glyph (the error status previously changed only the bubble\n // color, with no glyph and no text — WCAG 1.4.1 failure).\n const renderBubbleContent = (\n status: StepperStatus,\n index: number,\n ): ReactNode =>\n status === \"completed\" ? (\n <Check className=\"h-5 w-5\" />\n ) : status === \"error\" ? (\n <AlertCircle className=\"h-5 w-5\" aria-hidden=\"true\" />\n ) : showStepNumbers ? (\n index + 1\n ) : null;\n\n if (orientation === \"vertical\") {\n return (\n <div className={`flex ${getSpacingClass(\"base\", \"gap\")} ${className}`}>\n {/ Steps List /}\n <div className=\"flex flex-col\">\n {steps.map((step, index) => {\n const status = step.status \|\| getStepStatus(index);\n const isActive = index === currentStepIndex;\n\n return (\n <div\n key={step.id}\n className={`flex items-start ${getSpacingClass(\"md\", \"gap\")}`}\n >\n {/ Step Indicator /}\n <div className=\"flex flex-col items-center\">\n <button\n type=\"button\"\n onClick={() => handleStepClick(index)}\n disabled={!allowNavigation \|\| step.disabled}\n aria-current={isActive ? \"step\" : undefined}\n aria-label={stepAriaLabel(step, index, status)}\n // data-marker=\"pending\" — see .claude/rules/colors.md\n // \"fg-quaternary: AA-by-construction exception\". Anchors\n // the directed a11y suppression to the pending-marker\n // ROLE, not to style classes; survives a future restyle\n // of the bubble.\n {...(status === \"pending\"\n ? { \"data-marker\": \"pending\" }\n : {})}\n className={`\n flex\n items-center\n justify-center\n w-10\n h-10\n ${getRadiusClass(\"full\")}\n border-2\n ${getAnimationClass(\"base\")}\n ${\n status === \"completed\"\n ? `${\"bg-success\"} ${\"border-success\"} text-fg-inverse`\n : status === \"active\"\n ? `${\"bg-surface-brand-strong\"} ${\"border-line-brand\"} text-fg-inverse`\n : status === \"error\"\n ? `${\"bg-error\"} ${\"border-error\"} text-fg-inverse`\n : \"bg-surface-base border-line-emphasis text-fg-quaternary\"\n }\n ${!allowNavigation \|\| step.disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\"}\n `}\n >\n {renderBubbleContent(status, index)}\n </button>\n {index < steps.length - 1 && (\n <div\n className={`\n w-0.5\n h-12\n ${getSpacingClass(\"sm\", \"mt\")}\n ${status === \"completed\" ? \"bg-success\" : \"bg-line-emphasis\"}\n `}\n />\n )}\n </div>\n\n {/ Step Content /}\n <div className={`flex-1 ${getSpacingClass(\"xl\", \"pb\")}`}>\n <button\n type=\"button\"\n onClick={() => handleStepClick(index)}\n disabled={!allowNavigation \|\| step.disabled}\n id={`${step.id}-title`}\n className={`\n text-left\n ${isActive ? \"font-semibold\" : \"font-medium\"}\n ${status === \"active\" ? \"text-fg-brand-emphasis\" : \"text-fg-secondary\"}\n ${!allowNavigation \|\| step.disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\"}\n `}\n >\n {step.title}\n </button>\n {step.description && (\n <p\n className={`text-sm text-fg-tertiary ${getSpacingClass(\"xs\", \"mt\")}`}\n >\n {step.description}\n </p>\n )}\n </div>\n </div>\n );\n })}\n </div>\n\n {/ Step Content /}\n <div className=\"flex-1\">\n <div\n role=\"region\"\n aria-labelledby={\n currentStep ? `${currentStep.id}-title` : undefined\n }\n className={`\n ${getSpacingClass(\"lg\", \"p\")}\n border\n border-line-default\n ${getRadiusClass(\"lg\")}\n bg-surface-base\n `}\n >\n {currentStep?.content}\n </div>\n\n {/ Navigation /}\n <div\n className={`flex justify-between ${getSpacingClass(\"base\", \"mt\")} ${getSpacingClass(\"base\", \"gap\")}`}\n >\n <Button\n variant=\"outline\"\n onClick={handlePrevious}\n disabled={isFirstStep}\n >\n Previous\n </Button>\n <Button variant=\"primary\" onClick={handleNext}>\n {isLastStep ? \"Complete\" : \"Next\"}\n </Button>\n </div>\n </div>\n </div>\n );\n }\n\n // Horizontal orientation\n return (\n <div className={`${getSpacingClass(\"lg\", \"space-y\")} ${className}`}>\n {/ Steps List /}\n <div className=\"flex items-center\">\n {steps.map((step, index) => {\n const status = step.status \|\| getStepStatus(index);\n const isActive = index === currentStepIndex;\n\n return (\n <div key={step.id} className=\"flex items-center flex-1\">\n <div className=\"flex flex-col items-center flex-1\">\n <button\n type=\"button\"\n onClick={() => handleStepClick(index)}\n disabled={!allowNavigation \|\| step.disabled}\n aria-current={isActive ? \"step\" : undefined}\n aria-label={stepAriaLabel(step, index, status)}\n // data-marker=\"pending\" — see .claude/rules/colors.md\n // \"fg-quaternary: AA-by-construction exception\".\n {...(status === \"pending\"\n ? { \"data-marker\": \"pending\" }\n : {})}\n className={`\n flex\n items-center\n justify-center\n w-10\n h-10\n ${getRadiusClass(\"full\")}\n border-2\n ${getAnimationClass(\"base\")}\n ${\n status === \"completed\"\n ? `${\"bg-success\"} ${\"border-success\"} text-fg-inverse`\n : status === \"active\"\n ? `${\"bg-surface-brand-strong\"} ${\"border-line-brand\"} text-fg-inverse`\n : status === \"error\"\n ? `${\"bg-error\"} ${\"border-error\"} text-fg-inverse`\n : \"bg-surface-base border-line-emphasis text-fg-quaternary\"\n }\n ${!allowNavigation \|\| step.disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\"}\n `}\n >\n {renderBubbleContent(status, index)}\n </button>\n <div\n className={`${getSpacingClass(\"sm\", \"mt\")} text-center ${getSpacingClass(\"sm\", \"px\")}`}\n >\n <p\n id={`${step.id}-title`}\n className={`\n text-sm\n font-medium\n ${isActive ? \"text-fg-brand-emphasis\" : \"text-fg-secondary\"}\n `}\n >\n {step.title}\n </p>\n {step.description && (\n <p\n className={`text-xs text-fg-tertiary ${getSpacingClass(\"xs\", \"mt\")}`}\n >\n {step.description}\n </p>\n )}\n </div>\n </div>\n {index < steps.length - 1 && (\n <div className={`flex-1 ${getSpacingClass(\"base\", \"mx\")}`}>\n <Separator\n className={`\n ${status === \"completed\" ? \"border-success\" : \"border-line-emphasis\"}\n `}\n />\n </div>\n )}\n </div>\n );\n })}\n </div>\n\n {/ Step Content /}\n <div\n role=\"region\"\n aria-labelledby={currentStep ? `${currentStep.id}-title` : undefined}\n className={`\n ${getSpacingClass(\"lg\", \"p\")}\n border\n border-line-default\n ${getRadiusClass(\"lg\")}\n bg-surface-base\n `}\n >\n {currentStep?.content}\n </div>\n\n {/ Navigation */}\n <div className={`flex justify-between ${getSpacingClass(\"base\", \"gap\")}`}>\n <Button\n variant=\"outline\"\n onClick={handlePrevious}\n disabled={isFirstStep}\n >\n Previous\n </Button>\n <Button variant=\"primary\" onClick={handleNext}>\n {isLastStep ? \"Complete\" : \"Next\"}\n </Button>\n </div>\n </div>\n );\n}\n"],"names":["Stepper","steps","controlledCurrentStep","defaultCurrentStep","onStepChange","onComplete","allowNavigation","showStepNumbers","orientation","className","internalCurrentStep","setInternalCurrentStep","useState","isControlled","currentStepIndex","getStepStatus","index","handleNext","nextStep","handlePrevious","prevStep","handleStepClick","currentStep","isFirstStep","isLastStep","stepAriaLabel","step","status","renderBubbleContent","jsx","Check","AlertCircle","jsxs","getSpacingClass","isActive","__spreadProps","__spreadValues","getRadiusClass","getAnimationClass","Button","Separator"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkDA,SAAwBA,GAAQ;AAAA,EAC9B,OAAAC;AAAA,EACA,aAAaC;AAAA,EACb,oBAAAC,IAAqB;AAAA,EACrB,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,iBAAAC,IAAkB;AAAA,EAClB,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AACd,GAAiB;AACf,QAAM,CAACC,GAAqBC,CAAsB,IAChDC,EAAST,CAAkB,GAEvBU,IAAeX,MAA0B,QACzCY,IAAmBD,IACrBX,IACAQ,GAEEK,IAAgB,CAACC,MACjBA,IAAQF,IAAyB,cACjCE,MAAUF,IAAyB,WAChC,WAGHG,IAAa,MAAM;AACvB,QAAIH,IAAmBb,EAAM,SAAS,GAAG;AACvC,YAAMiB,IAAWJ,IAAmB;AACpC,MAAKD,KACHF,EAAuBO,CAAQ,GAEjCd,KAAA,QAAAA,EAAec;AAAA,IACjB;AACE,MAAAb,KAAA,QAAAA;AAAA,EAEJ,GAEMc,IAAiB,MAAM;AAC3B,QAAIL,IAAmB,GAAG;AACxB,YAAMM,IAAWN,IAAmB;AACpC,MAAKD,KACHF,EAAuBS,CAAQ,GAEjChB,KAAA,QAAAA,EAAegB;AAAA,IACjB;AAAA,EACF,GAEMC,IAAkB,CAACL,MAAkB;AACzC,IAAKV,MACDL,EAAMe,CAAK,EAAE,aAEZH,KACHF,EAAuBK,CAAK,GAE9BZ,KAAA,QAAAA,EAAeY;AAAA,EACjB,GAEMM,IAAcrB,EAAMa,CAAgB,GACpCS,IAAcT,MAAqB,GACnCU,IAAaV,MAAqBb,EAAM,SAAS,GAOjDwB,IAAgB,CACpBC,GACAV,GACAW,MAEA,QAAQX,IAAQ,CAAC,GAAGU,EAAK,QAAQ,KAAKA,EAAK,KAAK,KAAK,EAAE,GACrDC,MAAW,UAAU,aAAa,EACpC,IAKIC,IAAsB,CAC1BD,GACAX,MAEAW,MAAW,cACT,gBAAAE,EAACC,GAAA,EAAM,WAAU,UAAA,CAAU,IACzBH,MAAW,UACb,gBAAAE,EAACE,KAAY,WAAU,WAAU,eAAY,OAAA,CAAO,IAClDxB,IACFS,IAAQ,IACN;AAEN,SAAIR,MAAgB,aAEhB,gBAAAwB,EAAC,OAAA,EAAI,WAAW,QAAQC,EAAgB,QAAQ,KAAK,CAAC,IAAIxB,CAAS,IAEjE,UAAA;AAAA,IAAA,gBAAAoB,EAAC,SAAI,WAAU,iBACZ,YAAM,IAAI,CAACH,GAAMV,MAAU;AAC1B,YAAMW,IAASD,EAAK,UAAUX,EAAcC,CAAK,GAC3CkB,IAAWlB,MAAUF;AAE3B,aACE,gBAAAkB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAW,oBAAoBC,EAAgB,MAAM,KAAK,CAAC;AAAA,UAG3D,UAAA;AAAA,YAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,cAAA,gBAAAH;AAAA,gBAAC;AAAA,gBAAAM,EAAAC,EAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS,MAAMf,EAAgBL,CAAK;AAAA,kBACpC,UAAU,CAACV,KAAmBoB,EAAK;AAAA,kBACnC,gBAAcQ,IAAW,SAAS;AAAA,kBAClC,cAAYT,EAAcC,GAAMV,GAAOW,CAAM;AAAA,mBAMxCA,MAAW,YACZ,EAAE,eAAe,UAAA,IACjB,CAAA,IAbL;AAAA,kBAcC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMPU,EAAe,MAAM,CAAC;AAAA;AAAA,wBAEtBC,EAAkB,MAAM,CAAC;AAAA,wBAEzBX,MAAW,cACP,8CACAA,MAAW,WACT,8DACAA,MAAW,UACT,0CACA,yDACV;AAAA,wBACE,CAACrB,KAAmBoB,EAAK,WAAW,kCAAkC,gBAAgB;AAAA;AAAA,kBAGzF,UAAAE,EAAoBD,GAAQX,CAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEnCA,IAAQf,EAAM,SAAS,KACtB,gBAAA4B;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA;AAAA;AAAA,0BAGPI,EAAgB,MAAM,IAAI,CAAC;AAAA,0BAC3BN,MAAW,cAAc,eAAe,kBAAkB;AAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAEhE,GAEJ;AAAA,YAGA,gBAAAK,EAAC,SAAI,WAAW,UAAUC,EAAgB,MAAM,IAAI,CAAC,IACnD,UAAA;AAAA,cAAA,gBAAAJ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS,MAAMR,EAAgBL,CAAK;AAAA,kBACpC,UAAU,CAACV,KAAmBoB,EAAK;AAAA,kBACnC,IAAI,GAAGA,EAAK,EAAE;AAAA,kBACd,WAAW;AAAA;AAAA,wBAEPQ,IAAW,kBAAkB,aAAa;AAAA,wBAC1CP,MAAW,WAAW,2BAA2B,mBAAmB;AAAA,wBACpE,CAACrB,KAAmBoB,EAAK,WAAW,kCAAkC,gBAAgB;AAAA;AAAA,kBAGzF,UAAAA,EAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEPA,EAAK,eACJ,gBAAAG;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,4BAA4BI,EAAgB,MAAM,IAAI,CAAC;AAAA,kBAEjE,UAAAP,EAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,YACR,EAAA,CAEJ;AAAA,UAAA;AAAA,QAAA;AAAA,QA7EKA,EAAK;AAAA,MAAA;AAAA,IAgFhB,CAAC,EAAA,CACH;AAAA,IAGA,gBAAAM,EAAC,OAAA,EAAI,WAAU,UACb,UAAA;AAAA,MAAA,gBAAAH;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,mBACEP,IAAc,GAAGA,EAAY,EAAE,WAAW;AAAA,UAE5C,WAAW;AAAA,cACTW,EAAgB,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,cAG1BI,EAAe,IAAI,CAAC;AAAA;AAAA;AAAA,UAIrB,UAAAf,KAAA,gBAAAA,EAAa;AAAA,QAAA;AAAA,MAAA;AAAA,MAIhB,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,wBAAwBC,EAAgB,QAAQ,IAAI,CAAC,IAAIA,EAAgB,QAAQ,KAAK,CAAC;AAAA,UAElG,UAAA;AAAA,YAAA,gBAAAJ;AAAA,cAACU;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,SAASpB;AAAA,gBACT,UAAUI;AAAA,gBACX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAGD,gBAAAM,EAACU,KAAO,SAAQ,WAAU,SAAStB,GAChC,UAAAO,IAAa,aAAa,OAAA,CAC7B;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF,EAAA,CACF;AAAA,EAAA,GACF,IAMF,gBAAAQ,EAAC,OAAA,EAAI,WAAW,GAAGC,EAAgB,MAAM,SAAS,CAAC,IAAIxB,CAAS,IAE9D,UAAA;AAAA,IAAA,gBAAAoB,EAAC,SAAI,WAAU,qBACZ,YAAM,IAAI,CAACH,GAAMV,MAAU;AAC1B,YAAMW,IAASD,EAAK,UAAUX,EAAcC,CAAK,GAC3CkB,IAAWlB,MAAUF;AAE3B,aACE,gBAAAkB,EAAC,OAAA,EAAkB,WAAU,4BAC3B,UAAA;AAAA,QAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,UAAA,gBAAAH;AAAA,YAAC;AAAA,YAAAM,EAAAC,EAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAMf,EAAgBL,CAAK;AAAA,cACpC,UAAU,CAACV,KAAmBoB,EAAK;AAAA,cACnC,gBAAcQ,IAAW,SAAS;AAAA,cAClC,cAAYT,EAAcC,GAAMV,GAAOW,CAAM;AAAA,eAGxCA,MAAW,YACZ,EAAE,eAAe,UAAA,IACjB,CAAA,IAVL;AAAA,cAWC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMPU,EAAe,MAAM,CAAC;AAAA;AAAA,sBAEtBC,EAAkB,MAAM,CAAC;AAAA,sBAEzBX,MAAW,cACP,8CACAA,MAAW,WACT,8DACAA,MAAW,UACT,0CACA,yDACV;AAAA,sBACE,CAACrB,KAAmBoB,EAAK,WAAW,kCAAkC,gBAAgB;AAAA;AAAA,cAGzF,UAAAE,EAAoBD,GAAQX,CAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAEpC,gBAAAgB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAGC,EAAgB,MAAM,IAAI,CAAC,gBAAgBA,EAAgB,MAAM,IAAI,CAAC;AAAA,cAEpF,UAAA;AAAA,gBAAA,gBAAAJ;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAI,GAAGH,EAAK,EAAE;AAAA,oBACd,WAAW;AAAA;AAAA;AAAA,wBAGPQ,IAAW,2BAA2B,mBAAmB;AAAA;AAAA,oBAG5D,UAAAR,EAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEPA,EAAK,eACJ,gBAAAG;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAW,4BAA4BI,EAAgB,MAAM,IAAI,CAAC;AAAA,oBAEjE,UAAAP,EAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACR;AAAA,YAAA;AAAA,UAAA;AAAA,QAEJ,GACF;AAAA,QACCV,IAAQf,EAAM,SAAS,KACtB,gBAAA4B,EAAC,OAAA,EAAI,WAAW,UAAUI,EAAgB,QAAQ,IAAI,CAAC,IACrD,UAAA,gBAAAJ;AAAA,UAACW;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,wBACPb,MAAW,cAAc,mBAAmB,sBAAsB;AAAA;AAAA,UAAA;AAAA,QAAA,EAExE,CACF;AAAA,MAAA,EAAA,GAjEMD,EAAK,EAmEf;AAAA,IAEJ,CAAC,EAAA,CACH;AAAA,IAGA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,mBAAiBP,IAAc,GAAGA,EAAY,EAAE,WAAW;AAAA,QAC3D,WAAW;AAAA,UACTW,EAAgB,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,UAG1BI,EAAe,IAAI,CAAC;AAAA;AAAA;AAAA,QAIrB,UAAAf,KAAA,gBAAAA,EAAa;AAAA,MAAA;AAAA,IAAA;AAAA,IAIhB,gBAAAU,EAAC,SAAI,WAAW,wBAAwBC,EAAgB,QAAQ,KAAK,CAAC,IACpE,UAAA;AAAA,MAAA,gBAAAJ;AAAA,QAACU;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAASpB;AAAA,UACT,UAAUI;AAAA,UACX,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGD,gBAAAM,EAACU,KAAO,SAAQ,WAAU,SAAStB,GAChC,UAAAO,IAAa,aAAa,OAAA,CAC7B;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/granular/ui/components/Table/Table.js CHANGED Viewed

@@ -33,7 +33,7 @@ import R from "./TablePagination.js";
 import Z from "./TableEmptyState.js";
 import _ from "./TableActions.js";
 import { getRadiusClass as T } from "../../tokens/radius.js";
-function n(e) {
+function i(e) {
   const c = e, {
     className: a = "",
     "aria-label": o,
@@ -42,21 +42,21 @@ function n(e) {
     "className",
     "aria-label",
     "aria-labelledby"
-  ]), m = "children" in e && e.children !== void 0, i = m ? d : ee(
+  ]), m = "children" in e && e.children !== void 0, r = m ? d : ee(
     d
   );
   return m ? /* @__PURE__ */ s(
     "div",
     {
       className: `bg-surface-base shadow ${T("lg")} overflow-hidden ${a}`,
-      children: /* @__PURE__ */ s(w, h(f({}, i), { children: e.children }))
+      children: /* @__PURE__ */ s(w, h(f({}, r), { children: e.children }))
     }
   ) : /* @__PURE__ */ s(
     "div",
     {
       className: `bg-surface-base shadow ${T("lg")} overflow-hidden ${a}`,
-      children: /* @__PURE__ */ C(w, h(f({}, i), { children: [
-        i.filters && i.filters.length > 0 && /* @__PURE__ */ s(z, {}),
+      children: /* @__PURE__ */ C(w, h(f({}, r), { children: [
+        r.filters && r.filters.length > 0 && /* @__PURE__ */ s(z, {}),
         /* @__PURE__ */ s("div", { className: "overflow-x-auto", children: /* @__PURE__ */ C(
           "table",
           {
@@ -64,8 +64,8 @@ function n(e) {
             role: "table",
             "aria-label": o,
             "aria-labelledby": t,
-            "aria-rowcount": i.total || i.data.length,
-            "aria-colcount": i.columns.length + (i.selectable ? 1 : 0) + (i.actions ? 1 : 0),
+            "aria-rowcount": r.total || r.data.length,
+            "aria-colcount": r.columns.length + (r.selectable ? 1 : 0) + (r.actions ? 1 : 0),
             children: [
               /* @__PURE__ */ s(y, {}),
               /* @__PURE__ */ s(P, {})
@@ -84,20 +84,20 @@ function ee(e) {
     loading: t,
     onSort: d,
     sortColumn: m,
-    sortDirection: i,
+    sortDirection: r,
     emptyMessage: c,
     emptyStateTitle: F,
     emptyStateMessage: H,
     emptyStateIllustration: N,
     emptyStateAction: x,
     pagination: l,
-    filters: r,
+    filters: n,
     selectable: M,
-    selectedRows: V,
-    onSelectionChange: $,
-    rowId: A,
-    actions: B,
-    onRowClick: O,
+    selectedRows: $,
+    onSelectionChange: A,
+    rowId: B,
+    actions: O,
+    onRowClick: V,
     paginationMode: j,
     defaultPageSize: E,
     resizable: I,
@@ -120,18 +120,24 @@ function ee(e) {
     defaultPageSize: E || (l == null ? void 0 : l.pageSize) || 10,
     pageSizeOptions: l == null ? void 0 : l.pageSizeOptions,
     sortColumn: m,
-    sortDirection: i,
+    sortDirection: r,
     onSort: d,
-    filters: r == null ? void 0 : r.config,
-    filterValues: r == null ? void 0 : r.initialValues,
-    onFilter: r == null ? void 0 : r.onFilter,
-    initialFilterValues: r == null ? void 0 : r.initialValues,
+    filters: n == null ? void 0 : n.config,
+    // Seed the uncontrolled filter state ONLY. Mapping initialValues onto
+    // `filterValues` too flipped the provider into controlled-filter mode
+    // (isFilterControlled = filterValues !== undefined), freezing the
+    // internal filter state forever so client-side filtering never ran.
+    // The simplified Filters API exposes no controlled-filter prop, so
+    // there is no legitimate controlled path through it.
+    filterValues: void 0,
+    onFilter: n == null ? void 0 : n.onFilter,
+    initialFilterValues: n == null ? void 0 : n.initialValues,
     selectable: M,
-    selectedRows: V,
-    onSelectionChange: $,
-    rowId: A,
-    actions: B,
-    onRowClick: O,
+    selectedRows: $,
+    onSelectionChange: A,
+    rowId: B,
+    actions: O,
+    onRowClick: V,
     emptyMessage: c,
     emptyStateTitle: F,
     emptyStateMessage: H,
@@ -146,17 +152,17 @@ function ee(e) {
     // Placeholder, will be overridden by default structure
   };
 }
-n.Header = y;
-n.HeaderRow = Q;
-n.HeaderCell = U;
-n.Body = P;
-n.Row = X;
-n.Cell = Y;
-n.Filters = z;
-n.Pagination = R;
-n.EmptyState = Z;
-n.Actions = _;
+i.Header = y;
+i.HeaderRow = Q;
+i.HeaderCell = U;
+i.Body = P;
+i.Row = X;
+i.Cell = Y;
+i.Filters = z;
+i.Pagination = R;
+i.EmptyState = Z;
+i.Actions = _;
 export {
-  n as default
+  i as default
 };
 //# sourceMappingURL=Table.js.map