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
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable Banhaten changes are recorded here. Releases follow the policy in `docs/design-system/release-policy.md`.
|
|
4
|
+
|
|
5
|
+
## 0.2.0 - 2026-08-08
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- Canonical JSON-driven token generation and strict component token enforcement.
|
|
10
|
+
- Color Contrast documentation covering every audited theme, mode, foreground, and background scenario.
|
|
11
|
+
- Item and Toggle Group primitives, inherited direction context, Arabic font installation, and named categorical chart tokens.
|
|
12
|
+
- Receipt-backed CLI drift protection, unified diffs, and isolated compilation for every registry component.
|
|
13
|
+
- Documentation search, token search/copy, stable component and pattern separation, and dedicated lab navigation.
|
|
14
|
+
- `SegmentedControl` and `KbdShortcut` primitives with accessibility, RTL, registry metadata, examples, and tests.
|
|
15
|
+
- Semantic `compact`, `default`, and `comfortable` density across Button, Input, Select, DatePicker, ButtonGroup, SegmentedControl, and Toolbar controls.
|
|
16
|
+
- Canonical collection-filter, results-toolbar, and control-density recipes with accessibility and visual-regression coverage.
|
|
17
|
+
- Install-time coding-agent guidance, a read-only `banhaten doctor` adoption audit, and recurring-gap promotion reporting.
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Production components no longer invent demo content, fake actions, or fixed sample dates.
|
|
22
|
+
- Input and Select no longer invent optional leading, information, or trailing icons when those props are omitted; explicit flags retain the previous built-in adornments.
|
|
23
|
+
- Registry component metadata now publishes machine-readable prop types, rendered defaults, and descriptions for optional visual slots.
|
|
24
|
+
- Registry component token metadata is generated from source references.
|
|
25
|
+
- Pagination, OTP, Carousel, Alert, and Toast direction behavior now resolves from explicit props, provider context, or the nearest document boundary.
|
|
26
|
+
- The default appearance keeps blue brand roles but now composes all neutral surfaces, borders, content, and interaction roles from the reviewed gray ramp in light and dark modes.
|
|
27
|
+
- Registry metadata now declares capability defaults, recommended uses, avoid guidance, recipes, and deprecated props instead of inferring defaults from array order.
|
|
28
|
+
- Toolbar controls default to the shared 36px density; use `density="comfortable"` for the previous 40px toolbar height.
|
|
29
|
+
|
|
30
|
+
### Fixed
|
|
31
|
+
|
|
32
|
+
- Undefined token references, raw component values, inaccessible progress semantics, no-op controls, and the Arabic Pagination “Previous” label.
|
|
33
|
+
- Documentation section anchors, narrow Input preview overflow, Popover arrow sizing, Slideout icon geometry, and playground bundle chunking.
|
|
34
|
+
- High-severity playground advisories in Nano ID, PostCSS, and Undici through patched lockfile versions.
|
|
35
|
+
|
|
36
|
+
### Migration
|
|
37
|
+
|
|
38
|
+
- Prefer `density` over legacy component-specific sizes when controls share a row. Legacy size props continue to work.
|
|
39
|
+
- Replace Input `hasLeadingIcon` and `hasInformationIcon` with explicit `leadingIcon`/`trailingIcon`, or use `showAtSign`/`showInfo` for those exact affordances. The legacy flags remain supported for this deprecation window.
|
|
40
|
+
- Replace single-glyph Input shortcuts with `shortcutKeys={["Mod", "K"]}` or `KbdShortcut` for platform-aware keycaps.
|
|
41
|
+
- Run `npx banhaten init` to install `.banhaten/USAGE.md`, then run `npx banhaten doctor` and `npx banhaten diff` before updating consumer components.
|
|
42
|
+
|
|
43
|
+
## 0.1.3
|
|
44
|
+
|
|
45
|
+
- Pre-launch registry and documentation baseline.
|
package/CONTRIBUTING.md
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
# Contributing to Banhaten
|
|
2
|
+
|
|
3
|
+
## Local checks
|
|
4
|
+
|
|
5
|
+
Use Node 18.18 or newer, install the root and playground dependencies, then run:
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm run check
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
The full check validates schemas, CLI behavior, token generation, token-only component styling, registry mirrors, isolated installs, documentation coverage, browser tests, and the production bundle.
|
|
12
|
+
|
|
13
|
+
## Component rules
|
|
14
|
+
|
|
15
|
+
- Build component styling from canonical `--bh-*` and `--shadow-*` tokens. Add
|
|
16
|
+
new values to the appropriate owned fragment under `tokens/source/` before
|
|
17
|
+
using them in component source.
|
|
18
|
+
- Keep product copy, sample dates, and product actions in examples rather than production defaults.
|
|
19
|
+
- Preserve inherited direction and use logical CSS properties. Test both LTR and RTL keyboard behavior.
|
|
20
|
+
- Use native semantics or proven accessible primitives, and document the public API, examples, tokens, RTL behavior, and accessibility contract.
|
|
21
|
+
- Keep stable primitives in Components, larger compositions in Patterns, and experiments in Lab.
|
|
22
|
+
|
|
23
|
+
## Generated artifacts
|
|
24
|
+
|
|
25
|
+
Edit the owned fragments under `tokens/source/` for structured tokens and
|
|
26
|
+
aliases, and edit `registry/catalog/components/<id>.json` for component registry
|
|
27
|
+
metadata. `tokens/banhaten.tokens.json` and `registry/index.json` are compiled
|
|
28
|
+
publication artifacts. Edit `tokens/banhaten.utilities.css` for authored
|
|
29
|
+
Tailwind mappings, keyframes, global rules, accessibility rules, and typography
|
|
30
|
+
utilities. The generated `registry/styles/globals.css` is rebuilt from the
|
|
31
|
+
compiled token catalog and that authored CSS source.
|
|
32
|
+
|
|
33
|
+
After token or registry metadata changes, run:
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
npm run tokens:build
|
|
37
|
+
npm run components:tokens:metadata -- --write
|
|
38
|
+
npm run registry:export
|
|
39
|
+
npm run docs:normalize
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
Do not hand-edit `tokens/banhaten.tokens.json`, `registry/index.json`,
|
|
43
|
+
`registry/styles/globals.css`, `registry.json`, or generated registry contract
|
|
44
|
+
tables.
|
package/README.md
CHANGED
|
@@ -26,6 +26,7 @@ bun install
|
|
|
26
26
|
|
|
27
27
|
- `banhaten.config.json` with schema-backed aliases.
|
|
28
28
|
- The base `cn` utility and `use-direction` hook.
|
|
29
|
+
- `.banhaten/USAGE.md` with agent-readable defaults, recipes, and component-selection rules.
|
|
29
30
|
- The generated Banhaten token stylesheet in your configured CSS file.
|
|
30
31
|
- Tailwind v4 and Vite alias setup when those files are detected.
|
|
31
32
|
- Required package dependencies.
|
|
@@ -35,36 +36,57 @@ bun install
|
|
|
35
36
|
## CLI
|
|
36
37
|
|
|
37
38
|
```bash
|
|
38
|
-
npx banhaten init [--cwd <path>] [--force] [--dry-run]
|
|
39
|
-
npx banhaten add <component...> [--cwd <path>] [--force] [--dry-run]
|
|
40
|
-
npx banhaten diff [component...] [--cwd <path>] [--
|
|
41
|
-
npx banhaten update [component...] [--cwd <path>] [--force] [--dry-run]
|
|
39
|
+
npx banhaten init [--cwd <path>] [--force] [--dry-run] [--json]
|
|
40
|
+
npx banhaten add <component...> [--cwd <path>] [--force] [--dry-run] [--json]
|
|
41
|
+
npx banhaten diff [component...] [--cwd <path>] [--json]
|
|
42
|
+
npx banhaten update [component...] [--cwd <path>] [--force] [--dry-run] [--json]
|
|
42
43
|
npx banhaten list [--json]
|
|
43
44
|
npx banhaten search <query> [--json]
|
|
44
45
|
npx banhaten docs <component> [--json]
|
|
45
46
|
npx banhaten view <component> [--file <registry-source>] [--json]
|
|
47
|
+
npx banhaten doctor [--cwd <path>] [--json]
|
|
46
48
|
npx banhaten version
|
|
47
49
|
```
|
|
48
50
|
|
|
51
|
+
The CLI validates each command before doing project work: unknown flags, missing
|
|
52
|
+
flag values, duplicate flags, and unexpected arguments fail without writing.
|
|
53
|
+
Mutating commands then compute one install plan from the configured destinations
|
|
54
|
+
and the existing TypeScript/Vite root aliases. An alias declared on only one side
|
|
55
|
+
is mirrored to the other; conflicting, ambiguous, or dynamic aliases stop before
|
|
56
|
+
files are staged. The install receipt records the resolved destinations so later
|
|
57
|
+
runs cannot silently create a second generated tree.
|
|
58
|
+
|
|
59
|
+
Dependency ranges follow a guarantee policy: every version admitted by the
|
|
60
|
+
consumer declaration must satisfy Banhaten's requirement. Broader semver ranges
|
|
61
|
+
are safely narrowed when possible and trigger an install hint; partial overlaps,
|
|
62
|
+
disjoint ranges, and opaque package protocols fail without writes. A lockfile is
|
|
63
|
+
never accepted instead of that manifest guarantee. When the manifest is already
|
|
64
|
+
safe, the CLI verifies the bounded installed resolution and npm lock state;
|
|
65
|
+
stale or unverifiable lock state keeps a project-rooted install action visible.
|
|
66
|
+
|
|
67
|
+
Command flags:
|
|
68
|
+
|
|
69
|
+
- `--cwd <path>` runs `init`, `add`, `diff`, `update`, or `doctor` against another project directory.
|
|
70
|
+
- `--dry-run` previews `init`, `add`, or `update` writes.
|
|
71
|
+
- `--force` replaces locally modified generated files after you review `banhaten diff`.
|
|
72
|
+
- `--json` prints machine-readable output for commands that show it above.
|
|
73
|
+
|
|
49
74
|
Global flags:
|
|
50
75
|
|
|
51
|
-
- `--
|
|
52
|
-
- `--dry-run` previews writes.
|
|
53
|
-
- `--force` rewrites generated files even when already current.
|
|
54
|
-
- `--json` prints machine-readable output where supported.
|
|
76
|
+
- `--help` or `-h` prints help.
|
|
55
77
|
- `--silent` or `-s` suppresses normal command output.
|
|
56
78
|
- `--yes` or `-y` is accepted for non-interactive scripts.
|
|
57
79
|
- `--version` or `-v` prints the CLI version.
|
|
58
80
|
|
|
59
81
|
## Generated File Ownership
|
|
60
82
|
|
|
61
|
-
Banhaten is a source registry.
|
|
83
|
+
Banhaten is a source registry. The install receipt records the exact generated hash for every managed file. Unmodified files update automatically; locally modified component files and token blocks are never replaced unless you pass `--force`.
|
|
62
84
|
|
|
63
85
|
Use `banhaten diff` before updating if you edit generated component files locally:
|
|
64
86
|
|
|
65
87
|
```bash
|
|
66
88
|
npx banhaten diff
|
|
67
|
-
npx banhaten update button
|
|
89
|
+
npx banhaten update button --force # only after reviewing intentional replacement
|
|
68
90
|
```
|
|
69
91
|
|
|
70
92
|
Keep product-specific composition outside generated files when possible. Use local wrapper components for app behavior and keep Banhaten files focused on tokens, layout, accessibility primitives, and direction behavior.
|
|
@@ -73,6 +95,13 @@ Keep product-specific composition outside generated files when possible. Use loc
|
|
|
73
95
|
|
|
74
96
|
Every component must style through Banhaten CSS variables, component aliases, or documented exception-ledger values. Raw colors, pixel values, opacity utilities, z-index utilities, durations, and shadow literals are blocked by the component token check.
|
|
75
97
|
|
|
98
|
+
Structured token values and aliases are authored in the owned fragments under
|
|
99
|
+
`tokens/source/`; `tokens/banhaten.tokens.json` is their compiled publication
|
|
100
|
+
artifact. Tailwind mappings, keyframes, global and accessibility rules, and
|
|
101
|
+
typography utilities are authored in `tokens/banhaten.utilities.css`.
|
|
102
|
+
`registry/styles/globals.css` is generated from the compiled token catalog and
|
|
103
|
+
the utility source; neither generated file should be edited directly.
|
|
104
|
+
|
|
76
105
|
Token modes:
|
|
77
106
|
|
|
78
107
|
- Color mode: light and dark.
|
|
@@ -80,6 +109,11 @@ Token modes:
|
|
|
80
109
|
- Radius mode: `default`, `rounded`, `sharp`.
|
|
81
110
|
- Direction: inherited LTR or RTL, with component-level `dir` support where needed.
|
|
82
111
|
|
|
112
|
+
The default appearance is the `blue` brand theme composed with the achromatic
|
|
113
|
+
`gray` neutral scale. This keeps page, card, border, and muted surfaces neutral
|
|
114
|
+
while links, focus states, and primary actions remain blue. The `gray` theme is
|
|
115
|
+
still a separate monochrome brand option; it changes the brand roles as well.
|
|
116
|
+
|
|
83
117
|
Example:
|
|
84
118
|
|
|
85
119
|
```tsx
|
|
@@ -95,23 +129,41 @@ Typography utilities are generated as `.bh-text-*` classes and map directly to t
|
|
|
95
129
|
|
|
96
130
|
## Registry Formats
|
|
97
131
|
|
|
98
|
-
Banhaten maintains
|
|
132
|
+
Banhaten maintains component-owned registry sources and two compiled
|
|
133
|
+
publication artifacts:
|
|
99
134
|
|
|
100
|
-
- `registry/
|
|
135
|
+
- `registry/catalog/components/<id>.json` owns each component contract, while
|
|
136
|
+
`registry/catalog/base.json` and `manifest.json` own the shared contract and
|
|
137
|
+
publication order.
|
|
138
|
+
- `registry/index.json` is the compiled Banhaten artifact used by the CLI. It
|
|
139
|
+
includes an exhaustive, module-aware `supportedExports` runtime contract plus
|
|
140
|
+
non-exhaustive `parts` anatomy, RTL behavior, examples, files, and
|
|
141
|
+
dependencies.
|
|
101
142
|
- `registry.json` is a generated shadcn-compatible export for tools that expect the public shadcn registry schema.
|
|
102
143
|
|
|
103
|
-
|
|
144
|
+
Compile both registry publication artifacts after authored catalog changes:
|
|
104
145
|
|
|
105
146
|
```bash
|
|
106
147
|
npm run registry:export
|
|
107
148
|
```
|
|
108
149
|
|
|
150
|
+
`supportedExports` is checked against the installed TypeScript modules during
|
|
151
|
+
`npm run registry:check`; a renamed, moved, added, or removed runtime export
|
|
152
|
+
fails the release gate. Run `npm run registry:exports` only after reviewing an
|
|
153
|
+
intentional public runtime API change. Type-only exports are outside this
|
|
154
|
+
manifest. `parts` remains an ordered composition aid and does not claim API
|
|
155
|
+
completeness.
|
|
156
|
+
|
|
109
157
|
## Documentation
|
|
110
158
|
|
|
111
159
|
Primary docs live in the playground and render live registry-backed previews, install commands, source snippets, API tables, registry files, RTL behavior, and copyable code panels.
|
|
112
160
|
|
|
113
161
|
Markdown docs live in `docs/design-system/components`. They are checked for install, API, examples, token contract, RTL rules, and accessibility sections.
|
|
114
162
|
|
|
163
|
+
Launch guides cover [installation](docs/design-system/installation.md), [direction and localization](docs/design-system/direction-and-localization.md), [form recipes](docs/design-system/form-recipes.md), [density and elevation](docs/design-system/density-and-elevation.md), the [support matrix](docs/design-system/support-matrix.md), and the [release policy](docs/design-system/release-policy.md).
|
|
164
|
+
|
|
165
|
+
The durable [launch comparison with shadcn/ui](docs/design-system/launch-comparison-shadcn.md) records every audited area, remediation, verification gate, contrast exception, and deliberate non-copying decision.
|
|
166
|
+
|
|
115
167
|
Useful commands:
|
|
116
168
|
|
|
117
169
|
```bash
|
package/SECURITY.md
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
# Security Policy
|
|
2
|
+
|
|
3
|
+
## Supported versions
|
|
4
|
+
|
|
5
|
+
Until Banhaten reaches 1.0, security fixes are applied to the latest published minor release. Consumers should keep the CLI and copied registry components current.
|
|
6
|
+
|
|
7
|
+
## Reporting a vulnerability
|
|
8
|
+
|
|
9
|
+
Report vulnerabilities privately through GitHub’s security-advisory workflow for this repository. Do not open a public issue containing exploit details, credentials, or consumer data.
|
|
10
|
+
|
|
11
|
+
Include the affected Banhaten version, component or CLI command, reproduction steps, impact, and any known mitigation. Maintainers will acknowledge a complete report, assess severity, and coordinate a fix and disclosure.
|
|
12
|
+
|
|
13
|
+
## Scope
|
|
14
|
+
|
|
15
|
+
The CLI, registry source, generated CSS, dependency declarations, documentation application, and release artifacts are in scope. Vulnerabilities in an upstream dependency should also be reported to that upstream project when appropriate.
|
|
@@ -3,8 +3,17 @@
|
|
|
3
3
|
Use these docs with the live playground.
|
|
4
4
|
|
|
5
5
|
- [Registry and CLI](./registry-and-cli.md): registry formats, generated-file ownership, CLI commands, and schema behavior.
|
|
6
|
+
- [Installation](./installation.md): Vite, Next.js/framework-neutral setup, fonts, direction, and safe updates.
|
|
6
7
|
- [Token Governance](./token-governance.md): token-only component rules, exception ledger, and public override surface.
|
|
7
8
|
- [Appearance Presets](./appearance-presets.md): theme and radius mode guidance.
|
|
9
|
+
- [Direction and Localization](./direction-and-localization.md): inherited LTR/RTL and product localization responsibilities.
|
|
10
|
+
- [Form Recipes](./form-recipes.md): accessible Field composition, validation, selection, dates, and RTL.
|
|
11
|
+
- [Density and Elevation](./density-and-elevation.md): supported size contracts and semantic shadow layers.
|
|
12
|
+
- [Support Matrix](./support-matrix.md): framework, runtime, browser, font, and package-manager baseline.
|
|
13
|
+
- [Release Policy](./release-policy.md): stability tiers, versioning, deprecation, and launch gates.
|
|
14
|
+
- [Roadmap](./roadmap.md): explicitly deferred product-specific components and promotion gates.
|
|
15
|
+
- [Launch Comparison](./launch-comparison-shadcn.md): the complete shadcn/ui benchmark, remediation register, and deliberate differences.
|
|
16
|
+
- [Component Docs Pattern](./component-docs-pattern.md): the Base / Anatomy / Alternatives shape every playground component page follows.
|
|
8
17
|
- [Components](./components/README.md): component markdown catalog.
|
|
9
18
|
- [Icon System](./icons.md): icon guidance and explorer notes.
|
|
10
19
|
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# Adoption Quality Remediation
|
|
2
|
+
|
|
3
|
+
This checklist turns the Field Index audit into an implementation program. The
|
|
4
|
+
work is ordered so application recipes depend on stable component contracts,
|
|
5
|
+
and enforcement depends on documented recipes.
|
|
6
|
+
|
|
7
|
+
## 1. Shared control density
|
|
8
|
+
|
|
9
|
+
- [x] Add the semantic densities `compact` (32px), `default` (36px), and
|
|
10
|
+
`comfortable` (40px) to Input, Select, Date Picker, Button, Button Group,
|
|
11
|
+
Segmented Control, and Toolbar controls.
|
|
12
|
+
- [x] Keep existing component-specific `size` props as compatibility aliases.
|
|
13
|
+
- [x] Add a cross-component conformance example and automated height checks.
|
|
14
|
+
- [x] Document the semantic density matrix and precedence rules.
|
|
15
|
+
|
|
16
|
+
Acceptance: controls using the same `density` render at the same physical
|
|
17
|
+
height, regardless of their legacy size names.
|
|
18
|
+
|
|
19
|
+
## 2. Truthful machine-readable defaults
|
|
20
|
+
|
|
21
|
+
- [x] Add explicit capability defaults to the registry schema.
|
|
22
|
+
- [x] Stop inferring defaults from the first capability value.
|
|
23
|
+
- [x] Record explicit defaults for the control family.
|
|
24
|
+
- [x] Validate that every recorded default belongs to its capability list.
|
|
25
|
+
|
|
26
|
+
Acceptance: generated API documentation agrees with runtime defaults.
|
|
27
|
+
|
|
28
|
+
## 3. Input icon and shortcut contracts
|
|
29
|
+
|
|
30
|
+
- [x] Replace ambiguous icon booleans with explicit `showAtSign` and `showInfo`
|
|
31
|
+
props while retaining deprecated aliases.
|
|
32
|
+
- [x] Add a reusable keyboard-shortcut composition to Kbd.
|
|
33
|
+
- [x] Make Input and Toolbar Search use the shared shortcut composition.
|
|
34
|
+
- [x] Document search fields and date fields without implicit icons.
|
|
35
|
+
|
|
36
|
+
Acceptance: a generic leading-icon request can no longer accidentally produce
|
|
37
|
+
an at-sign in new code, and shortcuts use consistent keycaps.
|
|
38
|
+
|
|
39
|
+
## 4. Segmented selection and application recipes
|
|
40
|
+
|
|
41
|
+
- [x] Add a content-width Segmented Control with an optional non-interactive
|
|
42
|
+
label segment.
|
|
43
|
+
- [x] Add a canonical Collection Filter Bar recipe.
|
|
44
|
+
- [x] Add a canonical Results Toolbar recipe with cards-per-row selection.
|
|
45
|
+
- [x] Cover responsive, LTR, and RTL compositions.
|
|
46
|
+
|
|
47
|
+
Acceptance: the controls visible in the Field Index screenshot can be composed
|
|
48
|
+
without raw heights, padding, radii, or bespoke segmented buttons.
|
|
49
|
+
|
|
50
|
+
## 5. Agent and consumer adoption contract
|
|
51
|
+
|
|
52
|
+
- [x] Install `.banhaten/USAGE.md` during `banhaten init`.
|
|
53
|
+
- [x] Add machine-readable recommendation and avoidance guidance to relevant
|
|
54
|
+
registry entries.
|
|
55
|
+
- [x] Add a read-only `banhaten doctor` command for version, drift, raw control
|
|
56
|
+
geometry, ambiguous icon props, and native-control diagnostics.
|
|
57
|
+
- [x] Test text and JSON doctor output.
|
|
58
|
+
|
|
59
|
+
Acceptance: an agent receives actionable rules before composing a page, and a
|
|
60
|
+
consumer can detect the most common forms of design-system drift.
|
|
61
|
+
|
|
62
|
+
## 6. Documentation reliability
|
|
63
|
+
|
|
64
|
+
- [x] Replace fixed multi-column component grids with container-safe layouts.
|
|
65
|
+
- [x] Make documentation section anchors compatible with the hash router.
|
|
66
|
+
- [x] Stabilize calendar tests by controlling the displayed month.
|
|
67
|
+
- [x] Add navigation and overflow regression tests.
|
|
68
|
+
|
|
69
|
+
Acceptance: documentation examples do not overlap and section links preserve
|
|
70
|
+
the active component page.
|
|
71
|
+
|
|
72
|
+
## 7. Visual and governance gates
|
|
73
|
+
|
|
74
|
+
- [x] Add visual baselines for the control family and the two golden recipes.
|
|
75
|
+
- [x] Add critical control-text contrast checks rather than relying only on the
|
|
76
|
+
frozen global contrast debt.
|
|
77
|
+
- [x] Generate a recurring-gap promotion report from background scenarios.
|
|
78
|
+
- [x] Document the promotion rule for gaps that recur in three or more
|
|
79
|
+
backgrounds.
|
|
80
|
+
|
|
81
|
+
Acceptance: component-family drift fails CI, critical controls have explicit
|
|
82
|
+
contrast protection, and recurring application gaps become owned system work.
|
|
83
|
+
|
|
84
|
+
## Validation
|
|
85
|
+
|
|
86
|
+
- [x] Registry, token, documentation, CLI, component, and browser checks pass.
|
|
87
|
+
- [x] The repository remains free of generated-artifact drift.
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
# Agent usage
|
|
2
|
+
|
|
3
|
+
`banhaten init` installs `.banhaten/USAGE.md` into every consumer project. Include that file in coding-agent context so generated and redesigned screens use registry defaults and recipes instead of reconstructing the visual language from memory.
|
|
4
|
+
|
|
5
|
+
The workflow is intentionally inspectable:
|
|
6
|
+
|
|
7
|
+
1. `banhaten search <need>` discovers the intended primitive.
|
|
8
|
+
2. `banhaten docs <component>` returns explicit defaults, fit guidance, avoid rules, and recipes.
|
|
9
|
+
3. `banhaten view <component>` exposes the installed source contract.
|
|
10
|
+
4. `banhaten doctor` reports installed-version drift, local managed-file drift, deprecated ambiguous props, raw geometry overrides, native date/select controls, and missing guidance.
|
|
11
|
+
5. `banhaten diff` previews registry updates without writing.
|
|
12
|
+
|
|
13
|
+
For collection screens, start with the filter-bar and results-toolbar recipes in [Form Recipes](./form-recipes.md). For mixed control rows, follow [Density and Elevation](./density-and-elevation.md).
|
|
@@ -131,7 +131,12 @@ The design system should use semantic tokens instead of importing naming pattern
|
|
|
131
131
|
|
|
132
132
|
Components consume semantic tokens and component-scoped aliases. They must not hard-code preset-specific values or Figma fallback literals in component source.
|
|
133
133
|
|
|
134
|
-
If a Figma reference exposes a literal color, size, radius, shadow, or opacity,
|
|
134
|
+
If a Figma reference exposes a literal color, size, radius, shadow, or opacity,
|
|
135
|
+
promote it into the appropriate owned fragment under `tokens/source/`, then
|
|
136
|
+
consume that token from the component. Reserve `tokens/banhaten.utilities.css`
|
|
137
|
+
for authored global CSS that cannot be represented as token data. Component
|
|
138
|
+
docs may record Figma references for audit and QA, but those literals are not
|
|
139
|
+
implementation fallbacks.
|
|
135
140
|
|
|
136
141
|
Good:
|
|
137
142
|
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
# Component documentation pattern
|
|
2
|
+
|
|
3
|
+
Every component page in the playground renders through one shell so the docs
|
|
4
|
+
read the same way from component to component. A page is not "documented" until
|
|
5
|
+
it follows this shape.
|
|
6
|
+
|
|
7
|
+
## The shape
|
|
8
|
+
|
|
9
|
+
```
|
|
10
|
+
Header
|
|
11
|
+
Anchor nav
|
|
12
|
+
1. Base the component with no options applied
|
|
13
|
+
2. Anatomy live-measured specs, mapped back to tokens
|
|
14
|
+
3. Alternatives every supported variation, one card each
|
|
15
|
+
4. Installation / Usage / Composition / API / RTL / Live Variants
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
Sections 4 and below are generated from `registry/index.json` by
|
|
19
|
+
`RegistryComponentDocs`. Sections 1 to 3 are authored per component.
|
|
20
|
+
|
|
21
|
+
## Writing a page
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import { ComponentDocPage, type DocAlternative } from "./shared/component-doc-page"
|
|
25
|
+
|
|
26
|
+
export function BadgePage({ tokens }: { tokens: Record<string, string> }) {
|
|
27
|
+
return (
|
|
28
|
+
<ComponentDocPage
|
|
29
|
+
componentId="badge"
|
|
30
|
+
title="Badge"
|
|
31
|
+
description="…"
|
|
32
|
+
tokens={tokens}
|
|
33
|
+
base={{ children: <Badge>Badge</Badge>, code: baseCode }}
|
|
34
|
+
anatomy={{
|
|
35
|
+
options: [
|
|
36
|
+
{ id: "size", label: "Size", values: [{ id: "sm", label: "sm" }, { id: "lg", label: "lg" }] },
|
|
37
|
+
{ id: "type", label: "Type", values: […] },
|
|
38
|
+
],
|
|
39
|
+
render: (selection) => <Badge size={selection.size as "sm" | "lg"}>Badge</Badge>,
|
|
40
|
+
}}
|
|
41
|
+
alternatives={badgeAlternatives}
|
|
42
|
+
/>
|
|
43
|
+
)
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
`playground/src/pages/BadgePage.tsx` is the reference implementation.
|
|
48
|
+
|
|
49
|
+
## Anatomy
|
|
50
|
+
|
|
51
|
+
The inspector in `playground/src/pages/shared/anatomy/` measures the rendered
|
|
52
|
+
DOM rather than reading hand-written numbers, so a spec can never drift from the
|
|
53
|
+
component that ships.
|
|
54
|
+
|
|
55
|
+
- The **first** option group becomes the rows of the spec matrix. Every value in
|
|
56
|
+
it is rendered off-screen and measured, so the matrix shows all sizes at once.
|
|
57
|
+
- Remaining groups become scrub toggles.
|
|
58
|
+
- Hovering a spec value highlights the matching segment on the diagram; hovering
|
|
59
|
+
a row switches the diagram to that variant.
|
|
60
|
+
- Each measured value is reverse-mapped to the `--bh-*` token that produced it.
|
|
61
|
+
A value with no matching token renders in the warning color with a `!` — that
|
|
62
|
+
is a real finding, not a display bug: it means the component hard-codes a
|
|
63
|
+
length instead of using the scale.
|
|
64
|
+
- Rulers and offsets are logical, so the whole diagram mirrors correctly in RTL
|
|
65
|
+
while the measurements stay identical.
|
|
66
|
+
|
|
67
|
+
Pass `measureSelector` when the rendered root is a wrapper rather than the
|
|
68
|
+
component itself.
|
|
69
|
+
|
|
70
|
+
Omit `anatomy` only for components with no inline measurable root: portal-only
|
|
71
|
+
overlays and canvas-style components.
|
|
72
|
+
|
|
73
|
+
## Enforcement
|
|
74
|
+
|
|
75
|
+
`playground/e2e/docs-consistency.spec.ts` asserts that every component and
|
|
76
|
+
pattern page renders a Base section, an Alternatives section, and an Anatomy
|
|
77
|
+
inspector with at least one measured row, and logs no console errors.
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
npm --prefix playground run test:browser
|
|
81
|
+
```
|
|
@@ -16,7 +16,12 @@ This audit is focused on whether component color, spacing, sizing, radius, typog
|
|
|
16
16
|
|
|
17
17
|
Current automated coverage:
|
|
18
18
|
|
|
19
|
-
-
|
|
19
|
+
- The token catalog compiler merges the owned `tokens/source/` fragments into
|
|
20
|
+
`tokens/banhaten.tokens.json`; `scripts/generate-token-css.mjs` combines that
|
|
21
|
+
compiled contract with `tokens/banhaten.utilities.css` and emits
|
|
22
|
+
`registry/styles/globals.css` without reading either generated output as an
|
|
23
|
+
authored input.
|
|
24
|
+
- `scripts/check-token-css-reproducibility.mjs` runs the generator in a clean temporary tree with no previous `globals.css` and verifies equivalent generated content after line-ending normalization.
|
|
20
25
|
- `scripts/check-token-contract.mjs` verifies those component aliases exist in the generated CSS.
|
|
21
26
|
- `scripts/check-component-token-usage.mjs` scans `registry/components` for raw component-source values.
|
|
22
27
|
- `scripts/check-registry-mirrors.mjs` verifies playground mirrors stay in sync with registry files.
|
|
@@ -25,7 +30,9 @@ Current automated coverage:
|
|
|
25
30
|
|
|
26
31
|
The component library is mostly token-consistent now. The major items from the previous audit have been completed:
|
|
27
32
|
|
|
28
|
-
- Component aliases
|
|
33
|
+
- Component aliases have explicit owners under `tokens/source/` and compile into
|
|
34
|
+
one publication artifact; JavaScript no longer carries a second token source.
|
|
35
|
+
- Tailwind mappings, keyframes, global rules, accessibility rules, and typography utilities are authored in `tokens/banhaten.utilities.css`; generated CSS is output-only.
|
|
29
36
|
- Generated CSS is current.
|
|
30
37
|
- Component aliases are contract-checked.
|
|
31
38
|
- Registry component source passes the token-usage check.
|
|
@@ -58,7 +65,10 @@ Recommended pattern target:
|
|
|
58
65
|
|
|
59
66
|
### P2: Create A Formal Exception Ledger For Non-Token Literals In Alias Source
|
|
60
67
|
|
|
61
|
-
Raw values
|
|
68
|
+
Raw contract values in the authored token fragments are no longer leaking into
|
|
69
|
+
component source. Intentional external or Figma-specific values carry a type and
|
|
70
|
+
stay reviewable under their canonical owner so future cleanup does not
|
|
71
|
+
accidentally erase brand/media fidelity.
|
|
62
72
|
|
|
63
73
|
Document as approved exceptions or promote into a clearer token group:
|
|
64
74
|
|
|
@@ -24,7 +24,6 @@ Design-system components use semantic props and tokens. Appearance presets may c
|
|
|
24
24
|
- [Checkbox](./checkbox.md): Radix checkbox primitive plus checkbox-card composition with selected, disabled, hover, and RTL states.
|
|
25
25
|
- [Collapsible](./collapsible.md): Radix Collapsible wrapper for disclosure sections with tokenized trigger and content slots.
|
|
26
26
|
- [Command](./command.md): cmdk-backed command menu with search, groups, shortcuts, separators, and empty state.
|
|
27
|
-
- [Command Bar](./command-bar.md): keyboard-friendly command palette with search, recent items, results, empty states, and RTL support.
|
|
28
27
|
- [Context Menu](./context-menu.md): Radix ContextMenu-backed right-click menu with labels, separators, submenus, checks, radios, and shortcuts.
|
|
29
28
|
- [Date Picker](./date-picker.md): calendar and range-picker suite with presets, open states, triggers, time rows, and RTL support.
|
|
30
29
|
- [Divider](./divider.md): horizontal and vertical separator with solid or dotted rules.
|
|
@@ -36,6 +35,7 @@ Design-system components use semantic props and tokens. Appearance presets may c
|
|
|
36
35
|
- [Input](./input.md): text-entry field with labels, helper and error text, add-ons, tags, shortcuts, adornments, and RTL states.
|
|
37
36
|
- [Input Group](./input-group.md): grouped input shell for protocol add-ons, inline actions, prefixes, suffixes, and compact rows.
|
|
38
37
|
- [Input OTP](./input-otp.md): one-time-code field with grouped slots, paste distribution, masked values, hidden form value, and RTL keyboard behavior.
|
|
38
|
+
- [Item](./item.md): composable list and action row with media, content, title, description, actions, separators, variants, sizes, and token-only styling.
|
|
39
39
|
- [Kbd](./kbd.md): keyboard hint primitive for shortcuts, command rows, and form help text.
|
|
40
40
|
- [Label](./label.md): Radix-backed accessible label primitive with required, optional, tone, disabled, and RTL-safe text behavior.
|
|
41
41
|
- [Menu](./menu.md): Radix DropdownMenu-backed command surface with rich item slots, submenus, progress rows, labels, captions, and RTL layout.
|
|
@@ -45,13 +45,14 @@ Design-system components use semantic props and tokens. Appearance presets may c
|
|
|
45
45
|
- [Navigation Menu](./navigation-menu.md): Radix NavigationMenu-backed top navigation with trigger, content, link, viewport, and indicator parts.
|
|
46
46
|
- [Onboarding Step List Item](./onboarding-step-list-item.md): vertical progress-list row with finished, active, and inactive states plus RTL support.
|
|
47
47
|
- [Page Header](./page-header.md): page hierarchy, title metadata, actions, description, and local tabs.
|
|
48
|
-
- [Pagination](./pagination.md): numeric, simple, and summary pagination layouts with soft or ghost styling, captions, and
|
|
48
|
+
- [Pagination](./pagination.md): numeric, simple, and summary pagination layouts with soft or ghost styling, captions, RTL layout, and explicit localized messages.
|
|
49
49
|
- [Popover](./popover.md): contextual overlay primitive with click, focus, hover, positioning, arrows, close affordance, and RTL-safe composition.
|
|
50
50
|
- [Progress](./progress.md): read-only progress meter with value fill, labels, helper text, indicator, spinner, and RTL support.
|
|
51
51
|
- [Progress Slider](./progress-slider.md): Radix Slider-based progress control with start-anchored fill, semantic tones, ticks, and RTL keyboard behavior.
|
|
52
52
|
- [Radio Card](./radio-card.md): rich single-choice option card with Figma content types, active/disabled states, and explicit RTL variants.
|
|
53
53
|
- [Radio Group](./radio-group.md): native-input radio group with labels, descriptions, errors, controlled/uncontrolled values, and RTL-safe field rows.
|
|
54
54
|
- [Select](./select.md): Radix Select-backed field and menu item system with item media, selection styles, validation states, and RTL layout.
|
|
55
|
+
- [Segmented Control](./segmented-control.md): content-width single or multiple selection control with semantic density, an optional label segment, keyboard navigation, and RTL support.
|
|
55
56
|
- [Resizable](./resizable.md): react-resizable-panels-backed split pane primitive with tokenized resize handle.
|
|
56
57
|
- [Sheet](./sheet.md): Radix Dialog-based edge panel with logical start/end placement, top/bottom placement, size variants, and RTL support.
|
|
57
58
|
- [Sidebar](./sidebar.md): composable app sidebar with collapse state, grouped menu items, logical placement, and sidebar tokens.
|
|
@@ -49,3 +49,19 @@ Open the live component page or run `npx banhaten docs accordion` to inspect sou
|
|
|
49
49
|
- `inheritsDirection`: true
|
|
50
50
|
- `textAlignment`: Uses text-start and dir="auto" so Arabic and English copy align and punctuate naturally.
|
|
51
51
|
- `spacing`: Uses gap and logical inherited direction rather than physical left/right spacing.
|
|
52
|
+
|
|
53
|
+
<!-- registry-contract:start -->
|
|
54
|
+
## Registry Contract
|
|
55
|
+
|
|
56
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
57
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
58
|
+
|
|
59
|
+
| Field | Values |
|
|
60
|
+
| --- | --- |
|
|
61
|
+
| `supportedExports` | `components/accordion.tsx: Accordion, AccordionContent, AccordionItem, AccordionTrigger, accordionVariants` |
|
|
62
|
+
| `parts` | `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent` |
|
|
63
|
+
| `registryDependencies` | None |
|
|
64
|
+
| `sizes` | `sm`, `default`, `lg` |
|
|
65
|
+
| `tokens` | `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-duration-accordion`, `--bh-duration-default`, `--bh-easing-out`, `--bh-opacity-50`, `--bh-radius-md-6`, `--bh-radius-xs-2`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--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-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-line-height`, `--bh-text-body-xs-regular-font-size`, `--bh-text-body-xs-regular-line-height`, `--shadow-accordion-item`, `--shadow-button-focus` |
|
|
66
|
+
| `variants` | `default`, `bordered`, `cards`, `soft` |
|
|
67
|
+
<!-- registry-contract:end -->
|
|
@@ -47,7 +47,7 @@ The Figma component defines these top-level variants:
|
|
|
47
47
|
|
|
48
48
|
## Token Contract
|
|
49
49
|
|
|
50
|
-
The component consumes Banhaten semantic tokens and component aliases. Do not hard-code Figma fallback literals in component source; promote any Figma value into `
|
|
50
|
+
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.
|
|
51
51
|
|
|
52
52
|
- Backgrounds: `--bh-bg-raised`, `--bh-bg-success-default`
|
|
53
53
|
- Borders: `--bh-border-default`, `--bh-border-subtle`
|
|
@@ -90,3 +90,17 @@ Open the live component page or run `npx banhaten docs activity-feed` to inspect
|
|
|
90
90
|
## RTL Rules
|
|
91
91
|
|
|
92
92
|
This component has no special RTL contract beyond inherited document direction and logical spacing.
|
|
93
|
+
|
|
94
|
+
<!-- registry-contract:start -->
|
|
95
|
+
## Registry Contract
|
|
96
|
+
|
|
97
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
98
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
99
|
+
|
|
100
|
+
| Field | Values |
|
|
101
|
+
| --- | --- |
|
|
102
|
+
| `supportedExports` | `components/expanded/ActivityFeed.tsx: ActivityFeed, ActivityFeedItem` |
|
|
103
|
+
| `parts` | `ActivityFeed`, `ActivityFeedItem` |
|
|
104
|
+
| `registryDependencies` | `button` |
|
|
105
|
+
| `tokens` | `--bh-activity-feed-compact-width`, `--bh-bg-accent-purple-subtle`, `--bh-bg-raised`, `--bh-bg-success-default`, `--bh-border-accent-purple-strong`, `--bh-border-default`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-link`, `--bh-content-on-brand`, `--bh-content-subtle`, `--bh-control-default`, `--bh-font-family`, `--bh-font-weight-medium`, `--bh-font-weight-regular`, `--bh-font-weight-semibold`, `--bh-interactive-brand-default`, `--bh-interactive-secondary-default`, `--bh-radius-full`, `--bh-radius-sm-4`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--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-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-base-letter-spacing`, `--bh-text-body-md-font-size`, `--bh-text-body-md-line-height`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-line-height`, `--bh-text-body-xs-regular-font-size`, `--shadow-button-raised`, `--shadow-component-default` |
|
|
106
|
+
<!-- registry-contract:end -->
|
|
@@ -68,3 +68,20 @@ Open the live component page or run `npx banhaten docs alert-dialog` to inspect
|
|
|
68
68
|
- `textDirection`: Title and description use dir="auto" for Arabic and English copy.
|
|
69
69
|
- `spacing`: Header, body, and footer use logical layout and Banhaten spacing tokens so action order and copy mirror naturally.
|
|
70
70
|
- `semantics`: Radix AlertDialog provides the modal alert role, focus trap, and safe cancellation behavior.
|
|
71
|
+
|
|
72
|
+
<!-- registry-contract:start -->
|
|
73
|
+
## Registry Contract
|
|
74
|
+
|
|
75
|
+
This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
|
|
76
|
+
`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
|
|
77
|
+
|
|
78
|
+
| Field | Values |
|
|
79
|
+
| --- | --- |
|
|
80
|
+
| `supportedExports` | `components/alert-dialog.tsx: AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogIcon, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, alertDialogContentVariants` |
|
|
81
|
+
| `parts` | `AlertDialog`, `AlertDialogTrigger`, `AlertDialogContent`, `AlertDialogPortal`, `AlertDialogOverlay`, `AlertDialogHeader`, `AlertDialogIcon`, `AlertDialogTitle`, `AlertDialogDescription`, `AlertDialogBody`, `AlertDialogFooter`, `AlertDialogCancel`, `AlertDialogAction` |
|
|
82
|
+
| `registryDependencies` | `button` |
|
|
83
|
+
| `features` | `alert-dialog semantics`, `cancel focus pattern`, `safe cancel action`, `destructive action`, `semantic intent icon` |
|
|
84
|
+
| `intents` | `default`, `warning`, `danger` |
|
|
85
|
+
| `sizes` | `sm`, `default`, `lg` |
|
|
86
|
+
| `tokens` | `--bh-alert-dialog-border`, `--bh-alert-dialog-width`, `--bh-bg-backdrop`, `--bh-bg-danger-subtle`, `--bh-bg-neutral-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-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-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-component-default`, `--shadow-modal` |
|
|
87
|
+
<!-- registry-contract:end -->
|