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
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
# Launch Comparison: Banhaten and shadcn/ui
|
|
2
|
+
|
|
3
|
+
Reviewed against the official shadcn/ui CLI, registry, theming, and RTL documentation on 2026-07-10. shadcn/ui is the distribution and documentation benchmark—not Banhaten’s visual source.
|
|
4
|
+
|
|
5
|
+
## Outcome
|
|
6
|
+
|
|
7
|
+
Banhaten is a launch candidate with a distinct product contract: Arabic and English-first typography, inherited RTL by default, seven brand themes, three radius modes, stable primitives separated from larger Patterns, and a hard rule that distributable components consume canonical Banhaten tokens.
|
|
8
|
+
|
|
9
|
+
The only intentionally unresolved visual exception is color contrast. The reviewed default-theme correction composes blue brand roles with the gray neutral ramp; the remaining source color pairs are documented rather than changed automatically. The Color Contrast page evaluates 742 theme/mode scenarios, reports 274 failures and 468 passes, and records the pair, score, threshold, state, swatches, recommendation, and best existing foreground candidate.
|
|
10
|
+
|
|
11
|
+
## Benchmark Summary
|
|
12
|
+
|
|
13
|
+
| Area | shadcn/ui benchmark | Banhaten launch answer | Status |
|
|
14
|
+
| --- | --- | --- | --- |
|
|
15
|
+
| Distribution | Source registry and CLI installation | Canonical Banhaten registry plus generated shadcn-compatible `registry.json` | Verified |
|
|
16
|
+
| Component ownership | Copied source is consumer-owned | Receipt-backed generated ownership; local drift blocks updates unless explicitly forced | Stronger safety |
|
|
17
|
+
| Registry dependencies | Dependency closure and typed registry items | Dependency graph, schema validation, mirror checks, and isolated compilation of all 67 items | Verified |
|
|
18
|
+
| CLI | `init`, `add`, `view`, `docs`, migrations, presets | `init`, `add`, real `diff`, safe `update`, `list`, `search`, full `docs`, and `view` | Launch scope verified |
|
|
19
|
+
| Framework setup | Multiple framework templates | Vite auto-configuration and framework-neutral/Next-style source installation | Verified |
|
|
20
|
+
| Package managers | npm, pnpm, Yarn, Bun | Detection and install hints tested for all four | Verified |
|
|
21
|
+
| Theming | CSS variables, dark mode, presets | Live semantic aliases, light/dark, seven brand themes, three radius modes | Verified |
|
|
22
|
+
| Token contract | Optional CSS-variable path | CSS variables are mandatory; raw component colors, sizes, opacity, duration, z-index, shadow, and generic internal aliases fail CI | Banhaten-specific |
|
|
23
|
+
| RTL | First-class RTL and install-time transformations | Authored logical layout, inherited direction hook/provider, Arabic font, explicit message catalogs, and RTL keyboard tests | Banhaten-specific |
|
|
24
|
+
| Documentation | Live preview/code, component examples, API and CLI docs | Live registry previews, exact example source, extracted TypeScript props, token contract, accessibility contract, RTL, files, navigation/token search, and copy actions | Verified |
|
|
25
|
+
| Components vs blocks | Components and larger blocks | Stable Components and broader Patterns; experiments and visual QA isolated under Lab | Verified |
|
|
26
|
+
| Accessibility | Primitive semantics and per-component guidance | Native/Radix semantics, focus handling, dialog traps, tabs contract, reduced motion, forced colors, axe, Chromium/Firefox/WebKit tests | Verified except documented colors |
|
|
27
|
+
| Release governance | Changelog and frequent CLI/schema evolution | Changelog, security, contributing, support matrix, stability tiers, deprecation, release gate, and roadmap | Verified |
|
|
28
|
+
|
|
29
|
+
## Full Finding Register
|
|
30
|
+
|
|
31
|
+
### Components and behavior
|
|
32
|
+
|
|
33
|
+
- Removed sample titles, images, actions, close controls, dates, time rows, and no-op callbacks from production defaults. Examples now own demonstration content.
|
|
34
|
+
- Added Item and controlled/uncontrolled Toggle Group APIs, including single/multiple selection and RTL-aware keyboard movement.
|
|
35
|
+
- Repaired Command Bar search/clear/submit behavior, Table disabled/action behavior, File Upload progress semantics, Spinner reduced-motion behavior, and Date Picker presets/month-year interaction.
|
|
36
|
+
- Standardized direction resolution for Alert, Pagination, Input OTP, Carousel, and Toast through explicit props, `DirectionProvider`, nearest `[dir]`, then document direction.
|
|
37
|
+
- Corrected Arabic Pagination copy and kept product strings explicit rather than silently localizing demo text.
|
|
38
|
+
- Added focused behavior tests; the component suite currently runs 171 tests.
|
|
39
|
+
|
|
40
|
+
### Colors and tokens
|
|
41
|
+
|
|
42
|
+
- Preserved every requested source color value and moved all failing combinations into the generated Color Contrast report.
|
|
43
|
+
- Split system, typography, effects, component variables, dark effects, and
|
|
44
|
+
scoped aliases into owned `tokens/source/` fragments that compile to
|
|
45
|
+
`tokens/banhaten.tokens.json`.
|
|
46
|
+
- Generated live `var(...)` alias graphs rather than flattened semantic values and verified custom-property closure.
|
|
47
|
+
- Added named categorical chart semantics, spinner/skeleton/motion tokens, exact icon stroke tokens, Item tokens, default border/transition wiring, reduced motion, and forced-color focus rules.
|
|
48
|
+
- Generated exact component token metadata from source. All 67 registry components have non-empty token contracts.
|
|
49
|
+
- Deduplicated theme CSS against the default cascade without changing values, reducing generated CSS from 466,671 bytes to 154,130 bytes.
|
|
50
|
+
- Documented the no-global-density decision and the semantic elevation hierarchy.
|
|
51
|
+
|
|
52
|
+
### Usage and composition
|
|
53
|
+
|
|
54
|
+
- Added installation, direction/localization, form recipes, density/elevation, support, roadmap, and release-policy guides.
|
|
55
|
+
- Separated stable Components from broader Patterns and isolated Component Matrix, Theme Test, Theme Lab, and screenshot review under Lab/Visual QA.
|
|
56
|
+
- Added explicit TypeScript prop source, token contract, accessibility contract, composition notes, RTL behavior, and registry file links to shared component documentation.
|
|
57
|
+
- Added searchable/copyable token pages with computed values and `var(--token)` usage syntax.
|
|
58
|
+
|
|
59
|
+
### Installation and registry
|
|
60
|
+
|
|
61
|
+
- Added Inter and IBM Plex Sans Arabic weights 400–700 automatically and composed them through font-family tokens.
|
|
62
|
+
- Removed dead `style` and `tsx` config fields; config now contains only settings the CLI honors.
|
|
63
|
+
- Added real unified diff output and SHA-256 ownership receipts for base files, components, and the generated token block.
|
|
64
|
+
- Prevented `add` and `update` from overwriting local edits without `--force`; transactions roll back on failure.
|
|
65
|
+
- Kept CSS outside the marked Banhaten token block intact and protected edits inside the generated block.
|
|
66
|
+
- Tested Vite, non-Vite/Next-style projects, dependency conflicts, JSONC aliases, unsupported Vite config rollback, npm, pnpm, Yarn, and Bun.
|
|
67
|
+
- Generated a current shadcn-compatible registry and compiled every registry component in isolation.
|
|
68
|
+
- Removed design-source ZIP archives from the published package while keeping the canonical JSON contract and required registry assets.
|
|
69
|
+
|
|
70
|
+
### Documentation and presentation
|
|
71
|
+
|
|
72
|
+
- Removed launch-blocking `noindex`, added description/social metadata, dynamic page titles, skip link, release status/version, and responsive searchable navigation.
|
|
73
|
+
- Reframed the overview around quick start, token rules, safe updates, and the documented contrast exception.
|
|
74
|
+
- Added focus trap, Escape, initial focus, and focus return to Customize and Component Matrix dialogs.
|
|
75
|
+
- Completed Preview/Code tab IDs, `aria-controls`, `aria-labelledby`, roving focus, and keyboard navigation.
|
|
76
|
+
- Renamed ambiguous “Copy Page” to “Copy page link” and added clipboard fallback.
|
|
77
|
+
- Changed the CLI `docs` command from a path hint to the complete packaged component documentation plus metadata.
|
|
78
|
+
|
|
79
|
+
### Verification and release
|
|
80
|
+
|
|
81
|
+
- Browser checks cover Chromium, Firefox, and WebKit; visual baselines stay on Chromium for deterministic snapshots.
|
|
82
|
+
- Automated checks cover LTR/RTL behavior, portals, focus return, docs navigation, mobile navigation, token copy/search, live theme overrides, the frozen contrast totals, reduced motion, forced colors, and serious/critical axe findings outside the intentionally documented color rule.
|
|
83
|
+
- Bundle budgets, schema validation, token generation, token-only styling, registry mirrors, documentation coverage, CLI integration, isolated installs, package audit, and tarball contents are release gates.
|
|
84
|
+
|
|
85
|
+
## Deliberate Differences, Not Missing Copies
|
|
86
|
+
|
|
87
|
+
Banhaten does not copy shadcn’s preset marketplace, `create` templates, registry namespaces, programmatic registry API, or migration catalog for launch. Those are distribution-platform capabilities, not component-quality requirements. They belong on the roadmap only when Banhaten has a concrete consumer need and maintenance owner.
|
|
88
|
+
|
|
89
|
+
Banhaten also does not support opting out of CSS variables: the canonical token graph is the mechanism that keeps themes, Arabic typography, accessibility modes, and every component aligned. That constraint is intentional and is the core of Banhaten’s visual independence.
|
|
90
|
+
|
|
91
|
+
## Reference Benchmark
|
|
92
|
+
|
|
93
|
+
- [shadcn/ui CLI](https://ui.shadcn.com/docs/cli)
|
|
94
|
+
- [shadcn/ui registry schema](https://ui.shadcn.com/docs/registry/registry-json)
|
|
95
|
+
- [shadcn/ui registry API](https://ui.shadcn.com/docs/registry/api-reference)
|
|
96
|
+
- [shadcn/ui theming](https://ui.shadcn.com/docs/theming)
|
|
97
|
+
- [shadcn/ui RTL](https://ui.shadcn.com/docs/rtl)
|
|
98
|
+
- [shadcn/ui changelog](https://ui.shadcn.com/docs/changelog)
|
|
@@ -1,19 +1,37 @@
|
|
|
1
1
|
# Registry And CLI
|
|
2
2
|
|
|
3
|
-
Banhaten publishes two
|
|
3
|
+
Banhaten maintains one authored registry catalog and publishes two compiled
|
|
4
|
+
registry shapes.
|
|
4
5
|
|
|
5
6
|
| Artifact | Purpose |
|
|
6
7
|
| --- | --- |
|
|
7
|
-
| `registry/
|
|
8
|
+
| `registry/catalog/` | Authored base and component-owned contracts plus the intentional publication order. |
|
|
9
|
+
| `registry/index.json` | Compiled artifact consumed by the Banhaten CLI. Includes exhaustive module-aware runtime exports, non-exhaustive composition parts, files, examples, dependencies, RTL behavior, and design-system capabilities. |
|
|
8
10
|
| `registry.json` | Generated shadcn-compatible export for tools that expect `https://ui.shadcn.com/schema/registry.json`. |
|
|
9
11
|
|
|
10
|
-
|
|
12
|
+
Edit `registry/catalog/components/<id>.json` for a component or
|
|
13
|
+
`registry/catalog/base.json` for shared installation metadata, then run
|
|
14
|
+
`npm run registry:export` to compile `registry/index.json` and `registry.json`.
|
|
15
|
+
|
|
16
|
+
`npm run package:check` verifies the actual npm tarball rather than the
|
|
17
|
+
worktree: it extracts the archive, derives every required registry source and
|
|
18
|
+
example from the packed index, checks byte-for-byte closure, then runs the
|
|
19
|
+
packed CLI and installs the full component catalog into a clean project.
|
|
20
|
+
|
|
21
|
+
Each component groups its exhaustive runtime value API under
|
|
22
|
+
`supportedExports`, keyed by the exact registry source module that owns the
|
|
23
|
+
installed import path. The release gate resolves those modules with TypeScript
|
|
24
|
+
and rejects missing, stale, moved, type-only, or newly unlisted runtime values.
|
|
25
|
+
Run `npm run registry:exports` only after reviewing an intentional runtime API
|
|
26
|
+
change. The separate `parts` list is ordered component anatomy for examples and
|
|
27
|
+
composition; it is deliberately non-exhaustive and every part must resolve to a
|
|
28
|
+
supported runtime export.
|
|
11
29
|
|
|
12
30
|
## Generated Files
|
|
13
31
|
|
|
14
|
-
Installed files are generated source. `banhaten add` and `banhaten update`
|
|
32
|
+
Installed files are generated source with receipt-backed ownership hashes. `banhaten add` and `banhaten update` replace a stale file automatically only when its current hash still matches the version Banhaten installed. A locally modified file stops the transaction and remains untouched unless the caller reviews `banhaten diff` and explicitly passes `--force`.
|
|
15
33
|
|
|
16
|
-
The token stylesheet is generated-owned too. `init`, `add`, and `update` refresh the
|
|
34
|
+
The token stylesheet is generated-owned too. `init`, `add`, and `update` refresh the marked Banhaten token block while preserving CSS outside the block. Local edits inside the marked block receive the same drift protection; place product overrides after the block.
|
|
17
35
|
|
|
18
36
|
## CLI Commands
|
|
19
37
|
|
|
@@ -21,14 +39,19 @@ The token stylesheet is generated-owned too. `init`, `add`, and `update` refresh
|
|
|
21
39
|
npx banhaten init
|
|
22
40
|
npx banhaten add button input select
|
|
23
41
|
npx banhaten diff
|
|
24
|
-
npx banhaten update button
|
|
42
|
+
npx banhaten update button --force
|
|
25
43
|
npx banhaten list --json
|
|
26
44
|
npx banhaten search input
|
|
27
45
|
npx banhaten docs button
|
|
28
46
|
npx banhaten view button
|
|
47
|
+
npx banhaten doctor
|
|
29
48
|
```
|
|
30
49
|
|
|
31
|
-
|
|
50
|
+
`doctor` is read-only. It reports installed-version drift, missing or modified
|
|
51
|
+
managed files, missing agent guidance, deprecated ambiguous props, local raw
|
|
52
|
+
control geometry, and native date/select controls that bypass the registry.
|
|
53
|
+
|
|
54
|
+
The CLI resolves one unambiguous package-manager root before printing dependency install hints. Dependency requirements use `semver` containment rather than range overlap: already-narrow consumer ranges are preserved, broader ranges are narrowed only when the complete Banhaten range fits inside them, and partial/disjoint or non-semver declarations stop atomically. A narrowed manifest always produces an install hint; an unchanged manifest suppresses that action only when bounded installed packages and a supported npm lock agree. Other lock formats remain conservative and are reconciled by their selected package manager.
|
|
32
55
|
|
|
33
56
|
## Schema Files
|
|
34
57
|
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
# Release Policy
|
|
2
|
+
|
|
3
|
+
## Stability tiers
|
|
4
|
+
|
|
5
|
+
| Tier | Promise | Documentation location |
|
|
6
|
+
| --- | --- | --- |
|
|
7
|
+
| Stable component | Supported public API, token contract, accessibility behavior, and migration notes | Components |
|
|
8
|
+
| Pattern | Supported composition with a broader layout and product-integration contract | Patterns |
|
|
9
|
+
| Lab | Evaluation or visual-QA surface; not a supported consumer API | Lab / Visual QA lab |
|
|
10
|
+
|
|
11
|
+
## Versioning
|
|
12
|
+
|
|
13
|
+
Banhaten uses semantic versioning. Before 1.0, a minor release may contain a breaking API change, but every breaking change still requires a changelog entry and migration instructions. Patch releases must remain backward compatible.
|
|
14
|
+
|
|
15
|
+
Deprecations remain documented for at least one minor release before removal. Deprecated exports keep working during that window and include a replacement path.
|
|
16
|
+
|
|
17
|
+
## Release gate
|
|
18
|
+
|
|
19
|
+
A release candidate must pass:
|
|
20
|
+
|
|
21
|
+
1. Canonical schema and token generation checks.
|
|
22
|
+
2. The component token checker with no raw-value or unresolved-variable violations.
|
|
23
|
+
3. CLI integration tests and isolated compilation for every registry component.
|
|
24
|
+
4. LTR and RTL interaction tests, accessibility checks, production build, and bundle budgets.
|
|
25
|
+
5. Documentation coverage for install, usage, examples, API, tokens, direction, accessibility, and migration impact.
|
|
26
|
+
6. Color Contrast report regeneration. Contrast failures are documented; color values change only through an explicit design decision.
|
|
27
|
+
|
|
28
|
+
## Ownership
|
|
29
|
+
|
|
30
|
+
Every release has one maintainer responsible for the registry artifact, one design reviewer for token and visual changes, and one accessibility reviewer for interaction or semantic changes. A release is not complete until the changelog and package contents are verified from a packed tarball.
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
# Roadmap
|
|
2
|
+
|
|
3
|
+
The roadmap separates launch requirements from product-specific expansion. Items below are not stable APIs until they move into Components or Patterns with registry source, tokens, docs, and tests.
|
|
4
|
+
|
|
5
|
+
| Candidate | Current direction | Gate before promotion |
|
|
6
|
+
| --- | --- | --- |
|
|
7
|
+
| Drawer naming/API | Evaluate whether Sheet and Slideout already cover the use cases | Distinct semantics and migration value |
|
|
8
|
+
| Attachment/file item | Compose Item, File Upload, Progress, and actions first | Repeated product demand and a stable data model |
|
|
9
|
+
| Hijri calendar | Keep calendar formatting in the product layer for launch | Calendar-system adapter, locale rules, keyboard QA, and date-library decision |
|
|
10
|
+
| Compact density mode | Use supported component sizes | Named token mode, target-size guardrails, and full matrix QA |
|
|
11
|
+
| Additional Arabic fonts | IBM Plex Sans Arabic is the installed default | Licensing, loading cost, fallback metrics, and typography review |
|
|
12
|
+
| Framework adapters | Source installation remains framework-neutral | Maintained SSR/CSP tests and clear ownership |
|
|
13
|
+
|
|
14
|
+
Feature requests should describe the user problem, why existing primitives do not compose cleanly, accessibility requirements, direction/localization impact, and the proposed token contract.
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# Support Matrix
|
|
2
|
+
|
|
3
|
+
| Area | Launch baseline |
|
|
4
|
+
| --- | --- |
|
|
5
|
+
| React | 18.2.x and 19.x; packed registry sources compile against both compatibility floors in CI |
|
|
6
|
+
| React DOM | 18.2.x and 19.x; kept on the same major as React |
|
|
7
|
+
| Tailwind CSS | 4.x |
|
|
8
|
+
| Node | Published CLI and registry: 18.18 or newer, with packed-artifact CI on 18.18.0, 20, and 22; the private playground build toolchain runs on Node 22 |
|
|
9
|
+
| TypeScript | Bundler-style module resolution; copied source is TypeScript/TSX |
|
|
10
|
+
| Browsers | Current stable Chrome/Edge, Firefox, and Safari; previous major versions are best-effort until they are included in automated release testing |
|
|
11
|
+
| Direction | Inherited LTR and RTL; explicit component overrides where documented |
|
|
12
|
+
| Fonts | Inter for Latin and IBM Plex Sans Arabic for Arabic, installed by the CLI |
|
|
13
|
+
| Package managers | npm, pnpm, Yarn, and Bun install hints |
|
|
14
|
+
| Tooling | Vite configured automatically when detected; framework-neutral source installation otherwise |
|
|
15
|
+
|
|
16
|
+
Internet Explorer and browsers without modern CSS custom properties, logical properties, or ES2022 support are not supported. Consumer applications remain responsible for their framework’s SSR, CSP, and browser-transpilation configuration.
|
|
17
|
+
|
|
18
|
+
Release verification builds and extracts the real npm tarball, derives its
|
|
19
|
+
required registry file and example closure from the packed index, executes the
|
|
20
|
+
packed CLI from outside the repository, and installs every registry component
|
|
21
|
+
into a clean fixture. React compatibility jobs then compile that packed source
|
|
22
|
+
against exact React 18.2 and React 19 floors instead of relying only on the
|
|
23
|
+
playground lockfile.
|
|
@@ -29,7 +29,7 @@ The implementation follows the Figma component at `Design system 3.0 Copy / Tabs
|
|
|
29
29
|
|
|
30
30
|
## Token Contract
|
|
31
31
|
|
|
32
|
-
The component consumes Banhaten semantic tokens and component aliases. Do not hard-code Figma fallback literals in component source; promote any Figma value into `
|
|
32
|
+
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.
|
|
33
33
|
|
|
34
34
|
- Backgrounds: `--bh-bg-neutral-subtle`, `--bh-bg-default`
|
|
35
35
|
- Borders: `--bh-border-default`
|
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
Banhaten components must be built from Banhaten tokens. Component source may use:
|
|
4
4
|
|
|
5
5
|
- Generated `--bh-*` semantic tokens.
|
|
6
|
-
-
|
|
6
|
+
- System, typography, effect, and component variables compiled from their owned
|
|
7
|
+
fragments under `tokens/source/` into the published `cssVariables` contract.
|
|
7
8
|
- shadcn alias bridge variables such as `--background`, `--foreground`, and `--ring` only when they point back to Banhaten tokens.
|
|
8
9
|
- Documented exception-ledger values when the value is external, brand-owned, or required by a third-party primitive API.
|
|
9
10
|
|
|
@@ -18,6 +19,27 @@ Do not add raw component styling literals directly to `registry/components`:
|
|
|
18
19
|
|
|
19
20
|
`npm run tokens:check` enforces the generated CSS contract and component token usage.
|
|
20
21
|
|
|
22
|
+
Structured tokens and aliases are authored in the domain and component-owned
|
|
23
|
+
fragments under `tokens/source/`. `tokens/banhaten.tokens.json` is output-only
|
|
24
|
+
and deterministically compiled from that manifest. Authored Tailwind mappings,
|
|
25
|
+
keyframes, global and accessibility rules, and typography utilities live in
|
|
26
|
+
`tokens/banhaten.utilities.css`. The distributable
|
|
27
|
+
`registry/styles/globals.css` is regenerated from the compiled token catalog and
|
|
28
|
+
that authored CSS source.
|
|
29
|
+
|
|
30
|
+
The generator emits the complete default-theme graph once, then emits only declarations whose values differ for each alternate theme. Dark mode and alternate themes inherit unchanged scoped aliases through the cascade. This keeps the live graph auditable without duplicating identical declarations.
|
|
31
|
+
|
|
32
|
+
The default appearance deliberately composes two concerns: `blue` owns brand
|
|
33
|
+
roles and `gray` owns the neutral ramp. As a result, default product surfaces
|
|
34
|
+
are achromatic, while links, focus states, and primary actions remain blue.
|
|
35
|
+
`cssContract.defaultTheme` and `cssContract.defaultNeutralTheme` record that
|
|
36
|
+
composition. `npm run tokens:build` synchronizes it into the authored default
|
|
37
|
+
theme and semantic color-mode values before compiling the public artifacts.
|
|
38
|
+
Alternate brand themes keep their reviewed neutral ramps unless their source is
|
|
39
|
+
explicitly changed.
|
|
40
|
+
|
|
41
|
+
Color values are design-owned. The generated Color Contrast page reports failing combinations and recommendations, but automation must not silently change source colors. A color change requires an explicit design review and regeneration of the contrast baseline.
|
|
42
|
+
|
|
21
43
|
## Exception Ledger
|
|
22
44
|
|
|
23
45
|
The following exceptions are allowed only in token generation or documented alias source, not directly in component implementation:
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "banhaten",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Banhaten design system: an Arabic and English-first React design system with shadcn-style component installation.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -9,8 +9,10 @@
|
|
|
9
9
|
"files": [
|
|
10
10
|
"src",
|
|
11
11
|
"registry/index.json",
|
|
12
|
+
"registry/component-contract.json",
|
|
12
13
|
"registry/components",
|
|
13
14
|
"registry/examples",
|
|
15
|
+
"registry/guidance",
|
|
14
16
|
"registry/hooks",
|
|
15
17
|
"registry/styles",
|
|
16
18
|
"registry/utils",
|
|
@@ -19,42 +21,49 @@
|
|
|
19
21
|
"registry/assets/images/art-01.jpg",
|
|
20
22
|
"registry.json",
|
|
21
23
|
"tokens/banhaten.tokens.json",
|
|
22
|
-
"tokens/Color mode.zip",
|
|
23
|
-
"tokens/Theme.zip",
|
|
24
|
-
"tokens/Numbers.zip",
|
|
25
|
-
"tokens/Radius.zip",
|
|
26
24
|
"schema",
|
|
27
25
|
"docs",
|
|
28
26
|
"banhaten.config.example.json",
|
|
29
27
|
"README.md",
|
|
28
|
+
"CHANGELOG.md",
|
|
29
|
+
"CONTRIBUTING.md",
|
|
30
|
+
"SECURITY.md",
|
|
30
31
|
"LICENSE"
|
|
31
32
|
],
|
|
32
33
|
"scripts": {
|
|
33
34
|
"build": "npm --prefix playground ci --include=dev --include=optional && npm --prefix playground run build",
|
|
34
35
|
"build:railway": "npm --prefix playground ci --include=dev --include=optional && npm --prefix playground run build:railway",
|
|
35
36
|
"start": "node playground/scripts/serve-static.mjs playground/dist",
|
|
36
|
-
"check": "node --check src/cli/index.js && node --check scripts/generate-shadcn-registry.mjs && node --check scripts/normalize-component-docs.mjs && npm run cli:test && npm run tokens:check && npm run registry:check && npm run docs:check && npm run playground:test && npm run playground:audit",
|
|
37
|
-
"
|
|
37
|
+
"check": "node --check src/cli/index.js && node --check src/cli/command-line.js && node --check src/cli/doctor.js && node --check src/cli/config-editors.js && node --check src/cli/source-scanner.js && node --check src/cli/jsonc.js && node --check src/cli/vite-config.js && node --check src/cli/install-plan.js && node --check src/cli/install-receipt.js && node --check src/cli/package-install-state.js && node --check src/cli/package-manager.js && node --check src/cli/package-plan.js && node --check src/cli/package-version.js && node --check scripts/compile-token-catalog.mjs && node --check scripts/sync-default-theme-neutral-values.mjs && node --check scripts/token-catalog-test.mjs && node --check scripts/registry-catalog.mjs && node --check scripts/generate-registry-index.mjs && node --check scripts/generate-shadcn-registry.mjs && node --check scripts/normalize-component-docs.mjs && node --check scripts/package-artifact.mjs && node --check scripts/check-package-contents.mjs && node --check scripts/select-react-compatibility.mjs && npm run contracts:check && npm run cli:test && npm run tokens:check && npm run registry:check && npm run docs:check && npm run package:check && npm run playground:build && npm run playground:test:browser && npm run playground:audit",
|
|
38
|
+
"contracts:check": "node scripts/validate-contracts.mjs",
|
|
39
|
+
"cli:test": "node scripts/cli-argument-test.mjs && node scripts/cli-dependency-test.mjs && node scripts/cli-install-plan-test.mjs && node scripts/cli-integration-test.mjs && node scripts/cli-doctor-test.mjs",
|
|
38
40
|
"playground:build": "npm --prefix playground run build",
|
|
39
41
|
"playground:dev": "npm --prefix playground run dev",
|
|
40
42
|
"playground:test": "npm --prefix playground run test",
|
|
43
|
+
"playground:test:browser": "npm --prefix playground run test:browser",
|
|
41
44
|
"playground:audit": "npm --prefix playground audit --audit-level=high",
|
|
42
|
-
"
|
|
43
|
-
"registry:
|
|
45
|
+
"package:check": "node scripts/generate-registry-index.mjs --check && node scripts/compile-token-catalog.mjs --check && node scripts/check-package-contents.mjs",
|
|
46
|
+
"registry:build": "node scripts/generate-registry-index.mjs --write",
|
|
47
|
+
"registry:check": "node scripts/generate-registry-index.mjs --check && node scripts/check-registry-mirrors.mjs && node scripts/generate-shadcn-registry.mjs --check && node scripts/registry-runtime-exports-test.mjs && node scripts/check-isolated-registry-installs.mjs --packed",
|
|
48
|
+
"registry:export": "node scripts/generate-registry-index.mjs --write && node scripts/generate-shadcn-registry.mjs --write",
|
|
49
|
+
"registry:exports": "node scripts/check-isolated-registry-installs.mjs --write-exports",
|
|
44
50
|
"registry:sync": "node scripts/check-registry-mirrors.mjs --write",
|
|
45
51
|
"components:tokens:check": "node scripts/check-component-token-usage.mjs",
|
|
52
|
+
"components:tokens:metadata": "node scripts/sync-component-token-metadata.mjs",
|
|
46
53
|
"docs:check": "node scripts/check-component-docs.mjs && node scripts/normalize-component-docs.mjs",
|
|
47
54
|
"docs:normalize": "node scripts/normalize-component-docs.mjs --write",
|
|
48
55
|
"smoke": "node src/cli/index.js list",
|
|
49
|
-
"tokens:
|
|
50
|
-
"tokens:
|
|
56
|
+
"tokens:aliases:check": "node scripts/sync-default-theme-neutral-values.mjs",
|
|
57
|
+
"tokens:aliases:sync": "node scripts/sync-default-theme-neutral-values.mjs --write",
|
|
58
|
+
"tokens:build": "npm run tokens:aliases:sync && node scripts/compile-token-catalog.mjs --write && node scripts/generate-token-css.mjs --write",
|
|
59
|
+
"tokens:check": "npm run tokens:aliases:check && node scripts/compile-token-catalog.mjs --check && node scripts/token-catalog-test.mjs && node scripts/generate-token-css.mjs --check && node scripts/check-token-css-reproducibility.mjs && node scripts/check-token-contract.mjs && npm run components:tokens:check && npm run components:tokens:metadata"
|
|
51
60
|
},
|
|
52
61
|
"engines": {
|
|
53
62
|
"node": ">=18.18"
|
|
54
63
|
},
|
|
55
64
|
"peerDependencies": {
|
|
56
|
-
"react": "
|
|
57
|
-
"react-dom": "
|
|
65
|
+
"react": "^18.2.0 || ^19.0.0",
|
|
66
|
+
"react-dom": "^18.2.0 || ^19.0.0",
|
|
58
67
|
"tailwindcss": "^4.0.0"
|
|
59
68
|
},
|
|
60
69
|
"keywords": [
|
|
@@ -78,6 +87,11 @@
|
|
|
78
87
|
"directories": {
|
|
79
88
|
"doc": "docs"
|
|
80
89
|
},
|
|
81
|
-
"
|
|
82
|
-
"
|
|
90
|
+
"author": "Ahmad Galal",
|
|
91
|
+
"dependencies": {
|
|
92
|
+
"ajv": "^8.20.0",
|
|
93
|
+
"minimatch": "^10.2.5",
|
|
94
|
+
"semver": "^7.8.5",
|
|
95
|
+
"yaml": "^2.9.0"
|
|
96
|
+
}
|
|
83
97
|
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
{
|
|
2
|
+
"capabilities": {
|
|
3
|
+
"actions": "Actions",
|
|
4
|
+
"alignments": "Alignments",
|
|
5
|
+
"breakpoints": "Breakpoints",
|
|
6
|
+
"cardPositions": "Card Positions",
|
|
7
|
+
"colors": "Colors",
|
|
8
|
+
"controlPositions": "Control Positions",
|
|
9
|
+
"densities": "Densities",
|
|
10
|
+
"directions": "Directions",
|
|
11
|
+
"features": "Features",
|
|
12
|
+
"forms": "Forms",
|
|
13
|
+
"indicators": "Indicators",
|
|
14
|
+
"intents": "Intents",
|
|
15
|
+
"itemKinds": "Item Kinds",
|
|
16
|
+
"itemTypes": "Item Types",
|
|
17
|
+
"kinds": "Kinds",
|
|
18
|
+
"labelPositions": "Label Positions",
|
|
19
|
+
"layouts": "Layouts",
|
|
20
|
+
"modes": "Modes",
|
|
21
|
+
"offsets": "Offsets",
|
|
22
|
+
"options": "Options",
|
|
23
|
+
"orientations": "Orientations",
|
|
24
|
+
"platforms": "Platforms",
|
|
25
|
+
"pointerPositions": "Pointer Positions",
|
|
26
|
+
"selectionTypes": "Selection Types",
|
|
27
|
+
"shapes": "Shapes",
|
|
28
|
+
"sides": "Sides",
|
|
29
|
+
"sizes": "Sizes",
|
|
30
|
+
"states": "States",
|
|
31
|
+
"statusColors": "Status Colors",
|
|
32
|
+
"styles": "Styles",
|
|
33
|
+
"tokens": "Tokens",
|
|
34
|
+
"tones": "Tones",
|
|
35
|
+
"types": "Types",
|
|
36
|
+
"valueModes": "Value Modes",
|
|
37
|
+
"variants": "Variants",
|
|
38
|
+
"widths": "Widths"
|
|
39
|
+
}
|
|
40
|
+
}
|