banhaten 0.1.3 → 0.3.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 +73 -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-implementation-ownership-audit.md +244 -0
- package/docs/design-system/component-quality-audit-2026-08-20.md +223 -0
- package/docs/design-system/component-showcase-consistency-report.md +2 -0
- package/docs/design-system/component-token-consistency-audit.md +13 -3
- package/docs/design-system/components/README.md +4 -2
- package/docs/design-system/components/accordion.md +16 -0
- package/docs/design-system/components/activity-feed.md +17 -1
- package/docs/design-system/components/activity-heatmap.md +73 -0
- 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 +19 -1
- package/docs/design-system/components/breadcrumbs.md +17 -0
- package/docs/design-system/components/button-group.md +35 -0
- package/docs/design-system/components/button.md +18 -0
- package/docs/design-system/components/card.md +26 -1
- package/docs/design-system/components/carousel.md +20 -3
- package/docs/design-system/components/catalog-components.md +18 -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 +18 -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 +16 -1
- package/docs/design-system/components/page-header.md +17 -1
- package/docs/design-system/components/pagination.md +31 -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 +20 -1
- 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 +17 -0
- package/docs/design-system/components/skeleton.md +18 -0
- package/docs/design-system/components/slideout.md +17 -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 +19 -0
- package/docs/design-system/components/table.md +36 -4
- 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 +17 -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 +61 -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 +100 -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 +30 -15
- package/registry/component-contract.json +40 -0
- package/registry/components/alert-dialog.tsx +2 -2
- package/registry/components/alert.tsx +101 -76
- package/registry/components/autocomplete.tsx +23 -9
- package/registry/components/avatar.tsx +14 -10
- package/registry/components/badge.tsx +18 -18
- package/registry/components/button-group.tsx +324 -5
- package/registry/components/button.tsx +38 -17
- package/registry/components/card.tsx +87 -62
- package/registry/components/carousel.tsx +67 -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 +38 -4
- package/registry/components/context-menu.tsx +1 -1
- package/registry/components/date-picker.tsx +312 -135
- package/registry/components/expanded/ActivityFeed.tsx +9 -22
- package/registry/components/expanded/ActivityHeatmap.tsx +64 -0
- package/registry/components/expanded/Banner.tsx +3 -4
- package/registry/components/expanded/Breadcrumbs.tsx +8 -5
- package/registry/components/expanded/CatalogComponentsShowcase.tsx +16 -17
- package/registry/components/expanded/CatalogDivider.tsx +4 -3
- package/registry/components/expanded/EmptyState.tsx +1 -1
- package/registry/components/expanded/FileUpload.tsx +16 -7
- package/registry/components/expanded/OnboardingStepListItem.tsx +2 -6
- package/registry/components/expanded/PageHeader.tsx +47 -56
- package/registry/components/expanded/Slideout.tsx +29 -424
- package/registry/components/expanded/Steps.tsx +151 -13
- package/registry/components/expanded/Table.tsx +161 -82
- package/registry/components/expanded/Timeline.tsx +14 -27
- package/registry/components/expanded/activityFeed.css +9 -9
- package/registry/components/expanded/activityHeatmap.css +66 -0
- package/registry/components/expanded/banner.css +21 -11
- package/registry/components/expanded/breadcrumbs.css +2 -2
- package/registry/components/expanded/divider.css +1 -1
- package/registry/components/expanded/emptyState.css +1 -1
- package/registry/components/expanded/fileUpload.css +7 -7
- package/registry/components/expanded/onboardingStepListItem.css +2 -2
- package/registry/components/expanded/pageHeader.css +14 -11
- package/registry/components/expanded/slideout.css +10 -690
- package/registry/components/expanded/steps.css +78 -15
- package/registry/components/expanded/table.css +60 -69
- package/registry/components/expanded/timeline.css +19 -18
- package/registry/components/field.tsx +61 -8
- 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 +87 -251
- package/registry/components/menubar.tsx +1 -1
- package/registry/components/modal.tsx +143 -103
- package/registry/components/native-select.tsx +2 -2
- package/registry/components/navigation-menu.tsx +1 -1
- package/registry/components/pagination.css +36 -0
- package/registry/components/pagination.tsx +88 -64
- package/registry/components/popover.tsx +162 -664
- package/registry/components/progress-slider.tsx +1 -1
- package/registry/components/radio-card.tsx +116 -87
- package/registry/components/resizable.tsx +36 -2
- package/registry/components/scroll-area.tsx +30 -6
- package/registry/components/segmented-control.tsx +87 -0
- package/registry/components/select-content.tsx +2 -2
- package/registry/components/select.tsx +86 -27
- package/registry/components/sheet.tsx +1 -1
- package/registry/components/sidebar.tsx +12 -6
- package/registry/components/skeleton.css +0 -3
- package/registry/components/social-button.tsx +59 -30
- package/registry/components/spinner.tsx +18 -55
- package/registry/components/table-elements.tsx +128 -0
- package/registry/components/tabs.css +1 -1
- package/registry/components/tabs.tsx +13 -14
- package/registry/components/tag.tsx +3 -3
- package/registry/components/textarea.tsx +3 -3
- package/registry/components/toast.tsx +16 -11
- package/registry/components/toggle.tsx +4 -4
- package/registry/components/toolbar.tsx +94 -22
- package/registry/components/tooltip.tsx +2 -2
- 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 +14 -11
- 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/activity-heatmap-demo.tsx +29 -0
- package/registry/examples/expanded/banner-demo.tsx +1 -1
- package/registry/examples/expanded/breadcrumbs-demo.tsx +4 -4
- 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 +10 -7
- 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 +5 -3
- 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 +5668 -375
- package/registry/styles/globals.css +2404 -3999
- package/registry.json +156 -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 +4444 -331
- 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
|
@@ -46,3 +46,18 @@ Open the live component page or run `npx banhaten docs collapsible` to inspect s
|
|
|
46
46
|
- `inheritsDirection`: true
|
|
47
47
|
- `textAlignment`: Trigger and content use logical text alignment and inherit direction.
|
|
48
48
|
- `spacing`: Icon and label spacing uses flex gap so it mirrors with document 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/collapsible.tsx: Collapsible, CollapsibleContent, CollapsibleTrigger` |
|
|
59
|
+
| `parts` | `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent` |
|
|
60
|
+
| `registryDependencies` | None |
|
|
61
|
+
| `features` | `controlled state`, `uncontrolled state`, `keyboard trigger`, `RTL` |
|
|
62
|
+
| `tokens` | `--bh-content-default`, `--bh-content-subtle`, `--bh-icon-stroke-200`, `--bh-interactive-ghost-hover`, `--bh-radius-lg-8`, `--bh-space-3xl-16`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-xl-12`, `--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` |
|
|
63
|
+
<!-- registry-contract:end -->
|
|
@@ -58,3 +58,18 @@ Open the live component page or run `npx banhaten docs command` to inspect sourc
|
|
|
58
58
|
- `inheritsDirection`: true
|
|
59
59
|
- `spacing`: Command rows and shortcuts use logical spacing so shortcut placement mirrors naturally.
|
|
60
60
|
- `textDirection`: Command copy inherits document direction; individual row labels can use dir="auto" when needed.
|
|
61
|
+
|
|
62
|
+
<!-- registry-contract:start -->
|
|
63
|
+
## Registry Contract
|
|
64
|
+
|
|
65
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
66
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
67
|
+
|
|
68
|
+
| Field | Values |
|
|
69
|
+
| --- | --- |
|
|
70
|
+
| `supportedExports` | `components/command.tsx: Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut` |
|
|
71
|
+
| `parts` | `Command`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem`, `CommandSeparator`, `CommandShortcut` |
|
|
72
|
+
| `registryDependencies` | None |
|
|
73
|
+
| `features` | `search filtering`, `keyboard navigation`, `grouped results`, `shortcut slot`, `empty state` |
|
|
74
|
+
| `tokens` | `--bh-bg-raised`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-icon-stroke-200`, `--bh-interactive-ghost-hover`, `--bh-radius-2xl-12`, `--bh-radius-lg-8`, `--bh-space-19xl-384`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-8xl-48`, `--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-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`, `--shadow-menu` |
|
|
75
|
+
<!-- registry-contract:end -->
|
|
@@ -42,3 +42,18 @@ Open the live component page or run `npx banhaten docs context-menu` to inspect
|
|
|
42
42
|
- `inheritsDirection`: true
|
|
43
43
|
- `directionalIconFlip`: Submenu chevrons flip in RTL.
|
|
44
44
|
- `spacing`: Items and shortcuts use logical spacing.
|
|
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/context-menu.tsx: ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger` |
|
|
55
|
+
| `parts` | `ContextMenu`, `ContextMenuTrigger`, `ContextMenuContent`, `ContextMenuItem`, `ContextMenuCheckboxItem`, `ContextMenuRadioItem`, `ContextMenuLabel`, `ContextMenuSeparator`, `ContextMenuShortcut`, `ContextMenuSub`, `ContextMenuSubTrigger`, `ContextMenuSubContent` |
|
|
56
|
+
| `registryDependencies` | None |
|
|
57
|
+
| `features` | `right click trigger`, `submenus`, `checkbox items`, `radio items`, `shortcuts` |
|
|
58
|
+
| `tokens` | `--bh-bg-raised`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-menu-item-default-height`, `--bh-menu-item-hover-bg`, `--bh-menu-width`, `--bh-radius-md-6`, `--bh-radius-xl-10`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-8xl-48`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xs-4`, `--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-menu` |
|
|
59
|
+
<!-- registry-contract:end -->
|
|
@@ -46,7 +46,7 @@ The trigger, calendar header, preset list, day cells, range fill, and time rows
|
|
|
46
46
|
|
|
47
47
|
## API
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
Supported runtime exports: `Calendar`, `DatePicker`, `DatePickerTrigger`, `DateRangePicker`, `RangeCalendar`, `calendarSurface`, `pickerTrigger`, `addDays`, `addMonths`, `formatCalendarDate`, `formatCalendarRange`, `formatMonthTitle`, `getCalendarCells`, `getCalendarDayState`, `getCalendarKeyboardTarget`, `getNextRange`, `isAfterOrSameDay`, `isBeforeDay`, `isBeforeOrSameDay`, `isSameDay`, `isSameMonth`, `normalizeRange`, `startOfDay`, `startOfMonth`, `toCalendarDateId`.
|
|
50
50
|
|
|
51
51
|
| Contract | Values |
|
|
52
52
|
| --- | --- |
|
|
@@ -75,3 +75,23 @@ Covered source files: `components/date-picker.tsx`, `components/date-picker-stat
|
|
|
75
75
|
## Accessibility
|
|
76
76
|
|
|
77
77
|
Keep native semantics, accessible names, keyboard reachability, focus-visible treatment, and status/error announcements intact when composing this component.
|
|
78
|
+
|
|
79
|
+
<!-- registry-contract:start -->
|
|
80
|
+
## Registry Contract
|
|
81
|
+
|
|
82
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
83
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
84
|
+
|
|
85
|
+
| Field | Values |
|
|
86
|
+
| --- | --- |
|
|
87
|
+
| `supportedExports` | `components/date-picker.tsx: Calendar, DatePicker, DatePickerTrigger, DateRangePicker, RangeCalendar, calendarSurface, pickerTrigger`, `components/date-picker-state.ts: addDays, addMonths, formatCalendarDate, formatCalendarRange, formatMonthTitle, getCalendarCells, getCalendarDayState, getCalendarKeyboardTarget, getNextRange, isAfterOrSameDay, isBeforeDay, isBeforeOrSameDay, isSameDay, isSameMonth, normalizeRange, startOfDay, startOfMonth, toCalendarDateId` |
|
|
88
|
+
| `parts` | `Calendar`, `RangeCalendar`, `DatePicker`, `DateRangePicker`, `DatePickerTrigger` |
|
|
89
|
+
| `registryDependencies` | `popover` |
|
|
90
|
+
| `props.density` | `"compact" \| "default" \| "comfortable"; default "comfortable"; Aligns DatePicker and DateRangePicker triggers to the shared 32px, 36px, or 40px control contract.` |
|
|
91
|
+
| `props.icon` | `React.ReactNode; default "calendar"; Uses the calendar icon by default or accepts an explicit replacement node.` |
|
|
92
|
+
| `props.triggerProps` | `React.ComponentProps<"button">; default null; Forwards accessible trigger attributes such as id and aria-label without replacing DatePicker geometry.` |
|
|
93
|
+
| `densities` | `compact`, `default`, `comfortable` |
|
|
94
|
+
| `modes` | `single-calendar`, `single-month-year`, `double-calendar`, `double-calendar-with-presets`, `single-range-calendar`, `date-picker`, `date-range-picker` |
|
|
95
|
+
| `states` | `open`, `closed` |
|
|
96
|
+
| `tokens` | `--bh-bg-brand-bold`, `--bh-bg-brand-subtle`, `--bh-bg-default`, `--bh-bg-default-hover`, `--bh-bg-raised`, `--bh-border-disabled`, `--bh-border-focus`, `--bh-border-input`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-button-sm-height`, `--bh-button-xs-height`, `--bh-content-brand-default`, `--bh-content-brand-strong`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-on-brand`, `--bh-content-subtle`, `--bh-control-default`, `--bh-date-day-cell-height`, `--bh-date-event-dot-offset-bottom`, `--bh-date-event-dot-size`, `--bh-date-list-item-height`, `--bh-date-month-year-item-height`, `--bh-date-month-year-list-top`, `--bh-date-month-year-list-width`, `--bh-date-month-year-spacer-height`, `--bh-date-nav-button-size`, `--bh-date-nav-icon-size`, `--bh-date-picker-width`, `--bh-date-presets-width`, `--bh-date-range-month-width`, `--bh-date-range-surface-max-width`, `--bh-date-surface-border`, `--bh-date-surface-width-calendar`, `--bh-date-surface-width-picker`, `--bh-date-time-input-min-height`, `--bh-date-title-chevron-size`, `--bh-date-title-height`, `--bh-date-trigger-border`, `--bh-date-trigger-height`, `--bh-date-trigger-icon-size`, `--bh-date-trigger-shadow`, `--bh-date-trigger-width`, `--bh-icon-stroke-180`, `--bh-interactive-ghost-hover`, `--bh-interactive-input-default`, `--bh-interactive-input-disabled`, `--bh-interactive-soft-default`, `--bh-interactive-soft-hover`, `--bh-opacity-0`, `--bh-radius-2xl-12`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-radius-md-6`, `--bh-radius-sm-4`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-text-body-2xs-medium-font-size`, `--bh-text-body-2xs-medium-font-weight`, `--bh-text-body-2xs-medium-letter-spacing`, `--bh-text-body-2xs-medium-line-height`, `--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-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-z-raised`, `--shadow-button-focus`, `--shadow-component-default`, `--shadow-date-month-year-list`, `--shadow-date-surface`, `--shadow-date-time-input`, `--shadow-input-focus-ring` |
|
|
97
|
+
<!-- registry-contract:end -->
|
|
@@ -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,21 @@ 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
|
+
| `modes` | `single`, `multiple` |
|
|
199
|
+
| `sizes` | `lg`, `sm` |
|
|
200
|
+
| `states` | `default`, `hover`, `disabled`, `uploaded`, `uploading`, `uploading-progress`, `error` |
|
|
201
|
+
| `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` |
|
|
202
|
+
| `variants` | `default`, `button` |
|
|
203
|
+
<!-- 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-lg`, `--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-border-subtle`, `--bh-border-width-default`, `--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 -->
|