banhaten 0.1.2 → 0.2.0

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

@@ -0,0 +1,63 @@
+# Navigation Menu
+
+Navigation Menu wraps Radix NavigationMenu for top navigation with trigger, content, link, viewport, and indicator parts.
+
+## API
+
+```tsx
+<NavigationMenu>
+  <NavigationMenuList>
+    <NavigationMenuItem>
+      <NavigationMenuTrigger>Product</NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <NavigationMenuLink href="#">Components</NavigationMenuLink>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+  </NavigationMenuList>
+  <NavigationMenuViewport />
+</NavigationMenu>
+```
+
+## Token Contract
+
+Navigation Menu uses Banhaten ghost hover, soft active state, raised content, popover shadow, radius, and body typography tokens.
+
+## RTL
+
+The list and content inherit direction. Links use logical text alignment.
+
+## Accessibility
+
+Radix handles trigger relationships, viewport sizing, keyboard navigation, and focus.
+
+## Install
+
+```bash
+npx banhaten add navigation-menu
+```
+
+## Examples
+
+Primary registry example: `examples/navigation-menu-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs navigation-menu` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `spacing`: Triggers, links, and content use logical layout and inherited direction.
+
+<!-- registry-contract:start -->
+## Registry Contract
+
+This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
+`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
+
+| Field | Values |
+| --- | --- |
+| `supportedExports` | `components/navigation-menu.tsx: NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport` |
+| `parts` | `NavigationMenu`, `NavigationMenuList`, `NavigationMenuItem`, `NavigationMenuTrigger`, `NavigationMenuContent`, `NavigationMenuLink`, `NavigationMenuViewport`, `NavigationMenuIndicator` |
+| `registryDependencies` | None |
+| `features` | `top navigation`, `viewport`, `indicator`, `dropdown content` |
+| `tokens` | `--bh-bg-raised`, `--bh-content-default`, `--bh-content-disabled`, `--bh-interactive-ghost-hover`, `--bh-interactive-soft-default`, `--bh-radius-2xl-12`, `--bh-radius-lg-8`, `--bh-radius-sm-4`, `--bh-space-19xl-384`, `--bh-space-3xl-16`, `--bh-space-7xl-40`, `--bh-space-lg-10`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-text-body-sm-medium-font-size`, `--bh-text-body-sm-medium-font-weight`, `--bh-text-body-sm-medium-letter-spacing`, `--bh-text-body-sm-medium-line-height`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-letter-spacing`, `--bh-text-body-sm-regular-line-height`, `--bh-z-popover`, `--bh-z-raised`, `--shadow-popover` |
+<!-- registry-contract:end -->

package/docs/design-system/components/onboarding-step-list-item.md

@@ -0,0 +1,94 @@
+# Onboarding Step List Item
+
+`OnboardingStepListItem` renders one vertical progress-list row for onboarding, setup, or guided task flows. It should be composed into a list by the parent flow, which controls line visibility for first and last items.
+
+Figma reference: `OnboardingStepListItem`, node `587:27227`.
+
+## Variants
+
+The Figma component defines these variants:
+
+| State | Direction |
+| --- | --- |
+| `Finished` | LTR and RTL |
+| `Active` | LTR and RTL |
+| `inactive` | LTR and RTL |
+
+Code uses lowercase semantic state values: `finished`, `active`, and `inactive`.
+
+## API
+
+```tsx
+<OnboardingStepListItem
+  state="finished"
+  label="Label"
+  dir="ltr"
+  showLeadingLine
+  showTrailingLine
+/>
+```
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `state` | `finished`, `active`, `inactive` | `finished` |
+| `label` | `string` | `Label` |
+| `dir` | `ltr`, `rtl` | `ltr` |
+| `showLeadingLine` | `boolean` | `true` |
+| `showTrailingLine` | `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`
+- Borders: `--bh-border-brand-strong`, `--bh-border-default`
+- Content: `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-subtle`, `--bh-content-success-default`
+- Shape: `--bh-control-default`
+- Space: `--bh-space-lg-10`, `--bh-space-xl-12`
+
+## Pixel Rules
+
+- The row is `280px` wide and `40px` tall.
+- Padding is `8px 12px` with a `10px` gap between the line wrap and label.
+- Text uses Inter Medium `15px / 24px` with zero letter spacing.
+- The line wrap is `24px` square.
+- Finished uses a `20px` success check-circle icon with `2px` default connector lines.
+- Active uses a `2px x 20px` brand line, a default border, white raised fill, `8px` radius, and component shadow.
+- Inactive uses a `2px x 40px` default connector line and subtle content color.
+- RTL mirrors visual order through `dir="rtl"` and right-aligns the label.
+
+## Accessibility
+
+- Connector lines and the finished icon are decorative in this primitive and are hidden from assistive technology.
+- Parent onboarding lists should expose the overall progress semantics, current step, and completion status.
+- Keep labels as real text and avoid using this row as the only status announcement.
+
+## Install
+
+```bash
+npx banhaten add onboarding-step
+```
+
+## Examples
+
+Primary registry example: `examples/expanded/onboarding-step-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs onboarding-step` 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
+
+This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
+`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
+
+| Field | Values |
+| --- | --- |
+| `supportedExports` | `components/expanded/OnboardingStepListItem.tsx: OnboardingStepListItem` |
+| `parts` | `OnboardingStepListItem` |
+| `registryDependencies` | None |
+| `tokens` | `--bh-bg-raised`, `--bh-border-brand-strong`, `--bh-border-default`, `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-subtle`, `--bh-content-success-default`, `--bh-control-default`, `--bh-font-family`, `--bh-icon-stroke-225`, `--bh-space-17xl-288`, `--bh-space-2xl-14`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-7xl-40`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--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`, `--shadow-component-default` |
+<!-- registry-contract:end -->

package/docs/design-system/components/page-header.md

@@ -0,0 +1,98 @@
+# Page Header
+
+Page headers introduce a page or section with optional hierarchy, title metadata, actions, description, and local tabs.
+
+Figma reference: `Page Header`, node `1154:2816` in `Design system 3.0 Copy`.
+
+## API
+
+```tsx
+<PageHeader
+  title="Section Tile"
+  metaInfo="Meta info"
+  description="Section description"
+  breadcrumbs={[{ label: "Home" }, { label: "Home" }]}
+  actions={[{ label: "Button" }, { label: "Button" }]}
+  tabs={{ items: ["Tab item", "Tab item", "Tab item"] }}
+/>
+```
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `title` | `string` | `Section Tile` |
+| `metaInfo` | `string` | `Meta info` |
+| `description` | `string` | `Section description` |
+| `icon` | `ReactNode` or `false` | home icon |
+| `breadcrumbs` | `PageHeaderBreadcrumb[]` or `false` | four `Home` items |
+| `actions` | `PageHeaderAction[]` or `false` | four `Button` actions |
+| `tabs` | `PageHeaderTabs` or `false` | underline `Tabs` |
+| `dir` | `ltr` or `rtl` | `ltr` |
+
+## Structure
+
+The implementation follows the Figma hierarchy:
+
+- Breadcrumb navigation above the section body.
+- Title row with optional icon, title, and meta text.
+- Action group aligned to the end of the title row.
+- Optional body description below the title row.
+- Underline `Tabs` spanning the full header width.
+
+`PageHeader` reuses the existing `Tabs` component instead of duplicating tab behavior.
+
+## 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.
+
+- Borders: `--bh-border-default`
+- Content: `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-heading`, `--bh-content-muted`, `--bh-content-subtle`
+- Interactive: `--bh-interactive-secondary-default`
+- Shape: `--bh-control-default`
+
+## Pixel Rules
+
+- Header root is vertically padded by `20px`.
+- Breadcrumb and body text use `15px / 24px`.
+- Title uses `24px / 28px` at weight `600`.
+- Meta text uses `12px / 16px`.
+- Title row and action group are separated by `40px`.
+- Action buttons are `36px` high with an `8px` radius, subtle border, drop shadow, and inner bottom shadow.
+- Tabs use the existing `underline`, `md`, `fullWidth` tab treatment.
+
+## Accessibility
+
+- Breadcrumbs render as `<nav aria-label="Breadcrumb">` with an ordered list.
+- Mark the current breadcrumb with `current: true` so it receives `aria-current="page"`.
+- Separators are decorative and hidden from assistive technology.
+- Action items render as real buttons or anchors.
+- Focus states use the brand token and remain visible for keyboard users.
+
+## Install
+
+```bash
+npx banhaten add page-header
+```
+
+## Examples
+
+Primary registry example: `examples/expanded/page-header-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs page-header` 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
+
+This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
+`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
+
+| Field | Values |
+| --- | --- |
+| `supportedExports` | `components/expanded/PageHeader.tsx: PageHeader` |
+| `parts` | `PageHeader` |
+| `registryDependencies` | `tabs` |
+| `tokens` | `--bh-bg-raised`, `--bh-border-default`, `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-control-default`, `--bh-focus-ring-width`, `--bh-font-family`, `--bh-icon-stroke-190`, `--bh-interactive-secondary-default`, `--bh-opacity-muted`, `--bh-space-2xl-14`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-7xl-40`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-body-2xs-regular-font-size`, `--bh-text-body-2xs-regular-font-weight`, `--bh-text-body-2xs-regular-line-height`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--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-heading-md-semibold-font-size`, `--bh-text-heading-md-semibold-font-weight`, `--bh-text-heading-md-semibold-line-height`, `--shadow-button-secondary` |
+<!-- registry-contract:end -->

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

@@ -0,0 +1,71 @@
+# Pagination
+
+Pagination navigates paged result sets, tables, and long lists. It supports numeric, simple, and summary layouts, soft and ghost styles, exact control geometry, captions, RTL layout, and explicit localized messages.
+
+## API
+
+```tsx
+<Pagination page={3} pages={[1, 2, 3, "ellipsis", 12]} type="numeric" />
+<Pagination
+  dir="rtl"
+  messages={{ previous: "הקודם", next: "הבא" }}
+  page={2}
+  type="summary"
+/>
+```
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `type` | `numeric`, `simple`, `summary` | `numeric` |
+| `variant` | `soft`, `ghost` | `soft` |
+| `page` | number | `2` |
+| `pages` | page numbers, page descriptors, `ellipsis` | built-in demo sequence |
+| `messages` | partial localized message catalog | English defaults |
+| `caption`, `summary`, previous/next label and ARIA props | direct overrides | matching message value |
+
+## Token Contract
+
+Pagination uses Banhaten control height, radius, border, background, content, focus, icon, caption, and shadow tokens.
+
+## RTL
+
+Passing `dir="rtl"` mirrors previous/next directional icons with `data-rtl-flip="true"` and leaves the selected message catalog unchanged. Use `arabicPaginationMessages` or product-owned messages when the locale is Arabic.
+
+## Accessibility
+
+Wrap pagination in a navigation landmark with a descriptive label. Current page controls should expose current state, and previous/next buttons should have readable labels.
+
+## Install
+
+```bash
+npx banhaten add pagination
+```
+
+## Examples
+
+Primary registry example: `examples/pagination-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs pagination` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `messages`: Direction does not select language. English defaults are stable; pass messages for Arabic, Hebrew, Persian, Urdu, or another locale.
+- `directionalIconFlip`: Inline Figma arrow vectors use data-rtl-flip="true" so previous and next controls mirror in RTL.
+- `spacing`: Uses logical flex direction, gap, and text direction so English and Arabic captions align naturally.
+
+<!-- registry-contract:start -->
+## Registry Contract
+
+This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
+`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
+
+| Field | Values |
+| --- | --- |
+| `supportedExports` | `components/pagination.tsx: Pagination, arabicPaginationMessages, paginationControlVariants, paginationItemVariants, paginationVariants` |
+| `parts` | `Pagination` |
+| `registryDependencies` | None |
+| `tokens` | `--bh-border-brand-strong`, `--bh-content-disabled`, `--bh-icon-stroke-225`, `--bh-pagination-action-gap`, `--bh-pagination-active-bg`, `--bh-pagination-active-border`, `--bh-pagination-active-content`, `--bh-pagination-caption-content`, `--bh-pagination-caption-font-weight`, `--bh-pagination-caption-width`, `--bh-pagination-control-content`, `--bh-pagination-control-gap`, `--bh-pagination-control-ghost-bg`, `--bh-pagination-control-ghost-hover`, `--bh-pagination-control-ghost-pressed`, `--bh-pagination-control-label-padding-x`, `--bh-pagination-control-label-rtl-padding-x`, `--bh-pagination-control-soft-bg`, `--bh-pagination-control-soft-hover`, `--bh-pagination-control-soft-pressed`, `--bh-pagination-control-text-gap`, `--bh-pagination-control-text-padding-x`, `--bh-pagination-control-text-rtl-gap`, `--bh-pagination-control-text-rtl-padding-x`, `--bh-pagination-font-size`, `--bh-pagination-icon-size`, `--bh-pagination-item-size`, `--bh-pagination-label-font-weight`, `--bh-pagination-letter-spacing`, `--bh-pagination-line-height`, `--bh-pagination-numeric-width`, `--bh-pagination-page-bg`, `--bh-pagination-page-content`, `--bh-pagination-page-gap`, `--bh-pagination-page-hover`, `--bh-pagination-page-pressed`, `--bh-pagination-radius`, `--bh-pagination-root-gap`, `--bh-pagination-simple-width`, `--bh-space-md-8`, `--shadow-pagination-active`, `--shadow-pagination-control`, `--shadow-pagination-focus` |
+| `types` | `numeric`, `simple`, `summary` |
+| `variants` | `soft`, `ghost` |
+<!-- registry-contract:end -->

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

@@ -0,0 +1,77 @@
+# Popover
+
+Popover presents contextual controls, filters, actions, settings, and short help content near a trigger. It supports controlled and uncontrolled state, click, focus, and hover-capable triggers, positioned content, optional arrow, alignment, offsets, sizes, close affordance, and RTL-safe composition.
+
+## API
+
+```tsx
+<Popover>
+  <PopoverTrigger>Filters</PopoverTrigger>
+  <PopoverContent side="bottom" align="start">
+    <PopoverHeader>
+      <PopoverTitle>Filters</PopoverTitle>
+      <PopoverClose />
+    </PopoverHeader>
+    <PopoverBody>Filter controls go here.</PopoverBody>
+  </PopoverContent>
+</Popover>
+```
+
+| Prop | Values |
+| --- | --- |
+| `open`, `defaultOpen`, `onOpenChange` | controlled or uncontrolled state |
+| `side` | `top`, `right`, `bottom`, `left` |
+| `align` | `start`, `center`, `end` |
+| `size` | `sm`, `md`, `lg`, `auto` |
+| `offset` | `tight`, `default`, `loose` |
+| `showArrow` | `boolean` |
+
+## Token Contract
+
+Popover uses Banhaten popover width, padding, arrow, offset, surface, border, radius, shadow, trigger, typography, and z-index tokens.
+
+## RTL
+
+Top and bottom alignment use logical start/end behavior. Title and description slots use `dir="auto"` and product content can inherit the nearest direction.
+
+## Accessibility
+
+Use popovers for non-modal contextual content. Use Dialog or Sheet for workflows that require focus trapping or stronger dismissal semantics.
+
+## Install
+
+```bash
+npx banhaten add popover
+```
+
+## Examples
+
+Primary registry example: `examples/popover-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs popover` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `alignment`: Top and bottom alignments use logical start/end so the panel edge and arrow align correctly in LTR and RTL.
+- `spacing`: Uses logical layout and Banhaten spacing tokens for headers, bodies, footers, arrows, and trigger gaps.
+- `textDirection`: Title and description slots use dir="auto" while product content can inherit the nearest direction.
+
+<!-- registry-contract:start -->
+## Registry Contract
+
+This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
+`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
+
+| Field | Values |
+| --- | --- |
+| `supportedExports` | `components/popover.tsx: Popover, PopoverAnchor, PopoverBody, PopoverClose, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverRoot, PopoverTitle, PopoverTrigger, popoverContentVariants` |
+| `parts` | `Popover`, `PopoverRoot`, `PopoverAnchor`, `PopoverTrigger`, `PopoverContent`, `PopoverHeader`, `PopoverTitle`, `PopoverDescription`, `PopoverBody`, `PopoverFooter`, `PopoverClose` |
+| `registryDependencies` | None |
+| `alignments` | `start`, `center`, `end` |
+| `features` | `filter popover`, `settings popover`, `actions popover`, `focus trigger`, `text link trigger`, `icon button trigger`, `optional arrow`, `RTL` |
+| `offsets` | `tight`, `default`, `loose` |
+| `sides` | `top`, `right`, `bottom`, `left` |
+| `sizes` | `sm`, `md`, `lg`, `auto` |
+| `tokens` | `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-control-default`, `--bh-font-family`, `--bh-icon-stroke-200`, `--bh-interactive-ghost-hover`, `--bh-popover-arrow-depth`, `--bh-popover-arrow-width`, `--bh-popover-bg`, `--bh-popover-body-gap`, `--bh-popover-border`, `--bh-popover-close-icon-size`, `--bh-popover-close-size`, `--bh-popover-content-gap`, `--bh-popover-footer-gap`, `--bh-popover-header-gap`, `--bh-popover-lg-width`, `--bh-popover-max-width`, `--bh-popover-md-width`, `--bh-popover-offset`, `--bh-popover-offset-default`, `--bh-popover-offset-loose`, `--bh-popover-offset-tight`, `--bh-popover-padding`, `--bh-popover-radius`, `--bh-popover-sm-width`, `--bh-popover-trigger-gap`, `--bh-radius-full`, `--bh-text-base-letter-spacing`, `--bh-text-body-sm-medium-font-size`, `--bh-text-body-sm-medium-font-weight`, `--bh-text-body-sm-medium-letter-spacing`, `--bh-text-body-sm-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`, `--bh-z-popover`, `--shadow-button-focus`, `--shadow-popover` |
+<!-- registry-contract:end -->

package/docs/design-system/components/progress-slider.md

@@ -0,0 +1,66 @@
+# Progress Slider
+
+Progress Slider is an adjustable, start-anchored progress control. It is built on Radix Slider and keeps the filled surface growing from the logical start edge while the grip handle remains at the active value edge.
+
+## API
+
+```tsx
+<ProgressSlider value={[45]} aria-label="Upload progress" />
+<ProgressSlider defaultValue={[70]} tone="success" showTicks />
+```
+
+| Prop | Values |
+| --- | --- |
+| `value`, `defaultValue` | Radix slider value array |
+| `size` | `default`, `lg` |
+| `tone` | `brand`, `neutral`, `success`, `warning`, `danger` |
+| `disabled` | `boolean` |
+| `showTicks` | `boolean` |
+
+## Token Contract
+
+Progress Slider uses Banhaten slider, progress, semantic tone, track, handle, pill radius, focus, and disabled tokens. Keep tone styling semantic so alert and status palettes can theme consistently.
+
+## RTL
+
+Radix receives the inherited `dir` attribute for keyboard and value direction. The fill stays anchored to the logical start edge in both LTR and RTL.
+
+## Accessibility
+
+Provide an accessible name through `aria-label` or `aria-labelledby`. Use `aria-valuetext` when the numeric value needs domain-specific phrasing.
+
+## Install
+
+```bash
+npx banhaten add progress-slider
+```
+
+## Examples
+
+Primary registry example: `examples/progress-slider-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs progress-slider` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `valueDirection`: Radix Slider handles direction and keyboard behavior through the inherited dir attribute; the fill stays anchored to the logical start edge.
+- `spacing`: Uses tokenized pill geometry and logical direction through Radix.
+
+<!-- registry-contract:start -->
+## Registry Contract
+
+This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
+`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
+
+| Field | Values |
+| --- | --- |
+| `supportedExports` | `components/progress-slider.tsx: ProgressSlider, progressSliderVariants` |
+| `parts` | `ProgressSlider` |
+| `registryDependencies` | None |
+| `features` | `start-anchored fill`, `grip handle`, `ticks` |
+| `sizes` | `default`, `lg` |
+| `states` | `default`, `disabled` |
+| `tokens` | `--bh-bg-brand-soft`, `--bh-bg-brand-subtle`, `--bh-bg-danger-soft`, `--bh-bg-danger-subtle`, `--bh-bg-neutral-soft`, `--bh-bg-neutral-subtle`, `--bh-bg-success-soft`, `--bh-bg-success-subtle`, `--bh-bg-warning-soft`, `--bh-bg-warning-subtle`, `--bh-border-brand-strong`, `--bh-border-brand-subtle`, `--bh-border-danger-strong`, `--bh-border-danger-subtle`, `--bh-border-strong`, `--bh-border-subtle`, `--bh-border-success-strong`, `--bh-border-success-subtle`, `--bh-border-warning-strong`, `--bh-border-warning-subtle`, `--bh-content-disabled`, `--bh-opacity-60`, `--bh-progress-slider-border-width-current`, `--bh-progress-slider-border-width-lg`, `--bh-progress-slider-border-width-md`, `--bh-progress-slider-fill-bg`, `--bh-progress-slider-fill-border`, `--bh-progress-slider-grip-bg`, `--bh-progress-slider-grip-height-current`, `--bh-progress-slider-grip-height-lg`, `--bh-progress-slider-grip-height-md`, `--bh-progress-slider-grip-width`, `--bh-progress-slider-handle-width-current`, `--bh-progress-slider-handle-width-lg`, `--bh-progress-slider-handle-width-md`, `--bh-progress-slider-height-current`, `--bh-progress-slider-height-lg`, `--bh-progress-slider-height-md`, `--bh-progress-slider-radius`, `--bh-progress-slider-tick-bg`, `--bh-progress-slider-tick-gap`, `--bh-progress-slider-tick-padding`, `--bh-progress-slider-tick-size`, `--bh-progress-slider-track-bg`, `--bh-progress-slider-width-current`, `--bh-progress-slider-width-lg`, `--bh-progress-slider-width-md`, `--bh-radius-full`, `--bh-z-overlay`, `--bh-z-popover`, `--bh-z-raised`, `--shadow-progress-slider-thumb-focus` |
+| `tones` | `brand`, `neutral`, `success`, `warning`, `danger` |
+<!-- registry-contract:end -->

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

@@ -0,0 +1,92 @@
+# Progress
+
+Progress is a read-only progress meter for upload, setup, usage, and completion states. It supports top label, bottom label, helper-only, and inline indicator layouts, two track sizes, helper text, optional label text, an information icon, a spinner indicator, and inherited LTR/RTL direction.
+
+The implementation follows the Figma progress components at `Design system 3.0 Copy / Progress` (`177:7992`) and `Progress Label` (`177:8141`).
+
+## API
+
+```tsx
+<Progress
+  aria-label="Upload progress"
+  helperText="Preparing the final file"
+  label="Upload"
+  optional="(Optional)"
+  showInfo
+  showSpinner
+  value={40}
+/>
+```
+
+## Variants
+
+| Prop | Values |
+| --- | --- |
+| `size` | `lg`, `sm` |
+| `labelPosition` | `top`, `bottom`, `none`, `inline` |
+| `value` | number clamped between `min` and `max` |
+| `showIndicator` | `boolean` |
+| `showInfo` | `boolean` |
+| `showSpinner` | `boolean` |
+
+## Tokens
+
+Progress uses existing Banhaten tokens only:
+
+| Part | Token |
+| --- | --- |
+| Fill | `--bh-interactive-indicator-default` |
+| Track | `--bh-bg-neutral-soft` |
+| Radius | `--bh-radius-full` |
+| Label | `--bh-text-body-xs-medium-*`, `--bh-content-default` |
+| Optional and indicator | `--bh-text-body-xs-regular-*`, `--bh-text-body-2xs-regular-*`, `--bh-content-subtle` |
+| Track height | `--bh-space-md-8`, `--bh-space-xs-4` |
+
+## RTL
+
+Progress inherits `dir` from its parent. The fill is anchored to the logical start edge, so LTR fills from the left and RTL fills from the right. Text nodes use `dir="auto"` and tokenized body styles.
+
+## Install
+
+```bash
+npx banhaten add progress
+```
+
+## Examples
+
+Primary registry example: `examples/progress-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs progress` 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/progress.tsx`.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `valueDirection`: The fill is anchored with logical start positioning, so LTR fills from left and RTL fills from right.
+- `spacing`: Label, optional text, indicator, and helper copy use inherited direction, logical text alignment, and tokenized gaps.
+
+## 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
+
+This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
+`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
+
+| Field | Values |
+| --- | --- |
+| `supportedExports` | `components/progress.tsx: Progress, progressTrackVariants, progressVariants` |
+| `parts` | `Progress` |
+| `registryDependencies` | None |
+| `features` | `progressbar semantics`, `helper text`, `optional label text`, `info icon`, `spinner indicator`, `logical start fill` |
+| `labelPositions` | `top`, `bottom`, `none`, `inline` |
+| `sizes` | `sm`, `lg` |
+| `tokens` | `--bh-bg-neutral-soft`, `--bh-content-default`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-interactive-indicator-default`, `--bh-progress-gap`, `--bh-progress-indicator-size`, `--bh-progress-track-height-current`, `--bh-radius-full`, `--bh-space-3xl-16`, `--bh-space-md-8`, `--bh-space-sm-6`, `--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-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` |
+<!-- registry-contract:end -->

package/docs/design-system/components/radio-card.md

@@ -0,0 +1,65 @@
+# Radio Card
+
+Radio Card is a Figma-matched option card for richer single-choice selections. It supports icon, payment, avatar, company, support-label, icon-radio-left, icon-radio-right, and label-only layouts across default, active, disabled, LTR, and RTL states.
+
+## API
+
+```tsx
+<RadioCard
+  title="Business"
+  description="For teams and advanced permissions."
+  type="with-icon"
+/>
+```
+
+| Prop | Values |
+| --- | --- |
+| `type` | `with-icon`, `icon-radio-right`, `payment`, `with-avatar`, `company-icon`, `icon-radio-left`, `radio-label` |
+| `state` | `default`, `active`, `disabled` |
+| `dir` | `ltr`, `rtl` |
+
+## Token Contract
+
+Radio Card consumes Banhaten card spacing, border, radius, shadow, typography, radio-control, hover, active, disabled, and semantic content tokens.
+
+## RTL
+
+Radio Card follows the explicit Figma RTL ordering for each card type. Text nodes render in RTL and right alignment where the variant requires physical RTL composition.
+
+## Accessibility
+
+Use Radio Card inside a semantic radio group or connect it to a native radio input in product code. Do not rely on the visual active state alone for form submission.
+
+## Install
+
+```bash
+npx banhaten add radio-card
+```
+
+## Examples
+
+Primary registry example: `examples/radio-card-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs radio-card` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: false
+- `layout`: Uses the explicit Figma RTL physical order while text nodes use RTL direction and right alignment.
+- `spacing`: Company icon and icon-radio-left RTL variants use the Figma 12px card gap; other variants use the 10px card gap.
+
+<!-- registry-contract:start -->
+## Registry Contract
+
+This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
+`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
+
+| Field | Values |
+| --- | --- |
+| `supportedExports` | `components/radio-card.tsx: RadioCard, radioCardVariants` |
+| `parts` | `RadioCard` |
+| `registryDependencies` | None |
+| `states` | `default`, `active`, `disabled` |
+| `tokens` | `--bh-bg-accent-blue-soft`, `--bh-bg-accent-purple-soft`, `--bh-bg-always-white`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-bg-raised-hover`, `--bh-border-brand-strong`, `--bh-border-default`, `--bh-border-disabled`, `--bh-border-input`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-icon-stroke-180`, `--bh-icon-stroke-200`, `--bh-interactive-radiobutton-default`, `--bh-opacity-disabled-media`, `--bh-radio-card-bg`, `--bh-radio-card-border`, `--bh-radio-card-border-width`, `--bh-radio-card-border-width-active`, `--bh-radio-card-company-mark-color`, `--bh-radio-card-payment-height`, `--bh-radio-card-payment-logo-color`, `--bh-radio-card-payment-logo-height`, `--bh-radio-card-payment-logo-width`, `--bh-radio-card-payment-width`, `--bh-radio-card-width`, `--bh-radio-control-border`, `--bh-radius-full`, `--bh-radius-md-6`, `--bh-radius-xl-10`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-7xl-40`, `--bh-space-lg-10`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--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-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-letter-spacing`, `--bh-text-body-sm-regular-line-height`, `--shadow-component-default`, `--shadow-radio-card`, `--shadow-radio-card-current`, `--shadow-radio-card-disabled`, `--shadow-radio-control` |
+| `types` | `with-icon`, `icon-radio-right`, `payment`, `with-avatar`, `company-icon`, `icon-radio-left`, `radio-label` |
+<!-- registry-contract:end -->