@brandsync/wc 0.1.0 → 1.1.0

package/dist/types/components/bs-stepper/bs-stepper/bs-stepper.d.ts

@@ -0,0 +1,48 @@
+import type { BsStepperDirection } from '../bs-stepper-step/bs-stepper-step';
+/**
+ * A sequence of named steps showing overall progress through a multi-step flow (e.g. a checkout,
+ * an onboarding wizard) -- each step reads as enabled (not yet reached), current, done, error, or
+ * disabled, connected by a rail between them.
+ *
+ * This container is intentionally thin: it renders a `<slot>` for `<bs-stepper-step>` children and
+ * propagates `currentStep`/`direction`/`showDescription` down to them as JS properties whenever any
+ * of those change or the slotted children themselves change -- the same "container pushes state
+ * onto its slotted children" pattern `bs-tabs` uses for `selected` and `bs-breadcrumbs` uses for
+ * `size`. Each step computes its own `enabled`/`current`/`done` state from its position among its
+ * siblings relative to `currentStep`, unless that step's own `error`/`disabled` prop overrides it.
+ *
+ * This is a static status display, not an interactive control -- Figma's spec shows no
+ * hover/pressed treatment on any step, so nothing here is clickable.
+ *
+ * ## When to use
+ * - Showing where the user is in a fixed, ordered, multi-step flow.
+ *
+ * ## When not to use
+ * - A flow whose steps aren't fixed/known in advance -- a stepper implies the full sequence is
+ *   already known.
+ * - As a substitute for actual in-page navigation between steps -- pair this with real controls
+ *   (Next/Back buttons) elsewhere in the flow, this component only displays status.
+ *
+ * @slot - Default slot: the `<bs-stepper-step>` elements making up the sequence, in order.
+ */
+export declare class BsStepper {
+    el: HTMLElement;
+    /** 0-indexed: which step is current. Every step before this index reads as "done" (unless that
+     * step's own `error`/`disabled` overrides it), every step after reads as "enabled". */
+    currentStep: number;
+    /** `horizontal` (icon above name/description, connected by a horizontal rail) or `vertical`
+     * (icon beside name/description, connected by a vertical rail). Propagated to every slotted
+     * `bs-stepper-step`, and reflected as an attribute so this container's own `:host` CSS can switch
+     * its `flex-direction` to match -- a bare `<slot>` with no wrapping element (see `render()`)
+     * means the slotted steps' flex-row/column layout comes directly from `:host` here, not from any
+     * wrapper div. */
+    direction: BsStepperDirection;
+    /** Whether each step's description renders at all. Propagated to every slotted
+     * `bs-stepper-step`. */
+    showDescription: boolean;
+    onPropChange(): void;
+    componentDidLoad(): void;
+    private onSlotChange;
+    private propagateToSteps;
+    render(): any;
+}

package/dist/types/components/bs-stepper/bs-stepper/bs-stepper.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsStepperArgs {
+    currentStep: number;
+    direction: 'horizontal' | 'vertical';
+    showDescription: boolean;
+}
+declare const meta: Meta<BsStepperArgs>;
+export default meta;
+type Story = StoryObj<BsStepperArgs>;
+export declare const Default: Story;
+export declare const Vertical: Story;
+export declare const WithError: Story;
+export declare const WithDisabledStep: Story;
+export declare const NoDescription: Story;

package/dist/types/components/bs-stepper/bs-stepper-step/bs-stepper-step.cmp.test.d.ts

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

package/dist/types/components/bs-stepper/bs-stepper-step/bs-stepper-step.d.ts

@@ -0,0 +1,55 @@
+export type BsStepperStepComputedState = 'enabled' | 'current' | 'done';
+export type BsStepperStepState = BsStepperStepComputedState | 'error' | 'disabled';
+export type BsStepperDirection = 'horizontal' | 'vertical';
+/**
+ * A single step within a `<bs-stepper>` sequence: an icon/indicator plus a name and optional
+ * description, connected to the next step by a trailing rail.
+ *
+ * `computedState` is set automatically by the parent `<bs-stepper>` based on this step's position
+ * relative to its `currentStep` (before it = "done", at it = "current", after it = "enabled") --
+ * same "container pushes state onto its slotted children" pattern `bs-tabs` uses for `selected`
+ * and `bs-breadcrumbs` uses for `size`. This step's own `error`/`disabled` props, when set directly
+ * by the consumer, override that computed value -- e.g. a step before `currentStep` would normally
+ * read as "done", but `error` on that step wins regardless.
+ *
+ * The trailing rail is owned by this component, not the container: `:host(:last-child)` hides it
+ * on whichever step is visually last, mirroring `bs-breadcrumb`'s own `:host(:first-child)` rule
+ * for its leading separator (same technique, opposite end -- see that component for why pure DOM
+ * position, not CSS `:last-of-type`, is what actually needs checking here too).
+ *
+ * ## When to use
+ * - As a child of `<bs-stepper>`, one per step in the sequence.
+ *
+ * ## When not to use
+ * - Standalone, outside a `<bs-stepper>` wrapper -- `computedState`/`direction`/`showDescription`
+ *   depend on that parent propagating them; alone, this defaults to `enabled`/`horizontal`/`true`.
+ *
+ * @slot - None: `name`/`description` fully drive the label content.
+ * @part icon - The icon/indicator wrapper.
+ * @part label - The name+description wrapper.
+ * @part name - The name text.
+ * @part description - The description text (only rendered when `showDescription` is true and
+ * `description` is set).
+ * @part connector - The trailing rail segment (not rendered on the last step).
+ */
+export declare class BsStepperStep {
+    /** This step's name/title. */
+    name: string;
+    /** Optional supporting text below the name. Only rendered when `showDescription` (propagated
+     * from the parent `<bs-stepper>`) is also true. */
+    description?: string;
+    /** Shows the error treatment for this step, regardless of its `computedState`. */
+    error: boolean;
+    /** Shows the disabled treatment for this step, regardless of its `computedState`. Takes priority
+     * over `error` if both are somehow set. */
+    disabled: boolean;
+    /** Set automatically by the parent `<bs-stepper>` from this step's position relative to its
+     * `currentStep` -- see the class doc above. Can be set directly for a standalone step. */
+    computedState: BsStepperStepComputedState;
+    /** Set automatically by the parent `<bs-stepper>`, propagated to every slotted step. */
+    direction: BsStepperDirection;
+    /** Set automatically by the parent `<bs-stepper>`, propagated to every slotted step. */
+    showDescription: boolean;
+    private get state();
+    render(): any;
+}