banhaten 0.1.0 → 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 (81) hide show
  1. package/README.md +21 -9
  2. package/package.json +8 -2
  3. package/registry/components/accordion.tsx +37 -1
  4. package/registry/components/alert.tsx +14 -28
  5. package/registry/components/attribute.tsx +6 -10
  6. package/registry/components/autocomplete.tsx +637 -0
  7. package/registry/components/avatar.tsx +259 -24
  8. package/registry/components/badge.tsx +97 -35
  9. package/registry/components/button-group.tsx +1 -1
  10. package/registry/components/card.tsx +1 -1
  11. package/registry/components/checkbox.tsx +19 -16
  12. package/registry/components/date-picker-state.ts +253 -0
  13. package/registry/components/date-picker.tsx +115 -158
  14. package/registry/components/expanded/ActivityFeed.tsx +37 -23
  15. package/registry/components/expanded/Banner.tsx +54 -19
  16. package/registry/components/expanded/Breadcrumbs.tsx +10 -38
  17. package/registry/components/expanded/CatalogComponentsShowcase.tsx +11 -16
  18. package/registry/components/expanded/CatalogTag.tsx +4 -11
  19. package/registry/components/expanded/CommandBar.tsx +33 -53
  20. package/registry/components/expanded/EmptyState.tsx +155 -0
  21. package/registry/components/expanded/FileUpload.tsx +362 -59
  22. package/registry/components/expanded/OnboardingStepListItem.tsx +6 -10
  23. package/registry/components/expanded/PageHeader.tsx +2 -11
  24. package/registry/components/expanded/Slideout.tsx +12 -23
  25. package/registry/components/expanded/Steps.tsx +6 -8
  26. package/registry/components/expanded/Table.tsx +18 -40
  27. package/registry/components/expanded/Timeline.tsx +5 -24
  28. package/registry/components/expanded/activityFeed.css +10 -54
  29. package/registry/components/expanded/banner.css +8 -75
  30. package/registry/components/expanded/breadcrumbs.css +1 -1
  31. package/registry/components/expanded/commandBar.css +23 -26
  32. package/registry/components/expanded/divider.css +1 -1
  33. package/registry/components/expanded/emptyState.css +111 -0
  34. package/registry/components/expanded/fileUpload.css +304 -75
  35. package/registry/components/expanded/pageHeader.css +1 -1
  36. package/registry/components/expanded/slideout.css +1 -0
  37. package/registry/components/expanded/steps.css +15 -51
  38. package/registry/components/expanded/table.css +6 -1
  39. package/registry/components/expanded/timeline.css +18 -15
  40. package/registry/components/input-otp.tsx +574 -0
  41. package/registry/components/input.tsx +140 -59
  42. package/registry/components/menu.tsx +470 -80
  43. package/registry/components/pagination.tsx +6 -18
  44. package/registry/components/popover.tsx +840 -0
  45. package/registry/components/radio-card.tsx +25 -31
  46. package/registry/components/select-content.tsx +28 -123
  47. package/registry/components/select.tsx +13 -9
  48. package/registry/components/skeleton.css +57 -0
  49. package/registry/components/skeleton.tsx +482 -0
  50. package/registry/components/social-button.tsx +24 -90
  51. package/registry/components/spinner.tsx +91 -7
  52. package/registry/components/textarea.tsx +21 -36
  53. package/registry/components/toggle.tsx +7 -23
  54. package/registry/components/tooltip.tsx +8 -4
  55. package/registry/examples/attribute-demo.tsx +2 -2
  56. package/registry/examples/autocomplete-demo.tsx +109 -0
  57. package/registry/examples/avatar-demo.tsx +102 -47
  58. package/registry/examples/badge-demo.tsx +16 -0
  59. package/registry/examples/checkbox-demo.tsx +3 -8
  60. package/registry/examples/date-picker-demo.tsx +75 -22
  61. package/registry/examples/expanded/banner-demo.tsx +31 -6
  62. package/registry/examples/expanded/breadcrumbs-demo.tsx +59 -0
  63. package/registry/examples/expanded/command-bar-demo.tsx +236 -0
  64. package/registry/examples/expanded/empty-state-demo.tsx +39 -0
  65. package/registry/examples/expanded/file-upload-demo.tsx +60 -0
  66. package/registry/examples/expanded/steps-demo.tsx +11 -0
  67. package/registry/examples/expanded/table-demo.tsx +142 -0
  68. package/registry/examples/input-demo.tsx +1 -1
  69. package/registry/examples/input-otp-demo.tsx +72 -0
  70. package/registry/examples/menu-demo.tsx +101 -88
  71. package/registry/examples/popover-demo.tsx +546 -0
  72. package/registry/examples/progress-demo.tsx +2 -2
  73. package/registry/examples/select-demo.tsx +32 -18
  74. package/registry/examples/skeleton-demo.tsx +56 -0
  75. package/registry/examples/social-button-demo.tsx +33 -33
  76. package/registry/examples/spinner-demo.tsx +59 -0
  77. package/registry/examples/tag-demo.tsx +1 -1
  78. package/registry/examples/textarea-demo.tsx +1 -1
  79. package/registry/index.json +266 -20
  80. package/registry/styles/globals.css +93 -3
  81. package/src/cli/index.js +997 -62
package/registry/components/expanded/steps.css CHANGED
@@ -77,10 +77,9 @@
77
77
  --steps-item-align: center;
78
78
  }
79
79
 
80
- .ds-horizontal-step-item--trailing.ds-horizontal-step-item--ltr,
81
- .ds-horizontal-step-item--leading.ds-horizontal-step-item--rtl {
82
- --steps-item-align: end;
83
- }
80
+ .ds-horizontal-step-item--trailing {
81
+ --steps-item-align: end;
82
+ }
84
83
 
85
84
  .ds-horizontal-step-item__track {
86
85
  display: flex;
@@ -154,11 +153,12 @@
154
153
  text-align: center;
155
154
  }
156
155
 
157
- .ds-step-marker--icon svg {
158
- width: var(--bh-space-5xl-24);
159
- height: var(--bh-space-5xl-24);
160
- fill: currentColor;
161
- }
156
+ .ds-step-marker--icon svg {
157
+ width: var(--bh-space-3xl-16);
158
+ height: var(--bh-space-3xl-16);
159
+ fill: none;
160
+ stroke: currentColor;
161
+ }
162
162
 
163
163
  .ds-vertical-step-item {
164
164
  display: flex;
@@ -282,48 +282,12 @@
282
282
  gap: var(--steps-space-md);
283
283
  }
284
284
 
285
- .ds-vertical-step-item--rtl .ds-vertical-step-item__actions {
286
- align-self: flex-end;
287
- }
285
+ .ds-vertical-step-item--rtl .ds-vertical-step-item__actions {
286
+ align-self: flex-start;
287
+ }
288
288
 
289
- .ds-step-button {
290
- appearance: none;
291
- position: relative;
292
- display: inline-flex;
293
- align-items: center;
294
- justify-content: center;
295
- height: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
296
- margin: 0;
297
- padding: var(--steps-space-md) var(--steps-space-xl);
298
- border-radius: var(--steps-radius-control);
299
- font: inherit;
300
- font-size: var(--bh-text-body-md-font-size);
301
- font-weight: var(--bh-font-weight-medium);
302
- line-height: var(--bh-text-body-md-line-height);
303
- white-space: nowrap;
304
- cursor: pointer;
305
- box-shadow: var(--shadow-button-raised);
306
- }
307
-
308
- .ds-step-button--primary {
309
- border: 0;
310
- color: var(--steps-content-on-brand);
311
- background: var(--steps-interactive-brand);
312
- }
313
-
314
- .ds-step-button--secondary {
315
- border: var(--bh-space-xxxs-1) solid var(--steps-border-default);
316
- color: var(--steps-content-default);
317
- background: var(--steps-interactive-secondary);
318
- }
319
-
320
- .ds-step-button:focus-visible {
321
- outline: var(--bh-space-xxs-2) solid var(--steps-interactive-brand);
322
- outline-offset: var(--bh-space-xxs-2);
323
- }
324
-
325
- .ds-vertical-step-item__bottom-padding {
326
- width: 100%;
327
- height: var(--bh-space-5xl-24);
289
+ .ds-vertical-step-item__bottom-padding {
290
+ width: 100%;
291
+ height: var(--bh-space-5xl-24);
328
292
  flex: 0 0 auto;
329
293
  }
package/registry/components/expanded/table.css CHANGED
@@ -136,6 +136,7 @@
136
136
  box-sizing: border-box;
137
137
  width: 100%;
138
138
  overflow: auto;
139
+ scrollbar-gutter: stable;
139
140
  border: var(--bh-space-xxxs-1) solid var(--bh-border-subtle);
140
141
  border-radius: var(--bh-radius-lg-8);
141
142
  background: var(--bh-bg-default);
@@ -302,7 +303,7 @@
302
303
  }
303
304
 
304
305
  .ds-table-checkbox input:focus-visible + span {
305
- outline: var(--bh-space-xxs-2) solid var(--bh-border-focus);
306
+ outline: var(--bh-focus-ring-width) solid var(--bh-border-focus);
306
307
  outline-offset: var(--bh-space-xxs-2);
307
308
  }
308
309
 
@@ -315,6 +316,10 @@
315
316
  white-space: nowrap;
316
317
  }
317
318
 
319
+ .ds-table-item-text {
320
+ font-weight: var(--bh-font-weight-semibold);
321
+ }
322
+
318
323
  .ds-table-item-text--subtle {
319
324
  color: var(--bh-content-subtle);
320
325
  }
package/registry/components/expanded/timeline.css CHANGED
@@ -9,10 +9,11 @@
9
9
  --timeline-content-default: var(--bh-content-default);
10
10
  --timeline-content-on-brand: var(--bh-content-on-brand);
11
11
  --timeline-content-subtle: var(--bh-content-subtle);
12
- --timeline-radius-full: var(--bh-radius-full);
13
- --timeline-space-xxs: var(--bh-space-xxs-2);
14
- --timeline-space-xs: var(--bh-space-xs-4);
15
- --timeline-space-sm: var(--bh-space-sm-6);
12
+ --timeline-radius-full: var(--bh-radius-full);
13
+ --timeline-marker-slot: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
14
+ --timeline-space-xxs: var(--bh-space-xxs-2);
15
+ --timeline-space-xs: var(--bh-space-xs-4);
16
+ --timeline-space-sm: var(--bh-space-sm-6);
16
17
  --timeline-space-lg: var(--bh-space-lg-10);
17
18
  --timeline-space-xl: var(--bh-space-xl-12);
18
19
 
@@ -92,17 +93,19 @@
92
93
  direction: ltr;
93
94
  }
94
95
 
95
- .ds-timeline__indicator--vertical {
96
- align-self: stretch;
97
- flex-direction: column;
98
- padding-top: var(--timeline-space-xxs);
99
- }
100
-
101
- .ds-timeline__indicator--horizontal {
102
- width: 100%;
103
- min-width: 0;
104
- flex-direction: row;
105
- }
96
+ .ds-timeline__indicator--vertical {
97
+ align-self: stretch;
98
+ flex-direction: column;
99
+ width: var(--timeline-marker-slot);
100
+ padding-top: var(--timeline-space-xxs);
101
+ }
102
+
103
+ .ds-timeline__indicator--horizontal {
104
+ width: 100%;
105
+ height: var(--timeline-marker-slot);
106
+ min-width: 0;
107
+ flex-direction: row;
108
+ }
106
109
 
107
110
  .ds-timeline-item--icon .ds-timeline__indicator {
108
111
  gap: var(--timeline-space-xxs);