@devalok/shilp-sutra 0.37.1 → 0.39.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 (260) hide show
  1. package/MIGRATION.md +185 -0
  2. package/dist/_chunks/badge-group.js +4 -4
  3. package/dist/_chunks/badge-group.js.map +1 -1
  4. package/dist/_chunks/chat.js +14 -14
  5. package/dist/_chunks/chat.js.map +1 -1
  6. package/dist/_chunks/date-picker.js +9 -9
  7. package/dist/_chunks/date-picker.js.map +1 -1
  8. package/dist/_chunks/document-preview.js +2 -2
  9. package/dist/_chunks/document-preview.js.map +1 -1
  10. package/dist/_chunks/file-preview.js +11 -11
  11. package/dist/_chunks/file-preview.js.map +1 -1
  12. package/dist/_chunks/image-preview.js +2 -2
  13. package/dist/_chunks/image-preview.js.map +1 -1
  14. package/dist/_chunks/mention-suggestion.js +5 -5
  15. package/dist/_chunks/mention-suggestion.js.map +1 -1
  16. package/dist/_chunks/popover.js +3 -3
  17. package/dist/_chunks/popover.js.map +1 -1
  18. package/dist/_chunks/rich-chat-input.js +33 -33
  19. package/dist/_chunks/rich-chat-input.js.map +1 -1
  20. package/dist/_chunks/shared.js +5 -5
  21. package/dist/_chunks/shared.js.map +1 -1
  22. package/dist/_chunks/text.js +2 -2
  23. package/dist/_chunks/text.js.map +1 -1
  24. package/dist/_chunks/tiptap.js +977 -968
  25. package/dist/_chunks/tiptap.js.map +1 -1
  26. package/dist/_chunks/tree-view.js +1 -1
  27. package/dist/_chunks/tree-view.js.map +1 -1
  28. package/dist/_chunks/use-calendar.js +5 -5
  29. package/dist/_chunks/use-calendar.js.map +1 -1
  30. package/dist/ai/command-bar.js +10 -10
  31. package/dist/ai/command-bar.js.map +1 -1
  32. package/dist/ai/conversation.js +4 -4
  33. package/dist/ai/conversation.js.map +1 -1
  34. package/dist/composed/activity-feed.js +5 -5
  35. package/dist/composed/activity-feed.js.map +1 -1
  36. package/dist/composed/avatar-group.js +4 -4
  37. package/dist/composed/avatar-group.js.map +1 -1
  38. package/dist/composed/bulk-action-bar.js +1 -1
  39. package/dist/composed/bulk-action-bar.js.map +1 -1
  40. package/dist/composed/command-palette.js +5 -5
  41. package/dist/composed/command-palette.js.map +1 -1
  42. package/dist/composed/content-card.js +1 -1
  43. package/dist/composed/content-card.js.map +1 -1
  44. package/dist/composed/emoji-picker.js +4 -4
  45. package/dist/composed/emoji-picker.js.map +1 -1
  46. package/dist/composed/empty-state.js +1 -1
  47. package/dist/composed/empty-state.js.map +1 -1
  48. package/dist/composed/error-boundary.js +3 -3
  49. package/dist/composed/error-boundary.js.map +1 -1
  50. package/dist/composed/filter-bar.js +1 -1
  51. package/dist/composed/filter-bar.js.map +1 -1
  52. package/dist/composed/index.d.ts +0 -2
  53. package/dist/composed/index.d.ts.map +1 -1
  54. package/dist/composed/index.js +5 -6
  55. package/dist/composed/inline-edit.js +1 -1
  56. package/dist/composed/inline-edit.js.map +1 -1
  57. package/dist/composed/loading-skeleton.js +9 -9
  58. package/dist/composed/loading-skeleton.js.map +1 -1
  59. package/dist/composed/markdown-viewer.js +3 -3
  60. package/dist/composed/markdown-viewer.js.map +1 -1
  61. package/dist/composed/multi-select-popover.js +1 -1
  62. package/dist/composed/multi-select-popover.js.map +1 -1
  63. package/dist/composed/page-header.js +1 -1
  64. package/dist/composed/page-header.js.map +1 -1
  65. package/dist/composed/page-skeletons.js +15 -15
  66. package/dist/composed/page-skeletons.js.map +1 -1
  67. package/dist/composed/priority-indicator.js +3 -3
  68. package/dist/composed/priority-indicator.js.map +1 -1
  69. package/dist/composed/rich-text-editor.js +11 -11
  70. package/dist/composed/rich-text-editor.js.map +1 -1
  71. package/dist/composed/schedule-view.js +3 -3
  72. package/dist/composed/schedule-view.js.map +1 -1
  73. package/dist/composed/status-badge.js +3 -3
  74. package/dist/composed/status-badge.js.map +1 -1
  75. package/dist/hooks/index.d.ts +2 -2
  76. package/dist/hooks/index.d.ts.map +1 -1
  77. package/dist/hooks/index.js +0 -1
  78. package/dist/shell/bottom-navbar.js +6 -6
  79. package/dist/shell/bottom-navbar.js.map +1 -1
  80. package/dist/shell/notification-center.js +8 -8
  81. package/dist/shell/notification-center.js.map +1 -1
  82. package/dist/shell/notification-preferences.js +1 -1
  83. package/dist/shell/notification-preferences.js.map +1 -1
  84. package/dist/shell/sidebar.js +6 -6
  85. package/dist/shell/sidebar.js.map +1 -1
  86. package/dist/shell/top-bar.js +4 -4
  87. package/dist/shell/top-bar.js.map +1 -1
  88. package/dist/tokens/semantic.css +82 -9
  89. package/dist/ui/accordion.js +1 -1
  90. package/dist/ui/accordion.js.map +1 -1
  91. package/dist/ui/alert-dialog.js +3 -3
  92. package/dist/ui/alert-dialog.js.map +1 -1
  93. package/dist/ui/alert.d.ts +1 -2
  94. package/dist/ui/alert.d.ts.map +1 -1
  95. package/dist/ui/alert.js +3 -29
  96. package/dist/ui/alert.js.map +1 -1
  97. package/dist/ui/autocomplete.js +2 -2
  98. package/dist/ui/autocomplete.js.map +1 -1
  99. package/dist/ui/avatar.js +11 -11
  100. package/dist/ui/avatar.js.map +1 -1
  101. package/dist/ui/badge-indicator.js +1 -1
  102. package/dist/ui/badge-indicator.js.map +1 -1
  103. package/dist/ui/banner.d.ts +3 -5
  104. package/dist/ui/banner.d.ts.map +1 -1
  105. package/dist/ui/banner.js +14 -14
  106. package/dist/ui/banner.js.map +1 -1
  107. package/dist/ui/breadcrumb.js +1 -1
  108. package/dist/ui/breadcrumb.js.map +1 -1
  109. package/dist/ui/button.d.ts +2 -2
  110. package/dist/ui/button.js +14 -14
  111. package/dist/ui/button.js.map +1 -1
  112. package/dist/ui/card.js +5 -5
  113. package/dist/ui/card.js.map +1 -1
  114. package/dist/ui/charts/index.js +5 -5
  115. package/dist/ui/charts/index.js.map +1 -1
  116. package/dist/ui/checkbox.js +1 -1
  117. package/dist/ui/checkbox.js.map +1 -1
  118. package/dist/ui/code.js +2 -2
  119. package/dist/ui/code.js.map +1 -1
  120. package/dist/ui/color-input.js +10 -10
  121. package/dist/ui/color-input.js.map +1 -1
  122. package/dist/ui/color-swatch.js +3 -3
  123. package/dist/ui/color-swatch.js.map +1 -1
  124. package/dist/ui/combobox.js +5 -5
  125. package/dist/ui/combobox.js.map +1 -1
  126. package/dist/ui/context-menu.js +6 -6
  127. package/dist/ui/context-menu.js.map +1 -1
  128. package/dist/ui/data-table-body.js +1 -1
  129. package/dist/ui/data-table-body.js.map +1 -1
  130. package/dist/ui/data-table-bulk-actions.js +2 -2
  131. package/dist/ui/data-table-bulk-actions.js.map +1 -1
  132. package/dist/ui/data-table-card.js +2 -2
  133. package/dist/ui/data-table-card.js.map +1 -1
  134. package/dist/ui/data-table-header.js +2 -2
  135. package/dist/ui/data-table-header.js.map +1 -1
  136. package/dist/ui/data-table-pagination.js +3 -3
  137. package/dist/ui/data-table-pagination.js.map +1 -1
  138. package/dist/ui/data-table-toolbar.js +1 -1
  139. package/dist/ui/data-table-toolbar.js.map +1 -1
  140. package/dist/ui/data-table.js +1 -1
  141. package/dist/ui/data-table.js.map +1 -1
  142. package/dist/ui/devalok-grain.d.ts +1 -1
  143. package/dist/ui/devalok-grain.js.map +1 -1
  144. package/dist/ui/dialog.js +2 -2
  145. package/dist/ui/dialog.js.map +1 -1
  146. package/dist/ui/dropdown-menu.js +6 -6
  147. package/dist/ui/dropdown-menu.js.map +1 -1
  148. package/dist/ui/file-upload.js +4 -4
  149. package/dist/ui/file-upload.js.map +1 -1
  150. package/dist/ui/hover-card.js +1 -1
  151. package/dist/ui/hover-card.js.map +1 -1
  152. package/dist/ui/icon-button.js +1 -1
  153. package/dist/ui/icon-button.js.map +1 -1
  154. package/dist/ui/index.d.ts +1 -1
  155. package/dist/ui/index.d.ts.map +1 -1
  156. package/dist/ui/index.js +2 -2
  157. package/dist/ui/index.js.map +1 -1
  158. package/dist/ui/input-otp.js +1 -1
  159. package/dist/ui/input-otp.js.map +1 -1
  160. package/dist/ui/input.d.ts +1 -9
  161. package/dist/ui/input.d.ts.map +1 -1
  162. package/dist/ui/input.js +28 -29
  163. package/dist/ui/input.js.map +1 -1
  164. package/dist/ui/link.js +1 -1
  165. package/dist/ui/link.js.map +1 -1
  166. package/dist/ui/menubar.js +8 -8
  167. package/dist/ui/menubar.js.map +1 -1
  168. package/dist/ui/navigation-menu.js +3 -3
  169. package/dist/ui/navigation-menu.js.map +1 -1
  170. package/dist/ui/number-input.js +3 -3
  171. package/dist/ui/number-input.js.map +1 -1
  172. package/dist/ui/pagination.js +1 -1
  173. package/dist/ui/pagination.js.map +1 -1
  174. package/dist/ui/progress.js +1 -1
  175. package/dist/ui/progress.js.map +1 -1
  176. package/dist/ui/radio.js +1 -1
  177. package/dist/ui/radio.js.map +1 -1
  178. package/dist/ui/segmented-control.d.ts +1 -1
  179. package/dist/ui/segmented-control.d.ts.map +1 -1
  180. package/dist/ui/segmented-control.js +5 -7
  181. package/dist/ui/segmented-control.js.map +1 -1
  182. package/dist/ui/select.js +3 -3
  183. package/dist/ui/select.js.map +1 -1
  184. package/dist/ui/sheet.js +2 -2
  185. package/dist/ui/sheet.js.map +1 -1
  186. package/dist/ui/sidebar.js +11 -11
  187. package/dist/ui/sidebar.js.map +1 -1
  188. package/dist/ui/skeleton.js +9 -9
  189. package/dist/ui/skeleton.js.map +1 -1
  190. package/dist/ui/slider.js +2 -2
  191. package/dist/ui/slider.js.map +1 -1
  192. package/dist/ui/split-button.js +7 -7
  193. package/dist/ui/split-button.js.map +1 -1
  194. package/dist/ui/stat-card.js +7 -7
  195. package/dist/ui/stat-card.js.map +1 -1
  196. package/dist/ui/status-dot.js +2 -2
  197. package/dist/ui/status-dot.js.map +1 -1
  198. package/dist/ui/stepper.js +2 -2
  199. package/dist/ui/stepper.js.map +1 -1
  200. package/dist/ui/switch.js +2 -2
  201. package/dist/ui/switch.js.map +1 -1
  202. package/dist/ui/tabs.js +3 -3
  203. package/dist/ui/tabs.js.map +1 -1
  204. package/dist/ui/textarea.js +1 -1
  205. package/dist/ui/textarea.js.map +1 -1
  206. package/dist/ui/toast.js +8 -8
  207. package/dist/ui/toast.js.map +1 -1
  208. package/dist/ui/toggle.js +1 -1
  209. package/dist/ui/toggle.js.map +1 -1
  210. package/dist/ui/tooltip.js +1 -1
  211. package/dist/ui/tooltip.js.map +1 -1
  212. package/docs/components/_header.md +91 -2
  213. package/docs/components/ui/alert.md +4 -1
  214. package/docs/components/ui/banner.md +3 -1
  215. package/docs/components/ui/input.md +4 -2
  216. package/docs/components/ui/segmented-control.md +13 -6
  217. package/docs/recipes/customize-brand.md +297 -0
  218. package/docs/recipes/index.md +51 -0
  219. package/docs/recipes/install-astro.md +178 -0
  220. package/docs/recipes/install-next-app-router.md +230 -0
  221. package/docs/recipes/install-next-pages.md +123 -0
  222. package/docs/recipes/install-remix.md +171 -0
  223. package/docs/recipes/install-tanstack-start.md +143 -0
  224. package/docs/recipes/install-vite.md +170 -0
  225. package/docs/recipes/server-components.md +209 -0
  226. package/docs/recipes/troubleshoot.md +217 -0
  227. package/llms-full.txt +116 -54
  228. package/llms.txt +42 -17
  229. package/package.json +46 -35
  230. package/skill/README.md +99 -0
  231. package/skill/SKILL.md +144 -0
  232. package/skill/install.sh +59 -0
  233. package/skill/references/components-full.md +6997 -0
  234. package/skill/references/components.md +673 -0
  235. package/skill/references/customize-brand.md +299 -0
  236. package/skill/references/server-components.md +211 -0
  237. package/skill/references/setup-astro.md +180 -0
  238. package/skill/references/setup-next-app-router.md +232 -0
  239. package/skill/references/setup-next-pages.md +125 -0
  240. package/skill/references/setup-remix.md +173 -0
  241. package/skill/references/setup-tanstack-start.md +145 -0
  242. package/skill/references/setup-vite.md +172 -0
  243. package/skill/references/troubleshoot.md +219 -0
  244. package/dist/composed/responsive-overlay.d.ts +0 -23
  245. package/dist/composed/responsive-overlay.d.ts.map +0 -1
  246. package/dist/composed/responsive-overlay.js +0 -40
  247. package/dist/composed/responsive-overlay.js.map +0 -1
  248. package/dist/hooks/use-toast.d.ts +0 -17
  249. package/dist/hooks/use-toast.d.ts.map +0 -1
  250. package/dist/hooks/use-toast.js +0 -3
  251. package/dist/tailwind/index.cjs +0 -41
  252. package/dist/tailwind/index.d.ts +0 -2
  253. package/dist/tailwind/index.d.ts.map +0 -1
  254. package/dist/tailwind/index.js +0 -2
  255. package/dist/tailwind/preset.d.ts +0 -25
  256. package/dist/tailwind/preset.d.ts.map +0 -1
  257. package/dist/tailwind/preset.js +0 -17
  258. package/dist/tailwind/preset.js.map +0 -1
  259. package/docs/components/composed/responsive-overlay.md +0 -41
  260. /package/{LICENSE → skill/LICENSE} +0 -0
package/MIGRATION.md CHANGED
@@ -4,6 +4,191 @@ This page indexes all breaking changes across `@devalok/shilp-sutra` versions. F
4
4
 
5
5
  > **Upgrading from < 0.36?** Start here, then read each intermediate version section. Breaking changes stack — skipping versions means stacking migrations.
6
6
 
7
+ ## v0.39.0 — Shape presets & semantic radius role tokens
8
+
9
+ No API breaks. Component prop signatures unchanged. But the visual output of several components shifts because radius is now role-driven, not per-size ad-hoc.
10
+
11
+ ### What changed under the hood
12
+
13
+ Radius now has TWO layers:
14
+
15
+ - **Primitive scale** (private, unchanged): `--radius-ds-sm/md/lg/xl/2xl/full`
16
+ - **Semantic roles** (new, public): `--radius-control`, `--radius-control-inner`, `--radius-surface`, `--radius-overlay-sm`, `--radius-overlay`, `--radius-overlay-lg`, `--radius-pill`, `--radius-bubble`
17
+
18
+ Components reference roles. A new `[data-shape]` attribute on `<html>` (or any subtree) remaps all roles at once. Three presets ship: `sharp`, `slightly-rounded` (default), `rounded`.
19
+
20
+ ### Visual changes consumers see
21
+
22
+ | Component | Was (px) | Now (px) | Why |
23
+ |---|---|---|---|
24
+ | Button md | 10 | 6 | Per-size radius scaling removed — same role, same radius |
25
+ | Button lg | 16 | 6 | Same |
26
+ | Button icon-lg | 10 | 6 | Same |
27
+ | Input lg | 10 | 6 | Now matches Button at same height |
28
+ | Tabs trigger (contained) | 10 | 6 | Now matches Button |
29
+ | SegmentedControl item | 10 | 9999 | Renamed `pill` is now actually pill |
30
+ | Menubar trigger | 2 | 6 | Now matches DropdownMenu item |
31
+ | Autocomplete listbox | 6 | 10 | Now matches Popover / DropdownMenu |
32
+ | ChatMessage bubble | 24 | 24 (preset-aware) | Now `rounded-bubble` — shifts with preset |
33
+ | Everything else | unchanged | | |
34
+
35
+ ### If you liked the old "chunky big controls" look
36
+
37
+ Either set the `rounded` preset on `<html>`:
38
+
39
+ ```diff
40
+ - <html lang="en">
41
+ + <html lang="en" data-shape="rounded">
42
+ ```
43
+
44
+ Or override just `--radius-control` to keep the previous v0.38 default:
45
+
46
+ ```css
47
+ :root { --radius-control: 10px; }
48
+ ```
49
+
50
+ ### Opting into the preset system
51
+
52
+ To set the default (slightly-rounded) preset on your app explicitly:
53
+
54
+ ```diff
55
+ - <html lang="en">
56
+ + <html lang="en" data-shape="slightly-rounded">
57
+ ```
58
+
59
+ Scoped overrides also work — apply `data-shape` to any subtree:
60
+
61
+ ```tsx
62
+ <div data-shape="sharp">
63
+ <DeveloperConsole />
64
+ </div>
65
+ ```
66
+
67
+ ### Migrating your own code from `rounded-ds-*` / `rounded-full`
68
+
69
+ Your existing classes still render (primitive tokens are unchanged), but they're pinned to fixed values and won't respond to `[data-shape]` presets. To opt in, swap to role tokens:
70
+
71
+ ```diff
72
+ - className="rounded-ds-md ..." /* control-sized, 6px */
73
+ + className="rounded-control ..."
74
+
75
+ - className="rounded-ds-lg ..." /* surface context — Card, Alert, panel */
76
+ + className="rounded-surface ..."
77
+
78
+ - className="rounded-ds-lg ..." /* overlay context — Popover, Dropdown, listbox */
79
+ + className="rounded-overlay ..."
80
+
81
+ - className="rounded-ds-xl ..." /* Dialog, Sheet, picker panel */
82
+ + className="rounded-overlay-lg ..."
83
+
84
+ - className="rounded-ds-2xl ..." /* chat bubble */
85
+ + className="rounded-bubble ..."
86
+
87
+ - className="rounded-ds-sm ..." /* checkbox box, focus ring, small chip */
88
+ + className="rounded-control-inner ..."
89
+
90
+ - className="rounded-ds-full ..." /* and bare rounded-full */
91
+ + className="rounded-pill ..."
92
+ ```
93
+
94
+ A re-runnable codemod lives at `scripts/migrate-radius-roles.mjs` in this repo. Dry-run by default — pass `--write` to apply.
95
+
96
+ ### Custom presets
97
+
98
+ Define your own `[data-shape="..."]` block:
99
+
100
+ ```css
101
+ [data-shape="brand-soft"] {
102
+ --radius-control: 8px;
103
+ --radius-control-inner: 3px;
104
+ --radius-surface: 14px;
105
+ --radius-overlay-sm: 8px;
106
+ --radius-overlay: 14px;
107
+ --radius-overlay-lg: 20px;
108
+ --radius-pill: 9999px;
109
+ --radius-bubble: 28px;
110
+ }
111
+ ```
112
+
113
+ ```html
114
+ <html data-shape="brand-soft">
115
+ ```
116
+
117
+ ### Reference
118
+
119
+ - Role token map: `packages/core/llms-full.txt` → "Shape Presets & Radius Roles" section
120
+ - Recipe: `packages/core/docs/recipes/customize-brand.md` → "Shape presets" section
121
+ - Storybook: `Foundations / Shape Presets` story — interactive switcher + custom-preset demo
122
+
123
+ ---
124
+
125
+ ## v0.38.0 — Deprecation sweep
126
+
127
+ 0.38 removes 8 deprecated APIs that were soft-deprecated in earlier minor releases. All were available as aliases alongside their replacements; this release drops the aliases.
128
+
129
+ ### Removed APIs and replacements
130
+
131
+ | Package | Removed | Use instead |
132
+ |---------|---------|-------------|
133
+ | `@devalok/shilp-sutra/ui/alert` | `variant="filled"` | `variant="solid"` |
134
+ | `@devalok/shilp-sutra/ui/banner` | `action` prop | `actions` prop |
135
+ | `@devalok/shilp-sutra/ui/input` | `startIcon` / `endIcon` props | `startSection` / `endSection` |
136
+ | `@devalok/shilp-sutra/ui/input` | `inputVariants` export | `inputWrapperVariants` |
137
+ | `@devalok/shilp-sutra/ui/segmented-control` | `variant="accent"` | `variant="solid"` |
138
+ | `@devalok/shilp-sutra/composed` | `ResponsiveOverlay` component | `Dialog` or `Sheet` directly |
139
+ | `@devalok/shilp-sutra/tailwind` | entire `./tailwind` export | CSS import (see v0.37 guide) |
140
+ | `@devalok/shilp-sutra/hooks/use-toast` | entire `./hooks/use-toast` export | `toast` from `@devalok/shilp-sutra` |
141
+
142
+ ### Quick migration checklist
143
+
144
+ **Alert `variant="filled"` → `variant="solid"`:**
145
+ ```diff
146
+ - <Alert variant="filled" color="error">Error occurred</Alert>
147
+ + <Alert variant="solid" color="error">Error occurred</Alert>
148
+ ```
149
+
150
+ **Banner `action` → `actions`:**
151
+ ```diff
152
+ - <Banner action={<Button>Dismiss</Button>}>Update available</Banner>
153
+ + <Banner actions={<Button>Dismiss</Button>}>Update available</Banner>
154
+ ```
155
+
156
+ **Input `startIcon`/`endIcon` → `startSection`/`endSection`:**
157
+ ```diff
158
+ - <Input startIcon={<Icon icon={IconSearch} />} />
159
+ + <Input startSection={<Icon icon={IconSearch} />} />
160
+ ```
161
+
162
+ **Input `inputVariants` → `inputWrapperVariants`:**
163
+ ```diff
164
+ - import { inputVariants } from '@devalok/shilp-sutra'
165
+ + import { inputWrapperVariants } from '@devalok/shilp-sutra'
166
+ ```
167
+
168
+ **SegmentedControl `variant="accent"` → `variant="solid"`:**
169
+ ```diff
170
+ - <SegmentedControl variant="accent" ... />
171
+ + <SegmentedControl variant="solid" ... />
172
+ ```
173
+
174
+ **ResponsiveOverlay → Dialog or Sheet:**
175
+ ```diff
176
+ - import { ResponsiveOverlay } from '@devalok/shilp-sutra/composed'
177
+ - <ResponsiveOverlay open={open} onOpenChange={setOpen} title="Details">...</ResponsiveOverlay>
178
+ + import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@devalok/shilp-sutra'
179
+ + <Dialog open={open} onOpenChange={setOpen}>
180
+ + <DialogContent><DialogHeader><DialogTitle>Details</DialogTitle></DialogHeader>...</DialogContent>
181
+ + </Dialog>
182
+ ```
183
+
184
+ **`./tailwind` preset:** Already removed in 0.37 — follow the [v0.37 migration guide](#v0370--tailwind-4-css-first-migration) if you haven't already.
185
+
186
+ **`hooks/use-toast`:**
187
+ ```diff
188
+ - import { toast } from '@devalok/shilp-sutra/hooks/use-toast'
189
+ + import { toast } from '@devalok/shilp-sutra'
190
+ ```
191
+
7
192
  ## v0.37.0 — Tailwind 4 CSS-first migration
8
193
 
9
194
  0.37 completes the Tailwind 3 → 4 migration that started in 0.34. The JS preset is gone. Tokens now ship as `@theme` CSS variables that TW4 consumes directly. **This is a breaking setup change; component APIs are unchanged.**
package/dist/_chunks/badge-group.js CHANGED
@@ -120,7 +120,7 @@ function g(e, t) {
120
120
  case "soft": return i(n.bg, n.fg, "border-transparent");
121
121
  }
122
122
  }
123
- var _ = r("relative inline-flex items-center rounded-full font-sans font-medium overflow-hidden isolate transition-[color,background-color,border-color,padding] duration-fast-02 ease-productive-standard select-none [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]", {
123
+ var _ = r("relative inline-flex items-center rounded-pill font-sans font-medium overflow-hidden isolate transition-[color,background-color,border-color,padding] duration-fast-02 ease-productive-standard select-none [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]", {
124
124
  variants: {
125
125
  variant: {
126
126
  subtle: "border",
@@ -208,7 +208,7 @@ var _ = r("relative inline-flex items-center rounded-full font-sans font-medium
208
208
  className: "relative inline-flex h-1.5 w-1.5 shrink-0",
209
209
  "aria-hidden": "true",
210
210
  children: [/* @__PURE__ */ c(p.span, {
211
- className: "absolute inset-0 rounded-full bg-current",
211
+ className: "absolute inset-0 rounded-pill bg-current",
212
212
  animate: I ? void 0 : {
213
213
  scale: [1, 2.5],
214
214
  opacity: [.35, 0]
@@ -224,7 +224,7 @@ var _ = r("relative inline-flex items-center rounded-full font-sans font-medium
224
224
  1
225
225
  ]
226
226
  }
227
- }), /* @__PURE__ */ c("span", { className: "relative h-1.5 w-1.5 rounded-full bg-current" })]
227
+ }), /* @__PURE__ */ c("span", { className: "relative h-1.5 w-1.5 rounded-pill bg-current" })]
228
228
  }, "dot") }),
229
229
  E && !S && !w && /* @__PURE__ */ c(p.span, {
230
230
  initial: !1,
@@ -274,7 +274,7 @@ var _ = r("relative inline-flex items-center rounded-full font-sans font-medium
274
274
  onClick: (e) => {
275
275
  e.stopPropagation(), T();
276
276
  },
277
- className: i("shrink-0 rounded-full text-current/60 hover:text-current hover:bg-current/10 transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent-9", z === "xs" ? "p-0 -mr-0.5 min-w-[16px] min-h-[16px]" : "p-px"),
277
+ className: i("shrink-0 rounded-pill text-current/60 hover:text-current hover:bg-current/10 transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent-9", z === "xs" ? "p-0 -mr-0.5 min-w-[16px] min-h-[16px]" : "p-px"),
278
278
  "aria-label": `Remove ${typeof M == "string" ? M : ""}`.trim() || "Remove",
279
279
  children: /* @__PURE__ */ c(a, {
280
280
  icon: d,
package/dist/_chunks/badge-group.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"badge-group.js","names":[],"sources":["../../src/ui/badge.tsx","../../src/ui/badge-group.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@primitives/react-slot'\nimport { IconCheck, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { durations,springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Color map — single source of truth for all badge color × variant combos ──\nconst colorMap = {\n default: { bg: 'bg-surface-raised-hover', fg: 'text-surface-fg-muted', border: 'border-surface-border-strong', solid: 'bg-neutral-5', solidFg: 'text-surface-fg' },\n accent: { bg: 'bg-accent-3', fg: 'text-accent-11', border: 'border-accent-7', solid: 'bg-accent-9', solidFg: 'text-accent-fg' },\n error: { bg: 'bg-error-3', fg: 'text-error-11', border: 'border-error-7', solid: 'bg-error-9', solidFg: 'text-error-fg' },\n success: { bg: 'bg-success-3', fg: 'text-success-11', border: 'border-success-7', solid: 'bg-success-9', solidFg: 'text-success-fg' },\n warning: { bg: 'bg-warning-3', fg: 'text-warning-11', border: 'border-warning-7', solid: 'bg-warning-9', solidFg: 'text-warning-fg' },\n info: { bg: 'bg-info-3', fg: 'text-info-11', border: 'border-info-7', solid: 'bg-info-9', solidFg: 'text-info-fg' },\n neutral: { bg: 'bg-surface-raised-hover', fg: 'text-surface-fg-muted', border: 'border-surface-border-strong', solid: 'bg-neutral-5', solidFg: 'text-surface-fg' },\n teal: { bg: 'bg-category-teal-3', fg: 'text-category-teal-11', border: 'border-category-teal-7', solid: 'bg-category-teal-9', solidFg: 'text-white' },\n amber: { bg: 'bg-category-amber-3', fg: 'text-category-amber-11', border: 'border-category-amber-7', solid: 'bg-category-amber-9', solidFg: 'text-white' },\n slate: { bg: 'bg-category-slate-3', fg: 'text-category-slate-11', border: 'border-category-slate-7', solid: 'bg-category-slate-9', solidFg: 'text-white' },\n indigo: { bg: 'bg-category-indigo-3', fg: 'text-category-indigo-11', border: 'border-category-indigo-7', solid: 'bg-category-indigo-9', solidFg: 'text-white' },\n cyan: { bg: 'bg-category-cyan-3', fg: 'text-category-cyan-11', border: 'border-category-cyan-7', solid: 'bg-category-cyan-9', solidFg: 'text-white' },\n orange: { bg: 'bg-category-orange-3', fg: 'text-category-orange-11', border: 'border-category-orange-7', solid: 'bg-category-orange-9', solidFg: 'text-white' },\n emerald: { bg: 'bg-category-emerald-3', fg: 'text-category-emerald-11', border: 'border-category-emerald-7', solid: 'bg-category-emerald-9', solidFg: 'text-white' },\n} as const\n\ntype BadgeColor = keyof typeof colorMap | 'custom'\n\n/** Derive color classes for a given variant + color pair */\nfunction getColorClasses(variant: 'subtle' | 'solid' | 'outline' | 'soft', color: BadgeColor): string {\n if (color === 'custom') return ''\n const c = colorMap[color]\n switch (variant) {\n case 'subtle': return cn(c.bg, c.fg, c.border)\n case 'solid': return cn(c.solid, c.solidFg, 'border-transparent')\n case 'outline': return cn('bg-transparent', c.fg, c.border)\n case 'soft': return cn(c.bg, c.fg, 'border-transparent')\n }\n}\n\nconst badgeVariants = cva(\n 'relative inline-flex items-center rounded-full font-sans font-medium overflow-hidden isolate transition-[color,background-color,border-color,padding] duration-fast-02 ease-productive-standard select-none [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]',\n {\n variants: {\n variant: {\n subtle: 'border',\n solid: 'border border-transparent',\n outline: 'border',\n soft: 'border border-transparent',\n },\n size: {\n xs: 'h-4 px-ds-02b text-ds-xs gap-ds-02',\n sm: 'h-5 px-ds-03 text-ds-xs gap-ds-02',\n md: 'h-6 px-2.5 text-ds-xs gap-ds-02b', /* px-2.5=10px — no exact DS token */\n lg: 'h-7 px-ds-04 text-ds-sm gap-ds-02b',\n },\n },\n defaultVariants: {\n variant: 'subtle',\n size: 'md',\n },\n },\n)\n\n/** Icon sizing per badge size */\nconst iconSizeMap: Record<string, string> = {\n xs: '[&>svg]:h-2.5 [&>svg]:w-2.5',\n sm: '[&>svg]:h-3 [&>svg]:w-3',\n md: '[&>svg]:h-3 [&>svg]:w-3',\n lg: '[&>svg]:h-3.5 [&>svg]:w-3.5',\n}\n\n/** Reduced left padding when leading content (icon/dot/selected) is present */\nconst paddingLeftWithIcon: Record<string, string> = {\n xs: 'pl-ds-02',\n sm: 'pl-ds-02b',\n md: 'pl-ds-03',\n lg: 'pl-2.5', /* 10px — no exact DS token */\n}\n\n/** Reduced right padding when trailing content (dismiss/endIcon) is present */\nconst paddingRightWithTrailing: Record<string, string> = {\n xs: 'pr-ds-01',\n sm: 'pr-ds-02',\n md: 'pr-ds-02',\n lg: 'pr-ds-02b',\n}\n\n/**\n * Badge — a compact inline label with a two-axis variant system.\n *\n * **Two axes:**\n * - `variant` controls **visual style**: `\"subtle\"` | `\"solid\"` | `\"outline\"` | `\"soft\"`\n * - `color` controls **semantic intent/category**: 16 built-in colors + `\"custom\"` (CSS variable)\n *\n * **Interactive:** Pass `onClick` to make it a button. Pass `selected` for toggle state.\n * **Dismissible:** Pass `onDismiss` to show a dismiss button.\n * **Custom colors:** Set `color=\"custom\"` and CSS variable `--badge-color` on a parent or via `style`.\n * For light custom colors on solid variant, set `--badge-fg-color` to a dark value.\n *\n * @example\n * <Badge color=\"success\">Active</Badge>\n *\n * @example\n * <Badge variant=\"solid\" size=\"sm\" dot>3 new</Badge>\n *\n * @example\n * <Badge color=\"custom\" style={{ '--badge-color': '#8b5cf6' } as React.CSSProperties}>\n * Custom\n * </Badge>\n */\ninterface BadgeProps\n extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>,\n VariantProps<typeof badgeVariants> {\n /** Semantic intent or category color. Use `\"custom\"` with `--badge-color` CSS variable. */\n color?: BadgeColor\n asChild?: boolean\n startIcon?: React.ReactElement | null\n endIcon?: React.ReactElement | null\n dot?: boolean\n onDismiss?: () => void\n selected?: boolean\n disabled?: boolean\n maxWidth?: number\n /**\n * Truncate children with ellipsis when they overflow the badge width.\n * Use with a fixed width (e.g. `className=\"w-20\"`) or `maxWidth` for\n * constrained pill badges. Always adds a title tooltip on the full text.\n */\n truncate?: boolean\n circle?: boolean\n}\n\nconst Badge = React.forwardRef<HTMLElement, BadgeProps>(\n (\n {\n className,\n variant,\n color,\n size,\n asChild,\n startIcon,\n endIcon,\n dot,\n onDismiss,\n onClick,\n selected,\n disabled,\n maxWidth,\n truncate,\n circle,\n children,\n style,\n ...props\n },\n ref,\n ) => {\n const prefersReducedMotion = useReducedMotion()\n const resolvedVariant = variant ?? 'subtle'\n const resolvedColor = color ?? 'default'\n const resolvedSize = size ?? 'md'\n\n // When both onClick + onDismiss, use div with role=\"button\" to avoid nested <button>\n const Comp = asChild\n ? Slot\n : onClick && onDismiss\n ? 'div'\n : onClick\n ? 'button'\n : 'span'\n\n // Custom color inline styles via CSS variable\n const customStyles =\n resolvedColor === 'custom'\n ? {\n ...(resolvedVariant === 'subtle' && {\n backgroundColor: 'color-mix(in oklch, var(--badge-color) 15%, transparent)',\n color: 'var(--badge-color)',\n borderColor: 'color-mix(in oklch, var(--badge-color) 40%, transparent)',\n }),\n ...(resolvedVariant === 'solid' && {\n backgroundColor: 'var(--badge-color)',\n color: 'var(--badge-fg-color, white)',\n borderColor: 'transparent',\n }),\n ...(resolvedVariant === 'outline' && {\n backgroundColor: 'transparent',\n color: 'var(--badge-color)',\n borderColor: 'color-mix(in oklch, var(--badge-color) 50%, transparent)',\n }),\n ...(resolvedVariant === 'soft' && {\n backgroundColor: 'color-mix(in oklch, var(--badge-color) 12%, transparent)',\n color: 'var(--badge-color)',\n borderColor: 'transparent',\n }),\n }\n : undefined\n\n // Keyboard handler for div[role=\"button\"] (onClick + onDismiss case)\n const handleKeyDown =\n onClick && onDismiss\n ? (e: React.KeyboardEvent<HTMLElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n if (!disabled) onClick(e as unknown as React.MouseEvent<HTMLElement>)\n }\n props.onKeyDown?.(e)\n }\n : props.onKeyDown\n\n const hasLeading = !!(dot || startIcon || (onClick && selected && !startIcon && !dot))\n const hasTrailing = !!(onDismiss || endIcon)\n\n return (\n <Comp\n ref={ref as React.Ref<never>}\n className={cn(\n badgeVariants({ variant: resolvedVariant, size: resolvedSize }),\n getColorClasses(resolvedVariant, resolvedColor),\n hasLeading && paddingLeftWithIcon[resolvedSize],\n hasTrailing && paddingRightWithTrailing[resolvedSize],\n onClick &&\n 'cursor-pointer hover:brightness-[0.97] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 transition-[color,background-color,border-color,transform,filter] duration-moderate-01 ease-productive-exit hover:duration-fast-02 hover:ease-productive-entrance active:scale-[0.95] active:brightness-[0.92] active:duration-[0ms]',\n selected && 'ring-1 ring-current/20 transition-shadow duration-fast-02',\n disabled && 'opacity-action-disabled pointer-events-none saturate-[0.3]',\n circle && 'justify-center px-0 aspect-square',\n className,\n )}\n style={{ ...style, ...customStyles, ...(maxWidth ? { maxWidth } : undefined) }}\n onClick={disabled ? undefined : (onClick as React.MouseEventHandler<HTMLElement>)}\n onKeyDown={handleKeyDown}\n {...(Comp === 'button' && { type: 'button' as const })}\n {...(Comp === 'button' && disabled ? { disabled: true } : {})}\n {...(Comp === 'div' && onClick ? { role: 'button' as const, tabIndex: 0 } : {})}\n {...props}\n >\n {/* Dot indicator — animated entrance + continuous pulse */}\n <AnimatePresence>\n {dot && (\n <motion.span\n key=\"dot\"\n initial={{ scale: 0 }}\n animate={{ scale: 1 }}\n exit={{ scale: 0 }}\n transition={springs.snappy}\n className=\"relative inline-flex h-1.5 w-1.5 shrink-0\"\n aria-hidden=\"true\"\n >\n <motion.span\n className=\"absolute inset-0 rounded-full bg-current\"\n animate={prefersReducedMotion ? undefined : { scale: [1, 2.5], opacity: [0.35, 0] }}\n transition={prefersReducedMotion ? { duration: 0 } : { repeat: Infinity, repeatDelay: 0.3, duration: 1.2, ease: [0, 0, 0.58, 1] }}\n />\n <span className=\"relative h-1.5 w-1.5 rounded-full bg-current\" />\n </motion.span>\n )}\n </AnimatePresence>\n\n {/* Selected check icon — always mounted for interactive badges */}\n {onClick && !startIcon && !dot && (\n <motion.span\n initial={false}\n animate={selected\n ? { opacity: 1, scale: 1, width: 'auto', marginRight: 0 }\n : { opacity: 0, scale: 0.5, width: 0, marginRight: -4 }\n }\n transition={{ type: 'tween', duration: durations.moderate01, ease: [0.2, 0, 0.38, 0.9] }} /* ease-productive-standard */\n className=\"inline-flex shrink-0 overflow-hidden\"\n aria-hidden={!selected}\n >\n <Icon icon={IconCheck} size=\"xs\" />\n </motion.span>\n )}\n\n {/* Start icon */}\n {startIcon && (\n <span className={cn('shrink-0', iconSizeMap[resolvedSize])}>{startIcon}</span>\n )}\n\n {/* Children — with optional truncation */}\n {truncate || maxWidth ? (\n <span\n className=\"truncate\"\n title={typeof children === 'string' ? children : undefined}\n >\n {children}\n </span>\n ) : (\n children\n )}\n\n {/* End icon */}\n {endIcon && (\n <span className={cn('shrink-0', iconSizeMap[resolvedSize])}>{endIcon}</span>\n )}\n\n {/* Dismiss button */}\n {onDismiss && (\n <button\n type=\"button\"\n onClick={(e) => {\n e.stopPropagation()\n onDismiss()\n }}\n className={cn(\n 'shrink-0 rounded-full text-current/60 hover:text-current hover:bg-current/10 transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent-9',\n resolvedSize === 'xs'\n ? 'p-0 -mr-0.5 min-w-[16px] min-h-[16px]'\n : 'p-px',\n )}\n aria-label={\n `Remove ${typeof children === 'string' ? children : ''}`.trim() || 'Remove'\n }\n >\n <Icon icon={IconX} size=\"xs\" />\n </button>\n )}\n </Comp>\n )\n },\n)\nBadge.displayName = 'Badge'\n\nimport { BadgeGroup } from './badge-group'\nimport { BadgeIndicator } from './badge-indicator'\n\nconst BadgeCompound = Object.assign(Badge, {\n Indicator: BadgeIndicator,\n Group: BadgeGroup,\n})\n\nexport { BadgeCompound as Badge, type BadgeColor,type BadgeProps, badgeVariants }\n","'use client'\n\nimport * as React from 'react'\n\nimport { Badge, type BadgeProps } from './badge'\nimport { cn } from './lib/utils'\n\nconst GAP_CLASSES = {\n tight: 'gap-1',\n default: 'gap-1.5',\n loose: 'gap-2',\n} as const\n\nexport interface BadgeGroupProps {\n max?: number\n gap?: keyof typeof GAP_CLASSES\n size?: BadgeProps['size']\n onOverflowClick?: () => void\n className?: string\n children: React.ReactNode\n}\n\nexport function BadgeGroup({\n max,\n gap = 'default',\n size,\n onOverflowClick,\n className,\n children,\n}: BadgeGroupProps) {\n const childArray = React.Children.toArray(children)\n const total = childArray.length\n const hasOverflow = max !== undefined && total > max\n const visible = hasOverflow ? childArray.slice(0, max) : childArray\n const overflowCount = hasOverflow ? total - max! : 0\n\n return (\n <div className={cn('flex flex-wrap items-center', GAP_CLASSES[gap], className)}>\n {visible}\n {hasOverflow && (\n <Badge\n variant=\"outline\"\n color=\"neutral\"\n size={size ?? 'sm'}\n onClick={onOverflowClick}\n >\n +{overflowCount}\n </Badge>\n )}\n </div>\n )\n}\n\nBadgeGroup.displayName = 'BadgeGroup'\n"],"mappings":"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"}
1
+ {"version":3,"file":"badge-group.js","names":[],"sources":["../../src/ui/badge.tsx","../../src/ui/badge-group.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@primitives/react-slot'\nimport { IconCheck, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { durations,springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Color map — single source of truth for all badge color × variant combos ──\nconst colorMap = {\n default: { bg: 'bg-surface-raised-hover', fg: 'text-surface-fg-muted', border: 'border-surface-border-strong', solid: 'bg-neutral-5', solidFg: 'text-surface-fg' },\n accent: { bg: 'bg-accent-3', fg: 'text-accent-11', border: 'border-accent-7', solid: 'bg-accent-9', solidFg: 'text-accent-fg' },\n error: { bg: 'bg-error-3', fg: 'text-error-11', border: 'border-error-7', solid: 'bg-error-9', solidFg: 'text-error-fg' },\n success: { bg: 'bg-success-3', fg: 'text-success-11', border: 'border-success-7', solid: 'bg-success-9', solidFg: 'text-success-fg' },\n warning: { bg: 'bg-warning-3', fg: 'text-warning-11', border: 'border-warning-7', solid: 'bg-warning-9', solidFg: 'text-warning-fg' },\n info: { bg: 'bg-info-3', fg: 'text-info-11', border: 'border-info-7', solid: 'bg-info-9', solidFg: 'text-info-fg' },\n neutral: { bg: 'bg-surface-raised-hover', fg: 'text-surface-fg-muted', border: 'border-surface-border-strong', solid: 'bg-neutral-5', solidFg: 'text-surface-fg' },\n teal: { bg: 'bg-category-teal-3', fg: 'text-category-teal-11', border: 'border-category-teal-7', solid: 'bg-category-teal-9', solidFg: 'text-white' },\n amber: { bg: 'bg-category-amber-3', fg: 'text-category-amber-11', border: 'border-category-amber-7', solid: 'bg-category-amber-9', solidFg: 'text-white' },\n slate: { bg: 'bg-category-slate-3', fg: 'text-category-slate-11', border: 'border-category-slate-7', solid: 'bg-category-slate-9', solidFg: 'text-white' },\n indigo: { bg: 'bg-category-indigo-3', fg: 'text-category-indigo-11', border: 'border-category-indigo-7', solid: 'bg-category-indigo-9', solidFg: 'text-white' },\n cyan: { bg: 'bg-category-cyan-3', fg: 'text-category-cyan-11', border: 'border-category-cyan-7', solid: 'bg-category-cyan-9', solidFg: 'text-white' },\n orange: { bg: 'bg-category-orange-3', fg: 'text-category-orange-11', border: 'border-category-orange-7', solid: 'bg-category-orange-9', solidFg: 'text-white' },\n emerald: { bg: 'bg-category-emerald-3', fg: 'text-category-emerald-11', border: 'border-category-emerald-7', solid: 'bg-category-emerald-9', solidFg: 'text-white' },\n} as const\n\ntype BadgeColor = keyof typeof colorMap | 'custom'\n\n/** Derive color classes for a given variant + color pair */\nfunction getColorClasses(variant: 'subtle' | 'solid' | 'outline' | 'soft', color: BadgeColor): string {\n if (color === 'custom') return ''\n const c = colorMap[color]\n switch (variant) {\n case 'subtle': return cn(c.bg, c.fg, c.border)\n case 'solid': return cn(c.solid, c.solidFg, 'border-transparent')\n case 'outline': return cn('bg-transparent', c.fg, c.border)\n case 'soft': return cn(c.bg, c.fg, 'border-transparent')\n }\n}\n\nconst badgeVariants = cva(\n 'relative inline-flex items-center rounded-pill font-sans font-medium overflow-hidden isolate transition-[color,background-color,border-color,padding] duration-fast-02 ease-productive-standard select-none [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]',\n {\n variants: {\n variant: {\n subtle: 'border',\n solid: 'border border-transparent',\n outline: 'border',\n soft: 'border border-transparent',\n },\n size: {\n xs: 'h-4 px-ds-02b text-ds-xs gap-ds-02',\n sm: 'h-5 px-ds-03 text-ds-xs gap-ds-02',\n md: 'h-6 px-2.5 text-ds-xs gap-ds-02b', /* px-2.5=10px — no exact DS token */\n lg: 'h-7 px-ds-04 text-ds-sm gap-ds-02b',\n },\n },\n defaultVariants: {\n variant: 'subtle',\n size: 'md',\n },\n },\n)\n\n/** Icon sizing per badge size */\nconst iconSizeMap: Record<string, string> = {\n xs: '[&>svg]:h-2.5 [&>svg]:w-2.5',\n sm: '[&>svg]:h-3 [&>svg]:w-3',\n md: '[&>svg]:h-3 [&>svg]:w-3',\n lg: '[&>svg]:h-3.5 [&>svg]:w-3.5',\n}\n\n/** Reduced left padding when leading content (icon/dot/selected) is present */\nconst paddingLeftWithIcon: Record<string, string> = {\n xs: 'pl-ds-02',\n sm: 'pl-ds-02b',\n md: 'pl-ds-03',\n lg: 'pl-2.5', /* 10px — no exact DS token */\n}\n\n/** Reduced right padding when trailing content (dismiss/endIcon) is present */\nconst paddingRightWithTrailing: Record<string, string> = {\n xs: 'pr-ds-01',\n sm: 'pr-ds-02',\n md: 'pr-ds-02',\n lg: 'pr-ds-02b',\n}\n\n/**\n * Badge — a compact inline label with a two-axis variant system.\n *\n * **Two axes:**\n * - `variant` controls **visual style**: `\"subtle\"` | `\"solid\"` | `\"outline\"` | `\"soft\"`\n * - `color` controls **semantic intent/category**: 16 built-in colors + `\"custom\"` (CSS variable)\n *\n * **Interactive:** Pass `onClick` to make it a button. Pass `selected` for toggle state.\n * **Dismissible:** Pass `onDismiss` to show a dismiss button.\n * **Custom colors:** Set `color=\"custom\"` and CSS variable `--badge-color` on a parent or via `style`.\n * For light custom colors on solid variant, set `--badge-fg-color` to a dark value.\n *\n * @example\n * <Badge color=\"success\">Active</Badge>\n *\n * @example\n * <Badge variant=\"solid\" size=\"sm\" dot>3 new</Badge>\n *\n * @example\n * <Badge color=\"custom\" style={{ '--badge-color': '#8b5cf6' } as React.CSSProperties}>\n * Custom\n * </Badge>\n */\ninterface BadgeProps\n extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>,\n VariantProps<typeof badgeVariants> {\n /** Semantic intent or category color. Use `\"custom\"` with `--badge-color` CSS variable. */\n color?: BadgeColor\n asChild?: boolean\n startIcon?: React.ReactElement | null\n endIcon?: React.ReactElement | null\n dot?: boolean\n onDismiss?: () => void\n selected?: boolean\n disabled?: boolean\n maxWidth?: number\n /**\n * Truncate children with ellipsis when they overflow the badge width.\n * Use with a fixed width (e.g. `className=\"w-20\"`) or `maxWidth` for\n * constrained pill badges. Always adds a title tooltip on the full text.\n */\n truncate?: boolean\n circle?: boolean\n}\n\nconst Badge = React.forwardRef<HTMLElement, BadgeProps>(\n (\n {\n className,\n variant,\n color,\n size,\n asChild,\n startIcon,\n endIcon,\n dot,\n onDismiss,\n onClick,\n selected,\n disabled,\n maxWidth,\n truncate,\n circle,\n children,\n style,\n ...props\n },\n ref,\n ) => {\n const prefersReducedMotion = useReducedMotion()\n const resolvedVariant = variant ?? 'subtle'\n const resolvedColor = color ?? 'default'\n const resolvedSize = size ?? 'md'\n\n // When both onClick + onDismiss, use div with role=\"button\" to avoid nested <button>\n const Comp = asChild\n ? Slot\n : onClick && onDismiss\n ? 'div'\n : onClick\n ? 'button'\n : 'span'\n\n // Custom color inline styles via CSS variable\n const customStyles =\n resolvedColor === 'custom'\n ? {\n ...(resolvedVariant === 'subtle' && {\n backgroundColor: 'color-mix(in oklch, var(--badge-color) 15%, transparent)',\n color: 'var(--badge-color)',\n borderColor: 'color-mix(in oklch, var(--badge-color) 40%, transparent)',\n }),\n ...(resolvedVariant === 'solid' && {\n backgroundColor: 'var(--badge-color)',\n color: 'var(--badge-fg-color, white)',\n borderColor: 'transparent',\n }),\n ...(resolvedVariant === 'outline' && {\n backgroundColor: 'transparent',\n color: 'var(--badge-color)',\n borderColor: 'color-mix(in oklch, var(--badge-color) 50%, transparent)',\n }),\n ...(resolvedVariant === 'soft' && {\n backgroundColor: 'color-mix(in oklch, var(--badge-color) 12%, transparent)',\n color: 'var(--badge-color)',\n borderColor: 'transparent',\n }),\n }\n : undefined\n\n // Keyboard handler for div[role=\"button\"] (onClick + onDismiss case)\n const handleKeyDown =\n onClick && onDismiss\n ? (e: React.KeyboardEvent<HTMLElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n if (!disabled) onClick(e as unknown as React.MouseEvent<HTMLElement>)\n }\n props.onKeyDown?.(e)\n }\n : props.onKeyDown\n\n const hasLeading = !!(dot || startIcon || (onClick && selected && !startIcon && !dot))\n const hasTrailing = !!(onDismiss || endIcon)\n\n return (\n <Comp\n ref={ref as React.Ref<never>}\n className={cn(\n badgeVariants({ variant: resolvedVariant, size: resolvedSize }),\n getColorClasses(resolvedVariant, resolvedColor),\n hasLeading && paddingLeftWithIcon[resolvedSize],\n hasTrailing && paddingRightWithTrailing[resolvedSize],\n onClick &&\n 'cursor-pointer hover:brightness-[0.97] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 transition-[color,background-color,border-color,transform,filter] duration-moderate-01 ease-productive-exit hover:duration-fast-02 hover:ease-productive-entrance active:scale-[0.95] active:brightness-[0.92] active:duration-[0ms]',\n selected && 'ring-1 ring-current/20 transition-shadow duration-fast-02',\n disabled && 'opacity-action-disabled pointer-events-none saturate-[0.3]',\n circle && 'justify-center px-0 aspect-square',\n className,\n )}\n style={{ ...style, ...customStyles, ...(maxWidth ? { maxWidth } : undefined) }}\n onClick={disabled ? undefined : (onClick as React.MouseEventHandler<HTMLElement>)}\n onKeyDown={handleKeyDown}\n {...(Comp === 'button' && { type: 'button' as const })}\n {...(Comp === 'button' && disabled ? { disabled: true } : {})}\n {...(Comp === 'div' && onClick ? { role: 'button' as const, tabIndex: 0 } : {})}\n {...props}\n >\n {/* Dot indicator — animated entrance + continuous pulse */}\n <AnimatePresence>\n {dot && (\n <motion.span\n key=\"dot\"\n initial={{ scale: 0 }}\n animate={{ scale: 1 }}\n exit={{ scale: 0 }}\n transition={springs.snappy}\n className=\"relative inline-flex h-1.5 w-1.5 shrink-0\"\n aria-hidden=\"true\"\n >\n <motion.span\n className=\"absolute inset-0 rounded-pill bg-current\"\n animate={prefersReducedMotion ? undefined : { scale: [1, 2.5], opacity: [0.35, 0] }}\n transition={prefersReducedMotion ? { duration: 0 } : { repeat: Infinity, repeatDelay: 0.3, duration: 1.2, ease: [0, 0, 0.58, 1] }}\n />\n <span className=\"relative h-1.5 w-1.5 rounded-pill bg-current\" />\n </motion.span>\n )}\n </AnimatePresence>\n\n {/* Selected check icon — always mounted for interactive badges */}\n {onClick && !startIcon && !dot && (\n <motion.span\n initial={false}\n animate={selected\n ? { opacity: 1, scale: 1, width: 'auto', marginRight: 0 }\n : { opacity: 0, scale: 0.5, width: 0, marginRight: -4 }\n }\n transition={{ type: 'tween', duration: durations.moderate01, ease: [0.2, 0, 0.38, 0.9] }} /* ease-productive-standard */\n className=\"inline-flex shrink-0 overflow-hidden\"\n aria-hidden={!selected}\n >\n <Icon icon={IconCheck} size=\"xs\" />\n </motion.span>\n )}\n\n {/* Start icon */}\n {startIcon && (\n <span className={cn('shrink-0', iconSizeMap[resolvedSize])}>{startIcon}</span>\n )}\n\n {/* Children — with optional truncation */}\n {truncate || maxWidth ? (\n <span\n className=\"truncate\"\n title={typeof children === 'string' ? children : undefined}\n >\n {children}\n </span>\n ) : (\n children\n )}\n\n {/* End icon */}\n {endIcon && (\n <span className={cn('shrink-0', iconSizeMap[resolvedSize])}>{endIcon}</span>\n )}\n\n {/* Dismiss button */}\n {onDismiss && (\n <button\n type=\"button\"\n onClick={(e) => {\n e.stopPropagation()\n onDismiss()\n }}\n className={cn(\n 'shrink-0 rounded-pill text-current/60 hover:text-current hover:bg-current/10 transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent-9',\n resolvedSize === 'xs'\n ? 'p-0 -mr-0.5 min-w-[16px] min-h-[16px]'\n : 'p-px',\n )}\n aria-label={\n `Remove ${typeof children === 'string' ? children : ''}`.trim() || 'Remove'\n }\n >\n <Icon icon={IconX} size=\"xs\" />\n </button>\n )}\n </Comp>\n )\n },\n)\nBadge.displayName = 'Badge'\n\nimport { BadgeGroup } from './badge-group'\nimport { BadgeIndicator } from './badge-indicator'\n\nconst BadgeCompound = Object.assign(Badge, {\n Indicator: BadgeIndicator,\n Group: BadgeGroup,\n})\n\nexport { BadgeCompound as Badge, type BadgeColor,type BadgeProps, badgeVariants }\n","'use client'\n\nimport * as React from 'react'\n\nimport { Badge, type BadgeProps } from './badge'\nimport { cn } from './lib/utils'\n\nconst GAP_CLASSES = {\n tight: 'gap-1',\n default: 'gap-1.5',\n loose: 'gap-2',\n} as const\n\nexport interface BadgeGroupProps {\n max?: number\n gap?: keyof typeof GAP_CLASSES\n size?: BadgeProps['size']\n onOverflowClick?: () => void\n className?: string\n children: React.ReactNode\n}\n\nexport function BadgeGroup({\n max,\n gap = 'default',\n size,\n onOverflowClick,\n className,\n children,\n}: BadgeGroupProps) {\n const childArray = React.Children.toArray(children)\n const total = childArray.length\n const hasOverflow = max !== undefined && total > max\n const visible = hasOverflow ? childArray.slice(0, max) : childArray\n const overflowCount = hasOverflow ? total - max! : 0\n\n return (\n <div className={cn('flex flex-wrap items-center', GAP_CLASSES[gap], className)}>\n {visible}\n {hasOverflow && (\n <Badge\n variant=\"outline\"\n color=\"neutral\"\n size={size ?? 'sm'}\n onClick={onOverflowClick}\n >\n +{overflowCount}\n </Badge>\n )}\n </div>\n )\n}\n\nBadgeGroup.displayName = 'BadgeGroup'\n"],"mappings":"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"}
package/dist/_chunks/chat.js CHANGED
@@ -85,10 +85,10 @@ var E = p.forwardRef(({ children: n, variant: i = "flat", placement: o = "start"
85
85
  y: 0
86
86
  },
87
87
  transition: t.snappy,
88
- className: r("group/message relative flex", o === "end" ? "justify-end" : "justify-start", s === "mention" && "border-l-2 border-l-accent-9 bg-accent-2 pl-ds-03 rounded-ds-sm", s === "internal" && "bg-warning-2/50 rounded-ds-sm", d),
88
+ className: r("group/message relative flex", o === "end" ? "justify-end" : "justify-start", s === "mention" && "border-l-2 border-l-accent-9 bg-accent-2 pl-ds-03 rounded-control-inner", s === "internal" && "bg-warning-2/50 rounded-control-inner", d),
89
89
  ...e(f),
90
90
  children: /* @__PURE__ */ m("div", {
91
- className: r("max-w-[85%] rounded-ds-2xl px-ds-04 py-ds-03", o === "end" ? "bg-accent-3 text-surface-fg" : "bg-surface-raised text-surface-fg"),
91
+ className: r("max-w-[85%] rounded-bubble px-ds-04 py-ds-03", o === "end" ? "bg-accent-3 text-surface-fg" : "bg-surface-raised text-surface-fg"),
92
92
  children: n
93
93
  })
94
94
  })
@@ -105,7 +105,7 @@ var E = p.forwardRef(({ children: n, variant: i = "flat", placement: o = "start"
105
105
  y: 0
106
106
  },
107
107
  transition: t.snappy,
108
- className: r("group/message relative flex gap-ds-04", c && "-mt-ds-01", s === "mention" && "border-l-2 border-l-accent-9 bg-accent-2 pl-ds-03 rounded-ds-sm", s === "internal" && "bg-warning-2/50 rounded-ds-sm", d),
108
+ className: r("group/message relative flex gap-ds-04", c && "-mt-ds-01", s === "mention" && "border-l-2 border-l-accent-9 bg-accent-2 pl-ds-03 rounded-control-inner", s === "internal" && "bg-warning-2/50 rounded-control-inner", d),
109
109
  ...e(f),
110
110
  children: n
111
111
  })
@@ -118,7 +118,7 @@ function D({ src: e, fallback: t, icon: n, size: i = "md", children: a }) {
118
118
  className: r(u, "shrink-0 flex items-start"),
119
119
  children: a
120
120
  }) : n ? /* @__PURE__ */ m("div", {
121
- className: r(u, i === "sm" ? "h-5" : "h-6", "shrink-0 flex items-center justify-center rounded-ds-full bg-surface-raised-hover"),
121
+ className: r(u, i === "sm" ? "h-5" : "h-6", "shrink-0 flex items-center justify-center rounded-pill bg-surface-raised-hover"),
122
122
  children: n
123
123
  }) : /* @__PURE__ */ m("div", {
124
124
  className: r(u, "shrink-0"),
@@ -201,14 +201,14 @@ function M({ content: e, onSave: t, onCancel: n, canEdit: i = !1, renderContent:
201
201
  onChange: (e) => l(e.target.value),
202
202
  onKeyDown: _,
203
203
  onBlur: f,
204
- className: "w-full resize-none rounded-ds-sm border border-surface-border-strong bg-surface-raised-hover px-ds-02 py-ds-01 text-[13px] leading-relaxed text-surface-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9",
204
+ className: "w-full resize-none rounded-control-inner border border-surface-border-strong bg-surface-raised-hover px-ds-02 py-ds-01 text-[13px] leading-relaxed text-surface-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9",
205
205
  rows: 2
206
206
  }), /* @__PURE__ */ m("div", {
207
207
  className: "mt-ds-01 text-ds-xs text-surface-fg-subtle/50",
208
208
  children: "Enter to save · Escape to cancel"
209
209
  })]
210
210
  }) : /* @__PURE__ */ m("div", {
211
- className: r("text-[13px] leading-relaxed text-surface-fg whitespace-pre-wrap", i && "cursor-pointer hover:bg-surface-raised-hover rounded-ds-sm transition-colors"),
211
+ className: r("text-[13px] leading-relaxed text-surface-fg whitespace-pre-wrap", i && "cursor-pointer hover:bg-surface-raised-hover rounded-control-inner transition-colors"),
212
212
  onClick: d,
213
213
  role: i ? "button" : void 0,
214
214
  tabIndex: i ? 0 : void 0,
@@ -226,7 +226,7 @@ function N({ reactions: e, onReact: t }) {
226
226
  type: "button",
227
227
  onClick: () => t(e.emoji),
228
228
  "aria-label": `${e.emoji} ${e.count} reaction${e.count === 1 ? "" : "s"}${e.reacted ? ", you reacted" : ""}`,
229
- className: r("inline-flex items-center gap-ds-01 rounded-full px-ds-02 py-ds-01 text-ds-xs transition-colors", e.reacted ? "bg-accent-3 ring-1 ring-accent-6" : "bg-surface-raised-hover hover:bg-surface-raised-active"),
229
+ className: r("inline-flex items-center gap-ds-01 rounded-pill px-ds-02 py-ds-01 text-ds-xs transition-colors", e.reacted ? "bg-accent-3 ring-1 ring-accent-6" : "bg-surface-raised-hover hover:bg-surface-raised-active"),
230
230
  children: [/* @__PURE__ */ m("span", { children: e.emoji }), /* @__PURE__ */ m("span", { children: e.count })]
231
231
  }, e.emoji))
232
232
  });
@@ -234,7 +234,7 @@ function N({ reactions: e, onReact: t }) {
234
234
  N.displayName = "Message.Reactions";
235
235
  function P({ children: e, delay: t = 100 }) {
236
236
  return /* @__PURE__ */ m("div", {
237
- className: r("absolute -top-2 right-0 z-10", "flex items-center gap-ds-01 rounded-ds-md border border-surface-border bg-surface-raised px-ds-01 py-ds-01 shadow-raised", "opacity-0 group-hover/message:opacity-100 group-focus-within/message:opacity-100 transition-opacity duration-150"),
237
+ className: r("absolute -top-2 right-0 z-10", "flex items-center gap-ds-01 rounded-control border border-surface-border bg-surface-raised px-ds-01 py-ds-01 shadow-raised", "opacity-0 group-hover/message:opacity-100 group-focus-within/message:opacity-100 transition-opacity duration-150"),
238
238
  style: { transitionDelay: `${t}ms` },
239
239
  children: e
240
240
  });
@@ -247,7 +247,7 @@ function F({ icon: e, label: t, onClick: n, variant: i = "default" }) {
247
247
  type: "button",
248
248
  onClick: n,
249
249
  "aria-label": t,
250
- className: r("p-ds-02 rounded-ds-sm transition-colors", i === "default" && "text-surface-fg-subtle hover:text-surface-fg hover:bg-surface-raised-hover", i === "danger" && "text-surface-fg-subtle hover:text-error-11 hover:bg-surface-raised-hover"),
250
+ className: r("p-ds-02 rounded-control-inner transition-colors", i === "default" && "text-surface-fg-subtle hover:text-surface-fg hover:bg-surface-raised-hover", i === "danger" && "text-surface-fg-subtle hover:text-error-11 hover:bg-surface-raised-hover"),
251
251
  children: /* @__PURE__ */ m(a, {
252
252
  icon: e,
253
253
  size: "xs"
@@ -286,7 +286,7 @@ var I = Object.assign(E, {
286
286
  className: r("border-t border-surface-border-subtle px-ds-05 py-ds-04", f),
287
287
  ...g,
288
288
  children: [/* @__PURE__ */ h("div", {
289
- className: "flex items-end gap-ds-02 rounded-ds-xl border border-surface-border bg-surface-base p-ds-03",
289
+ className: "flex items-end gap-ds-02 rounded-overlay-lg border border-surface-border bg-surface-base p-ds-03",
290
290
  children: [
291
291
  s,
292
292
  /* @__PURE__ */ m("textarea", {
@@ -405,7 +405,7 @@ var R = p.forwardRef(({ children: e, autoScroll: t = !0, newMessageCount: a = 0,
405
405
  },
406
406
  transition: n.fade,
407
407
  onClick: k,
408
- className: "absolute bottom-ds-04 left-1/2 z-10 -translate-x-1/2 rounded-full bg-accent-9 px-ds-04 py-ds-02 text-ds-xs font-medium text-accent-fg shadow-raised transition-colors hover:bg-accent-10",
408
+ className: "absolute bottom-ds-04 left-1/2 z-10 -translate-x-1/2 rounded-pill bg-accent-9 px-ds-04 py-ds-02 text-ds-xs font-medium text-accent-fg shadow-raised transition-colors hover:bg-accent-10",
409
409
  children: [a, " new"]
410
410
  }) })
411
411
  ]
@@ -426,7 +426,7 @@ var B = p.forwardRef(({ icon: e, timestamp: t, variant: n = "event", children: i
426
426
  className: r("flex justify-center", o),
427
427
  ...s,
428
428
  children: /* @__PURE__ */ h("div", {
429
- className: "flex items-center gap-ds-03 rounded-ds-lg bg-error-3 px-ds-04 py-ds-03",
429
+ className: "flex items-center gap-ds-03 rounded-surface bg-error-3 px-ds-04 py-ds-03",
430
430
  children: [
431
431
  e ?? /* @__PURE__ */ m(a, {
432
432
  icon: g,
@@ -444,7 +444,7 @@ var B = p.forwardRef(({ icon: e, timestamp: t, variant: n = "event", children: i
444
444
  })
445
445
  }) : /* @__PURE__ */ h("div", {
446
446
  ref: c,
447
- className: r("flex items-center gap-ds-02 rounded-ds-sm bg-surface-raised-hover/30 px-ds-02 py-ds-01 -mx-ds-02 text-ds-sm text-surface-fg-subtle/60", o),
447
+ className: r("flex items-center gap-ds-02 rounded-control-inner bg-surface-raised-hover/30 px-ds-02 py-ds-01 -mx-ds-02 text-ds-sm text-surface-fg-subtle/60", o),
448
448
  ...s,
449
449
  children: [
450
450
  e,
@@ -478,7 +478,7 @@ function H({ users: e, className: t }) {
478
478
  1,
479
479
  2
480
480
  ].map((e) => /* @__PURE__ */ m(x.span, {
481
- className: "h-1 w-1 rounded-full bg-surface-fg-subtle",
481
+ className: "h-1 w-1 rounded-pill bg-surface-fg-subtle",
482
482
  animate: { y: [
483
483
  0,
484
484
  -3,