@synerise/ds-stepper 1.0.53 → 1.0.55

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.55](https://github.com/Synerise/synerise-design/compare/@synerise/ds-stepper@1.0.54...@synerise/ds-stepper@1.0.55) (2026-07-23)
+
+**Note:** Version bump only for package @synerise/ds-stepper
+
+## [1.0.54](https://github.com/Synerise/synerise-design/compare/@synerise/ds-stepper@1.0.53...@synerise/ds-stepper@1.0.54) (2026-06-17)
+
+**Note:** Version bump only for package @synerise/ds-stepper
+
 ## [1.0.53](https://github.com/Synerise/synerise-design/compare/@synerise/ds-stepper@1.0.52...@synerise/ds-stepper@1.0.53) (2026-06-11)
 
 **Note:** Version bump only for package @synerise/ds-stepper

package/CLAUDE.md

@@ -0,0 +1,96 @@
+# Stepper (`@synerise/ds-stepper`)
+
+> A horizontal or vertical step indicator with collapsible step content, status states (active/done/warning/validated), and animated height transitions.
+
+## Package structure
+
+```
+src/
+ Stepper.tsx — main component; clones children to inject size/orientation; renders StepDividers between horizontal steps
+ Stepper.types.ts — StepperProps, StepperOrientation, StepperSize, ORIENTATIONS constant
+ Stepper.styles.ts — StepperWrapper, StepDivider
+ index.ts — public exports (Stepper default + StepperProps type)
+ Step/
+ Step.tsx — step item; handles active/done/warning/validated states, AnimateHeight, tooltip icon
+ Step.types.ts — StepProps
+ Step.styles.ts — Step, StepWrapper, StepPrefix, StepNumber, StepName, StepLabel, StepContent
+```
+
+## Public exports
+
+### `Stepper` (default export)
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `orientation` | `'horizontal' \| 'vertical' \| string` | `'horizontal'` | Layout direction |
+| `size` | `'small' \| 'default' \| string` | `'default'` | Passed to each Step via `cloneElement` |
+| `style` | `CSSProperties` | — | Inline styles on the root wrapper |
+| `children` | `ReactNode` | — | `Stepper.Step` children |
+
+Has static property:
+- `Stepper.Step` — the step sub-component (see below)
+
+### `Stepper.Step`
+
+Not separately exported from `index.ts`; access via `Stepper.Step`. `StepProps` is also not exported.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string \| ReactNode` | — (required) | Step label text |
+| `stepNumber` | `number` | — (required) | Displayed inside the step circle (unless `done && !validated`) |
+| `active` | `boolean` | — | Current active step; expands content and changes circle style |
+| `done` | `boolean` | — | Completed state; shows green checkmark |
+| `warning` | `boolean` | — | Warning state; yellow circle + overrides `done` checkmark to yellow |
+| `validated` | `boolean` | — | Error/invalid state; red circle (highest visual priority) |
+| `tooltip` | `string \| ReactNode` | — | Warning icon with tooltip shown only when `active` |
+| `onClick` | `() => void` | — | Makes step clickable; shows pointer cursor |
+| `children` | `ReactNode` | — | Content shown when step is active (animated height) |
+| `size` | `StepperSize` | `'default'` | Injected by parent via `cloneElement` — do not pass manually |
+| `orientation` | `StepperOrientation` | `'horizontal'` | Injected by parent via `cloneElement` — do not pass manually |
+
+### `StepperProps`
+
+Type re-export.
+
+## Usage patterns
+
+```tsx
+import Stepper from '@synerise/ds-stepper';
+
+// Horizontal (default)
+<Stepper>
+ <Stepper.Step stepNumber={1} label="Details" done />
+ <Stepper.Step stepNumber={2} label="Settings" active>
+ <p>Step content here</p>
+ </Stepper.Step>
+ <Stepper.Step stepNumber={3} label="Review" />
+</Stepper>
+
+// Vertical with click handlers
+<Stepper orientation="vertical">
+ <Stepper.Step stepNumber={1} label="Step A" active={step === 0} done={step > 0} onClick={() => setStep(0)}>
+ ..
+ </Stepper.Step>
+</Stepper>
+```
+
+## Styling
+
+`Stepper.styles.ts` and `Step/Step.styles.ts`. All colours come from `theme.palette`. Status colours: `validated` → `red-600`, `warning` → `yellow-600`, `done` → `green-600`, `active` → `grey-700`. Priority order (highest wins visually): `validated > warning > done > active`.
+
+`size='small'` with `orientation='horizontal'`: step labels have `max-width: 0; opacity: 0` (hidden) except for the active step, which reveals to `max-width: 100px`. Useful for compact nav bars.
+
+## Key dependencies
+
+- `react-animate-height` — animates `height: 0 ↔ auto` for step content collapse/expand
+- `@synerise/ds-icon` — `CheckS` (done state), `WarningFillS` (tooltip icon)
+- `@synerise/ds-tooltip` — label tooltip (always present, triggers on hover) and warning tooltip
+
+## Implementation notes
+
+- **`cloneElement` injects `size` and `orientation`** — the parent `Stepper` maps over `children` and calls `cloneElement(child, { size, orientation })`. Users should not pass these props to `Stepper.Step` directly.
+- **`StepDivider` is horizontal-only** — dividers between steps are rendered only when `orientation === 'horizontal'`. There is a `@ts-expect-error` in `Stepper.tsx` for accessing `children.length`.
+- **`wasActive` state** — `Step` tracks whether it was recently active to control `transition-delay` direction (expand vs collapse).
+- **Active step label uses `::before` pseudo-element** — the bold active label is implemented via `data-label` attribute + CSS `content: attr(data-label)` on `::before`, making the actual `<span>` invisible. This prevents layout shifts when the font-weight changes.
+- **`StepProps` not exported** — `StepProps` is not in `index.ts`; consumers cannot type-check `Stepper.Step` props without a deep import.
+- **Uses Vitest**.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-stepper",
-  "version": "1.0.53",
+  "version": "1.0.55",
   "description": "Stepper UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -17,6 +17,7 @@
   "files": [
     "/dist",
     "CHANGELOG.md",
+    "CLAUDE.md",
     "README.md",
     "package.json",
     "LICENSE.md"
@@ -41,8 +42,8 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.18.3",
-    "@synerise/ds-tooltip": "^1.5.2",
+    "@synerise/ds-icon": "^1.18.5",
+    "@synerise/ds-tooltip": "^1.5.4",
     "react-animate-height": "^2.0.23"
   },
   "peerDependencies": {
@@ -51,5 +52,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "fe3379f50afdce6d8c61a2222ebbf03324107c95"
+  "gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
 }