banhaten 0.1.1 → 0.1.2

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 (37) hide show
  1. package/README.md +20 -8
  2. package/package.json +8 -2
  3. package/registry/components/autocomplete.tsx +637 -0
  4. package/registry/components/avatar.tsx +258 -22
  5. package/registry/components/badge.tsx +97 -35
  6. package/registry/components/date-picker-state.ts +253 -0
  7. package/registry/components/date-picker.tsx +115 -158
  8. package/registry/components/expanded/EmptyState.tsx +155 -0
  9. package/registry/components/expanded/emptyState.css +111 -0
  10. package/registry/components/expanded/slideout.css +1 -0
  11. package/registry/components/expanded/table.css +1 -0
  12. package/registry/components/input-otp.tsx +574 -0
  13. package/registry/components/input.tsx +21 -11
  14. package/registry/components/menu.tsx +371 -8
  15. package/registry/components/popover.tsx +840 -0
  16. package/registry/components/select.tsx +4 -0
  17. package/registry/components/skeleton.css +57 -0
  18. package/registry/components/skeleton.tsx +482 -0
  19. package/registry/components/spinner.tsx +79 -11
  20. package/registry/components/textarea.tsx +1 -1
  21. package/registry/components/tooltip.tsx +4 -0
  22. package/registry/examples/autocomplete-demo.tsx +109 -0
  23. package/registry/examples/avatar-demo.tsx +102 -47
  24. package/registry/examples/badge-demo.tsx +16 -0
  25. package/registry/examples/expanded/command-bar-demo.tsx +236 -0
  26. package/registry/examples/expanded/empty-state-demo.tsx +39 -0
  27. package/registry/examples/input-demo.tsx +1 -1
  28. package/registry/examples/input-otp-demo.tsx +72 -0
  29. package/registry/examples/menu-demo.tsx +101 -88
  30. package/registry/examples/popover-demo.tsx +546 -0
  31. package/registry/examples/select-demo.tsx +1 -1
  32. package/registry/examples/skeleton-demo.tsx +56 -0
  33. package/registry/examples/spinner-demo.tsx +23 -1
  34. package/registry/examples/textarea-demo.tsx +1 -1
  35. package/registry/index.json +240 -8
  36. package/registry/styles/globals.css +88 -0
  37. package/src/cli/index.js +997 -62
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Banhaten design system is an Arabic and English-first React design system. It installs source components into a project, shadcn-style:
4
4
 
5
- ```bash
5
+ ```text
6
6
  npx banhaten init
7
7
  npx banhaten add button
8
8
  npx banhaten add button-group
@@ -16,8 +16,10 @@ npx banhaten add toolbar
16
16
  npx banhaten add social-button
17
17
  npx banhaten add input
18
18
  npx banhaten add select
19
+ npx banhaten add autocomplete
19
20
  npx banhaten add date-picker
20
21
  npx banhaten add slider
22
+ npx banhaten add skeleton
21
23
  npx banhaten add progress
22
24
  npx banhaten add progress-slider
23
25
  npx banhaten add textarea
@@ -54,10 +56,13 @@ The current scaffold includes:
54
56
  - A Radix Switch-backed `toggle` registry item with sm/md geometry, active/disabled states, optional handle icons, labeled fields, supporting text, and RTL-safe label placement.
55
57
  - A Figma-matched `textarea` registry item with label, helper text, error, default and tags modes, placeholder, filled, disabled, and RTL states.
56
58
  - A Radix Select-backed, Figma-matched `select` registry item with default and soft triggers, error/filled/disabled states, menu surface, checkbox and check selection, and item media for text, icons, users, companies, payment methods, and status dots.
59
+ - A composed `autocomplete` registry item with Input field anatomy, Select menu rows, Tag selections, filtering, keyboard navigation, controlled state, and RTL layout.
57
60
  - A Figma-matched `date-picker` registry item with Calendar, Range Calendar, Date Picker, Date Range Picker, presets, time rows, open states, month/year view, and RTL.
58
61
  - A Radix Slider-backed `slider` registry item with single, range, multi-thumb, text/tooltip indicators, ticks, vertical layout, pill treatment, tones, and RTL behavior.
62
+ - A token-built `skeleton` registry item with primitive, text, avatar, button, input, card, list, table, form, shimmer, reduced-motion, and RTL loading compositions.
59
63
  - A read-only `progress` registry item with value meters, label placements, helper text, indicators, spinner, and RTL fill direction.
60
64
  - A Radix-based `progress-slider` registry item with semantic tones, ticks, focus treatment, and RTL-aware keyboard behavior.
65
+ - A `spinner` registry item with steady `Spinner`, variable-arc `DynamicSpinner`, inherited text color, and CSS variable sizing.
61
66
  - A Radix Tooltip-backed `tooltip` registry item with dark/default variants, small/large sizes, pointer positions, shortcut and close slots, and RTL-safe layout.
62
67
  - Token CSS generated from the local token exports in `tokens`, with the Banhaten alias layer kept in the same generated stylesheet.
63
68
  - Inter as the single font family, loaded through `@fontsource/inter` weights 400, 500, 600, and 700.
@@ -67,7 +72,7 @@ The current scaffold includes:
67
72
 
68
73
  From this repository:
69
74
 
70
- ```bash
75
+ ```text
71
76
  node src/cli/index.js init --cwd ./playground
72
77
  node src/cli/index.js add button --cwd ./playground
73
78
  node src/cli/index.js add button-group --cwd ./playground
@@ -81,8 +86,11 @@ node src/cli/index.js add toolbar --cwd ./playground
81
86
  node src/cli/index.js add social-button --cwd ./playground
82
87
  node src/cli/index.js add input --cwd ./playground
83
88
  node src/cli/index.js add select --cwd ./playground
89
+ node src/cli/index.js add autocomplete --cwd ./playground
84
90
  node src/cli/index.js add date-picker --cwd ./playground
85
91
  node src/cli/index.js add slider --cwd ./playground
92
+ node src/cli/index.js add skeleton --cwd ./playground
93
+ node src/cli/index.js add spinner --cwd ./playground
86
94
  node src/cli/index.js add progress --cwd ./playground
87
95
  node src/cli/index.js add progress-slider --cwd ./playground
88
96
  node src/cli/index.js add textarea --cwd ./playground
@@ -98,14 +106,14 @@ node src/cli/index.js add tooltip --cwd ./playground
98
106
 
99
107
  Run the local component playground:
100
108
 
101
- ```bash
109
+ ```text
102
110
  npm --prefix playground install
103
111
  npm run playground:dev
104
112
  ```
105
113
 
106
114
  In a published package:
107
115
 
108
- ```bash
116
+ ```text
109
117
  npx banhaten init
110
118
  npx banhaten add button
111
119
  npx banhaten add button-group
@@ -119,8 +127,11 @@ npx banhaten add toolbar
119
127
  npx banhaten add social-button
120
128
  npx banhaten add input
121
129
  npx banhaten add select
130
+ npx banhaten add autocomplete
122
131
  npx banhaten add date-picker
123
132
  npx banhaten add slider
133
+ npx banhaten add skeleton
134
+ npx banhaten add spinner
124
135
  npx banhaten add progress
125
136
  npx banhaten add progress-slider
126
137
  npx banhaten add textarea
@@ -136,7 +147,7 @@ npx banhaten add tooltip
136
147
 
137
148
  After `init` or `add`, run your package manager install command when the CLI reports new dependencies:
138
149
 
139
- ```bash
150
+ ```text
140
151
  npm install
141
152
  ```
142
153
 
@@ -144,7 +155,7 @@ npm install
144
155
 
145
156
  Use the CLI from the root of a React app:
146
157
 
147
- ```bash
158
+ ```text
148
159
  npx banhaten init
149
160
  npx banhaten add button input select
150
161
  npm install
@@ -219,6 +230,7 @@ Banhaten themes are controlled by attributes on the document element:
219
230
  | `Modal` | `size`, `dir`, `title`, `description`, `showIcon`, `showCloseButton`, `showDivider`, `showFooter`, `showCheckbox`, `footer`; `ConfirmModal` adds `intent`, `confirmLabel`, `confirmLoading`, `preventOutsideDismiss` |
220
231
  | `Pagination` | `type`, `variant`, `dir`, `page`, `totalPages`, `labels` |
221
232
  | `Progress` | `value`, `min`, `max`, `size`, `labelPosition`, `helperText`, `showIndicator`, `showSpinner` |
233
+ | `Spinner` | `Spinner`, `DynamicSpinner`, inherited text color, `--bh-spinner-size` CSS variable |
222
234
  | `Slider` | `value`, `defaultValue`, `tone`, `size`, `variant`, `orientation`, `showTicks` |
223
235
  | `ProgressSlider` | `value`, `defaultValue`, `tone`, `size`, `showTicks`, `ariaValueText` |
224
236
  | `Toggle` | `size`, `showIcon`, `disabled`; `ToggleField` supports `controlPosition`, `label`, `description` |
@@ -231,14 +243,14 @@ Banhaten themes are controlled by attributes on the document element:
231
243
 
232
244
  Check for local drift without writing files:
233
245
 
234
- ```bash
246
+ ```text
235
247
  npx banhaten diff
236
248
  npx banhaten diff button
237
249
  ```
238
250
 
239
251
  Refresh all detected installed components, or target a specific component:
240
252
 
241
- ```bash
253
+ ```text
242
254
  npx banhaten update
243
255
  npx banhaten update button
244
256
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "banhaten",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "Banhaten design system: an Arabic and English-first React design system with shadcn-style component installation.",
5
5
  "type": "module",
6
6
  "bin": {
@@ -55,5 +55,11 @@
55
55
  "bugs": {
56
56
  "url": "https://github.com/AhmadGalal85/Banhaten-design-system/issues"
57
57
  },
58
- "homepage": "https://github.com/AhmadGalal85/Banhaten-design-system#readme"
58
+ "homepage": "https://github.com/AhmadGalal85/Banhaten-design-system#readme",
59
+ "main": "index.js",
60
+ "directories": {
61
+ "doc": "docs"
62
+ },
63
+ "devDependencies": {},
64
+ "author": ""
59
65
  }