banhaten 0.5.0 → 0.6.0

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

@@ -1,55 +1,55 @@
-# Accordion
-
-Accordion is the disclosure primitive for grouped details, settings, FAQs, and compact content sections. It is backed by Radix Accordion and supports single or multiple expansion, size variants, visual treatments, animation, and RTL-safe copy.
-
-## API
-
-```tsx
-<Accordion type="single" collapsible>
-  <AccordionItem value="billing">
-    <AccordionTrigger>Billing</AccordionTrigger>
-    <AccordionContent>Invoice and payment details.</AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-| Prop | Values | Default |
-| --- | --- | --- |
-| `variant` | `default`, `bordered`, `cards`, `soft` | `default` |
-| `size` | `sm`, `default`, `lg` | `default` |
-| `type` | Radix `single`, `multiple` | required |
-| `collapsible` | `boolean` | Radix default |
-
-## Token Contract
-
-Accordion uses Banhaten spacing, border, radius, content, interactive, typography, and animation tokens. Avoid raw colors or pixel values in local variants.
-
-## RTL
-
-Accordion inherits direction from its parent. Triggers and content use logical spacing and `text-start`; text labels use `dir="auto"` where the component renders string copy.
-
-## Accessibility
-
-Radix provides button semantics, `aria-expanded`, roving state, and keyboard behavior. Keep trigger content concise and do not put nested interactive controls inside `AccordionTrigger`.
-
-## Install
-
-```bash
-npx banhaten add accordion
-```
-
-## Examples
-
-Primary registry example: `examples/accordion-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs accordion` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `textAlignment`: Uses text-start and dir="auto" so Arabic and English copy align and punctuate naturally.
-- `spacing`: Uses gap and logical inherited direction rather than physical left/right spacing.
-
+# Accordion
+
+Accordion is the disclosure primitive for grouped details, settings, FAQs, and compact content sections. It is backed by Radix Accordion and supports single or multiple expansion, size variants, visual treatments, animation, and RTL-safe copy.
+
+## API
+
+```tsx
+<Accordion type="single" collapsible>
+  <AccordionItem value="billing">
+    <AccordionTrigger>Billing</AccordionTrigger>
+    <AccordionContent>Invoice and payment details.</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `variant` | `default`, `bordered`, `cards`, `soft` | `default` |
+| `size` | `sm`, `default`, `lg` | `default` |
+| `type` | Radix `single`, `multiple` | required |
+| `collapsible` | `boolean` | Radix default |
+
+## Token Contract
+
+Accordion uses Banhaten spacing, border, radius, content, interactive, typography, and animation tokens. Avoid raw colors or pixel values in local variants.
+
+## RTL
+
+Accordion inherits direction from its parent. Triggers and content use logical spacing and `text-start`; text labels use `dir="auto"` where the component renders string copy.
+
+## Accessibility
+
+Radix provides button semantics, `aria-expanded`, roving state, and keyboard behavior. Keep trigger content concise and do not put nested interactive controls inside `AccordionTrigger`.
+
+## Install
+
+```bash
+npx banhaten add accordion
+```
+
+## Examples
+
+Primary registry example: `examples/accordion-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs accordion` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `textAlignment`: Uses text-start and dir="auto" so Arabic and English copy align and punctuate naturally.
+- `spacing`: Uses gap and logical inherited direction rather than physical left/right spacing.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 

package/docs/design-system/components/activity-feed.md

@@ -1,96 +1,96 @@
-# Activity Feed
-
-`ActivityFeed` renders a vertical timeline of activity items with avatars, status dots, captions or slot content, timestamps, and action buttons.
-
-Figma reference: `Design system 3.0 Copy / ActivityFeed`, component set node `587:19445`.
-
-## Variants
-
-The Figma component defines these top-level variants:
-
-| Direction | Node |
-| --- | --- |
-| LTR | `587:19381` |
-| RTL | `587:19711` |
-
-`ActivityFeedItem` also supports `caption` and `slot` item types through the `type` prop.
-
-## API
-
-```tsx
-<ActivityFeed
-  dir="ltr"
-  items={[
-    {
-      label: "Label",
-      supportText: "Support Text",
-      link: "#Link",
-      caption: "Caption text",
-      timestamp: "Mar 15. 2050",
-      type: "caption",
-    },
-  ]}
-/>
-```
-
-| Prop | Values | Default |
-| --- | --- | --- |
-| `dir` | `ltr`, `rtl` | `ltr` |
-| `items` | `ActivityFeedItemProps[]` | ten caption items |
-| `avatarSrc` | `string` | local Figma avatar asset |
-| `type` | `caption`, `slot` | `caption` |
-| `hasStatus` | `boolean` | `true` |
-| `hasActionButtons` | `boolean` | `true` |
-| `hasTwoActionButtons` | `boolean` | `true` |
-| `showLine` | `boolean` | `true` |
-| `showPaddingBottom` | `boolean` | `true` |
-
-## Token Contract
-
-The component consumes Banhaten semantic tokens and component aliases. Do not hard-code Figma fallback literals in component source; promote any Figma value into its owned `tokens/source/` fragment as a `--bh-*` token or alias first.
-
-- Backgrounds: `--bh-bg-raised`, `--bh-bg-success-default`
-- Borders: `--bh-border-default`, `--bh-border-subtle`
-- Content: `--bh-content-default`, `--bh-content-link`, `--bh-content-on-brand`, `--bh-content-subtle`
-- Interactive: `--bh-interactive-brand-default`, `--bh-interactive-secondary-default`
-- Shape: `--bh-radius-full`, `--bh-radius-sm-4`, `--bh-control-default`
-- Space: `--bh-space-xxs-2`, `--bh-space-xs-4`, `--bh-space-md-8`, `--bh-space-lg-10`, `--bh-space-xl-12`
-
-## Pixel Rules
-
-- Feed width is `600px`.
-- Items use a `12px` gap between the indicator rail and content.
-- Avatar is `32px` square with a full radius and subtle border.
-- The status dot renders in a `16px` box with a `6px` success fill.
-- Body text is Inter `15px / 24px`; timestamps are `14px / 20px`.
-- Captions use `12px` padding, subtle border, white raised fill, and `4px` radius.
-- Slot content is `76px` high with purple dashed border and subtle purple fill.
-- Actions use `8px` top padding, `8px` button gap, and `36px` tall buttons.
-- The repeated-item default uses a `22px` decorative bottom spacer so ten items fit the `2000px` Figma feed frame.
-- RTL mirrors the avatar rail to the right and right-aligns text content.
-
-## Accessibility
-
-- The feed uses a labelled `section`; provide `ariaLabel` when the surrounding context is not explicit.
-- Status dots and connector lines are decorative. Use item copy or parent-level announcements for meaningful state.
-- Action buttons are real `button` or `a` elements and support `ariaLabel`, `disabled`, `href`, and `onClick`.
-
-## Install
-
-```bash
-npx banhaten add activity-feed
-```
-
-## Examples
-
-Primary registry example: `examples/expanded/activity-feed-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs activity-feed` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-This component has no special RTL contract beyond inherited document direction and logical spacing.
-
+# Activity Feed
+
+`ActivityFeed` renders a vertical timeline of activity items with avatars, status dots, captions or slot content, timestamps, and action buttons.
+
+Figma reference: `Design system 3.0 Copy / ActivityFeed`, component set node `587:19445`.
+
+## Variants
+
+The Figma component defines these top-level variants:
+
+| Direction | Node |
+| --- | --- |
+| LTR | `587:19381` |
+| RTL | `587:19711` |
+
+`ActivityFeedItem` also supports `caption` and `slot` item types through the `type` prop.
+
+## API
+
+```tsx
+<ActivityFeed
+  dir="ltr"
+  items={[
+    {
+      label: "Label",
+      supportText: "Support Text",
+      link: "#Link",
+      caption: "Caption text",
+      timestamp: "Mar 15. 2050",
+      type: "caption",
+    },
+  ]}
+/>
+```
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `dir` | `ltr`, `rtl` | `ltr` |
+| `items` | `ActivityFeedItemProps[]` | ten caption items |
+| `avatarSrc` | `string` | local Figma avatar asset |
+| `type` | `caption`, `slot` | `caption` |
+| `hasStatus` | `boolean` | `true` |
+| `hasActionButtons` | `boolean` | `true` |
+| `hasTwoActionButtons` | `boolean` | `true` |
+| `showLine` | `boolean` | `true` |
+| `showPaddingBottom` | `boolean` | `true` |
+
+## Token Contract
+
+The component consumes Banhaten semantic tokens and component aliases. Do not hard-code Figma fallback literals in component source; promote any Figma value into its owned `tokens/source/` fragment as a `--bh-*` token or alias first.
+
+- Backgrounds: `--bh-bg-raised`, `--bh-bg-success-default`
+- Borders: `--bh-border-default`, `--bh-border-subtle`
+- Content: `--bh-content-default`, `--bh-content-link`, `--bh-content-on-brand`, `--bh-content-subtle`
+- Interactive: `--bh-interactive-brand-default`, `--bh-interactive-secondary-default`
+- Shape: `--bh-radius-full`, `--bh-radius-sm-4`, `--bh-control-default`
+- Space: `--bh-space-xxs-2`, `--bh-space-xs-4`, `--bh-space-md-8`, `--bh-space-lg-10`, `--bh-space-xl-12`
+
+## Pixel Rules
+
+- Feed width is `600px`.
+- Items use a `12px` gap between the indicator rail and content.
+- Avatar is `32px` square with a full radius and subtle border.
+- The status dot renders in a `16px` box with a `6px` success fill.
+- Body text is Inter `15px / 24px`; timestamps are `14px / 20px`.
+- Captions use `12px` padding, subtle border, white raised fill, and `4px` radius.
+- Slot content is `76px` high with purple dashed border and subtle purple fill.
+- Actions use `8px` top padding, `8px` button gap, and `36px` tall buttons.
+- The repeated-item default uses a `22px` decorative bottom spacer so ten items fit the `2000px` Figma feed frame.
+- RTL mirrors the avatar rail to the right and right-aligns text content.
+
+## Accessibility
+
+- The feed uses a labelled `section`; provide `ariaLabel` when the surrounding context is not explicit.
+- Status dots and connector lines are decorative. Use item copy or parent-level announcements for meaningful state.
+- Action buttons are real `button` or `a` elements and support `ariaLabel`, `disabled`, `href`, and `onClick`.
+
+## Install
+
+```bash
+npx banhaten add activity-feed
+```
+
+## Examples
+
+Primary registry example: `examples/expanded/activity-feed-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs activity-feed` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+This component has no special RTL contract beyond inherited document direction and logical spacing.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 

package/docs/design-system/components/activity-heatmap.md

@@ -1,59 +1,59 @@
-# Activity Heatmap
-
-`ActivityHeatmap` visualizes activity as seven-day week columns with five intensity levels. It is domain-neutral: contribution totals, period controls, headings, and product-specific copy belong to the surrounding composition.
-
-## API
-
-```tsx
-import {
-  ActivityHeatmap,
-  type ActivityHeatmapItem,
-} from "@/components/ui/expanded/ActivityHeatmap"
-
-const items: ActivityHeatmapItem[] = activity.map((level, index) => ({
-  id: String(index),
-  label: `Day ${index + 1}, activity level ${level} of 4`,
-  level,
-}))
-
-<ActivityHeatmap
-  ariaLabel="Weekly activity over the last 39 weeks"
-  items={items}
-/>
-```
-
-Items are supplied in column-major order: the first seven values make the first week, the next seven make the second week, and so on. `level` accepts `0`, `1`, `2`, `3`, or `4`.
-
-## Token Contract
-
-The component introduces no new design tokens and contains no raw visual values. Its complete visual contract is composed from existing Banhaten tokens:
-
-- Cell size: `--bh-space-3xl-16`
-- Gap: `--bh-space-xs-4`
-- Radius: `--bh-radius-sm-4`
-- Empty level: `--bh-bg-neutral-medium`
-- Activity levels: `--bh-bg-accent-purple-subtle`, `--bh-bg-accent-purple-soft`, `--bh-bg-accent-purple-default`, `--bh-content-accent-purple-strong`
-
-## RTL Rules
-
-Set `dir="rtl"` or inherit an RTL direction boundary to place the first supplied week at the logical start edge. Item order is never mutated in JavaScript.
-
-## Accessibility
-
-The heatmap exposes one image-style accessible summary through `ariaLabel`, avoiding hundreds of repetitive focus stops. Give each item a concise `label` to provide a native pointer tooltip. If users must inspect or act on individual days, pair the heatmap with an accessible table or list rather than turning every cell into a button.
-
-## Install
-
-```bash
-npx banhaten add activity-heatmap
-```
-
-## Examples
-
-Primary registry example: `examples/expanded/activity-heatmap-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs activity-heatmap` to inspect source files, installation, and examples.
-
+# Activity Heatmap
+
+`ActivityHeatmap` visualizes activity as seven-day week columns with five intensity levels. It is domain-neutral: contribution totals, period controls, headings, and product-specific copy belong to the surrounding composition.
+
+## API
+
+```tsx
+import {
+  ActivityHeatmap,
+  type ActivityHeatmapItem,
+} from "@/components/ui/expanded/ActivityHeatmap"
+
+const items: ActivityHeatmapItem[] = activity.map((level, index) => ({
+  id: String(index),
+  label: `Day ${index + 1}, activity level ${level} of 4`,
+  level,
+}))
+
+<ActivityHeatmap
+  ariaLabel="Weekly activity over the last 39 weeks"
+  items={items}
+/>
+```
+
+Items are supplied in column-major order: the first seven values make the first week, the next seven make the second week, and so on. `level` accepts `0`, `1`, `2`, `3`, or `4`.
+
+## Token Contract
+
+The component introduces no new design tokens and contains no raw visual values. Its complete visual contract is composed from existing Banhaten tokens:
+
+- Cell size: `--bh-space-3xl-16`
+- Gap: `--bh-space-xs-4`
+- Radius: `--bh-radius-sm-4`
+- Empty level: `--bh-bg-neutral-medium`
+- Activity levels: `--bh-bg-accent-purple-subtle`, `--bh-bg-accent-purple-soft`, `--bh-bg-accent-purple-default`, `--bh-content-accent-purple-strong`
+
+## RTL Rules
+
+Set `dir="rtl"` or inherit an RTL direction boundary to place the first supplied week at the logical start edge. Item order is never mutated in JavaScript.
+
+## Accessibility
+
+The heatmap exposes one image-style accessible summary through `ariaLabel`, avoiding hundreds of repetitive focus stops. Give each item a concise `label` to provide a native pointer tooltip. If users must inspect or act on individual days, pair the heatmap with an accessible table or list rather than turning every cell into a button.
+
+## Install
+
+```bash
+npx banhaten add activity-heatmap
+```
+
+## Examples
+
+Primary registry example: `examples/expanded/activity-heatmap-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs activity-heatmap` to inspect source files, installation, and examples.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 

package/docs/design-system/components/alert-dialog.md

@@ -1,74 +1,74 @@
-# Alert Dialog
-
-Alert Dialog is the destructive or consequential confirmation primitive. It is backed by Radix AlertDialog so focus, Escape behavior, outside interaction, and alert-dialog semantics are handled by the correct primitive.
-
-## API
-
-```tsx
-<AlertDialog>
-  <AlertDialogTrigger asChild>
-    <Button variant="danger">Delete project</Button>
-  </AlertDialogTrigger>
-  <AlertDialogContent>
-    <AlertDialogHeader>
-      <AlertDialogIcon intent="danger" />
-      <AlertDialogTitle>Delete project?</AlertDialogTitle>
-    </AlertDialogHeader>
-    <AlertDialogBody>
-      <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
-    </AlertDialogBody>
-    <AlertDialogFooter>
-      <AlertDialogCancel>Cancel</AlertDialogCancel>
-      <AlertDialogAction>Delete project</AlertDialogAction>
-    </AlertDialogFooter>
-  </AlertDialogContent>
-</AlertDialog>
-```
-
-| Part | Purpose |
-| --- | --- |
-| `AlertDialog`, `AlertDialogTrigger`, `AlertDialogPortal` | Radix AlertDialog shell |
-| `AlertDialogOverlay`, `AlertDialogContent` | modal alert surface |
-| `AlertDialogHeader`, `AlertDialogBody`, `AlertDialogFooter` | layout regions |
-| `AlertDialogTitle`, `AlertDialogDescription`, `AlertDialogIcon` | accessible warning copy |
-| `AlertDialogCancel`, `AlertDialogAction` | safe cancel and confirm actions |
-
-| Prop | Values |
-| --- | --- |
-| `size` | `sm`, `default`, `lg` |
-| `intent` | `default`, `warning`, `danger` |
-
-## Token Contract
-
-Alert Dialog uses Banhaten raised surface, backdrop, border, radius, shadow, semantic intent, body typography, focus, and button tokens.
-
-## RTL
-
-The surface inherits direction. Title and description use `dir="auto"` and action layout uses logical flex order.
-
-## Accessibility
-
-Use Alert Dialog for destructive or irreversible choices. Focus should land on the cancel action by default when you build higher-level confirmations. `ConfirmModal` is wired on top of this alert-dialog primitive for the constrained confirmation pattern.
-
-## Install
-
-```bash
-npx banhaten add alert-dialog
-```
-
-## Examples
-
-Primary registry example: `examples/alert-dialog-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs alert-dialog` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `textDirection`: Title and description use dir="auto" for Arabic and English copy.
-- `spacing`: Header, body, and footer use logical layout and Banhaten spacing tokens so action order and copy mirror naturally.
-- `semantics`: Radix AlertDialog provides the modal alert role, focus trap, and safe cancellation behavior.
-
+# Alert Dialog
+
+Alert Dialog is the destructive or consequential confirmation primitive. It is backed by Radix AlertDialog so focus, Escape behavior, outside interaction, and alert-dialog semantics are handled by the correct primitive.
+
+## API
+
+```tsx
+<AlertDialog>
+  <AlertDialogTrigger asChild>
+    <Button variant="danger">Delete project</Button>
+  </AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogIcon intent="danger" />
+      <AlertDialogTitle>Delete project?</AlertDialogTitle>
+    </AlertDialogHeader>
+    <AlertDialogBody>
+      <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
+    </AlertDialogBody>
+    <AlertDialogFooter>
+      <AlertDialogCancel>Cancel</AlertDialogCancel>
+      <AlertDialogAction>Delete project</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>
+```
+
+| Part | Purpose |
+| --- | --- |
+| `AlertDialog`, `AlertDialogTrigger`, `AlertDialogPortal` | Radix AlertDialog shell |
+| `AlertDialogOverlay`, `AlertDialogContent` | modal alert surface |
+| `AlertDialogHeader`, `AlertDialogBody`, `AlertDialogFooter` | layout regions |
+| `AlertDialogTitle`, `AlertDialogDescription`, `AlertDialogIcon` | accessible warning copy |
+| `AlertDialogCancel`, `AlertDialogAction` | safe cancel and confirm actions |
+
+| Prop | Values |
+| --- | --- |
+| `size` | `sm`, `default`, `lg` |
+| `intent` | `default`, `warning`, `danger` |
+
+## Token Contract
+
+Alert Dialog uses Banhaten raised surface, backdrop, border, radius, shadow, semantic intent, body typography, focus, and button tokens.
+
+## RTL
+
+The surface inherits direction. Title and description use `dir="auto"` and action layout uses logical flex order.
+
+## Accessibility
+
+Use Alert Dialog for destructive or irreversible choices. Focus should land on the cancel action by default when you build higher-level confirmations. `ConfirmModal` is wired on top of this alert-dialog primitive for the constrained confirmation pattern.
+
+## Install
+
+```bash
+npx banhaten add alert-dialog
+```
+
+## Examples
+
+Primary registry example: `examples/alert-dialog-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs alert-dialog` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `textDirection`: Title and description use dir="auto" for Arabic and English copy.
+- `spacing`: Header, body, and footer use logical layout and Banhaten spacing tokens so action order and copy mirror naturally.
+- `semantics`: Radix AlertDialog provides the modal alert role, focus trap, and safe cancellation behavior.
+
 <!-- registry-contract:start -->
 ## Registry Contract