banhaten 0.1.2 → 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 +145 -328
- package/SECURITY.md +15 -0
- package/banhaten.config.example.json +1 -3
- package/docs/design-system/README.md +20 -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 +189 -0
- package/docs/design-system/appearances/default.md +94 -0
- package/docs/design-system/appearances/rounded.md +95 -0
- package/docs/design-system/appearances/sharp.md +95 -0
- package/docs/design-system/component-docs-pattern.md +81 -0
- package/docs/design-system/component-showcase-consistency-report.md +217 -0
- package/docs/design-system/component-token-consistency-audit.md +173 -0
- package/docs/design-system/components/README.md +75 -0
- package/docs/design-system/components/accordion.md +67 -0
- package/docs/design-system/components/activity-feed.md +106 -0
- package/docs/design-system/components/alert-dialog.md +87 -0
- package/docs/design-system/components/alert.md +111 -0
- package/docs/design-system/components/aspect-ratio.md +59 -0
- package/docs/design-system/components/attribute.md +103 -0
- package/docs/design-system/components/autocomplete.md +93 -0
- package/docs/design-system/components/avatar.md +70 -0
- package/docs/design-system/components/badge.md +72 -0
- package/docs/design-system/components/banner.md +99 -0
- package/docs/design-system/components/breadcrumbs.md +188 -0
- package/docs/design-system/components/button-group.md +117 -0
- package/docs/design-system/components/button.md +95 -0
- package/docs/design-system/components/card.md +95 -0
- package/docs/design-system/components/carousel.md +61 -0
- package/docs/design-system/components/catalog-components.md +59 -0
- package/docs/design-system/components/chart.md +58 -0
- package/docs/design-system/components/checkbox.md +68 -0
- package/docs/design-system/components/collapsible.md +63 -0
- package/docs/design-system/components/command.md +75 -0
- package/docs/design-system/components/context-menu.md +59 -0
- package/docs/design-system/components/date-picker.md +97 -0
- package/docs/design-system/components/divider.md +117 -0
- package/docs/design-system/components/empty-state.md +72 -0
- package/docs/design-system/components/field.md +86 -0
- package/docs/design-system/components/file-upload.md +199 -0
- package/docs/design-system/components/hover-card.md +61 -0
- package/docs/design-system/components/icons.md +48 -0
- package/docs/design-system/components/input-group.md +73 -0
- package/docs/design-system/components/input-otp.md +73 -0
- package/docs/design-system/components/input.md +84 -0
- package/docs/design-system/components/item.md +72 -0
- package/docs/design-system/components/kbd.md +62 -0
- package/docs/design-system/components/label.md +64 -0
- package/docs/design-system/components/menu.md +76 -0
- package/docs/design-system/components/menubar.md +60 -0
- package/docs/design-system/components/modal.md +119 -0
- package/docs/design-system/components/native-select.md +70 -0
- package/docs/design-system/components/navigation-menu.md +63 -0
- package/docs/design-system/components/onboarding-step-list-item.md +94 -0
- package/docs/design-system/components/page-header.md +98 -0
- package/docs/design-system/components/pagination.md +71 -0
- package/docs/design-system/components/popover.md +77 -0
- package/docs/design-system/components/progress-slider.md +66 -0
- package/docs/design-system/components/progress.md +92 -0
- package/docs/design-system/components/radio-card.md +65 -0
- package/docs/design-system/components/radio-group.md +72 -0
- package/docs/design-system/components/resizable.md +57 -0
- package/docs/design-system/components/scroll-area.md +60 -0
- package/docs/design-system/components/segmented-control.md +71 -0
- package/docs/design-system/components/select.md +87 -0
- package/docs/design-system/components/sheet.md +82 -0
- package/docs/design-system/components/sidebar.md +83 -0
- package/docs/design-system/components/skeleton.md +91 -0
- package/docs/design-system/components/slideout.md +77 -0
- package/docs/design-system/components/slider.md +81 -0
- package/docs/design-system/components/social-button.md +65 -0
- package/docs/design-system/components/spinner.md +77 -0
- package/docs/design-system/components/steps.md +77 -0
- package/docs/design-system/components/table.md +411 -0
- package/docs/design-system/components/tabs.md +69 -0
- package/docs/design-system/components/tag.md +95 -0
- package/docs/design-system/components/textarea.md +64 -0
- package/docs/design-system/components/timeline.md +95 -0
- package/docs/design-system/components/toast.md +73 -0
- package/docs/design-system/components/toggle.md +96 -0
- package/docs/design-system/components/toolbar.md +105 -0
- package/docs/design-system/components/tooltip.md +107 -0
- package/docs/design-system/components/typography.md +18 -0
- package/docs/design-system/density-and-elevation.md +44 -0
- package/docs/design-system/design-system-test-missing-items.md +368 -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/icons.md +69 -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 +64 -0
- 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 +53 -0
- package/docs/design-system/token-governance.md +60 -0
- package/package.json +97 -65
- package/registry/component-contract.json +40 -0
- package/registry/components/alert-dialog.tsx +297 -0
- package/registry/components/alert.tsx +86 -65
- package/registry/components/aspect-ratio.tsx +30 -0
- 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 +282 -0
- package/registry/components/chart.tsx +203 -0
- package/registry/components/checkbox.tsx +3 -3
- package/registry/components/collapsible.tsx +69 -0
- package/registry/components/command.tsx +174 -0
- package/registry/components/context-menu.tsx +236 -0
- package/registry/components/date-picker.tsx +246 -105
- 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 +14 -14
- 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 +139 -139
- package/registry/components/expanded/catalogComponentsShowcase.css +83 -83
- 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 +274 -274
- package/registry/components/expanded/table.css +2 -2
- package/registry/components/expanded/timeline.css +264 -264
- package/registry/components/field.tsx +230 -0
- package/registry/components/hover-card.tsx +48 -0
- package/registry/components/input-content.ts +1 -0
- package/registry/components/input-group.tsx +130 -0
- package/registry/components/input-otp.tsx +13 -3
- package/registry/components/input.tsx +70 -45
- package/registry/components/item.tsx +189 -0
- package/registry/components/kbd.tsx +151 -0
- package/registry/components/label.tsx +78 -0
- package/registry/components/menu.tsx +34 -246
- package/registry/components/menubar.tsx +226 -0
- package/registry/components/modal.tsx +216 -143
- package/registry/components/native-select.tsx +205 -0
- package/registry/components/navigation-menu.tsx +171 -0
- 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/radio-group.tsx +1 -1
- package/registry/components/resizable.tsx +74 -0
- package/registry/components/scroll-area.tsx +67 -0
- package/registry/components/segmented-control.tsx +87 -0
- package/registry/components/select-content.tsx +2 -2
- package/registry/components/select.tsx +54 -20
- package/registry/components/sheet.tsx +305 -0
- package/registry/components/sidebar.tsx +352 -0
- package/registry/components/skeleton.css +0 -3
- package/registry/components/social-button.tsx +116 -30
- package/registry/components/spinner.tsx +18 -55
- package/registry/components/{expanded/tabs.css → tabs.css} +127 -106
- package/registry/components/tabs.tsx +246 -0
- package/registry/components/tag.tsx +2 -2
- package/registry/components/textarea.tsx +4 -4
- package/registry/components/toast.tsx +136 -0
- 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/alert-dialog-demo.tsx +42 -0
- package/registry/examples/aspect-ratio-demo.tsx +11 -0
- 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 +43 -0
- package/registry/examples/chart-demo.tsx +33 -0
- package/registry/examples/checkbox-demo.tsx +5 -5
- package/registry/examples/collapsible-demo.tsx +16 -0
- package/registry/examples/collection-filter-bar-demo.tsx +135 -0
- package/registry/examples/command-demo.tsx +42 -0
- package/registry/examples/{expanded/command-bar-demo.tsx → command-palette-demo.tsx} +5 -15
- package/registry/examples/context-menu-demo.tsx +29 -0
- 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 +2 -2
- package/registry/examples/expanded/timeline-demo.tsx +1 -1
- package/registry/examples/field-demo.tsx +51 -0
- package/registry/examples/hover-card-demo.tsx +23 -0
- package/registry/examples/input-demo.tsx +6 -6
- package/registry/examples/input-group-demo.tsx +16 -0
- package/registry/examples/input-otp-demo.tsx +4 -4
- package/registry/examples/item-demo.tsx +46 -0
- package/registry/examples/kbd-demo.tsx +11 -0
- package/registry/examples/label-demo.tsx +20 -0
- package/registry/examples/menu-demo.tsx +1 -1
- package/registry/examples/menubar-demo.tsx +34 -0
- package/registry/examples/modal-demo.tsx +67 -9
- package/registry/examples/native-select-demo.tsx +16 -0
- package/registry/examples/navigation-menu-demo.tsx +29 -0
- 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 +22 -0
- package/registry/examples/results-toolbar-demo.tsx +44 -0
- package/registry/examples/scroll-area-demo.tsx +15 -0
- package/registry/examples/segmented-control-demo.tsx +39 -0
- package/registry/examples/select-demo.tsx +1 -1
- package/registry/examples/sheet-demo.tsx +47 -0
- package/registry/examples/sidebar-demo.tsx +55 -0
- 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 +13 -0
- package/registry/examples/tag-demo.tsx +1 -1
- package/registry/examples/textarea-demo.tsx +4 -4
- package/registry/examples/toast-demo.tsx +35 -0
- 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 +6010 -432
- package/registry/styles/globals.css +3112 -4690
- package/registry.json +1582 -0
- package/schema/config.schema.json +51 -0
- package/schema/registry.schema.json +190 -0
- package/schema/tokens.schema.json +163 -0
- 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 +639 -1391
- 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 +4313 -310
- package/registry/assets/avatars/avatar-02.jpg +0 -0
- package/registry/assets/avatars/avatar-03.jpg +0 -0
- package/registry/assets/avatars/avatar-04.jpg +0 -0
- package/registry/assets/avatars/avatar-05.jpg +0 -0
- package/registry/assets/avatars/avatar-06.jpg +0 -0
- package/registry/assets/avatars/avatar-07.jpg +0 -0
- package/registry/assets/avatars/avatar-08.jpg +0 -0
- package/registry/assets/avatars/avatar-09.jpg +0 -0
- package/registry/assets/avatars/avatar-10.jpg +0 -0
- package/registry/assets/avatars/avatar-11.jpg +0 -0
- package/registry/assets/avatars/avatar-12.jpg +0 -0
- package/registry/assets/avatars/avatar-13.jpg +0 -0
- package/registry/assets/avatars/avatar-14.jpg +0 -0
- package/registry/assets/avatars/avatar-15.jpg +0 -0
- package/registry/assets/avatars/avatar-16.jpg +0 -0
- package/registry/assets/avatars/avatar-17.jpg +0 -0
- package/registry/assets/avatars/avatar-18.jpg +0 -0
- package/registry/assets/avatars/avatar-19.jpg +0 -0
- package/registry/assets/avatars/avatar-20.jpg +0 -0
- package/registry/assets/avatars/avatar-21.jpg +0 -0
- package/registry/assets/avatars/avatar-22.jpg +0 -0
- package/registry/assets/avatars/avatar-23.jpg +0 -0
- package/registry/assets/avatars/avatar-24.jpg +0 -0
- package/registry/assets/avatars/avatar-25.jpg +0 -0
- package/registry/assets/avatars/avatar-26.jpg +0 -0
- package/registry/assets/avatars/avatar-27.jpg +0 -0
- package/registry/assets/avatars/avatar-28.jpg +0 -0
- package/registry/assets/avatars/avatar-29.jpg +0 -0
- package/registry/assets/avatars/avatar-30.jpg +0 -0
- package/registry/assets/avatars/avatar-31.jpg +0 -0
- package/registry/assets/avatars/avatar-32.jpg +0 -0
- package/registry/assets/avatars/avatar-33.jpg +0 -0
- package/registry/assets/avatars/avatar-34.jpg +0 -0
- package/registry/assets/avatars/avatar-35.jpg +0 -0
- package/registry/assets/image-assets.json +0 -744
- package/registry/assets/images/art-02.jpg +0 -0
- package/registry/assets/images/art-03.jpg +0 -0
- package/registry/assets/images/art-04.jpg +0 -0
- package/registry/assets/images/art-05.jpg +0 -0
- package/registry/assets/images/art-06.jpg +0 -0
- package/registry/assets/images/art-07.jpg +0 -0
- package/registry/assets/images/art-08.jpg +0 -0
- package/registry/assets/images/art-09.jpg +0 -0
- package/registry/assets/images/art-10.jpg +0 -0
- package/registry/assets/images/art-11.jpg +0 -0
- package/registry/assets/images/art-12.jpg +0 -0
- package/registry/assets/images/art-13.jpg +0 -0
- package/registry/assets/images/art-14.jpg +0 -0
- package/registry/assets/images/art-15.jpg +0 -0
- package/registry/assets/images/art-16.jpg +0 -0
- package/registry/assets/images/art-17.jpg +0 -0
- package/registry/assets/images/art-18.jpg +0 -0
- package/registry/assets/images/art-19.jpg +0 -0
- package/registry/assets/images/art-20.jpg +0 -0
- package/registry/assets/images/art-21.jpg +0 -0
- package/registry/assets/images/art-22.jpg +0 -0
- package/registry/assets/images/art-23.jpg +0 -0
- package/registry/assets/images/art-24.jpg +0 -0
- package/registry/assets/images/art-25.jpg +0 -0
- package/registry/assets/images/art-26.jpg +0 -0
- package/registry/assets/images/art-27.jpg +0 -0
- package/registry/assets/images/nature-01.jpg +0 -0
- package/registry/assets/images/nature-02.jpg +0 -0
- package/registry/assets/images/nature-03.jpg +0 -0
- package/registry/assets/images/nature-04.jpg +0 -0
- package/registry/assets/images/nature-05.jpg +0 -0
- package/registry/assets/images/nature-06.jpg +0 -0
- package/registry/assets/images/nature-07.jpg +0 -0
- package/registry/assets/images/nature-08.jpg +0 -0
- package/registry/assets/images/nature-09.jpg +0 -0
- package/registry/assets/images/nature-10.jpg +0 -0
- package/registry/assets/images/nature-11.jpg +0 -0
- package/registry/assets/images/nature-12.jpg +0 -0
- package/registry/assets/images/nature-13.jpg +0 -0
- package/registry/assets/images/nature-14.jpg +0 -0
- package/registry/assets/images/nature-15.jpg +0 -0
- package/registry/assets/images/nature-16.jpg +0 -0
- package/registry/assets/images/nature-17.jpg +0 -0
- package/registry/assets/images/nature-18.jpg +0 -0
- package/registry/assets/images/nature-19.jpg +0 -0
- package/registry/assets/images/nature-20.jpg +0 -0
- 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/Tabs.tsx +0 -86
- 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,166 @@
|
|
|
1
|
+
# Gap promotion report
|
|
2
|
+
|
|
3
|
+
This file is generated from background scenario gap metadata. A candidate appears when the same normalized need occurs in at least three distinct backgrounds. Heuristics cover common shells, navigation, tables, steps, composers, timelines, assets, and elevation; use `promotionKey` on a gap when an explicit cross-background grouping is more accurate.
|
|
4
|
+
|
|
5
|
+
Scanned 194 gaps across 36 backgrounds. Found 8 promotion candidates at the 3-background threshold.
|
|
6
|
+
|
|
7
|
+
## Application/workspace shell
|
|
8
|
+
|
|
9
|
+
Key: `application-workspace-shell` · 20 backgrounds
|
|
10
|
+
|
|
11
|
+
Backgrounds: `accounting-workspace-setup`, `acme-finance-advisor`, `ai-node-detail`, `audit-log`, `bauhow-room-planning`, `benefits-enrollment`, `data-source-browser`, `debt-payoff`, `delivery-tracking`, `hooch-storefront-dashboard`, `inference-providers`, `marcohr-people`, `order-shipment-timeline`, `people-add-member`, `quran-audio-add-employee`, `recent-orders`, `school-assignments`, `shipment-list`, `sku-management`, `stripe-demo-account`
|
|
12
|
+
|
|
13
|
+
| Background | Gap | Kind | Status |
|
|
14
|
+
| --- | --- | --- | --- |
|
|
15
|
+
| `accounting-workspace-setup` | onboarding workspace shell (`setup-onboarding-shell`) | layout/composition pattern | missing |
|
|
16
|
+
| `acme-finance-advisor` | finance advisor workspace shell (`acme-finance-workspace-shell`) | layout/composition pattern | missing |
|
|
17
|
+
| `ai-node-detail` | node graph workspace shell (`node-graph-workspace-shell`) | layout/composition pattern | missing |
|
|
18
|
+
| `audit-log` | audit browser workspace shell (`audit-browser-workspace-shell`) | layout/composition pattern | missing |
|
|
19
|
+
| `bauhow-room-planning` | room-planning workspace shell (`room-planning-workspace-shell`) | layout/composition pattern | missing |
|
|
20
|
+
| `benefits-enrollment` | benefits enrollment screen shell (`angled-benefits-screen-shell`) | layout/composition pattern | missing |
|
|
21
|
+
| `data-source-browser` | desktop browser and app-shell scene (`desktop-browser-and-app-shell-scene`) | layout/composition pattern | missing |
|
|
22
|
+
| `debt-payoff` | finance workspace shell (`finance-workspace-shell`) | layout/composition pattern | missing |
|
|
23
|
+
| `delivery-tracking` | delivery tracking dashboard shell (`delivery-tracking-dashboard-shell`) | layout/composition pattern | missing |
|
|
24
|
+
| `hooch-storefront-dashboard` | storefront dashboard workspace shell (`hooch-workspace-shell`) | layout/composition pattern | missing |
|
|
25
|
+
| `inference-providers` | inference settings workspace shell (`settings-workspace-shell`) | layout/composition pattern | missing |
|
|
26
|
+
| `marcohr-people` | HR workspace shell (`marcohr-workspace-shell`) | layout/composition pattern | missing |
|
|
27
|
+
| `order-shipment-timeline` | cropped order workspace shell (`cropped-order-workspace-shell`) | layout/composition pattern | missing |
|
|
28
|
+
| `people-add-member` | HR workspace shell (`people-hr-workspace-shell`) | layout/composition pattern | missing |
|
|
29
|
+
| `quran-audio-add-employee` | people-and-culture workspace shell (`quran-audio-workspace-shell`) | layout/composition pattern | missing |
|
|
30
|
+
| `recent-orders` | orders dashboard workspace shell (`recent-orders-workspace-shell`) | layout/composition pattern | missing |
|
|
31
|
+
| `school-assignments` | school app workspace shell (`school-app-workspace-shell`) | layout/composition pattern | missing |
|
|
32
|
+
| `shipment-list` | shipment management workspace shell (`shipment-list-workspace-shell`) | layout/composition pattern | missing |
|
|
33
|
+
| `sku-management` | SKU management workspace shell (`sku-management-workspace-shell`) | layout/composition pattern | missing |
|
|
34
|
+
| `stripe-demo-account` | payments dashboard shell (`payments-dashboard-shell`) | layout/composition pattern | missing |
|
|
35
|
+
|
|
36
|
+
## Brand and product icon assets
|
|
37
|
+
|
|
38
|
+
Key: `brand-icon-assets` · 16 backgrounds
|
|
39
|
+
|
|
40
|
+
Backgrounds: `ai-growth-marketing`, `ai-node-detail`, `bauhow-room-planning`, `crm-intelligence`, `data-source-browser`, `debt-payoff`, `email-compose`, `inference-providers`, `investor-profile`, `model-overview`, `mora-attio-integration`, `order-shipment-timeline`, `profile-menu`, `refund-simulation`, `shipment-list`, `sku-management`
|
|
41
|
+
|
|
42
|
+
| Background | Gap | Kind | Status |
|
|
43
|
+
| --- | --- | --- | --- |
|
|
44
|
+
| `ai-growth-marketing` | AI provider and company marks (`ai-provider-and-company-marks`) | icon asset | missing |
|
|
45
|
+
| `ai-node-detail` | node and action icon assets (`node-directional-provider-icons`) | icon asset | approximation |
|
|
46
|
+
| `bauhow-room-planning` | Bauhow brand and navigation glyphs (`room-planning-brand-glyphs`) | icon asset | approximation |
|
|
47
|
+
| `crm-intelligence` | brand logo mark (`brand-logo-mark`) | icon asset | missing |
|
|
48
|
+
| `data-source-browser` | Programa and vendor glyphs (`programa-and-vendor-glyphs`) | icon asset | missing |
|
|
49
|
+
| `debt-payoff` | finance brand and navigation glyphs (`finance-brand-glyphs`) | icon asset | approximation |
|
|
50
|
+
| `email-compose` | verified badge and model mark (`verified-badge-and-model-mark`) | icon asset | missing |
|
|
51
|
+
| `inference-providers` | provider brand marks (`provider-brand-marks`) | icon asset | approximation |
|
|
52
|
+
| `investor-profile` | verification and brand marks (`verification-and-brand-marks`) | icon asset | missing |
|
|
53
|
+
| `model-overview` | Mistral logo (`mistral-logo`) | icon asset | missing |
|
|
54
|
+
| `mora-attio-integration` | Mora and Attio brand marks (`mora-attio-brand-assets`) | icon asset | approximation |
|
|
55
|
+
| `order-shipment-timeline` | carrier mark (`carrier-mark`) | icon asset | missing |
|
|
56
|
+
| `profile-menu` | reference icon family (`reference-icon-family`) | icon asset | missing |
|
|
57
|
+
| `refund-simulation` | customer identity glyph (`customer-identity-glyph`) | icon asset | missing |
|
|
58
|
+
| `shipment-list` | carrier brand mark (`shipment-carrier-brand-mark`) | icon asset | approximation |
|
|
59
|
+
| `sku-management` | product and assistant icon set (`sku-product-icons`) | icon asset | approximation |
|
|
60
|
+
|
|
61
|
+
## Sidebar navigation
|
|
62
|
+
|
|
63
|
+
Key: `sidebar-navigation` · 11 backgrounds
|
|
64
|
+
|
|
65
|
+
Backgrounds: `acme-finance-advisor`, `ai-growth-marketing`, `audit-log`, `bauhow-room-planning`, `data-source-browser`, `debt-payoff`, `marcohr-people`, `people-add-member`, `shipment-list`, `sku-management`, `stripe-demo-account`
|
|
66
|
+
|
|
67
|
+
| Background | Gap | Kind | Status |
|
|
68
|
+
| --- | --- | --- | --- |
|
|
69
|
+
| `acme-finance-advisor` | compact app sidebar navigation (`acme-sidebar-navigation`) | component | missing |
|
|
70
|
+
| `ai-growth-marketing` | report sidebar navigation (`report-sidebar-navigation`) | component | missing |
|
|
71
|
+
| `audit-log` | audit sidebar navigation (`audit-sidebar-navigation`) | component | missing |
|
|
72
|
+
| `bauhow-room-planning` | planning sidebar navigation (`room-planning-sidebar-navigation`) | component | missing |
|
|
73
|
+
| `data-source-browser` | sidebar navigation with pinned list (`sidebar-navigation-with-pinned-list`) | component | missing |
|
|
74
|
+
| `debt-payoff` | planning sidebar navigation (`planning-sidebar-navigation`) | component | missing |
|
|
75
|
+
| `marcohr-people` | HR sidebar navigation (`marcohr-sidebar-navigation`) | component | missing |
|
|
76
|
+
| `people-add-member` | HR sidebar navigation (`people-sidebar-navigation`) | component | missing |
|
|
77
|
+
| `shipment-list` | shipment sidebar navigation (`shipment-sidebar-navigation`) | component | missing |
|
|
78
|
+
| `sku-management` | cropped app sidebar navigation (`sku-sidebar-navigation`) | component | missing |
|
|
79
|
+
| `stripe-demo-account` | payments sidebar navigation (`payments-sidebar-navigation`) | component | missing |
|
|
80
|
+
|
|
81
|
+
## Data table pattern
|
|
82
|
+
|
|
83
|
+
Key: `data-table-pattern` · 10 backgrounds
|
|
84
|
+
|
|
85
|
+
Backgrounds: `audit-log`, `debt-payoff`, `inference-providers`, `marcohr-people`, `people-add-member`, `recent-orders`, `school-assignments`, `share-of-voice`, `sku-management`, `stripe-demo-account`
|
|
86
|
+
|
|
87
|
+
| Background | Gap | Kind | Status |
|
|
88
|
+
| --- | --- | --- | --- |
|
|
89
|
+
| `audit-log` | audit activity table (`audit-activity-table`) | component | missing |
|
|
90
|
+
| `debt-payoff` | debt table and pagination (`debt-table-and-pagination`) | component | approximation |
|
|
91
|
+
| `inference-providers` | expandable provider configuration table (`expandable-provider-table`) | component | missing |
|
|
92
|
+
| `marcohr-people` | employee policy table (`marcohr-employee-table`) | component | approximation |
|
|
93
|
+
| `people-add-member` | people table with status rows (`people-table-and-status-rows`) | component | approximation |
|
|
94
|
+
| `recent-orders` | orders table controls and rows (`orders-table-region`) | component | approximation |
|
|
95
|
+
| `school-assignments` | assignments table (`assignments-table`) | component | missing |
|
|
96
|
+
| `share-of-voice` | analytics table density (`share-of-voice-analytics-table`) | component | approximation |
|
|
97
|
+
| `sku-management` | SKU data table and pagination (`sku-data-table`) | component | approximation |
|
|
98
|
+
| `stripe-demo-account` | metric table cards (`metric-table-cards`) | component | approximation |
|
|
99
|
+
| `stripe-demo-account` | sales tabs and table (`sales-tabs-and-table`) | component | approximation |
|
|
100
|
+
|
|
101
|
+
## Elevation/blur semantic effects
|
|
102
|
+
|
|
103
|
+
Key: `elevation-effects` · 10 backgrounds
|
|
104
|
+
|
|
105
|
+
Backgrounds: `ai-growth-marketing`, `audit-log`, `data-source-browser`, `email-compose`, `investor-profile`, `model-overview`, `profile-menu`, `refund-simulation`, `school-assignments`, `share-of-voice`
|
|
106
|
+
|
|
107
|
+
| Background | Gap | Kind | Status |
|
|
108
|
+
| --- | --- | --- | --- |
|
|
109
|
+
| `ai-growth-marketing` | near-black overlay and chart glow (`near-black-overlay-and-chart-glow`) | token | missing |
|
|
110
|
+
| `audit-log` | audit blur and elevation (`audit-blur-and-elevation`) | token | missing |
|
|
111
|
+
| `data-source-browser` | browser chrome radius and elevation (`browser-chrome-radius-and-elevation`) | token | missing |
|
|
112
|
+
| `email-compose` | large composer radius/elevation (`large-composer-radius-elevation`) | token | missing |
|
|
113
|
+
| `investor-profile` | large card radius and soft elevation (`large-card-radius-and-soft-elevation`) | token | missing |
|
|
114
|
+
| `model-overview` | backdrop blur and modal elevation (`backdrop-blur-and-modal-elevation`) | token | missing |
|
|
115
|
+
| `profile-menu` | large radius and reflection elevation (`large-radius-and-reflection-elevation`) | token | missing |
|
|
116
|
+
| `refund-simulation` | warm canvas and large elevation (`warm-canvas-and-large-elevation`) | token | missing |
|
|
117
|
+
| `school-assignments` | warm dark backdrop and oversized shadow (`warm-dark-backdrop-and-oversized-shadow`) | token | missing |
|
|
118
|
+
| `share-of-voice` | dark translucent elevation and reflection (`share-of-voice-dark-elevation`) | token | approximation |
|
|
119
|
+
|
|
120
|
+
## Avatar image assets
|
|
121
|
+
|
|
122
|
+
Key: `avatar-image-assets` · 9 backgrounds
|
|
123
|
+
|
|
124
|
+
Backgrounds: `delivery-tracking`, `investor-profile`, `mcp-settings`, `profile-menu`, `recent-orders`, `refund-simulation`, `remove-model`, `school-assignments`, `stripe-demo-account`
|
|
125
|
+
|
|
126
|
+
| Background | Gap | Kind | Status |
|
|
127
|
+
| --- | --- | --- | --- |
|
|
128
|
+
| `delivery-tracking` | courier avatar asset (`delivery-courier-avatar-asset`) | image asset | approximation |
|
|
129
|
+
| `investor-profile` | avatar artwork (`avatar-artwork`) | image asset | missing |
|
|
130
|
+
| `mcp-settings` | account avatar badge (`account-avatar-badge`) | image asset | missing |
|
|
131
|
+
| `profile-menu` | avatar and hand cursor (`avatar-and-hand-cursor`) | image asset | missing |
|
|
132
|
+
| `recent-orders` | brand mark and customer avatar (`recent-orders-brand-avatar-assets`) | image asset | approximation |
|
|
133
|
+
| `refund-simulation` | agent blue mosaic avatar (`agent-blue-mosaic-avatar`) | image asset | missing |
|
|
134
|
+
| `remove-model` | user and provider avatar crops (`remove-model-provider-assets`) | image asset | approximation |
|
|
135
|
+
| `school-assignments` | teacher avatar (`teacher-avatar`) | image asset | missing |
|
|
136
|
+
| `stripe-demo-account` | Stripe mark and account avatar (`stripe-brand-and-avatar-assets`) | image asset | approximation |
|
|
137
|
+
|
|
138
|
+
## Progress/step indicator
|
|
139
|
+
|
|
140
|
+
Key: `progress-step-indicator` · 5 backgrounds
|
|
141
|
+
|
|
142
|
+
Backgrounds: `accounting-workspace-setup`, `benefits-enrollment`, `mcp-settings`, `quran-audio-add-employee`, `refund-simulation`
|
|
143
|
+
|
|
144
|
+
| Background | Gap | Kind | Status |
|
|
145
|
+
| --- | --- | --- | --- |
|
|
146
|
+
| `accounting-workspace-setup` | step progress indicator (`setup-progress-indicator`) | component | approximation |
|
|
147
|
+
| `benefits-enrollment` | enrollment progress header (`enrollment-progress-header`) | component | missing |
|
|
148
|
+
| `mcp-settings` | numbered setup steps (`numbered-setup-steps`) | component | missing |
|
|
149
|
+
| `quran-audio-add-employee` | three-step employee progress indicator (`quran-audio-progress-stepper`) | component | approximation |
|
|
150
|
+
| `refund-simulation` | refund progress timeline (`refund-progress-timeline`) | component | missing |
|
|
151
|
+
|
|
152
|
+
## Composer pattern
|
|
153
|
+
|
|
154
|
+
Key: `composer-pattern` · 3 backgrounds
|
|
155
|
+
|
|
156
|
+
Backgrounds: `acme-finance-advisor`, `email-compose`, `order-shipment-timeline`
|
|
157
|
+
|
|
158
|
+
| Background | Gap | Kind | Status |
|
|
159
|
+
| --- | --- | --- | --- |
|
|
160
|
+
| `acme-finance-advisor` | advisor prompt composer (`acme-advisor-composer`) | component | approximation |
|
|
161
|
+
| `email-compose` | compose modal shell (`compose-modal-shell`) | layout/composition pattern | missing |
|
|
162
|
+
| `order-shipment-timeline` | note composer (`note-composer`) | component | missing |
|
|
163
|
+
|
|
164
|
+
## Review rule
|
|
165
|
+
|
|
166
|
+
A report entry is a prioritization signal, not automatic authorization to add a primitive. Review the mapped backgrounds, define the smallest stable API, migrate at least one real background, and remove the resolved gap metadata only after behavior, RTL, accessibility, and visual checks pass.
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
# Icons
|
|
2
|
+
|
|
3
|
+
The interactive icon explorer is available in the app under the `Icons` section.
|
|
4
|
+
|
|
5
|
+
## Recommendation Posture
|
|
6
|
+
|
|
7
|
+
Start the decision with five serious candidates:
|
|
8
|
+
|
|
9
|
+
- `Lucide`: best default for modern product UI, especially if we want light, consistent, stroke-based icons.
|
|
10
|
+
- `Tabler Icons`: best coverage-first option. It has a huge set, outline/fill coverage, and a familiar 24px grid.
|
|
11
|
+
- `Material Symbols`: best if we want Google-style recognizability and many built-in style axes.
|
|
12
|
+
- `Radix Icons`: best for very dense component UI where 15px icons need to stay crisp.
|
|
13
|
+
- `Phosphor`: best if we want expressive weight control, including thin, bold, fill, and duotone variants.
|
|
14
|
+
|
|
15
|
+
Keep `Simple Icons` as a separate brand-logo source. It should not be the primary UI icon family.
|
|
16
|
+
|
|
17
|
+
## Packs To Review
|
|
18
|
+
|
|
19
|
+
| Pack | Prefix | License | Best for | Variants to compare |
|
|
20
|
+
| --- | --- | --- | --- | --- |
|
|
21
|
+
| Google Material Symbols | `material-symbols` | Apache-2.0 | Google-style UI, broad coverage | Regular, Rounded, Sharp, Outline, Outline Rounded, Outline Sharp |
|
|
22
|
+
| Google Material Icons Classic | `ic` | Apache-2.0 | Existing Material Icons familiarity | Filled/Baseline, Outlined, Rounded, Sharp, Two tone |
|
|
23
|
+
| Material Design Icons by Pictogrammers | `mdi` | Apache-2.0 | Maximum utility coverage | Single broad style |
|
|
24
|
+
| Radix Icons | `radix-icons` | MIT | Dense controls, primitives, menus | Single 15px style |
|
|
25
|
+
| Lucide | `lucide` | ISC | Clean SaaS/product UI | Single outline style |
|
|
26
|
+
| Heroicons | `heroicons` | MIT | Tailwind-friendly apps | Outline 24, Solid 24, Solid 20, Solid 16 |
|
|
27
|
+
| Tabler Icons | `tabler` | MIT | Broad app coverage | Outline, filled where available |
|
|
28
|
+
| Phosphor | `ph` | MIT | Adjustable visual tone | Thin, Light, Regular, Bold, Fill, Duotone |
|
|
29
|
+
| Remix Icon | `ri` | Apache-2.0 | Neutral line/fill system icons | Line, Fill |
|
|
30
|
+
| Bootstrap Icons | `bi` | MIT | Bootstrap-adjacent apps | Mixed outline/fill names |
|
|
31
|
+
| Fluent UI System Icons | `fluent` | MIT | Microsoft-like UI language | Regular, Filled |
|
|
32
|
+
| Carbon Icons | `carbon` | Apache-2.0 | Enterprise/data tools | Fixed source sizes in packages |
|
|
33
|
+
| Ant Design Icons | `ant-design` | MIT | Enterprise React products | Outlined, Filled, TwoTone |
|
|
34
|
+
| Octicons | `octicon` | MIT | Developer tools, GitHub-like UI | 16px and 24px source sizes |
|
|
35
|
+
| Feather Icons | `feather` | MIT | Minimal legacy outline style | Single outline style |
|
|
36
|
+
| Iconoir | `iconoir` | MIT | Broad modern outline set | Single outline style |
|
|
37
|
+
| Flowbite Icons | `flowbite` | MIT | Tailwind/Flowbite apps | Outline, Solid |
|
|
38
|
+
| Ionicons | `ion` | MIT | Mobile/app UI | Outline, Filled, Sharp |
|
|
39
|
+
| Simple Icons | `simple-icons` | CC0-1.0 | Brand logos only | Single-color brand marks |
|
|
40
|
+
|
|
41
|
+
## Decision Criteria
|
|
42
|
+
|
|
43
|
+
- Button icon clarity at 16px and 20px.
|
|
44
|
+
- Menu, dropdown, and table icon legibility in dense rows.
|
|
45
|
+
- Visual match with `default`, `rounded`, and `sharp` appearances.
|
|
46
|
+
- Variant usefulness: filled states, two-tone states, sharp geometry, or rounded geometry.
|
|
47
|
+
- Coverage for navigation, data, files, users, settings, alerts, billing, integrations, and brand logos.
|
|
48
|
+
- Licensing and attribution obligations. Keep source license notices in the project when redistributing SVG/source files.
|
|
49
|
+
|
|
50
|
+
## Sources
|
|
51
|
+
|
|
52
|
+
- Google Material Icons repository: https://github.com/google/material-design-icons
|
|
53
|
+
- Iconify collection API: https://iconify.design/docs/api/collection.html
|
|
54
|
+
- Radix Icons: https://github.com/radix-ui/icons
|
|
55
|
+
- Lucide: https://github.com/lucide-icons/lucide
|
|
56
|
+
- Heroicons: https://heroicons.com
|
|
57
|
+
- Tabler Icons: https://github.com/tabler/tabler-icons
|
|
58
|
+
- Phosphor Icons: https://github.com/phosphor-icons/core
|
|
59
|
+
- Remix Icon: https://www.remixicon.com
|
|
60
|
+
- Bootstrap Icons: https://icons.getbootstrap.com
|
|
61
|
+
- Fluent UI System Icons: https://github.com/microsoft/fluentui-system-icons
|
|
62
|
+
- Carbon Icons: https://carbondesignsystem.com/elements/icons/code
|
|
63
|
+
- Ant Design Icons: https://www.npmjs.com/package/@ant-design/icons
|
|
64
|
+
- Octicons: https://primer.github.io/design/components/icon
|
|
65
|
+
- Feather Icons: https://github.com/feathericons/feather
|
|
66
|
+
- Iconoir: https://github.com/iconoir-icons/iconoir
|
|
67
|
+
- Flowbite Icons: https://flowbite.com/icons
|
|
68
|
+
- Ionicons: https://github.com/ionic-team/ionicons
|
|
69
|
+
- Simple Icons: https://github.com/simple-icons/simple-icons
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
# Installation
|
|
2
|
+
|
|
3
|
+
## Requirements
|
|
4
|
+
|
|
5
|
+
Banhaten installs source into a React 18.2/19 project using Tailwind CSS 4. Use Node 18.18 or newer.
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npx banhaten init
|
|
9
|
+
npx banhaten add button input select
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
Run the package-manager command printed by the CLI. It detects npm, pnpm, Yarn, and Bun from `packageManager` or lockfiles.
|
|
13
|
+
|
|
14
|
+
Dependency declarations are validated with npm-compatible semantic-version
|
|
15
|
+
ranges. A consumer range is kept only when every version it allows satisfies the
|
|
16
|
+
Banhaten requirement. If the Banhaten range is wholly contained by a broader
|
|
17
|
+
consumer range, the CLI safely narrows the declaration in its existing package
|
|
18
|
+
section, updates `package.json`, and prints an install command so the package
|
|
19
|
+
manager can reconcile its lockfile. Partial overlaps, disjoint ranges, mutable
|
|
20
|
+
tags, workspace protocols, aliases, Git URLs, and local file specs fail without
|
|
21
|
+
writing. Banhaten deliberately does not treat a current lockfile resolution as a
|
|
22
|
+
durable compatibility guarantee. When the manifest is already safe, the CLI also
|
|
23
|
+
checks package versions inside the target project or declared workspace boundary.
|
|
24
|
+
For npm lockfiles v2 and v3 it verifies the importer declarations and exact locked
|
|
25
|
+
resolutions; stale, missing, incompatible, or opaque lock state keeps the install
|
|
26
|
+
action visible. Machine-readable output exposes the same
|
|
27
|
+
`{ required, command, cwd }` state, including the project or workspace directory
|
|
28
|
+
where the command must run.
|
|
29
|
+
|
|
30
|
+
## Vite
|
|
31
|
+
|
|
32
|
+
Before writing, the CLI resolves a canonical install plan from
|
|
33
|
+
`banhaten.config.json`, the TypeScript `@/*` path, and the Vite `@` alias. If
|
|
34
|
+
TypeScript and Vite agree, that root is used even when another `src` directory
|
|
35
|
+
exists. If only one side declares the alias, the CLI mirrors it to the other.
|
|
36
|
+
Conflicting roots, multi-target TypeScript paths, destination-overlapping aliases,
|
|
37
|
+
inherited TypeScript aliases without local `baseUrl`/`paths`, and Vite aliases
|
|
38
|
+
that cannot be inspected statically fail without changing the project. When a
|
|
39
|
+
supported Vite config exists, `init` also adds the Tailwind Vite plugin while
|
|
40
|
+
preserving its existing structure.
|
|
41
|
+
|
|
42
|
+
CLI commands use strict schemas. Unknown or duplicate flags, missing values, and
|
|
43
|
+
unexpected positional arguments are rejected before project discovery. The
|
|
44
|
+
install receipt pins the resolved destinations; changing roots later requires
|
|
45
|
+
moving or removing the old generated files and receipt first.
|
|
46
|
+
|
|
47
|
+
## Next.js and other frameworks
|
|
48
|
+
|
|
49
|
+
Without Vite, the CLI installs Tailwind and writes the configured global stylesheet, aliases, `cn` utility, and direction hook. Import the generated global stylesheet from the framework root layout and ensure the `@/*` TypeScript alias resolves to the source directory.
|
|
50
|
+
|
|
51
|
+
## Fonts and direction
|
|
52
|
+
|
|
53
|
+
The generated stylesheet imports Inter weights 400–700 and IBM Plex Sans Arabic weights 400–700. Set document language and direction at the application boundary:
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
<html lang="ar" dir="rtl" data-theme="blue" data-radius="default">
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Wrap server-rendered component trees in `DirectionProvider` when request data already determines the direction; this keeps the first server and client snapshots identical. It is also the boundary for nested surfaces that differ from the document. Without it, components hydrate from a stable LTR snapshot and then synchronize from the document through one shared observer.
|
|
60
|
+
|
|
61
|
+
## Updating safely
|
|
62
|
+
|
|
63
|
+
```bash
|
|
64
|
+
npx banhaten diff
|
|
65
|
+
npx banhaten update
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
The receipt records generated hashes. Unmodified files update automatically. Locally modified files and token blocks stop without writing; pass `--force` only after reviewing the unified diff. Put product overrides outside the marked token block and product composition in wrapper components.
|
|
@@ -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)
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
# Registry And CLI
|
|
2
|
+
|
|
3
|
+
Banhaten maintains one authored registry catalog and publishes two compiled
|
|
4
|
+
registry shapes.
|
|
5
|
+
|
|
6
|
+
| Artifact | Purpose |
|
|
7
|
+
| --- | --- |
|
|
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. |
|
|
10
|
+
| `registry.json` | Generated shadcn-compatible export for tools that expect `https://ui.shadcn.com/schema/registry.json`. |
|
|
11
|
+
|
|
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.
|
|
29
|
+
|
|
30
|
+
## Generated Files
|
|
31
|
+
|
|
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`.
|
|
33
|
+
|
|
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.
|
|
35
|
+
|
|
36
|
+
## CLI Commands
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
npx banhaten init
|
|
40
|
+
npx banhaten add button input select
|
|
41
|
+
npx banhaten diff
|
|
42
|
+
npx banhaten update button --force
|
|
43
|
+
npx banhaten list --json
|
|
44
|
+
npx banhaten search input
|
|
45
|
+
npx banhaten docs button
|
|
46
|
+
npx banhaten view button
|
|
47
|
+
npx banhaten doctor
|
|
48
|
+
```
|
|
49
|
+
|
|
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.
|
|
55
|
+
|
|
56
|
+
## Schema Files
|
|
57
|
+
|
|
58
|
+
Schema files live in `schema/`. The CLI copies them into `.banhaten/schema/` so generated `banhaten.config.json` can use a local `$schema` path instead of a fragile external domain:
|
|
59
|
+
|
|
60
|
+
- `schema/config.schema.json`
|
|
61
|
+
- `schema/registry.schema.json`
|
|
62
|
+
- `schema/tokens.schema.json`
|
|
63
|
+
|
|
64
|
+
Do not point package metadata or generated config at `banhaten.dev` unless that domain is live and serving the schema files.
|
|
@@ -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.
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# Tabs
|
|
2
|
+
|
|
3
|
+
Tabs switch between peer views while keeping the user in the same context.
|
|
4
|
+
|
|
5
|
+
The implementation follows the Figma component at `Design system 3.0 Copy / Tabs` (`225:9832`). It supports every variant in the matrix: `underline`, `segment`, and `rounded`; `md`, `sm`, and `xs`; full-width and hug-content layouts; LTR and RTL.
|
|
6
|
+
|
|
7
|
+
## API
|
|
8
|
+
|
|
9
|
+
```tsx
|
|
10
|
+
<Tabs
|
|
11
|
+
variant="underline"
|
|
12
|
+
size="md"
|
|
13
|
+
fullWidth={false}
|
|
14
|
+
dir="ltr"
|
|
15
|
+
items={["Tab item", "Tab item", "Tab item", "Tab item", "Tab item"]}
|
|
16
|
+
/>
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
| Prop | Values | Default |
|
|
20
|
+
| --- | --- | --- |
|
|
21
|
+
| `variant` | `underline`, `segment`, `rounded` | `underline` |
|
|
22
|
+
| `size` | `md`, `sm`, `xs` | `md` |
|
|
23
|
+
| `fullWidth` | `boolean` | `false` |
|
|
24
|
+
| `dir` | `ltr`, `rtl` | `ltr` |
|
|
25
|
+
| `items` | `string[]` | five `Tab item` labels |
|
|
26
|
+
| `activeIndex` | `number` | uncontrolled |
|
|
27
|
+
| `defaultActiveIndex` | `number` | `0` |
|
|
28
|
+
| `onActiveIndexChange` | `(index: number) => void` | none |
|
|
29
|
+
|
|
30
|
+
## Token Contract
|
|
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 its owned `tokens/source/` fragment as a `--bh-*` token or alias first.
|
|
33
|
+
|
|
34
|
+
- Backgrounds: `--bh-bg-neutral-subtle`, `--bh-bg-default`
|
|
35
|
+
- Borders: `--bh-border-default`
|
|
36
|
+
- Content: `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-subtle`
|
|
37
|
+
- Shape: `--bh-radius-md-6`, `--bh-radius-lg-8`, `--bh-radius-full`
|
|
38
|
+
|
|
39
|
+
## Pixel Rules
|
|
40
|
+
|
|
41
|
+
- Text is Inter `15px / 24px`.
|
|
42
|
+
- Active labels use weight `500`; inactive labels use weight `400`.
|
|
43
|
+
- Segment and rounded containers use `2px` padding and `2px` item gaps.
|
|
44
|
+
- Underline containers use a `1px` default bottom border and `16px` item gaps.
|
|
45
|
+
- Active underline tabs use a `2px` `#245ded` bottom border.
|
|
46
|
+
- Segment selected tabs use a pill radius; rounded selected tabs use `6px`.
|
|
47
|
+
- Selected segment and rounded tabs use white fill plus `0 1px 1px rgba(15, 17, 20, 0.06)`.
|
|
48
|
+
- `md` segment and rounded tabs are `40px` tall inside a `44px` container.
|
|
49
|
+
- `sm` segment and rounded tabs are `36px` tall inside a `40px` container.
|
|
50
|
+
- `xs` segment and rounded tabs are `32px` tall inside a `36px` container.
|
|
51
|
+
- `md` underline rows are `56px`; `sm` and `xs` underline rows are `48px`.
|
|
52
|
+
- Full-width tabs stretch equally inside their parent width.
|
|
53
|
+
- RTL uses `dir="rtl"` on the tablist so the active first item appears on the right edge.
|