@nuxt/ui 3.0.1 → 3.1.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 (228) hide show
  1. package/.nuxt/ui/accordion.ts +25 -4
  2. package/.nuxt/ui/alert.ts +52 -31
  3. package/.nuxt/ui/avatar-group.ts +24 -3
  4. package/.nuxt/ui/avatar.ts +26 -5
  5. package/.nuxt/ui/badge.ts +56 -35
  6. package/.nuxt/ui/breadcrumb.ts +28 -7
  7. package/.nuxt/ui/button-group.ts +23 -2
  8. package/.nuxt/ui/button.ts +66 -45
  9. package/.nuxt/ui/calendar.ts +39 -18
  10. package/.nuxt/ui/card.ts +28 -7
  11. package/.nuxt/ui/carousel.ts +29 -8
  12. package/.nuxt/ui/checkbox-group.ts +82 -0
  13. package/.nuxt/ui/checkbox.ts +163 -29
  14. package/.nuxt/ui/chip.ts +31 -10
  15. package/.nuxt/ui/collapsible.ts +23 -2
  16. package/.nuxt/ui/color-picker.ts +26 -5
  17. package/.nuxt/ui/command-palette.ts +37 -16
  18. package/.nuxt/ui/container.ts +24 -3
  19. package/.nuxt/ui/context-menu.ts +56 -35
  20. package/.nuxt/ui/drawer.ts +33 -12
  21. package/.nuxt/ui/dropdown-menu.ts +57 -36
  22. package/.nuxt/ui/form-field.ts +29 -8
  23. package/.nuxt/ui/form.ts +23 -2
  24. package/.nuxt/ui/index.ts +1 -0
  25. package/.nuxt/ui/input-menu.ts +65 -44
  26. package/.nuxt/ui/input-number.ts +43 -22
  27. package/.nuxt/ui/input.ts +46 -25
  28. package/.nuxt/ui/kbd.ts +27 -6
  29. package/.nuxt/ui/link.ts +26 -5
  30. package/.nuxt/ui/modal.ts +28 -7
  31. package/.nuxt/ui/navigation-menu.ts +103 -84
  32. package/.nuxt/ui/pagination.ts +23 -2
  33. package/.nuxt/ui/pin-input.ts +43 -22
  34. package/.nuxt/ui/popover.ts +25 -4
  35. package/.nuxt/ui/progress.ts +40 -19
  36. package/.nuxt/ui/radio-group.ts +273 -37
  37. package/.nuxt/ui/select-menu.ts +59 -35
  38. package/.nuxt/ui/select.ts +55 -34
  39. package/.nuxt/ui/separator.ts +31 -10
  40. package/.nuxt/ui/skeleton.ts +24 -3
  41. package/.nuxt/ui/slideover.ts +27 -6
  42. package/.nuxt/ui/slider.ts +39 -18
  43. package/.nuxt/ui/stepper.ts +41 -20
  44. package/.nuxt/ui/switch.ts +44 -23
  45. package/.nuxt/ui/table.ts +38 -17
  46. package/.nuxt/ui/tabs.ts +55 -34
  47. package/.nuxt/ui/textarea.ts +63 -37
  48. package/.nuxt/ui/toast.ts +47 -26
  49. package/.nuxt/ui/toaster.ts +23 -2
  50. package/.nuxt/ui/tooltip.ts +25 -4
  51. package/.nuxt/ui/tree.ts +41 -20
  52. package/.nuxt/ui.css +56 -12
  53. package/README.md +11 -0
  54. package/cli/templates.mjs +18 -17
  55. package/dist/module.d.mts +2 -1
  56. package/dist/module.json +5 -5
  57. package/dist/module.mjs +11 -7
  58. package/dist/runtime/components/Accordion.vue +36 -92
  59. package/dist/runtime/components/Accordion.vue.d.ts +91 -0
  60. package/dist/runtime/components/Alert.vue +37 -100
  61. package/dist/runtime/components/Alert.vue.d.ts +96 -0
  62. package/dist/runtime/components/App.vue +28 -34
  63. package/dist/runtime/components/App.vue.d.ts +24 -0
  64. package/dist/runtime/components/Avatar.vue +47 -78
  65. package/dist/runtime/components/Avatar.vue.d.ts +60 -0
  66. package/dist/runtime/components/AvatarGroup.vue +40 -77
  67. package/dist/runtime/components/AvatarGroup.vue.d.ts +40 -0
  68. package/dist/runtime/components/Badge.vue +33 -62
  69. package/dist/runtime/components/Badge.vue.d.ts +62 -0
  70. package/dist/runtime/components/Breadcrumb.vue +36 -88
  71. package/dist/runtime/components/Breadcrumb.vue.d.ts +82 -0
  72. package/dist/runtime/components/Button.vue +96 -105
  73. package/dist/runtime/components/Button.vue.d.ts +73 -0
  74. package/dist/runtime/components/ButtonGroup.vue +20 -46
  75. package/dist/runtime/components/ButtonGroup.vue.d.ts +55 -0
  76. package/dist/runtime/components/Calendar.vue +73 -127
  77. package/dist/runtime/components/Calendar.vue.d.ts +107 -0
  78. package/dist/runtime/components/Card.vue +18 -40
  79. package/dist/runtime/components/Card.vue.d.ts +38 -0
  80. package/dist/runtime/components/Carousel.vue +112 -230
  81. package/dist/runtime/components/Carousel.vue.d.ts +120 -0
  82. package/dist/runtime/components/Checkbox.vue +52 -93
  83. package/dist/runtime/components/Checkbox.vue.d.ts +76 -0
  84. package/dist/runtime/components/CheckboxGroup.vue +121 -0
  85. package/dist/runtime/components/CheckboxGroup.vue.d.ts +75 -0
  86. package/dist/runtime/components/Chip.vue +26 -69
  87. package/dist/runtime/components/Chip.vue.d.ts +71 -0
  88. package/dist/runtime/components/Collapsible.vue +22 -41
  89. package/dist/runtime/components/Collapsible.vue.d.ts +50 -0
  90. package/dist/runtime/components/ColorPicker.vue +111 -197
  91. package/dist/runtime/components/ColorPicker.vue.d.ts +63 -0
  92. package/dist/runtime/components/CommandPalette.vue +94 -234
  93. package/dist/runtime/components/CommandPalette.vue.d.ts +173 -0
  94. package/dist/runtime/components/Container.vue +15 -28
  95. package/dist/runtime/components/Container.vue.d.ts +27 -0
  96. package/dist/runtime/components/ContextMenu.vue +32 -119
  97. package/dist/runtime/components/ContextMenu.vue.d.ts +127 -0
  98. package/dist/runtime/components/ContextMenuContent.vue +71 -72
  99. package/dist/runtime/components/ContextMenuContent.vue.d.ts +105 -0
  100. package/dist/runtime/components/Drawer.vue +49 -87
  101. package/dist/runtime/components/Drawer.vue.d.ts +88 -0
  102. package/dist/runtime/components/DropdownMenu.vue +37 -129
  103. package/dist/runtime/components/DropdownMenu.vue.d.ts +141 -0
  104. package/dist/runtime/components/DropdownMenuContent.vue +76 -79
  105. package/dist/runtime/components/DropdownMenuContent.vue.d.ts +55 -0
  106. package/dist/runtime/components/Form.vue +135 -219
  107. package/dist/runtime/components/Form.vue.d.ts +66 -0
  108. package/dist/runtime/components/FormField.vue +36 -77
  109. package/dist/runtime/components/FormField.vue.d.ts +70 -0
  110. package/dist/runtime/components/Icon.vue +12 -19
  111. package/dist/runtime/components/Icon.vue.d.ts +17 -0
  112. package/dist/runtime/components/Input.vue +82 -140
  113. package/dist/runtime/components/Input.vue.d.ts +91 -0
  114. package/dist/runtime/components/InputMenu.vue +193 -302
  115. package/dist/runtime/components/InputMenu.vue.d.ts +312 -0
  116. package/dist/runtime/components/InputNumber.vue +71 -133
  117. package/dist/runtime/components/InputNumber.vue.d.ts +193 -0
  118. package/dist/runtime/components/Kbd.vue +20 -46
  119. package/dist/runtime/components/Kbd.vue.d.ts +55 -0
  120. package/dist/runtime/components/Link.vue +98 -173
  121. package/dist/runtime/components/Link.vue.d.ts +124 -0
  122. package/dist/runtime/components/LinkBase.vue +33 -41
  123. package/dist/runtime/components/LinkBase.vue.d.ts +48 -0
  124. package/dist/runtime/components/Modal.vue +53 -116
  125. package/dist/runtime/components/Modal.vue.d.ts +109 -0
  126. package/dist/runtime/components/NavigationMenu.vue +78 -186
  127. package/dist/runtime/components/NavigationMenu.vue.d.ts +159 -0
  128. package/dist/runtime/components/OverlayProvider.vue +14 -18
  129. package/dist/runtime/components/OverlayProvider.vue.d.ts +2 -0
  130. package/dist/runtime/components/Pagination.vue +46 -140
  131. package/dist/runtime/components/Pagination.vue.d.ts +143 -0
  132. package/dist/runtime/components/PinInput.vue +61 -78
  133. package/dist/runtime/components/PinInput.vue.d.ts +68 -0
  134. package/dist/runtime/components/Popover.vue +47 -84
  135. package/dist/runtime/components/Popover.vue.d.ts +80 -0
  136. package/dist/runtime/components/Progress.vue +70 -131
  137. package/dist/runtime/components/Progress.vue.d.ts +97 -0
  138. package/dist/runtime/components/RadioGroup.vue +75 -126
  139. package/dist/runtime/components/RadioGroup.vue.d.ts +88 -0
  140. package/dist/runtime/components/Select.vue +115 -202
  141. package/dist/runtime/components/Select.vue.d.ts +139 -0
  142. package/dist/runtime/components/SelectMenu.vue +167 -281
  143. package/dist/runtime/components/SelectMenu.vue.d.ts +184 -0
  144. package/dist/runtime/components/Separator.vue +29 -71
  145. package/dist/runtime/components/Separator.vue.d.ts +75 -0
  146. package/dist/runtime/components/Skeleton.vue +21 -23
  147. package/dist/runtime/components/Skeleton.vue.d.ts +26 -0
  148. package/dist/runtime/components/Slideover.vue +53 -120
  149. package/dist/runtime/components/Slideover.vue.d.ts +111 -0
  150. package/dist/runtime/components/Slider.vue +46 -84
  151. package/dist/runtime/components/Slider.vue.d.ts +71 -0
  152. package/dist/runtime/components/Stepper.vue +44 -113
  153. package/dist/runtime/components/Stepper.vue.d.ts +89 -0
  154. package/dist/runtime/components/Switch.vue +45 -93
  155. package/dist/runtime/components/Switch.vue.d.ts +73 -0
  156. package/dist/runtime/components/Table.vue +165 -264
  157. package/dist/runtime/components/Table.vue.d.ts +183 -0
  158. package/dist/runtime/components/Tabs.vue +40 -105
  159. package/dist/runtime/components/Tabs.vue.d.ts +104 -0
  160. package/dist/runtime/components/Textarea.vue +113 -158
  161. package/dist/runtime/components/Textarea.vue.d.ts +95 -0
  162. package/dist/runtime/components/Toast.vue +49 -110
  163. package/dist/runtime/components/Toast.vue.d.ts +95 -0
  164. package/dist/runtime/components/Toaster.vue +70 -107
  165. package/dist/runtime/components/Toaster.vue.d.ts +63 -0
  166. package/dist/runtime/components/Tooltip.vue +38 -65
  167. package/dist/runtime/components/Tooltip.vue.d.ts +65 -0
  168. package/dist/runtime/components/Tree.vue +57 -150
  169. package/dist/runtime/components/Tree.vue.d.ts +128 -0
  170. package/dist/runtime/composables/defineShortcuts.d.ts +1 -1
  171. package/dist/runtime/composables/defineShortcuts.js +0 -1
  172. package/dist/runtime/composables/useAvatarGroup.d.ts +1 -1
  173. package/dist/runtime/composables/useButtonGroup.d.ts +2 -2
  174. package/dist/runtime/composables/useFormField.d.ts +2 -2
  175. package/dist/runtime/composables/useFormField.js +1 -1
  176. package/dist/runtime/composables/useOverlay.d.ts +16 -8
  177. package/dist/runtime/composables/useOverlay.js +14 -6
  178. package/dist/runtime/composables/usePortal.d.ts +6 -0
  179. package/dist/runtime/composables/usePortal.js +17 -0
  180. package/dist/runtime/index.css +1 -1
  181. package/dist/runtime/inertia/components/Link.vue +146 -0
  182. package/dist/runtime/inertia/components/Link.vue.d.ts +92 -0
  183. package/dist/runtime/inertia/stubs.d.ts +43 -0
  184. package/dist/runtime/inertia/stubs.js +82 -0
  185. package/dist/runtime/locale/bg.d.ts +3 -0
  186. package/dist/runtime/locale/bg.js +54 -0
  187. package/dist/runtime/locale/hy.d.ts +3 -0
  188. package/dist/runtime/locale/hy.js +54 -0
  189. package/dist/runtime/locale/index.d.ts +6 -1
  190. package/dist/runtime/locale/index.js +6 -1
  191. package/dist/runtime/locale/kk.d.ts +3 -0
  192. package/dist/runtime/locale/kk.js +54 -0
  193. package/dist/runtime/locale/tj.d.ts +3 -0
  194. package/dist/runtime/locale/tj.js +54 -0
  195. package/dist/runtime/locale/ug_cn.d.ts +3 -0
  196. package/dist/runtime/locale/ug_cn.js +55 -0
  197. package/dist/runtime/types/form.d.ts +5 -1
  198. package/dist/runtime/types/index.d.ts +2 -0
  199. package/dist/runtime/types/index.js +2 -0
  200. package/dist/runtime/types/utils.d.ts +70 -10
  201. package/dist/runtime/utils/index.d.ts +1 -0
  202. package/dist/runtime/utils/index.js +3 -0
  203. package/dist/runtime/utils/link.d.ts +4 -27
  204. package/dist/runtime/utils/link.js +32 -1
  205. package/dist/runtime/utils/tv.js +2 -2
  206. package/dist/runtime/vue/components/Icon.vue +7 -8
  207. package/dist/runtime/vue/components/Icon.vue.d.ts +14 -0
  208. package/dist/runtime/vue/components/Link.vue +118 -199
  209. package/dist/runtime/vue/components/Link.vue.d.ts +124 -0
  210. package/dist/runtime/vue/stubs.d.ts +5 -0
  211. package/dist/runtime/vue/stubs.js +11 -2
  212. package/dist/shared/{ui.BCaWD5Ek.mjs → ui.D7lOOabO.mjs} +623 -364
  213. package/dist/types.d.mts +5 -1
  214. package/dist/unplugin.d.mts +6 -1
  215. package/dist/unplugin.mjs +25 -4
  216. package/dist/vite.mjs +1 -1
  217. package/package.json +122 -64
  218. package/dist/module.cjs +0 -62
  219. package/dist/module.d.cts +0 -44
  220. package/dist/module.d.ts +0 -44
  221. package/dist/shared/ui.C6uTSFTI.cjs +0 -3555
  222. package/dist/types.d.ts +0 -1
  223. package/dist/unplugin.cjs +0 -232
  224. package/dist/unplugin.d.cts +0 -61
  225. package/dist/unplugin.d.ts +0 -61
  226. package/dist/vite.cjs +0 -23
  227. package/dist/vite.d.cts +0 -15
  228. package/dist/vite.d.ts +0 -15
@@ -1,3555 +0,0 @@
1
- 'use strict';
2
-
3
- const index_js = require('../../dist/runtime/utils/index.js');
4
- require('node:url');
5
- const scule = require('scule');
6
- const kit = require('@nuxt/kit');
7
- const defu = require('defu');
8
- const colors = require('tailwindcss/colors');
9
-
10
- function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
11
-
12
- const colors__default = /*#__PURE__*/_interopDefaultCompat(colors);
13
-
14
- const icons = {
15
- arrowLeft: "i-lucide-arrow-left",
16
- arrowRight: "i-lucide-arrow-right",
17
- check: "i-lucide-check",
18
- chevronDoubleLeft: "i-lucide-chevrons-left",
19
- chevronDoubleRight: "i-lucide-chevrons-right",
20
- chevronDown: "i-lucide-chevron-down",
21
- chevronLeft: "i-lucide-chevron-left",
22
- chevronRight: "i-lucide-chevron-right",
23
- chevronUp: "i-lucide-chevron-up",
24
- close: "i-lucide-x",
25
- ellipsis: "i-lucide-ellipsis",
26
- external: "i-lucide-arrow-up-right",
27
- folder: "i-lucide-folder",
28
- folderOpen: "i-lucide-folder-open",
29
- loading: "i-lucide-refresh-cw",
30
- minus: "i-lucide-minus",
31
- plus: "i-lucide-plus",
32
- search: "i-lucide-search"
33
- };
34
-
35
- const getDefaultUiConfig = (colors) => ({
36
- colors: index_js.pick({
37
- primary: "green",
38
- secondary: "blue",
39
- success: "green",
40
- info: "blue",
41
- warning: "yellow",
42
- error: "red",
43
- neutral: "slate"
44
- }, [...colors || [], "neutral"]),
45
- icons
46
- });
47
- const defaultOptions = {
48
- prefix: "U",
49
- fonts: true,
50
- colorMode: true,
51
- theme: {
52
- colors: void 0,
53
- transitions: true
54
- }
55
- };
56
- const resolveColors = (colors) => {
57
- return colors?.length ? [.../* @__PURE__ */ new Set(["primary", ...colors])] : ["primary", "secondary", "success", "info", "warning", "error"];
58
- };
59
-
60
- const accordion = {
61
- slots: {
62
- root: "w-full",
63
- item: "border-b border-(--ui-border) last:border-b-0",
64
- header: "flex",
65
- trigger: "group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0",
66
- content: "data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none",
67
- body: "text-sm pb-3.5",
68
- leadingIcon: "shrink-0 size-5",
69
- trailingIcon: "shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200",
70
- label: "text-start break-words"
71
- },
72
- variants: {
73
- disabled: {
74
- true: {
75
- trigger: "cursor-not-allowed opacity-75"
76
- }
77
- }
78
- }
79
- };
80
-
81
- const alert = (options) => ({
82
- slots: {
83
- root: "relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5",
84
- wrapper: "min-w-0 flex-1 flex flex-col",
85
- title: "text-sm font-medium",
86
- description: "text-sm opacity-90",
87
- icon: "shrink-0 size-5",
88
- avatar: "shrink-0",
89
- avatarSize: "2xl",
90
- actions: "flex flex-wrap gap-1.5 shrink-0",
91
- close: "p-0"
92
- },
93
- variants: {
94
- color: {
95
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
96
- neutral: ""
97
- },
98
- variant: {
99
- solid: "",
100
- outline: "",
101
- soft: "",
102
- subtle: ""
103
- },
104
- orientation: {
105
- horizontal: {
106
- root: "items-center",
107
- actions: "items-center"
108
- },
109
- vertical: {
110
- root: "items-start",
111
- actions: "items-start mt-2.5"
112
- }
113
- },
114
- title: {
115
- true: {
116
- description: "mt-1"
117
- }
118
- }
119
- },
120
- compoundVariants: [...(options.theme.colors || []).map((color) => ({
121
- color,
122
- variant: "solid",
123
- class: {
124
- root: `bg-(--ui-${color}) text-(--ui-bg)`
125
- }
126
- })), ...(options.theme.colors || []).map((color) => ({
127
- color,
128
- variant: "outline",
129
- class: {
130
- root: `text-(--ui-${color}) ring ring-inset ring-(--ui-${color})/25`
131
- }
132
- })), ...(options.theme.colors || []).map((color) => ({
133
- color,
134
- variant: "soft",
135
- class: {
136
- root: `bg-(--ui-${color})/10 text-(--ui-${color})`
137
- }
138
- })), ...(options.theme.colors || []).map((color) => ({
139
- color,
140
- variant: "subtle",
141
- class: {
142
- root: `bg-(--ui-${color})/10 text-(--ui-${color}) ring ring-inset ring-(--ui-${color})/25`
143
- }
144
- })), {
145
- color: "neutral",
146
- variant: "solid",
147
- class: {
148
- root: "text-(--ui-bg) bg-(--ui-bg-inverted)"
149
- }
150
- }, {
151
- color: "neutral",
152
- variant: "outline",
153
- class: {
154
- root: "text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border)"
155
- }
156
- }, {
157
- color: "neutral",
158
- variant: "soft",
159
- class: {
160
- root: "text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50"
161
- }
162
- }, {
163
- color: "neutral",
164
- variant: "subtle",
165
- class: {
166
- root: "text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-border-accented)"
167
- }
168
- }],
169
- defaultVariants: {
170
- color: "primary",
171
- variant: "solid"
172
- }
173
- });
174
-
175
- const avatar = {
176
- slots: {
177
- root: "inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated)",
178
- image: "h-full w-full rounded-[inherit] object-cover",
179
- fallback: "font-medium leading-none text-(--ui-text-muted) truncate",
180
- icon: "text-(--ui-text-muted) shrink-0"
181
- },
182
- variants: {
183
- size: {
184
- "3xs": {
185
- root: "size-4 text-[8px]"
186
- },
187
- "2xs": {
188
- root: "size-5 text-[10px]"
189
- },
190
- "xs": {
191
- root: "size-6 text-xs"
192
- },
193
- "sm": {
194
- root: "size-7 text-sm"
195
- },
196
- "md": {
197
- root: "size-8 text-base"
198
- },
199
- "lg": {
200
- root: "size-9 text-lg"
201
- },
202
- "xl": {
203
- root: "size-10 text-xl"
204
- },
205
- "2xl": {
206
- root: "size-11 text-[22px]"
207
- },
208
- "3xl": {
209
- root: "size-12 text-2xl"
210
- }
211
- }
212
- },
213
- defaultVariants: {
214
- size: "md"
215
- }
216
- };
217
-
218
- const avatarGroup = {
219
- slots: {
220
- root: "inline-flex flex-row-reverse justify-end",
221
- base: "relative rounded-full ring-(--ui-bg) first:me-0"
222
- },
223
- variants: {
224
- size: {
225
- "3xs": {
226
- base: "ring -me-0.5"
227
- },
228
- "2xs": {
229
- base: "ring -me-0.5"
230
- },
231
- "xs": {
232
- base: "ring -me-0.5"
233
- },
234
- "sm": {
235
- base: "ring-2 -me-1.5"
236
- },
237
- "md": {
238
- base: "ring-2 -me-1.5"
239
- },
240
- "lg": {
241
- base: "ring-2 -me-1.5"
242
- },
243
- "xl": {
244
- base: "ring-3 -me-2"
245
- },
246
- "2xl": {
247
- base: "ring-3 -me-2"
248
- },
249
- "3xl": {
250
- base: "ring-3 -me-2"
251
- }
252
- }
253
- },
254
- defaultVariants: {
255
- size: "md"
256
- }
257
- };
258
-
259
- const buttonGroupVariant = {
260
- buttonGroup: {
261
- horizontal: "not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none",
262
- vertical: "not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none"
263
- }
264
- };
265
- const buttonGroupVariantWithRoot = {
266
- buttonGroup: {
267
- horizontal: {
268
- root: "group",
269
- base: "group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none"
270
- },
271
- vertical: {
272
- root: "group",
273
- base: "group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none"
274
- }
275
- }
276
- };
277
- const buttonGroup = {
278
- base: "relative",
279
- variants: {
280
- size: {
281
- xs: "",
282
- sm: "",
283
- md: "",
284
- lg: "",
285
- xl: ""
286
- },
287
- orientation: {
288
- horizontal: "inline-flex -space-x-px",
289
- vertical: "flex flex-col -space-y-px"
290
- }
291
- }
292
- };
293
-
294
- const badge = (options) => ({
295
- slots: {
296
- base: "font-medium inline-flex items-center",
297
- label: "truncate",
298
- leadingIcon: "shrink-0",
299
- leadingAvatar: "shrink-0",
300
- leadingAvatarSize: "",
301
- trailingIcon: "shrink-0"
302
- },
303
- variants: {
304
- ...buttonGroupVariant,
305
- color: {
306
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
307
- neutral: ""
308
- },
309
- variant: {
310
- solid: "",
311
- outline: "",
312
- soft: "",
313
- subtle: ""
314
- },
315
- size: {
316
- xs: {
317
- base: "text-[8px]/3 px-1 py-0.5 gap-1 rounded-[calc(var(--ui-radius))]",
318
- leadingIcon: "size-3",
319
- leadingAvatarSize: "3xs",
320
- trailingIcon: "size-3"
321
- },
322
- sm: {
323
- base: "text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))]",
324
- leadingIcon: "size-3",
325
- leadingAvatarSize: "3xs",
326
- trailingIcon: "size-3"
327
- },
328
- md: {
329
- base: "text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)]",
330
- leadingIcon: "size-4",
331
- leadingAvatarSize: "3xs",
332
- trailingIcon: "size-4"
333
- },
334
- lg: {
335
- base: "text-sm px-2 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)]",
336
- leadingIcon: "size-5",
337
- leadingAvatarSize: "2xs",
338
- trailingIcon: "size-5"
339
- },
340
- xl: {
341
- base: "text-base px-2.5 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)]",
342
- leadingIcon: "size-6",
343
- leadingAvatarSize: "2xs",
344
- trailingIcon: "size-6"
345
- }
346
- }
347
- },
348
- compoundVariants: [...(options.theme.colors || []).map((color) => ({
349
- color,
350
- variant: "solid",
351
- class: `bg-(--ui-${color}) text-(--ui-bg)`
352
- })), ...(options.theme.colors || []).map((color) => ({
353
- color,
354
- variant: "outline",
355
- class: `text-(--ui-${color}) ring ring-inset ring-(--ui-${color})/50`
356
- })), ...(options.theme.colors || []).map((color) => ({
357
- color,
358
- variant: "soft",
359
- class: `bg-(--ui-${color})/10 text-(--ui-${color})`
360
- })), ...(options.theme.colors || []).map((color) => ({
361
- color,
362
- variant: "subtle",
363
- class: `bg-(--ui-${color})/10 text-(--ui-${color}) ring ring-inset ring-(--ui-${color})/25`
364
- })), {
365
- color: "neutral",
366
- variant: "solid",
367
- class: "text-(--ui-bg) bg-(--ui-bg-inverted)"
368
- }, {
369
- color: "neutral",
370
- variant: "outline",
371
- class: "ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg)"
372
- }, {
373
- color: "neutral",
374
- variant: "soft",
375
- class: "text-(--ui-text) bg-(--ui-bg-elevated)"
376
- }, {
377
- color: "neutral",
378
- variant: "subtle",
379
- class: "ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg-elevated)"
380
- }],
381
- defaultVariants: {
382
- color: "primary",
383
- variant: "solid",
384
- size: "md"
385
- }
386
- });
387
-
388
- const breadcrumb = (options) => ({
389
- slots: {
390
- root: "relative min-w-0",
391
- list: "flex items-center gap-1.5",
392
- item: "flex min-w-0",
393
- link: "group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary)",
394
- linkLeadingIcon: "shrink-0 size-5",
395
- linkLeadingAvatar: "shrink-0",
396
- linkLeadingAvatarSize: "2xs",
397
- linkLabel: "truncate",
398
- separator: "flex",
399
- separatorIcon: "shrink-0 size-5 text-(--ui-text-muted)"
400
- },
401
- variants: {
402
- active: {
403
- true: {
404
- link: "text-(--ui-primary) font-semibold"
405
- },
406
- false: {
407
- link: "text-(--ui-text-muted) font-medium"
408
- }
409
- },
410
- disabled: {
411
- true: {
412
- link: "cursor-not-allowed opacity-75"
413
- }
414
- },
415
- to: {
416
- true: ""
417
- }
418
- },
419
- compoundVariants: [{
420
- disabled: false,
421
- active: false,
422
- to: true,
423
- class: {
424
- link: ["hover:text-(--ui-text)", options.theme.transitions && "transition-colors"]
425
- }
426
- }]
427
- });
428
-
429
- const button = (options) => ({
430
- slots: {
431
- base: ["rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75", options.theme.transitions && "transition-colors"],
432
- label: "truncate",
433
- leadingIcon: "shrink-0",
434
- leadingAvatar: "shrink-0",
435
- leadingAvatarSize: "",
436
- trailingIcon: "shrink-0"
437
- },
438
- variants: {
439
- ...buttonGroupVariant,
440
- color: {
441
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
442
- neutral: ""
443
- },
444
- variant: {
445
- solid: "",
446
- outline: "",
447
- soft: "",
448
- subtle: "",
449
- ghost: "",
450
- link: ""
451
- },
452
- size: {
453
- xs: {
454
- base: "px-2 py-1 text-xs gap-1",
455
- leadingIcon: "size-4",
456
- leadingAvatarSize: "3xs",
457
- trailingIcon: "size-4"
458
- },
459
- sm: {
460
- base: "px-2.5 py-1.5 text-xs gap-1.5",
461
- leadingIcon: "size-4",
462
- leadingAvatarSize: "3xs",
463
- trailingIcon: "size-4"
464
- },
465
- md: {
466
- base: "px-2.5 py-1.5 text-sm gap-1.5",
467
- leadingIcon: "size-5",
468
- leadingAvatarSize: "2xs",
469
- trailingIcon: "size-5"
470
- },
471
- lg: {
472
- base: "px-3 py-2 text-sm gap-2",
473
- leadingIcon: "size-5",
474
- leadingAvatarSize: "2xs",
475
- trailingIcon: "size-5"
476
- },
477
- xl: {
478
- base: "px-3 py-2 text-base gap-2",
479
- leadingIcon: "size-6",
480
- leadingAvatarSize: "xs",
481
- trailingIcon: "size-6"
482
- }
483
- },
484
- block: {
485
- true: {
486
- base: "w-full justify-center",
487
- trailingIcon: "ms-auto"
488
- }
489
- },
490
- square: {
491
- true: ""
492
- },
493
- leading: {
494
- true: ""
495
- },
496
- trailing: {
497
- true: ""
498
- },
499
- loading: {
500
- true: ""
501
- },
502
- active: {
503
- true: {
504
- base: ""
505
- },
506
- false: {
507
- base: ""
508
- }
509
- }
510
- },
511
- compoundVariants: [...(options.theme.colors || []).map((color) => ({
512
- color,
513
- variant: "solid",
514
- class: `text-(--ui-bg) bg-(--ui-${color}) hover:bg-(--ui-${color})/75 disabled:bg-(--ui-${color}) aria-disabled:bg-(--ui-${color}) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-${color})`
515
- })), ...(options.theme.colors || []).map((color) => ({
516
- color,
517
- variant: "outline",
518
- class: `ring ring-inset ring-(--ui-${color})/50 text-(--ui-${color}) hover:bg-(--ui-${color})/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-(--ui-${color})`
519
- })), ...(options.theme.colors || []).map((color) => ({
520
- color,
521
- variant: "soft",
522
- class: `text-(--ui-${color}) bg-(--ui-${color})/10 hover:bg-(--ui-${color})/15 focus-visible:bg-(--ui-${color})/15 disabled:bg-(--ui-${color})/10 aria-disabled:bg-(--ui-${color})/10`
523
- })), ...(options.theme.colors || []).map((color) => ({
524
- color,
525
- variant: "subtle",
526
- class: `text-(--ui-${color}) ring ring-inset ring-(--ui-${color})/25 bg-(--ui-${color})/10 hover:bg-(--ui-${color})/15 disabled:bg-(--ui-${color})/10 aria-disabled:bg-(--ui-${color})/10 focus-visible:ring-2 focus-visible:ring-(--ui-${color})`
527
- })), ...(options.theme.colors || []).map((color) => ({
528
- color,
529
- variant: "ghost",
530
- class: `text-(--ui-${color}) hover:bg-(--ui-${color})/10 focus-visible:bg-(--ui-${color})/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent`
531
- })), ...(options.theme.colors || []).map((color) => ({
532
- color,
533
- variant: "link",
534
- class: `text-(--ui-${color}) hover:text-(--ui-${color})/75 disabled:text-(--ui-${color}) aria-disabled:text-(--ui-${color}) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-${color})`
535
- })), {
536
- color: "neutral",
537
- variant: "solid",
538
- class: "text-(--ui-bg) bg-(--ui-bg-inverted) hover:bg-(--ui-bg-inverted)/90 disabled:bg-(--ui-bg-inverted) aria-disabled:bg-(--ui-bg-inverted) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)"
539
- }, {
540
- color: "neutral",
541
- variant: "outline",
542
- class: "ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)"
543
- }, {
544
- color: "neutral",
545
- variant: "soft",
546
- class: "text-(--ui-text) bg-(--ui-bg-elevated) hover:bg-(--ui-bg-accented)/75 focus-visible:bg-(--ui-bg-accented)/75 disabled:bg-(--ui-bg-elevated) aria-disabled:bg-(--ui-bg-elevated)"
547
- }, {
548
- color: "neutral",
549
- variant: "subtle",
550
- class: "ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg-elevated) hover:bg-(--ui-bg-accented)/75 disabled:bg-(--ui-bg-elevated) aria-disabled:bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)"
551
- }, {
552
- color: "neutral",
553
- variant: "ghost",
554
- class: "text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"
555
- }, {
556
- color: "neutral",
557
- variant: "link",
558
- class: "text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)"
559
- }, {
560
- size: "xs",
561
- square: true,
562
- class: "p-1"
563
- }, {
564
- size: "sm",
565
- square: true,
566
- class: "p-1.5"
567
- }, {
568
- size: "md",
569
- square: true,
570
- class: "p-1.5"
571
- }, {
572
- size: "lg",
573
- square: true,
574
- class: "p-2"
575
- }, {
576
- size: "xl",
577
- square: true,
578
- class: "p-2"
579
- }, {
580
- loading: true,
581
- leading: true,
582
- class: {
583
- leadingIcon: "animate-spin"
584
- }
585
- }, {
586
- loading: true,
587
- leading: false,
588
- trailing: true,
589
- class: {
590
- trailingIcon: "animate-spin"
591
- }
592
- }],
593
- defaultVariants: {
594
- color: "primary",
595
- variant: "solid",
596
- size: "md"
597
- }
598
- });
599
-
600
- const calendar = (options) => ({
601
- slots: {
602
- root: "",
603
- header: "flex items-center justify-between",
604
- body: "flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0",
605
- heading: "text-center font-medium truncate mx-auto",
606
- grid: "w-full border-collapse select-none space-y-1 focus:outline-none",
607
- gridRow: "grid grid-cols-7",
608
- gridWeekDaysRow: "mb-1 grid w-full grid-cols-7",
609
- gridBody: "grid",
610
- headCell: "rounded-[calc(var(--ui-radius)*1.5)]",
611
- cell: "relative text-center",
612
- cellTrigger: ["m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted)", options.theme.transitions && "transition"]
613
- },
614
- variants: {
615
- color: {
616
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
617
- headCell: `text-(--ui-${color})`,
618
- cellTrigger: `focus-visible:ring-(--ui-${color}) data-[selected]:bg-(--ui-${color}) data-today:not-data-[selected]:text-(--ui-${color}) data-[highlighted]:bg-(--ui-${color})/20 hover:not-data-[selected]:bg-(--ui-${color})/20`
619
- }])),
620
- neutral: {
621
- headCell: "text-(--ui-bg-inverted)",
622
- cellTrigger: "focus-visible:ring-(--ui-border-inverted) data-[selected]:bg-(--ui-bg-inverted) data-today:not-data-[selected]:text-(--ui-bg-inverted) data-[highlighted]:bg-(--ui-bg-inverted)/20 hover:not-data-[selected]:bg-(--ui-bg-inverted)/10"
623
- }
624
- },
625
- size: {
626
- xs: {
627
- heading: "text-xs",
628
- cell: "text-xs",
629
- headCell: "text-[10px]",
630
- cellTrigger: "size-7",
631
- body: "space-y-2 pt-2"
632
- },
633
- sm: {
634
- heading: "text-xs",
635
- headCell: "text-xs",
636
- cell: "text-xs",
637
- cellTrigger: "size-7"
638
- },
639
- md: {
640
- heading: "text-sm",
641
- headCell: "text-xs",
642
- cell: "text-sm",
643
- cellTrigger: "size-8"
644
- },
645
- lg: {
646
- heading: "text-md",
647
- headCell: "text-md",
648
- cellTrigger: "size-9 text-md"
649
- },
650
- xl: {
651
- heading: "text-lg",
652
- headCell: "text-lg",
653
- cellTrigger: "size-10 text-lg"
654
- }
655
- }
656
- },
657
- defaultVariants: {
658
- size: "md",
659
- color: "primary"
660
- }
661
- });
662
-
663
- const card = {
664
- slots: {
665
- root: "rounded-[calc(var(--ui-radius)*2)]",
666
- header: "p-4 sm:px-6",
667
- body: "p-4 sm:p-6",
668
- footer: "p-4 sm:px-6"
669
- },
670
- variants: {
671
- variant: {
672
- solid: {
673
- root: "bg-(--ui-bg-inverted) text-(--ui-bg)"
674
- },
675
- outline: {
676
- root: "bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)"
677
- },
678
- soft: {
679
- root: "bg-(--ui-bg-elevated)/50 divide-y divide-(--ui-border)"
680
- },
681
- subtle: {
682
- root: "bg-(--ui-bg-elevated)/50 ring ring-(--ui-border) divide-y divide-(--ui-border)"
683
- }
684
- }
685
- },
686
- defaultVariants: {
687
- variant: "outline"
688
- }
689
- };
690
-
691
- const carousel = (options) => ({
692
- slots: {
693
- root: "relative focus:outline-none",
694
- viewport: "overflow-hidden",
695
- container: "flex items-start",
696
- item: "min-w-0 shrink-0 basis-full",
697
- controls: "",
698
- arrows: "",
699
- prev: "absolute rounded-full",
700
- next: "absolute rounded-full",
701
- dots: "absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3",
702
- dot: ["cursor-pointer size-3 bg-(--ui-border-accented) rounded-full", options.theme.transitions && "transition"]
703
- },
704
- variants: {
705
- orientation: {
706
- vertical: {
707
- container: "flex-col -mt-4",
708
- item: "pt-4",
709
- prev: "-top-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90",
710
- next: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90"
711
- },
712
- horizontal: {
713
- container: "flex-row -ms-4",
714
- item: "ps-4",
715
- prev: "-start-12 top-1/2 -translate-y-1/2",
716
- next: "-end-12 top-1/2 -translate-y-1/2"
717
- }
718
- },
719
- active: {
720
- true: {
721
- dot: "bg-(--ui-border-inverted)"
722
- }
723
- }
724
- }
725
- });
726
-
727
- const checkbox = (options) => ({
728
- slots: {
729
- root: "relative flex items-start",
730
- base: "shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2",
731
- container: "flex items-center",
732
- wrapper: "ms-2",
733
- icon: "shrink-0 size-full",
734
- label: "block font-medium text-(--ui-text)",
735
- description: "text-(--ui-text-muted)"
736
- },
737
- variants: {
738
- color: {
739
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, `focus-visible:outline-(--ui-${color})`])),
740
- neutral: "focus-visible:outline-(--ui-border-inverted)"
741
- },
742
- size: {
743
- xs: {
744
- base: "size-3",
745
- container: "h-4",
746
- wrapper: "text-xs"
747
- },
748
- sm: {
749
- base: "size-3.5",
750
- container: "h-4",
751
- wrapper: "text-xs"
752
- },
753
- md: {
754
- base: "size-4",
755
- container: "h-5",
756
- wrapper: "text-sm"
757
- },
758
- lg: {
759
- base: "size-4.5",
760
- container: "h-5",
761
- wrapper: "text-sm"
762
- },
763
- xl: {
764
- base: "size-5",
765
- container: "h-6",
766
- wrapper: "text-base"
767
- }
768
- },
769
- required: {
770
- true: {
771
- label: "after:content-['*'] after:ms-0.5 after:text-(--ui-error)"
772
- }
773
- },
774
- disabled: {
775
- true: {
776
- base: "cursor-not-allowed opacity-75",
777
- label: "cursor-not-allowed opacity-75",
778
- description: "cursor-not-allowed opacity-75"
779
- }
780
- },
781
- checked: {
782
- true: ""
783
- }
784
- },
785
- compoundVariants: [...(options.theme.colors || []).map((color) => ({
786
- color,
787
- checked: true,
788
- class: `ring-2 ring-(--ui-${color}) bg-(--ui-${color})`
789
- })), {
790
- color: "neutral",
791
- checked: true,
792
- class: "ring-2 ring-(--ui-border-inverted) bg-(--ui-bg-inverted)"
793
- }],
794
- defaultVariants: {
795
- size: "md",
796
- color: "primary"
797
- }
798
- });
799
-
800
- const chip = (options) => ({
801
- slots: {
802
- root: "relative inline-flex items-center justify-center shrink-0",
803
- base: "rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap"
804
- },
805
- variants: {
806
- color: {
807
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, `bg-(--ui-${color})`])),
808
- neutral: "bg-(--ui-text-muted)"
809
- },
810
- size: {
811
- "3xs": "h-[4px] min-w-[4px] text-[4px]",
812
- "2xs": "h-[5px] min-w-[5px] text-[5px]",
813
- "xs": "h-[6px] min-w-[6px] text-[6px]",
814
- "sm": "h-[7px] min-w-[7px] text-[7px]",
815
- "md": "h-[8px] min-w-[8px] text-[8px]",
816
- "lg": "h-[9px] min-w-[9px] text-[9px]",
817
- "xl": "h-[10px] min-w-[10px] text-[10px]",
818
- "2xl": "h-[11px] min-w-[11px] text-[11px]",
819
- "3xl": "h-[12px] min-w-[12px] text-[12px]"
820
- },
821
- position: {
822
- "top-right": "top-0 right-0",
823
- "bottom-right": "bottom-0 right-0",
824
- "top-left": "top-0 left-0",
825
- "bottom-left": "bottom-0 left-0"
826
- },
827
- inset: {
828
- false: ""
829
- },
830
- standalone: {
831
- false: "absolute"
832
- }
833
- },
834
- compoundVariants: [{
835
- position: "top-right",
836
- inset: false,
837
- class: "-translate-y-1/2 translate-x-1/2 transform"
838
- }, {
839
- position: "bottom-right",
840
- inset: false,
841
- class: "translate-y-1/2 translate-x-1/2 transform"
842
- }, {
843
- position: "top-left",
844
- inset: false,
845
- class: "-translate-y-1/2 -translate-x-1/2 transform"
846
- }, {
847
- position: "bottom-left",
848
- inset: false,
849
- class: "translate-y-1/2 -translate-x-1/2 transform"
850
- }],
851
- defaultVariants: {
852
- size: "md",
853
- color: "primary",
854
- position: "top-right"
855
- }
856
- });
857
-
858
- const collapsible = {
859
- slots: {
860
- root: "",
861
- content: "data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden"
862
- }
863
- };
864
-
865
- const colorPicker = {
866
- slots: {
867
- root: "data-[disabled]:opacity-75",
868
- picker: "flex gap-4",
869
- selector: "rounded-[calc(var(--ui-radius)*1.5)]",
870
- selectorBackground: "w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]",
871
- selectorThumb: "-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed",
872
- track: "w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)]",
873
- trackThumb: "absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed"
874
- },
875
- variants: {
876
- size: {
877
- xs: {
878
- selector: "w-38 h-38",
879
- track: "h-38"
880
- },
881
- sm: {
882
- selector: "w-40 h-40",
883
- track: "h-40"
884
- },
885
- md: {
886
- selector: "w-42 h-42",
887
- track: "h-42"
888
- },
889
- lg: {
890
- selector: "w-44 h-44",
891
- track: "h-44"
892
- },
893
- xl: {
894
- selector: "w-46 h-46",
895
- track: "h-46"
896
- }
897
- }
898
- },
899
- compoundVariants: [],
900
- defaultVariants: {
901
- size: "md"
902
- }
903
- };
904
-
905
- const commandPalette = (options) => ({
906
- slots: {
907
- root: "flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-border)",
908
- input: "[&>input]:h-12",
909
- close: "",
910
- content: "relative overflow-hidden flex flex-col",
911
- viewport: "relative divide-y divide-(--ui-border) scroll-py-1 overflow-y-auto flex-1 focus:outline-none",
912
- group: "p-1 isolate",
913
- empty: "py-6 text-center text-sm text-(--ui-text-muted)",
914
- label: "px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)",
915
- item: "group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75",
916
- itemLeadingIcon: "shrink-0 size-5",
917
- itemLeadingAvatar: "shrink-0",
918
- itemLeadingAvatarSize: "2xs",
919
- itemLeadingChip: "shrink-0 size-5",
920
- itemLeadingChipSize: "md",
921
- itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
922
- itemTrailingIcon: "shrink-0 size-5",
923
- itemTrailingHighlightedIcon: "shrink-0 size-5 text-(--ui-text-dimmed) hidden group-data-highlighted:inline-flex",
924
- itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0 gap-0.5",
925
- itemTrailingKbdsSize: "md",
926
- itemLabel: "truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)",
927
- itemLabelBase: "text-(--ui-text-highlighted) [&>mark]:text-(--ui-bg) [&>mark]:bg-(--ui-primary)",
928
- itemLabelPrefix: "text-(--ui-text)",
929
- itemLabelSuffix: "text-(--ui-text-dimmed) [&>mark]:text-(--ui-bg) [&>mark]:bg-(--ui-primary)"
930
- },
931
- variants: {
932
- active: {
933
- true: {
934
- item: "text-(--ui-text-highlighted) before:bg-(--ui-bg-elevated)",
935
- itemLeadingIcon: "text-(--ui-text)"
936
- },
937
- false: {
938
- item: ["text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50", options.theme.transitions && "transition-colors before:transition-colors"],
939
- itemLeadingIcon: ["text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text)", options.theme.transitions && "transition-colors"]
940
- }
941
- },
942
- loading: {
943
- true: {
944
- itemLeadingIcon: "animate-spin"
945
- }
946
- }
947
- }
948
- });
949
-
950
- const container = {
951
- base: "max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8"
952
- };
953
-
954
- const contextMenu = (options) => ({
955
- slots: {
956
- content: "min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
957
- group: "p-1 isolate",
958
- label: "w-full flex items-center font-semibold text-(--ui-text-highlighted)",
959
- separator: "-mx-1 my-1 h-px bg-(--ui-border)",
960
- item: "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75",
961
- itemLeadingIcon: "shrink-0",
962
- itemLeadingAvatar: "shrink-0",
963
- itemLeadingAvatarSize: "",
964
- itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
965
- itemTrailingIcon: "shrink-0",
966
- itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
967
- itemTrailingKbdsSize: "",
968
- itemLabel: "truncate",
969
- itemLabelExternalIcon: "inline-block size-3 align-top text-(--ui-text-dimmed)"
970
- },
971
- variants: {
972
- color: {
973
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
974
- neutral: ""
975
- },
976
- active: {
977
- true: {
978
- item: "text-(--ui-text-highlighted) before:bg-(--ui-bg-elevated)",
979
- itemLeadingIcon: "text-(--ui-text)"
980
- },
981
- false: {
982
- item: ["text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50", options.theme.transitions && "transition-colors before:transition-colors"],
983
- itemLeadingIcon: ["text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text)", options.theme.transitions && "transition-colors"]
984
- }
985
- },
986
- loading: {
987
- true: {
988
- itemLeadingIcon: "animate-spin"
989
- }
990
- },
991
- size: {
992
- xs: {
993
- label: "p-1 text-xs gap-1",
994
- item: "p-1 text-xs gap-1",
995
- itemLeadingIcon: "size-4",
996
- itemLeadingAvatarSize: "3xs",
997
- itemTrailingIcon: "size-4",
998
- itemTrailingKbds: "gap-0.5",
999
- itemTrailingKbdsSize: "sm"
1000
- },
1001
- sm: {
1002
- label: "p-1.5 text-xs gap-1.5",
1003
- item: "p-1.5 text-xs gap-1.5",
1004
- itemLeadingIcon: "size-4",
1005
- itemLeadingAvatarSize: "3xs",
1006
- itemTrailingIcon: "size-4",
1007
- itemTrailingKbds: "gap-0.5",
1008
- itemTrailingKbdsSize: "sm"
1009
- },
1010
- md: {
1011
- label: "p-1.5 text-sm gap-1.5",
1012
- item: "p-1.5 text-sm gap-1.5",
1013
- itemLeadingIcon: "size-5",
1014
- itemLeadingAvatarSize: "2xs",
1015
- itemTrailingIcon: "size-5",
1016
- itemTrailingKbds: "gap-0.5",
1017
- itemTrailingKbdsSize: "md"
1018
- },
1019
- lg: {
1020
- label: "p-2 text-sm gap-2",
1021
- item: "p-2 text-sm gap-2",
1022
- itemLeadingIcon: "size-5",
1023
- itemLeadingAvatarSize: "2xs",
1024
- itemTrailingIcon: "size-5",
1025
- itemTrailingKbds: "gap-1",
1026
- itemTrailingKbdsSize: "md"
1027
- },
1028
- xl: {
1029
- label: "p-2 text-base gap-2",
1030
- item: "p-2 text-base gap-2",
1031
- itemLeadingIcon: "size-6",
1032
- itemLeadingAvatarSize: "xs",
1033
- itemTrailingIcon: "size-6",
1034
- itemTrailingKbds: "gap-1",
1035
- itemTrailingKbdsSize: "lg"
1036
- }
1037
- }
1038
- },
1039
- compoundVariants: [...(options.theme.colors || []).map((color) => ({
1040
- color,
1041
- active: false,
1042
- class: {
1043
- item: `text-(--ui-${color}) data-highlighted:text-(--ui-${color}) data-highlighted:before:bg-(--ui-${color})/10 data-[state=open]:before:bg-(--ui-${color})/10`,
1044
- itemLeadingIcon: `text-(--ui-${color})/75 group-data-highlighted:text-(--ui-${color}) group-data-[state=open]:text-(--ui-${color})`
1045
- }
1046
- })), ...(options.theme.colors || []).map((color) => ({
1047
- color,
1048
- active: true,
1049
- class: {
1050
- item: `text-(--ui-${color}) before:bg-(--ui-${color})/10`,
1051
- itemLeadingIcon: `text-(--ui-${color})`
1052
- }
1053
- }))],
1054
- defaultVariants: {
1055
- size: "md"
1056
- }
1057
- });
1058
-
1059
- const drawer = (options) => ({
1060
- slots: {
1061
- overlay: "fixed inset-0 bg-(--ui-bg-elevated)/75",
1062
- content: "fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none",
1063
- handle: ["shrink-0 !bg-(--ui-bg-accented)", options.theme.transitions && "transition-opacity"],
1064
- container: "w-full flex flex-col gap-4 p-4 overflow-y-auto",
1065
- header: "",
1066
- title: "text-(--ui-text-highlighted) font-semibold",
1067
- description: "mt-1 text-(--ui-text-muted) text-sm",
1068
- body: "flex-1",
1069
- footer: "flex flex-col gap-1.5"
1070
- },
1071
- variants: {
1072
- direction: {
1073
- top: {
1074
- content: "mb-24 flex-col-reverse",
1075
- handle: "mb-4"
1076
- },
1077
- right: {
1078
- content: "flex-row",
1079
- handle: "!ml-4"
1080
- },
1081
- bottom: {
1082
- content: "mt-24 flex-col",
1083
- handle: "mt-4"
1084
- },
1085
- left: {
1086
- content: "flex-row-reverse",
1087
- handle: "!mr-4"
1088
- }
1089
- },
1090
- inset: {
1091
- true: {
1092
- content: "rounded-[calc(var(--ui-radius)*2)] after:hidden"
1093
- }
1094
- }
1095
- },
1096
- compoundVariants: [{
1097
- direction: ["top", "bottom"],
1098
- class: {
1099
- content: "h-auto max-h-[96%]",
1100
- handle: "!w-12 !h-1.5 mx-auto"
1101
- }
1102
- }, {
1103
- direction: ["right", "left"],
1104
- class: {
1105
- content: "w-auto max-w-[calc(100%-2rem)]",
1106
- handle: "!h-12 !w-1.5 mt-auto mb-auto"
1107
- }
1108
- }, {
1109
- direction: "top",
1110
- inset: true,
1111
- class: {
1112
- content: "inset-x-4 top-4"
1113
- }
1114
- }, {
1115
- direction: "top",
1116
- inset: false,
1117
- class: {
1118
- content: "inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]"
1119
- }
1120
- }, {
1121
- direction: "bottom",
1122
- inset: true,
1123
- class: {
1124
- content: "inset-x-4 bottom-4"
1125
- }
1126
- }, {
1127
- direction: "bottom",
1128
- inset: false,
1129
- class: {
1130
- content: "inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]"
1131
- }
1132
- }, {
1133
- direction: "left",
1134
- inset: true,
1135
- class: {
1136
- content: "inset-y-4 left-4"
1137
- }
1138
- }, {
1139
- direction: "left",
1140
- inset: false,
1141
- class: {
1142
- content: "inset-y-0 left-0 rounded-r-[calc(var(--ui-radius)*2)]"
1143
- }
1144
- }, {
1145
- direction: "right",
1146
- inset: true,
1147
- class: {
1148
- content: "inset-y-4 right-4"
1149
- }
1150
- }, {
1151
- direction: "right",
1152
- inset: false,
1153
- class: {
1154
- content: "inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]"
1155
- }
1156
- }]
1157
- });
1158
-
1159
- const dropdownMenu = (options) => ({
1160
- slots: {
1161
- content: "min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
1162
- arrow: "fill-(--ui-border)",
1163
- group: "p-1 isolate",
1164
- label: "w-full flex items-center font-semibold text-(--ui-text-highlighted)",
1165
- separator: "-mx-1 my-1 h-px bg-(--ui-border)",
1166
- item: "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75",
1167
- itemLeadingIcon: "shrink-0",
1168
- itemLeadingAvatar: "shrink-0",
1169
- itemLeadingAvatarSize: "",
1170
- itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
1171
- itemTrailingIcon: "shrink-0",
1172
- itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
1173
- itemTrailingKbdsSize: "",
1174
- itemLabel: "truncate",
1175
- itemLabelExternalIcon: "inline-block size-3 align-top text-(--ui-text-dimmed)"
1176
- },
1177
- variants: {
1178
- color: {
1179
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
1180
- neutral: ""
1181
- },
1182
- active: {
1183
- true: {
1184
- item: "text-(--ui-text-highlighted) before:bg-(--ui-bg-elevated)",
1185
- itemLeadingIcon: "text-(--ui-text)"
1186
- },
1187
- false: {
1188
- item: ["text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50", options.theme.transitions && "transition-colors before:transition-colors"],
1189
- itemLeadingIcon: ["text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text)", options.theme.transitions && "transition-colors"]
1190
- }
1191
- },
1192
- loading: {
1193
- true: {
1194
- itemLeadingIcon: "animate-spin"
1195
- }
1196
- },
1197
- size: {
1198
- xs: {
1199
- label: "p-1 text-xs gap-1",
1200
- item: "p-1 text-xs gap-1",
1201
- itemLeadingIcon: "size-4",
1202
- itemLeadingAvatarSize: "3xs",
1203
- itemTrailingIcon: "size-4",
1204
- itemTrailingKbds: "gap-0.5",
1205
- itemTrailingKbdsSize: "sm"
1206
- },
1207
- sm: {
1208
- label: "p-1.5 text-xs gap-1.5",
1209
- item: "p-1.5 text-xs gap-1.5",
1210
- itemLeadingIcon: "size-4",
1211
- itemLeadingAvatarSize: "3xs",
1212
- itemTrailingIcon: "size-4",
1213
- itemTrailingKbds: "gap-0.5",
1214
- itemTrailingKbdsSize: "sm"
1215
- },
1216
- md: {
1217
- label: "p-1.5 text-sm gap-1.5",
1218
- item: "p-1.5 text-sm gap-1.5",
1219
- itemLeadingIcon: "size-5",
1220
- itemLeadingAvatarSize: "2xs",
1221
- itemTrailingIcon: "size-5",
1222
- itemTrailingKbds: "gap-0.5",
1223
- itemTrailingKbdsSize: "md"
1224
- },
1225
- lg: {
1226
- label: "p-2 text-sm gap-2",
1227
- item: "p-2 text-sm gap-2",
1228
- itemLeadingIcon: "size-5",
1229
- itemLeadingAvatarSize: "2xs",
1230
- itemTrailingIcon: "size-5",
1231
- itemTrailingKbds: "gap-1",
1232
- itemTrailingKbdsSize: "md"
1233
- },
1234
- xl: {
1235
- label: "p-2 text-base gap-2",
1236
- item: "p-2 text-base gap-2",
1237
- itemLeadingIcon: "size-6",
1238
- itemLeadingAvatarSize: "xs",
1239
- itemTrailingIcon: "size-6",
1240
- itemTrailingKbds: "gap-1",
1241
- itemTrailingKbdsSize: "lg"
1242
- }
1243
- }
1244
- },
1245
- compoundVariants: [...(options.theme.colors || []).map((color) => ({
1246
- color,
1247
- active: false,
1248
- class: {
1249
- item: `text-(--ui-${color}) data-highlighted:text-(--ui-${color}) data-highlighted:before:bg-(--ui-${color})/10 data-[state=open]:before:bg-(--ui-${color})/10`,
1250
- itemLeadingIcon: `text-(--ui-${color})/75 group-data-highlighted:text-(--ui-${color}) group-data-[state=open]:text-(--ui-${color})`
1251
- }
1252
- })), ...(options.theme.colors || []).map((color) => ({
1253
- color,
1254
- active: true,
1255
- class: {
1256
- item: `text-(--ui-${color}) before:bg-(--ui-${color})/10`,
1257
- itemLeadingIcon: `text-(--ui-${color})`
1258
- }
1259
- }))],
1260
- defaultVariants: {
1261
- size: "md"
1262
- }
1263
- });
1264
-
1265
- const form = {
1266
- base: ""
1267
- };
1268
-
1269
- const formField = {
1270
- slots: {
1271
- root: "",
1272
- wrapper: "",
1273
- labelWrapper: "flex content-center items-center justify-between",
1274
- label: "block font-medium text-(--ui-text)",
1275
- container: "mt-1 relative",
1276
- description: "text-(--ui-text-muted)",
1277
- error: "mt-2 text-(--ui-error)",
1278
- hint: "text-(--ui-text-muted)",
1279
- help: "mt-2 text-(--ui-text-muted)"
1280
- },
1281
- variants: {
1282
- size: {
1283
- xs: { root: "text-xs" },
1284
- sm: { root: "text-xs" },
1285
- md: { root: "text-sm" },
1286
- lg: { root: "text-sm" },
1287
- xl: { root: "text-base" }
1288
- },
1289
- required: {
1290
- true: {
1291
- label: `after:content-['*'] after:ms-0.5 after:text-(--ui-error)`
1292
- }
1293
- }
1294
- },
1295
- defaultVariants: {
1296
- size: "md"
1297
- }
1298
- };
1299
-
1300
- const input = (options) => ({
1301
- slots: {
1302
- root: "relative inline-flex items-center",
1303
- base: ["w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
1304
- leading: "absolute inset-y-0 start-0 flex items-center",
1305
- leadingIcon: "shrink-0 text-(--ui-text-dimmed)",
1306
- leadingAvatar: "shrink-0",
1307
- leadingAvatarSize: "",
1308
- trailing: "absolute inset-y-0 end-0 flex items-center",
1309
- trailingIcon: "shrink-0 text-(--ui-text-dimmed)"
1310
- },
1311
- variants: {
1312
- ...buttonGroupVariantWithRoot,
1313
- size: {
1314
- xs: {
1315
- base: "px-2 py-1 text-xs gap-1",
1316
- leading: "ps-2",
1317
- trailing: "pe-2",
1318
- leadingIcon: "size-4",
1319
- leadingAvatarSize: "3xs",
1320
- trailingIcon: "size-4"
1321
- },
1322
- sm: {
1323
- base: "px-2.5 py-1.5 text-xs gap-1.5",
1324
- leading: "ps-2.5",
1325
- trailing: "pe-2.5",
1326
- leadingIcon: "size-4",
1327
- leadingAvatarSize: "3xs",
1328
- trailingIcon: "size-4"
1329
- },
1330
- md: {
1331
- base: "px-2.5 py-1.5 text-sm gap-1.5",
1332
- leading: "ps-2.5",
1333
- trailing: "pe-2.5",
1334
- leadingIcon: "size-5",
1335
- leadingAvatarSize: "2xs",
1336
- trailingIcon: "size-5"
1337
- },
1338
- lg: {
1339
- base: "px-3 py-2 text-sm gap-2",
1340
- leading: "ps-3",
1341
- trailing: "pe-3",
1342
- leadingIcon: "size-5",
1343
- leadingAvatarSize: "2xs",
1344
- trailingIcon: "size-5"
1345
- },
1346
- xl: {
1347
- base: "px-3 py-2 text-base gap-2",
1348
- leading: "ps-3",
1349
- trailing: "pe-3",
1350
- leadingIcon: "size-6",
1351
- leadingAvatarSize: "xs",
1352
- trailingIcon: "size-6"
1353
- }
1354
- },
1355
- variant: {
1356
- outline: "text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented)",
1357
- soft: "text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50",
1358
- subtle: "text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented)",
1359
- ghost: "text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent",
1360
- none: "text-(--ui-text-highlighted) bg-transparent"
1361
- },
1362
- color: {
1363
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
1364
- neutral: ""
1365
- },
1366
- leading: {
1367
- true: ""
1368
- },
1369
- trailing: {
1370
- true: ""
1371
- },
1372
- loading: {
1373
- true: ""
1374
- },
1375
- highlight: {
1376
- true: ""
1377
- },
1378
- type: {
1379
- file: "file:me-1.5 file:font-medium file:text-(--ui-text-muted) file:outline-none"
1380
- }
1381
- },
1382
- compoundVariants: [...(options.theme.colors || []).map((color) => ({
1383
- color,
1384
- variant: ["outline", "subtle"],
1385
- class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-${color})`
1386
- })), ...(options.theme.colors || []).map((color) => ({
1387
- color,
1388
- highlight: true,
1389
- class: `ring ring-inset ring-(--ui-${color})`
1390
- })), {
1391
- color: "neutral",
1392
- variant: ["outline", "subtle"],
1393
- class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)"
1394
- }, {
1395
- color: "neutral",
1396
- highlight: true,
1397
- class: "ring ring-inset ring-(--ui-border-inverted)"
1398
- }, {
1399
- leading: true,
1400
- size: "xs",
1401
- class: "ps-7"
1402
- }, {
1403
- leading: true,
1404
- size: "sm",
1405
- class: "ps-8"
1406
- }, {
1407
- leading: true,
1408
- size: "md",
1409
- class: "ps-9"
1410
- }, {
1411
- leading: true,
1412
- size: "lg",
1413
- class: "ps-10"
1414
- }, {
1415
- leading: true,
1416
- size: "xl",
1417
- class: "ps-11"
1418
- }, {
1419
- trailing: true,
1420
- size: "xs",
1421
- class: "pe-7"
1422
- }, {
1423
- trailing: true,
1424
- size: "sm",
1425
- class: "pe-8"
1426
- }, {
1427
- trailing: true,
1428
- size: "md",
1429
- class: "pe-9"
1430
- }, {
1431
- trailing: true,
1432
- size: "lg",
1433
- class: "pe-10"
1434
- }, {
1435
- trailing: true,
1436
- size: "xl",
1437
- class: "pe-11"
1438
- }, {
1439
- loading: true,
1440
- leading: true,
1441
- class: {
1442
- leadingIcon: "animate-spin"
1443
- }
1444
- }, {
1445
- loading: true,
1446
- leading: false,
1447
- trailing: true,
1448
- class: {
1449
- trailingIcon: "animate-spin"
1450
- }
1451
- }],
1452
- defaultVariants: {
1453
- size: "md",
1454
- color: "primary",
1455
- variant: "outline"
1456
- }
1457
- });
1458
-
1459
- const inputMenu = (options) => {
1460
- return defu.defuFn({
1461
- slots: {
1462
- base: () => ["rounded-[calc(var(--ui-radius)*1.5)]", options.theme.transitions && "transition-colors"],
1463
- trailing: "group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75",
1464
- arrow: "fill-(--ui-border)",
1465
- content: "max-h-60 w-(--reka-popper-anchor-width) bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto",
1466
- viewport: "divide-y divide-(--ui-border) scroll-py-1",
1467
- group: "p-1 isolate",
1468
- empty: "py-2 text-center text-sm text-(--ui-text-muted)",
1469
- label: "font-semibold text-(--ui-text-highlighted)",
1470
- separator: "-mx-1 my-1 h-px bg-(--ui-border)",
1471
- item: ["group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50", options.theme.transitions && "transition-colors before:transition-colors"],
1472
- itemLeadingIcon: ["shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text)", options.theme.transitions && "transition-colors"],
1473
- itemLeadingAvatar: "shrink-0",
1474
- itemLeadingAvatarSize: "",
1475
- itemLeadingChip: "shrink-0",
1476
- itemLeadingChipSize: "",
1477
- itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
1478
- itemTrailingIcon: "shrink-0",
1479
- itemLabel: "truncate",
1480
- tagsItem: "px-1.5 py-0.5 rounded-(--ui-radius) font-medium inline-flex items-center gap-0.5 ring ring-inset ring-(--ui-border-accented) bg-(--ui-bg-elevated) text-(--ui-text) data-disabled:cursor-not-allowed data-disabled:opacity-75",
1481
- tagsItemText: "truncate",
1482
- tagsItemDelete: ["inline-flex items-center rounded-[calc(var(--ui-radius)/2)] text-(--ui-text-dimmed) hover:text-(--ui-text) hover:bg-(--ui-bg-accented)/75 disabled:pointer-events-none", options.theme.transitions && "transition-colors"],
1483
- tagsItemDeleteIcon: "",
1484
- tagsInput: ""
1485
- },
1486
- variants: {
1487
- multiple: {
1488
- true: {
1489
- root: "flex-wrap",
1490
- tagsInput: "border-0 bg-transparent placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
1491
- },
1492
- false: {
1493
- base: "w-full border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
1494
- }
1495
- },
1496
- size: {
1497
- xs: {
1498
- label: "p-1 text-[10px]/3 gap-1",
1499
- item: "p-1 text-xs gap-1",
1500
- itemLeadingIcon: "size-4",
1501
- itemLeadingAvatarSize: "3xs",
1502
- itemLeadingChip: "size-4",
1503
- itemLeadingChipSize: "sm",
1504
- itemTrailingIcon: "size-4",
1505
- tagsItem: "text-[10px]/3",
1506
- tagsItemDeleteIcon: "size-3"
1507
- },
1508
- sm: {
1509
- label: "p-1.5 text-[10px]/3 gap-1.5",
1510
- item: "p-1.5 text-xs gap-1.5",
1511
- itemLeadingIcon: "size-4",
1512
- itemLeadingAvatarSize: "3xs",
1513
- itemLeadingChip: "size-4",
1514
- itemLeadingChipSize: "sm",
1515
- itemTrailingIcon: "size-4",
1516
- tagsItem: "text-[10px]/3",
1517
- tagsItemDeleteIcon: "size-3"
1518
- },
1519
- md: {
1520
- label: "p-1.5 text-xs gap-1.5",
1521
- item: "p-1.5 text-sm gap-1.5",
1522
- itemLeadingIcon: "size-5",
1523
- itemLeadingAvatarSize: "2xs",
1524
- itemLeadingChip: "size-5",
1525
- itemLeadingChipSize: "md",
1526
- itemTrailingIcon: "size-5",
1527
- tagsItem: "text-xs",
1528
- tagsItemDeleteIcon: "size-3.5"
1529
- },
1530
- lg: {
1531
- label: "p-2 text-xs gap-2",
1532
- item: "p-2 text-sm gap-2",
1533
- itemLeadingIcon: "size-5",
1534
- itemLeadingAvatarSize: "2xs",
1535
- itemLeadingChip: "size-5",
1536
- itemLeadingChipSize: "md",
1537
- itemTrailingIcon: "size-5",
1538
- tagsItem: "text-xs",
1539
- tagsItemDeleteIcon: "size-3.5"
1540
- },
1541
- xl: {
1542
- label: "p-2 text-sm gap-2",
1543
- item: "p-2 text-base gap-2",
1544
- itemLeadingIcon: "size-6",
1545
- itemLeadingAvatarSize: "xs",
1546
- itemLeadingChip: "size-6",
1547
- itemLeadingChipSize: "lg",
1548
- itemTrailingIcon: "size-6",
1549
- tagsItem: "text-sm",
1550
- tagsItemDeleteIcon: "size-4"
1551
- }
1552
- }
1553
- },
1554
- compoundVariants: [...(options.theme.colors || []).map((color) => ({
1555
- color,
1556
- multiple: true,
1557
- variant: ["outline", "subtle"],
1558
- class: `has-focus-visible:ring-2 has-focus-visible:ring-(--ui-${color})`
1559
- })), {
1560
- color: "neutral",
1561
- multiple: true,
1562
- variant: ["outline", "subtle"],
1563
- class: "has-focus-visible:ring-2 has-focus-visible:ring-(--ui-border-inverted)"
1564
- }]
1565
- }, input(options));
1566
- };
1567
-
1568
- const inputNumber = (options) => {
1569
- const input$1 = input(options);
1570
- return {
1571
- slots: {
1572
- root: "relative inline-flex items-center",
1573
- base: ["w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
1574
- increment: "absolute flex items-center",
1575
- decrement: "absolute flex items-center"
1576
- },
1577
- variants: {
1578
- color: {
1579
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
1580
- neutral: ""
1581
- },
1582
- size: {
1583
- xs: "px-2 py-1 text-xs gap-1",
1584
- sm: "px-2.5 py-1.5 text-xs gap-1.5",
1585
- md: "px-2.5 py-1.5 text-sm gap-1.5",
1586
- lg: "px-3 py-2 text-sm gap-2",
1587
- xl: "px-3 py-2 text-base gap-2"
1588
- },
1589
- variant: {
1590
- ...input$1.variants.variant
1591
- },
1592
- disabled: {
1593
- true: {
1594
- increment: "opacity-75 cursor-not-allowed",
1595
- decrement: "opacity-75 cursor-not-allowed"
1596
- }
1597
- },
1598
- orientation: {
1599
- horizontal: {
1600
- base: "text-center",
1601
- increment: "inset-y-0 end-0 pe-1",
1602
- decrement: "inset-y-0 start-0 ps-1"
1603
- },
1604
- vertical: {
1605
- increment: "top-0 end-0 pe-1 [&>button]:py-0 scale-80",
1606
- decrement: "bottom-0 end-0 pe-1 [&>button]:py-0 scale-80"
1607
- }
1608
- },
1609
- highlight: {
1610
- true: ""
1611
- }
1612
- },
1613
- compoundVariants: [...(options.theme.colors || []).map((color) => ({
1614
- color,
1615
- variant: ["outline", "subtle"],
1616
- class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-${color})`
1617
- })), ...(options.theme.colors || []).map((color) => ({
1618
- color,
1619
- highlight: true,
1620
- class: `ring ring-inset ring-(--ui-${color})`
1621
- })), {
1622
- color: "neutral",
1623
- variant: ["outline", "subtle"],
1624
- class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)"
1625
- }, {
1626
- color: "neutral",
1627
- highlight: true,
1628
- class: "ring ring-inset ring-(--ui-border-inverted)"
1629
- }, {
1630
- orientation: "horizontal",
1631
- size: "xs",
1632
- class: "px-7"
1633
- }, {
1634
- orientation: "horizontal",
1635
- size: "sm",
1636
- class: "px-8"
1637
- }, {
1638
- orientation: "horizontal",
1639
- size: "md",
1640
- class: "px-9"
1641
- }, {
1642
- orientation: "horizontal",
1643
- size: "lg",
1644
- class: "px-10"
1645
- }, {
1646
- orientation: "horizontal",
1647
- size: "xl",
1648
- class: "px-11"
1649
- }, {
1650
- orientation: "vertical",
1651
- size: "xs",
1652
- class: "pe-7"
1653
- }, {
1654
- orientation: "vertical",
1655
- size: "sm",
1656
- class: "pe-8"
1657
- }, {
1658
- orientation: "vertical",
1659
- size: "md",
1660
- class: "pe-9"
1661
- }, {
1662
- orientation: "vertical",
1663
- size: "lg",
1664
- class: "pe-10"
1665
- }, {
1666
- orientation: "vertical",
1667
- size: "xl",
1668
- class: "pe-11"
1669
- }],
1670
- defaultVariants: {
1671
- size: "md",
1672
- color: "primary",
1673
- variant: "outline"
1674
- }
1675
- };
1676
- };
1677
-
1678
- const kbd = {
1679
- base: "inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans",
1680
- variants: {
1681
- variant: {
1682
- solid: "bg-(--ui-bg-inverted) text-(--ui-bg)",
1683
- outline: "bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented)",
1684
- subtle: "bg-(--ui-bg-elevated) text-(--ui-text) ring ring-inset ring-(--ui-border-accented)"
1685
- },
1686
- size: {
1687
- sm: "h-4 min-w-[16px] text-[10px]",
1688
- md: "h-5 min-w-[20px] text-[11px]",
1689
- lg: "h-6 min-w-[24px] text-[12px]"
1690
- }
1691
- },
1692
- defaultVariants: {
1693
- variant: "outline",
1694
- size: "md"
1695
- }
1696
- };
1697
-
1698
- const link = (options) => ({
1699
- base: "focus-visible:outline-(--ui-primary)",
1700
- variants: {
1701
- active: {
1702
- true: "text-(--ui-primary)",
1703
- false: ["text-(--ui-text-muted) hover:text-(--ui-text)", options.theme.transitions && "transition-colors"]
1704
- },
1705
- disabled: {
1706
- true: "cursor-not-allowed opacity-75"
1707
- }
1708
- }
1709
- });
1710
-
1711
- const modal = {
1712
- slots: {
1713
- overlay: "fixed inset-0 bg-(--ui-bg-elevated)/75",
1714
- content: "fixed bg-(--ui-bg) divide-y divide-(--ui-border) flex flex-col focus:outline-none",
1715
- header: "flex items-center gap-1.5 p-4 sm:px-6 min-h-16",
1716
- wrapper: "",
1717
- body: "flex-1 overflow-y-auto p-4 sm:p-6",
1718
- footer: "flex items-center gap-1.5 p-4 sm:px-6",
1719
- title: "text-(--ui-text-highlighted) font-semibold",
1720
- description: "mt-1 text-(--ui-text-muted) text-sm",
1721
- close: "absolute top-4 end-4"
1722
- },
1723
- variants: {
1724
- transition: {
1725
- true: {
1726
- overlay: "data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]",
1727
- content: "data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in]"
1728
- }
1729
- },
1730
- fullscreen: {
1731
- true: {
1732
- content: "inset-0"
1733
- },
1734
- false: {
1735
- content: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-(--ui-border)"
1736
- }
1737
- }
1738
- }
1739
- };
1740
-
1741
- const navigationMenu = (options) => ({
1742
- slots: {
1743
- root: "relative flex gap-1.5 [&>div]:min-w-0",
1744
- list: "isolate min-w-0",
1745
- label: "w-full flex items-center gap-1.5 font-semibold text-xs/5 text-(--ui-text-highlighted) px-2.5 py-1.5",
1746
- item: "min-w-0",
1747
- link: "group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
1748
- linkLeadingIcon: "shrink-0 size-5",
1749
- linkLeadingAvatar: "shrink-0",
1750
- linkLeadingAvatarSize: "2xs",
1751
- linkTrailing: "ms-auto inline-flex gap-1.5 items-center",
1752
- linkTrailingBadge: "shrink-0",
1753
- linkTrailingBadgeSize: "sm",
1754
- linkTrailingIcon: "size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
1755
- linkLabel: "truncate",
1756
- linkLabelExternalIcon: "inline-block size-3 align-top text-(--ui-text-dimmed)",
1757
- childList: "",
1758
- childItem: "",
1759
- childLink: "group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start",
1760
- childLinkWrapper: "flex flex-col items-start",
1761
- childLinkIcon: "size-5 shrink-0",
1762
- childLinkLabel: "font-semibold text-sm relative inline-flex",
1763
- childLinkLabelExternalIcon: "inline-block size-3 align-top text-(--ui-text-dimmed)",
1764
- childLinkDescription: "text-sm text-(--ui-text-muted)",
1765
- separator: "px-2 h-px bg-(--ui-border)",
1766
- viewportWrapper: "absolute top-full left-0 flex w-full",
1767
- viewport: "relative overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
1768
- content: "absolute top-0 left-0 w-full",
1769
- indicator: "absolute data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-[1] w-(--reka-navigation-menu-indicator-size) translate-x-(--reka-navigation-menu-indicator-position) flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200",
1770
- arrow: "relative top-[50%] size-2.5 rotate-45 border border-(--ui-border) bg-(--ui-bg) z-[1] rounded-[calc(var(--ui-radius)/2)]"
1771
- },
1772
- variants: {
1773
- color: {
1774
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
1775
- link: `focus-visible:before:ring-(--ui-${color})`,
1776
- childLink: `focus-visible:outline-(--ui-${color})`
1777
- }])),
1778
- neutral: {
1779
- link: "focus-visible:before:ring-(--ui-border-inverted)",
1780
- childLink: "focus-visible:outline-(--ui-border-inverted)"
1781
- }
1782
- },
1783
- highlightColor: {
1784
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
1785
- neutral: ""
1786
- },
1787
- variant: {
1788
- pill: "",
1789
- link: ""
1790
- },
1791
- orientation: {
1792
- horizontal: {
1793
- root: "items-center justify-between",
1794
- list: "flex items-center",
1795
- item: "py-2",
1796
- link: "px-2.5 py-1.5 before:inset-x-px before:inset-y-0",
1797
- childList: "grid p-2"
1798
- },
1799
- vertical: {
1800
- root: "flex-col",
1801
- link: "flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0"
1802
- }
1803
- },
1804
- contentOrientation: {
1805
- horizontal: {
1806
- viewport: "",
1807
- viewportWrapper: "justify-center",
1808
- content: "data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]"
1809
- },
1810
- vertical: {
1811
- viewport: "sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)",
1812
- content: ""
1813
- }
1814
- },
1815
- active: {
1816
- true: {
1817
- childLink: "bg-(--ui-bg-elevated) text-(--ui-text-highlighted)",
1818
- childLinkIcon: "text-(--ui-text)"
1819
- },
1820
- false: {
1821
- link: "text-(--ui-text-muted)",
1822
- linkLeadingIcon: "text-(--ui-text-dimmed)",
1823
- childLink: ["hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted)", options.theme.transitions && "transition-colors"],
1824
- childLinkIcon: ["text-(--ui-text-dimmed) group-hover:text-(--ui-text)", options.theme.transitions && "transition-colors"]
1825
- }
1826
- },
1827
- disabled: {
1828
- true: {
1829
- link: "cursor-not-allowed opacity-75"
1830
- }
1831
- },
1832
- highlight: {
1833
- true: ""
1834
- },
1835
- level: {
1836
- true: ""
1837
- },
1838
- collapsed: {
1839
- true: ""
1840
- }
1841
- },
1842
- compoundVariants: [{
1843
- orientation: "horizontal",
1844
- contentOrientation: "horizontal",
1845
- class: {
1846
- childList: "grid-cols-2 gap-2"
1847
- }
1848
- }, {
1849
- orientation: "horizontal",
1850
- contentOrientation: "vertical",
1851
- class: {
1852
- childList: "gap-1",
1853
- content: "w-60"
1854
- }
1855
- }, {
1856
- orientation: "horizontal",
1857
- highlight: true,
1858
- class: {
1859
- link: ["after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full", options.theme.transitions && "after:transition-colors"]
1860
- }
1861
- }, {
1862
- orientation: "vertical",
1863
- highlight: true,
1864
- level: true,
1865
- class: {
1866
- link: ["after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full", options.theme.transitions && "after:transition-colors"]
1867
- }
1868
- }, {
1869
- disabled: false,
1870
- active: false,
1871
- variant: "pill",
1872
- class: {
1873
- link: ["hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50", options.theme.transitions && "transition-colors before:transition-colors"],
1874
- linkLeadingIcon: ["group-hover:text-(--ui-text)", options.theme.transitions && "transition-colors"]
1875
- }
1876
- }, {
1877
- disabled: false,
1878
- active: false,
1879
- variant: "pill",
1880
- orientation: "horizontal",
1881
- class: {
1882
- link: "data-[state=open]:text-(--ui-text-highlighted)",
1883
- linkLeadingIcon: "group-data-[state=open]:text-(--ui-text)"
1884
- }
1885
- }, {
1886
- disabled: false,
1887
- variant: "pill",
1888
- highlight: true,
1889
- orientation: "horizontal",
1890
- class: {
1891
- link: "data-[state=open]:before:bg-(--ui-bg-elevated)/50"
1892
- }
1893
- }, {
1894
- disabled: false,
1895
- variant: "pill",
1896
- highlight: false,
1897
- active: false,
1898
- orientation: "horizontal",
1899
- class: {
1900
- link: "data-[state=open]:before:bg-(--ui-bg-elevated)/50"
1901
- }
1902
- }, ...(options.theme.colors || []).map((color) => ({
1903
- color,
1904
- variant: "pill",
1905
- active: true,
1906
- class: {
1907
- link: `text-(--ui-${color})`,
1908
- linkLeadingIcon: `text-(--ui-${color}) group-data-[state=open]:text-(--ui-${color})`
1909
- }
1910
- })), {
1911
- color: "neutral",
1912
- variant: "pill",
1913
- active: true,
1914
- class: {
1915
- link: "text-(--ui-text-highlighted)",
1916
- linkLeadingIcon: "text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)"
1917
- }
1918
- }, {
1919
- variant: "pill",
1920
- active: true,
1921
- highlight: false,
1922
- class: {
1923
- link: "before:bg-(--ui-bg-elevated)"
1924
- }
1925
- }, {
1926
- variant: "pill",
1927
- active: true,
1928
- highlight: true,
1929
- class: {
1930
- link: ["hover:before:bg-(--ui-bg-elevated)/50", options.theme.transitions && "before:transition-colors"]
1931
- }
1932
- }, {
1933
- disabled: false,
1934
- active: false,
1935
- variant: "link",
1936
- class: {
1937
- link: ["hover:text-(--ui-text-highlighted)", options.theme.transitions && "transition-colors"],
1938
- linkLeadingIcon: ["group-hover:text-(--ui-text)", options.theme.transitions && "transition-colors"]
1939
- }
1940
- }, {
1941
- disabled: false,
1942
- active: false,
1943
- variant: "link",
1944
- orientation: "horizontal",
1945
- class: {
1946
- link: "data-[state=open]:text-(--ui-text-highlighted)",
1947
- linkLeadingIcon: "group-data-[state=open]:text-(--ui-text)"
1948
- }
1949
- }, ...(options.theme.colors || []).map((color) => ({
1950
- color,
1951
- variant: "link",
1952
- active: true,
1953
- class: {
1954
- link: `text-(--ui-${color})`,
1955
- linkLeadingIcon: `text-(--ui-${color}) group-data-[state=open]:text-(--ui-${color})`
1956
- }
1957
- })), {
1958
- color: "neutral",
1959
- variant: "link",
1960
- active: true,
1961
- class: {
1962
- link: "text-(--ui-text-highlighted)",
1963
- linkLeadingIcon: "text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)"
1964
- }
1965
- }, ...(options.theme.colors || []).map((highlightColor) => ({
1966
- highlightColor,
1967
- highlight: true,
1968
- level: true,
1969
- active: true,
1970
- class: {
1971
- link: `after:bg-(--ui-${highlightColor})`
1972
- }
1973
- })), {
1974
- highlightColor: "neutral",
1975
- highlight: true,
1976
- level: true,
1977
- active: true,
1978
- class: {
1979
- link: "after:bg-(--ui-bg-inverted)"
1980
- }
1981
- }, {
1982
- orientation: "vertical",
1983
- collapsed: false,
1984
- class: {
1985
- childList: "ms-5 border-s border-(--ui-border)",
1986
- childItem: "ps-1.5 -ms-px"
1987
- }
1988
- }, {
1989
- orientation: "vertical",
1990
- collapsed: true,
1991
- class: {
1992
- link: "px-1.5"
1993
- }
1994
- }],
1995
- defaultVariants: {
1996
- color: "primary",
1997
- highlightColor: "primary",
1998
- variant: "pill"
1999
- }
2000
- });
2001
-
2002
- const pagination = {
2003
- slots: {
2004
- root: "",
2005
- list: "flex items-center gap-1",
2006
- ellipsis: "pointer-events-none",
2007
- label: "min-w-5 text-center",
2008
- first: "",
2009
- prev: "",
2010
- item: "",
2011
- next: "",
2012
- last: ""
2013
- }
2014
- };
2015
-
2016
- const pinInput = (options) => ({
2017
- slots: {
2018
- root: "relative inline-flex items-center gap-1.5",
2019
- base: ["rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"]
2020
- },
2021
- variants: {
2022
- size: {
2023
- xs: {
2024
- base: "size-6 text-xs"
2025
- },
2026
- sm: {
2027
- base: "size-7 text-xs"
2028
- },
2029
- md: {
2030
- base: "size-8 text-sm"
2031
- },
2032
- lg: {
2033
- base: "size-9 text-sm"
2034
- },
2035
- xl: {
2036
- base: "size-10 text-base"
2037
- }
2038
- },
2039
- variant: {
2040
- outline: "text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented)",
2041
- soft: "text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50",
2042
- subtle: "text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented)",
2043
- ghost: "text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent",
2044
- none: "text-(--ui-text-highlighted) bg-transparent"
2045
- },
2046
- color: {
2047
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
2048
- neutral: ""
2049
- },
2050
- highlight: {
2051
- true: ""
2052
- }
2053
- },
2054
- compoundVariants: [...(options.theme.colors || []).map((color) => ({
2055
- color,
2056
- variant: ["outline", "subtle"],
2057
- class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-${color})`
2058
- })), ...(options.theme.colors || []).map((color) => ({
2059
- color,
2060
- highlight: true,
2061
- class: `ring ring-inset ring-(--ui-${color})`
2062
- })), {
2063
- color: "neutral",
2064
- variant: ["outline", "subtle"],
2065
- class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)"
2066
- }, {
2067
- color: "neutral",
2068
- highlight: true,
2069
- class: "ring ring-inset ring-(--ui-border-inverted)"
2070
- }],
2071
- defaultVariants: {
2072
- size: "md",
2073
- color: "primary",
2074
- variant: "outline"
2075
- }
2076
- });
2077
-
2078
- const popover = {
2079
- slots: {
2080
- content: "bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto",
2081
- arrow: "fill-(--ui-border)"
2082
- }
2083
- };
2084
-
2085
- const progress = (options) => ({
2086
- slots: {
2087
- root: "gap-2",
2088
- base: "relative overflow-hidden rounded-full bg-(--ui-bg-accented)",
2089
- indicator: "rounded-full size-full transition-transform duration-200 ease-out",
2090
- status: "flex justify-end text-(--ui-text-dimmed) transition-[width] duration-200",
2091
- steps: "grid items-end",
2092
- step: "truncate text-end row-start-1 col-start-1 transition-opacity"
2093
- },
2094
- variants: {
2095
- animation: {
2096
- "carousel": "",
2097
- "carousel-inverse": "",
2098
- "swing": "",
2099
- "elastic": ""
2100
- },
2101
- color: {
2102
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
2103
- indicator: `bg-(--ui-${color})`,
2104
- steps: `text-(--ui-${color})`
2105
- }])),
2106
- neutral: {
2107
- indicator: "bg-(--ui-bg-inverted)",
2108
- steps: "text-(--ui-bg)"
2109
- }
2110
- },
2111
- size: {
2112
- "2xs": {
2113
- status: "text-xs",
2114
- steps: "text-xs"
2115
- },
2116
- "xs": {
2117
- status: "text-xs",
2118
- steps: "text-xs"
2119
- },
2120
- "sm": {
2121
- status: "text-sm",
2122
- steps: "text-sm"
2123
- },
2124
- "md": {
2125
- status: "text-sm",
2126
- steps: "text-sm"
2127
- },
2128
- "lg": {
2129
- status: "text-sm",
2130
- steps: "text-sm"
2131
- },
2132
- "xl": {
2133
- status: "text-base",
2134
- steps: "text-base"
2135
- },
2136
- "2xl": {
2137
- status: "text-base",
2138
- steps: "text-base"
2139
- }
2140
- },
2141
- step: {
2142
- active: {
2143
- step: "opacity-100"
2144
- },
2145
- first: {
2146
- step: "opacity-100 text-(--ui-text-muted)"
2147
- },
2148
- other: {
2149
- step: "opacity-0"
2150
- },
2151
- last: {
2152
- step: ""
2153
- }
2154
- },
2155
- orientation: {
2156
- horizontal: {
2157
- root: "w-full flex flex-col",
2158
- base: "w-full",
2159
- status: "flex-row"
2160
- },
2161
- vertical: {
2162
- root: "h-full flex flex-row-reverse",
2163
- base: "h-full",
2164
- status: "flex-col"
2165
- }
2166
- },
2167
- inverted: {
2168
- true: {
2169
- status: "self-end"
2170
- }
2171
- }
2172
- },
2173
- compoundVariants: [{
2174
- inverted: true,
2175
- orientation: "horizontal",
2176
- class: {
2177
- step: "text-start",
2178
- status: "flex-row-reverse"
2179
- }
2180
- }, {
2181
- inverted: true,
2182
- orientation: "vertical",
2183
- class: {
2184
- steps: "items-start",
2185
- status: "flex-col-reverse"
2186
- }
2187
- }, {
2188
- orientation: "horizontal",
2189
- size: "2xs",
2190
- class: "h-px"
2191
- }, {
2192
- orientation: "horizontal",
2193
- size: "xs",
2194
- class: "h-0.5"
2195
- }, {
2196
- orientation: "horizontal",
2197
- size: "sm",
2198
- class: "h-1"
2199
- }, {
2200
- orientation: "horizontal",
2201
- size: "md",
2202
- class: "h-2"
2203
- }, {
2204
- orientation: "horizontal",
2205
- size: "lg",
2206
- class: "h-3"
2207
- }, {
2208
- orientation: "horizontal",
2209
- size: "xl",
2210
- class: "h-4"
2211
- }, {
2212
- orientation: "horizontal",
2213
- size: "2xl",
2214
- class: "h-5"
2215
- }, {
2216
- orientation: "vertical",
2217
- size: "2xs",
2218
- class: "w-px"
2219
- }, {
2220
- orientation: "vertical",
2221
- size: "xs",
2222
- class: "w-0.5"
2223
- }, {
2224
- orientation: "vertical",
2225
- size: "sm",
2226
- class: "w-1"
2227
- }, {
2228
- orientation: "vertical",
2229
- size: "md",
2230
- class: "w-2"
2231
- }, {
2232
- orientation: "vertical",
2233
- size: "lg",
2234
- class: "w-3"
2235
- }, {
2236
- orientation: "vertical",
2237
- size: "xl",
2238
- class: "w-4"
2239
- }, {
2240
- orientation: "vertical",
2241
- size: "2xl",
2242
- class: "w-5"
2243
- }, {
2244
- orientation: "horizontal",
2245
- animation: "carousel",
2246
- class: {
2247
- indicator: "data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"
2248
- }
2249
- }, {
2250
- orientation: "vertical",
2251
- animation: "carousel",
2252
- class: {
2253
- indicator: "data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"
2254
- }
2255
- }, {
2256
- orientation: "horizontal",
2257
- animation: "carousel-inverse",
2258
- class: {
2259
- indicator: "data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"
2260
- }
2261
- }, {
2262
- orientation: "vertical",
2263
- animation: "carousel-inverse",
2264
- class: {
2265
- indicator: "data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_ease-in-out_infinite]"
2266
- }
2267
- }, {
2268
- orientation: "horizontal",
2269
- animation: "swing",
2270
- class: {
2271
- indicator: "data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"
2272
- }
2273
- }, {
2274
- orientation: "vertical",
2275
- animation: "swing",
2276
- class: {
2277
- indicator: "data-[state=indeterminate]:animate-[swing-vertical_2s_ease-in-out_infinite]"
2278
- }
2279
- }, {
2280
- orientation: "horizontal",
2281
- animation: "elastic",
2282
- class: {
2283
- indicator: "data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"
2284
- }
2285
- }, {
2286
- orientation: "vertical",
2287
- animation: "elastic",
2288
- class: {
2289
- indicator: "data-[state=indeterminate]:animate-[elastic-vertical_2s_ease-in-out_infinite]"
2290
- }
2291
- }],
2292
- defaultVariants: {
2293
- animation: "carousel",
2294
- color: "primary",
2295
- size: "md"
2296
- }
2297
- });
2298
-
2299
- const radioGroup = (options) => ({
2300
- slots: {
2301
- root: "relative",
2302
- fieldset: "flex",
2303
- legend: "mb-1 block font-medium text-(--ui-text)",
2304
- item: "flex items-start",
2305
- base: "rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2",
2306
- indicator: "flex items-center justify-center size-full rounded-full after:bg-(--ui-bg) after:rounded-full",
2307
- container: "flex items-center",
2308
- wrapper: "ms-2",
2309
- label: "block font-medium text-(--ui-text)",
2310
- description: "text-(--ui-text-muted)"
2311
- },
2312
- variants: {
2313
- color: {
2314
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
2315
- base: `focus-visible:outline-(--ui-${color})`,
2316
- indicator: `bg-(--ui-${color})`
2317
- }])),
2318
- neutral: {
2319
- base: "focus-visible:outline-(--ui-border-inverted)",
2320
- indicator: "bg-(--ui-bg-inverted)"
2321
- }
2322
- },
2323
- orientation: {
2324
- horizontal: {
2325
- fieldset: "flex-row",
2326
- wrapper: "me-2"
2327
- },
2328
- vertical: {
2329
- fieldset: "flex-col"
2330
- }
2331
- },
2332
- size: {
2333
- xs: {
2334
- fieldset: "gap-0.5",
2335
- legend: "text-xs",
2336
- base: "size-3",
2337
- item: "text-xs",
2338
- container: "h-4",
2339
- indicator: "after:size-1"
2340
- },
2341
- sm: {
2342
- fieldset: "gap-0.5",
2343
- legend: "text-xs",
2344
- base: "size-3.5",
2345
- item: "text-xs",
2346
- container: "h-4",
2347
- indicator: "after:size-1"
2348
- },
2349
- md: {
2350
- fieldset: "gap-1",
2351
- legend: "text-sm",
2352
- base: "size-4",
2353
- item: "text-sm",
2354
- container: "h-5",
2355
- indicator: "after:size-1.5"
2356
- },
2357
- lg: {
2358
- fieldset: "gap-1",
2359
- legend: "text-sm",
2360
- base: "size-4.5",
2361
- item: "text-sm",
2362
- container: "h-5",
2363
- indicator: "after:size-1.5"
2364
- },
2365
- xl: {
2366
- fieldset: "gap-1.5",
2367
- legend: "text-base",
2368
- base: "size-5",
2369
- item: "text-base",
2370
- container: "h-6",
2371
- indicator: "after:size-2"
2372
- }
2373
- },
2374
- disabled: {
2375
- true: {
2376
- base: "cursor-not-allowed opacity-75",
2377
- label: "cursor-not-allowed opacity-75"
2378
- }
2379
- },
2380
- required: {
2381
- true: {
2382
- legend: "after:content-['*'] after:ms-0.5 after:text-(--ui-error)"
2383
- }
2384
- }
2385
- },
2386
- defaultVariants: {
2387
- size: "md",
2388
- color: "primary"
2389
- }
2390
- });
2391
-
2392
- const select = (options) => {
2393
- return defu.defuFn({
2394
- slots: {
2395
- root: () => void 0,
2396
- base: () => ["relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
2397
- value: "truncate pointer-events-none",
2398
- placeholder: "truncate text-(--ui-text-dimmed)",
2399
- arrow: "fill-(--ui-border)",
2400
- content: "max-h-60 w-(--reka-popper-anchor-width) bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto",
2401
- viewport: "divide-y divide-(--ui-border) scroll-py-1",
2402
- group: "p-1 isolate",
2403
- empty: "py-2 text-center text-sm text-(--ui-text-muted)",
2404
- label: "font-semibold text-(--ui-text-highlighted)",
2405
- separator: "-mx-1 my-1 h-px bg-(--ui-border)",
2406
- item: ["group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50", options.theme.transitions && "transition-colors before:transition-colors"],
2407
- itemLeadingIcon: ["shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text)", options.theme.transitions && "transition-colors"],
2408
- itemLeadingAvatar: "shrink-0",
2409
- itemLeadingAvatarSize: "",
2410
- itemLeadingChip: "shrink-0",
2411
- itemLeadingChipSize: "",
2412
- itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
2413
- itemTrailingIcon: "shrink-0",
2414
- itemLabel: "truncate"
2415
- },
2416
- variants: {
2417
- ...buttonGroupVariant,
2418
- size: {
2419
- xs: {
2420
- label: "p-1 text-[10px]/3 gap-1",
2421
- item: "p-1 text-xs gap-1",
2422
- itemLeadingIcon: "size-4",
2423
- itemLeadingAvatarSize: "3xs",
2424
- itemLeadingChip: "size-4",
2425
- itemLeadingChipSize: "sm",
2426
- itemTrailingIcon: "size-4"
2427
- },
2428
- sm: {
2429
- label: "p-1.5 text-[10px]/3 gap-1.5",
2430
- item: "p-1.5 text-xs gap-1.5",
2431
- itemLeadingIcon: "size-4",
2432
- itemLeadingAvatarSize: "3xs",
2433
- itemLeadingChip: "size-4",
2434
- itemLeadingChipSize: "sm",
2435
- itemTrailingIcon: "size-4"
2436
- },
2437
- md: {
2438
- label: "p-1.5 text-xs gap-1.5",
2439
- item: "p-1.5 text-sm gap-1.5",
2440
- itemLeadingIcon: "size-5",
2441
- itemLeadingAvatarSize: "2xs",
2442
- itemLeadingChip: "size-5",
2443
- itemLeadingChipSize: "md",
2444
- itemTrailingIcon: "size-5"
2445
- },
2446
- lg: {
2447
- label: "p-2 text-xs gap-2",
2448
- item: "p-2 text-sm gap-2",
2449
- itemLeadingIcon: "size-5",
2450
- itemLeadingAvatarSize: "2xs",
2451
- itemLeadingChip: "size-5",
2452
- itemLeadingChipSize: "md",
2453
- itemTrailingIcon: "size-5"
2454
- },
2455
- xl: {
2456
- label: "p-2 text-sm gap-2",
2457
- item: "p-2 text-base gap-2",
2458
- itemLeadingIcon: "size-6",
2459
- itemLeadingAvatarSize: "xs",
2460
- itemLeadingChip: "size-6",
2461
- itemLeadingChipSize: "lg",
2462
- itemTrailingIcon: "size-6"
2463
- }
2464
- }
2465
- }
2466
- }, input(options));
2467
- };
2468
-
2469
- const selectMenu = (options) => {
2470
- return defu.defu({
2471
- slots: {
2472
- input: "border-b border-(--ui-border)",
2473
- focusScope: "flex flex-col min-h-0"
2474
- }
2475
- }, select(options));
2476
- };
2477
-
2478
- const separator = (options) => ({
2479
- slots: {
2480
- root: "flex items-center align-center text-center",
2481
- border: "",
2482
- container: "font-medium text-(--ui-text) flex",
2483
- icon: "shrink-0 size-5",
2484
- avatar: "shrink-0",
2485
- avatarSize: "2xs",
2486
- label: "text-sm"
2487
- },
2488
- variants: {
2489
- color: {
2490
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, { border: `border-(--ui-${color})` }])),
2491
- neutral: { border: "border-(--ui-border)" }
2492
- },
2493
- orientation: {
2494
- horizontal: {
2495
- root: "w-full flex-row",
2496
- border: "w-full",
2497
- container: "mx-3 whitespace-nowrap"
2498
- },
2499
- vertical: {
2500
- root: "h-full flex-col",
2501
- border: "h-full",
2502
- container: "my-2"
2503
- }
2504
- },
2505
- size: {
2506
- xs: "",
2507
- sm: "",
2508
- md: "",
2509
- lg: "",
2510
- xl: ""
2511
- },
2512
- type: {
2513
- solid: {
2514
- border: "border-solid"
2515
- },
2516
- dashed: {
2517
- border: "border-dashed"
2518
- },
2519
- dotted: {
2520
- border: "border-dotted"
2521
- }
2522
- }
2523
- },
2524
- compoundVariants: [{
2525
- orientation: "horizontal",
2526
- size: "xs",
2527
- class: { border: "border-t" }
2528
- }, {
2529
- orientation: "horizontal",
2530
- size: "sm",
2531
- class: { border: "border-t-[2px]" }
2532
- }, {
2533
- orientation: "horizontal",
2534
- size: "md",
2535
- class: { border: "border-t-[3px]" }
2536
- }, {
2537
- orientation: "horizontal",
2538
- size: "lg",
2539
- class: { border: "border-t-[4px]" }
2540
- }, {
2541
- orientation: "horizontal",
2542
- size: "xl",
2543
- class: { border: "border-t-[5px]" }
2544
- }, {
2545
- orientation: "vertical",
2546
- size: "xs",
2547
- class: { border: "border-s" }
2548
- }, {
2549
- orientation: "vertical",
2550
- size: "sm",
2551
- class: { border: "border-s-[2px]" }
2552
- }, {
2553
- orientation: "vertical",
2554
- size: "md",
2555
- class: { border: "border-s-[3px]" }
2556
- }, {
2557
- orientation: "vertical",
2558
- size: "lg",
2559
- class: { border: "border-s-[4px]" }
2560
- }, {
2561
- orientation: "vertical",
2562
- size: "xl",
2563
- class: { border: "border-s-[5px]" }
2564
- }],
2565
- defaultVariants: {
2566
- color: "neutral",
2567
- size: "xs",
2568
- type: "solid"
2569
- }
2570
- });
2571
-
2572
- const skeleton = {
2573
- base: "animate-pulse rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-bg-elevated)"
2574
- };
2575
-
2576
- const slideover = {
2577
- slots: {
2578
- overlay: "fixed inset-0 bg-(--ui-bg-elevated)/75",
2579
- content: "fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--ui-border) sm:shadow-lg flex flex-col focus:outline-none",
2580
- header: "flex items-center gap-1.5 p-4 sm:px-6 min-h-16",
2581
- wrapper: "",
2582
- body: "flex-1 overflow-y-auto p-4 sm:p-6",
2583
- footer: "flex items-center gap-1.5 p-4 sm:px-6",
2584
- title: "text-(--ui-text-highlighted) font-semibold",
2585
- description: "mt-1 text-(--ui-text-muted) text-sm",
2586
- close: "absolute top-4 end-4"
2587
- },
2588
- variants: {
2589
- side: {
2590
- top: {
2591
- content: "inset-x-0 top-0 max-h-full"
2592
- },
2593
- right: {
2594
- content: "right-0 inset-y-0 w-full max-w-md"
2595
- },
2596
- bottom: {
2597
- content: "inset-x-0 bottom-0 max-h-full"
2598
- },
2599
- left: {
2600
- content: "left-0 inset-y-0 w-full max-w-md"
2601
- }
2602
- },
2603
- transition: {
2604
- true: {
2605
- overlay: "data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"
2606
- }
2607
- }
2608
- },
2609
- compoundVariants: [{
2610
- transition: true,
2611
- side: "top",
2612
- class: {
2613
- content: "data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]"
2614
- }
2615
- }, {
2616
- transition: true,
2617
- side: "right",
2618
- class: {
2619
- content: "data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]"
2620
- }
2621
- }, {
2622
- transition: true,
2623
- side: "bottom",
2624
- class: {
2625
- content: "data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]"
2626
- }
2627
- }, {
2628
- transition: true,
2629
- side: "left",
2630
- class: {
2631
- content: "data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]"
2632
- }
2633
- }]
2634
- };
2635
-
2636
- const slider = (options) => ({
2637
- slots: {
2638
- root: "relative flex items-center select-none touch-none",
2639
- track: "relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow",
2640
- range: "absolute rounded-full",
2641
- thumb: "rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2"
2642
- },
2643
- variants: {
2644
- color: {
2645
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
2646
- range: `bg-(--ui-${color})`,
2647
- thumb: `ring-(--ui-${color}) focus-visible:outline-(--ui-${color})/50`
2648
- }])),
2649
- neutral: {
2650
- range: "bg-(--ui-bg-inverted)",
2651
- thumb: "ring-(--ui-border-inverted) focus-visible:outline-(--ui-border-inverted)/50"
2652
- }
2653
- },
2654
- size: {
2655
- xs: {
2656
- thumb: "size-3"
2657
- },
2658
- sm: {
2659
- thumb: "size-3.5"
2660
- },
2661
- md: {
2662
- thumb: "size-4"
2663
- },
2664
- lg: {
2665
- thumb: "size-4.5"
2666
- },
2667
- xl: {
2668
- thumb: "size-5"
2669
- }
2670
- },
2671
- orientation: {
2672
- horizontal: {
2673
- root: "w-full",
2674
- range: "h-full"
2675
- },
2676
- vertical: {
2677
- root: "flex-col h-full",
2678
- range: "w-full"
2679
- }
2680
- },
2681
- disabled: {
2682
- true: {
2683
- root: "opacity-75 cursor-not-allowed"
2684
- }
2685
- }
2686
- },
2687
- compoundVariants: [{
2688
- orientation: "horizontal",
2689
- size: "xs",
2690
- class: {
2691
- track: "h-[6px]"
2692
- }
2693
- }, {
2694
- orientation: "horizontal",
2695
- size: "sm",
2696
- class: {
2697
- track: "h-[7px]"
2698
- }
2699
- }, {
2700
- orientation: "horizontal",
2701
- size: "md",
2702
- class: {
2703
- track: "h-[8px]"
2704
- }
2705
- }, {
2706
- orientation: "horizontal",
2707
- size: "lg",
2708
- class: {
2709
- track: "h-[9px]"
2710
- }
2711
- }, {
2712
- orientation: "horizontal",
2713
- size: "xl",
2714
- class: {
2715
- track: "h-[10px]"
2716
- }
2717
- }, {
2718
- orientation: "vertical",
2719
- size: "xs",
2720
- class: {
2721
- track: "w-[6px]"
2722
- }
2723
- }, {
2724
- orientation: "vertical",
2725
- size: "sm",
2726
- class: {
2727
- track: "w-[7px]"
2728
- }
2729
- }, {
2730
- orientation: "vertical",
2731
- size: "md",
2732
- class: {
2733
- track: "w-[8px]"
2734
- }
2735
- }, {
2736
- orientation: "vertical",
2737
- size: "lg",
2738
- class: {
2739
- track: "w-[9px]"
2740
- }
2741
- }, {
2742
- orientation: "vertical",
2743
- size: "xl",
2744
- class: {
2745
- track: "w-[10px]"
2746
- }
2747
- }],
2748
- defaultVariants: {
2749
- size: "md",
2750
- color: "primary"
2751
- }
2752
- });
2753
-
2754
- const stepper = (options) => ({
2755
- slots: {
2756
- root: "flex gap-4",
2757
- header: "flex",
2758
- item: "group text-center relative w-full",
2759
- container: "relative",
2760
- trigger: "rounded-full font-medium text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-(--ui-bg) group-data-[state=active]:text-(--ui-bg) text-(--ui-text-muted) bg-(--ui-bg-elevated) focus-visible:outline-2 focus-visible:outline-offset-2",
2761
- indicator: "flex items-center justify-center size-full",
2762
- icon: "shrink-0",
2763
- separator: "absolute rounded-full group-data-[disabled]:opacity-75 bg-(--ui-border-accented)",
2764
- wrapper: "",
2765
- title: "font-medium text-(--ui-text)",
2766
- description: "text-(--ui-text-muted) text-wrap",
2767
- content: "size-full"
2768
- },
2769
- variants: {
2770
- orientation: {
2771
- horizontal: {
2772
- root: "flex-col",
2773
- container: "flex justify-center",
2774
- separator: "top-[calc(50%-2px)] h-0.5",
2775
- wrapper: "mt-1"
2776
- },
2777
- vertical: {
2778
- header: "flex-col gap-4",
2779
- item: "flex text-start",
2780
- separator: "start-[calc(50%-1px)] -bottom-[10px] w-0.5"
2781
- }
2782
- },
2783
- size: {
2784
- xs: {
2785
- trigger: "size-6 text-xs",
2786
- icon: "size-3",
2787
- title: "text-xs",
2788
- description: "text-xs",
2789
- wrapper: "mt-1.5"
2790
- },
2791
- sm: {
2792
- trigger: "size-8 text-sm",
2793
- icon: "size-4",
2794
- title: "text-xs",
2795
- description: "text-xs",
2796
- wrapper: "mt-2"
2797
- },
2798
- md: {
2799
- trigger: "size-10 text-base",
2800
- icon: "size-5",
2801
- title: "text-sm",
2802
- description: "text-sm",
2803
- wrapper: "mt-2.5"
2804
- },
2805
- lg: {
2806
- trigger: "size-12 text-lg",
2807
- icon: "size-6",
2808
- title: "text-base",
2809
- description: "text-base",
2810
- wrapper: "mt-3"
2811
- },
2812
- xl: {
2813
- trigger: "size-14 text-xl",
2814
- icon: "size-7",
2815
- title: "text-lg",
2816
- description: "text-lg",
2817
- wrapper: "mt-3.5"
2818
- }
2819
- },
2820
- color: {
2821
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
2822
- trigger: `group-data-[state=completed]:bg-(--ui-${color}) group-data-[state=active]:bg-(--ui-${color}) focus-visible:outline-(--ui-${color})`,
2823
- separator: `group-data-[state=completed]:bg-(--ui-${color})`
2824
- }])),
2825
- neutral: {
2826
- trigger: `group-data-[state=completed]:bg-(--ui-bg-inverted) group-data-[state=active]:bg-(--ui-bg-inverted) focus-visible:outline-(--ui-border-inverted)`,
2827
- separator: `group-data-[state=completed]:bg-(--ui-bg-inverted)`
2828
- }
2829
- }
2830
- },
2831
- compoundVariants: [{
2832
- orientation: "horizontal",
2833
- size: "xs",
2834
- class: { separator: "start-[calc(50%+16px)] end-[calc(-50%+16px)]" }
2835
- }, {
2836
- orientation: "horizontal",
2837
- size: "sm",
2838
- class: { separator: "start-[calc(50%+20px)] end-[calc(-50%+20px)]" }
2839
- }, {
2840
- orientation: "horizontal",
2841
- size: "md",
2842
- class: { separator: "start-[calc(50%+28px)] end-[calc(-50%+28px)]" }
2843
- }, {
2844
- orientation: "horizontal",
2845
- size: "lg",
2846
- class: { separator: "start-[calc(50%+32px)] end-[calc(-50%+32px)]" }
2847
- }, {
2848
- orientation: "horizontal",
2849
- size: "xl",
2850
- class: { separator: "start-[calc(50%+36px)] end-[calc(-50%+36px)]" }
2851
- }, {
2852
- orientation: "vertical",
2853
- size: "xs",
2854
- class: { separator: "top-[30px]", item: "gap-1.5" }
2855
- }, {
2856
- orientation: "vertical",
2857
- size: "sm",
2858
- class: { separator: "top-[38px]", item: "gap-2" }
2859
- }, {
2860
- orientation: "vertical",
2861
- size: "md",
2862
- class: { separator: "top-[46px]", item: "gap-2.5" }
2863
- }, {
2864
- orientation: "vertical",
2865
- size: "lg",
2866
- class: { separator: "top-[54px]", item: "gap-3" }
2867
- }, {
2868
- orientation: "vertical",
2869
- size: "xl",
2870
- class: { separator: "top-[62px]", item: "gap-3.5" }
2871
- }],
2872
- defaultVariants: {
2873
- size: "md",
2874
- color: "primary"
2875
- }
2876
- });
2877
-
2878
- const _switch = (options) => ({
2879
- slots: {
2880
- root: "relative flex items-start",
2881
- base: ["inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented)", options.theme.transitions && "transition-colors duration-200"],
2882
- container: "flex items-center",
2883
- thumb: "group pointer-events-none rounded-full bg-(--ui-bg) shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center",
2884
- icon: ["absolute shrink-0 group-data-[state=unchecked]:text-(--ui-text-dimmed) opacity-0 size-10/12", options.theme.transitions && "transition-[color,opacity] duration-200"],
2885
- wrapper: "ms-2",
2886
- label: "block font-medium text-(--ui-text)",
2887
- description: "text-(--ui-text-muted)"
2888
- },
2889
- variants: {
2890
- color: {
2891
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
2892
- base: `data-[state=checked]:bg-(--ui-${color}) focus-visible:outline-(--ui-${color})`,
2893
- icon: `group-data-[state=checked]:text-(--ui-${color})`
2894
- }])),
2895
- neutral: {
2896
- base: "data-[state=checked]:bg-(--ui-bg-inverted) focus-visible:outline-(--ui-border-inverted)",
2897
- icon: "group-data-[state=checked]:text-(--ui-text-highlighted)"
2898
- }
2899
- },
2900
- size: {
2901
- xs: {
2902
- base: "w-7",
2903
- container: "h-4",
2904
- thumb: "size-3 data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3",
2905
- wrapper: "text-xs"
2906
- },
2907
- sm: {
2908
- base: "w-8",
2909
- container: "h-4",
2910
- thumb: "size-3.5 data-[state=checked]:translate-x-3.5 data-[state=checked]:rtl:-translate-x-3.5",
2911
- wrapper: "text-xs"
2912
- },
2913
- md: {
2914
- base: "w-9",
2915
- container: "h-5",
2916
- thumb: "size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4",
2917
- wrapper: "text-sm"
2918
- },
2919
- lg: {
2920
- base: "w-10",
2921
- container: "h-5",
2922
- thumb: "size-4.5 data-[state=checked]:translate-x-4.5 data-[state=checked]:rtl:-translate-x-4.5",
2923
- wrapper: "text-sm"
2924
- },
2925
- xl: {
2926
- base: "w-11",
2927
- container: "h-6",
2928
- thumb: "size-5 data-[state=checked]:translate-x-5 data-[state=checked]:rtl:-translate-x-5",
2929
- wrapper: "text-base"
2930
- }
2931
- },
2932
- checked: {
2933
- true: {
2934
- icon: "group-data-[state=checked]:opacity-100"
2935
- }
2936
- },
2937
- unchecked: {
2938
- true: {
2939
- icon: "group-data-[state=unchecked]:opacity-100"
2940
- }
2941
- },
2942
- loading: {
2943
- true: {
2944
- icon: "animate-spin"
2945
- }
2946
- },
2947
- required: {
2948
- true: {
2949
- label: "after:content-['*'] after:ms-0.5 after:text-(--ui-error)"
2950
- }
2951
- },
2952
- disabled: {
2953
- true: {
2954
- base: "cursor-not-allowed opacity-75",
2955
- label: "cursor-not-allowed opacity-75",
2956
- description: "cursor-not-allowed opacity-75"
2957
- }
2958
- }
2959
- },
2960
- defaultVariants: {
2961
- color: "primary",
2962
- size: "md"
2963
- }
2964
- });
2965
-
2966
- const table = (options) => ({
2967
- slots: {
2968
- root: "relative overflow-auto",
2969
- base: "min-w-full overflow-clip",
2970
- caption: "sr-only",
2971
- thead: "relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)",
2972
- tbody: "divide-y divide-(--ui-border) [&>tr]:data-[selectable=true]:hover:bg-(--ui-bg-elevated)/50 [&>tr]:data-[selectable=true]:focus-visible:outline-(--ui-primary)",
2973
- tr: "data-[selected=true]:bg-(--ui-bg-elevated)/50",
2974
- th: "px-4 py-3.5 text-sm text-(--ui-text-highlighted) text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0",
2975
- td: "p-4 text-sm text-(--ui-text-muted) whitespace-nowrap [&:has([role=checkbox])]:pe-0",
2976
- empty: "py-6 text-center text-sm text-(--ui-text-muted)",
2977
- loading: "py-6 text-center"
2978
- },
2979
- variants: {
2980
- pinned: {
2981
- true: {
2982
- th: "sticky bg-(--ui-bg)/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0",
2983
- td: "sticky bg-(--ui-bg)/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0"
2984
- }
2985
- },
2986
- sticky: {
2987
- true: {
2988
- thead: "sticky top-0 inset-x-0 bg-(--ui-bg)/75 z-[1] backdrop-blur"
2989
- }
2990
- },
2991
- loading: {
2992
- true: {
2993
- thead: "after:absolute after:bottom-0 after:inset-x-0 after:h-px"
2994
- }
2995
- },
2996
- loadingAnimation: {
2997
- "carousel": "",
2998
- "carousel-inverse": "",
2999
- "swing": "",
3000
- "elastic": ""
3001
- },
3002
- loadingColor: {
3003
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
3004
- neutral: ""
3005
- }
3006
- },
3007
- compoundVariants: [...(options.theme.colors || []).map((loadingColor) => ({
3008
- loading: true,
3009
- loadingColor,
3010
- class: {
3011
- thead: `after:bg-(--ui-${loadingColor})`
3012
- }
3013
- })), {
3014
- loading: true,
3015
- loadingColor: "neutral",
3016
- class: {
3017
- thead: "after:bg-(--ui-bg-inverted)"
3018
- }
3019
- }, {
3020
- loading: true,
3021
- loadingAnimation: "carousel",
3022
- class: {
3023
- thead: "after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]"
3024
- }
3025
- }, {
3026
- loading: true,
3027
- loadingAnimation: "carousel-inverse",
3028
- class: {
3029
- thead: "after:animate-[carousel-inverse_2s_ease-in-out_infinite] rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"
3030
- }
3031
- }, {
3032
- loading: true,
3033
- loadingAnimation: "swing",
3034
- class: {
3035
- thead: "after:animate-[swing_2s_ease-in-out_infinite]"
3036
- }
3037
- }, {
3038
- loading: true,
3039
- loadingAnimation: "elastic",
3040
- class: {
3041
- thead: "after:animate-[elastic_2s_ease-in-out_infinite]"
3042
- }
3043
- }],
3044
- defaultVariants: {
3045
- loadingColor: "primary",
3046
- loadingAnimation: "carousel"
3047
- }
3048
- });
3049
-
3050
- const tabs = (options) => ({
3051
- slots: {
3052
- root: "flex items-center gap-2",
3053
- list: "relative flex p-1 group",
3054
- indicator: "absolute transition-[translate,width] duration-200",
3055
- trigger: ["group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden", options.theme.transitions && "transition-colors"],
3056
- content: "focus:outline-none w-full",
3057
- leadingIcon: "shrink-0",
3058
- leadingAvatar: "shrink-0",
3059
- leadingAvatarSize: "",
3060
- label: "truncate"
3061
- },
3062
- variants: {
3063
- color: {
3064
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
3065
- neutral: ""
3066
- },
3067
- variant: {
3068
- pill: {
3069
- list: "bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)]",
3070
- trigger: "flex-1 w-full",
3071
- indicator: "rounded-[calc(var(--ui-radius)*1.5)] shadow-xs"
3072
- },
3073
- link: {
3074
- list: "border-(--ui-border)",
3075
- indicator: "rounded-full"
3076
- }
3077
- },
3078
- orientation: {
3079
- horizontal: {
3080
- root: "flex-col",
3081
- list: "w-full",
3082
- indicator: "left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position)",
3083
- trigger: "justify-center"
3084
- },
3085
- vertical: {
3086
- list: "flex-col",
3087
- indicator: "top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position)"
3088
- }
3089
- },
3090
- size: {
3091
- xs: {
3092
- trigger: "px-2 py-1 text-xs gap-1",
3093
- leadingIcon: "size-4",
3094
- leadingAvatarSize: "3xs"
3095
- },
3096
- sm: {
3097
- trigger: "px-2.5 py-1.5 text-xs gap-1.5",
3098
- leadingIcon: "size-4",
3099
- leadingAvatarSize: "3xs"
3100
- },
3101
- md: {
3102
- trigger: "px-3 py-1.5 text-sm gap-1.5",
3103
- leadingIcon: "size-5",
3104
- leadingAvatarSize: "2xs"
3105
- },
3106
- lg: {
3107
- trigger: "px-3 py-2 text-sm gap-2",
3108
- leadingIcon: "size-5",
3109
- leadingAvatarSize: "2xs"
3110
- },
3111
- xl: {
3112
- trigger: "px-3 py-2 text-base gap-2",
3113
- leadingIcon: "size-6",
3114
- leadingAvatarSize: "xs"
3115
- }
3116
- }
3117
- },
3118
- compoundVariants: [{
3119
- orientation: "horizontal",
3120
- variant: "pill",
3121
- class: {
3122
- indicator: "inset-y-1"
3123
- }
3124
- }, {
3125
- orientation: "horizontal",
3126
- variant: "link",
3127
- class: {
3128
- list: "border-b -mb-px",
3129
- indicator: "-bottom-px h-px"
3130
- }
3131
- }, {
3132
- orientation: "vertical",
3133
- variant: "pill",
3134
- class: {
3135
- indicator: "inset-x-1",
3136
- list: "items-center"
3137
- }
3138
- }, {
3139
- orientation: "vertical",
3140
- variant: "link",
3141
- class: {
3142
- list: "border-s -ms-px",
3143
- indicator: "-start-px w-px"
3144
- }
3145
- }, ...(options.theme.colors || []).map((color) => ({
3146
- color,
3147
- variant: "pill",
3148
- class: {
3149
- indicator: `bg-(--ui-${color})`,
3150
- trigger: `data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-${color})`
3151
- }
3152
- })), {
3153
- color: "neutral",
3154
- variant: "pill",
3155
- class: {
3156
- indicator: "bg-(--ui-bg-inverted)",
3157
- trigger: "data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)"
3158
- }
3159
- }, ...(options.theme.colors || []).map((color) => ({
3160
- color,
3161
- variant: "link",
3162
- class: {
3163
- indicator: `bg-(--ui-${color})`,
3164
- trigger: `data-[state=active]:text-(--ui-${color}) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-${color})`
3165
- }
3166
- })), {
3167
- color: "neutral",
3168
- variant: "link",
3169
- class: {
3170
- indicator: "bg-(--ui-bg-inverted)",
3171
- trigger: "data-[state=active]:text-(--ui-text-highlighted) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)"
3172
- }
3173
- }],
3174
- defaultVariants: {
3175
- color: "primary",
3176
- variant: "pill",
3177
- size: "md"
3178
- }
3179
- });
3180
-
3181
- const textarea = (options) => {
3182
- return input(options);
3183
- };
3184
-
3185
- const toast = (options) => ({
3186
- slots: {
3187
- root: "relative group overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-(--ui-border) p-4 flex gap-2.5 focus:outline-none",
3188
- wrapper: "w-0 flex-1 flex flex-col",
3189
- title: "text-sm font-medium text-(--ui-text-highlighted)",
3190
- description: "text-sm text-(--ui-text-muted)",
3191
- icon: "shrink-0 size-5",
3192
- avatar: "shrink-0",
3193
- avatarSize: "2xl",
3194
- actions: "flex gap-1.5 shrink-0",
3195
- progress: "absolute inset-x-0 bottom-0 h-1 z-[-1]",
3196
- close: "p-0"
3197
- },
3198
- variants: {
3199
- color: {
3200
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
3201
- root: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-${color})`,
3202
- icon: `text-(--ui-${color})`,
3203
- progress: `bg-(--ui-${color})`
3204
- }])),
3205
- neutral: {
3206
- root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)",
3207
- icon: "text-(--ui-text-highlighted)",
3208
- progress: "bg-(--ui-bg-inverted)"
3209
- }
3210
- },
3211
- orientation: {
3212
- horizontal: {
3213
- root: "items-center",
3214
- actions: "items-center"
3215
- },
3216
- vertical: {
3217
- root: "items-start",
3218
- actions: "items-start mt-2.5"
3219
- }
3220
- },
3221
- title: {
3222
- true: {
3223
- description: "mt-1"
3224
- }
3225
- }
3226
- },
3227
- defaultVariants: {
3228
- color: "primary"
3229
- }
3230
- });
3231
-
3232
- const toaster = {
3233
- slots: {
3234
- viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none",
3235
- base: "pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
3236
- },
3237
- variants: {
3238
- position: {
3239
- "top-left": {
3240
- viewport: "left-4"
3241
- },
3242
- "top-center": {
3243
- viewport: "left-1/2 transform -translate-x-1/2"
3244
- },
3245
- "top-right": {
3246
- viewport: "right-4"
3247
- },
3248
- "bottom-left": {
3249
- viewport: "left-4"
3250
- },
3251
- "bottom-center": {
3252
- viewport: "left-1/2 transform -translate-x-1/2"
3253
- },
3254
- "bottom-right": {
3255
- viewport: "right-4"
3256
- }
3257
- },
3258
- swipeDirection: {
3259
- up: "data-[swipe=end]:animate-[toast-slide-up_200ms_ease-out]",
3260
- right: "data-[swipe=end]:animate-[toast-slide-right_200ms_ease-out]",
3261
- down: "data-[swipe=end]:animate-[toast-slide-down_200ms_ease-out]",
3262
- left: "data-[swipe=end]:animate-[toast-slide-left_200ms_ease-out]"
3263
- }
3264
- },
3265
- compoundVariants: [{
3266
- position: ["top-left", "top-center", "top-right"],
3267
- class: {
3268
- viewport: "top-4",
3269
- base: "top-0 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out]"
3270
- }
3271
- }, {
3272
- position: ["bottom-left", "bottom-center", "bottom-right"],
3273
- class: {
3274
- viewport: "bottom-4",
3275
- base: "bottom-0 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out]"
3276
- }
3277
- }, {
3278
- swipeDirection: ["left", "right"],
3279
- class: "data-[swipe=move]:translate-x-(--reka-toast-swipe-move-x) data-[swipe=end]:translate-x-(--reka-toast-swipe-end-x) data-[swipe=cancel]:translate-x-0"
3280
- }, {
3281
- swipeDirection: ["up", "down"],
3282
- class: "data-[swipe=move]:translate-y-(--reka-toast-swipe-move-y) data-[swipe=end]:translate-y-(--reka-toast-swipe-end-y) data-[swipe=cancel]:translate-y-0"
3283
- }],
3284
- defaultVariants: {
3285
- position: "bottom-right"
3286
- }
3287
- };
3288
-
3289
- const tooltip = {
3290
- slots: {
3291
- content: "flex items-center gap-1 bg-(--ui-bg) text-(--ui-text-highlighted) shadow-sm rounded-(--ui-radius) ring ring-(--ui-border) h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto",
3292
- arrow: "fill-(--ui-border)",
3293
- text: "truncate",
3294
- kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['\xB7'] before:me-0.5`,
3295
- kbdsSize: "sm"
3296
- }
3297
- };
3298
-
3299
- const tree = (options) => ({
3300
- slots: {
3301
- root: "relative isolate",
3302
- item: "",
3303
- listWithChildren: "ms-4.5 border-s border-(--ui-border)",
3304
- itemWithChildren: "ps-1.5 -ms-px",
3305
- link: "relative group w-full flex items-center text-sm before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
3306
- linkLeadingIcon: "shrink-0",
3307
- linkLabel: "truncate",
3308
- linkTrailing: "ms-auto inline-flex gap-1.5 items-center",
3309
- linkTrailingIcon: "shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180"
3310
- },
3311
- variants: {
3312
- color: {
3313
- ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
3314
- link: `focus-visible:before:ring-(--ui-${color})`
3315
- }])),
3316
- neutral: {
3317
- link: "focus-visible:before:ring-(--ui-border-inverted)"
3318
- }
3319
- },
3320
- size: {
3321
- xs: {
3322
- link: "px-2 py-1 text-xs gap-1",
3323
- linkLeadingIcon: "size-4",
3324
- linkTrailingIcon: "size-4"
3325
- },
3326
- sm: {
3327
- link: "px-2.5 py-1.5 text-xs gap-1.5",
3328
- linkLeadingIcon: "size-4",
3329
- linkTrailingIcon: "size-4"
3330
- },
3331
- md: {
3332
- link: "px-2.5 py-1.5 text-sm gap-1.5",
3333
- linkLeadingIcon: "size-5",
3334
- linkTrailingIcon: "size-5"
3335
- },
3336
- lg: {
3337
- link: "px-3 py-2 text-sm gap-2",
3338
- linkLeadingIcon: "size-5",
3339
- linkTrailingIcon: "size-5"
3340
- },
3341
- xl: {
3342
- link: "px-3 py-2 text-base gap-2",
3343
- linkLeadingIcon: "size-6",
3344
- linkTrailingIcon: "size-6"
3345
- }
3346
- },
3347
- selected: {
3348
- true: {
3349
- link: "before:bg-(--ui-bg-elevated)"
3350
- },
3351
- false: {
3352
- link: ["hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50", options.theme.transitions && "transition-colors before:transition-colors"]
3353
- }
3354
- },
3355
- disabled: {
3356
- true: {
3357
- link: "cursor-not-allowed opacity-75"
3358
- }
3359
- }
3360
- },
3361
- compoundVariants: [...(options.theme.colors || []).map((color) => ({
3362
- color,
3363
- selected: true,
3364
- class: {
3365
- link: `text-(--ui-${color})`
3366
- }
3367
- })), {
3368
- color: "neutral",
3369
- selected: true,
3370
- class: {
3371
- link: "text-(--ui-text-highlighted)"
3372
- }
3373
- }],
3374
- defaultVariants: {
3375
- color: "primary",
3376
- size: "md"
3377
- }
3378
- });
3379
-
3380
- const theme = {
3381
- __proto__: null,
3382
- accordion: accordion,
3383
- alert: alert,
3384
- avatar: avatar,
3385
- avatarGroup: avatarGroup,
3386
- badge: badge,
3387
- breadcrumb: breadcrumb,
3388
- button: button,
3389
- buttonGroup: buttonGroup,
3390
- calendar: calendar,
3391
- card: card,
3392
- carousel: carousel,
3393
- checkbox: checkbox,
3394
- chip: chip,
3395
- collapsible: collapsible,
3396
- colorPicker: colorPicker,
3397
- commandPalette: commandPalette,
3398
- container: container,
3399
- contextMenu: contextMenu,
3400
- drawer: drawer,
3401
- dropdownMenu: dropdownMenu,
3402
- form: form,
3403
- formField: formField,
3404
- input: input,
3405
- inputMenu: inputMenu,
3406
- inputNumber: inputNumber,
3407
- kbd: kbd,
3408
- link: link,
3409
- modal: modal,
3410
- navigationMenu: navigationMenu,
3411
- pagination: pagination,
3412
- pinInput: pinInput,
3413
- popover: popover,
3414
- progress: progress,
3415
- radioGroup: radioGroup,
3416
- select: select,
3417
- selectMenu: selectMenu,
3418
- separator: separator,
3419
- skeleton: skeleton,
3420
- slideover: slideover,
3421
- slider: slider,
3422
- stepper: stepper,
3423
- switch: _switch,
3424
- table: table,
3425
- tabs: tabs,
3426
- textarea: textarea,
3427
- toast: toast,
3428
- toaster: toaster,
3429
- tooltip: tooltip,
3430
- tree: tree
3431
- };
3432
-
3433
- function getTemplates(options, uiConfig) {
3434
- const templates = [];
3435
- for (const component in theme) {
3436
- templates.push({
3437
- filename: `ui/${scule.kebabCase(component)}.ts`,
3438
- write: true,
3439
- getContents: async () => {
3440
- const template = theme[component];
3441
- const result = typeof template === "function" ? template(options) : template;
3442
- const variants = Object.entries(result.variants || {}).filter(([_, values]) => {
3443
- const keys = Object.keys(values);
3444
- return keys.some((key) => key !== "true" && key !== "false");
3445
- }).map(([key]) => key);
3446
- let json = JSON.stringify(result, null, 2);
3447
- for (const variant of variants) {
3448
- json = json.replace(new RegExp(`("${variant}": "[^"]+")`, "g"), `$1 as typeof ${variant}[number]`);
3449
- json = json.replace(new RegExp(`("${variant}": \\[\\s*)((?:"[^"]+",?\\s*)+)(\\])`, "g"), (_, before, match, after) => {
3450
- const replaced = match.replace(/("[^"]+")/g, `$1 as typeof ${variant}[number]`);
3451
- return `${before}${replaced}${after}`;
3452
- });
3453
- }
3454
- function generateVariantDeclarations(variants2) {
3455
- return variants2.map((variant) => {
3456
- const keys = Object.keys(result.variants[variant]);
3457
- return `const ${variant} = ${JSON.stringify(keys, null, 2)} as const`;
3458
- });
3459
- }
3460
- return [
3461
- ...generateVariantDeclarations(variants),
3462
- `export default ${json}`
3463
- ].join("\n\n");
3464
- }
3465
- });
3466
- }
3467
- templates.push({
3468
- filename: "ui.css",
3469
- write: true,
3470
- getContents: () => `@source "./ui";
3471
-
3472
- @theme default {
3473
- --color-old-neutral-50: ${colors__default.neutral[50]};
3474
- --color-old-neutral-100: ${colors__default.neutral[100]};
3475
- --color-old-neutral-200: ${colors__default.neutral[200]};
3476
- --color-old-neutral-300: ${colors__default.neutral[300]};
3477
- --color-old-neutral-400: ${colors__default.neutral[400]};
3478
- --color-old-neutral-500: ${colors__default.neutral[500]};
3479
- --color-old-neutral-600: ${colors__default.neutral[600]};
3480
- --color-old-neutral-700: ${colors__default.neutral[700]};
3481
- --color-old-neutral-800: ${colors__default.neutral[800]};
3482
- --color-old-neutral-900: ${colors__default.neutral[900]};
3483
- --color-old-neutral-950: ${colors__default.neutral[950]};
3484
- ${[...(options.theme?.colors || []).filter((color) => !colors__default[color]), "neutral"].map((color) => [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map((shade) => `--color-${color}-${shade}: var(--ui-color-${color}-${shade});`).join("\n ")).join("\n ")}
3485
- }
3486
- `
3487
- });
3488
- templates.push({
3489
- filename: "ui/index.ts",
3490
- write: true,
3491
- getContents: () => Object.keys(theme).map((component) => `export { default as ${component} } from './${scule.kebabCase(component)}'`).join("\n")
3492
- });
3493
- templates.push({
3494
- filename: "types/ui.d.ts",
3495
- getContents: () => `import * as ui from '#build/ui'
3496
- import type { DeepPartial } from '@nuxt/ui'
3497
- import type { defaultConfig } from 'tailwind-variants'
3498
- import colors from 'tailwindcss/colors'
3499
-
3500
- const icons = ${JSON.stringify(uiConfig.icons)};
3501
-
3502
- type NeutralColor = 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | (string & {})
3503
- type Color = Exclude<keyof typeof colors, 'inherit' | 'current' | 'transparent' | 'black' | 'white' | NeutralColor> | (string & {})
3504
-
3505
- type AppConfigUI = {
3506
- colors?: {
3507
- ${options.theme?.colors?.map((color) => `${color}?: Color`).join("\n ")}
3508
- neutral?: NeutralColor
3509
- }
3510
- icons?: Partial<typeof icons>
3511
- tv?: typeof defaultConfig
3512
- } & DeepPartial<typeof ui>
3513
-
3514
- declare module '@nuxt/schema' {
3515
- interface AppConfigInput {
3516
- /**
3517
- * Nuxt UI theme configuration
3518
- * @see https://ui.nuxt.com/getting-started/theme#customize-theme
3519
- */
3520
- ui?: AppConfigUI
3521
- }
3522
- }
3523
-
3524
- export {}
3525
- `
3526
- });
3527
- templates.push({
3528
- filename: "ui-image-component.ts",
3529
- write: true,
3530
- getContents: ({ app }) => {
3531
- const image = app?.components?.find((c) => c.pascalName === "NuxtImg" && !c.filePath.includes("nuxt/dist/app"));
3532
- return image ? `export { default } from "${image.filePath}"` : 'export default "img"';
3533
- }
3534
- });
3535
- return templates;
3536
- }
3537
- function addTemplates(options, nuxt, resolve) {
3538
- const templates = getTemplates(options, nuxt.options.appConfig.ui);
3539
- for (const template of templates) {
3540
- if (template.filename.endsWith(".d.ts")) {
3541
- kit.addTypeTemplate(template);
3542
- } else {
3543
- kit.addTemplate(template);
3544
- }
3545
- }
3546
- nuxt.hook("prepare:types", ({ references }) => {
3547
- references.push({ path: resolve("./runtime/types/app.config.d.ts") });
3548
- });
3549
- }
3550
-
3551
- exports.addTemplates = addTemplates;
3552
- exports.defaultOptions = defaultOptions;
3553
- exports.getDefaultUiConfig = getDefaultUiConfig;
3554
- exports.getTemplates = getTemplates;
3555
- exports.resolveColors = resolveColors;