banhaten 0.5.0 → 0.6.0

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

@@ -1,60 +1,75 @@
-# Tabs
-
-Tabs is a Radix-backed local navigation primitive with underline, segmented, and rounded treatments across size, full-width behavior, controlled state, LTR, and RTL.
-
-## API
-
-```tsx
-<Tabs
-  ariaLabel="Project sections"
-  items={["Overview", "Activity", "Settings"]}
-  variant="underline"
-/>
-```
-
-| Prop | Values |
-| --- | --- |
-| `variant` | `underline`, `segment`, `rounded` |
-| `size` | `md`, `sm`, `xs` |
-| `fullWidth` | `boolean`; default `false`. Equal shares while labels fit; content-safe scrolling under pressure. |
-| `activeIndex`, `defaultActiveIndex` | controlled or uncontrolled index |
-| `onActiveIndexChange` | selected-index callback |
-
-## Token Contract
-
-Tabs uses Banhaten tab CSS variables for sizes, spacing, border, radius, active indicators, surfaces, and content states.
-
-## RTL
-
-Tabs accepts `dir="rtl"` and mirrors layout through inherited direction. Trigger labels stay complete in both directions: content-hug tabs keep their intrinsic width, while full-width tabs keep equal shares until a label's intrinsic width requires horizontal overflow.
-
-## Overflow
-
-Tab labels stay on one line and are never painted outside their trigger. When all triggers cannot fit, the tab list owns horizontal scrolling. `fullWidth` changes how spare inline space is distributed; it does not enable truncation or unsafe shrinking.
-
-## Accessibility
-
-Tabs uses Radix Tabs so keyboard behavior, roving focus, activation mode, trigger state, and panel relationships come from the primitive.
-
-## Install
-
-```bash
-npx banhaten add tabs
-```
-
-## Examples
-
-Primary registry example: `examples/tabs-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs tabs` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `keyboard`: Radix receives dir so arrow-key navigation follows the document direction.
-- `textDirection`: Trigger labels use dir="auto" by default for Arabic and English tab labels.
-- `spacing`: Uses inherited direction and logical inline spacing so underline, segmented, and rounded treatments mirror naturally.
-
+# Tabs
+
+Tabs is a Radix-backed local navigation primitive with underline, segmented, and rounded treatments across size, full-width behavior, controlled state, LTR, and RTL.
+
+## API
+
+```tsx
+<Tabs
+  ariaLabel="Project sections"
+  items={["Overview", "Activity", "Settings"]}
+  variant="underline"
+/>
+```
+
+| Prop | Values |
+| --- | --- |
+| `variant` | `underline`, `segment`, `rounded` |
+| `size` | `md`, `sm`, `xs`, `comfortable` |
+| `fullWidth` | `boolean`; default `false`. Equal shares while labels fit; content-safe scrolling under pressure. |
+| `activeIndex`, `defaultActiveIndex` | controlled or uncontrolled index |
+| `onActiveIndexChange` | selected-index callback |
+
+### Comfortable size
+
+`size="comfortable"` is the view navigation in an app page: the `View navigation` row in the ATS360 product frames.
+
+- Underline tabs are `48px` tall with a `36px` content row and `2px` label padding.
+- Tabs sit `8px` apart, with no divider under the row.
+- The active tab's `2px` brand indicator is an inset shadow, so the label stays centred in the full tab height.
+- Active labels are body-md medium in `content/default`; the others are body-md regular in `content/subtle`.
+
+The library `Tabs` frame keeps `16px` gaps and a `1px` divider; the other sizes still follow it. Segment and rounded tabs render `comfortable` like `md`.
+
+```tsx
+<Tabs ariaLabel="Requisition views" items={["All requests", "Needs my approval", "Drafts"]} size="comfortable" />
+```
+
+## Token Contract
+
+Tabs uses Banhaten tab CSS variables for sizes, spacing, border, radius, active indicators, surfaces, and content states.
+
+## RTL
+
+Tabs accepts `dir="rtl"` and mirrors layout through inherited direction. Trigger labels stay complete in both directions: content-hug tabs keep their intrinsic width, while full-width tabs keep equal shares until a label's intrinsic width requires horizontal overflow.
+
+## Overflow
+
+Tab labels stay on one line and are never painted outside their trigger. When all triggers cannot fit, the tab list owns horizontal scrolling. `fullWidth` changes how spare inline space is distributed; it does not enable truncation or unsafe shrinking.
+
+## Accessibility
+
+Tabs uses Radix Tabs so keyboard behavior, roving focus, activation mode, trigger state, and panel relationships come from the primitive.
+
+## Install
+
+```bash
+npx banhaten add tabs
+```
+
+## Examples
+
+Primary registry example: `examples/tabs-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs tabs` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `keyboard`: Radix receives dir so arrow-key navigation follows the document direction.
+- `textDirection`: Trigger labels use dir="auto" by default for Arabic and English tab labels.
+- `spacing`: Uses inherited direction and logical inline spacing so underline, segmented, and rounded treatments mirror naturally.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -66,8 +81,8 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `supportedExports` | `components/tabs.tsx: Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger` |
 | `parts` | `Tabs`, `TabsRoot`, `TabsList`, `TabsTrigger`, `TabsContent` |
 | `registryDependencies` | None |
-| `features` | `Radix keyboard behavior`, `controlled active index`, `controlled value`, `optional panels`, `content-hug tabs`, `content-safe full-width tabs`, `horizontal overflow without label overlap` |
-| `sizes` | `md`, `sm`, `xs` |
+| `features` | `Radix keyboard behavior`, `controlled active index`, `controlled value`, `optional panels`, `content-hug tabs`, `content-safe full-width tabs`, `horizontal overflow without label overlap`, `comfortable view-navigation size: 48px underline tabs 8px apart, inset indicator, no divider` |
+| `sizes` | `md`, `sm`, `xs`, `comfortable` |
 | `tokens` | `--bh-bg-default`, `--bh-bg-neutral-subtle`, `--bh-border-default`, `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-subtle`, `--bh-font-family`, `--bh-font-weight-medium`, `--bh-opacity-60`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-radius-md-6`, `--bh-space-3xl-16`, `--bh-space-6xl-32`, `--bh-space-7xl-40`, `--bh-space-8xl-48`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--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`, `--elevation-button-soft` |
 | `variants` | `underline`, `segment`, `rounded` |
 <!-- registry-contract:end -->

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

@@ -1,82 +1,82 @@
-# Tag
-
-Tags identify compact metadata, filters, or removable selections.
-
-The implementation follows the Figma component at `Design system 3.0 Copy / Tag` (`188:64712`). It supports every variant in the matrix: `simple`, `dot`, `flag`, `avatar`, and `icon`; `default`, `active`, and `disabled` states with native hover and focus-visible styling; `xs`, `md`, and `lg` sizes; optional close button; LTR and RTL.
-
-## API
-
-```tsx
-<Tag
-  type="simple"
-  size="md"
-  state="default"
-  showCloseButton={false}
-  dir="ltr"
->
-  Label
-</Tag>
-```
-
-| Prop | Values | Default |
-| --- | --- | --- |
-| `type` | `simple`, `dot`, `flag`, `avatar`, `icon` | `simple` |
-| `size` | `xs`, `md`, `lg` | `md` |
-| `state` | `default`, `active`, `disabled` | `default` |
-| `showCloseButton` | `boolean` | `false` |
-| `disabled` | `boolean` | `false` |
-| `dir` | `ltr`, `rtl`, `auto` | `auto` |
-| `avatar` | `ReactNode` | initials placeholder |
-| `flag` | `ReactNode` | token-colored placeholder |
-| `icon` | `ReactNode` | plus icon |
-| `onClose` | close-button click handler | none |
-
-## Token Contract
-
-The component consumes semantic design-system tokens only:
-
-- Text and icons: `content.default`, `content.disabled`, `content.primary`, `content.onColor`, `content.muted`
-- Backgrounds: `background.default`, `background.hover`, `background.pressed`, `background.disabled`, `background.selected`, `background.danger`
-- Borders: `border.default`, `border.disabled`, `border.brand`, `border.focus`, `border.subtle`
-- Shape: `shape.control`, `shape.badge`, `shape.avatar`
-- Density: `density.controlHeight`, `density.controlPaddingX`
-
-## Pixel Rules
-
-- `xs` tags are `24px` tall and use body-xs medium text.
-- `md` tags are `28px` tall and use body-sm medium text.
-- `lg` tags are `36px` tall and use body-md medium text.
-- Simple tags use centered text and no leading slot.
-- Dot, flag, avatar, and icon tags use a `20px` leading slot; the default icon glyph is `18px`.
-- Close buttons are `16px` with a `12px` icon.
-- Focused tags use a brand border plus a solid outside focus ring.
-- Active tags use selected/brand treatment and a stronger brand border.
-- Disabled tags use disabled background, border, and content tokens.
-- RTL uses logical inline padding and inherited direction so leading media, label, and close button mirror naturally.
-
-## Install
-
-```bash
-npx banhaten add tag
-```
-
-## Examples
-
-Primary registry example: `examples/tag-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs tag` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `spacing`: Uses logical inline padding and inherited flex direction so the leading media, label, and close button mirror naturally.
-- `textDirection`: Text labels use dir="auto" for short Arabic and English tag labels.
-- `closeButton`: The close affordance is a 16px token-sized icon button using currentColor and the tag disabled state.
-
-## 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.
-
+# Tag
+
+Tags identify compact metadata, filters, or removable selections.
+
+The implementation follows the Figma component at `Design system 3.0 Copy / Tag` (`188:64712`). It supports every variant in the matrix: `simple`, `dot`, `flag`, `avatar`, and `icon`; `default`, `active`, and `disabled` states with native hover and focus-visible styling; `xs`, `md`, and `lg` sizes; optional close button; LTR and RTL.
+
+## API
+
+```tsx
+<Tag
+  type="simple"
+  size="md"
+  state="default"
+  showCloseButton={false}
+  dir="ltr"
+>
+  Label
+</Tag>
+```
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `type` | `simple`, `dot`, `flag`, `avatar`, `icon` | `simple` |
+| `size` | `xs`, `md`, `lg` | `md` |
+| `state` | `default`, `active`, `disabled` | `default` |
+| `showCloseButton` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+| `dir` | `ltr`, `rtl`, `auto` | `auto` |
+| `avatar` | `ReactNode` | initials placeholder |
+| `flag` | `ReactNode` | token-colored placeholder |
+| `icon` | `ReactNode` | plus icon |
+| `onClose` | close-button click handler | none |
+
+## Token Contract
+
+The component consumes semantic design-system tokens only:
+
+- Text and icons: `content.default`, `content.disabled`, `content.primary`, `content.onColor`, `content.muted`
+- Backgrounds: `background.default`, `background.hover`, `background.pressed`, `background.disabled`, `background.selected`, `background.danger`
+- Borders: `border.default`, `border.disabled`, `border.brand`, `border.focus`, `border.subtle`
+- Shape: `shape.control`, `shape.badge`, `shape.avatar`
+- Density: `density.controlHeight`, `density.controlPaddingX`
+
+## Pixel Rules
+
+- `xs` tags are `24px` tall and use body-xs medium text.
+- `md` tags are `28px` tall and use body-sm medium text.
+- `lg` tags are `36px` tall and use body-md medium text.
+- Simple tags use centered text and no leading slot.
+- Dot, flag, avatar, and icon tags use a `20px` leading slot; the default icon glyph is `18px`.
+- Close buttons are `16px` with a `12px` icon.
+- Focused tags use a brand border plus a solid outside focus ring.
+- Active tags use selected/brand treatment and a stronger brand border.
+- Disabled tags use disabled background, border, and content tokens.
+- RTL uses logical inline padding and inherited direction so leading media, label, and close button mirror naturally.
+
+## Install
+
+```bash
+npx banhaten add tag
+```
+
+## Examples
+
+Primary registry example: `examples/tag-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs tag` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `spacing`: Uses logical inline padding and inherited flex direction so the leading media, label, and close button mirror naturally.
+- `textDirection`: Text labels use dir="auto" for short Arabic and English tag labels.
+- `closeButton`: The close affordance is a 16px token-sized icon button using currentColor and the tag disabled state.
+
+## 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
 

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

@@ -1,52 +1,52 @@
-# Textarea
-
-Textarea is the multiline field primitive for comments, notes, descriptions, and tag-style text entry. It supports label, helper and error text, default and tags modes, placeholder, filled, disabled, and RTL states.
-
-## API
-
-```tsx
-<Textarea label="Comments" placeholder="Add context..." />
-<Textarea mode="tags" label="Tags" defaultValue="Design, System" />
-```
-
-| Prop | Values |
-| --- | --- |
-| `mode` | `default`, `tags` |
-| `state` | `placeholder`, `filled`, `disabled` |
-| `hasError` | `boolean` |
-| `label`, `helperText` | `ReactNode` |
-| `dir` | `ltr`, `rtl` |
-
-## Token Contract
-
-Textarea uses Banhaten field surface, text, label, helper, error, tag, spacing, border, radius, disabled, and focus tokens.
-
-## RTL
-
-Textarea uses `text-start`, inherited direction, and logical field layout. Labels, helper text, and tag chips mirror without physical left/right styling.
-
-## Accessibility
-
-Connect labels and helper/error text through component props. Use visible error text with `hasError` rather than color alone.
-
-## Install
-
-```bash
-npx banhaten add textarea
-```
-
-## Examples
-
-Primary registry example: `examples/textarea-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs textarea` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `textAlignment`: Uses text-start and dir="auto" so Arabic and English content align naturally.
-- `spacing`: Uses inherited direction and flex order so labels, helper icons, and tag chips mirror without physical left/right rules.
-
+# Textarea
+
+Textarea is the multiline field primitive for comments, notes, descriptions, and tag-style text entry. It supports label, helper and error text, default and tags modes, placeholder, filled, disabled, and RTL states.
+
+## API
+
+```tsx
+<Textarea label="Comments" placeholder="Add context..." />
+<Textarea mode="tags" label="Tags" defaultValue="Design, System" />
+```
+
+| Prop | Values |
+| --- | --- |
+| `mode` | `default`, `tags` |
+| `state` | `placeholder`, `filled`, `disabled` |
+| `hasError` | `boolean` |
+| `label`, `helperText` | `ReactNode` |
+| `dir` | `ltr`, `rtl` |
+
+## Token Contract
+
+Textarea uses Banhaten field surface, text, label, helper, error, tag, spacing, border, radius, disabled, and focus tokens.
+
+## RTL
+
+Textarea uses `text-start`, inherited direction, and logical field layout. Labels, helper text, and tag chips mirror without physical left/right styling.
+
+## Accessibility
+
+Connect labels and helper/error text through component props. Use visible error text with `hasError` rather than color alone.
+
+## Install
+
+```bash
+npx banhaten add textarea
+```
+
+## Examples
+
+Primary registry example: `examples/textarea-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs textarea` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `textAlignment`: Uses text-start and dir="auto" so Arabic and English content align naturally.
+- `spacing`: Uses inherited direction and flex order so labels, helper icons, and tag chips mirror without physical left/right rules.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 

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

@@ -1,85 +1,85 @@
-# Timeline
-
-Timelines show ordered progress or dated events. Use `Timeline` for a complete sequence and `TimelineItem` when a consumer needs to compose a custom layout.
-
-Figma references:
-
-- `TimelineVetical`, node `572:6768`
-- `TimeLineHorizontal`, node `584:4501`
-- `TimelineVerticalItem`, node `572:6444`
-- `TimelineHorizontalItem`, node `582:4214`
-
-## Variants
-
-| Prop | Values |
-| --- | --- |
-| `orientation` | `vertical`, `horizontal` |
-| `variant` | `default`, `icon` |
-| `state` | `finished`, `active`, `inactive` |
-| `dir` | `ltr`, `rtl` |
-
-The Figma source includes vertical timelines with seven steps and horizontal timelines with six steps. Code accepts any `steps` array.
-
-## API
-
-```tsx
-<Timeline
-  orientation="vertical"
-  variant="default"
-  dir="ltr"
-  steps={[
-    { label: "Label", caption: "Caption", date: "Mar 15. 2050", state: "finished" },
-    { label: "Label", caption: "Caption", date: "Mar 15. 2050", state: "active" },
-    { label: "Label", caption: "Caption", date: "Mar 15. 2050", state: "inactive" },
-  ]}
-/>
-```
-
-`TimelineStep` supports `label`, `caption`, `date`, `topDate`, `bottomDate`, `state`, `icon`, and visibility flags for leading/top/bottom dates, caption, connector line, and bottom padding.
-
-## Token Contract
-
-- `--bg-brand-default`: filled icon marker
-- `--bg-default`: default marker center
-- `--bg-muted`: inactive icon marker
-- `--border-brand-strong`: finished connector line
-- `--border-default`: active and inactive connector line
-- `--content-default`: labels and inactive check
-- `--content-subtle`: dates and captions
-- `--radius-full`: marker and line radius
-
-## Pixel Rules
-
-- Dates are `12px / 16px`, regular.
-- Labels are `15px / 24px`, semibold.
-- Captions are `14px / 20px`, regular.
-- Default markers reserve a `20px` box with a small circular ring.
-- Icon markers are `28px` circles with an 18px check glyph.
-- Vertical item gaps use `12px`; horizontal item body spacing uses `10px`.
-- Finished connector lines use the brand border color.
-- Active and inactive connector lines use the default border color.
-- RTL mirrors the date/content placement while preserving source step order.
-
-## Install
-
-```bash
-npx banhaten add timeline
-```
-
-## Examples
-
-Primary registry example: `examples/expanded/timeline-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs timeline` to inspect source files, install command, and examples.
-
-## 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.
-
+# Timeline
+
+Timelines show ordered progress or dated events. Use `Timeline` for a complete sequence and `TimelineItem` when a consumer needs to compose a custom layout.
+
+Figma references:
+
+- `TimelineVetical`, node `572:6768`
+- `TimeLineHorizontal`, node `584:4501`
+- `TimelineVerticalItem`, node `572:6444`
+- `TimelineHorizontalItem`, node `582:4214`
+
+## Variants
+
+| Prop | Values |
+| --- | --- |
+| `orientation` | `vertical`, `horizontal` |
+| `variant` | `default`, `icon` |
+| `state` | `finished`, `active`, `inactive` |
+| `dir` | `ltr`, `rtl` |
+
+The Figma source includes vertical timelines with seven steps and horizontal timelines with six steps. Code accepts any `steps` array.
+
+## API
+
+```tsx
+<Timeline
+  orientation="vertical"
+  variant="default"
+  dir="ltr"
+  steps={[
+    { label: "Label", caption: "Caption", date: "Mar 15. 2050", state: "finished" },
+    { label: "Label", caption: "Caption", date: "Mar 15. 2050", state: "active" },
+    { label: "Label", caption: "Caption", date: "Mar 15. 2050", state: "inactive" },
+  ]}
+/>
+```
+
+`TimelineStep` supports `label`, `caption`, `date`, `topDate`, `bottomDate`, `state`, `icon`, and visibility flags for leading/top/bottom dates, caption, connector line, and bottom padding.
+
+## Token Contract
+
+- `--bg-brand-default`: filled icon marker
+- `--bg-default`: default marker center
+- `--bg-muted`: inactive icon marker
+- `--border-brand-strong`: finished connector line
+- `--border-default`: active and inactive connector line
+- `--content-default`: labels and inactive check
+- `--content-subtle`: dates and captions
+- `--radius-full`: marker and line radius
+
+## Pixel Rules
+
+- Dates are `12px / 16px`, regular.
+- Labels are `15px / 24px`, semibold.
+- Captions are `14px / 20px`, regular.
+- Default markers reserve a `20px` box with a small circular ring.
+- Icon markers are `28px` circles with an 18px check glyph.
+- Vertical item gaps use `12px`; horizontal item body spacing uses `10px`.
+- Finished connector lines use the brand border color.
+- Active and inactive connector lines use the default border color.
+- RTL mirrors the date/content placement while preserving source step order.
+
+## Install
+
+```bash
+npx banhaten add timeline
+```
+
+## Examples
+
+Primary registry example: `examples/expanded/timeline-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs timeline` to inspect source files, install command, and examples.
+
+## 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