@astryxdesign/core 0.4.6 → 0.4.7-canary.29be96d

package/dist/Stepper/Step.d.ts

@@ -0,0 +1,140 @@
+/**
+ * @file Step.tsx
+ * @input Uses React, stylex, theme tokens (including the motion duration token
+ *   the connector fill animates on), StepperContext
+ * @output Exports Step component and StepProps
+ * @position Individual step item; used inside Stepper
+ *
+ * Every connector this file draws — the separated progress bars and the
+ * on-track segments alike — paints its accent fill as a scaled ::before rather
+ * than by swapping a background color, so a step the flow advances into grows
+ * its line along the track. See the CONNECTOR FILL block in the styles below
+ * for the axis/RTL/reduced-motion rules that go with it.
+ *
+ * Exactly one change animates: advancing a single step. Going back, jumping
+ * forward by more than one, and mounting mid-flow all land at once. The rule
+ * and the reasoning behind it sit above the styles; the arithmetic that keeps
+ * the one animated span reading as a single front — an on-track span is drawn
+ * by two steps, three where a content slot splits it — is in the component.
+ * Nothing about it is public API: Stepper hands each Step the step it came
+ * from through context, and the rest is derived.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Stepper/Stepper.doc.mjs
+ * - /packages/core/src/Stepper/Stepper.test.tsx
+ * - /packages/core/src/Stepper/index.ts
+ * - /apps/storybook/stories/Stepper.stories.tsx
+ * - /packages/cli/assets/templates/blocks/components/Stepper/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Step/ (showcase blocks)
+ */
+import { type ReactNode } from 'react';
+import type { BaseProps } from '../BaseProps';
+import type { StepStatus } from './StepStatus';
+/**
+ * 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
+ */
+export type StepIndicatorPreset = 'auto' | 'number' | 'none';
+export type StepDensity = 'compact' | 'balanced' | 'spacious';
+export interface StepProps extends BaseProps<HTMLLIElement> {
+    /** Ref forwarded to the root element */
+    ref?: React.Ref<HTMLLIElement>;
+    /**
+     * Zero-based index of this step. Used to derive progress (completed /
+     * active / not-started) relative to the parent's `activeStep`.
+     */
+    step: number;
+    /**
+     * Step label text.
+     */
+    label: string;
+    /**
+     * Optional description shown below the label.
+     */
+    description?: string;
+    /**
+     * Content rendered below the label and description. Useful in vertical
+     * steppers to show form fields or detailed content for each step.
+     */
+    children?: ReactNode;
+    /**
+     * Semantic status for the step, mapped to the global Astryx semantic tokens
+     * (`accent`, `success`, `warning`, `error`). In the default `auto` indicator
+     * mode it sets both the indicator color and a matching glyph: `success` shows
+     * a green check-circle, `warning`/`error` show the shared Input status icons.
+     * `accent` is color-only. The current (in-progress) step always keeps its
+     * current-step indicator regardless of `status`. Never recolors the
+     * connector/track.
+     *
+     * Because the indicator glyphs are decorative (aria-hidden), the status also
+     * reaches assistive technology as text: visually hidden "completed" /
+     * "warning" / "error" next to the label, and composed into the accessible
+     * name of clickable steps.
+     */
+    status?: StepStatus;
+    /**
+     * Disable interaction for this step.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Marks the step as optional, appending an "Optional" affordance after the
+     * label.
+     * @default false
+     */
+    isOptional?: boolean;
+    /**
+     * Trailing content rendered at the end of the label row (e.g. a timestamp
+     * or status chip).
+     */
+    endContent?: ReactNode;
+    /**
+     * What to show as the step indicator. Accepts a preset string or any
+     * ReactNode:
+     * - 'auto': numbered badge until completed, then a check (default)
+     * - 'number': always a numbered badge
+     * - 'none': no indicator, just the bar + label
+     * - ReactNode: any custom icon or element to render as the indicator
+     * @default 'auto'
+     */
+    indicator?: StepIndicatorPreset | ReactNode;
+    /**
+     * Controls vertical padding of the step. Falls back to the stepper-level
+     * density when unset.
+     * - 'compact': minimal padding (4px block)
+     * - 'balanced': default (8px block)
+     * - 'spacious': generous (12px block, 12px inline)
+     */
+    density?: StepDensity;
+}
+/**
+ * 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 meaning on top: in the default `auto` indicator mode it recolors the
+ * indicator and swaps in a matching glyph (`success` → green check-circle,
+ * `warning`/`error` → the shared Input status icons). The current step always
+ * keeps its current-step ring. `status` never recolors the connector/track.
+ *
+ * @example
+ * ```
+ * <Step step={0} label="Account details" description="Enter your email" />
+ * ```
+ *
+ * @example
+ * ```
+ * <Step step={1} label="Payment" status="error" />
+ * ```
+ */
+export declare function Step({ step, label, description, children, status, isDisabled, isOptional, endContent, indicator: indicatorProp, density: densityProp, xstyle, className, style, ref, 'data-testid': dataTestId, ...rest }: StepProps): import("react").JSX.Element;
+export declare namespace Step {
+    var displayName: string;
+}
+//# sourceMappingURL=Step.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../src/Stepper/Step.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAAY,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAmBhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AA4tBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,UAAU,EACzB,GAAG,IAAI,EACR,EAAE,SAAS,+BAitBX;yBAluBe,IAAI"}