banhaten 0.5.0 → 0.6.0

package/docs/design-system/components/slider.md

@@ -1,65 +1,65 @@
-# Slider
-
-Slider is an accessible value and range control built on Radix Slider. It matches the Figma single-node and double-node slider sets, including text and tooltip indicators above or below the thumb, RTL, tick marks, disabled state, vertical orientation, and the large pill treatment used by the investment savings background.
-
-## API
-
-```tsx
-<Slider aria-label="Investment amount" defaultValue={[45]} />
-
-<Slider
-  aria-label="Savings range"
-  ariaLabels={["Minimum savings", "Maximum savings"]}
-  defaultValue={[25, 72]}
-  indicator="lower-text"
-  minStepsBetweenThumbs={4}
-/>
-```
-
-## Variants
-
-| Prop | Values |
-| --- | --- |
-| `variant` | `default`, `pill` |
-| `size` | `sm`, `default`, `lg` |
-| `tone` | `brand`, `neutral`, `success`, `warning`, `danger` |
-| `indicator` | `none`, `lower-text`, `upper-text`, `lower-tooltip`, `upper-tooltip` |
-| `orientation` | `horizontal`, `vertical` |
-
-Use `showTicks` and `tickCount` for dotted track markers. Use `indicator` for Figma text/tooltip markers, `thumbLabel` or `thumbLabels` to customize marker text, `showThumbGrip` for pill controls, and `ariaValueText` for assistive value formatting.
-
-## Tokens
-
-Slider consumes component aliases for track size, thumb size, pill height, tick geometry, thumb elevation, and semantic color roles. Tones map to semantic brand/status/accent tokens so color theme changes are inherited automatically.
-
-## Install
-
-```bash
-npx banhaten add slider
-```
-
-## Examples
-
-Primary registry example: `examples/slider-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs slider` to inspect source files, install command, and examples.
-
-## Token Contract
-
-Component styles must resolve through Banhaten semantic tokens, component aliases, or documented exception-ledger values.
-Do not add raw colors, pixel values, opacity utilities, z-index values, durations, or shadow literals directly to component source.
-Covered source files: `components/slider.tsx`.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `valueDirection`: Radix Slider handles direction and keyboard behavior through the inherited dir attribute.
-- `spacing`: Uses logical thumb content spacing and tokenized track/thumb geometry.
-
-## Accessibility
-
-This component relies on `@radix-ui/react-slider` for its base accessibility behavior. Keep required labels, titles, descriptions, and focusable trigger/content relationships intact when composing it.
-
+# Slider
+
+Slider is an accessible value and range control built on Radix Slider. It matches the Figma single-node and double-node slider sets, including text and tooltip indicators above or below the thumb, RTL, tick marks, disabled state, vertical orientation, and the large pill treatment used by the investment savings background.
+
+## API
+
+```tsx
+<Slider aria-label="Investment amount" defaultValue={[45]} />
+
+<Slider
+  aria-label="Savings range"
+  ariaLabels={["Minimum savings", "Maximum savings"]}
+  defaultValue={[25, 72]}
+  indicator="lower-text"
+  minStepsBetweenThumbs={4}
+/>
+```
+
+## Variants
+
+| Prop | Values |
+| --- | --- |
+| `variant` | `default`, `pill` |
+| `size` | `sm`, `default`, `lg` |
+| `tone` | `brand`, `neutral`, `success`, `warning`, `danger` |
+| `indicator` | `none`, `lower-text`, `upper-text`, `lower-tooltip`, `upper-tooltip` |
+| `orientation` | `horizontal`, `vertical` |
+
+Use `showTicks` and `tickCount` for dotted track markers. Use `indicator` for Figma text/tooltip markers, `thumbLabel` or `thumbLabels` to customize marker text, `showThumbGrip` for pill controls, and `ariaValueText` for assistive value formatting.
+
+## Tokens
+
+Slider consumes component aliases for track size, thumb size, pill height, tick geometry, thumb elevation, and semantic color roles. Tones map to semantic brand/status/accent tokens so color theme changes are inherited automatically.
+
+## Install
+
+```bash
+npx banhaten add slider
+```
+
+## Examples
+
+Primary registry example: `examples/slider-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs slider` to inspect source files, install command, and examples.
+
+## Token Contract
+
+Component styles must resolve through Banhaten semantic tokens, component aliases, or documented exception-ledger values.
+Do not add raw colors, pixel values, opacity utilities, z-index values, durations, or shadow literals directly to component source.
+Covered source files: `components/slider.tsx`.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `valueDirection`: Radix Slider handles direction and keyboard behavior through the inherited dir attribute.
+- `spacing`: Uses logical thumb content spacing and tokenized track/thumb geometry.
+
+## Accessibility
+
+This component relies on `@radix-ui/react-slider` for its base accessibility behavior. Keep required labels, titles, descriptions, and focusable trigger/content relationships intact when composing it.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 

package/docs/design-system/components/social-button.md

@@ -1,52 +1,52 @@
-# Social Button
-
-Social Button is the sign-in action primitive for supported identity providers. It includes Figma-matched platform styling, solid and outlined variants, icon-only mode, native focus-visible styling, RTL layout, and explicit localized messages.
-
-## API
-
-```tsx
-<SocialButton platform="google">Continue with Google</SocialButton>
-<SocialButton platform="apple" variant="outline" size="icon" aria-label="Continue with Apple" />
-```
-
-| Prop | Values |
-| --- | --- |
-| `platform` | `apple`, `facebook`, `google`, `linkedin`, `twitter`, `whatsapp` |
-| `variant` | `solid`, `outline` |
-| `size` | `default`, `icon` |
-| `label` | localized label override |
-| `messages` | partial provider-label catalog selected by product locale |
-
-## Token Contract
-
-Social Button uses Banhaten control, typography, radius, focus, spacing, and elevation tokens. Provider colors are the limited brand-color exception and should stay scoped to this component.
-
-## RTL
-
-Icon and label spacing uses logical flex rhythm in RTL. Labels remain English unless `messages`, `label`, or text children select another language; `arabicSocialButtonMessages` is available for an explicit Arabic locale.
-
-## Accessibility
-
-Icon-only social buttons must provide `aria-label`. Button text should name the provider and the action, such as `Continue with Google`.
-
-## Install
-
-```bash
-npx banhaten add social-button
-```
-
-## Examples
-
-Primary registry example: `examples/social-button-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs social-button` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `messages`: Direction controls layout only. Pass label, children, aria-label, or messages to localize provider names.
-- `spacing`: Uses logical label padding and flex gap so the icon/label order follows inherited direction.
-
+# Social Button
+
+Social Button is the sign-in action primitive for supported identity providers. It includes Figma-matched platform styling, solid and outlined variants, icon-only mode, native focus-visible styling, RTL layout, and explicit localized messages.
+
+## API
+
+```tsx
+<SocialButton platform="google">Continue with Google</SocialButton>
+<SocialButton platform="apple" variant="outline" size="icon" aria-label="Continue with Apple" />
+```
+
+| Prop | Values |
+| --- | --- |
+| `platform` | `apple`, `facebook`, `google`, `linkedin`, `twitter`, `whatsapp` |
+| `variant` | `solid`, `outline` |
+| `size` | `default`, `icon` |
+| `label` | localized label override |
+| `messages` | partial provider-label catalog selected by product locale |
+
+## Token Contract
+
+Social Button uses Banhaten control, typography, radius, focus, spacing, and elevation tokens. Provider colors are the limited brand-color exception and should stay scoped to this component.
+
+## RTL
+
+Icon and label spacing uses logical flex rhythm in RTL. Labels remain English unless `messages`, `label`, or text children select another language; `arabicSocialButtonMessages` is available for an explicit Arabic locale.
+
+## Accessibility
+
+Icon-only social buttons must provide `aria-label`. Button text should name the provider and the action, such as `Continue with Google`.
+
+## Install
+
+```bash
+npx banhaten add social-button
+```
+
+## Examples
+
+Primary registry example: `examples/social-button-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs social-button` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `messages`: Direction controls layout only. Pass label, children, aria-label, or messages to localize provider names.
+- `spacing`: Uses logical label padding and flex gap so the icon/label order follows inherited direction.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 

package/docs/design-system/components/spinner.md

@@ -1,65 +1,65 @@
-# Spinner
-
-Spinner is a compact loading indicator for buttons, inline feedback, status rows, and pending regions. `Spinner` is the simple steady loader, while `DynamicSpinner` uses the smoother variable-arc motion for moments that benefit from a more organic loading state.
-
-## Usage
-
-```tsx
-import { DynamicSpinner, Spinner } from "@/components/ui/spinner"
-
-export function LoadingLabel() {
-  return (
-    <span className="inline-flex items-center gap-2" role="status">
-      <Spinner />
-      Loading
-
-      <DynamicSpinner />
-      Syncing
-    </span>
-  )
-}
-```
-
-## API
-
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `className` | `string` | - | Sets color, layout, or other SVG classes. |
-| `style` | `React.CSSProperties` | - | Override `--bh-spinner-size` when a local size is needed. |
-
-## Guidance
-
-- Pair the decorative spinner with visible status text or a loading button label.
-- Use `Spinner` for ordinary button and inline loading.
-- Use `DynamicSpinner` when the loading state is prominent enough to benefit from variable arc motion.
-- Keep sizing token-based by setting `--bh-spinner-size` rather than hardcoding SVG geometry.
-
-## Install
-
-```bash
-npx banhaten add spinner
-```
-
-## Examples
-
-Primary registry example: `examples/spinner-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs spinner` to inspect source files, install command, and examples.
-
-## Token Contract
-
-Component styles must resolve through Banhaten semantic tokens, component aliases, or documented exception-ledger values.
-Do not add raw colors, pixel values, opacity utilities, z-index values, durations, or shadow literals directly to component source.
-Covered source files: `components/spinner.tsx`.
-
-## RTL Rules
-
-This component has no special RTL contract beyond inherited document direction and logical spacing.
-
-## Accessibility
-
-Keep native semantics, accessible names, keyboard reachability, focus-visible treatment, and status/error announcements intact when composing this component.
-
+# Spinner
+
+Spinner is a compact loading indicator for buttons, inline feedback, status rows, and pending regions. `Spinner` is the simple steady loader, while `DynamicSpinner` uses the smoother variable-arc motion for moments that benefit from a more organic loading state.
+
+## Usage
+
+```tsx
+import { DynamicSpinner, Spinner } from "@/components/ui/spinner"
+
+export function LoadingLabel() {
+  return (
+    <span className="inline-flex items-center gap-2" role="status">
+      <Spinner />
+      Loading
+
+      <DynamicSpinner />
+      Syncing
+    </span>
+  )
+}
+```
+
+## API
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className` | `string` | - | Sets color, layout, or other SVG classes. |
+| `style` | `React.CSSProperties` | - | Override `--bh-spinner-size` when a local size is needed. |
+
+## Guidance
+
+- Pair the decorative spinner with visible status text or a loading button label.
+- Use `Spinner` for ordinary button and inline loading.
+- Use `DynamicSpinner` when the loading state is prominent enough to benefit from variable arc motion.
+- Keep sizing token-based by setting `--bh-spinner-size` rather than hardcoding SVG geometry.
+
+## Install
+
+```bash
+npx banhaten add spinner
+```
+
+## Examples
+
+Primary registry example: `examples/spinner-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs spinner` to inspect source files, install command, and examples.
+
+## Token Contract
+
+Component styles must resolve through Banhaten semantic tokens, component aliases, or documented exception-ledger values.
+Do not add raw colors, pixel values, opacity utilities, z-index values, durations, or shadow literals directly to component source.
+Covered source files: `components/spinner.tsx`.
+
+## RTL Rules
+
+This component has no special RTL contract beyond inherited document direction and logical spacing.
+
+## Accessibility
+
+Keep native semantics, accessible names, keyboard reachability, focus-visible treatment, and status/error announcements intact when composing this component.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 

package/docs/design-system/components/steps.md

@@ -1,67 +1,67 @@
-# Steps
-
-Steps show progress through a sequential task. The implementation follows the Figma nodes `HorizontalSteps` (`570:2780`), `VerticalSteps` (`567:76719`), `VerticalStepItem` (`567:5342`), and `HorizontalStepItem` (`569:78346`).
-
-## API
-
-```tsx
-<Steps
-  direction="horizontal"
-  indicator="icon"
-  dir="ltr"
-  items={[
-    { label: "Label", caption: "Caption", supportText: "Support" },
-    { label: "Label", caption: "Caption", supportText: "Support" },
-  ]}
-/>
-```
-
-| Prop | Values | Default |
-| --- | --- | --- |
-| `direction` | `horizontal`, `vertical` | `horizontal` |
-| `indicator` | `icon`, `number` | `icon` |
-| `alignment` | `leading`, `trailing` | `leading` |
-| `dir` | `ltr`, `rtl` | `ltr` |
-| `items` | `StepItem[]` | six default steps |
-
-## Pixel Rules
-
-- Step markers are `28px` circles using `--bg-inverse` with white icon or semibold number text.
-- Connector lines are `1px` using `--border-default`.
-- Horizontal items are `240px` wide in standalone mode and flex equally inside `HorizontalSteps`.
-- Horizontal item content uses `15px / 24px` medium labels and `14px / 20px` captions.
-- Vertical items are `400px` wide with a `24px` gap between marker rail and content.
-- Vertical item labels use `17px / 28px`; support text and captions use `15px / 24px`.
-- Vertical slot content is `76px` tall with the purple subtle background and dashed purple border.
-- Action buttons are `36px` tall with the design-system primary and secondary treatment.
-- RTL mirrors marker placement, text alignment, support text order, and horizontal connector direction.
-
-## Install
-
-```bash
-npx banhaten add steps
-```
-
-## Examples
-
-Primary registry example: `examples/expanded/steps-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs steps` to inspect source files, install command, and examples.
-
-## Token Contract
-
-Component styles must resolve through Banhaten semantic tokens, component aliases, or documented exception-ledger values.
-Do not add raw colors, pixel values, opacity utilities, z-index values, durations, or shadow literals directly to component source.
-Covered source files: `components/expanded/steps.css`, `components/expanded/Steps.tsx`.
-
-## RTL Rules
-
-This component has no special RTL contract beyond inherited document direction and logical spacing.
-
-## Accessibility
-
-Keep native semantics, accessible names, keyboard reachability, focus-visible treatment, and status/error announcements intact when composing this component.
-
+# Steps
+
+Steps show progress through a sequential task. The implementation follows the Figma nodes `HorizontalSteps` (`570:2780`), `VerticalSteps` (`567:76719`), `VerticalStepItem` (`567:5342`), and `HorizontalStepItem` (`569:78346`).
+
+## API
+
+```tsx
+<Steps
+  direction="horizontal"
+  indicator="icon"
+  dir="ltr"
+  items={[
+    { label: "Label", caption: "Caption", supportText: "Support" },
+    { label: "Label", caption: "Caption", supportText: "Support" },
+  ]}
+/>
+```
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `direction` | `horizontal`, `vertical` | `horizontal` |
+| `indicator` | `icon`, `number` | `icon` |
+| `alignment` | `leading`, `trailing` | `leading` |
+| `dir` | `ltr`, `rtl` | `ltr` |
+| `items` | `StepItem[]` | six default steps |
+
+## Pixel Rules
+
+- Step markers are `28px` circles using `--bg-inverse` with white icon or semibold number text.
+- Connector lines are `1px` using `--border-default`.
+- Horizontal items are `240px` wide in standalone mode and flex equally inside `HorizontalSteps`.
+- Horizontal item content uses `15px / 24px` medium labels and `14px / 20px` captions.
+- Vertical items are `400px` wide with a `24px` gap between marker rail and content.
+- Vertical item labels use `17px / 28px`; support text and captions use `15px / 24px`.
+- Vertical slot content is `76px` tall with the purple subtle background and dashed purple border.
+- Action buttons are `36px` tall with the design-system primary and secondary treatment.
+- RTL mirrors marker placement, text alignment, support text order, and horizontal connector direction.
+
+## Install
+
+```bash
+npx banhaten add steps
+```
+
+## Examples
+
+Primary registry example: `examples/expanded/steps-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs steps` to inspect source files, install command, and examples.
+
+## Token Contract
+
+Component styles must resolve through Banhaten semantic tokens, component aliases, or documented exception-ledger values.
+Do not add raw colors, pixel values, opacity utilities, z-index values, durations, or shadow literals directly to component source.
+Covered source files: `components/expanded/steps.css`, `components/expanded/Steps.tsx`.
+
+## RTL Rules
+
+This component has no special RTL contract beyond inherited document direction and logical spacing.
+
+## Accessibility
+
+Keep native semantics, accessible names, keyboard reachability, focus-visible treatment, and status/error announcements intact when composing this component.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -78,5 +78,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `states` | `complete`, `active`, `todo` |
 | `tokens` | `--bh-bg-accent-purple-subtle`, `--bh-bg-inverse`, `--bh-border-accent-purple-strong`, `--bh-border-default`, `--bh-content-default`, `--bh-content-inverse`, `--bh-content-on-brand`, `--bh-content-subtle`, `--bh-control-default`, `--bh-font-family`, `--bh-font-weight-medium`, `--bh-font-weight-regular`, `--bh-font-weight-semibold`, `--bh-icon-stroke-300`, `--bh-interactive-brand-default`, `--bh-interactive-secondary-default`, `--bh-radius-full`, `--bh-radius-sm-4`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-9xl-64`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxxs-1`, `--bh-steps-horizontal-width`, `--bh-steps-indicator-panel-width`, `--bh-steps-vertical-width`, `--bh-text-base-letter-spacing`, `--bh-text-body-lg-medium-font-size`, `--bh-text-body-lg-medium-line-height`, `--bh-text-body-md-font-size`, `--bh-text-body-md-line-height`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-line-height`, `--bh-text-body-xs-regular-font-size` |
 | `variants` | `icon`, `number` |
-<!-- registry-contract:end -->
+<!-- registry-contract:end -->
 `ProgressSteps` covers compact bar progress and status-aware marker sequences used in setup and enrollment flows.