banhaten 0.5.0 → 0.6.0

package/docs/design-system/components/segmented-control.md

@@ -1,57 +1,57 @@
-# Segmented Control
-
-Segmented Control presents a small set of related choices on one connected, content-width surface. It is the preferred primitive for view, density, period, and numeric display choices such as “Cards per row”.
-
-Use Select or Radio Group when labels are long or the option set is large. Use Button Group when the items are actions rather than values.
-
-## API
-
-Give the group an accessible name, give every item a stable value, and use `SegmentedControlLabel` only for non-interactive context.
-
-```tsx
-<SegmentedControl
-  aria-label="Cards per row"
-  density="default"
-  defaultValue="4"
->
-  <SegmentedControlLabel>Cards / row</SegmentedControlLabel>
-  <SegmentedControlItem value="3">3</SegmentedControlItem>
-  <SegmentedControlItem value="4">4</SegmentedControlItem>
-  <SegmentedControlItem value="5">5</SegmentedControlItem>
-  <SegmentedControlItem value="6">6</SegmentedControlItem>
-</SegmentedControl>
-```
-
-The default density is `default` (36px). Use `compact` for 32px control rows and `comfortable` for 40px controls. Keep adjacent controls on the same density contract.
-
-## Install
-
-```bash
-npx banhaten add segmented-control
-```
-
-## Examples
-
-Primary registry example: `examples/segmented-control-demo.tsx`.
-
-The results-toolbar recipe demonstrates the labeled cards-per-row composition alongside a Select action.
-
-## Token Contract
-
-Segmented Control reuses Button Group surface, divider, interaction, typography, and density tokens. Do not replace its height, padding, radius, color, or shadow with local literal values.
-
-Covered source files: `components/segmented-control.tsx` and its `button-group` registry dependency.
-
-## RTL Rules
-
-- The group inherits document direction.
-- Content-width items and logical dividers follow inherited direction without alternate markup.
-- Horizontal arrow-key navigation resolves the computed direction through the underlying Toggle Group.
-
-## Accessibility
-
-Provide `aria-label` on every Segmented Control. Items expose pressed state through the underlying Toggle Group, support single or multiple selection, and retain Home, End, and direction-aware arrow-key navigation. The label segment is descriptive and never focusable.
-
+# Segmented Control
+
+Segmented Control presents a small set of related choices on one connected, content-width surface. It is the preferred primitive for view, density, period, and numeric display choices such as “Cards per row”.
+
+Use Select or Radio Group when labels are long or the option set is large. Use Button Group when the items are actions rather than values.
+
+## API
+
+Give the group an accessible name, give every item a stable value, and use `SegmentedControlLabel` only for non-interactive context.
+
+```tsx
+<SegmentedControl
+  aria-label="Cards per row"
+  density="default"
+  defaultValue="4"
+>
+  <SegmentedControlLabel>Cards / row</SegmentedControlLabel>
+  <SegmentedControlItem value="3">3</SegmentedControlItem>
+  <SegmentedControlItem value="4">4</SegmentedControlItem>
+  <SegmentedControlItem value="5">5</SegmentedControlItem>
+  <SegmentedControlItem value="6">6</SegmentedControlItem>
+</SegmentedControl>
+```
+
+The default density is `default` (36px). Use `compact` for 32px control rows and `comfortable` for 40px controls. Keep adjacent controls on the same density contract.
+
+## Install
+
+```bash
+npx banhaten add segmented-control
+```
+
+## Examples
+
+Primary registry example: `examples/segmented-control-demo.tsx`.
+
+The results-toolbar recipe demonstrates the labeled cards-per-row composition alongside a Select action.
+
+## Token Contract
+
+Segmented Control reuses Button Group surface, divider, interaction, typography, and density tokens. Do not replace its height, padding, radius, color, or shadow with local literal values.
+
+Covered source files: `components/segmented-control.tsx` and its `button-group` registry dependency.
+
+## RTL Rules
+
+- The group inherits document direction.
+- Content-width items and logical dividers follow inherited direction without alternate markup.
+- Horizontal arrow-key navigation resolves the computed direction through the underlying Toggle Group.
+
+## Accessibility
+
+Provide `aria-label` on every Segmented Control. Items expose pressed state through the underlying Toggle Group, support single or multiple selection, and retain Home, End, and direction-aware arrow-key navigation. The label segment is descriptive and never focusable.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 

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

@@ -1,67 +1,71 @@
-# Select
-
-Select is a Radix Select-backed field and menu system. It supports default and soft trigger styles, md/lg sizing, error, filled and disabled states, menu surfaces, checkbox or check selection, and item media for text, icons, avatars, companies, payment methods, and status dots.
-
-## API
-
-```tsx
-<Select label="Country" placeholder="Choose country">
-  <SelectMenuItem value="eg">Egypt</SelectMenuItem>
-  <SelectMenuItem value="sa">Saudi Arabia</SelectMenuItem>
-</Select>
-```
-
-| Prop | Type / values | Default | Notes |
-| --- | --- | --- | --- |
-| `aria-label` | `string` | — | Gives a label-less trigger a stable purpose-based name. It is forwarded to the trigger, not the root. |
-| `aria-labelledby` | `string` | — | Names the trigger from external text. It is forwarded to the trigger, not the root. |
-| `variant` | `default`, `soft` | `default` | Selects the trigger surface. |
-| `size` | `lg`, `md` | `lg` | Selects the trigger height. |
-| `state` | `default`, `filled`, `error`, `disabled` | `default` | Selects the visual state. |
-| `itemType` | `default`, `icon`, `avatar`, `company`, `payment`, `dot` | `default` | Selects menu-item media. |
-| `selectionType` | `default`, `checkbox` | `default` | Selects the menu-item selection indicator. |
-| `hasInformationIcon` | `boolean` | `false` | Shows an information icon beside the field label. |
-| `hasLeadingIcon` | `boolean` | `false` | Set true to show the default user icon. |
-| `leadingIcon` | `ReactNode \| false` | `null` | A node enables the leading slot; false always removes it. |
-| `hasTrailingIcon` | `boolean` | `false` | Set true to show the default information icon inside the trigger. |
-| `trailingIcon` | `ReactNode \| false` | `null` | A node enables the trailing slot; false always removes it. |
-| `expandIcon` | `ReactNode \| false` | `chevron-down` | Replaces the expand icon, or removes it when false. |
-| `triggerProps` | `React.ComponentProps<"button">` | — | Advanced trigger attributes, spread last so matching values override top-level trigger defaults. |
-
-## Migration
-
-Select now renders only its expand chevron when optional trigger-icon props are omitted. Add `hasLeadingIcon` or `hasTrailingIcon` to retain the previous default user or information icon. A supplied icon enables its slot, while explicit `false` always removes it.
-
-## Token Contract
-
-Select consumes Banhaten field, trigger, menu, item, checkbox, status, avatar, payment, typography, spacing, border, radius, shadow, and focus tokens.
-
-## RTL
-
-Values, labels, helper text, and menu item text use `text-start` and `dir="auto"`. Trigger icons and selected checks use logical placement so they mirror in RTL.
-
-## Accessibility
-
-Radix provides listbox semantics, focus management, typeahead, selection state, and keyboard behavior. Every Select needs a stable name that describes its purpose rather than its current value. Prefer a visible `label`; for a visually label-less control, pass `aria-label`, `aria-labelledby`, a text `label` with `hasLabel={false}`, or associate an external `<label>` through `triggerId`. Top-level ARIA naming props are forwarded to the trigger. `triggerProps` remains the advanced override path. Do not rely on `value` or `placeholder` as the control name. Use visible helper or error text for validation states.
-
-## Install
-
-```bash
-npx banhaten add select
-```
-
-## Examples
-
-Primary registry example: `examples/select-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs select` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `textAlignment`: Uses text-start and dir="auto" for values, labels, helper text, and menu item text.
-- `spacing`: Uses logical padding, start/end positioning, and inherited flex direction so trigger icons and selected checks mirror in RTL.
-
+# Select
+
+Select is a Radix Select-backed field and menu system. It supports default and soft trigger styles, md/lg sizing, error, filled and disabled states, menu surfaces, checkbox or check selection, and item media for text, icons, avatars, companies, payment methods, and status dots.
+
+## API
+
+```tsx
+<Select label="Country" placeholder="Choose country">
+  <SelectMenuItem value="eg">Egypt</SelectMenuItem>
+  <SelectMenuItem value="sa">Saudi Arabia</SelectMenuItem>
+</Select>
+```
+
+| Prop | Type / values | Default | Notes |
+| --- | --- | --- | --- |
+| `aria-label` | `string` | — | Gives a label-less trigger a stable purpose-based name. It is forwarded to the trigger, not the root. |
+| `aria-labelledby` | `string` | — | Names the trigger from external text. It is forwarded to the trigger, not the root. |
+| `variant` | `default`, `soft` | `default` | Selects the trigger surface. |
+| `size` | `lg`, `md` | `lg` | Selects the trigger height. |
+| `state` | `default`, `filled`, `error`, `disabled` | `default` | Selects the visual state. |
+| `itemType` | `default`, `icon`, `avatar`, `company`, `payment`, `dot` | `default` | Selects menu-item media. |
+| `selectionType` | `default`, `checkbox` | `default` | Selects the menu-item selection indicator. |
+| `hasInformationIcon` | `boolean` | `false` | Shows an information icon beside the field label. |
+| `hasLeadingIcon` | `boolean` | `false` | Set true to show the default user icon. |
+| `leadingIcon` | `ReactNode \| false` | `null` | A node enables the leading slot; false always removes it. |
+| `hasTrailingIcon` | `boolean` | `false` | Set true to show the default information icon inside the trigger. |
+| `trailingIcon` | `ReactNode \| false` | `null` | A node enables the trailing slot; false always removes it. |
+| `expandIcon` | `ReactNode \| false` | `chevron-down` | Replaces the expand icon, or removes it when false. |
+| `triggerProps` | `React.ComponentProps<"button">` | — | Advanced trigger attributes, spread last so matching values override top-level trigger defaults. |
+
+## Migration
+
+Select now renders only its expand chevron when optional trigger-icon props are omitted. Add `hasLeadingIcon` or `hasTrailingIcon` to retain the previous default user or information icon. A supplied icon enables its slot, while explicit `false` always removes it.
+
+## Sizing rule
+
+Select is `320px` wide by default (`--bh-select-width`), the width of the library Select frame. In a form grid or form card, make each field fill its column: pass `className="w-full"`, or set `--bh-select-width: 100%` on the field. Keep the default for a field that stands on its own.
+
+## Token Contract
+
+Select consumes Banhaten field, trigger, menu, item, checkbox, status, avatar, payment, typography, spacing, border, radius, shadow, and focus tokens.
+
+## RTL
+
+Values, labels, helper text, and menu item text use `text-start` and `dir="auto"`. Trigger icons and selected checks use logical placement so they mirror in RTL.
+
+## Accessibility
+
+Radix provides listbox semantics, focus management, typeahead, selection state, and keyboard behavior. Every Select needs a stable name that describes its purpose rather than its current value. Prefer a visible `label`; for a visually label-less control, pass `aria-label`, `aria-labelledby`, a text `label` with `hasLabel={false}`, or associate an external `<label>` through `triggerId`. Top-level ARIA naming props are forwarded to the trigger. `triggerProps` remains the advanced override path. Do not rely on `value` or `placeholder` as the control name. Use visible helper or error text for validation states.
+
+## Install
+
+```bash
+npx banhaten add select
+```
+
+## Examples
+
+Primary registry example: `examples/select-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs select` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `textAlignment`: Uses text-start and dir="auto" for values, labels, helper text, and menu item text.
+- `spacing`: Uses logical padding, start/end positioning, and inherited flex direction so trigger icons and selected checks mirror in RTL.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 

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

@@ -1,69 +1,69 @@
-# Sheet
-
-Sheet is a Radix Dialog-based side or edge panel for contextual workflows that need more room than a popover but less interruption than a full modal. It supports logical `start` and `end` sides for RTL, plus top and bottom placements.
-
-## API
-
-```tsx
-<Sheet>
-  <SheetTrigger asChild>
-    <Button>Open settings</Button>
-  </SheetTrigger>
-  <SheetContent side="end">
-    <SheetHeader>
-      <SheetTitle>Workspace settings</SheetTitle>
-      <SheetDescription>Update billing and access controls.</SheetDescription>
-    </SheetHeader>
-    <SheetBody>...</SheetBody>
-    <SheetFooter>...</SheetFooter>
-  </SheetContent>
-</Sheet>
-```
-
-| Part | Purpose |
-| --- | --- |
-| `Sheet`, `SheetTrigger`, `SheetClose`, `SheetPortal` | Radix Dialog shell |
-| `SheetOverlay`, `SheetContent` | overlay and trapped panel |
-| `SheetHeader`, `SheetTitle`, `SheetDescription` | accessible heading area |
-| `SheetBody`, `SheetFooter` | scrollable content and actions |
-
-| Prop | Values |
-| --- | --- |
-| `side` | `start`, `end`, `top`, `bottom` |
-| `size` | `sm`, `default`, `lg` |
-| `showCloseButton` | `boolean` |
-
-## Token Contract
-
-Sheet uses Banhaten overlay, raised surface, border, radius, shadow, spacing, typography, focus, and content tokens.
-
-## RTL
-
-Use `side="start"` and `side="end"` instead of physical left/right placement. CSS logical edges place the panel on the right edge in LTR for `end`, and on the left edge in RTL.
-
-## Accessibility
-
-Radix Dialog provides focus trap, Escape dismissal, outside dismissal, title/description wiring, and modal dialog semantics. Use Alert Dialog for destructive confirmations.
-
-## Install
-
-```bash
-npx banhaten add sheet
-```
-
-## Examples
-
-Primary registry example: `examples/sheet-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs sheet` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `placement`: Use side="start" and side="end" for logical placement; CSS start/end edges mirror under RTL.
-- `textDirection`: Title and description use dir="auto" for Arabic and English copy.
-- `semantics`: Radix Dialog handles modal semantics, focus trapping, and dismissal.
-
+# Sheet
+
+Sheet is a Radix Dialog-based side or edge panel for contextual workflows that need more room than a popover but less interruption than a full modal. It supports logical `start` and `end` sides for RTL, plus top and bottom placements.
+
+## API
+
+```tsx
+<Sheet>
+  <SheetTrigger asChild>
+    <Button>Open settings</Button>
+  </SheetTrigger>
+  <SheetContent side="end">
+    <SheetHeader>
+      <SheetTitle>Workspace settings</SheetTitle>
+      <SheetDescription>Update billing and access controls.</SheetDescription>
+    </SheetHeader>
+    <SheetBody>...</SheetBody>
+    <SheetFooter>...</SheetFooter>
+  </SheetContent>
+</Sheet>
+```
+
+| Part | Purpose |
+| --- | --- |
+| `Sheet`, `SheetTrigger`, `SheetClose`, `SheetPortal` | Radix Dialog shell |
+| `SheetOverlay`, `SheetContent` | overlay and trapped panel |
+| `SheetHeader`, `SheetTitle`, `SheetDescription` | accessible heading area |
+| `SheetBody`, `SheetFooter` | scrollable content and actions |
+
+| Prop | Values |
+| --- | --- |
+| `side` | `start`, `end`, `top`, `bottom` |
+| `size` | `sm`, `default`, `lg` |
+| `showCloseButton` | `boolean` |
+
+## Token Contract
+
+Sheet uses Banhaten overlay, raised surface, border, radius, shadow, spacing, typography, focus, and content tokens.
+
+## RTL
+
+Use `side="start"` and `side="end"` instead of physical left/right placement. CSS logical edges place the panel on the right edge in LTR for `end`, and on the left edge in RTL.
+
+## Accessibility
+
+Radix Dialog provides focus trap, Escape dismissal, outside dismissal, title/description wiring, and modal dialog semantics. Use Alert Dialog for destructive confirmations.
+
+## Install
+
+```bash
+npx banhaten add sheet
+```
+
+## Examples
+
+Primary registry example: `examples/sheet-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs sheet` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `placement`: Use side="start" and side="end" for logical placement; CSS start/end edges mirror under RTL.
+- `textDirection`: Title and description use dir="auto" for Arabic and English copy.
+- `semantics`: Radix Dialog handles modal semantics, focus trapping, and dismissal.
+
 <!-- registry-contract:start -->
 ## Registry Contract