@fairmint/ui 0.4.8 → 0.4.9

package/dist/components/generic/StepProgress/StepProgress.cjs

@@ -67,28 +67,41 @@ function StepProgress({
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fairmint-step-progress__indicator", "aria-hidden": "true", children: status === "complete" ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) : stepNumber }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fairmint-step-progress__label", children: step.label })
         ] });
-        return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "fairmint-step-progress__item", children: isInteractive ? /* @__PURE__ */ jsxRuntime.jsx(
-          UnstyledButton.UnstyledButton,
-          {
-            type: "button",
-            className: "fairmint-step-progress__pill",
-            "data-state": status,
-            "data-interactive": "true",
-            "aria-current": status === "active" ? "step" : void 0,
-            "aria-label": `Step ${stepNumber}: ${step.label}`,
-            onClick: () => onStepChange?.(stepNumber),
-            children: pillContent
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: "fairmint-step-progress__pill",
-            "data-state": status,
-            "aria-current": status === "active" ? "step" : void 0,
-            title: `Step ${stepNumber}: ${step.label}`,
-            children: pillContent
-          }
-        ) }, `${stepNumber}-${step.label}`);
+        return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "fairmint-step-progress__item", children: [
+          isInteractive ? /* @__PURE__ */ jsxRuntime.jsx(
+            UnstyledButton.UnstyledButton,
+            {
+              type: "button",
+              className: "fairmint-step-progress__pill",
+              "data-state": status,
+              "data-interactive": "true",
+              "data-disabled": "false",
+              "aria-current": status === "active" ? "step" : void 0,
+              "aria-label": `Step ${stepNumber}: ${step.label}`,
+              onClick: () => onStepChange?.(stepNumber),
+              children: pillContent
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "fairmint-step-progress__pill",
+              "data-state": status,
+              "data-disabled": step.disabled ? "true" : "false",
+              "aria-current": status === "active" ? "step" : void 0,
+              "aria-disabled": step.disabled || void 0,
+              title: `Step ${stepNumber}: ${step.label}`,
+              children: pillContent
+            }
+          ),
+          index2 < steps.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "fairmint-step-progress__connector",
+              "data-state": status,
+              "aria-hidden": "true"
+            }
+          ) : null
+        ] }, `${stepNumber}-${step.label}`);
       }) })
     }
   );

package/dist/components/generic/StepProgress/StepProgress.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"StepProgress.cjs","sources":["../../../../src/components/generic/StepProgress/StepProgress.tsx"],"sourcesContent":["import { brandColors, commonColors, fairmintVars, indigoColors } from \"../../../theme\";\nimport { Box, UnstyledButton } from \"../../primitives/layout\";\nimport \"./StepProgress.css\";\n\nexport type StepProgressOrientation = \"horizontal\" | \"vertical\";\nexport type StepProgressStepStatus = \"complete\" | \"active\" | \"pending\";\n\nexport interface StepProgressStep {\n  /** Visible label in the progress pill. */\n  label: string;\n  /** Explicitly mark a step complete when completion is not derived from activeStep. */\n  completed?: boolean;\n  /** Prevent navigation to this step when onStepChange is supplied. */\n  disabled?: boolean;\n}\n\nexport interface StepProgressProps {\n  /** Ordered steps. The visible number is derived from this array and is 1-indexed. */\n  steps: readonly StepProgressStep[];\n  /** Current step number. This is intentionally 1-indexed to match StepCard and the UI. */\n  activeStep: number;\n  /** Row of pills for in-app progress or a rail for onboarding. @default \"horizontal\" */\n  orientation?: StepProgressOrientation;\n  /** Called with the 1-indexed step number when a pill is activated. */\n  onStepChange?: (step: number) => void;\n  /** Accessible label for the navigation. @default \"Progress\" */\n  ariaLabel?: string;\n}\n\nconst CheckIcon = () => (\n  <svg\n    width=\"11\"\n    height=\"11\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m5 13 4 4 10-10\" />\n  </svg>\n);\n\nconst resolveActiveStep = (activeStep: number, stepCount: number) => {\n  if (!Number.isFinite(activeStep)) return 1;\n  return Math.min(Math.max(Math.trunc(activeStep), 1), stepCount);\n};\n\nexport const getStepProgressStatus = (\n  step: StepProgressStep,\n  stepNumber: number,\n  activeStep: number,\n): StepProgressStepStatus => {\n  if (stepNumber === activeStep) return \"active\";\n  if (step.completed ?? stepNumber < activeStep) return \"complete\";\n  return \"pending\";\n};\n\n/**\n * Numbered progress pills shared by horizontal in-app flows and vertical\n * onboarding rails. Owns navigation only — the numbered content container is\n * `StepCard`, and `StepFlow` pairs the two into the canonical shell.\n */\nexport function StepProgress({\n  steps,\n  activeStep,\n  orientation = \"horizontal\",\n  onStepChange,\n  ariaLabel = \"Progress\",\n}: StepProgressProps) {\n  if (steps.length === 0) return null;\n\n  const resolvedActiveStep = resolveActiveStep(activeStep, steps.length);\n  const rootStyle = {\n    \"--fairmint-step-progress-brand\": brandColors.indigo,\n    \"--fairmint-step-progress-border\": fairmintVars.colorBorderDefault,\n    \"--fairmint-step-progress-text-primary\": fairmintVars.colorTextPrimary,\n    \"--fairmint-step-progress-text-secondary\": fairmintVars.colorTextSecondary,\n    \"--fairmint-step-progress-surface-selected\": fairmintVars.colorSurfaceSelected,\n    // One shared accent tone for anything bordering/reading on colorSurfaceSelected,\n    // instead of two adjacent-but-different indigo shades competing.\n    \"--fairmint-step-progress-active-border\": indigoColors[2],\n    \"--fairmint-step-progress-active-indicator-text\": commonColors.white,\n    \"--fairmint-step-progress-complete-border\": indigoColors[2],\n    \"--fairmint-step-progress-complete-text\": fairmintVars.colorIconOnSurfaceSelected,\n  };\n\n  return (\n    <Box\n      component=\"nav\"\n      aria-label={ariaLabel}\n      className=\"fairmint-step-progress\"\n      data-orientation={orientation}\n      style={rootStyle}\n    >\n      <ol className=\"fairmint-step-progress__list\">\n        {steps.map((step, index) => {\n          const stepNumber = index + 1;\n          const status = getStepProgressStatus(step, stepNumber, resolvedActiveStep);\n          const isInteractive = Boolean(onStepChange) && !step.disabled;\n          const pillContent = (\n            <>\n              <span className=\"fairmint-step-progress__indicator\" aria-hidden=\"true\">\n                {status === \"complete\" ? <CheckIcon /> : stepNumber}\n              </span>\n              <span className=\"fairmint-step-progress__label\">{step.label}</span>\n            </>\n          );\n\n          return (\n            <li key={`${stepNumber}-${step.label}`} className=\"fairmint-step-progress__item\">\n              {isInteractive ? (\n                <UnstyledButton\n                  type=\"button\"\n                  className=\"fairmint-step-progress__pill\"\n                  data-state={status}\n                  data-interactive=\"true\"\n                  aria-current={status === \"active\" ? \"step\" : undefined}\n                  aria-label={`Step ${stepNumber}: ${step.label}`}\n                  onClick={() => onStepChange?.(stepNumber)}\n                >\n                  {pillContent}\n                </UnstyledButton>\n              ) : (\n                <span\n                  className=\"fairmint-step-progress__pill\"\n                  data-state={status}\n                  aria-current={status === \"active\" ? \"step\" : undefined}\n                  title={`Step ${stepNumber}: ${step.label}`}\n                >\n                  {pillContent}\n                </span>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </Box>\n  );\n}\n\nexport const STEP_PROGRESS_MOBILE_BREAKPOINT = \"48em\";\n"],"names":["jsx","brandColors","fairmintVars","indigoColors","commonColors","Box","index","jsxs","Fragment","UnstyledButton"],"mappings":"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"}
+{"version":3,"file":"StepProgress.cjs","sources":["../../../../src/components/generic/StepProgress/StepProgress.tsx"],"sourcesContent":["import { brandColors, commonColors, fairmintVars, indigoColors } from \"../../../theme\";\nimport { Box, UnstyledButton } from \"../../primitives/layout\";\nimport \"./StepProgress.css\";\n\nexport type StepProgressOrientation = \"horizontal\" | \"vertical\";\nexport type StepProgressStepStatus = \"complete\" | \"active\" | \"pending\";\n\nexport interface StepProgressStep {\n  /** Visible label in the progress pill. */\n  label: string;\n  /** Explicitly mark a step complete when completion is not derived from activeStep. */\n  completed?: boolean;\n  /** Prevent navigation to this step when onStepChange is supplied. */\n  disabled?: boolean;\n}\n\nexport interface StepProgressProps {\n  /** Ordered steps. The visible number is derived from this array and is 1-indexed. */\n  steps: readonly StepProgressStep[];\n  /** Current step number. This is intentionally 1-indexed to match StepCard and the UI. */\n  activeStep: number;\n  /** Row of pills for in-app progress or a rail for onboarding. @default \"horizontal\" */\n  orientation?: StepProgressOrientation;\n  /** Called with the 1-indexed step number when a pill is activated. */\n  onStepChange?: (step: number) => void;\n  /** Accessible label for the navigation. @default \"Progress\" */\n  ariaLabel?: string;\n}\n\nconst CheckIcon = () => (\n  <svg\n    width=\"11\"\n    height=\"11\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m5 13 4 4 10-10\" />\n  </svg>\n);\n\nconst resolveActiveStep = (activeStep: number, stepCount: number) => {\n  if (!Number.isFinite(activeStep)) return 1;\n  return Math.min(Math.max(Math.trunc(activeStep), 1), stepCount);\n};\n\nexport const getStepProgressStatus = (\n  step: StepProgressStep,\n  stepNumber: number,\n  activeStep: number,\n): StepProgressStepStatus => {\n  if (stepNumber === activeStep) return \"active\";\n  if (step.completed ?? stepNumber < activeStep) return \"complete\";\n  return \"pending\";\n};\n\n/**\n * Numbered progress pills shared by horizontal in-app flows and vertical\n * onboarding rails. Owns navigation only — the numbered content container is\n * `StepCard`, and `StepFlow` pairs the two into the canonical shell.\n */\nexport function StepProgress({\n  steps,\n  activeStep,\n  orientation = \"horizontal\",\n  onStepChange,\n  ariaLabel = \"Progress\",\n}: StepProgressProps) {\n  if (steps.length === 0) return null;\n\n  const resolvedActiveStep = resolveActiveStep(activeStep, steps.length);\n  const rootStyle = {\n    \"--fairmint-step-progress-brand\": brandColors.indigo,\n    \"--fairmint-step-progress-border\": fairmintVars.colorBorderDefault,\n    \"--fairmint-step-progress-text-primary\": fairmintVars.colorTextPrimary,\n    \"--fairmint-step-progress-text-secondary\": fairmintVars.colorTextSecondary,\n    \"--fairmint-step-progress-surface-selected\": fairmintVars.colorSurfaceSelected,\n    // One shared accent tone for anything bordering/reading on colorSurfaceSelected,\n    // instead of two adjacent-but-different indigo shades competing.\n    \"--fairmint-step-progress-active-border\": indigoColors[2],\n    \"--fairmint-step-progress-active-indicator-text\": commonColors.white,\n    \"--fairmint-step-progress-complete-border\": indigoColors[2],\n    \"--fairmint-step-progress-complete-text\": fairmintVars.colorIconOnSurfaceSelected,\n  };\n\n  return (\n    <Box\n      component=\"nav\"\n      aria-label={ariaLabel}\n      className=\"fairmint-step-progress\"\n      data-orientation={orientation}\n      style={rootStyle}\n    >\n      <ol className=\"fairmint-step-progress__list\">\n        {steps.map((step, index) => {\n          const stepNumber = index + 1;\n          const status = getStepProgressStatus(step, stepNumber, resolvedActiveStep);\n          const isInteractive = Boolean(onStepChange) && !step.disabled;\n          const pillContent = (\n            <>\n              <span className=\"fairmint-step-progress__indicator\" aria-hidden=\"true\">\n                {status === \"complete\" ? <CheckIcon /> : stepNumber}\n              </span>\n              <span className=\"fairmint-step-progress__label\">{step.label}</span>\n            </>\n          );\n\n          return (\n            <li key={`${stepNumber}-${step.label}`} className=\"fairmint-step-progress__item\">\n              {isInteractive ? (\n                <UnstyledButton\n                  type=\"button\"\n                  className=\"fairmint-step-progress__pill\"\n                  data-state={status}\n                  data-interactive=\"true\"\n                  data-disabled=\"false\"\n                  aria-current={status === \"active\" ? \"step\" : undefined}\n                  aria-label={`Step ${stepNumber}: ${step.label}`}\n                  onClick={() => onStepChange?.(stepNumber)}\n                >\n                  {pillContent}\n                </UnstyledButton>\n              ) : (\n                <span\n                  className=\"fairmint-step-progress__pill\"\n                  data-state={status}\n                  data-disabled={step.disabled ? \"true\" : \"false\"}\n                  aria-current={status === \"active\" ? \"step\" : undefined}\n                  aria-disabled={step.disabled || undefined}\n                  title={`Step ${stepNumber}: ${step.label}`}\n                >\n                  {pillContent}\n                </span>\n              )}\n              {index < steps.length - 1 ? (\n                <span\n                  className=\"fairmint-step-progress__connector\"\n                  data-state={status}\n                  aria-hidden=\"true\"\n                />\n              ) : null}\n            </li>\n          );\n        })}\n      </ol>\n    </Box>\n  );\n}\n\nexport const STEP_PROGRESS_MOBILE_BREAKPOINT = \"48em\";\n"],"names":["jsx","brandColors","fairmintVars","indigoColors","commonColors","Box","index","jsxs","Fragment","UnstyledButton"],"mappings":"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"}

package/dist/components/generic/StepProgress/StepProgress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepProgress.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/StepProgress/StepProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAE5B,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAAG,UAAU,CAAC;AAChE,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEvE,MAAM,WAAW,gBAAgB;IAC/B,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,sFAAsF;IACtF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,qFAAqF;IACrF,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACnC,yFAAyF;IACzF,UAAU,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,sEAAsE;IACtE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD,eAAO,MAAM,qBAAqB,GAChC,MAAM,gBAAgB,EACtB,YAAY,MAAM,EAClB,YAAY,MAAM,KACjB,sBAIF,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,UAAU,EACV,WAA0B,EAC1B,YAAY,EACZ,SAAsB,GACvB,EAAE,iBAAiB,sCAsEnB;AAED,eAAO,MAAM,+BAA+B,SAAS,CAAC"}
+{"version":3,"file":"StepProgress.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/StepProgress/StepProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAE5B,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAAG,UAAU,CAAC;AAChE,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEvE,MAAM,WAAW,gBAAgB;IAC/B,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,sFAAsF;IACtF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,qFAAqF;IACrF,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACnC,yFAAyF;IACzF,UAAU,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,sEAAsE;IACtE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD,eAAO,MAAM,qBAAqB,GAChC,MAAM,gBAAgB,EACtB,YAAY,MAAM,EAClB,YAAY,MAAM,KACjB,sBAIF,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,UAAU,EACV,WAA0B,EAC1B,YAAY,EACZ,SAAsB,GACvB,EAAE,iBAAiB,sCAgFnB;AAED,eAAO,MAAM,+BAA+B,SAAS,CAAC"}

package/dist/components/generic/StepProgress/StepProgress.js

@@ -65,28 +65,41 @@ function StepProgress({
           /* @__PURE__ */ jsx("span", { className: "fairmint-step-progress__indicator", "aria-hidden": "true", children: status === "complete" ? /* @__PURE__ */ jsx(CheckIcon, {}) : stepNumber }),
           /* @__PURE__ */ jsx("span", { className: "fairmint-step-progress__label", children: step.label })
         ] });
-        return /* @__PURE__ */ jsx("li", { className: "fairmint-step-progress__item", children: isInteractive ? /* @__PURE__ */ jsx(
-          UnstyledButton,
-          {
-            type: "button",
-            className: "fairmint-step-progress__pill",
-            "data-state": status,
-            "data-interactive": "true",
-            "aria-current": status === "active" ? "step" : void 0,
-            "aria-label": `Step ${stepNumber}: ${step.label}`,
-            onClick: () => onStepChange?.(stepNumber),
-            children: pillContent
-          }
-        ) : /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "fairmint-step-progress__pill",
-            "data-state": status,
-            "aria-current": status === "active" ? "step" : void 0,
-            title: `Step ${stepNumber}: ${step.label}`,
-            children: pillContent
-          }
-        ) }, `${stepNumber}-${step.label}`);
+        return /* @__PURE__ */ jsxs("li", { className: "fairmint-step-progress__item", children: [
+          isInteractive ? /* @__PURE__ */ jsx(
+            UnstyledButton,
+            {
+              type: "button",
+              className: "fairmint-step-progress__pill",
+              "data-state": status,
+              "data-interactive": "true",
+              "data-disabled": "false",
+              "aria-current": status === "active" ? "step" : void 0,
+              "aria-label": `Step ${stepNumber}: ${step.label}`,
+              onClick: () => onStepChange?.(stepNumber),
+              children: pillContent
+            }
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "fairmint-step-progress__pill",
+              "data-state": status,
+              "data-disabled": step.disabled ? "true" : "false",
+              "aria-current": status === "active" ? "step" : void 0,
+              "aria-disabled": step.disabled || void 0,
+              title: `Step ${stepNumber}: ${step.label}`,
+              children: pillContent
+            }
+          ),
+          index < steps.length - 1 ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "fairmint-step-progress__connector",
+              "data-state": status,
+              "aria-hidden": "true"
+            }
+          ) : null
+        ] }, `${stepNumber}-${step.label}`);
       }) })
     }
   );

package/dist/components/generic/StepProgress/StepProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepProgress.js","sources":["../../../../src/components/generic/StepProgress/StepProgress.tsx"],"sourcesContent":["import { brandColors, commonColors, fairmintVars, indigoColors } from \"../../../theme\";\nimport { Box, UnstyledButton } from \"../../primitives/layout\";\nimport \"./StepProgress.css\";\n\nexport type StepProgressOrientation = \"horizontal\" | \"vertical\";\nexport type StepProgressStepStatus = \"complete\" | \"active\" | \"pending\";\n\nexport interface StepProgressStep {\n  /** Visible label in the progress pill. */\n  label: string;\n  /** Explicitly mark a step complete when completion is not derived from activeStep. */\n  completed?: boolean;\n  /** Prevent navigation to this step when onStepChange is supplied. */\n  disabled?: boolean;\n}\n\nexport interface StepProgressProps {\n  /** Ordered steps. The visible number is derived from this array and is 1-indexed. */\n  steps: readonly StepProgressStep[];\n  /** Current step number. This is intentionally 1-indexed to match StepCard and the UI. */\n  activeStep: number;\n  /** Row of pills for in-app progress or a rail for onboarding. @default \"horizontal\" */\n  orientation?: StepProgressOrientation;\n  /** Called with the 1-indexed step number when a pill is activated. */\n  onStepChange?: (step: number) => void;\n  /** Accessible label for the navigation. @default \"Progress\" */\n  ariaLabel?: string;\n}\n\nconst CheckIcon = () => (\n  <svg\n    width=\"11\"\n    height=\"11\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m5 13 4 4 10-10\" />\n  </svg>\n);\n\nconst resolveActiveStep = (activeStep: number, stepCount: number) => {\n  if (!Number.isFinite(activeStep)) return 1;\n  return Math.min(Math.max(Math.trunc(activeStep), 1), stepCount);\n};\n\nexport const getStepProgressStatus = (\n  step: StepProgressStep,\n  stepNumber: number,\n  activeStep: number,\n): StepProgressStepStatus => {\n  if (stepNumber === activeStep) return \"active\";\n  if (step.completed ?? stepNumber < activeStep) return \"complete\";\n  return \"pending\";\n};\n\n/**\n * Numbered progress pills shared by horizontal in-app flows and vertical\n * onboarding rails. Owns navigation only — the numbered content container is\n * `StepCard`, and `StepFlow` pairs the two into the canonical shell.\n */\nexport function StepProgress({\n  steps,\n  activeStep,\n  orientation = \"horizontal\",\n  onStepChange,\n  ariaLabel = \"Progress\",\n}: StepProgressProps) {\n  if (steps.length === 0) return null;\n\n  const resolvedActiveStep = resolveActiveStep(activeStep, steps.length);\n  const rootStyle = {\n    \"--fairmint-step-progress-brand\": brandColors.indigo,\n    \"--fairmint-step-progress-border\": fairmintVars.colorBorderDefault,\n    \"--fairmint-step-progress-text-primary\": fairmintVars.colorTextPrimary,\n    \"--fairmint-step-progress-text-secondary\": fairmintVars.colorTextSecondary,\n    \"--fairmint-step-progress-surface-selected\": fairmintVars.colorSurfaceSelected,\n    // One shared accent tone for anything bordering/reading on colorSurfaceSelected,\n    // instead of two adjacent-but-different indigo shades competing.\n    \"--fairmint-step-progress-active-border\": indigoColors[2],\n    \"--fairmint-step-progress-active-indicator-text\": commonColors.white,\n    \"--fairmint-step-progress-complete-border\": indigoColors[2],\n    \"--fairmint-step-progress-complete-text\": fairmintVars.colorIconOnSurfaceSelected,\n  };\n\n  return (\n    <Box\n      component=\"nav\"\n      aria-label={ariaLabel}\n      className=\"fairmint-step-progress\"\n      data-orientation={orientation}\n      style={rootStyle}\n    >\n      <ol className=\"fairmint-step-progress__list\">\n        {steps.map((step, index) => {\n          const stepNumber = index + 1;\n          const status = getStepProgressStatus(step, stepNumber, resolvedActiveStep);\n          const isInteractive = Boolean(onStepChange) && !step.disabled;\n          const pillContent = (\n            <>\n              <span className=\"fairmint-step-progress__indicator\" aria-hidden=\"true\">\n                {status === \"complete\" ? <CheckIcon /> : stepNumber}\n              </span>\n              <span className=\"fairmint-step-progress__label\">{step.label}</span>\n            </>\n          );\n\n          return (\n            <li key={`${stepNumber}-${step.label}`} className=\"fairmint-step-progress__item\">\n              {isInteractive ? (\n                <UnstyledButton\n                  type=\"button\"\n                  className=\"fairmint-step-progress__pill\"\n                  data-state={status}\n                  data-interactive=\"true\"\n                  aria-current={status === \"active\" ? \"step\" : undefined}\n                  aria-label={`Step ${stepNumber}: ${step.label}`}\n                  onClick={() => onStepChange?.(stepNumber)}\n                >\n                  {pillContent}\n                </UnstyledButton>\n              ) : (\n                <span\n                  className=\"fairmint-step-progress__pill\"\n                  data-state={status}\n                  aria-current={status === \"active\" ? \"step\" : undefined}\n                  title={`Step ${stepNumber}: ${step.label}`}\n                >\n                  {pillContent}\n                </span>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </Box>\n  );\n}\n\nexport const STEP_PROGRESS_MOBILE_BREAKPOINT = \"48em\";\n"],"names":[],"mappings":";;;;;AA6BA,MAAM,YAAY,MAChB;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IAEZ,UAAA,oBAAC,QAAA,EAAK,GAAE,kBAAA,CAAkB;AAAA,EAAA;AAC5B;AAGF,MAAM,oBAAoB,CAAC,YAAoB,cAAsB;AACnE,MAAI,CAAC,OAAO,SAAS,UAAU,EAAG,QAAO;AACzC,SAAO,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,UAAU,GAAG,CAAC,GAAG,SAAS;AAChE;AAEO,MAAM,wBAAwB,CACnC,MACA,YACA,eAC2B;AAC3B,MAAI,eAAe,WAAY,QAAO;AACtC,MAAI,KAAK,aAAa,aAAa,WAAY,QAAO;AACtD,SAAO;AACT;AAOO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,YAAY;AACd,GAAsB;AACpB,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,QAAM,qBAAqB,kBAAkB,YAAY,MAAM,MAAM;AACrE,QAAM,YAAY;AAAA,IAChB,kCAAkC,YAAY;AAAA,IAC9C,mCAAmC,aAAa;AAAA,IAChD,yCAAyC,aAAa;AAAA,IACtD,2CAA2C,aAAa;AAAA,IACxD,6CAA6C,aAAa;AAAA;AAAA;AAAA,IAG1D,0CAA0C,aAAa,CAAC;AAAA,IACxD,kDAAkD,aAAa;AAAA,IAC/D,4CAA4C,aAAa,CAAC;AAAA,IAC1D,0CAA0C,aAAa;AAAA,EAAA;AAGzD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,cAAY;AAAA,MACZ,WAAU;AAAA,MACV,oBAAkB;AAAA,MAClB,OAAO;AAAA,MAEP,UAAA,oBAAC,QAAG,WAAU,gCACX,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,cAAM,aAAa,QAAQ;AAC3B,cAAM,SAAS,sBAAsB,MAAM,YAAY,kBAAkB;AACzE,cAAM,gBAAgB,QAAQ,YAAY,KAAK,CAAC,KAAK;AACrD,cAAM,cACJ,qBAAA,UAAA,EACE,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,qCAAoC,eAAY,QAC7D,qBAAW,aAAa,oBAAC,WAAA,CAAA,CAAU,IAAK,WAAA,CAC3C;AAAA,UACA,oBAAC,QAAA,EAAK,WAAU,iCAAiC,eAAK,MAAA,CAAM;AAAA,QAAA,GAC9D;AAGF,eACE,oBAAC,MAAA,EAAuC,WAAU,gCAC/C,UAAA,gBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,cAAY;AAAA,YACZ,oBAAiB;AAAA,YACjB,gBAAc,WAAW,WAAW,SAAS;AAAA,YAC7C,cAAY,QAAQ,UAAU,KAAK,KAAK,KAAK;AAAA,YAC7C,SAAS,MAAM,eAAe,UAAU;AAAA,YAEvC,UAAA;AAAA,UAAA;AAAA,QAAA,IAGH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,cAAY;AAAA,YACZ,gBAAc,WAAW,WAAW,SAAS;AAAA,YAC7C,OAAO,QAAQ,UAAU,KAAK,KAAK,KAAK;AAAA,YAEvC,UAAA;AAAA,UAAA;AAAA,QAAA,KApBE,GAAG,UAAU,IAAI,KAAK,KAAK,EAuBpC;AAAA,MAEJ,CAAC,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;AAEO,MAAM,kCAAkC;"}
+{"version":3,"file":"StepProgress.js","sources":["../../../../src/components/generic/StepProgress/StepProgress.tsx"],"sourcesContent":["import { brandColors, commonColors, fairmintVars, indigoColors } from \"../../../theme\";\nimport { Box, UnstyledButton } from \"../../primitives/layout\";\nimport \"./StepProgress.css\";\n\nexport type StepProgressOrientation = \"horizontal\" | \"vertical\";\nexport type StepProgressStepStatus = \"complete\" | \"active\" | \"pending\";\n\nexport interface StepProgressStep {\n  /** Visible label in the progress pill. */\n  label: string;\n  /** Explicitly mark a step complete when completion is not derived from activeStep. */\n  completed?: boolean;\n  /** Prevent navigation to this step when onStepChange is supplied. */\n  disabled?: boolean;\n}\n\nexport interface StepProgressProps {\n  /** Ordered steps. The visible number is derived from this array and is 1-indexed. */\n  steps: readonly StepProgressStep[];\n  /** Current step number. This is intentionally 1-indexed to match StepCard and the UI. */\n  activeStep: number;\n  /** Row of pills for in-app progress or a rail for onboarding. @default \"horizontal\" */\n  orientation?: StepProgressOrientation;\n  /** Called with the 1-indexed step number when a pill is activated. */\n  onStepChange?: (step: number) => void;\n  /** Accessible label for the navigation. @default \"Progress\" */\n  ariaLabel?: string;\n}\n\nconst CheckIcon = () => (\n  <svg\n    width=\"11\"\n    height=\"11\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m5 13 4 4 10-10\" />\n  </svg>\n);\n\nconst resolveActiveStep = (activeStep: number, stepCount: number) => {\n  if (!Number.isFinite(activeStep)) return 1;\n  return Math.min(Math.max(Math.trunc(activeStep), 1), stepCount);\n};\n\nexport const getStepProgressStatus = (\n  step: StepProgressStep,\n  stepNumber: number,\n  activeStep: number,\n): StepProgressStepStatus => {\n  if (stepNumber === activeStep) return \"active\";\n  if (step.completed ?? stepNumber < activeStep) return \"complete\";\n  return \"pending\";\n};\n\n/**\n * Numbered progress pills shared by horizontal in-app flows and vertical\n * onboarding rails. Owns navigation only — the numbered content container is\n * `StepCard`, and `StepFlow` pairs the two into the canonical shell.\n */\nexport function StepProgress({\n  steps,\n  activeStep,\n  orientation = \"horizontal\",\n  onStepChange,\n  ariaLabel = \"Progress\",\n}: StepProgressProps) {\n  if (steps.length === 0) return null;\n\n  const resolvedActiveStep = resolveActiveStep(activeStep, steps.length);\n  const rootStyle = {\n    \"--fairmint-step-progress-brand\": brandColors.indigo,\n    \"--fairmint-step-progress-border\": fairmintVars.colorBorderDefault,\n    \"--fairmint-step-progress-text-primary\": fairmintVars.colorTextPrimary,\n    \"--fairmint-step-progress-text-secondary\": fairmintVars.colorTextSecondary,\n    \"--fairmint-step-progress-surface-selected\": fairmintVars.colorSurfaceSelected,\n    // One shared accent tone for anything bordering/reading on colorSurfaceSelected,\n    // instead of two adjacent-but-different indigo shades competing.\n    \"--fairmint-step-progress-active-border\": indigoColors[2],\n    \"--fairmint-step-progress-active-indicator-text\": commonColors.white,\n    \"--fairmint-step-progress-complete-border\": indigoColors[2],\n    \"--fairmint-step-progress-complete-text\": fairmintVars.colorIconOnSurfaceSelected,\n  };\n\n  return (\n    <Box\n      component=\"nav\"\n      aria-label={ariaLabel}\n      className=\"fairmint-step-progress\"\n      data-orientation={orientation}\n      style={rootStyle}\n    >\n      <ol className=\"fairmint-step-progress__list\">\n        {steps.map((step, index) => {\n          const stepNumber = index + 1;\n          const status = getStepProgressStatus(step, stepNumber, resolvedActiveStep);\n          const isInteractive = Boolean(onStepChange) && !step.disabled;\n          const pillContent = (\n            <>\n              <span className=\"fairmint-step-progress__indicator\" aria-hidden=\"true\">\n                {status === \"complete\" ? <CheckIcon /> : stepNumber}\n              </span>\n              <span className=\"fairmint-step-progress__label\">{step.label}</span>\n            </>\n          );\n\n          return (\n            <li key={`${stepNumber}-${step.label}`} className=\"fairmint-step-progress__item\">\n              {isInteractive ? (\n                <UnstyledButton\n                  type=\"button\"\n                  className=\"fairmint-step-progress__pill\"\n                  data-state={status}\n                  data-interactive=\"true\"\n                  data-disabled=\"false\"\n                  aria-current={status === \"active\" ? \"step\" : undefined}\n                  aria-label={`Step ${stepNumber}: ${step.label}`}\n                  onClick={() => onStepChange?.(stepNumber)}\n                >\n                  {pillContent}\n                </UnstyledButton>\n              ) : (\n                <span\n                  className=\"fairmint-step-progress__pill\"\n                  data-state={status}\n                  data-disabled={step.disabled ? \"true\" : \"false\"}\n                  aria-current={status === \"active\" ? \"step\" : undefined}\n                  aria-disabled={step.disabled || undefined}\n                  title={`Step ${stepNumber}: ${step.label}`}\n                >\n                  {pillContent}\n                </span>\n              )}\n              {index < steps.length - 1 ? (\n                <span\n                  className=\"fairmint-step-progress__connector\"\n                  data-state={status}\n                  aria-hidden=\"true\"\n                />\n              ) : null}\n            </li>\n          );\n        })}\n      </ol>\n    </Box>\n  );\n}\n\nexport const STEP_PROGRESS_MOBILE_BREAKPOINT = \"48em\";\n"],"names":[],"mappings":"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"}

package/dist/styles.css

@@ -21,6 +21,7 @@
 .fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__list {
   flex-direction: column;
   justify-content: flex-start;
+  gap: 0;
   margin: 0;
   overflow: visible;
 }
@@ -45,6 +46,8 @@
 
 .fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__item {
   flex: none;
+  width: 100%;
+  max-width: none;
 }
 
 /*
@@ -91,10 +94,20 @@
   justify-content: center;
 }
 
+.fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__pill {
+  padding: 0.375rem 0.625rem;
+  border-color: transparent;
+  border-radius: 0.5rem;
+}
+
 .fairmint-step-progress__pill[data-interactive="true"] {
   cursor: pointer;
 }
 
+.fairmint-step-progress__pill[data-disabled="true"] {
+  opacity: 0.55;
+}
+
 .fairmint-step-progress__pill[data-interactive="true"]:hover {
   background: var(--fairmint-interactive-hover-bg, #f8f9fa);
 }
@@ -110,6 +123,11 @@
   color: var(--fairmint-step-progress-text-primary, #111927);
 }
 
+.fairmint-step-progress[data-orientation="vertical"]
+  .fairmint-step-progress__pill[data-state="active"] {
+  border-color: transparent;
+}
+
 .fairmint-step-progress__indicator {
   display: inline-flex;
   flex: 0 0 1.125rem;
@@ -137,6 +155,12 @@
   color: var(--fairmint-step-progress-complete-text, #4f46e5);
 }
 
+.fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__indicator {
+  flex-basis: 1.375rem;
+  width: 1.375rem;
+  height: 1.375rem;
+}
+
 .fairmint-step-progress__label {
   min-width: 0;
   overflow: hidden;
@@ -151,9 +175,33 @@
   font-weight: 600;
 }
 
+.fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__label {
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+}
+
+.fairmint-step-progress__connector {
+  display: none;
+}
+
+.fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__connector {
+  display: block;
+  width: 1px;
+  height: 0.875rem;
+  margin-left: 1.3125rem;
+  background: var(--fairmint-step-progress-border, #d2d6db);
+}
+
+.fairmint-step-progress[data-orientation="vertical"]
+  .fairmint-step-progress__connector[data-state="complete"] {
+  background: var(--fairmint-step-progress-complete-border, #a5b4fc);
+}
+
 @media (max-width: 47.99em) {
   .fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__list {
     flex-direction: row;
+    gap: 0.5rem;
     margin-bottom: 1.5rem;
     overflow-x: auto;
   }
@@ -164,6 +212,8 @@
 
   .fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__item {
     flex: 0 0 auto;
+    width: auto;
+    max-width: 14rem;
   }
 
   .fairmint-step-progress .fairmint-step-progress__pill {
@@ -171,6 +221,33 @@
     width: auto;
     min-width: 9rem;
   }
+
+  .fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__pill {
+    min-height: 2.125rem;
+    padding: 0.5rem 0.75rem;
+    border-radius: 999px;
+  }
+
+  .fairmint-step-progress[data-orientation="vertical"]
+    .fairmint-step-progress__pill[data-state="active"] {
+    border-color: var(--fairmint-step-progress-active-border, #c7d2fe);
+  }
+
+  .fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__indicator {
+    flex-basis: 1.125rem;
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+
+  .fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__connector {
+    display: none;
+  }
 }
 .fairmint-step-flow {
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fairmint/ui",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "type": "module",
   "description": "Fairmint design system and UI component library",
   "license": "SEE LICENSE IN LICENSE",