banhaten 0.5.0 → 0.6.0

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

@@ -1,105 +1,105 @@
-# Divider
-
-Dividers, also called separators, separate related content without creating a new surface. `Divider` is the canonical separator primitive for plain horizontal and vertical rules.
-
-Figma reference: `Divider`, node `165:3111`.
-
-## Variants
-
-The component defines these variants:
-
-| Direction | Type |
-| --- | --- |
-| `horizontal` | `solid`, `dotted` |
-| `vertical` | `solid`, `dotted` |
-
-## API
-
-Use semantic names in code even if the Figma variant labels are title-cased.
-
-```ts
-type DividerDirection = "horizontal" | "vertical";
-type DividerType = "solid" | "dotted";
-
-type DividerProps = {
-  direction?: DividerDirection;
-  type?: DividerType;
-  decorative?: boolean;
-};
-```
-
-## Layout
-
-- Horizontal dividers render as a `1px` high rule with the Figma component length.
-- Vertical dividers render as a `1px` wide rule with the same tokenized length.
-- Dotted dividers use a 2px dash/gap rhythm from the number scale.
-- Direction does not require a separate RTL prop; plain separators are direction-neutral.
-
-## Tokens
-
-Dividers should consume existing semantic tokens:
-
-```ts
-export const dividerTokens = {
-  ruleColor: "border.subtle",
-  strokeWidth: "space.xxxs-1",
-  dash: "space.xxs-2",
-  length: "space.15xl-224",
-};
-```
-
-Do not hard-code the Figma fallback values in component code. The current Figma fallback for the rule is `rgba(55, 83, 122, 0.13)`, but the implementation should resolve through `border.subtle`.
-
-## Accessibility
-
-- Decorative divider lines should be hidden from assistive technology.
-- A standalone semantic separator may render as `<hr />` or `role="separator"` when it conveys structure.
-- Do not use the divider as the only indicator of a required grouping if the grouping needs a visible heading.
-
-## Usage
-
-```tsx
-<Divider />
-<Divider type="dotted" />
-<Divider direction="vertical" />
-<Divider decorative />
-```
-
-## Preset Impact
-
-- `default`: quiet 1px rule using `border.subtle`.
-- `rounded`: same rule weight; surrounding compositions may use softer radius tokens.
-- `sharp`: same rule weight; surrounding compositions may use square or near-square containers.
-
-## Implementation Notes
-
-- Prefer `border-top` or a 1px block rule instead of a filled rectangle.
-- Use `border-style: dashed` for the Figma dotted variant unless the platform has a distinct dotted token or renderer.
-- Compose labeled section breaks outside `Divider`; the core primitive should stay a small separator.
-
-## Install
-
-```bash
-npx banhaten add divider
-```
-
-## Examples
-
-Primary registry example: `examples/divider-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs divider` 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/divider.tsx`.
-
-## RTL Rules
-
-- `inheritsDirection`: false
-- `geometry`: Direction maps to component orientation, not document text direction.
-
+# Divider
+
+Dividers, also called separators, separate related content without creating a new surface. `Divider` is the canonical separator primitive for plain horizontal and vertical rules.
+
+Figma reference: `Divider`, node `165:3111`.
+
+## Variants
+
+The component defines these variants:
+
+| Direction | Type |
+| --- | --- |
+| `horizontal` | `solid`, `dotted` |
+| `vertical` | `solid`, `dotted` |
+
+## API
+
+Use semantic names in code even if the Figma variant labels are title-cased.
+
+```ts
+type DividerDirection = "horizontal" | "vertical";
+type DividerType = "solid" | "dotted";
+
+type DividerProps = {
+  direction?: DividerDirection;
+  type?: DividerType;
+  decorative?: boolean;
+};
+```
+
+## Layout
+
+- Horizontal dividers render as a `1px` high rule with the Figma component length.
+- Vertical dividers render as a `1px` wide rule with the same tokenized length.
+- Dotted dividers use a 2px dash/gap rhythm from the number scale.
+- Direction does not require a separate RTL prop; plain separators are direction-neutral.
+
+## Tokens
+
+Dividers should consume existing semantic tokens:
+
+```ts
+export const dividerTokens = {
+  ruleColor: "border.subtle",
+  strokeWidth: "space.xxxs-1",
+  dash: "space.xxs-2",
+  length: "space.15xl-224",
+};
+```
+
+Do not hard-code the Figma fallback values in component code. The current Figma fallback for the rule is `rgba(55, 83, 122, 0.13)`, but the implementation should resolve through `border.subtle`.
+
+## Accessibility
+
+- Decorative divider lines should be hidden from assistive technology.
+- A standalone semantic separator may render as `<hr />` or `role="separator"` when it conveys structure.
+- Do not use the divider as the only indicator of a required grouping if the grouping needs a visible heading.
+
+## Usage
+
+```tsx
+<Divider />
+<Divider type="dotted" />
+<Divider direction="vertical" />
+<Divider decorative />
+```
+
+## Preset Impact
+
+- `default`: quiet 1px rule using `border.subtle`.
+- `rounded`: same rule weight; surrounding compositions may use softer radius tokens.
+- `sharp`: same rule weight; surrounding compositions may use square or near-square containers.
+
+## Implementation Notes
+
+- Prefer `border-top` or a 1px block rule instead of a filled rectangle.
+- Use `border-style: dashed` for the Figma dotted variant unless the platform has a distinct dotted token or renderer.
+- Compose labeled section breaks outside `Divider`; the core primitive should stay a small separator.
+
+## Install
+
+```bash
+npx banhaten add divider
+```
+
+## Examples
+
+Primary registry example: `examples/divider-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs divider` 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/divider.tsx`.
+
+## RTL Rules
+
+- `inheritsDirection`: false
+- `geometry`: Direction maps to component orientation, not document text direction.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 

package/docs/design-system/components/empty-state.md

@@ -1,59 +1,59 @@
-# Empty State
-
-Empty State is a reusable result-state composition for no-results, first-run, or cleared workflow moments. It uses a neutral tokenized icon halo, 17px semibold title text, 15px regular supporting copy, and optional Banhaten Button actions.
-
-## API
-
-```tsx
-<EmptyState
-  title="No results found"
-  description="Try adjusting your search or filters"
-  actions={[
-    { label: "Reset filters", variant: "secondary" },
-    { label: "Create item" },
-  ]}
-/>
-```
-
-| Prop | Values | Default |
-| --- | --- | --- |
-| `title` | `ReactNode` | required |
-| `description` | `ReactNode` | none |
-| `icon` | `ReactNode` | `SearchIcon` |
-| `iconLabel` | `string` | decorative icon |
-| `actions` | `EmptyStateAction[]` | `[]` |
-| `align` | `center`, `start` | `center` |
-| `size` | `default`, `compact` | `default` |
-| `dir` | `ltr`, `rtl`, `auto` | `ltr` |
-
-## Token Contract
-
-- Icon halo: `--bh-bg-neutral-subtle`, `--bh-bg-neutral-soft`, `--bh-radius-full`
-- Title: `--bh-text-heading-xs-semibold-*`, `--bh-content-default`
-- Description: `--bh-text-body-md-regular-*`, `--bh-content-subtle`
-- Spacing and sizing: `--bh-space-*`
-- Actions: existing `Button` component variants and token contract
-
-## RTL Rules
-
-`EmptyState` inherits logical alignment through `dir`. Text uses `dir="auto"` so Arabic and English copy resolve naturally, while the action row preserves logical order in RTL containers.
-
-## Install
-
-```bash
-npx banhaten add empty-state
-```
-
-## Examples
-
-Primary registry example: `examples/expanded/empty-state-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs empty-state` to inspect source files, install command, and examples.
-
-## Accessibility
-
-Keep native semantics, accessible names, keyboard reachability, focus-visible treatment, and status/error announcements intact when composing this component.
-
+# Empty State
+
+Empty State is a reusable result-state composition for no-results, first-run, or cleared workflow moments. It uses a neutral tokenized icon halo, 17px semibold title text, 15px regular supporting copy, and optional Banhaten Button actions.
+
+## API
+
+```tsx
+<EmptyState
+  title="No results found"
+  description="Try adjusting your search or filters"
+  actions={[
+    { label: "Reset filters", variant: "secondary" },
+    { label: "Create item" },
+  ]}
+/>
+```
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `title` | `ReactNode` | required |
+| `description` | `ReactNode` | none |
+| `icon` | `ReactNode` | `SearchIcon` |
+| `iconLabel` | `string` | decorative icon |
+| `actions` | `EmptyStateAction[]` | `[]` |
+| `align` | `center`, `start` | `center` |
+| `size` | `default`, `compact` | `default` |
+| `dir` | `ltr`, `rtl`, `auto` | `ltr` |
+
+## Token Contract
+
+- Icon halo: `--bh-bg-neutral-subtle`, `--bh-bg-neutral-soft`, `--bh-radius-full`
+- Title: `--bh-text-heading-xs-semibold-*`, `--bh-content-default`
+- Description: `--bh-text-body-md-regular-*`, `--bh-content-subtle`
+- Spacing and sizing: `--bh-space-*`
+- Actions: existing `Button` component variants and token contract
+
+## RTL Rules
+
+`EmptyState` inherits logical alignment through `dir`. Text uses `dir="auto"` so Arabic and English copy resolve naturally, while the action row preserves logical order in RTL containers.
+
+## Install
+
+```bash
+npx banhaten add empty-state
+```
+
+## Examples
+
+Primary registry example: `examples/expanded/empty-state-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs empty-state` to inspect source files, install command, and examples.
+
+## 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/field.md

@@ -1,73 +1,73 @@
-# Field
-
-Field composes labels, controls, descriptions, and validation errors into accessible form rows. It gives Banhaten a shared form anatomy without forcing a validation library.
-
-## API
-
-```tsx
-<Field invalid>
-  <FieldLabel>Email</FieldLabel>
-  <FieldControl>
-    <Input state="error" />
-  </FieldControl>
-  <FieldError>Enter a valid email address.</FieldError>
-</Field>
-```
-
-| Part | Purpose |
-| --- | --- |
-| `Field` | row context, ids, invalid and disabled state |
-| `FieldLabel` | label connected to the control id |
-| `FieldControl` | `asChild` slot that wires id and ARIA state |
-| `FieldDescription` | helper text |
-| `FieldError` | validation message with alert role |
-| `FieldSet`, `FieldLegend`, `FieldGroup`, `FieldContent` | grouped form layout |
-
-## Validation Pattern
-
-Use native state for plain forms, or map your validation library state into `invalid`, `FieldError`, and the child control state.
-
-```tsx
-<Field invalid={Boolean(errors.email)}>
-  <FieldLabel>Email</FieldLabel>
-  <FieldControl>
-    <Input state={errors.email ? "error" : "default"} />
-  </FieldControl>
-  {errors.email ? <FieldError>{errors.email.message}</FieldError> : null}
-</Field>
-```
-
-## Token Contract
-
-Field uses Banhaten spacing, content, danger, field, typography, and disabled tokens. Child controls keep ownership of their own surface tokens.
-
-## RTL
-
-Field uses logical grid and text-start alignment. Horizontal and responsive orientations mirror naturally under inherited `dir`.
-
-## Install
-
-```bash
-npx banhaten add field
-```
-
-## Examples
-
-Primary registry example: `examples/field-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs field` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `layout`: Vertical, horizontal, and responsive layouts use CSS grid and logical text alignment so field rows mirror naturally.
-- `textDirection`: Labels, descriptions, and errors use dir="auto" through Label and field text parts.
-- `semantics`: FieldControl wires the generated control id, invalid state, disabled announcement, and description/error ids into the child control.
-
-## Accessibility
-
-This component relies on `@radix-ui/react-slot` for its base accessibility behavior. Keep required labels, titles, descriptions, and focusable trigger/content relationships intact when composing it.
-
+# Field
+
+Field composes labels, controls, descriptions, and validation errors into accessible form rows. It gives Banhaten a shared form anatomy without forcing a validation library.
+
+## API
+
+```tsx
+<Field invalid>
+  <FieldLabel>Email</FieldLabel>
+  <FieldControl>
+    <Input state="error" />
+  </FieldControl>
+  <FieldError>Enter a valid email address.</FieldError>
+</Field>
+```
+
+| Part | Purpose |
+| --- | --- |
+| `Field` | row context, ids, invalid and disabled state |
+| `FieldLabel` | label connected to the control id |
+| `FieldControl` | `asChild` slot that wires id and ARIA state |
+| `FieldDescription` | helper text |
+| `FieldError` | validation message with alert role |
+| `FieldSet`, `FieldLegend`, `FieldGroup`, `FieldContent` | grouped form layout |
+
+## Validation Pattern
+
+Use native state for plain forms, or map your validation library state into `invalid`, `FieldError`, and the child control state.
+
+```tsx
+<Field invalid={Boolean(errors.email)}>
+  <FieldLabel>Email</FieldLabel>
+  <FieldControl>
+    <Input state={errors.email ? "error" : "default"} />
+  </FieldControl>
+  {errors.email ? <FieldError>{errors.email.message}</FieldError> : null}
+</Field>
+```
+
+## Token Contract
+
+Field uses Banhaten spacing, content, danger, field, typography, and disabled tokens. Child controls keep ownership of their own surface tokens.
+
+## RTL
+
+Field uses logical grid and text-start alignment. Horizontal and responsive orientations mirror naturally under inherited `dir`.
+
+## Install
+
+```bash
+npx banhaten add field
+```
+
+## Examples
+
+Primary registry example: `examples/field-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs field` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `layout`: Vertical, horizontal, and responsive layouts use CSS grid and logical text alignment so field rows mirror naturally.
+- `textDirection`: Labels, descriptions, and errors use dir="auto" through Label and field text parts.
+- `semantics`: FieldControl wires the generated control id, invalid state, disabled announcement, and description/error ids into the child control.
+
+## Accessibility
+
+This component relies on `@radix-ui/react-slot` for its base accessibility behavior. Keep required labels, titles, descriptions, and focusable trigger/content relationships intact when composing it.
+
 <!-- registry-contract:start -->
 ## Registry Contract