@astryxdesign/lab 0.0.0-bootstrap.0 → 0.1.2-canary.04e71b2

package/dist/Stepper/Step.js

@@ -0,0 +1,573 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file Step.tsx
+ * @input Uses React, stylex, theme tokens, StepperContext
+ * @output Exports Step component and StepProps
+ * @position Individual step item; used inside Stepper
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/Stepper/Stepper.doc.mjs
+ * - /packages/lab/src/Stepper/Stepper.test.tsx
+ * - /packages/lab/src/Stepper/index.ts
+ * - /apps/storybook/stories/Stepper.stories.tsx
+ * - /packages/cli/templates/blocks/components/Stepper/ (showcase blocks)
+ */
+import * as stylex from '@stylexjs/stylex';
+import '@astryxdesign/core/theme/tokens.stylex';
+import { colorVars, spacingVars, radiusVars, fontWeightVars, typeScaleVars, durationVars, easeVars } from '@astryxdesign/core/theme/tokens.stylex';
+import { mergeProps } from '@astryxdesign/core/utils';
+import { useStepperContext } from "./StepperContext.js";
+import { themeProps } from '@astryxdesign/core/utils';
+
+/**
+ * Built-in indicator presets. Anything other than these strings passed to
+ * `indicator` is treated as a custom ReactNode (e.g. an `<Icon />`).
+ * - 'auto': numbered badge for not-yet-reached steps, a check once completed
+ *   (default)
+ * - 'number': always a numbered badge
+ * - 'none': no indicator — just the progress bar and label
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// --- Default progress icons (16px) ---
+
+/** Filled check — shown for completed steps in 'auto' mode. */
+function CheckCircleIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [/*#__PURE__*/_jsx("circle", {
+      cx: "8",
+      cy: "8",
+      r: "8",
+      fill: "currentColor"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M5 8.5l2 2 4-4",
+      stroke: "white",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+
+/** Filled dot in a ring — shown for the active step in 'auto' mode. */
+function CurrentIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [/*#__PURE__*/_jsx("circle", {
+      cx: "8",
+      cy: "8",
+      r: "7",
+      stroke: "currentColor",
+      strokeWidth: "2"
+    }), /*#__PURE__*/_jsx("circle", {
+      cx: "8",
+      cy: "8",
+      r: "4",
+      fill: "currentColor"
+    })]
+  });
+}
+
+// --- Styles ---
+
+const BAR_WIDTH = '4px';
+const ICON_SIZE = spacingVars['--spacing-4'];
+const NUMBER_SIZE = spacingVars['--spacing-5'];
+const styles = {
+  verticalRoot: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "x1q0g3np",
+    kGNEyG: "x1qjc9v5",
+    kVAEAm: "x1n2onr6",
+    kOIVth: "x1lsbc85",
+    $$css: true
+  },
+  verticalBar: {
+    kzqmXN: "x51ohtg",
+    kaIpWk: "xjspbzw",
+    kmuXW: "x2lah0s",
+    kSGwAc: "xkh2ocl",
+    $$css: true
+  },
+  barCompleted: {
+    kWkggS: "x1ewilqj",
+    $$css: true
+  },
+  barIncomplete: {
+    kWkggS: "x1m4xfpy",
+    $$css: true
+  },
+  barAccent: {
+    kWkggS: "x1ewilqj",
+    $$css: true
+  },
+  barSuccess: {
+    kWkggS: "xdsz4j9",
+    $$css: true
+  },
+  barWarning: {
+    kWkggS: "x1q8g9m5",
+    $$css: true
+  },
+  barError: {
+    kWkggS: "x1pjz0fi",
+    $$css: true
+  },
+  horizontalStep: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kGNEyG: "x1cy8zhl",
+    kUk6DE: "x98rzlu",
+    $$css: true
+  },
+  horizontalBar: {
+    kzqmXN: "xh8yej3",
+    kZKoxP: "xqu0tyb",
+    kaIpWk: "xjspbzw",
+    kmuXW: "x2lah0s",
+    k1K539: "xlstkdb",
+    $$css: true
+  },
+  icon: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kzqmXN: "x12xnipv",
+    kZKoxP: "x6b6gus",
+    kmuXW: "x2lah0s",
+    $$css: true
+  },
+  iconCompleted: {
+    kMwMTN: "xqwr325",
+    $$css: true
+  },
+  iconInProgress: {
+    kMwMTN: "xqwr325",
+    $$css: true
+  },
+  iconNotStarted: {
+    kMwMTN: "xv9yike",
+    $$css: true
+  },
+  iconDisabled: {
+    kMwMTN: "xqa6c3m",
+    kSiTet: "xbyyjgo",
+    $$css: true
+  },
+  iconAccent: {
+    kMwMTN: "xqwr325",
+    $$css: true
+  },
+  iconSuccess: {
+    kMwMTN: "xtjic6",
+    $$css: true
+  },
+  iconWarning: {
+    kMwMTN: "xs3pv69",
+    $$css: true
+  },
+  iconError: {
+    kMwMTN: "xjt36v0",
+    $$css: true
+  },
+  numberBadge: {
+    k1xSpc: "xrvj5dj",
+    kgQiWS: "x1ku5rj1",
+    kzqmXN: "xfyiiit",
+    kZKoxP: "x1grt7ep",
+    kaIpWk: "xjspbzw",
+    kGuDYH: "x1k6wstc",
+    kGO01o: "x1j85h84",
+    k63SB2: "x2mo6ok",
+    kLWn49: "xo5v014",
+    kmuXW: "x2lah0s",
+    k9WMMc: "x2b8uid",
+    $$css: true
+  },
+  numberCompleted: {
+    kWkggS: "x1ewilqj",
+    kMwMTN: "xrkvqaz",
+    $$css: true
+  },
+  numberInProgress: {
+    kWkggS: "x1ewilqj",
+    kMwMTN: "xrkvqaz",
+    $$css: true
+  },
+  numberNotStarted: {
+    kWkggS: "xwmxj5m",
+    kMwMTN: "xv1l7n4",
+    $$css: true
+  },
+  numberDisabled: {
+    kWkggS: "xwmxj5m",
+    kMwMTN: "xnbbluu",
+    kSiTet: "xbyyjgo",
+    $$css: true
+  },
+  numberAccent: {
+    kWkggS: "x1ewilqj",
+    kMwMTN: "x17wrial",
+    $$css: true
+  },
+  numberSuccess: {
+    kWkggS: "xdsz4j9",
+    kMwMTN: "xri61p4",
+    $$css: true
+  },
+  numberWarning: {
+    kWkggS: "x1q8g9m5",
+    kMwMTN: "xrebv38",
+    $$css: true
+  },
+  numberError: {
+    kWkggS: "x1pjz0fi",
+    kMwMTN: "x1m024r3",
+    $$css: true
+  },
+  label: {
+    kGuDYH: "xjm74w1",
+    kLWn49: "xw6l6zx",
+    k63SB2: "x1sodnla",
+    kMwMTN: "x1tgivj0",
+    $$css: true
+  },
+  labelInProgress: {
+    k63SB2: "x2mo6ok",
+    $$css: true
+  },
+  labelNotStarted: {
+    kMwMTN: "xv1l7n4",
+    $$css: true
+  },
+  labelDisabled: {
+    kMwMTN: "xnbbluu",
+    $$css: true
+  },
+  descriptionRow: {
+    kZCmMZ: "x18gyask",
+    $$css: true
+  },
+  descriptionRowWithIndicator: {
+    kZCmMZ: "x31w388",
+    $$css: true
+  },
+  descriptionRowWithNumber: {
+    kZCmMZ: "xchaq28",
+    $$css: true
+  },
+  stepContent: {
+    kLKAdn: "x1xye8es",
+    $$css: true
+  },
+  stepContentWithIndicator: {
+    kZCmMZ: "x31w388",
+    $$css: true
+  },
+  stepContentWithNumber: {
+    kZCmMZ: "xchaq28",
+    $$css: true
+  }
+};
+
+/**
+ * An individual step within an Stepper. Renders a 4px progress-bar segment,
+ * an indicator (numbered badge, check, or any custom icon), a label with
+ * optional description, and an optional content slot.
+ *
+ * Progress (completed / active / not-started) is derived from the parent's
+ * `activeStep` and this step's `step` prop. The optional `status` prop layers a
+ * semantic color (`accent` / `success` / `warning` / `error`) on top — color
+ * only; it does not change layout or iconography.
+ *
+ * @example
+ * ```
+ * <Step step={0} label="Account details" description="Enter your email" />
+ * ```
+ *
+ * @example
+ * ```
+ * // Generic icon + semantic color
+ * <Step step={1} label="Payment" status="error" icon={<Icon icon="warning" />} />
+ * ```
+ */
+export function Step({
+  step,
+  label,
+  description,
+  children,
+  icon,
+  status,
+  isDisabled = false,
+  isOptional = false,
+  endContent,
+  indicator: indicatorProp,
+  density: densityProp,
+  xstyle,
+  className,
+  style,
+  ref,
+  'data-testid': dataTestId,
+  ...rest
+}) {
+  const ctx = useStepperContext();
+  const {
+    activeStep,
+    orientation,
+    onStepClick,
+    density: ctxDensity
+  } = ctx;
+  const density = densityProp ?? ctxDensity;
+
+  // Resolve indicator prop — may be a preset string or a custom ReactNode.
+  const isCustomIndicator = indicatorProp != null && typeof indicatorProp !== 'string';
+  const indicator = isCustomIndicator ? 'auto' : indicatorProp ?? 'auto';
+
+  // Internal progress, derived from the parent's activeStep. This is NOT the
+  // public `status` prop — `status` controls semantic color only.
+  const progress = step === activeStep ? 'in-progress' : step < activeStep ? 'completed' : 'not-started';
+  const isVertical = orientation === 'vertical';
+  const isActive = progress === 'in-progress';
+  // Any non-disabled step is navigable when an onStepClick handler is provided,
+  // including not-started steps (free navigation across the flow).
+  const isClickable = !isDisabled && onStepClick != null;
+  const handleClick = () => {
+    if (isClickable && onStepClick) {
+      onStepClick(step);
+    }
+  };
+
+  // Bar fill is purely progress-based; `status` recolors it when set.
+  const isBarFilled = progress === 'completed' || progress === 'in-progress';
+  const statusBarStyle = status === 'accent' ? styles.barAccent : status === 'success' ? styles.barSuccess : status === 'warning' ? styles.barWarning : status === 'error' ? styles.barError : undefined;
+
+  // --- Build indicator node ---
+  // 'auto': number for not-started, check/dot icon once reached
+  // 'number': always number badge
+  // 'none': nothing
+  // custom ReactNode (or `icon` prop): render as-is
+  let indicatorNode = null;
+  const customIcon = isCustomIndicator ? indicatorProp : icon ?? null;
+  if (indicator !== 'none') {
+    const showNumber = customIcon == null && (indicator === 'number' || indicator === 'auto' && progress === 'not-started');
+    if (showNumber) {
+      const numberColorStyle = isDisabled ? styles.numberDisabled : status === 'accent' ? styles.numberAccent : status === 'success' ? styles.numberSuccess : status === 'warning' ? styles.numberWarning : status === 'error' ? styles.numberError : progress === 'completed' ? styles.numberCompleted : progress === 'in-progress' ? styles.numberInProgress : styles.numberNotStarted;
+      indicatorNode = /*#__PURE__*/_jsx("div", {
+        "aria-hidden": "true",
+        ...stylex.props(styles.numberBadge, numberColorStyle),
+        children: step + 1
+      });
+    } else {
+      // Custom icon takes priority, otherwise the progress-derived default.
+      const iconContent = customIcon != null ? customIcon : progress === 'completed' ? /*#__PURE__*/_jsx(CheckCircleIcon, {}) : /*#__PURE__*/_jsx(CurrentIcon, {});
+      const iconColorStyle = isDisabled ? styles.iconDisabled : status === 'accent' ? styles.iconAccent : status === 'success' ? styles.iconSuccess : status === 'warning' ? styles.iconWarning : status === 'error' ? styles.iconError : progress === 'completed' ? styles.iconCompleted : progress === 'in-progress' ? styles.iconInProgress : styles.iconNotStarted;
+      indicatorNode = /*#__PURE__*/_jsx("div", {
+        "aria-hidden": "true",
+        ...stylex.props(styles.icon, iconColorStyle),
+        children: iconContent
+      });
+    }
+  }
+  const hasIndicator = indicator !== 'none';
+  const isNumber = hasIndicator && customIcon == null && (indicator === 'number' || indicator === 'auto' && progress === 'not-started');
+  const labelColorStyle = isDisabled ? styles.labelDisabled : progress === 'not-started' ? styles.labelNotStarted : isActive ? styles.labelInProgress : undefined;
+
+  // Indicator + Label row
+  const iconLabelNode = /*#__PURE__*/_jsxs("div", {
+    ...{
+      className: "x78zum5 x1q0g3np x6s0dn4 x1txdalj"
+    },
+    children: [indicatorNode, /*#__PURE__*/_jsx("span", {
+      ...stylex.props(styles.label, labelColorStyle),
+      children: label
+    }), isOptional && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("span", {
+        ...{
+          className: "xjm74w1 xv1l7n4"
+        },
+        children: "\u2022"
+      }), /*#__PURE__*/_jsx("span", {
+        ...{
+          className: "xjm74w1 xv1l7n4"
+        },
+        children: "Optional"
+      })]
+    }), endContent]
+  });
+  const descriptionNode = description != null ? /*#__PURE__*/_jsx("div", {
+    ...stylex.props(hasIndicator ? isNumber ? styles.descriptionRowWithNumber : styles.descriptionRowWithIndicator : styles.descriptionRow),
+    children: /*#__PURE__*/_jsx("span", {
+      ...{
+        className: "x141an7d x1ltkj2j xv1l7n4"
+      },
+      children: description
+    })
+  }) : null;
+  const contentNode = children != null ? /*#__PURE__*/_jsx("div", {
+    ...stylex.props(styles.stepContent, hasIndicator && (isNumber ? styles.stepContentWithNumber : styles.stepContentWithIndicator)),
+    children: children
+  }) : null;
+
+  // Theme data attributes reflect progress + optional semantic status.
+  const stepThemeProps = themeProps('step', {
+    progress,
+    status: status ?? undefined
+  });
+
+  // ======= VERTICAL =======
+  if (isVertical) {
+    return /*#__PURE__*/_jsxs("li", {
+      ref: ref,
+      ...mergeProps(stepThemeProps, stylex.props(styles.verticalRoot, xstyle), className, style),
+      "aria-current": isActive ? 'step' : undefined,
+      "data-testid": dataTestId,
+      ...rest,
+      children: [/*#__PURE__*/_jsx("div", {
+        ...mergeProps(themeProps('step-bar'), stylex.props(styles.verticalBar, statusBarStyle ?? (isBarFilled ? styles.barCompleted : styles.barIncomplete))),
+        "aria-hidden": "true"
+      }), /*#__PURE__*/_jsxs("div", {
+        ...{
+          className: "x78zum5 xdt5ytf x98rzlu"
+        },
+        children: [isClickable ? /*#__PURE__*/_jsxs("button", {
+          type: "button",
+          onClick: handleClick,
+          "aria-label": `Go to step ${step + 1}: ${label}`,
+          ...{
+            0: {
+              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
+            },
+            4: {
+              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xu0wf1k xf314gf"
+            },
+            2: {
+              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xce4md1 xf314gf"
+            },
+            6: {
+              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xce4md1 xf314gf"
+            },
+            1: {
+              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
+            },
+            5: {
+              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
+            },
+            3: {
+              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
+            },
+            7: {
+              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
+            }
+          }[!!(density === 'compact') << 2 | !!(density === 'balanced') << 1 | !!(density === 'spacious') << 0],
+          children: [iconLabelNode, descriptionNode]
+        }) : /*#__PURE__*/_jsxs("div", {
+          ...{
+            0: {},
+            4: {
+              className: "xu0wf1k xf314gf"
+            },
+            2: {
+              className: "xce4md1 xf314gf"
+            },
+            6: {
+              className: "xce4md1 xf314gf"
+            },
+            1: {
+              className: "x8o8v82 xrrkdod"
+            },
+            5: {
+              className: "x8o8v82 xrrkdod"
+            },
+            3: {
+              className: "x8o8v82 xrrkdod"
+            },
+            7: {
+              className: "x8o8v82 xrrkdod"
+            }
+          }[!!(density === 'compact') << 2 | !!(density === 'balanced') << 1 | !!(density === 'spacious') << 0],
+          children: [iconLabelNode, descriptionNode]
+        }), contentNode]
+      })]
+    });
+  }
+
+  // ======= HORIZONTAL =======
+  return /*#__PURE__*/_jsxs("li", {
+    ref: ref,
+    ...mergeProps(stepThemeProps, stylex.props(styles.horizontalStep, xstyle), className, style),
+    "aria-current": isActive ? 'step' : undefined,
+    "data-testid": dataTestId,
+    ...rest,
+    children: [/*#__PURE__*/_jsx("div", {
+      ...mergeProps(themeProps('step-bar'), stylex.props(styles.horizontalBar, statusBarStyle ?? (isBarFilled ? styles.barCompleted : styles.barIncomplete))),
+      "aria-hidden": "true"
+    }), isClickable ? /*#__PURE__*/_jsxs("button", {
+      type: "button",
+      onClick: handleClick,
+      "aria-label": `Go to step ${step + 1}: ${label}`,
+      ...{
+        0: {
+          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
+        },
+        4: {
+          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xu0wf1k xf314gf"
+        },
+        2: {
+          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xce4md1 xf314gf"
+        },
+        6: {
+          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xce4md1 xf314gf"
+        },
+        1: {
+          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
+        },
+        5: {
+          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
+        },
+        3: {
+          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
+        },
+        7: {
+          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
+        }
+      }[!!(density === 'compact') << 2 | !!(density === 'balanced') << 1 | !!(density === 'spacious') << 0],
+      children: [iconLabelNode, descriptionNode]
+    }) : /*#__PURE__*/_jsxs("div", {
+      ...{
+        0: {},
+        4: {
+          className: "xu0wf1k xf314gf"
+        },
+        2: {
+          className: "xce4md1 xf314gf"
+        },
+        6: {
+          className: "xce4md1 xf314gf"
+        },
+        1: {
+          className: "x8o8v82 xrrkdod"
+        },
+        5: {
+          className: "x8o8v82 xrrkdod"
+        },
+        3: {
+          className: "x8o8v82 xrrkdod"
+        },
+        7: {
+          className: "x8o8v82 xrrkdod"
+        }
+      }[!!(density === 'compact') << 2 | !!(density === 'balanced') << 1 | !!(density === 'spacious') << 0],
+      children: [iconLabelNode, descriptionNode]
+    }), contentNode]
+  });
+}
+Step.displayName = 'Step';

package/dist/Stepper/StepStatus.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @file StepStatus.ts
+ * @input None
+ * @output Exports StepStatus type
+ * @position Shared type used by Step and the stepper docs
+ */
+/**
+ * Semantic color status for a step. Controls **color only** — it maps directly
+ * onto the Astryx global semantic color tokens and does not change layout,
+ * iconography, or behavior.
+ *
+ * Plain string values aligned with the global token semantics:
+ * - 'accent'  → `--color-accent`  (default emphasis / in-progress)
+ * - 'success' → `--color-success` (a positively-resolved step)
+ * - 'warning' → `--color-warning` (needs attention)
+ * - 'error'   → `--color-error`   (must be resolved)
+ *
+ * `status` is intentionally NOT a lifecycle enum (completed/active/etc.) — the
+ * step's progress is derived from the parent's `activeStep`. Use `status` only
+ * when you want to tint a step with a specific semantic color, e.g.
+ * `status="error"`.
+ */
+export type StepStatus = 'accent' | 'success' | 'warning' | 'error';
+//# sourceMappingURL=StepStatus.d.ts.map

package/dist/Stepper/StepStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepStatus.d.ts","sourceRoot":"","sources":["../../src/Stepper/StepStatus.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC"}

package/dist/Stepper/StepStatus.js

@@ -0,0 +1 @@
+export {};

package/dist/Stepper/Stepper.d.ts

@@ -0,0 +1,77 @@
+/**
+ * @file Stepper.tsx
+ * @input Uses React, stylex, theme tokens, StepperContext
+ * @output Exports Stepper component and StepperProps
+ * @position Core container component; consumed by index.ts
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/Stepper/Stepper.doc.mjs (props table, features, implementation notes)
+ * - /packages/lab/src/Stepper/Stepper.test.tsx (tests for new/changed behavior)
+ * - /packages/lab/src/Stepper/index.ts (exports if types change)
+ * - /apps/storybook/stories/Stepper.stories.tsx (storybook stories)
+ * - /packages/cli/templates/blocks/components/Stepper/ (showcase blocks)
+ */
+import { type ReactNode } from 'react';
+import type { BaseProps } from '@astryxdesign/core';
+import { type StepperOrientation } from './StepperContext';
+export interface StepperProps extends BaseProps<HTMLOListElement> {
+    /** Ref forwarded to the root element */
+    ref?: React.Ref<HTMLOListElement>;
+    /**
+     * Zero-based index of the active step.
+     */
+    activeStep: number;
+    /**
+     * Step elements to render.
+     */
+    children: ReactNode;
+    /**
+     * Layout direction of the stepper.
+     * @default 'horizontal'
+     */
+    orientation?: StepperOrientation;
+    /**
+     * Called when a step indicator is clicked. Enables non-linear navigation.
+     * When provided, completed and current steps become clickable.
+     */
+    onStepClick?: (index: number) => void;
+    /**
+     * Accessible label describing the set of steps.
+     * @default 'Progress'
+     */
+    label?: string;
+    /**
+     * Controls density (padding) of all steps.
+     * @default 'balanced'
+     */
+    density?: 'compact' | 'balanced' | 'spacious';
+}
+/**
+ * A stepper component for multi-step workflows. Displays numbered steps
+ * with visual indicators for completed, active, and upcoming states.
+ *
+ * Each Step child must provide a `step` prop (zero-based index) so it
+ * can derive its state from the parent's activeStep. CSS :last-child
+ * handles connector hiding — no child introspection needed.
+ *
+ * Rendered as an ordered list (`<ol>`/`<li>`) rather than a `nav`
+ * landmark: a stepper communicates *progress through a sequence*, not a
+ * set of site navigation links. The active step is marked with
+ * `aria-current="step"` (handled per-step) and the list carries an
+ * accessible `label`. This follows the WAI-ARIA pattern for steppers /
+ * progress sequences and avoids polluting the page's landmark map.
+ *
+ * @example
+ * ```
+ * <Stepper activeStep={1}>
+ *   <Step step={0} label="Account" />
+ *   <Step step={1} label="Profile" />
+ *   <Step step={2} label="Review" />
+ * </Stepper>
+ * ```
+ */
+export declare function Stepper({ activeStep, children, orientation, onStepClick, label, density, xstyle, className, style, ref, ...rest }: StepperProps): import("react").JSX.Element;
+export declare namespace Stepper {
+    var displayName: string;
+}
+//# sourceMappingURL=Stepper.d.ts.map

package/dist/Stepper/Stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/Stepper/Stepper.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAEL,KAAK,kBAAkB,EAExB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;CAC/C;AAuBD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,QAAQ,EACR,WAA0B,EAC1B,WAAW,EACX,KAAkB,EAClB,OAAoB,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,YAAY,+BAkCd;yBA9Ce,OAAO"}