banhaten 0.5.0 → 0.6.0

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

@@ -1,52 +1,52 @@
-# Kbd
-
-Kbd renders physical keyboard keys. Shortcut renders a compact combined hint for Inputs and constrained action rows, while KbdShortcut renders each physical key on its own surface.
-
-## API
-
-```tsx
-<Shortcut keys={["Mod", "K"]} />
-<KbdShortcut keys={["Mod", "K"]} />
-<Kbd>Esc</Kbd>
-<Kbd size="md">Shift</Kbd>
-```
-
-| Prop | Values |
-| --- | --- |
-| `dir` | `ltr` by default on Kbd; override only for localized non-shortcut key names |
-| `size` | `sm`, `md` |
-| `keys` | `readonly string[]`; use `Mod` for Command on Apple platforms and Control elsewhere |
-| `platform` | `auto`, `mac`, `windows`, `linux` |
-
-## Token Contract
-
-Kbd uses Banhaten border, soft interactive background, radius, body-xs typography, and button elevation tokens. Shortcut uses the Figma compact contract: 20px height/minimum width, 4px inline padding and radius, body-2xs medium typography, and no keycap elevation.
-
-## RTL
-
-Kbd defaults to `dir="ltr"` so physical modifiers and keys keep their canonical order inside RTL interfaces. Surrounding shortcut descriptions retain their own text direction; pass an explicit `dir` only for localized, non-shortcut key names.
-
-## Accessibility
-
-Use Kbd as supporting text, not as the only label for an action.
-
-## Install
-
-```bash
-npx banhaten add kbd
-```
-
-## Examples
-
-Primary registry example: `examples/kbd-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs kbd` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: false
-- `semantics`: Kbd defaults to dir="ltr" so physical key order stays stable, while surrounding shortcut descriptions keep their own text direction.
-
+# Kbd
+
+Kbd renders physical keyboard keys. Shortcut renders a compact combined hint for Inputs and constrained action rows, while KbdShortcut renders each physical key on its own surface.
+
+## API
+
+```tsx
+<Shortcut keys={["Mod", "K"]} />
+<KbdShortcut keys={["Mod", "K"]} />
+<Kbd>Esc</Kbd>
+<Kbd size="md">Shift</Kbd>
+```
+
+| Prop | Values |
+| --- | --- |
+| `dir` | `ltr` by default on Kbd; override only for localized non-shortcut key names |
+| `size` | `sm`, `md` |
+| `keys` | `readonly string[]`; use `Mod` for Command on Apple platforms and Control elsewhere |
+| `platform` | `auto`, `mac`, `windows`, `linux` |
+
+## Token Contract
+
+Kbd uses Banhaten border, soft interactive background, radius, body-xs typography, and button elevation tokens. Shortcut uses the Figma compact contract: 20px height/minimum width, 4px inline padding and radius, body-2xs medium typography, and no keycap elevation.
+
+## RTL
+
+Kbd defaults to `dir="ltr"` so physical modifiers and keys keep their canonical order inside RTL interfaces. Surrounding shortcut descriptions retain their own text direction; pass an explicit `dir` only for localized, non-shortcut key names.
+
+## Accessibility
+
+Use Kbd as supporting text, not as the only label for an action.
+
+## Install
+
+```bash
+npx banhaten add kbd
+```
+
+## Examples
+
+Primary registry example: `examples/kbd-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs kbd` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: false
+- `semantics`: Kbd defaults to dir="ltr" so physical key order stays stable, while surrounding shortcut descriptions keep their own text direction.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 

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

@@ -1,52 +1,52 @@
-# Label
-
-Label renders accessible control labels with Banhaten typography, required markers, optional text, tone variants, and RTL-safe copy. It is backed by Radix Label.
-
-## API
-
-```tsx
-<Label htmlFor="email" required>
-  Email address
-</Label>
-```
-
-| Prop | Values |
-| --- | --- |
-| `htmlFor` | target control id |
-| `tone` | `default`, `subtle`, `danger` |
-| `required` | `boolean` |
-| `optionalText` | `ReactNode` |
-
-## Token Contract
-
-Label consumes Banhaten body-sm, body-xs, content, danger, spacing, and disabled-state tokens.
-
-## RTL
-
-Label uses logical inline spacing and `dir="auto"` for label and optional text.
-
-## Accessibility
-
-Use `htmlFor` for native controls. For complete form rows with description and error text, use `Field`.
-
-## Install
-
-```bash
-npx banhaten add label
-```
-
-## Examples
-
-Primary registry example: `examples/label-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs label` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `textDirection`: Label and optional text use dir="auto" so Arabic and English labels resolve naturally.
-- `spacing`: Uses logical inline spacing between label text, required marker, and optional text.
-
+# Label
+
+Label renders accessible control labels with Banhaten typography, required markers, optional text, tone variants, and RTL-safe copy. It is backed by Radix Label.
+
+## API
+
+```tsx
+<Label htmlFor="email" required>
+  Email address
+</Label>
+```
+
+| Prop | Values |
+| --- | --- |
+| `htmlFor` | target control id |
+| `tone` | `default`, `subtle`, `danger` |
+| `required` | `boolean` |
+| `optionalText` | `ReactNode` |
+
+## Token Contract
+
+Label consumes Banhaten body-sm, body-xs, content, danger, spacing, and disabled-state tokens.
+
+## RTL
+
+Label uses logical inline spacing and `dir="auto"` for label and optional text.
+
+## Accessibility
+
+Use `htmlFor` for native controls. For complete form rows with description and error text, use `Field`.
+
+## Install
+
+```bash
+npx banhaten add label
+```
+
+## Examples
+
+Primary registry example: `examples/label-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs label` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `textDirection`: Label and optional text use dir="auto" so Arabic and English labels resolve naturally.
+- `spacing`: Uses logical inline spacing between label text, required marker, and optional text.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 

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

@@ -1,72 +1,91 @@
-# Menu
-
-Menu is a Radix DropdownMenu-backed action surface for contextual commands, navigation, progress rows, labels, captions, call-to-action rows, submenus, and rich item media.
-
-## API
-
-```tsx
-<MenuRoot>
-  <MenuTrigger>Open menu</MenuTrigger>
-  <MenuContent width="menu">
-    <MenuItem>Profile</MenuItem>
-    <MenuSeparator />
-    <MenuItem kind="button">Upgrade plan</MenuItem>
-  </MenuContent>
-</MenuRoot>
-```
-
-| Part | Purpose |
-| --- | --- |
-| `MenuRoot`, `MenuTrigger`, `MenuContent`, `MenuPortal` | Radix-backed menu shell |
-| `MenuItem`, `MenuItemContent`, media slots | interactive rows |
-| `MenuSub`, `MenuSubTrigger`, `MenuSubContent` | nested menus |
-| `MenuLabel`, `MenuCaption`, `MenuSeparator` | non-interactive structure |
-
-| Prop | Values |
-| --- | --- |
-| `width` | `menu`, `default`, `multiline`, `action`, `auto` |
-| `kind` | `default`, `multiline`, `action`, `progress`, `button` |
-| `MenuItem.onSelect` | `(event: Event) => void` |
-
-`MenuItem.onSelect` uses Radix's native selection `Event`, not React's DOM text-selection event. Selection closes the menu by default; prevent it when a toggle or multi-select flow should remain open:
-
-```tsx
-<MenuItem onSelect={(event: Event) => event.preventDefault()}>
-  Keep this menu open
-</MenuItem>
-```
-
-## Token Contract
-
-Menu uses Banhaten raised surface, menu shadow, item typography, border, radius, spacing, progress, badge, switch, and focus tokens. Leading glyphs are 18px inside 20px slots; trailing 16px affordances remain unchanged.
-
-## RTL
-
-Menu uses logical padding and flex direction so leading icons, trailing actions, badges, switches, meta text, and submenus mirror naturally. Directional icons should use `data-rtl-flip="true"`.
-
-## Accessibility
-
-Radix provides menu roles, focus management, typeahead, keyboard navigation, Escape handling, and outside dismissal. Keep non-command copy in labels or captions, not disabled menu items.
-
-## Install
-
-```bash
-npx banhaten add menu
-```
-
-## Examples
-
-Primary registry example: `examples/menu-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs menu` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `spacing`: Uses logical padding and flex direction so leading, trailing, badge, switch, right text, and action slots mirror naturally.
-- `directionalIconFlip`: Use data-rtl-flip="true" on chevrons and arrows that should mirror.
-- `textDirection`: Text slots use dir="auto" by default for Arabic and English labels.
-
+# Menu
+
+Menu is a Radix DropdownMenu-backed action surface for contextual commands, navigation, progress rows, labels, captions, call-to-action rows, submenus, and rich item media.
+
+## API
+
+```tsx
+<MenuRoot>
+  <MenuTrigger>Open menu</MenuTrigger>
+  <MenuContent width="menu">
+    <MenuItem>Profile</MenuItem>
+    <MenuSeparator />
+    <MenuItem kind="button">Upgrade plan</MenuItem>
+  </MenuContent>
+</MenuRoot>
+```
+
+| Part | Purpose |
+| --- | --- |
+| `MenuRoot`, `MenuTrigger`, `MenuContent`, `MenuPortal` | Radix-backed menu shell |
+| `MenuItem`, `MenuItemContent`, media slots | interactive rows |
+| `MenuRadioGroup`, `MenuRadioItem` | one choice among items, such as a display time zone |
+| `MenuSub`, `MenuSubTrigger`, `MenuSubContent` | nested menus |
+| `MenuLabel`, `MenuCaption`, `MenuSeparator` | non-interactive structure |
+
+| Prop | Values |
+| --- | --- |
+| `width` | `menu`, `default`, `multiline`, `action`, `auto` |
+| `kind` | `default`, `multiline`, `action`, `progress`, `button` |
+| `MenuItem.onSelect` | `(event: Event) => void` |
+| `MenuRadioGroup.value`, `MenuRadioGroup.onValueChange` | the chosen value; `(value: string) => void` |
+| `MenuRadioItem.value` | the value the item stands for |
+
+`MenuItem.onSelect` uses Radix's native selection `Event`, not React's DOM text-selection event. Selection closes the menu by default; prevent it when a toggle or multi-select flow should remain open:
+
+```tsx
+<MenuItem onSelect={(event: Event) => event.preventDefault()}>
+  Keep this menu open
+</MenuItem>
+```
+
+Use `MenuRadioGroup` and `MenuRadioItem` when the menu sets one value. Items are `menuitemradio` with `aria-checked`, and the chosen one shows a trailing check. Choosing an item closes the menu and calls `onValueChange`. They also render in `MenuPreview`, where the group's `value` marks the chosen item.
+
+```tsx
+<MenuRoot>
+  <MenuTrigger asChild>
+    <Button variant="outline">Riyadh · UTC+3</Button>
+  </MenuTrigger>
+  <MenuContent align="end">
+    <MenuRadioGroup value={zone} onValueChange={setZone}>
+      <MenuRadioItem value="Asia/Riyadh">Riyadh · UTC+3</MenuRadioItem>
+      <MenuRadioItem value="Asia/Dubai">Dubai · UTC+4</MenuRadioItem>
+    </MenuRadioGroup>
+  </MenuContent>
+</MenuRoot>
+```
+
+## Token Contract
+
+Menu uses Banhaten raised surface, menu shadow, item typography, border, radius, spacing, progress, badge, switch, and focus tokens. Leading glyphs are 18px inside 20px slots; trailing 16px affordances remain unchanged.
+
+## RTL
+
+Menu uses logical padding and flex direction so leading icons, trailing actions, badges, switches, meta text, and submenus mirror naturally. Directional icons should use `data-rtl-flip="true"`.
+
+## Accessibility
+
+Radix provides menu roles, focus management, typeahead, keyboard navigation, Escape handling, and outside dismissal. Keep non-command copy in labels or captions, not disabled menu items.
+
+## Install
+
+```bash
+npx banhaten add menu
+```
+
+## Examples
+
+Primary registry example: `examples/menu-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs menu` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `spacing`: Uses logical padding and flex direction so leading, trailing, badge, switch, right text, and action slots mirror naturally.
+- `directionalIconFlip`: Use data-rtl-flip="true" on chevrons and arrows that should mirror.
+- `textDirection`: Text slots use dir="auto" by default for Arabic and English labels.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -75,12 +94,14 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 
 | Field | Values |
 | --- | --- |
-| `supportedExports` | `components/menu.tsx: Menu, MenuCaption, MenuContent, MenuItem, MenuItemAction, MenuItemAvatar, MenuItemBadge, MenuItemContent, MenuItemDescription, MenuItemIcon, MenuItemMeta, MenuItemSwitch, MenuItemText, MenuItemTitle, MenuLabel, MenuPortal, MenuPreview, MenuProgress, MenuRoot, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuSurface, MenuTrigger, menuItemContentVariants, menuItemIconVariants, menuItemVariants, menuVariants` |
-| `parts` | `Menu`, `MenuPreview`, `MenuSurface`, `MenuRoot`, `MenuTrigger`, `MenuContent`, `MenuPortal`, `MenuSub`, `MenuSubTrigger`, `MenuSubContent`, `MenuItem`, `MenuItemContent`, `MenuItemIcon`, `MenuItemAvatar`, `MenuItemText`, `MenuItemTitle`, `MenuItemDescription`, `MenuItemMeta`, `MenuItemBadge`, `MenuItemSwitch`, `MenuItemAction`, `MenuProgress`, `MenuSeparator`, `MenuLabel`, `MenuCaption` |
+| `supportedExports` | `components/menu.tsx: Menu, MenuCaption, MenuContent, MenuItem, MenuItemAction, MenuItemAvatar, MenuItemBadge, MenuItemContent, MenuItemDescription, MenuItemIcon, MenuItemMeta, MenuItemSwitch, MenuItemText, MenuItemTitle, MenuLabel, MenuPortal, MenuPreview, MenuProgress, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuSurface, MenuTrigger, menuItemContentVariants, menuItemIconVariants, menuItemVariants, menuVariants` |
+| `parts` | `Menu`, `MenuPreview`, `MenuSurface`, `MenuRoot`, `MenuTrigger`, `MenuContent`, `MenuPortal`, `MenuSub`, `MenuSubTrigger`, `MenuSubContent`, `MenuItem`, `MenuItemContent`, `MenuItemIcon`, `MenuItemAvatar`, `MenuItemText`, `MenuItemTitle`, `MenuItemDescription`, `MenuItemMeta`, `MenuItemBadge`, `MenuItemSwitch`, `MenuItemAction`, `MenuRadioGroup`, `MenuRadioItem`, `MenuProgress`, `MenuSeparator`, `MenuLabel`, `MenuCaption` |
 | `registryDependencies` | None |
 | `props.onSelect` | `(event: Event) => void; default null; MenuItem selection handler. Uses Radix's native selection Event, not React's DOM text-selection event; call event.preventDefault() to keep toggle or multi-select menus open.` |
+| `props.onValueChange` | `(value: string) => void; default null; MenuRadioGroup only. Receives the value of the MenuRadioItem that was chosen.` |
+| `props.value` | `string; default null; MenuRadioGroup: the chosen value. MenuRadioItem: the value the item stands for; the item matching its group's value is checked, with role menuitemradio, aria-checked and a trailing check.` |
 | `itemKinds` | `default`, `multiline`, `action`, `progress`, `button` |
-| `states` | `default`, `disabled` |
-| `tokens` | `--bh-bg-neutral-soft`, `--bh-bg-neutral-subtle`, `--bh-border-brand-strong`, `--bh-border-default`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-control-default`, `--bh-icon-stroke-300`, `--bh-interactive-indicator-default`, `--bh-interactive-outlined-default`, `--bh-interactive-outlined-hover`, `--bh-interactive-switch-active`, `--bh-interactive-switch-default`, `--bh-interactive-switch-disabled`, `--bh-interactive-switch-handle`, `--bh-interactive-switch-handle-disabled`, `--bh-menu-action-gap`, `--bh-menu-action-height`, `--bh-menu-action-padding-x`, `--bh-menu-badge-height`, `--bh-menu-badge-padding-x`, `--bh-menu-bg`, `--bh-menu-divider-padding-y`, `--bh-menu-gap`, `--bh-menu-icon-padding`, `--bh-menu-item-action-height`, `--bh-menu-item-action-width`, `--bh-menu-item-bg`, `--bh-menu-item-button-height`, `--bh-menu-item-caption-height`, `--bh-menu-item-content-compact-padding-y`, `--bh-menu-item-content-padding`, `--bh-menu-item-default-height`, `--bh-menu-item-default-width`, `--bh-menu-item-divider-height`, `--bh-menu-item-gap`, `--bh-menu-item-hover-bg`, `--bh-menu-item-label-height`, `--bh-menu-item-multiline-height`, `--bh-menu-item-multiline-width`, `--bh-menu-item-padding-x`, `--bh-menu-item-progress-height`, `--bh-menu-item-radius`, `--bh-menu-item-slot-gap`, `--bh-menu-label-padding-x`, `--bh-menu-leading-icon-size`, `--bh-menu-leading-icon-slot-size`, `--bh-menu-padding-y`, `--bh-menu-progress-gap`, `--bh-menu-progress-height`, `--bh-menu-radius`, `--bh-menu-switch-handle-size`, `--bh-menu-switch-height`, `--bh-menu-switch-padding`, `--bh-menu-switch-width`, `--bh-menu-trailing-icon-size`, `--bh-menu-width`, `--bh-opacity-60`, `--bh-radius-full`, `--bh-space-5xl-24`, `--bh-space-7xl-40`, `--bh-space-md-8`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-text-body-2xs-regular-font-size`, `--bh-text-body-2xs-regular-font-weight`, `--bh-text-body-2xs-regular-letter-spacing`, `--bh-text-body-2xs-regular-line-height`, `--bh-text-body-3xs-medium-font-size`, `--bh-text-body-3xs-medium-font-weight`, `--bh-text-body-3xs-medium-letter-spacing`, `--bh-text-body-3xs-medium-line-height`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--bh-text-body-md-medium-letter-spacing`, `--bh-text-body-md-medium-line-height`, `--bh-text-body-md-regular-font-size`, `--bh-text-body-md-regular-font-weight`, `--bh-text-body-md-regular-letter-spacing`, `--bh-text-body-md-regular-line-height`, `--bh-text-body-xs-medium-font-size`, `--bh-text-body-xs-medium-font-weight`, `--bh-text-body-xs-medium-letter-spacing`, `--bh-text-body-xs-medium-line-height`, `--bh-text-body-xs-regular-font-size`, `--bh-text-body-xs-regular-font-weight`, `--bh-text-body-xs-regular-letter-spacing`, `--bh-text-body-xs-regular-line-height`, `--elevation-menu` |
+| `states` | `default`, `disabled`, `checked` |
+| `tokens` | `--bh-bg-neutral-soft`, `--bh-bg-neutral-subtle`, `--bh-border-brand-strong`, `--bh-border-default`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-control-default`, `--bh-icon-stroke-200`, `--bh-icon-stroke-300`, `--bh-interactive-indicator-default`, `--bh-interactive-outlined-default`, `--bh-interactive-outlined-hover`, `--bh-interactive-switch-active`, `--bh-interactive-switch-default`, `--bh-interactive-switch-disabled`, `--bh-interactive-switch-handle`, `--bh-interactive-switch-handle-disabled`, `--bh-menu-action-gap`, `--bh-menu-action-height`, `--bh-menu-action-padding-x`, `--bh-menu-badge-height`, `--bh-menu-badge-padding-x`, `--bh-menu-bg`, `--bh-menu-divider-padding-y`, `--bh-menu-gap`, `--bh-menu-icon-padding`, `--bh-menu-item-action-height`, `--bh-menu-item-action-width`, `--bh-menu-item-bg`, `--bh-menu-item-button-height`, `--bh-menu-item-caption-height`, `--bh-menu-item-content-compact-padding-y`, `--bh-menu-item-content-padding`, `--bh-menu-item-default-height`, `--bh-menu-item-default-width`, `--bh-menu-item-divider-height`, `--bh-menu-item-gap`, `--bh-menu-item-hover-bg`, `--bh-menu-item-label-height`, `--bh-menu-item-multiline-height`, `--bh-menu-item-multiline-width`, `--bh-menu-item-padding-x`, `--bh-menu-item-progress-height`, `--bh-menu-item-radius`, `--bh-menu-item-slot-gap`, `--bh-menu-label-padding-x`, `--bh-menu-leading-icon-size`, `--bh-menu-leading-icon-slot-size`, `--bh-menu-padding-y`, `--bh-menu-progress-gap`, `--bh-menu-progress-height`, `--bh-menu-radius`, `--bh-menu-switch-handle-size`, `--bh-menu-switch-height`, `--bh-menu-switch-padding`, `--bh-menu-switch-width`, `--bh-menu-trailing-icon-size`, `--bh-menu-width`, `--bh-opacity-60`, `--bh-radius-full`, `--bh-space-5xl-24`, `--bh-space-7xl-40`, `--bh-space-md-8`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-text-body-2xs-regular-font-size`, `--bh-text-body-2xs-regular-font-weight`, `--bh-text-body-2xs-regular-letter-spacing`, `--bh-text-body-2xs-regular-line-height`, `--bh-text-body-3xs-medium-font-size`, `--bh-text-body-3xs-medium-font-weight`, `--bh-text-body-3xs-medium-letter-spacing`, `--bh-text-body-3xs-medium-line-height`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--bh-text-body-md-medium-letter-spacing`, `--bh-text-body-md-medium-line-height`, `--bh-text-body-md-regular-font-size`, `--bh-text-body-md-regular-font-weight`, `--bh-text-body-md-regular-letter-spacing`, `--bh-text-body-md-regular-line-height`, `--bh-text-body-xs-medium-font-size`, `--bh-text-body-xs-medium-font-weight`, `--bh-text-body-xs-medium-letter-spacing`, `--bh-text-body-xs-medium-line-height`, `--bh-text-body-xs-regular-font-size`, `--bh-text-body-xs-regular-font-weight`, `--bh-text-body-xs-regular-letter-spacing`, `--bh-text-body-xs-regular-line-height`, `--elevation-menu` |
 | `widths` | `menu`, `default`, `multiline`, `action`, `auto` |
 <!-- registry-contract:end -->

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

@@ -1,49 +1,49 @@
-# Menubar
-
-Menubar wraps Radix Menubar for application-style top menus.
-
-## API
-
-```tsx
-<Menubar>
-  <MenubarMenu>
-    <MenubarTrigger>File</MenubarTrigger>
-    <MenubarContent>
-      <MenubarItem>New</MenubarItem>
-    </MenubarContent>
-  </MenubarMenu>
-</Menubar>
-```
-
-## Token Contract
-
-Menubar uses Banhaten menu, surface, border, shadow, hover, spacing, and body typography tokens.
-
-## RTL
-
-Triggers, menu items, and shortcuts use logical spacing and inherited direction.
-
-## Accessibility
-
-Radix provides menubar roles, keyboard navigation, open state, and submenu behavior.
-
-## Install
-
-```bash
-npx banhaten add menubar
-```
-
-## Examples
-
-Primary registry example: `examples/menubar-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs menubar` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `spacing`: Triggers, items, and shortcuts use logical spacing.
-
+# Menubar
+
+Menubar wraps Radix Menubar for application-style top menus.
+
+## API
+
+```tsx
+<Menubar>
+  <MenubarMenu>
+    <MenubarTrigger>File</MenubarTrigger>
+    <MenubarContent>
+      <MenubarItem>New</MenubarItem>
+    </MenubarContent>
+  </MenubarMenu>
+</Menubar>
+```
+
+## Token Contract
+
+Menubar uses Banhaten menu, surface, border, shadow, hover, spacing, and body typography tokens.
+
+## RTL
+
+Triggers, menu items, and shortcuts use logical spacing and inherited direction.
+
+## Accessibility
+
+Radix provides menubar roles, keyboard navigation, open state, and submenu behavior.
+
+## Install
+
+```bash
+npx banhaten add menubar
+```
+
+## Examples
+
+Primary registry example: `examples/menubar-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs menubar` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `spacing`: Triggers, items, and shortcuts use logical spacing.
+
 <!-- registry-contract:start -->
 ## Registry Contract