banhaten 0.5.0 → 0.6.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.
Files changed (290) hide show
  1. package/CHANGELOG.md +177 -139
  2. package/CONTRIBUTING.md +46 -46
  3. package/README.md +192 -192
  4. package/SECURITY.md +15 -15
  5. package/banhaten.config.example.json +11 -11
  6. package/docs/design-spacing.md +13 -13
  7. package/docs/design-system/README.md +22 -22
  8. package/docs/design-system/adoption-quality-remediation.md +87 -87
  9. package/docs/design-system/agent-usage.md +13 -13
  10. package/docs/design-system/appearance-presets.md +189 -189
  11. package/docs/design-system/appearances/default.md +94 -94
  12. package/docs/design-system/appearances/rounded.md +95 -95
  13. package/docs/design-system/appearances/sharp.md +95 -95
  14. package/docs/design-system/component-docs-pattern.md +81 -81
  15. package/docs/design-system/component-implementation-ownership-audit.md +245 -245
  16. package/docs/design-system/component-quality-audit-2026-08-20.md +225 -225
  17. package/docs/design-system/component-showcase-consistency-report.md +219 -219
  18. package/docs/design-system/component-token-consistency-audit.md +173 -173
  19. package/docs/design-system/components/README.md +91 -90
  20. package/docs/design-system/components/accordion.md +52 -52
  21. package/docs/design-system/components/activity-feed.md +93 -93
  22. package/docs/design-system/components/activity-heatmap.md +56 -56
  23. package/docs/design-system/components/alert-dialog.md +71 -71
  24. package/docs/design-system/components/alert.md +103 -97
  25. package/docs/design-system/components/app-header.md +97 -0
  26. package/docs/design-system/components/aspect-ratio.md +45 -45
  27. package/docs/design-system/components/attribute.md +101 -89
  28. package/docs/design-system/components/autocomplete.md +75 -75
  29. package/docs/design-system/components/avatar.md +53 -53
  30. package/docs/design-system/components/badge.md +55 -55
  31. package/docs/design-system/components/banner.md +86 -86
  32. package/docs/design-system/components/breadcrumbs.md +181 -177
  33. package/docs/design-system/components/button-group.md +97 -97
  34. package/docs/design-system/components/button.md +80 -80
  35. package/docs/design-system/components/card.md +102 -88
  36. package/docs/design-system/components/carousel.md +46 -46
  37. package/docs/design-system/components/catalog-components.md +46 -46
  38. package/docs/design-system/components/checkbox.md +53 -53
  39. package/docs/design-system/components/collapsible.md +63 -63
  40. package/docs/design-system/components/command.md +61 -61
  41. package/docs/design-system/components/context-menu.md +45 -45
  42. package/docs/design-system/components/date-picker.md +80 -80
  43. package/docs/design-system/components/divider.md +102 -102
  44. package/docs/design-system/components/empty-state.md +56 -56
  45. package/docs/design-system/components/field.md +70 -70
  46. package/docs/design-system/components/file-upload.md +186 -186
  47. package/docs/design-system/components/hover-card.md +47 -47
  48. package/docs/design-system/components/icons.md +48 -48
  49. package/docs/design-system/components/input-group.md +57 -57
  50. package/docs/design-system/components/input-otp.md +56 -56
  51. package/docs/design-system/components/input.md +111 -109
  52. package/docs/design-system/components/item.md +58 -58
  53. package/docs/design-system/components/kbd.md +49 -49
  54. package/docs/design-system/components/label.md +49 -49
  55. package/docs/design-system/components/menu.md +94 -73
  56. package/docs/design-system/components/menubar.md +46 -46
  57. package/docs/design-system/components/modal.md +104 -104
  58. package/docs/design-system/components/native-select.md +53 -53
  59. package/docs/design-system/components/navigation-menu.md +49 -49
  60. package/docs/design-system/components/onboarding-step-list-item.md +81 -81
  61. package/docs/design-system/components/page-header.md +127 -93
  62. package/docs/design-system/components/pagination.md +56 -56
  63. package/docs/design-system/components/popover.md +59 -59
  64. package/docs/design-system/components/progress-slider.md +49 -49
  65. package/docs/design-system/components/progress.md +76 -76
  66. package/docs/design-system/components/radio-card.md +50 -50
  67. package/docs/design-system/components/radio-group.md +56 -56
  68. package/docs/design-system/components/resizable.md +43 -43
  69. package/docs/design-system/components/scroll-area.md +50 -50
  70. package/docs/design-system/components/segmented-control.md +54 -54
  71. package/docs/design-system/components/select.md +68 -64
  72. package/docs/design-system/components/sheet.md +66 -66
  73. package/docs/design-system/components/sidebar.md +167 -111
  74. package/docs/design-system/components/skeleton.md +74 -74
  75. package/docs/design-system/components/slideout.md +64 -64
  76. package/docs/design-system/components/slider.md +62 -62
  77. package/docs/design-system/components/social-button.md +49 -49
  78. package/docs/design-system/components/spinner.md +62 -62
  79. package/docs/design-system/components/steps.md +65 -65
  80. package/docs/design-system/components/table.md +499 -422
  81. package/docs/design-system/components/tabs.md +74 -59
  82. package/docs/design-system/components/tag.md +79 -79
  83. package/docs/design-system/components/textarea.md +49 -49
  84. package/docs/design-system/components/timeline.md +82 -82
  85. package/docs/design-system/components/toast.md +57 -57
  86. package/docs/design-system/components/toggle.md +80 -80
  87. package/docs/design-system/components/toolbar.md +89 -89
  88. package/docs/design-system/components/tooltip.md +92 -92
  89. package/docs/design-system/components/typography.md +18 -18
  90. package/docs/design-system/density-and-elevation.md +65 -65
  91. package/docs/design-system/design-system-test-missing-items.md +368 -368
  92. package/docs/design-system/direction-and-localization.md +23 -23
  93. package/docs/design-system/form-recipes.md +73 -73
  94. package/docs/design-system/gap-promotion-policy.md +21 -21
  95. package/docs/design-system/icons.md +74 -74
  96. package/docs/design-system/installation.md +70 -70
  97. package/docs/design-system/launch-comparison-shadcn.md +98 -98
  98. package/docs/design-system/registry-and-cli.md +64 -64
  99. package/docs/design-system/release-policy.md +30 -30
  100. package/docs/design-system/roadmap.md +14 -14
  101. package/docs/design-system/support-matrix.md +23 -23
  102. package/docs/design-system/tabs.md +54 -54
  103. package/docs/design-system/template-gap-audit.md +32 -32
  104. package/docs/design-system/templates.md +59 -59
  105. package/docs/design-system/token-governance.md +72 -72
  106. package/package.json +98 -98
  107. package/registry/component-contract.json +40 -40
  108. package/registry/components/accordion.tsx +155 -155
  109. package/registry/components/alert-dialog.tsx +297 -297
  110. package/registry/components/alert.tsx +309 -293
  111. package/registry/components/app-header.tsx +151 -0
  112. package/registry/components/aspect-ratio.tsx +30 -30
  113. package/registry/components/attribute.tsx +489 -454
  114. package/registry/components/autocomplete.tsx +598 -598
  115. package/registry/components/avatar.tsx +385 -385
  116. package/registry/components/badge.tsx +630 -629
  117. package/registry/components/button-group.tsx +565 -565
  118. package/registry/components/button.tsx +128 -127
  119. package/registry/components/card.tsx +651 -638
  120. package/registry/components/carousel.tsx +296 -296
  121. package/registry/components/chart.tsx +203 -203
  122. package/registry/components/checkbox.tsx +247 -247
  123. package/registry/components/collapsible.tsx +109 -109
  124. package/registry/components/command.tsx +208 -208
  125. package/registry/components/context-menu.tsx +236 -236
  126. package/registry/components/date-picker.tsx +1289 -1289
  127. package/registry/components/expanded/ActivityFeed.tsx +227 -227
  128. package/registry/components/expanded/ActivityHeatmap.tsx +64 -64
  129. package/registry/components/expanded/Banner.tsx +179 -179
  130. package/registry/components/expanded/Breadcrumbs.tsx +135 -131
  131. package/registry/components/expanded/CatalogComponentsShowcase.tsx +205 -205
  132. package/registry/components/expanded/CatalogDivider.tsx +49 -49
  133. package/registry/components/expanded/EmptyState.tsx +155 -155
  134. package/registry/components/expanded/FileUpload.tsx +543 -543
  135. package/registry/components/expanded/OnboardingStepListItem.tsx +60 -60
  136. package/registry/components/expanded/PageHeader.tsx +209 -179
  137. package/registry/components/expanded/Slideout.tsx +108 -108
  138. package/registry/components/expanded/Steps.tsx +402 -402
  139. package/registry/components/expanded/Table.tsx +1109 -1092
  140. package/registry/components/expanded/Timeline.tsx +203 -203
  141. package/registry/components/expanded/activityFeed.css +248 -248
  142. package/registry/components/expanded/activityHeatmap.css +66 -66
  143. package/registry/components/expanded/banner.css +260 -260
  144. package/registry/components/expanded/breadcrumbs.css +157 -140
  145. package/registry/components/expanded/catalogComponentsShowcase.css +87 -87
  146. package/registry/components/expanded/divider.css +75 -75
  147. package/registry/components/expanded/emptyState.css +111 -111
  148. package/registry/components/expanded/fileUpload.css +457 -457
  149. package/registry/components/expanded/onboardingStepListItem.css +135 -135
  150. package/registry/components/expanded/pageHeader.css +284 -248
  151. package/registry/components/expanded/slideout.css +276 -276
  152. package/registry/components/expanded/steps.css +356 -356
  153. package/registry/components/expanded/table.css +655 -606
  154. package/registry/components/expanded/timeline.css +286 -286
  155. package/registry/components/field.tsx +283 -283
  156. package/registry/components/hover-card.tsx +48 -48
  157. package/registry/components/input-content.ts +107 -107
  158. package/registry/components/input-group.tsx +130 -130
  159. package/registry/components/input-otp.tsx +584 -584
  160. package/registry/components/input.tsx +992 -990
  161. package/registry/components/item.tsx +189 -189
  162. package/registry/components/kbd.tsx +246 -246
  163. package/registry/components/label.tsx +78 -78
  164. package/registry/components/menu.tsx +1091 -978
  165. package/registry/components/menubar.tsx +226 -226
  166. package/registry/components/modal.tsx +872 -872
  167. package/registry/components/native-select.tsx +205 -205
  168. package/registry/components/navigation-menu.tsx +171 -171
  169. package/registry/components/pagination.css +36 -36
  170. package/registry/components/pagination.tsx +560 -560
  171. package/registry/components/popover.tsx +338 -338
  172. package/registry/components/progress-slider.tsx +216 -216
  173. package/registry/components/radio-card.tsx +676 -676
  174. package/registry/components/radio-group.tsx +570 -570
  175. package/registry/components/resizable.tsx +108 -108
  176. package/registry/components/scroll-area.tsx +91 -91
  177. package/registry/components/segmented-control.tsx +87 -87
  178. package/registry/components/select-content.tsx +218 -218
  179. package/registry/components/select.tsx +937 -937
  180. package/registry/components/sheet.tsx +305 -305
  181. package/registry/components/sidebar.tsx +1535 -1433
  182. package/registry/components/skeleton.css +54 -54
  183. package/registry/components/skeleton.tsx +482 -482
  184. package/registry/components/slider.tsx +380 -380
  185. package/registry/components/social-button.tsx +387 -387
  186. package/registry/components/spinner.tsx +78 -78
  187. package/registry/components/table-elements.tsx +287 -128
  188. package/registry/components/tabs.css +246 -222
  189. package/registry/components/tabs.tsx +245 -241
  190. package/registry/components/tag.tsx +423 -423
  191. package/registry/components/textarea.tsx +610 -610
  192. package/registry/components/toast.tsx +136 -136
  193. package/registry/components/toggle.tsx +256 -256
  194. package/registry/components/toolbar.tsx +539 -539
  195. package/registry/components/tooltip.tsx +433 -433
  196. package/registry/examples/alert-demo.tsx +34 -34
  197. package/registry/examples/alert-dialog-demo.tsx +42 -42
  198. package/registry/examples/app-header-demo.tsx +40 -0
  199. package/registry/examples/aspect-ratio-demo.tsx +11 -11
  200. package/registry/examples/attribute-demo.tsx +65 -65
  201. package/registry/examples/autocomplete-demo.tsx +109 -109
  202. package/registry/examples/avatar-demo.tsx +132 -132
  203. package/registry/examples/badge-demo.tsx +69 -69
  204. package/registry/examples/button-demo.tsx +86 -86
  205. package/registry/examples/button-group-demo.tsx +63 -63
  206. package/registry/examples/card-demo.tsx +86 -86
  207. package/registry/examples/carousel-demo.tsx +43 -43
  208. package/registry/examples/chart-demo.tsx +18 -18
  209. package/registry/examples/checkbox-demo.tsx +62 -62
  210. package/registry/examples/collapsible-demo.tsx +16 -16
  211. package/registry/examples/collection-filter-bar-demo.tsx +135 -135
  212. package/registry/examples/command-demo.tsx +42 -42
  213. package/registry/examples/command-palette-demo.tsx +235 -235
  214. package/registry/examples/context-menu-demo.tsx +29 -29
  215. package/registry/examples/control-density-contract-demo.tsx +65 -65
  216. package/registry/examples/date-picker-demo.tsx +127 -127
  217. package/registry/examples/divider-demo.tsx +17 -17
  218. package/registry/examples/expanded/activity-heatmap-demo.tsx +29 -29
  219. package/registry/examples/expanded/banner-demo.tsx +48 -48
  220. package/registry/examples/expanded/breadcrumbs-demo.tsx +59 -59
  221. package/registry/examples/expanded/empty-state-demo.tsx +39 -39
  222. package/registry/examples/expanded/file-upload-demo.tsx +60 -60
  223. package/registry/examples/expanded/onboarding-step-demo.tsx +11 -11
  224. package/registry/examples/expanded/slideout-demo.tsx +15 -15
  225. package/registry/examples/expanded/steps-demo.tsx +29 -29
  226. package/registry/examples/expanded/tabs-demo.tsx +13 -13
  227. package/registry/examples/expanded/timeline-demo.tsx +18 -18
  228. package/registry/examples/field-demo.tsx +51 -51
  229. package/registry/examples/hover-card-demo.tsx +23 -23
  230. package/registry/examples/input-actions-demo.tsx +36 -36
  231. package/registry/examples/input-demo.tsx +87 -87
  232. package/registry/examples/input-group-demo.tsx +16 -16
  233. package/registry/examples/input-otp-demo.tsx +72 -72
  234. package/registry/examples/item-demo.tsx +46 -46
  235. package/registry/examples/kbd-demo.tsx +12 -12
  236. package/registry/examples/label-demo.tsx +20 -20
  237. package/registry/examples/menu-demo.tsx +122 -122
  238. package/registry/examples/menubar-demo.tsx +34 -34
  239. package/registry/examples/modal-demo.tsx +74 -74
  240. package/registry/examples/native-select-demo.tsx +16 -16
  241. package/registry/examples/navigation-menu-demo.tsx +29 -29
  242. package/registry/examples/pagination-demo.tsx +20 -20
  243. package/registry/examples/popover-demo.tsx +547 -547
  244. package/registry/examples/progress-demo.tsx +37 -37
  245. package/registry/examples/progress-slider-demo.tsx +29 -29
  246. package/registry/examples/radio-card-demo.tsx +51 -51
  247. package/registry/examples/radio-group-demo.tsx +62 -62
  248. package/registry/examples/resizable-demo.tsx +22 -22
  249. package/registry/examples/results-toolbar-demo.tsx +44 -44
  250. package/registry/examples/scroll-area-demo.tsx +15 -15
  251. package/registry/examples/segmented-control-demo.tsx +39 -39
  252. package/registry/examples/select-demo.tsx +87 -87
  253. package/registry/examples/sheet-demo.tsx +47 -47
  254. package/registry/examples/sidebar-demo.tsx +101 -101
  255. package/registry/examples/slider-demo.tsx +31 -31
  256. package/registry/examples/social-button-demo.tsx +61 -61
  257. package/registry/examples/spinner-demo.tsx +59 -59
  258. package/registry/examples/tabs-demo.tsx +13 -13
  259. package/registry/examples/tag-demo.tsx +29 -29
  260. package/registry/examples/textarea-demo.tsx +79 -79
  261. package/registry/examples/toast-demo.tsx +35 -35
  262. package/registry/examples/toggle-demo.tsx +59 -59
  263. package/registry/examples/tooltip-demo.tsx +115 -115
  264. package/registry/guidance/USAGE.md +27 -27
  265. package/registry/hooks/use-direction.ts +207 -207
  266. package/registry/index.json +387 -17
  267. package/registry/styles/globals.css +46 -0
  268. package/registry.json +24 -2
  269. package/schema/config.schema.json +51 -51
  270. package/schema/registry.schema.json +194 -194
  271. package/schema/tokens.schema.json +167 -167
  272. package/src/cli/command-line.js +194 -194
  273. package/src/cli/config-editors.js +9 -9
  274. package/src/cli/doctor.js +399 -399
  275. package/src/cli/file-transaction.js +302 -302
  276. package/src/cli/global-css.js +153 -153
  277. package/src/cli/index.js +1002 -1002
  278. package/src/cli/install-plan.js +592 -592
  279. package/src/cli/install-receipt.js +171 -171
  280. package/src/cli/jsonc.js +203 -203
  281. package/src/cli/package-install-state.js +254 -254
  282. package/src/cli/package-manager.js +238 -238
  283. package/src/cli/package-plan.js +185 -185
  284. package/src/cli/package-version.js +97 -97
  285. package/src/cli/registry-query.js +207 -207
  286. package/src/cli/reporting.js +55 -55
  287. package/src/cli/schema-validation.js +19 -19
  288. package/src/cli/source-scanner.js +686 -686
  289. package/src/cli/vite-config.js +478 -478
  290. package/tokens/banhaten.tokens.json +184 -0
package/README.md CHANGED
@@ -1,192 +1,192 @@
1
- # Banhaten Design System
2
-
3
- Banhaten is an Arabic and English-first React design system with source-installed components, generated design tokens, and first-class RTL behavior. It uses a shadcn-style distribution model without copying shadcn visuals: components are built around Banhaten tokens, Banhaten component aliases, and Banhaten Figma-derived interaction patterns.
4
-
5
- ## Quick Start
6
-
7
- Run the CLI from the root of a React app:
8
-
9
- ```bash
10
- npx banhaten init
11
- npx banhaten add button input select
12
- ```
13
-
14
- When dependencies are added, the CLI prints the install command for your package manager.
15
-
16
- ```bash
17
- npm install
18
- pnpm install
19
- yarn install
20
- bun install
21
- ```
22
-
23
- ## What Init Adds
24
-
25
- `banhaten init` writes:
26
-
27
- - `banhaten.config.json` with schema-backed aliases.
28
- - The base `cn` utility and `use-direction` hook.
29
- - `.banhaten/USAGE.md` with agent-readable defaults, recipes, and component-selection rules.
30
- - The generated Banhaten token stylesheet in your configured CSS file.
31
- - Tailwind v4 and Vite alias setup when those files are detected.
32
- - Required package dependencies.
33
-
34
- `banhaten add` and `banhaten update` also refresh the generated token stylesheet, so installed projects receive token changes as the registry evolves.
35
-
36
- ## CLI
37
-
38
- ```bash
39
- npx banhaten init [--cwd <path>] [--force] [--dry-run] [--json]
40
- npx banhaten add <component...> [--cwd <path>] [--force] [--dry-run] [--json]
41
- npx banhaten diff [component...] [--cwd <path>] [--json]
42
- npx banhaten update [component...] [--cwd <path>] [--force] [--dry-run] [--json]
43
- npx banhaten list [--json]
44
- npx banhaten search <query> [--json]
45
- npx banhaten docs <component> [--json]
46
- npx banhaten view <component> [--file <registry-source>] [--json]
47
- npx banhaten doctor [--cwd <path>] [--json]
48
- npx banhaten version
49
- ```
50
-
51
- The CLI validates each command before doing project work: unknown flags, missing
52
- flag values, duplicate flags, and unexpected arguments fail without writing.
53
- Mutating commands then compute one install plan from the configured destinations
54
- and the existing TypeScript/Vite root aliases. An alias declared on only one side
55
- is mirrored to the other; conflicting, ambiguous, or dynamic aliases stop before
56
- files are staged. The install receipt records the resolved destinations so later
57
- runs cannot silently create a second generated tree.
58
-
59
- Dependency ranges follow a guarantee policy: every version admitted by the
60
- consumer declaration must satisfy Banhaten's requirement. Broader semver ranges
61
- are safely narrowed when possible and trigger an install hint; partial overlaps,
62
- disjoint ranges, and opaque package protocols fail without writes. A lockfile is
63
- never accepted instead of that manifest guarantee. When the manifest is already
64
- safe, the CLI verifies the bounded installed resolution and npm lock state;
65
- stale or unverifiable lock state keeps a project-rooted install action visible.
66
-
67
- Command flags:
68
-
69
- - `--cwd <path>` runs `init`, `add`, `diff`, `update`, or `doctor` against another project directory.
70
- - `--dry-run` previews `init`, `add`, or `update` writes.
71
- - `--force` replaces locally modified generated files after you review `banhaten diff`.
72
- - `--json` prints machine-readable output for commands that show it above.
73
-
74
- Global flags:
75
-
76
- - `--help` or `-h` prints help.
77
- - `--silent` or `-s` suppresses normal command output.
78
- - `--yes` or `-y` is accepted for non-interactive scripts.
79
- - `--version` or `-v` prints the CLI version.
80
-
81
- ## Generated File Ownership
82
-
83
- Banhaten is a source registry. The install receipt records the exact generated hash for every managed file. Unmodified files update automatically; locally modified component files and token blocks are never replaced unless you pass `--force`.
84
-
85
- Use `banhaten diff` before updating if you edit generated component files locally:
86
-
87
- ```bash
88
- npx banhaten diff
89
- npx banhaten update button --force # only after reviewing intentional replacement
90
- ```
91
-
92
- Keep product-specific composition outside generated files when possible. Use local wrapper components for app behavior and keep Banhaten files focused on tokens, layout, accessibility primitives, and direction behavior.
93
-
94
- ## Tokens
95
-
96
- Every component must style through Banhaten CSS variables, component aliases, or documented exception-ledger values. Raw colors, pixel values, opacity utilities, z-index utilities, durations, and shadow literals are blocked by the component token check.
97
-
98
- Structured token values and aliases are authored in the owned fragments under
99
- `tokens/source/`; `tokens/banhaten.tokens.json` is their compiled publication
100
- artifact. Tailwind mappings, keyframes, global and accessibility rules, and
101
- typography utilities are authored in `tokens/banhaten.utilities.css`.
102
- `registry/styles/globals.css` is generated from the compiled token catalog and
103
- the utility source; neither generated file should be edited directly.
104
-
105
- Token modes:
106
-
107
- - Color mode: light and dark.
108
- - Brand theme: `blue`, `gray`, `brown`, `orange`, `green`, `purple`, `teal`.
109
- - Radius mode: `default`, `rounded`, `sharp`.
110
- - Direction: inherited LTR or RTL, with component-level `dir` support where needed.
111
-
112
- The default appearance is the monochrome `gray` brand theme. It keeps page,
113
- card, border, and muted surfaces neutral while applying gray to links, focus
114
- states, and primary actions as well. `blue` remains available as an alternate
115
- brand theme.
116
-
117
- Example:
118
-
119
- ```tsx
120
- <html className="dark" data-theme="brown" data-radius="rounded" dir="rtl" lang="ar">
121
- ```
122
-
123
- Typography utilities are generated as `.bh-text-*` classes and map directly to token variables.
124
-
125
- ```tsx
126
- <h1 className="bh-text-heading-xl-bold">...</h1>
127
- <p className="bh-text-body-md-regular">...</p>
128
- ```
129
-
130
- ## Registry Formats
131
-
132
- Banhaten maintains component-owned registry sources and two compiled
133
- publication artifacts:
134
-
135
- - `registry/catalog/components/<id>.json` owns each component contract, while
136
- `registry/catalog/base.json` and `manifest.json` own the shared contract and
137
- publication order.
138
- - `registry/index.json` is the compiled Banhaten artifact used by the CLI. It
139
- includes an exhaustive, module-aware `supportedExports` runtime contract plus
140
- non-exhaustive `parts` anatomy, RTL behavior, examples, files, and
141
- dependencies.
142
- - `registry.json` is a generated shadcn-compatible export for tools that expect the public shadcn registry schema.
143
-
144
- Compile both registry publication artifacts after authored catalog changes:
145
-
146
- ```bash
147
- npm run registry:export
148
- ```
149
-
150
- `supportedExports` is checked against the installed TypeScript modules during
151
- `npm run registry:check`; a renamed, moved, added, or removed runtime export
152
- fails the release gate. Run `npm run registry:exports` only after reviewing an
153
- intentional public runtime API change. Type-only exports are outside this
154
- manifest. `parts` remains an ordered composition aid and does not claim API
155
- completeness.
156
-
157
- ## Documentation
158
-
159
- Primary docs live in the playground and render live registry-backed previews, install commands, source snippets, API tables, registry files, RTL behavior, and copyable code panels. The playground also includes a Templates tier with 60 searchable page, flow, and widget compositions built from current Banhaten tokens and components.
160
-
161
- Markdown docs live in `docs/design-system/components`. They are checked for install, API, examples, token contract, RTL rules, and accessibility sections.
162
-
163
- Launch guides cover [installation](docs/design-system/installation.md), [direction and localization](docs/design-system/direction-and-localization.md), [form recipes](docs/design-system/form-recipes.md), [density and elevation](docs/design-system/density-and-elevation.md), the [support matrix](docs/design-system/support-matrix.md), and the [release policy](docs/design-system/release-policy.md). See the [template catalog contract](docs/design-system/templates.md) and the resulting [template gap audit](docs/design-system/template-gap-audit.md) for the composition layer.
164
-
165
- The durable [launch comparison with shadcn/ui](docs/design-system/launch-comparison-shadcn.md) records every audited area, remediation, verification gate, the closed 910/910 contrast contract, and deliberate non-copying decisions.
166
-
167
- Useful commands:
168
-
169
- ```bash
170
- npm run docs:check
171
- npm run docs:normalize
172
- npm run playground:dev
173
- ```
174
-
175
- ## Components
176
-
177
- The registry includes core primitives such as Button, Input, Select, Field, Modal, Sheet, Sidebar, Menu, Tabs, Toast, Table, and Chart. It also includes Banhaten-specific and product-oriented components such as Attribute, Radio Card, Progress Slider, Social Button, Tag, Toolbar, Timeline, Banner, File Upload, Page Header, Command Bar, Slideout, Activity Feed, and Steps.
178
-
179
- Expanded components are larger app compositions. They are installed through the same CLI but documented as a separate tier because their layout contracts are broader than primitive controls.
180
-
181
- Templates sit above those reusable components and patterns. They demonstrate realistic page, flow, and widget assemblies without claiming product behavior or generated-file ownership; candidates become installable blocks only after their APIs and state contracts stabilize.
182
-
183
- ## Development
184
-
185
- ```bash
186
- npm run check
187
- npm run tokens:check
188
- npm run registry:check
189
- npm run playground:test
190
- ```
191
-
192
- The full check verifies CLI behavior, generated token CSS, token contract, raw token violations, registry mirrors, shadcn-compatible registry export, markdown docs, and playground coverage.
1
+ # Banhaten Design System
2
+
3
+ Banhaten is an Arabic and English-first React design system with source-installed components, generated design tokens, and first-class RTL behavior. It uses a shadcn-style distribution model without copying shadcn visuals: components are built around Banhaten tokens, Banhaten component aliases, and Banhaten Figma-derived interaction patterns.
4
+
5
+ ## Quick Start
6
+
7
+ Run the CLI from the root of a React app:
8
+
9
+ ```bash
10
+ npx banhaten init
11
+ npx banhaten add button input select
12
+ ```
13
+
14
+ When dependencies are added, the CLI prints the install command for your package manager.
15
+
16
+ ```bash
17
+ npm install
18
+ pnpm install
19
+ yarn install
20
+ bun install
21
+ ```
22
+
23
+ ## What Init Adds
24
+
25
+ `banhaten init` writes:
26
+
27
+ - `banhaten.config.json` with schema-backed aliases.
28
+ - The base `cn` utility and `use-direction` hook.
29
+ - `.banhaten/USAGE.md` with agent-readable defaults, recipes, and component-selection rules.
30
+ - The generated Banhaten token stylesheet in your configured CSS file.
31
+ - Tailwind v4 and Vite alias setup when those files are detected.
32
+ - Required package dependencies.
33
+
34
+ `banhaten add` and `banhaten update` also refresh the generated token stylesheet, so installed projects receive token changes as the registry evolves.
35
+
36
+ ## CLI
37
+
38
+ ```bash
39
+ npx banhaten init [--cwd <path>] [--force] [--dry-run] [--json]
40
+ npx banhaten add <component...> [--cwd <path>] [--force] [--dry-run] [--json]
41
+ npx banhaten diff [component...] [--cwd <path>] [--json]
42
+ npx banhaten update [component...] [--cwd <path>] [--force] [--dry-run] [--json]
43
+ npx banhaten list [--json]
44
+ npx banhaten search <query> [--json]
45
+ npx banhaten docs <component> [--json]
46
+ npx banhaten view <component> [--file <registry-source>] [--json]
47
+ npx banhaten doctor [--cwd <path>] [--json]
48
+ npx banhaten version
49
+ ```
50
+
51
+ The CLI validates each command before doing project work: unknown flags, missing
52
+ flag values, duplicate flags, and unexpected arguments fail without writing.
53
+ Mutating commands then compute one install plan from the configured destinations
54
+ and the existing TypeScript/Vite root aliases. An alias declared on only one side
55
+ is mirrored to the other; conflicting, ambiguous, or dynamic aliases stop before
56
+ files are staged. The install receipt records the resolved destinations so later
57
+ runs cannot silently create a second generated tree.
58
+
59
+ Dependency ranges follow a guarantee policy: every version admitted by the
60
+ consumer declaration must satisfy Banhaten's requirement. Broader semver ranges
61
+ are safely narrowed when possible and trigger an install hint; partial overlaps,
62
+ disjoint ranges, and opaque package protocols fail without writes. A lockfile is
63
+ never accepted instead of that manifest guarantee. When the manifest is already
64
+ safe, the CLI verifies the bounded installed resolution and npm lock state;
65
+ stale or unverifiable lock state keeps a project-rooted install action visible.
66
+
67
+ Command flags:
68
+
69
+ - `--cwd <path>` runs `init`, `add`, `diff`, `update`, or `doctor` against another project directory.
70
+ - `--dry-run` previews `init`, `add`, or `update` writes.
71
+ - `--force` replaces locally modified generated files after you review `banhaten diff`.
72
+ - `--json` prints machine-readable output for commands that show it above.
73
+
74
+ Global flags:
75
+
76
+ - `--help` or `-h` prints help.
77
+ - `--silent` or `-s` suppresses normal command output.
78
+ - `--yes` or `-y` is accepted for non-interactive scripts.
79
+ - `--version` or `-v` prints the CLI version.
80
+
81
+ ## Generated File Ownership
82
+
83
+ Banhaten is a source registry. The install receipt records the exact generated hash for every managed file. Unmodified files update automatically; locally modified component files and token blocks are never replaced unless you pass `--force`.
84
+
85
+ Use `banhaten diff` before updating if you edit generated component files locally:
86
+
87
+ ```bash
88
+ npx banhaten diff
89
+ npx banhaten update button --force # only after reviewing intentional replacement
90
+ ```
91
+
92
+ Keep product-specific composition outside generated files when possible. Use local wrapper components for app behavior and keep Banhaten files focused on tokens, layout, accessibility primitives, and direction behavior.
93
+
94
+ ## Tokens
95
+
96
+ Every component must style through Banhaten CSS variables, component aliases, or documented exception-ledger values. Raw colors, pixel values, opacity utilities, z-index utilities, durations, and shadow literals are blocked by the component token check.
97
+
98
+ Structured token values and aliases are authored in the owned fragments under
99
+ `tokens/source/`; `tokens/banhaten.tokens.json` is their compiled publication
100
+ artifact. Tailwind mappings, keyframes, global and accessibility rules, and
101
+ typography utilities are authored in `tokens/banhaten.utilities.css`.
102
+ `registry/styles/globals.css` is generated from the compiled token catalog and
103
+ the utility source; neither generated file should be edited directly.
104
+
105
+ Token modes:
106
+
107
+ - Color mode: light and dark.
108
+ - Brand theme: `blue`, `gray`, `brown`, `orange`, `green`, `purple`, `teal`.
109
+ - Radius mode: `default`, `rounded`, `sharp`.
110
+ - Direction: inherited LTR or RTL, with component-level `dir` support where needed.
111
+
112
+ The default appearance is the monochrome `gray` brand theme. It keeps page,
113
+ card, border, and muted surfaces neutral while applying gray to links, focus
114
+ states, and primary actions as well. `blue` remains available as an alternate
115
+ brand theme.
116
+
117
+ Example:
118
+
119
+ ```tsx
120
+ <html className="dark" data-theme="brown" data-radius="rounded" dir="rtl" lang="ar">
121
+ ```
122
+
123
+ Typography utilities are generated as `.bh-text-*` classes and map directly to token variables.
124
+
125
+ ```tsx
126
+ <h1 className="bh-text-heading-xl-bold">...</h1>
127
+ <p className="bh-text-body-md-regular">...</p>
128
+ ```
129
+
130
+ ## Registry Formats
131
+
132
+ Banhaten maintains component-owned registry sources and two compiled
133
+ publication artifacts:
134
+
135
+ - `registry/catalog/components/<id>.json` owns each component contract, while
136
+ `registry/catalog/base.json` and `manifest.json` own the shared contract and
137
+ publication order.
138
+ - `registry/index.json` is the compiled Banhaten artifact used by the CLI. It
139
+ includes an exhaustive, module-aware `supportedExports` runtime contract plus
140
+ non-exhaustive `parts` anatomy, RTL behavior, examples, files, and
141
+ dependencies.
142
+ - `registry.json` is a generated shadcn-compatible export for tools that expect the public shadcn registry schema.
143
+
144
+ Compile both registry publication artifacts after authored catalog changes:
145
+
146
+ ```bash
147
+ npm run registry:export
148
+ ```
149
+
150
+ `supportedExports` is checked against the installed TypeScript modules during
151
+ `npm run registry:check`; a renamed, moved, added, or removed runtime export
152
+ fails the release gate. Run `npm run registry:exports` only after reviewing an
153
+ intentional public runtime API change. Type-only exports are outside this
154
+ manifest. `parts` remains an ordered composition aid and does not claim API
155
+ completeness.
156
+
157
+ ## Documentation
158
+
159
+ Primary docs live in the playground and render live registry-backed previews, install commands, source snippets, API tables, registry files, RTL behavior, and copyable code panels. The playground also includes a Templates tier with 60 searchable page, flow, and widget compositions built from current Banhaten tokens and components.
160
+
161
+ Markdown docs live in `docs/design-system/components`. They are checked for install, API, examples, token contract, RTL rules, and accessibility sections.
162
+
163
+ Launch guides cover [installation](docs/design-system/installation.md), [direction and localization](docs/design-system/direction-and-localization.md), [form recipes](docs/design-system/form-recipes.md), [density and elevation](docs/design-system/density-and-elevation.md), the [support matrix](docs/design-system/support-matrix.md), and the [release policy](docs/design-system/release-policy.md). See the [template catalog contract](docs/design-system/templates.md) and the resulting [template gap audit](docs/design-system/template-gap-audit.md) for the composition layer.
164
+
165
+ The durable [launch comparison with shadcn/ui](docs/design-system/launch-comparison-shadcn.md) records every audited area, remediation, verification gate, the closed 910/910 contrast contract, and deliberate non-copying decisions.
166
+
167
+ Useful commands:
168
+
169
+ ```bash
170
+ npm run docs:check
171
+ npm run docs:normalize
172
+ npm run playground:dev
173
+ ```
174
+
175
+ ## Components
176
+
177
+ The registry includes core primitives such as Button, Input, Select, Field, Modal, Sheet, Sidebar, Menu, Tabs, Toast, Table, and Chart. It also includes Banhaten-specific and product-oriented components such as Attribute, Radio Card, Progress Slider, Social Button, Tag, Toolbar, Timeline, Banner, File Upload, Page Header, Command Bar, Slideout, Activity Feed, and Steps.
178
+
179
+ Expanded components are larger app compositions. They are installed through the same CLI but documented as a separate tier because their layout contracts are broader than primitive controls.
180
+
181
+ Templates sit above those reusable components and patterns. They demonstrate realistic page, flow, and widget assemblies without claiming product behavior or generated-file ownership; candidates become installable blocks only after their APIs and state contracts stabilize.
182
+
183
+ ## Development
184
+
185
+ ```bash
186
+ npm run check
187
+ npm run tokens:check
188
+ npm run registry:check
189
+ npm run playground:test
190
+ ```
191
+
192
+ The full check verifies CLI behavior, generated token CSS, token contract, raw token violations, registry mirrors, shadcn-compatible registry export, markdown docs, and playground coverage.
package/SECURITY.md CHANGED
@@ -1,15 +1,15 @@
1
- # Security Policy
2
-
3
- ## Supported versions
4
-
5
- Until Banhaten reaches 1.0, security fixes are applied to the latest published minor release. Consumers should keep the CLI and copied registry components current.
6
-
7
- ## Reporting a vulnerability
8
-
9
- Report vulnerabilities privately through GitHub’s security-advisory workflow for this repository. Do not open a public issue containing exploit details, credentials, or consumer data.
10
-
11
- Include the affected Banhaten version, component or CLI command, reproduction steps, impact, and any known mitigation. Maintainers will acknowledge a complete report, assess severity, and coordinate a fix and disclosure.
12
-
13
- ## Scope
14
-
15
- The CLI, registry source, generated CSS, dependency declarations, documentation application, and release artifacts are in scope. Vulnerabilities in an upstream dependency should also be reported to that upstream project when appropriate.
1
+ # Security Policy
2
+
3
+ ## Supported versions
4
+
5
+ Until Banhaten reaches 1.0, security fixes are applied to the latest published minor release. Consumers should keep the CLI and copied registry components current.
6
+
7
+ ## Reporting a vulnerability
8
+
9
+ Report vulnerabilities privately through GitHub’s security-advisory workflow for this repository. Do not open a public issue containing exploit details, credentials, or consumer data.
10
+
11
+ Include the affected Banhaten version, component or CLI command, reproduction steps, impact, and any known mitigation. Maintainers will acknowledge a complete report, assess severity, and coordinate a fix and disclosure.
12
+
13
+ ## Scope
14
+
15
+ The CLI, registry source, generated CSS, dependency declarations, documentation application, and release artifacts are in scope. Vulnerabilities in an upstream dependency should also be reported to that upstream project when appropriate.
@@ -1,11 +1,11 @@
1
- {
2
- "$schema": ".banhaten/schema/config.schema.json",
3
- "tailwind": {
4
- "css": "app/globals.css"
5
- },
6
- "aliases": {
7
- "ui": "@/components/ui",
8
- "utils": "@/lib/utils",
9
- "hooks": "@/hooks"
10
- }
11
- }
1
+ {
2
+ "$schema": ".banhaten/schema/config.schema.json",
3
+ "tailwind": {
4
+ "css": "app/globals.css"
5
+ },
6
+ "aliases": {
7
+ "ui": "@/components/ui",
8
+ "utils": "@/lib/utils",
9
+ "hooks": "@/hooks"
10
+ }
11
+ }
@@ -1,13 +1,13 @@
1
- # Design spacing
2
-
3
- Applies to templates (Pages, Flows, Widgets), Test Lab compositions, and background designs.
4
-
5
- Use existing Banhaten spacing tokens for padding, margin, and gaps. Ordinary content groups, headings with actions, and footers use explicit gaps with start alignment. Avoid `space-between`, `space-around`, `space-evenly`, and auto margins to spread ordinary grouped content. These turn leftover width into arbitrary gaps, including fractional pixels. Wrap groups at narrow widths rather than compressing their gaps.
6
-
7
- Keep fluid distribution only where it serves the layout: aligned table/detail values, transaction amounts, schedule columns, chart/slider endpoints, pagination at table edges, standard field affordances, and bottom-anchored sidebar sections. Responsive grid tracks and chart geometry remain fluid. Original reference reproductions remain references.
8
-
9
- Whole spacing tokens do not guarantee that every measured dimension is an integer. Font shaping can give text a fractional width, and responsive tracks, centering, zoom, or scale can create fractional coordinates. Do not change typography, round measurements, or add invisible filler to conceal that. The inspector continues to report real rendered measurements. A fractional text width is not a fractional CSS gap.
10
-
11
- Preserve intentional edge alignment through explicit layout tracks. The music footer uses a flexible text column, a 160px token-width action column, and an exact 8px token gap. The music card uses an even-pixel width so its centered controls and equal timeline columns also have whole-pixel spacing. This changes the actual layout, not the inspector output; the button remains at the trailing edge.
12
-
13
- Validation for spacing changes: inspect the affected layout and measure its actual gap; check a narrow viewport when wrapping is affected. Preserve fluid exceptions for their specific purpose, rather than applying a global pixel-snapping script.
1
+ # Design spacing
2
+
3
+ Applies to templates (Pages, Flows, Widgets), Test Lab compositions, and background designs.
4
+
5
+ Use existing Banhaten spacing tokens for padding, margin, and gaps. Ordinary content groups, headings with actions, and footers use explicit gaps with start alignment. Avoid `space-between`, `space-around`, `space-evenly`, and auto margins to spread ordinary grouped content. These turn leftover width into arbitrary gaps, including fractional pixels. Wrap groups at narrow widths rather than compressing their gaps.
6
+
7
+ Keep fluid distribution only where it serves the layout: aligned table/detail values, transaction amounts, schedule columns, chart/slider endpoints, pagination at table edges, standard field affordances, and bottom-anchored sidebar sections. Responsive grid tracks and chart geometry remain fluid. Original reference reproductions remain references.
8
+
9
+ Whole spacing tokens do not guarantee that every measured dimension is an integer. Font shaping can give text a fractional width, and responsive tracks, centering, zoom, or scale can create fractional coordinates. Do not change typography, round measurements, or add invisible filler to conceal that. The inspector continues to report real rendered measurements. A fractional text width is not a fractional CSS gap.
10
+
11
+ Preserve intentional edge alignment through explicit layout tracks. The music footer uses a flexible text column, a 160px token-width action column, and an exact 8px token gap. The music card uses an even-pixel width so its centered controls and equal timeline columns also have whole-pixel spacing. This changes the actual layout, not the inspector output; the button remains at the trailing edge.
12
+
13
+ Validation for spacing changes: inspect the affected layout and measure its actual gap; check a narrow viewport when wrapping is affected. Preserve fluid exceptions for their specific purpose, rather than applying a global pixel-snapping script.
@@ -1,22 +1,22 @@
1
- # Banhaten Design System Docs
2
-
3
- Use these docs with the live playground.
4
-
5
- - [Registry and CLI](./registry-and-cli.md): registry formats, generated-file ownership, CLI commands, and schema behavior.
6
- - [Installation](./installation.md): Vite, Next.js/framework-neutral setup, fonts, direction, and safe updates.
7
- - [Token Governance](./token-governance.md): token-only component rules, exception ledger, and public override surface.
8
- - [Appearance Presets](./appearance-presets.md): theme and radius mode guidance.
9
- - [Direction and Localization](./direction-and-localization.md): inherited LTR/RTL and product localization responsibilities.
10
- - [Form Recipes](./form-recipes.md): accessible Field composition, validation, selection, dates, and RTL.
11
- - [Density and Elevation](./density-and-elevation.md): supported size contracts and semantic shadow layers.
12
- - [Support Matrix](./support-matrix.md): framework, runtime, browser, font, and package-manager baseline.
13
- - [Release Policy](./release-policy.md): stability tiers, versioning, deprecation, and launch gates.
14
- - [Roadmap](./roadmap.md): explicitly deferred product-specific components and promotion gates.
15
- - [Templates](./templates.md): 60 page, flow, and widget compositions built from Banhaten tokens and components.
16
- - [Template Gap Audit](./template-gap-audit.md): composition friction and prioritized candidates revealed by the template catalog.
17
- - [Launch Comparison](./launch-comparison-shadcn.md): the complete shadcn/ui benchmark, remediation register, and deliberate differences.
18
- - [Component Docs Pattern](./component-docs-pattern.md): the Base / Anatomy / Alternatives shape every playground component page follows.
19
- - [Components](./components/README.md): component markdown catalog.
20
- - [Icon System](./icons.md): icon guidance and explorer notes.
21
-
22
- The playground remains the primary documentation surface because it renders live registry-backed previews, source snippets, copyable code panels, API tables, file links, and RTL behavior.
1
+ # Banhaten Design System Docs
2
+
3
+ Use these docs with the live playground.
4
+
5
+ - [Registry and CLI](./registry-and-cli.md): registry formats, generated-file ownership, CLI commands, and schema behavior.
6
+ - [Installation](./installation.md): Vite, Next.js/framework-neutral setup, fonts, direction, and safe updates.
7
+ - [Token Governance](./token-governance.md): token-only component rules, exception ledger, and public override surface.
8
+ - [Appearance Presets](./appearance-presets.md): theme and radius mode guidance.
9
+ - [Direction and Localization](./direction-and-localization.md): inherited LTR/RTL and product localization responsibilities.
10
+ - [Form Recipes](./form-recipes.md): accessible Field composition, validation, selection, dates, and RTL.
11
+ - [Density and Elevation](./density-and-elevation.md): supported size contracts and semantic shadow layers.
12
+ - [Support Matrix](./support-matrix.md): framework, runtime, browser, font, and package-manager baseline.
13
+ - [Release Policy](./release-policy.md): stability tiers, versioning, deprecation, and launch gates.
14
+ - [Roadmap](./roadmap.md): explicitly deferred product-specific components and promotion gates.
15
+ - [Templates](./templates.md): 60 page, flow, and widget compositions built from Banhaten tokens and components.
16
+ - [Template Gap Audit](./template-gap-audit.md): composition friction and prioritized candidates revealed by the template catalog.
17
+ - [Launch Comparison](./launch-comparison-shadcn.md): the complete shadcn/ui benchmark, remediation register, and deliberate differences.
18
+ - [Component Docs Pattern](./component-docs-pattern.md): the Base / Anatomy / Alternatives shape every playground component page follows.
19
+ - [Components](./components/README.md): component markdown catalog.
20
+ - [Icon System](./icons.md): icon guidance and explorer notes.
21
+
22
+ The playground remains the primary documentation surface because it renders live registry-backed previews, source snippets, copyable code panels, API tables, file links, and RTL behavior.