banhaten 0.1.3 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +45 -0
- package/CONTRIBUTING.md +44 -0
- package/README.md +65 -13
- package/SECURITY.md +15 -0
- package/banhaten.config.example.json +0 -2
- package/docs/design-system/README.md +9 -0
- package/docs/design-system/adoption-quality-remediation.md +87 -0
- package/docs/design-system/agent-usage.md +13 -0
- package/docs/design-system/appearance-presets.md +6 -1
- package/docs/design-system/component-docs-pattern.md +81 -0
- package/docs/design-system/component-token-consistency-audit.md +13 -3
- package/docs/design-system/components/README.md +3 -2
- package/docs/design-system/components/accordion.md +16 -0
- package/docs/design-system/components/activity-feed.md +15 -1
- package/docs/design-system/components/alert-dialog.md +17 -0
- package/docs/design-system/components/alert.md +46 -14
- package/docs/design-system/components/aspect-ratio.md +15 -0
- package/docs/design-system/components/attribute.md +16 -0
- package/docs/design-system/components/autocomplete.md +19 -0
- package/docs/design-system/components/avatar.md +18 -0
- package/docs/design-system/components/badge.md +19 -0
- package/docs/design-system/components/banner.md +15 -1
- package/docs/design-system/components/breadcrumbs.md +14 -0
- package/docs/design-system/components/button-group.md +34 -0
- package/docs/design-system/components/button.md +18 -0
- package/docs/design-system/components/card.md +18 -1
- package/docs/design-system/components/carousel.md +20 -3
- package/docs/design-system/components/catalog-components.md +15 -1
- package/docs/design-system/components/chart.md +15 -0
- package/docs/design-system/components/checkbox.md +16 -0
- package/docs/design-system/components/collapsible.md +15 -0
- package/docs/design-system/components/command.md +15 -0
- package/docs/design-system/components/context-menu.md +15 -0
- package/docs/design-system/components/date-picker.md +21 -1
- package/docs/design-system/components/divider.md +16 -0
- package/docs/design-system/components/empty-state.md +17 -0
- package/docs/design-system/components/field.md +17 -0
- package/docs/design-system/components/file-upload.md +14 -0
- package/docs/design-system/components/hover-card.md +15 -0
- package/docs/design-system/components/input-group.md +17 -0
- package/docs/design-system/components/input-otp.md +18 -0
- package/docs/design-system/components/input.md +43 -7
- package/docs/design-system/components/item.md +72 -0
- package/docs/design-system/components/kbd.md +18 -0
- package/docs/design-system/components/label.md +16 -0
- package/docs/design-system/components/menu.md +17 -0
- package/docs/design-system/components/menubar.md +15 -0
- package/docs/design-system/components/modal.md +25 -4
- package/docs/design-system/components/native-select.md +18 -0
- package/docs/design-system/components/navigation-menu.md +15 -0
- package/docs/design-system/components/onboarding-step-list-item.md +15 -1
- package/docs/design-system/components/page-header.md +15 -1
- package/docs/design-system/components/pagination.md +30 -8
- package/docs/design-system/components/popover.md +19 -0
- package/docs/design-system/components/progress-slider.md +18 -0
- package/docs/design-system/components/progress.md +17 -0
- package/docs/design-system/components/radio-card.md +16 -0
- package/docs/design-system/components/radio-group.md +17 -0
- package/docs/design-system/components/resizable.md +15 -0
- package/docs/design-system/components/scroll-area.md +15 -0
- package/docs/design-system/components/segmented-control.md +71 -0
- package/docs/design-system/components/select.md +44 -7
- package/docs/design-system/components/sheet.md +17 -0
- package/docs/design-system/components/sidebar.md +15 -0
- package/docs/design-system/components/skeleton.md +18 -0
- package/docs/design-system/components/slideout.md +14 -0
- package/docs/design-system/components/slider.md +20 -0
- package/docs/design-system/components/social-button.md +21 -3
- package/docs/design-system/components/spinner.md +16 -0
- package/docs/design-system/components/steps.md +14 -0
- package/docs/design-system/components/table.md +15 -1
- package/docs/design-system/components/tabs.md +17 -0
- package/docs/design-system/components/tag.md +17 -0
- package/docs/design-system/components/textarea.md +16 -0
- package/docs/design-system/components/timeline.md +14 -0
- package/docs/design-system/components/toast.md +17 -0
- package/docs/design-system/components/toggle.md +17 -0
- package/docs/design-system/components/toolbar.md +21 -1
- package/docs/design-system/components/tooltip.md +18 -1
- package/docs/design-system/density-and-elevation.md +44 -0
- package/docs/design-system/direction-and-localization.md +23 -0
- package/docs/design-system/form-recipes.md +73 -0
- package/docs/design-system/gap-promotion-policy.md +21 -0
- package/docs/design-system/gap-promotion-report.md +166 -0
- package/docs/design-system/installation.md +68 -0
- package/docs/design-system/launch-comparison-shadcn.md +98 -0
- package/docs/design-system/registry-and-cli.md +30 -7
- package/docs/design-system/release-policy.md +30 -0
- package/docs/design-system/roadmap.md +14 -0
- package/docs/design-system/support-matrix.md +23 -0
- package/docs/design-system/tabs.md +1 -1
- package/docs/design-system/token-governance.md +23 -1
- package/package.json +29 -15
- package/registry/component-contract.json +40 -0
- package/registry/components/alert-dialog.tsx +1 -1
- package/registry/components/alert.tsx +86 -65
- package/registry/components/autocomplete.tsx +23 -9
- package/registry/components/avatar.tsx +7 -7
- package/registry/components/badge.tsx +1 -1
- package/registry/components/button-group.tsx +321 -4
- package/registry/components/button.tsx +38 -17
- package/registry/components/card.tsx +68 -59
- package/registry/components/carousel.tsx +53 -5
- package/registry/components/chart.tsx +36 -3
- package/registry/components/checkbox.tsx +3 -3
- package/registry/components/collapsible.tsx +1 -1
- package/registry/components/command.tsx +1 -1
- package/registry/components/context-menu.tsx +1 -1
- package/registry/components/date-picker.tsx +245 -104
- package/registry/components/expanded/ActivityFeed.tsx +6 -15
- package/registry/components/expanded/Banner.tsx +3 -3
- package/registry/components/expanded/Breadcrumbs.tsx +5 -5
- package/registry/components/expanded/CatalogComponentsShowcase.tsx +13 -13
- package/registry/components/expanded/CatalogDivider.tsx +1 -1
- package/registry/components/expanded/EmptyState.tsx +1 -1
- package/registry/components/expanded/FileUpload.tsx +9 -2
- package/registry/components/expanded/OnboardingStepListItem.tsx +2 -4
- package/registry/components/expanded/PageHeader.tsx +13 -13
- package/registry/components/expanded/Slideout.tsx +15 -415
- package/registry/components/expanded/Steps.tsx +4 -4
- package/registry/components/expanded/Table.tsx +116 -69
- package/registry/components/expanded/Timeline.tsx +3 -3
- package/registry/components/expanded/activityFeed.css +1 -1
- package/registry/components/expanded/breadcrumbs.css +1 -1
- package/registry/components/expanded/divider.css +1 -1
- package/registry/components/expanded/emptyState.css +1 -1
- package/registry/components/expanded/fileUpload.css +6 -6
- package/registry/components/expanded/slideout.css +9 -685
- package/registry/components/expanded/steps.css +3 -3
- package/registry/components/expanded/table.css +2 -2
- package/registry/components/expanded/timeline.css +2 -2
- package/registry/components/input-content.ts +1 -0
- package/registry/components/input-otp.tsx +13 -3
- package/registry/components/input.tsx +68 -43
- package/registry/components/item.tsx +189 -0
- package/registry/components/kbd.tsx +111 -4
- package/registry/components/menu.tsx +31 -245
- package/registry/components/menubar.tsx +1 -1
- package/registry/components/modal.tsx +142 -102
- package/registry/components/native-select.tsx +2 -2
- package/registry/components/pagination.tsx +80 -58
- package/registry/components/popover.tsx +162 -664
- package/registry/components/radio-card.tsx +116 -87
- package/registry/components/segmented-control.tsx +87 -0
- package/registry/components/select-content.tsx +2 -2
- package/registry/components/select.tsx +52 -16
- package/registry/components/sheet.tsx +1 -1
- package/registry/components/sidebar.tsx +1 -1
- package/registry/components/skeleton.css +0 -3
- package/registry/components/social-button.tsx +47 -25
- package/registry/components/spinner.tsx +18 -55
- package/registry/components/tabs.css +1 -1
- package/registry/components/tabs.tsx +8 -4
- package/registry/components/tag.tsx +2 -2
- package/registry/components/textarea.tsx +3 -3
- package/registry/components/toast.tsx +16 -11
- package/registry/components/toggle.tsx +2 -2
- package/registry/components/toolbar.tsx +89 -17
- package/registry/components/tooltip.tsx +1 -1
- package/registry/examples/alert-demo.tsx +25 -5
- package/registry/examples/attribute-demo.tsx +1 -1
- package/registry/examples/autocomplete-demo.tsx +3 -3
- package/registry/examples/avatar-demo.tsx +7 -7
- package/registry/examples/badge-demo.tsx +1 -1
- package/registry/examples/button-demo.tsx +6 -6
- package/registry/examples/button-group-demo.tsx +23 -2
- package/registry/examples/card-demo.tsx +46 -8
- package/registry/examples/carousel-demo.tsx +20 -2
- package/registry/examples/chart-demo.tsx +1 -1
- package/registry/examples/checkbox-demo.tsx +5 -5
- package/registry/examples/collection-filter-bar-demo.tsx +135 -0
- package/registry/examples/command-demo.tsx +3 -3
- package/registry/examples/{expanded/command-bar-demo.tsx → command-palette-demo.tsx} +5 -15
- package/registry/examples/context-menu-demo.tsx +1 -1
- package/registry/examples/control-density-contract-demo.tsx +61 -0
- package/registry/examples/date-picker-demo.tsx +12 -12
- package/registry/examples/divider-demo.tsx +3 -3
- package/registry/examples/expanded/banner-demo.tsx +1 -1
- package/registry/examples/expanded/breadcrumbs-demo.tsx +1 -1
- package/registry/examples/expanded/empty-state-demo.tsx +1 -1
- package/registry/examples/expanded/file-upload-demo.tsx +1 -1
- package/registry/examples/expanded/onboarding-step-demo.tsx +1 -1
- package/registry/examples/expanded/slideout-demo.tsx +2 -2
- package/registry/examples/expanded/steps-demo.tsx +1 -1
- package/registry/examples/expanded/tabs-demo.tsx +1 -1
- package/registry/examples/expanded/timeline-demo.tsx +1 -1
- package/registry/examples/hover-card-demo.tsx +2 -2
- package/registry/examples/input-demo.tsx +6 -6
- package/registry/examples/input-otp-demo.tsx +4 -4
- package/registry/examples/item-demo.tsx +46 -0
- package/registry/examples/kbd-demo.tsx +1 -1
- package/registry/examples/label-demo.tsx +1 -1
- package/registry/examples/menu-demo.tsx +1 -1
- package/registry/examples/modal-demo.tsx +67 -9
- package/registry/examples/navigation-menu-demo.tsx +1 -1
- package/registry/examples/pagination-demo.tsx +6 -3
- package/registry/examples/popover-demo.tsx +19 -19
- package/registry/examples/progress-demo.tsx +1 -1
- package/registry/examples/progress-slider-demo.tsx +1 -1
- package/registry/examples/radio-card-demo.tsx +4 -4
- package/registry/examples/radio-group-demo.tsx +2 -2
- package/registry/examples/resizable-demo.tsx +1 -1
- package/registry/examples/results-toolbar-demo.tsx +44 -0
- package/registry/examples/scroll-area-demo.tsx +3 -3
- package/registry/examples/segmented-control-demo.tsx +39 -0
- package/registry/examples/select-demo.tsx +1 -1
- package/registry/examples/sidebar-demo.tsx +1 -1
- package/registry/examples/slider-demo.tsx +3 -3
- package/registry/examples/social-button-demo.tsx +18 -8
- package/registry/examples/spinner-demo.tsx +13 -13
- package/registry/examples/tabs-demo.tsx +1 -1
- package/registry/examples/tag-demo.tsx +1 -1
- package/registry/examples/textarea-demo.tsx +4 -4
- package/registry/examples/toast-demo.tsx +1 -1
- package/registry/examples/toggle-demo.tsx +6 -6
- package/registry/examples/tooltip-demo.tsx +4 -4
- package/registry/guidance/USAGE.md +27 -0
- package/registry/hooks/use-direction.ts +193 -13
- package/registry/index.json +5311 -377
- package/registry/styles/globals.css +2440 -4061
- package/registry.json +119 -149
- package/schema/config.schema.json +11 -8
- package/schema/registry.schema.json +150 -45
- package/schema/tokens.schema.json +134 -34
- package/src/cli/command-line.js +194 -0
- package/src/cli/config-editors.js +9 -0
- package/src/cli/doctor.js +399 -0
- package/src/cli/file-transaction.js +295 -0
- package/src/cli/global-css.js +153 -0
- package/src/cli/index.js +567 -1613
- package/src/cli/install-plan.js +592 -0
- package/src/cli/install-receipt.js +171 -0
- package/src/cli/jsonc.js +203 -0
- package/src/cli/package-install-state.js +254 -0
- package/src/cli/package-manager.js +238 -0
- package/src/cli/package-plan.js +185 -0
- package/src/cli/package-version.js +97 -0
- package/src/cli/registry-query.js +207 -0
- package/src/cli/reporting.js +55 -0
- package/src/cli/schema-validation.js +19 -0
- package/src/cli/source-scanner.js +686 -0
- package/src/cli/vite-config.js +478 -0
- package/tokens/banhaten.tokens.json +4312 -309
- package/docs/design-system/components/command-bar.md +0 -57
- package/registry/components/expanded/BannerBoard.tsx +0 -225
- package/registry/components/expanded/CatalogTag.tsx +0 -85
- package/registry/components/expanded/CommandBar.tsx +0 -386
- package/registry/components/expanded/IconExplorer.tsx +0 -612
- package/registry/components/expanded/TimelineShowcase.tsx +0 -158
- package/registry/components/expanded/commandBar.css +0 -470
- package/registry/components/expanded/iconExplorer.css +0 -764
- package/registry/components/expanded/iconPacks.ts +0 -866
- package/registry/components/expanded/tag.css +0 -148
- package/registry/examples/expanded/icons-demo.tsx +0 -5
- package/tokens/Color mode.zip +0 -0
- package/tokens/Numbers.zip +0 -0
- package/tokens/Radius.zip +0 -0
- package/tokens/Theme.zip +0 -0
|
@@ -99,3 +99,19 @@ Covered source files: `components/divider.tsx`.
|
|
|
99
99
|
|
|
100
100
|
- `inheritsDirection`: false
|
|
101
101
|
- `geometry`: Direction maps to component orientation, not document text direction.
|
|
102
|
+
|
|
103
|
+
<!-- registry-contract:start -->
|
|
104
|
+
## Registry Contract
|
|
105
|
+
|
|
106
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
107
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
108
|
+
|
|
109
|
+
| Field | Values |
|
|
110
|
+
| --- | --- |
|
|
111
|
+
| `supportedExports` | `components/divider.tsx: Divider, dividerVariants` |
|
|
112
|
+
| `parts` | `Divider` |
|
|
113
|
+
| `registryDependencies` | None |
|
|
114
|
+
| `directions` | `horizontal`, `vertical` |
|
|
115
|
+
| `tokens` | `--bh-border-subtle`, `--bh-space-15xl-224`, `--bh-space-xxs-2`, `--bh-space-xxxs-1` |
|
|
116
|
+
| `types` | `solid`, `dotted` |
|
|
117
|
+
<!-- registry-contract:end -->
|
|
@@ -53,3 +53,20 @@ Open the live component page or run `npx banhaten docs empty-state` to inspect s
|
|
|
53
53
|
## Accessibility
|
|
54
54
|
|
|
55
55
|
Keep native semantics, accessible names, keyboard reachability, focus-visible treatment, and status/error announcements intact when composing this component.
|
|
56
|
+
|
|
57
|
+
<!-- registry-contract:start -->
|
|
58
|
+
## Registry Contract
|
|
59
|
+
|
|
60
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
61
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
62
|
+
|
|
63
|
+
| Field | Values |
|
|
64
|
+
| --- | --- |
|
|
65
|
+
| `supportedExports` | `components/expanded/EmptyState.tsx: EmptyState` |
|
|
66
|
+
| `parts` | `EmptyState` |
|
|
67
|
+
| `registryDependencies` | `button` |
|
|
68
|
+
| `alignments` | `center`, `start` |
|
|
69
|
+
| `features` | `neutral icon halo`, `title and description copy`, `primary and secondary actions`, `custom icon`, `RTL` |
|
|
70
|
+
| `sizes` | `default`, `compact` |
|
|
71
|
+
| `tokens` | `--bh-bg-neutral-subtle`, `--bh-content-default`, `--bh-content-subtle`, `--bh-empty-state-icon-stroke-width`, `--bh-font-family`, `--bh-radius-full`, `--bh-space-10xl-80`, `--bh-space-13xl-160`, `--bh-space-16xl-256`, `--bh-space-19xl-384`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-9xl-64`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-text-base-letter-spacing`, `--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-xs-semibold-font-size`, `--bh-text-heading-xs-semibold-font-weight`, `--bh-text-heading-xs-semibold-letter-spacing`, `--bh-text-heading-xs-semibold-line-height` |
|
|
72
|
+
<!-- registry-contract:end -->
|
|
@@ -67,3 +67,20 @@ Open the live component page or run `npx banhaten docs field` to inspect source
|
|
|
67
67
|
## Accessibility
|
|
68
68
|
|
|
69
69
|
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.
|
|
70
|
+
|
|
71
|
+
<!-- registry-contract:start -->
|
|
72
|
+
## Registry Contract
|
|
73
|
+
|
|
74
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
75
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
76
|
+
|
|
77
|
+
| Field | Values |
|
|
78
|
+
| --- | --- |
|
|
79
|
+
| `supportedExports` | `components/field.tsx: Field, FieldContent, FieldControl, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSet` |
|
|
80
|
+
| `parts` | `Field`, `FieldLabel`, `FieldControl`, `FieldDescription`, `FieldError`, `FieldGroup`, `FieldSet`, `FieldLegend`, `FieldContent` |
|
|
81
|
+
| `registryDependencies` | `label` |
|
|
82
|
+
| `features` | `generated ids`, `control slot`, `description text`, `error text`, `field groups`, `validation mapping` |
|
|
83
|
+
| `orientations` | `vertical`, `horizontal`, `responsive` |
|
|
84
|
+
| `states` | `default`, `invalid`, `disabled` |
|
|
85
|
+
| `tokens` | `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-subtle`, `--bh-space-17xl-288`, `--bh-space-3xl-16`, `--bh-space-md-8`, `--bh-space-xs-4`, `--bh-text-body-md-semibold-font-size`, `--bh-text-body-md-semibold-font-weight`, `--bh-text-body-md-semibold-letter-spacing`, `--bh-text-body-md-semibold-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` |
|
|
86
|
+
<!-- registry-contract:end -->
|
|
@@ -183,3 +183,17 @@ Covered source files: `components/expanded/fileUpload.css`, `components/expanded
|
|
|
183
183
|
## RTL Rules
|
|
184
184
|
|
|
185
185
|
This component has no special RTL contract beyond inherited document direction and logical spacing.
|
|
186
|
+
|
|
187
|
+
<!-- registry-contract:start -->
|
|
188
|
+
## Registry Contract
|
|
189
|
+
|
|
190
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
191
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
192
|
+
|
|
193
|
+
| Field | Values |
|
|
194
|
+
| --- | --- |
|
|
195
|
+
| `supportedExports` | `components/expanded/FileUpload.tsx: FileUpload` |
|
|
196
|
+
| `parts` | `FileUpload` |
|
|
197
|
+
| `registryDependencies` | `button` |
|
|
198
|
+
| `tokens` | `--bh-bg-accent-amber-default`, `--bh-bg-accent-aqua-default`, `--bh-bg-accent-blue-default`, `--bh-bg-accent-fuchsia-default`, `--bh-bg-accent-golden-default`, `--bh-bg-accent-green-default`, `--bh-bg-accent-lime-default`, `--bh-bg-accent-purple-default`, `--bh-bg-accent-red-default`, `--bh-bg-accent-rose-default`, `--bh-bg-accent-sky-base`, `--bh-bg-default`, `--bh-bg-dim`, `--bh-bg-neutral-default`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-bg-subtle`, `--bh-bg-success-default`, `--bh-border-danger-strong`, `--bh-border-default`, `--bh-border-disabled`, `--bh-border-focus`, `--bh-border-strong`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-border-width-strong`, `--bh-content-brand-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-link`, `--bh-content-link-hover`, `--bh-content-on-color`, `--bh-content-subtle`, `--bh-content-success-default`, `--bh-duration-fast`, `--bh-easing-standard`, `--bh-file-upload-content-max-width`, `--bh-file-upload-root-max-width`, `--bh-file-upload-spin-duration`, `--bh-focus-ring-width`, `--bh-font-family`, `--bh-font-weight-bold`, `--bh-font-weight-medium`, `--bh-font-weight-regular`, `--bh-font-weight-semibold`, `--bh-icon-stroke-200`, `--bh-icon-stroke-220`, `--bh-radius-2xl-12`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-radius-sm-4`, `--bh-space-13xl-160`, `--bh-space-16xl-256`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-7xl-40`, `--bh-space-8xl-48`, `--bh-space-9xl-64`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-none`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-base-letter-spacing`, `--bh-text-body-lg-semibold-font-size`, `--bh-text-body-lg-semibold-line-height`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-line-height`, `--bh-text-body-md-regular-font-size`, `--bh-text-body-md-regular-line-height`, `--bh-text-body-sm-medium-font-size`, `--bh-text-body-sm-medium-line-height`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-line-height`, `--bh-text-body-xs-regular-font-size`, `--bh-text-body-xs-regular-line-height`, `--bh-underline-offset-default`, `--shadow-component-default`, `--shadow-xs` |
|
|
199
|
+
<!-- registry-contract:end -->
|
|
@@ -44,3 +44,18 @@ Open the live component page or run `npx banhaten docs hover-card` to inspect so
|
|
|
44
44
|
|
|
45
45
|
- `inheritsDirection`: true
|
|
46
46
|
- `textDirection`: Content inherits direction and uses logical text alignment.
|
|
47
|
+
|
|
48
|
+
<!-- registry-contract:start -->
|
|
49
|
+
## Registry Contract
|
|
50
|
+
|
|
51
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
52
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
53
|
+
|
|
54
|
+
| Field | Values |
|
|
55
|
+
| --- | --- |
|
|
56
|
+
| `supportedExports` | `components/hover-card.tsx: HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger` |
|
|
57
|
+
| `parts` | `HoverCard`, `HoverCardTrigger`, `HoverCardContent`, `HoverCardPortal` |
|
|
58
|
+
| `registryDependencies` | None |
|
|
59
|
+
| `features` | `hover preview`, `focus preview`, `open delay`, `close delay` |
|
|
60
|
+
| `tokens` | `--bh-bg-raised`, `--bh-content-default`, `--bh-radius-2xl-12`, `--bh-space-18xl-320`, `--bh-space-3xl-16`, `--bh-space-md-8`, `--bh-z-popover`, `--shadow-popover` |
|
|
61
|
+
<!-- registry-contract:end -->
|
|
@@ -54,3 +54,20 @@ Open the live component page or run `npx banhaten docs input-group` to inspect s
|
|
|
54
54
|
- `inheritsDirection`: true
|
|
55
55
|
- `spacing`: Add-ons and input segments use logical borders and inherited direction.
|
|
56
56
|
- `textDirection`: Input text uses text-start so mixed Arabic and English values align naturally.
|
|
57
|
+
|
|
58
|
+
<!-- registry-contract:start -->
|
|
59
|
+
## Registry Contract
|
|
60
|
+
|
|
61
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
62
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
63
|
+
|
|
64
|
+
| Field | Values |
|
|
65
|
+
| --- | --- |
|
|
66
|
+
| `supportedExports` | `components/input-group.tsx: InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, inputGroupVariants` |
|
|
67
|
+
| `parts` | `InputGroup`, `InputGroupInput`, `InputGroupAddon`, `InputGroupButton` |
|
|
68
|
+
| `registryDependencies` | `button` |
|
|
69
|
+
| `sizes` | `md`, `lg` |
|
|
70
|
+
| `states` | `default`, `error` |
|
|
71
|
+
| `tokens` | `--bh-border-danger-strong`, `--bh-border-disabled`, `--bh-border-input`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-input-border`, `--bh-input-lg-height`, `--bh-input-lg-padding-x`, `--bh-input-md-height`, `--bh-input-radius`, `--bh-input-width`, `--bh-interactive-input-default`, `--bh-interactive-input-disabled`, `--bh-interactive-input-soft`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--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-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`, `--shadow-component-default`, `--shadow-input`, `--shadow-input-focus-ring` |
|
|
72
|
+
| `variants` | `default`, `soft` |
|
|
73
|
+
<!-- registry-contract:end -->
|
|
@@ -53,3 +53,21 @@ Open the live component page or run `npx banhaten docs input-otp` to inspect sou
|
|
|
53
53
|
- `keyboard`: Arrow navigation mirrors for RTL: visual previous and next follow the inherited direction.
|
|
54
54
|
- `spacing`: Slot groups, separators, labels, and helper text use inherited direction plus Input spacing tokens.
|
|
55
55
|
- `composition`: Each slot reuses the Banhaten Input surface and control typography instead of a separate field style.
|
|
56
|
+
|
|
57
|
+
<!-- registry-contract:start -->
|
|
58
|
+
## Registry Contract
|
|
59
|
+
|
|
60
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
61
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
62
|
+
|
|
63
|
+
| Field | Values |
|
|
64
|
+
| --- | --- |
|
|
65
|
+
| `supportedExports` | `components/input-otp.tsx: InputOTP, InputOTPSeparator` |
|
|
66
|
+
| `parts` | `InputOTP`, `InputOTPSeparator` |
|
|
67
|
+
| `registryDependencies` | `input` |
|
|
68
|
+
| `features` | `controlled value`, `uncontrolled value`, `paste distribution`, `hidden form value`, `masked slots`, `custom length`, `custom grouping` |
|
|
69
|
+
| `sizes` | `md`, `lg` |
|
|
70
|
+
| `states` | `default`, `filled`, `error`, `disabled` |
|
|
71
|
+
| `tokens` | `--bh-bg-brand-soft`, `--bh-border-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-input-helper-gap`, `--bh-input-inline-gap`, `--bh-input-label-gap`, `--bh-input-lg-height`, `--bh-input-otp-group-gap`, `--bh-input-otp-separator-height`, `--bh-input-otp-separator-width`, `--bh-input-otp-slot-comfortable-width`, `--bh-input-otp-slot-gap`, `--bh-input-otp-slot-lg-width`, `--bh-input-otp-slot-md-width`, `--bh-input-otp-width`, `--bh-input-width`, `--bh-radius-full`, `--bh-space-none`, `--bh-text-body-md-medium-font-weight`, `--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` |
|
|
72
|
+
| `variants` | `default`, `soft` |
|
|
73
|
+
<!-- registry-contract:end -->
|
|
@@ -9,13 +9,21 @@ Input is the text-entry field primitive for forms, filters, search, numeric entr
|
|
|
9
9
|
<Input state="error" label="Amount" message="Enter a valid amount" />
|
|
10
10
|
```
|
|
11
11
|
|
|
12
|
-
| Prop |
|
|
13
|
-
| --- | --- |
|
|
14
|
-
| `kind` | `default`, `shortcut`, `add-on`, `inline-add-on`, `tags`, `inline-tags`, `trailing-dropdown`, `leading-dropdown`, `quantity`, `quantity-2`, `trailing-button`, `leading-button` |
|
|
15
|
-
| `variant` | `default`, `soft` |
|
|
16
|
-
| `size` | `md`, `lg` |
|
|
17
|
-
| `state` | `default`, `filled`, `error`, `disabled` |
|
|
18
|
-
| `label`, `message` | `ReactNode` |
|
|
12
|
+
| Prop | Type / values | Default | Notes |
|
|
13
|
+
| --- | --- | --- | --- |
|
|
14
|
+
| `kind` | `default`, `shortcut`, `add-on`, `inline-add-on`, `tags`, `inline-tags`, `trailing-dropdown`, `leading-dropdown`, `quantity`, `quantity-2`, `trailing-button`, `leading-button` | `default` | Selects the input composition. |
|
|
15
|
+
| `variant` | `default`, `soft` | `default` | Selects the input surface. |
|
|
16
|
+
| `size` | `md`, `lg` | `lg` | Selects the control height. |
|
|
17
|
+
| `state` | `default`, `filled`, `error`, `disabled` | `default` | Selects the visual state. |
|
|
18
|
+
| `label`, `message` | `ReactNode` | `null` | Their presence enables the corresponding text rows unless explicitly disabled. |
|
|
19
|
+
| `hasLeadingIcon` | `boolean` | `false` | Set true to show the default at-sign icon. |
|
|
20
|
+
| `leadingIcon` | `ReactNode \| false` | `null` | A node enables the leading slot; false always removes it. |
|
|
21
|
+
| `hasInformationIcon` | `boolean` | `false` | Set true to show the default information icon. |
|
|
22
|
+
| `trailingIcon` | `ReactNode \| false` | `null` | A node enables the trailing slot; false always removes it. |
|
|
23
|
+
|
|
24
|
+
## Migration
|
|
25
|
+
|
|
26
|
+
Input no longer adds the default at-sign or information icon when their props are omitted. Add `hasLeadingIcon` or `hasInformationIcon` to retain either previous default, or supply a custom `leadingIcon` or `trailingIcon` to enable that slot. Explicit `false` always removes the corresponding slot.
|
|
19
27
|
|
|
20
28
|
## Token Contract
|
|
21
29
|
|
|
@@ -46,3 +54,31 @@ Open the live component page or run `npx banhaten docs input` to inspect source
|
|
|
46
54
|
- `inheritsDirection`: true
|
|
47
55
|
- `textAlignment`: Uses text-start and dir="auto" so Arabic and English labels, values, add-ons, tags, and helper text align naturally.
|
|
48
56
|
- `spacing`: Uses logical start/end borders and inherited direction so leading and trailing segments mirror in RTL.
|
|
57
|
+
|
|
58
|
+
<!-- registry-contract:start -->
|
|
59
|
+
## Registry Contract
|
|
60
|
+
|
|
61
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
62
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
63
|
+
|
|
64
|
+
| Field | Values |
|
|
65
|
+
| --- | --- |
|
|
66
|
+
| `supportedExports` | `components/input-content.ts: getInputDefaultValue, getInputHelperText, getInputPlaceholder, getInputTags, inputCopy`, `components/input.tsx: Input, inputContent, inputControl, inputRoot, inputSurface` |
|
|
67
|
+
| `parts` | `Input` |
|
|
68
|
+
| `registryDependencies` | `kbd` |
|
|
69
|
+
| `props.density` | `"compact" \| "default" \| "comfortable"; default "default"; Preferred cross-component sizing contract. Overrides the legacy size prop with 32px, 36px, or 40px control heights.` |
|
|
70
|
+
| `props.hasLeadingIcon` | `boolean; default false; Deprecated compatibility alias for showAtSign.` |
|
|
71
|
+
| `props.leadingIcon` | `React.ReactNode \| false; default null; Supplies and enables a custom leading icon; false always removes the leading slot.` |
|
|
72
|
+
| `props.hasInformationIcon` | `boolean; default false; Deprecated compatibility alias for showInfo.` |
|
|
73
|
+
| `props.trailingIcon` | `React.ReactNode \| false; default null; Supplies and enables a custom trailing icon; false always removes the information slot.` |
|
|
74
|
+
| `props.showAtSign` | `boolean; default false; Explicitly shows the semantic at-sign affordance when no leadingIcon is supplied.` |
|
|
75
|
+
| `props.showInfo` | `boolean; default false; Explicitly shows the semantic information affordance when no trailingIcon is supplied.` |
|
|
76
|
+
| `props.shortcutKeys` | `readonly string[]; default "Mod,K"; Renders the shortcut kind with shared Kbd keycaps. Use Mod for a platform-aware primary modifier.` |
|
|
77
|
+
| `props.shortcut` | `React.ReactNode; default null; Deprecated single-keycap escape hatch. Prefer shortcutKeys for a structured shortcut chord.` |
|
|
78
|
+
| `densities` | `compact`, `default`, `comfortable` |
|
|
79
|
+
| `kinds` | `default`, `shortcut`, `add-on`, `inline-add-on`, `tags`, `inline-tags`, `trailing-dropdown`, `leading-dropdown`, `quantity`, `quantity-2`, `trailing-button`, `leading-button` |
|
|
80
|
+
| `sizes` | `md`, `lg`, `comfortable` |
|
|
81
|
+
| `states` | `default`, `filled`, `error`, `disabled` |
|
|
82
|
+
| `tokens` | `--bh-border-danger-strong`, `--bh-border-default`, `--bh-border-disabled`, `--bh-border-input`, `--bh-border-width-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-control-md`, `--bh-icon-stroke-225`, `--bh-input-border`, `--bh-input-chevron-size`, `--bh-input-comfortable-height`, `--bh-input-comfortable-padding-x`, `--bh-input-content-gap`, `--bh-input-helper-gap`, `--bh-input-icon-size`, `--bh-input-info-icon-size`, `--bh-input-inline-gap`, `--bh-input-inline-tags-gap`, `--bh-input-label-gap`, `--bh-input-lg-height`, `--bh-input-lg-padding-x`, `--bh-input-md-height`, `--bh-input-md-padding-x`, `--bh-input-radius`, `--bh-input-segment-gap`, `--bh-input-segment-padding-x`, `--bh-input-stepper-icon-size`, `--bh-input-stepper-width`, `--bh-input-tag-height`, `--bh-input-tag-padding-x`, `--bh-input-width`, `--bh-interactive-input-default`, `--bh-interactive-input-disabled`, `--bh-interactive-input-soft`, `--bh-interactive-input-soft-disabled`, `--bh-interactive-secondary-default`, `--bh-interactive-secondary-disabled`, `--bh-interactive-secondary-hover`, `--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-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-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`, `--bh-z-raised`, `--shadow-component-default`, `--shadow-input`, `--shadow-input-disabled-overlay`, `--shadow-input-focus-overlay`, `--shadow-input-focus-ring`, `--shadow-input-focus-surface`, `--shadow-input-overlay`, `--shadow-input-surface` |
|
|
83
|
+
| `variants` | `default`, `soft` |
|
|
84
|
+
<!-- registry-contract:end -->
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
# Item
|
|
2
|
+
|
|
3
|
+
Item is Banhaten’s composable row primitive for lists, settings, search results, files, and compact summaries. It keeps media, copy, and actions on one logical layout contract without embedding product behavior or placeholder content.
|
|
4
|
+
|
|
5
|
+
## API
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
<ItemGroup aria-label="Recent documents">
|
|
9
|
+
<Item role="listitem" variant="outline">
|
|
10
|
+
<ItemMedia><FileTextIcon aria-hidden="true" /></ItemMedia>
|
|
11
|
+
<ItemContent>
|
|
12
|
+
<ItemTitle>Launch checklist</ItemTitle>
|
|
13
|
+
<ItemDescription>Updated five minutes ago</ItemDescription>
|
|
14
|
+
</ItemContent>
|
|
15
|
+
<ItemActions>{/* real controls */}</ItemActions>
|
|
16
|
+
</Item>
|
|
17
|
+
</ItemGroup>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Use `asChild` when the whole row should be a native link or button. Interactive controls inside `ItemActions` must retain their own accessible names.
|
|
21
|
+
|
|
22
|
+
## Variants
|
|
23
|
+
|
|
24
|
+
| Prop | Values |
|
|
25
|
+
| --- | --- |
|
|
26
|
+
| `variant` | `default`, `muted`, `outline` |
|
|
27
|
+
| `size` | `sm`, `md`, `lg` |
|
|
28
|
+
| `disabled` | `boolean` |
|
|
29
|
+
| `ItemMedia variant` | `icon`, `avatar`, `image` |
|
|
30
|
+
|
|
31
|
+
## Install
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npx banhaten add item
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Accessibility
|
|
38
|
+
|
|
39
|
+
`ItemGroup` defaults to `role="list"`; give rows `role="listitem"` when using the default non-semantic `div`. Prefer native anchors or buttons through `asChild` for interactive rows. Disabled styling maps to `aria-disabled` and does not invent click behavior.
|
|
40
|
+
|
|
41
|
+
## RTL Rules
|
|
42
|
+
|
|
43
|
+
- `inheritsDirection`: true
|
|
44
|
+
- `layout`: media, content, and actions follow logical flex order.
|
|
45
|
+
- `textDirection`: title and description use `dir="auto"`.
|
|
46
|
+
|
|
47
|
+
## Token Contract
|
|
48
|
+
|
|
49
|
+
Every dimension, surface, color, radius, type style, focus treatment, and transition resolves through Banhaten tokens. Covered source file: `components/item.tsx`.
|
|
50
|
+
|
|
51
|
+
## Examples
|
|
52
|
+
|
|
53
|
+
Primary registry example: `examples/item-demo.tsx`.
|
|
54
|
+
|
|
55
|
+
Open the live component page or run `npx banhaten docs item` to inspect source files, install command, and examples.
|
|
56
|
+
|
|
57
|
+
<!-- registry-contract:start -->
|
|
58
|
+
## Registry Contract
|
|
59
|
+
|
|
60
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
61
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
62
|
+
|
|
63
|
+
| Field | Values |
|
|
64
|
+
| --- | --- |
|
|
65
|
+
| `supportedExports` | `components/item.tsx: Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemSeparator, ItemTitle, itemVariants` |
|
|
66
|
+
| `parts` | `Item`, `ItemGroup`, `ItemMedia`, `ItemContent`, `ItemTitle`, `ItemDescription`, `ItemActions`, `ItemSeparator` |
|
|
67
|
+
| `registryDependencies` | None |
|
|
68
|
+
| `features` | `media slot`, `content slots`, `action slot`, `asChild composition`, `disabled semantics` |
|
|
69
|
+
| `sizes` | `sm`, `md`, `lg` |
|
|
70
|
+
| `tokens` | `--bh-bg-default`, `--bh-bg-neutral-default`, `--bh-bg-neutral-soft`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-bg-raised-hover`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-on-color`, `--bh-content-subtle`, `--bh-interactive-ghost-hover`, `--bh-item-actions-gap`, `--bh-item-content-gap`, `--bh-item-gap`, `--bh-item-group-gap`, `--bh-item-icon-size`, `--bh-item-media-radius`, `--bh-item-media-size`, `--bh-item-min-height-lg`, `--bh-item-min-height-md`, `--bh-item-min-height-sm`, `--bh-item-padding-x`, `--bh-item-padding-y`, `--bh-item-radius`, `--bh-radius-full`, `--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-button-focus` |
|
|
71
|
+
| `variants` | `default`, `muted`, `outline` |
|
|
72
|
+
<!-- registry-contract:end -->
|
|
@@ -42,3 +42,21 @@ Open the live component page or run `npx banhaten docs kbd` to inspect source fi
|
|
|
42
42
|
|
|
43
43
|
- `inheritsDirection`: false
|
|
44
44
|
- `semantics`: Kbd is direction-neutral and should be paired with surrounding text labels.
|
|
45
|
+
|
|
46
|
+
<!-- registry-contract:start -->
|
|
47
|
+
## Registry Contract
|
|
48
|
+
|
|
49
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
50
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
51
|
+
|
|
52
|
+
| Field | Values |
|
|
53
|
+
| --- | --- |
|
|
54
|
+
| `supportedExports` | `components/kbd.tsx: Kbd, KbdShortcut, kbdVariants` |
|
|
55
|
+
| `parts` | `Kbd`, `KbdShortcut` |
|
|
56
|
+
| `registryDependencies` | None |
|
|
57
|
+
| `props.keys` | `readonly string[]; default null; Required by KbdShortcut. Each entry renders as its own keycap; use Mod for the platform primary modifier.` |
|
|
58
|
+
| `props.platform` | `"auto" \| "mac" \| "windows" \| "linux"; default "auto"; Resolves Mod to Command on Apple platforms and Control elsewhere.` |
|
|
59
|
+
| `props.disabled` | `boolean; default false; Uses disabled border, surface, content, and shadow tokens for shortcuts inside disabled controls.` |
|
|
60
|
+
| `sizes` | `sm`, `md` |
|
|
61
|
+
| `tokens` | `--bh-border-default`, `--bh-border-disabled`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-font-family`, `--bh-interactive-soft-default`, `--bh-interactive-soft-disabled`, `--bh-radius-md-6`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--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`, `--shadow-button-soft` |
|
|
62
|
+
<!-- registry-contract:end -->
|
|
@@ -46,3 +46,19 @@ Open the live component page or run `npx banhaten docs label` to inspect source
|
|
|
46
46
|
- `inheritsDirection`: true
|
|
47
47
|
- `textDirection`: Label and optional text use dir="auto" so Arabic and English labels resolve naturally.
|
|
48
48
|
- `spacing`: Uses logical inline spacing between label text, required marker, and optional text.
|
|
49
|
+
|
|
50
|
+
<!-- registry-contract:start -->
|
|
51
|
+
## Registry Contract
|
|
52
|
+
|
|
53
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
54
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
55
|
+
|
|
56
|
+
| Field | Values |
|
|
57
|
+
| --- | --- |
|
|
58
|
+
| `supportedExports` | `components/label.tsx: Label, labelVariants` |
|
|
59
|
+
| `parts` | `Label` |
|
|
60
|
+
| `registryDependencies` | None |
|
|
61
|
+
| `features` | `required marker`, `optional text`, `disabled styling` |
|
|
62
|
+
| `tokens` | `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--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-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` |
|
|
63
|
+
| `tones` | `default`, `subtle`, `danger` |
|
|
64
|
+
<!-- registry-contract:end -->
|
|
@@ -57,3 +57,20 @@ Open the live component page or run `npx banhaten docs menu` to inspect source f
|
|
|
57
57
|
- `spacing`: Uses logical padding and flex direction so leading, trailing, badge, switch, right text, and action slots mirror naturally.
|
|
58
58
|
- `directionalIconFlip`: Use data-rtl-flip="true" on chevrons and arrows that should mirror.
|
|
59
59
|
- `textDirection`: Text slots use dir="auto" by default for Arabic and English labels.
|
|
60
|
+
|
|
61
|
+
<!-- registry-contract:start -->
|
|
62
|
+
## Registry Contract
|
|
63
|
+
|
|
64
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
65
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
66
|
+
|
|
67
|
+
| Field | Values |
|
|
68
|
+
| --- | --- |
|
|
69
|
+
| `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` |
|
|
70
|
+
| `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` |
|
|
71
|
+
| `registryDependencies` | None |
|
|
72
|
+
| `itemKinds` | `default`, `multiline`, `action`, `progress`, `button` |
|
|
73
|
+
| `states` | `default`, `disabled` |
|
|
74
|
+
| `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-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`, `--shadow-menu` |
|
|
75
|
+
| `widths` | `menu`, `default`, `multiline`, `action`, `auto` |
|
|
76
|
+
<!-- registry-contract:end -->
|
|
@@ -43,3 +43,18 @@ Open the live component page or run `npx banhaten docs menubar` to inspect sourc
|
|
|
43
43
|
|
|
44
44
|
- `inheritsDirection`: true
|
|
45
45
|
- `spacing`: Triggers, items, and shortcuts use logical spacing.
|
|
46
|
+
|
|
47
|
+
<!-- registry-contract:start -->
|
|
48
|
+
## Registry Contract
|
|
49
|
+
|
|
50
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
51
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
52
|
+
|
|
53
|
+
| Field | Values |
|
|
54
|
+
| --- | --- |
|
|
55
|
+
| `supportedExports` | `components/menubar.tsx: Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarTrigger` |
|
|
56
|
+
| `parts` | `Menubar`, `MenubarMenu`, `MenubarTrigger`, `MenubarContent`, `MenubarItem`, `MenubarCheckboxItem`, `MenubarRadioItem`, `MenubarLabel`, `MenubarSeparator`, `MenubarShortcut` |
|
|
57
|
+
| `registryDependencies` | None |
|
|
58
|
+
| `features` | `top menu`, `keyboard navigation`, `checkbox items`, `radio items`, `shortcuts` |
|
|
59
|
+
| `tokens` | `--bh-bg-raised`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-interactive-ghost-hover`, `--bh-interactive-soft-default`, `--bh-menu-item-default-height`, `--bh-menu-item-hover-bg`, `--bh-menu-width`, `--bh-radius-lg-8`, `--bh-radius-md-6`, `--bh-radius-xl-10`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-7xl-40`, `--bh-space-8xl-48`, `--bh-space-md-8`, `--bh-space-sm-6`, `--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-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-z-popover`, `--shadow-component-default`, `--shadow-menu` |
|
|
60
|
+
<!-- registry-contract:end -->
|
|
@@ -17,7 +17,7 @@ The implementation covers the six-node Modal matrix from Figma:
|
|
|
17
17
|
|
|
18
18
|
```tsx
|
|
19
19
|
<Modal size="default" />
|
|
20
|
-
<Modal dir="rtl" size="lg" />
|
|
20
|
+
<Modal dir="rtl" messages={arabicModalMessages} size="lg" />
|
|
21
21
|
<ConfirmModal intent="danger" confirmLabel="Delete project" />
|
|
22
22
|
```
|
|
23
23
|
|
|
@@ -25,8 +25,10 @@ The implementation covers the six-node Modal matrix from Figma:
|
|
|
25
25
|
| --- | --- |
|
|
26
26
|
| `size` | `sm` |
|
|
27
27
|
| `dir` | inherited |
|
|
28
|
-
| `title` |
|
|
29
|
-
| `description` |
|
|
28
|
+
| `title` | English default; overrides `messages.title` |
|
|
29
|
+
| `description` | English default; overrides `messages.description` |
|
|
30
|
+
| `messages` | partial localized Modal message catalog |
|
|
31
|
+
| `closeLabel` | overrides `messages.closeLabel` |
|
|
30
32
|
| `showIcon` | `true` |
|
|
31
33
|
| `showCloseButton` | `true` |
|
|
32
34
|
| `showDivider` | `true` |
|
|
@@ -39,7 +41,8 @@ The implementation covers the six-node Modal matrix from Figma:
|
|
|
39
41
|
| Prop | Default |
|
|
40
42
|
| --- | --- |
|
|
41
43
|
| `intent` | `danger` |
|
|
42
|
-
| `
|
|
44
|
+
| `messages` | partial localized ConfirmModal message catalog |
|
|
45
|
+
| `confirmLabel` / `cancelLabel` | English; direct props override `messages` |
|
|
43
46
|
| `confirmLoading` | `false` |
|
|
44
47
|
| `confirmDisabled` | `false` |
|
|
45
48
|
| `preventOutsideDismiss` | `true` |
|
|
@@ -77,6 +80,7 @@ The component consumes existing Banhaten variables:
|
|
|
77
80
|
- The close affordance is a real button through `ModalCloseButton`.
|
|
78
81
|
- `ConfirmModal` sets `role="alertdialog"`, focuses the cancel action first when present, disables outside-pointer dismissal by default, and can optionally prevent Escape dismissal.
|
|
79
82
|
- `ModalSurface` is presentational and intended for static documentation or visual comparison, not live modal behavior.
|
|
83
|
+
- Direction never selects modal copy. Choose `messages` from the product locale; direct title, description, action, and close-label props have highest precedence.
|
|
80
84
|
|
|
81
85
|
## Install
|
|
82
86
|
|
|
@@ -95,4 +99,21 @@ Open the live component page or run `npx banhaten docs modal` to inspect source
|
|
|
95
99
|
- `inheritsDirection`: true
|
|
96
100
|
- `closePlacement`: Close uses logical inline-end placement so it moves to the left side in RTL.
|
|
97
101
|
- `footerOrder`: The checkbox and action cluster use inherited direction and logical gaps so their order mirrors naturally.
|
|
102
|
+
- `messages`: Direction does not select language. Modal and ConfirmModal accept explicit message catalogs plus direct label overrides.
|
|
98
103
|
- `textDirection`: Title, description, checkbox label, confirm labels, and actions use dir="auto" for Arabic and English copy.
|
|
104
|
+
|
|
105
|
+
<!-- registry-contract:start -->
|
|
106
|
+
## Registry Contract
|
|
107
|
+
|
|
108
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
109
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
110
|
+
|
|
111
|
+
| Field | Values |
|
|
112
|
+
| --- | --- |
|
|
113
|
+
| `supportedExports` | `components/modal.tsx: ConfirmModal, Modal, ModalActionButton, ModalActions, ModalBody, ModalClose, ModalCloseButton, ModalContent, ModalDescription, ModalDivider, ModalFooter, ModalFooterCheckbox, ModalHeader, ModalHeaderIcon, ModalOverlay, ModalPortal, ModalRoot, ModalSurface, ModalTitle, ModalTrigger, arabicConfirmModalMessages, arabicModalMessages, modalContentVariants, modalSurfaceVariants` |
|
|
114
|
+
| `parts` | `Modal`, `ConfirmModal`, `ModalRoot`, `ModalTrigger`, `ModalContent`, `ModalPortal`, `ModalOverlay`, `ModalHeader`, `ModalHeaderIcon`, `ModalTitle`, `ModalDescription`, `ModalBody`, `ModalDivider`, `ModalFooter`, `ModalFooterCheckbox`, `ModalActions`, `ModalActionButton`, `ModalClose`, `ModalCloseButton`, `ModalSurface` |
|
|
115
|
+
| `registryDependencies` | `alert-dialog`, `button`, `checkbox`, `spinner` |
|
|
116
|
+
| `intents` | `default`, `warning`, `danger` |
|
|
117
|
+
| `sizes` | `sm`, `default`, `lg` |
|
|
118
|
+
| `tokens` | `--bh-bg-backdrop`, `--bh-bg-danger-subtle`, `--bh-bg-raised`, `--bh-bg-warning-subtle`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-subtle`, `--bh-content-warning-default`, `--bh-icon-stroke-200`, `--bh-interactive-ghost-hover`, `--bh-modal-action-label-padding-x`, `--bh-modal-border`, `--bh-modal-width`, `--bh-radius-2xl-12`, `--bh-radius-full`, `--bh-space-12xl-128`, `--bh-space-16xl-256`, `--bh-space-19xl-384`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-8xl-48`, `--bh-space-9xl-64`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xs-4`, `--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-sm-semibold-font-size`, `--bh-text-heading-sm-semibold-font-weight`, `--bh-text-heading-sm-semibold-letter-spacing`, `--bh-text-heading-sm-semibold-line-height`, `--bh-z-overlay`, `--shadow-button-focus`, `--shadow-component-default`, `--shadow-modal` |
|
|
119
|
+
<!-- registry-contract:end -->
|
|
@@ -50,3 +50,21 @@ Open the live component page or run `npx banhaten docs native-select` to inspect
|
|
|
50
50
|
- `inheritsDirection`: true
|
|
51
51
|
- `spacing`: Uses logical padding and inline-end chevron placement.
|
|
52
52
|
- `textDirection`: Label and helper copy use dir="auto" through Label and helper text.
|
|
53
|
+
|
|
54
|
+
<!-- registry-contract:start -->
|
|
55
|
+
## Registry Contract
|
|
56
|
+
|
|
57
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
58
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
59
|
+
|
|
60
|
+
| Field | Values |
|
|
61
|
+
| --- | --- |
|
|
62
|
+
| `supportedExports` | `components/native-select.tsx: NativeSelect, nativeSelectControlVariants, nativeSelectRootVariants` |
|
|
63
|
+
| `parts` | `NativeSelect` |
|
|
64
|
+
| `registryDependencies` | `label` |
|
|
65
|
+
| `features` | `options array`, `native children`, `label`, `helper text`, `error text` |
|
|
66
|
+
| `sizes` | `md`, `lg` |
|
|
67
|
+
| `states` | `default`, `filled`, `error`, `disabled` |
|
|
68
|
+
| `tokens` | `--bh-border-width-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-icon-stroke-200`, `--bh-input-lg-height`, `--bh-input-md-height`, `--bh-select-field-gap`, `--bh-select-trigger-bg`, `--bh-select-trigger-bg-disabled`, `--bh-select-trigger-bg-soft`, `--bh-select-trigger-border`, `--bh-select-trigger-border-current`, `--bh-select-trigger-border-disabled`, `--bh-select-trigger-border-error`, `--bh-select-trigger-border-focus`, `--bh-select-trigger-icon-color`, `--bh-select-trigger-padding-x`, `--bh-select-trigger-radius`, `--bh-select-width`, `--bh-space-3xl-16`, `--bh-space-8xl-48`, `--bh-space-sm-6`, `--bh-space-xs-4`, `--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-regular-font-size`, `--bh-text-body-xs-regular-font-weight`, `--bh-text-body-xs-regular-letter-spacing`, `--bh-text-body-xs-regular-line-height`, `--shadow-component-default`, `--shadow-select-danger-focus-ring`, `--shadow-select-focus-ring`, `--shadow-select-trigger` |
|
|
69
|
+
| `variants` | `default`, `soft` |
|
|
70
|
+
<!-- registry-contract:end -->
|
|
@@ -46,3 +46,18 @@ Open the live component page or run `npx banhaten docs navigation-menu` to inspe
|
|
|
46
46
|
|
|
47
47
|
- `inheritsDirection`: true
|
|
48
48
|
- `spacing`: Triggers, links, and content use logical layout and inherited direction.
|
|
49
|
+
|
|
50
|
+
<!-- registry-contract:start -->
|
|
51
|
+
## Registry Contract
|
|
52
|
+
|
|
53
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
54
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
55
|
+
|
|
56
|
+
| Field | Values |
|
|
57
|
+
| --- | --- |
|
|
58
|
+
| `supportedExports` | `components/navigation-menu.tsx: NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport` |
|
|
59
|
+
| `parts` | `NavigationMenu`, `NavigationMenuList`, `NavigationMenuItem`, `NavigationMenuTrigger`, `NavigationMenuContent`, `NavigationMenuLink`, `NavigationMenuViewport`, `NavigationMenuIndicator` |
|
|
60
|
+
| `registryDependencies` | None |
|
|
61
|
+
| `features` | `top navigation`, `viewport`, `indicator`, `dropdown content` |
|
|
62
|
+
| `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` |
|
|
63
|
+
<!-- registry-contract:end -->
|
|
@@ -38,7 +38,7 @@ Code uses lowercase semantic state values: `finished`, `active`, and `inactive`.
|
|
|
38
38
|
|
|
39
39
|
## Token Contract
|
|
40
40
|
|
|
41
|
-
The component consumes Banhaten semantic tokens and component aliases. Do not hard-code Figma fallback literals in component source; promote any Figma value into `
|
|
41
|
+
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.
|
|
42
42
|
|
|
43
43
|
- Backgrounds: `--bh-bg-raised`
|
|
44
44
|
- Borders: `--bh-border-brand-strong`, `--bh-border-default`
|
|
@@ -78,3 +78,17 @@ Open the live component page or run `npx banhaten docs onboarding-step` to inspe
|
|
|
78
78
|
## RTL Rules
|
|
79
79
|
|
|
80
80
|
This component has no special RTL contract beyond inherited document direction and logical spacing.
|
|
81
|
+
|
|
82
|
+
<!-- registry-contract:start -->
|
|
83
|
+
## Registry Contract
|
|
84
|
+
|
|
85
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
86
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
87
|
+
|
|
88
|
+
| Field | Values |
|
|
89
|
+
| --- | --- |
|
|
90
|
+
| `supportedExports` | `components/expanded/OnboardingStepListItem.tsx: OnboardingStepListItem` |
|
|
91
|
+
| `parts` | `OnboardingStepListItem` |
|
|
92
|
+
| `registryDependencies` | None |
|
|
93
|
+
| `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` |
|
|
94
|
+
<!-- registry-contract:end -->
|
|
@@ -42,7 +42,7 @@ The implementation follows the Figma hierarchy:
|
|
|
42
42
|
|
|
43
43
|
## Token Contract
|
|
44
44
|
|
|
45
|
-
The component consumes Banhaten semantic tokens and component aliases. Do not hard-code Figma fallback literals in component source; promote any Figma value into `
|
|
45
|
+
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.
|
|
46
46
|
|
|
47
47
|
- Borders: `--bh-border-default`
|
|
48
48
|
- Content: `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-heading`, `--bh-content-muted`, `--bh-content-subtle`
|
|
@@ -82,3 +82,17 @@ Open the live component page or run `npx banhaten docs page-header` to inspect s
|
|
|
82
82
|
## RTL Rules
|
|
83
83
|
|
|
84
84
|
This component has no special RTL contract beyond inherited document direction and logical spacing.
|
|
85
|
+
|
|
86
|
+
<!-- registry-contract:start -->
|
|
87
|
+
## Registry Contract
|
|
88
|
+
|
|
89
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
90
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
91
|
+
|
|
92
|
+
| Field | Values |
|
|
93
|
+
| --- | --- |
|
|
94
|
+
| `supportedExports` | `components/expanded/PageHeader.tsx: PageHeader` |
|
|
95
|
+
| `parts` | `PageHeader` |
|
|
96
|
+
| `registryDependencies` | `tabs` |
|
|
97
|
+
| `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` |
|
|
98
|
+
<!-- registry-contract:end -->
|
|
@@ -1,21 +1,27 @@
|
|
|
1
1
|
# Pagination
|
|
2
2
|
|
|
3
|
-
Pagination navigates paged result sets, tables, and long lists. It supports numeric, simple, and summary layouts, soft and ghost styles, exact control geometry, captions, and
|
|
3
|
+
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.
|
|
4
4
|
|
|
5
5
|
## API
|
|
6
6
|
|
|
7
7
|
```tsx
|
|
8
|
-
<Pagination page={3}
|
|
9
|
-
<Pagination
|
|
8
|
+
<Pagination page={3} pages={[1, 2, 3, "ellipsis", 12]} type="numeric" />
|
|
9
|
+
<Pagination
|
|
10
|
+
dir="rtl"
|
|
11
|
+
messages={{ previous: "הקודם", next: "הבא" }}
|
|
12
|
+
page={2}
|
|
13
|
+
type="summary"
|
|
14
|
+
/>
|
|
10
15
|
```
|
|
11
16
|
|
|
12
17
|
| Prop | Values | Default |
|
|
13
18
|
| --- | --- | --- |
|
|
14
19
|
| `type` | `numeric`, `simple`, `summary` | `numeric` |
|
|
15
20
|
| `variant` | `soft`, `ghost` | `soft` |
|
|
16
|
-
| `page` | number | `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
21
|
+
| `page` | number | `2` |
|
|
22
|
+
| `pages` | page numbers, page descriptors, `ellipsis` | built-in demo sequence |
|
|
23
|
+
| `messages` | partial localized message catalog | English defaults |
|
|
24
|
+
| `caption`, `summary`, previous/next label and ARIA props | direct overrides | matching message value |
|
|
19
25
|
|
|
20
26
|
## Token Contract
|
|
21
27
|
|
|
@@ -23,7 +29,7 @@ Pagination uses Banhaten control height, radius, border, background, content, fo
|
|
|
23
29
|
|
|
24
30
|
## RTL
|
|
25
31
|
|
|
26
|
-
Passing `dir="rtl"`
|
|
32
|
+
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.
|
|
27
33
|
|
|
28
34
|
## Accessibility
|
|
29
35
|
|
|
@@ -44,6 +50,22 @@ Open the live component page or run `npx banhaten docs pagination` to inspect so
|
|
|
44
50
|
## RTL Rules
|
|
45
51
|
|
|
46
52
|
- `inheritsDirection`: true
|
|
47
|
-
- `
|
|
53
|
+
- `messages`: Direction does not select language. English defaults are stable; pass messages for Arabic, Hebrew, Persian, Urdu, or another locale.
|
|
48
54
|
- `directionalIconFlip`: Inline Figma arrow vectors use data-rtl-flip="true" so previous and next controls mirror in RTL.
|
|
49
55
|
- `spacing`: Uses logical flex direction, gap, and text direction so English and Arabic captions align naturally.
|
|
56
|
+
|
|
57
|
+
<!-- registry-contract:start -->
|
|
58
|
+
## Registry Contract
|
|
59
|
+
|
|
60
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
61
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
62
|
+
|
|
63
|
+
| Field | Values |
|
|
64
|
+
| --- | --- |
|
|
65
|
+
| `supportedExports` | `components/pagination.tsx: Pagination, arabicPaginationMessages, paginationControlVariants, paginationItemVariants, paginationVariants` |
|
|
66
|
+
| `parts` | `Pagination` |
|
|
67
|
+
| `registryDependencies` | None |
|
|
68
|
+
| `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` |
|
|
69
|
+
| `types` | `numeric`, `simple`, `summary` |
|
|
70
|
+
| `variants` | `soft`, `ghost` |
|
|
71
|
+
<!-- registry-contract:end -->
|