raft-ui 0.0.5 → 0.0.6

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 (110) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/button-CJqMhTPQ.mjs +621 -0
  3. package/dist/index-CpGciYPW.d.mts +267 -0
  4. package/dist/index.d.mts +11 -253
  5. package/dist/index.mjs +32 -587
  6. package/dist/wip.d.mts +133 -15
  7. package/dist/wip.mjs +289 -16
  8. package/package.json +5 -7
  9. package/src/components/alert-dialog/alert-dialog.tsx +215 -0
  10. package/src/components/alert-dialog/index.ts +30 -0
  11. package/src/components/avatar/avatar.tsx +3 -3
  12. package/src/components/avatar/index.ts +2 -2
  13. package/src/components/badge/badge.tsx +2 -2
  14. package/src/components/badge/index.ts +2 -2
  15. package/src/components/banner/banner.tsx +2 -2
  16. package/src/components/banner/index.ts +2 -2
  17. package/src/components/bottom-sheet/bottom-sheet.tsx +3 -3
  18. package/src/components/bottom-sheet/index.ts +2 -2
  19. package/src/components/button/button.tsx +7 -5
  20. package/src/components/button/index.ts +2 -2
  21. package/src/components/checkbox/checkbox-indicator.tsx +2 -2
  22. package/src/components/checkbox/checkbox.tsx +4 -4
  23. package/src/components/checkbox/index.ts +2 -2
  24. package/src/components/combobox/combobox.tsx +4 -4
  25. package/src/components/combobox/index.ts +1 -1
  26. package/src/components/context-menu/context-menu.tsx +4 -4
  27. package/src/components/context-menu/index.ts +2 -2
  28. package/src/components/conversation-preview-card/conversation-preview-card.tsx +2 -2
  29. package/src/components/conversation-preview-card/index.ts +2 -2
  30. package/src/components/description-list/description-list.tsx +2 -2
  31. package/src/components/description-list/index.ts +2 -2
  32. package/src/components/dialog/dialog.tsx +152 -0
  33. package/src/components/dialog/index.ts +26 -0
  34. package/src/components/dropdown-menu/dropdown-menu.tsx +5 -5
  35. package/src/components/dropdown-menu/index.ts +2 -2
  36. package/src/components/empty-state/empty-state.tsx +2 -2
  37. package/src/components/empty-state/index.ts +2 -2
  38. package/src/components/field/field.tsx +4 -4
  39. package/src/components/field/index.ts +2 -2
  40. package/src/components/inline-code/index.ts +2 -2
  41. package/src/components/inline-code/inline-code.tsx +2 -2
  42. package/src/components/input/index.ts +2 -2
  43. package/src/components/input/input.tsx +4 -4
  44. package/src/components/input-group/index.ts +2 -2
  45. package/src/components/input-group/input-group.tsx +5 -5
  46. package/src/components/kbd/index.ts +2 -2
  47. package/src/components/kbd/kbd.tsx +2 -2
  48. package/src/components/label/index.ts +2 -7
  49. package/src/components/label/label.tsx +2 -2
  50. package/src/components/lightbox/index.ts +2 -2
  51. package/src/components/lightbox/lightbox.tsx +3 -3
  52. package/src/components/list-item/index.ts +2 -2
  53. package/src/components/list-item/list-item.tsx +2 -2
  54. package/src/components/media-list-item/index.ts +2 -2
  55. package/src/components/media-list-item/media-list-item.tsx +4 -4
  56. package/src/components/notification-center/index.ts +2 -2
  57. package/src/components/notification-center/notification-center.tsx +5 -5
  58. package/src/components/panel-header/index.ts +2 -2
  59. package/src/components/panel-header/panel-header.tsx +2 -2
  60. package/src/components/popover/index.ts +2 -2
  61. package/src/components/popover/popover.tsx +3 -3
  62. package/src/components/preview-shell/index.ts +2 -2
  63. package/src/components/preview-shell/preview-shell.tsx +2 -2
  64. package/src/components/quoted-message-card/index.ts +2 -2
  65. package/src/components/quoted-message-card/quoted-message-card.tsx +3 -3
  66. package/src/components/radio-group/index.ts +2 -6
  67. package/src/components/radio-group/radio-group.tsx +4 -4
  68. package/src/components/section-header/index.ts +2 -2
  69. package/src/components/section-header/section-header.tsx +2 -2
  70. package/src/components/section-label/index.ts +2 -2
  71. package/src/components/section-label/section-label.tsx +2 -2
  72. package/src/components/segmented-control/index.ts +2 -2
  73. package/src/components/segmented-control/segmented-control.tsx +3 -3
  74. package/src/components/select/index.ts +2 -2
  75. package/src/components/select/select.tsx +4 -4
  76. package/src/components/separator/index.ts +2 -0
  77. package/src/components/separator/separator.tsx +40 -0
  78. package/src/components/spinner/index.ts +2 -2
  79. package/src/components/spinner/spinner.tsx +3 -3
  80. package/src/components/status/index.ts +2 -2
  81. package/src/components/status/status.tsx +2 -2
  82. package/src/components/tabs/index.ts +2 -2
  83. package/src/components/tabs/tabs.tsx +3 -3
  84. package/src/components/text/index.ts +2 -2
  85. package/src/components/text/text.tsx +1 -1
  86. package/src/components/textarea/index.ts +2 -2
  87. package/src/components/textarea/textarea.tsx +3 -3
  88. package/src/components/toggle-group/index.ts +2 -7
  89. package/src/components/toggle-group/toggle-group.tsx +3 -3
  90. package/src/components/tooltip/index.ts +2 -8
  91. package/src/components/tooltip/tooltip.tsx +3 -3
  92. package/src/index.ts +60 -57
  93. package/src/legacy/AvatarListRow.tsx +1 -1
  94. package/src/legacy/Checkbox.tsx +1 -1
  95. package/src/legacy/ConversationPreviewCard.tsx +1 -1
  96. package/src/legacy/DismissBackdrop.tsx +1 -1
  97. package/src/legacy/ExperimentalBadge.tsx +1 -1
  98. package/src/legacy/NotificationCenter.tsx +2 -2
  99. package/src/legacy/PanelHeader.tsx +1 -1
  100. package/src/legacy/QuotedMessageCard.tsx +1 -1
  101. package/src/legacy/SectionHeader.tsx +1 -1
  102. package/src/legacy/Spinner.tsx +1 -1
  103. package/src/legacy/SurfaceListItem.tsx +1 -1
  104. package/src/legacy/selection-popover.tsx +2 -2
  105. package/src/legacy/server-switcher-menu.tsx +2 -2
  106. package/src/lib/theme/theme-provider.tsx +1 -1
  107. package/src/lib/theme/use-theme.ts +1 -1
  108. package/src/wip.ts +82 -24
  109. package/dist/styled-props-B3SNekJg.d.mts +0 -16
  110. package/dist/use-theme-Y_h1DKll.mjs +0 -34
package/dist/index.mjs CHANGED
@@ -1,10 +1,9 @@
1
- import { a as tv, i as ThemeStateContext, n as useThemeFamily, r as ThemeContext, t as useTheme } from "./use-theme-Y_h1DKll.mjs";
1
+ import { a as useThemeFamily, c as tv, i as useTheme, n as buttonVariants, o as ThemeContext, r as Spinner, s as ThemeStateContext, t as Button } from "./button-CJqMhTPQ.mjs";
2
2
  import { cn } from "./cn.mjs";
3
- import { Button as Button$1 } from "@base-ui/react/button";
4
3
  import { createContext, use, useCallback, useEffect, useId, useMemo, useState, useSyncExternalStore } from "react";
5
4
  import { mergeProps } from "@base-ui/react/merge-props";
6
5
  import { useRender } from "@base-ui/react/use-render";
7
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
6
+ import { jsx, jsxs } from "react/jsx-runtime";
8
7
  import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
9
8
  import { AlertTriangle, Check, CheckCircle2, ChevronDown, Info, Minus, X } from "lucide-react";
10
9
  import { Avatar as Avatar$1, ContextMenu as ContextMenu$1 } from "@base-ui/react";
@@ -20,589 +19,7 @@ import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
20
19
  import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
21
20
  import { DndContext, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
22
21
  import { SortableContext, arrayMove, horizontalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
23
- //#region src/components/spinner/spinner.tsx
24
- const SPINNER_STYLE = `
25
- @keyframes raft-braille-spinner {
26
- 0%,
27
- 9.99% {
28
- content: "⠋";
29
- }
30
- 10%,
31
- 19.99% {
32
- content: "⠙";
33
- }
34
- 20%,
35
- 29.99% {
36
- content: "⠹";
37
- }
38
- 30%,
39
- 39.99% {
40
- content: "⠸";
41
- }
42
- 40%,
43
- 49.99% {
44
- content: "⠼";
45
- }
46
- 50%,
47
- 59.99% {
48
- content: "⠴";
49
- }
50
- 60%,
51
- 69.99% {
52
- content: "⠦";
53
- }
54
- 70%,
55
- 79.99% {
56
- content: "⠧";
57
- }
58
- 80%,
59
- 89.99% {
60
- content: "⠇";
61
- }
62
- 90%,
63
- 100% {
64
- content: "⠏";
65
- }
66
- }
67
-
68
- [data-slot="spinner"] [data-spinner-glyph]::before {
69
- content: "⠋";
70
- animation: raft-braille-spinner 800ms steps(1, end) infinite;
71
- }
72
-
73
- @media (prefers-reduced-motion: reduce) {
74
- [data-slot="spinner"] [data-spinner-glyph]::before {
75
- animation-duration: 1600ms;
76
- }
77
- }
78
-
79
- @keyframes raft-elegant-spinner-spin {
80
- to {
81
- transform: rotate(360deg);
82
- }
83
- }
84
-
85
- @keyframes raft-elegant-spinner-dash {
86
- 0% {
87
- stroke-dasharray: 1 150;
88
- stroke-dashoffset: 0;
89
- }
90
- 50% {
91
- stroke-dasharray: 90 150;
92
- stroke-dashoffset: -35;
93
- }
94
- 100% {
95
- stroke-dasharray: 90 150;
96
- stroke-dashoffset: -124;
97
- }
98
- }
99
-
100
- [data-slot="spinner"] [data-spinner-ring] {
101
- animation: raft-elegant-spinner-spin 1600ms linear infinite;
102
- transform-box: fill-box;
103
- transform-origin: center;
104
- will-change: transform;
105
- }
106
-
107
- [data-slot="spinner"] [data-spinner-arc] {
108
- animation: raft-elegant-spinner-dash 1400ms cubic-bezier(0.42, 0, 0.58, 1) infinite;
109
- stroke-dasharray: 1 150;
110
- stroke-dashoffset: 0;
111
- }
112
-
113
- @media (prefers-reduced-motion: reduce) {
114
- [data-slot="spinner"] [data-spinner-ring] {
115
- animation-duration: 2400ms;
116
- will-change: auto;
117
- }
118
-
119
- [data-slot="spinner"] [data-spinner-arc] {
120
- animation: none;
121
- stroke-dasharray: 72 150;
122
- stroke-dashoffset: -30;
123
- }
124
- }
125
- `;
126
- const spinner = tv({
127
- slots: {
128
- root: ["relative inline-flex shrink-0 items-center justify-center", "leading-none text-current"],
129
- glyph: "inline-block min-w-[1ch] font-mono tabular-nums",
130
- ring: "block size-full shrink-0"
131
- },
132
- variants: {
133
- theme: {
134
- brutal: {},
135
- elegant: {}
136
- },
137
- size: {
138
- sm: {},
139
- lg: {}
140
- }
141
- },
142
- defaultVariants: { size: "sm" },
143
- compoundVariants: [
144
- {
145
- theme: "brutal",
146
- size: "sm",
147
- class: { root: "h-4 text-base" }
148
- },
149
- {
150
- theme: "brutal",
151
- size: "lg",
152
- class: { root: "h-6 text-xl" }
153
- },
154
- {
155
- theme: "elegant",
156
- size: "sm",
157
- class: { root: "size-3.5" }
158
- },
159
- {
160
- theme: "elegant",
161
- size: "lg",
162
- class: { root: "size-[18px]" }
163
- }
164
- ]
165
- });
166
- const spinnerStyle = /* @__PURE__ */ jsx("style", {
167
- href: "raft-ui-spinner",
168
- precedence: "default",
169
- children: SPINNER_STYLE
170
- });
171
- function Spinner({ size = "sm", className, render, ...props }) {
172
- const theme = useThemeFamily();
173
- const { root, glyph, ring } = spinner({
174
- theme,
175
- size
176
- });
177
- const children = theme === "elegant" ? /* @__PURE__ */ jsxs(Fragment, { children: [spinnerStyle, /* @__PURE__ */ jsxs("svg", {
178
- "data-spinner-ring": "",
179
- "aria-hidden": "true",
180
- className: ring(),
181
- xmlns: "http://www.w3.org/2000/svg",
182
- fill: "none",
183
- viewBox: "0 0 24 24",
184
- children: [/* @__PURE__ */ jsx("circle", {
185
- className: "opacity-20",
186
- cx: "12",
187
- cy: "12",
188
- r: "10",
189
- stroke: "currentColor",
190
- strokeWidth: "2.5"
191
- }), /* @__PURE__ */ jsx("circle", {
192
- "data-spinner-arc": "",
193
- className: "opacity-80",
194
- cx: "12",
195
- cy: "12",
196
- r: "10",
197
- fill: "none",
198
- pathLength: "150",
199
- stroke: "currentColor",
200
- strokeLinecap: "round",
201
- strokeWidth: "2.5"
202
- })]
203
- })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [spinnerStyle, /* @__PURE__ */ jsx("span", {
204
- "data-spinner-glyph": "",
205
- "aria-hidden": "true",
206
- className: glyph()
207
- })] });
208
- return useRender({
209
- defaultTagName: "span",
210
- render,
211
- props: mergeProps({
212
- role: "status",
213
- "aria-label": "Loading",
214
- className: root({ className }),
215
- children
216
- }, props),
217
- state: {
218
- slot: "spinner",
219
- size
220
- }
221
- });
222
- }
223
- //#endregion
224
- //#region src/components/button/button.tsx
225
- const buttonVariants = tv({
226
- slots: {
227
- root: [
228
- "relative inline-flex shrink-0 items-center justify-center",
229
- "font-heading leading-none whitespace-nowrap select-none",
230
- "border-line rounded-none",
231
- "shadow-sm transition-all duration-100",
232
- "outline outline-[1px] outline-offset-2 outline-transparent",
233
- "data-[loading=true]:cursor-wait",
234
- "disabled:pointer-events-none disabled:opacity-40 data-[loading=true]:opacity-100",
235
- "disabled:transform-none",
236
- "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
237
- ],
238
- content: "relative z-10 inline-flex items-center justify-center gap-[inherit] data-[loading=true]:invisible",
239
- loadingIndicator: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center"
240
- },
241
- variants: {
242
- theme: {
243
- brutal: { root: ["border-2 font-bold focus-visible:outline-transparent"] },
244
- elegant: { root: [
245
- "overflow-clip border-0 font-sans font-medium antialiased",
246
- "focus-visible:outline-[var(--button-focus-outline,transparent)]",
247
- "shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_0_0_1px_var(--line-subtle)]",
248
- "before:pointer-events-none before:absolute before:inset-0 before:z-0 before:rounded-[inherit]",
249
- "active:not-aria-[haspopup]:scale-[0.985]"
250
- ] }
251
- },
252
- variant: {
253
- primary: { root: ["border-line-strong bg-primary-400 text-primary-950", "hover:bg-primary-500"] },
254
- default: { root: ["border-line-strong bg-layer-panel text-foreground-strong", "hover:bg-layer-panel"] },
255
- information: { root: ["border-line-strong bg-info-base text-foreground-inverse", "hover:bg-info-base"] },
256
- muted: { root: ["border-line-strong bg-secondary-400 text-secondary-950", "hover:border-line-strong hover:bg-secondary-400"] },
257
- accent: { root: ["border-line-strong bg-accent-400 text-accent-950", "hover:bg-accent-500"] },
258
- warning: { root: ["border-line-strong bg-warning-base text-foreground-inverse", "hover:bg-warning-base"] },
259
- outline: { root: [
260
- "border-line-strong bg-transparent text-foreground-strong",
261
- "hover:bg-layer-muted",
262
- "shadow-none"
263
- ] },
264
- ghost: { root: ["border-transparent bg-transparent text-foreground shadow-none", "hover:border-line-strong hover:bg-layer-muted"] },
265
- link: { root: ["border-transparent bg-transparent text-foreground-strong shadow-none underline-offset-4", "hover:underline"] },
266
- "danger-secondary": { root: ["border-line-strong bg-danger-lighter text-danger-base", "hover:bg-danger-lighter"] },
267
- danger: { root: ["border-line-strong bg-danger-base text-foreground-inverse", "hover:border-[oklch(0.595_0.241_26.758)] hover:bg-[oklch(0.595_0.241_26.758)]"] },
268
- "danger-outline": { root: [
269
- "border-line-strong bg-transparent text-danger-base",
270
- "hover:bg-layer-muted",
271
- "shadow-none"
272
- ] }
273
- },
274
- size: {
275
- xs: { root: [
276
- "gap-1 px-2 py-[5px] text-[11px]",
277
- "has-data-[icon=inline-start]:pl-1.5 has-data-[icon=inline-end]:pr-1.5",
278
- "[&_svg:not([class*='size-'])]:size-3"
279
- ] },
280
- sm: { root: [
281
- "gap-1.5 px-2.5 py-[6px] text-xs",
282
- "has-data-[icon=inline-start]:pl-2 has-data-[icon=inline-end]:pr-2",
283
- "[&_svg:not([class*='size-'])]:size-3.5"
284
- ] },
285
- md: { root: ["gap-2 px-3 py-2 text-sm", "has-data-[icon=inline-start]:pl-2.5 has-data-[icon=inline-end]:pr-2.5"] },
286
- lg: { root: [
287
- "gap-2 px-3.5 py-2.5 text-base",
288
- "has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3",
289
- "[&_svg:not([class*='size-'])]:size-4"
290
- ] },
291
- "icon-xs": { root: ["p-[5px] text-[11px]", "[&_svg:not([class*='size-'])]:size-3"] },
292
- "icon-sm": { root: ["p-[6px] text-xs", "[&_svg:not([class*='size-'])]:size-3.5"] },
293
- "icon-md": { root: ["p-2 text-sm", "[&_svg:not([class*='size-'])]:size-4"] },
294
- "icon-lg": { root: ["p-3 text-sm", "[&_svg:not([class*='size-'])]:size-4"] }
295
- }
296
- },
297
- defaultVariants: {
298
- variant: "default",
299
- size: "md"
300
- },
301
- compoundVariants: [
302
- {
303
- theme: "elegant",
304
- size: ["xs", "icon-xs"],
305
- class: { root: "rounded-sm" }
306
- },
307
- {
308
- theme: "elegant",
309
- size: ["sm", "icon-sm"],
310
- class: { root: "rounded" }
311
- },
312
- {
313
- theme: "elegant",
314
- size: ["md", "icon-md"],
315
- class: { root: "rounded-md" }
316
- },
317
- {
318
- theme: "elegant",
319
- size: ["lg", "icon-lg"],
320
- class: { root: "rounded-md" }
321
- },
322
- {
323
- theme: "brutal",
324
- variant: "primary",
325
- class: { root: "bg-brutal-yellow text-black hover:bg-brutal-yellow" }
326
- },
327
- {
328
- theme: "brutal",
329
- variant: "default",
330
- class: { root: "bg-white text-black hover:bg-white" }
331
- },
332
- {
333
- theme: "brutal",
334
- variant: "outline",
335
- class: { root: "bg-white text-black shadow-sm hover:bg-white" }
336
- },
337
- {
338
- theme: "brutal",
339
- variant: "information",
340
- class: { root: "bg-brutal-cyan text-black hover:bg-brutal-cyan" }
341
- },
342
- {
343
- theme: "brutal",
344
- variant: "muted",
345
- class: { root: "bg-brutal-stone text-black hover:bg-brutal-stone" }
346
- },
347
- {
348
- theme: "brutal",
349
- variant: "accent",
350
- class: { root: "bg-brutal-pink text-black hover:bg-brutal-pink" }
351
- },
352
- {
353
- theme: "brutal",
354
- variant: "danger",
355
- class: { root: "bg-brutal-red text-black hover:bg-brutal-red" }
356
- },
357
- {
358
- theme: "brutal",
359
- variant: "warning",
360
- class: { root: "bg-warning-base text-black hover:bg-warning-base" }
361
- },
362
- {
363
- theme: "brutal",
364
- size: "xs",
365
- class: { root: "h-6 px-2 py-0 text-[11px]" }
366
- },
367
- {
368
- theme: "brutal",
369
- size: "sm",
370
- class: { root: "h-7 px-2.5 py-0 text-xs" }
371
- },
372
- {
373
- theme: "brutal",
374
- size: "md",
375
- class: { root: "h-8 px-3 py-0 text-sm" }
376
- },
377
- {
378
- theme: "brutal",
379
- size: "lg",
380
- class: { root: "h-10 px-4 py-0 text-sm" }
381
- },
382
- {
383
- theme: "brutal",
384
- size: "icon-xs",
385
- class: { root: "size-6 p-0 text-[11px]" }
386
- },
387
- {
388
- theme: "brutal",
389
- size: "icon-sm",
390
- class: { root: "size-7 p-0 text-xs" }
391
- },
392
- {
393
- theme: "brutal",
394
- size: "icon-md",
395
- class: { root: "size-8 p-0 text-sm" }
396
- },
397
- {
398
- theme: "brutal",
399
- size: "icon-lg",
400
- class: { root: "size-10 p-0 text-sm" }
401
- },
402
- {
403
- theme: "elegant",
404
- variant: "default",
405
- class: { root: [
406
- "bg-foreground-strong text-foreground-inverse",
407
- "[--button-focus-outline:var(--foreground-strong)]",
408
- "shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.12),0_0_0_1px_var(--foreground-strong)]",
409
- "before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_8%)_0%,oklab(0%_0_0_/_0%)_100%)]",
410
- "hover:bg-[oklch(0.31_0.006_285)]"
411
- ] }
412
- },
413
- {
414
- theme: "elegant",
415
- variant: "primary",
416
- class: { root: [
417
- "bg-primary-400 text-primary-950",
418
- "[--button-focus-outline:var(--primary-400)]",
419
- "shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.15),0_0_0_1px_oklch(0.83_0.14_91.89_/_0.83)]",
420
- "before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_11%)_0%,oklab(100%_0_0_/_0%)_0%,oklab(0%_0_0_/_0%)_100%)]",
421
- "hover:bg-[oklch(0.86_0.15_91.89)]"
422
- ] }
423
- },
424
- {
425
- theme: "elegant",
426
- variant: "outline",
427
- class: { root: [
428
- "bg-layer-panel text-foreground-strong",
429
- "[--button-focus-outline:var(--layer-panel)]",
430
- "shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_0_0_1px_var(--line-subtle)]",
431
- "before:bg-[linear-gradient(in_oklab_180deg,oklab(0%_0_0_/_0%)_30%,oklab(0%_0_0_/_1%)_100%)]",
432
- "hover:bg-layer-muted"
433
- ] }
434
- },
435
- {
436
- theme: "elegant",
437
- variant: "ghost",
438
- class: { root: [
439
- "bg-transparent text-foreground-muted shadow-none",
440
- "[--button-focus-outline:var(--line-muted)]",
441
- "before:bg-transparent hover:bg-line-muted"
442
- ] }
443
- },
444
- {
445
- theme: "elegant",
446
- variant: "danger-secondary",
447
- class: { root: [
448
- "bg-danger-lighter text-danger-base",
449
- "[--button-focus-outline:var(--state-danger-lighter)]",
450
- "shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.18),0_0_0_1px_var(--state-danger-light)]",
451
- "before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_9%)_0%,oklab(0%_0_0_/_1%)_100%)]",
452
- "hover:bg-danger-light"
453
- ] }
454
- },
455
- {
456
- theme: "elegant",
457
- variant: "danger",
458
- class: { root: [
459
- "bg-danger-base text-foreground-inverse",
460
- "[--button-focus-outline:var(--state-danger-base)]",
461
- "shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.12),0_0_0_1px_var(--state-danger-base)]",
462
- "before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_10%)_0%,oklab(0%_0_0_/_0%)_100%)]",
463
- "hover:bg-[oklch(0.56_0.23_26.758)]"
464
- ] }
465
- },
466
- {
467
- theme: "brutal",
468
- variant: "danger",
469
- class: { root: [
470
- "border-line-strong bg-brutal-red text-black",
471
- "shadow-sm",
472
- "hover:border-line-strong hover:bg-brutal-red",
473
- "hover:-translate-y-px hover:shadow-md",
474
- "active:not-aria-[haspopup]:translate-x-px active:not-aria-[haspopup]:translate-y-px",
475
- "active:shadow-xs"
476
- ] }
477
- },
478
- {
479
- theme: "brutal",
480
- variant: "danger-secondary",
481
- class: { root: [
482
- "border-line-strong bg-danger-lighter text-[color-mix(in_oklab,var(--state-danger-base)_72%,transparent)]",
483
- "shadow-sm",
484
- "hover:border-line-strong hover:bg-danger-lighter",
485
- "hover:-translate-y-px hover:shadow-md",
486
- "active:not-aria-[haspopup]:translate-x-px active:not-aria-[haspopup]:translate-y-px",
487
- "active:shadow-xs"
488
- ] }
489
- },
490
- {
491
- theme: "elegant",
492
- variant: "danger-outline",
493
- class: { root: [
494
- "bg-layer-panel text-danger-base",
495
- "[--button-focus-outline:var(--layer-panel)]",
496
- "shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_0_0_1px_var(--state-danger-light)]",
497
- "before:bg-[linear-gradient(in_oklab_180deg,oklab(0%_0_0_/_0%)_30%,oklab(0%_0_0_/_1%)_100%)]",
498
- "hover:bg-danger-lighter"
499
- ] }
500
- },
501
- {
502
- theme: "elegant",
503
- variant: "accent",
504
- class: { root: [
505
- "bg-accent-400 text-white",
506
- "[--button-focus-outline:var(--accent-400)]",
507
- "shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.12),0_0_0_1px_var(--accent-400)]",
508
- "before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_8%)_0%,oklab(0%_0_0_/_0%)_100%)]",
509
- "hover:bg-[oklch(0.72_0.15_0.71)]"
510
- ] }
511
- },
512
- {
513
- theme: "elegant",
514
- variant: "warning",
515
- class: { root: [
516
- "bg-warning-base text-foreground-inverse",
517
- "[--button-focus-outline:var(--state-warning-base)]",
518
- "shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.14),0_0_0_1px_var(--state-warning-base)]",
519
- "before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_10%)_0%,oklab(0%_0_0_/_0%)_100%)]",
520
- "hover:bg-[oklch(0.65_0.19_44.441)]"
521
- ] }
522
- },
523
- {
524
- theme: "elegant",
525
- variant: "link",
526
- class: { root: [
527
- "bg-transparent text-foreground-muted shadow-none",
528
- "[--button-focus-outline:transparent]",
529
- "before:bg-transparent hover:bg-transparent hover:text-foreground-muted"
530
- ] }
531
- },
532
- {
533
- theme: "elegant",
534
- variant: "information",
535
- class: { root: [
536
- "bg-info-base text-foreground-inverse",
537
- "[--button-focus-outline:var(--state-info-base)]",
538
- "shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.12),0_0_0_1px_var(--state-info-base)]",
539
- "before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_8%)_0%,oklab(0%_0_0_/_0%)_100%)]",
540
- "hover:bg-[oklch(0.74_0.13_219.2)]"
541
- ] }
542
- },
543
- {
544
- theme: "elegant",
545
- variant: "muted",
546
- class: { root: [
547
- "bg-layer-muted text-foreground-placeholder",
548
- "[--button-focus-outline:var(--layer-muted)]",
549
- "shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_0_0_1px_var(--line-subtle)]",
550
- "before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_5%)_0%,oklab(0%_0_0_/_1%)_100%)]",
551
- "hover:bg-line-subtle"
552
- ] }
553
- },
554
- {
555
- theme: "brutal",
556
- variant: [
557
- "primary",
558
- "default",
559
- "information",
560
- "muted",
561
- "accent",
562
- "warning",
563
- "outline"
564
- ],
565
- class: { root: [
566
- "hover:-translate-y-px hover:shadow-md",
567
- "active:not-aria-[haspopup]:translate-x-px active:not-aria-[haspopup]:translate-y-px",
568
- "active:shadow-xs"
569
- ] }
570
- }
571
- ]
572
- });
573
- function defaultNativeButton(render) {
574
- if (!render || typeof render !== "object" || !("type" in render)) return;
575
- const element = render;
576
- if (typeof element.type === "string") return element.type === "button";
577
- }
578
- function Button({ variant, size, loading = false, loadingLabel = "Loading", disabled, className, children, render, nativeButton, ...props }) {
579
- const { root, content, loadingIndicator } = buttonVariants({
580
- theme: useThemeFamily(),
581
- variant,
582
- size
583
- });
584
- return /* @__PURE__ */ jsxs(Button$1, {
585
- ...props,
586
- render,
587
- nativeButton: nativeButton ?? defaultNativeButton(render),
588
- "data-slot": "button",
589
- className: root({ className }),
590
- "data-loading": loading ? "true" : void 0,
591
- disabled: disabled || loading,
592
- "aria-disabled": loading || void 0,
593
- children: [loading ? /* @__PURE__ */ jsx("span", {
594
- "data-slot": "button-loading-indicator",
595
- className: loadingIndicator(),
596
- children: /* @__PURE__ */ jsx(Spinner, { "aria-label": loadingLabel })
597
- }) : null, /* @__PURE__ */ jsx("span", {
598
- "data-slot": "button-content",
599
- "data-loading": loading ? "true" : void 0,
600
- className: content(),
601
- children
602
- })]
603
- });
604
- }
605
- //#endregion
22
+ import { Separator as Separator$1 } from "@base-ui/react/separator";
606
23
  //#region src/components/checkbox/checkbox-indicator.tsx
607
24
  const checkboxIndicator = tv({
608
25
  slots: { root: [
@@ -5052,6 +4469,34 @@ function reconcileTabOrder(items, order) {
5052
4469
  return next;
5053
4470
  }
5054
4471
  //#endregion
4472
+ //#region src/components/separator/separator.tsx
4473
+ const separator = tv({
4474
+ base: [
4475
+ "shrink-0",
4476
+ "data-[orientation=horizontal]:w-full",
4477
+ "data-[orientation=vertical]:self-stretch"
4478
+ ],
4479
+ variants: { theme: {
4480
+ brutal: ["data-[orientation=horizontal]:h-0 data-[orientation=horizontal]:border-t-2 data-[orientation=horizontal]:border-black", "data-[orientation=vertical]:w-0 data-[orientation=vertical]:border-l-2 data-[orientation=vertical]:border-black"],
4481
+ elegant: [
4482
+ "bg-line-muted",
4483
+ "data-[orientation=horizontal]:h-px",
4484
+ "data-[orientation=vertical]:w-px"
4485
+ ]
4486
+ } }
4487
+ });
4488
+ function Separator({ className, orientation = "horizontal", ...props }) {
4489
+ return /* @__PURE__ */ jsx(Separator$1, {
4490
+ "data-slot": "separator",
4491
+ orientation,
4492
+ className: separator({
4493
+ theme: useThemeFamily(),
4494
+ className
4495
+ }),
4496
+ ...props
4497
+ });
4498
+ }
4499
+ //#endregion
5055
4500
  //#region src/lib/theme/theme-provider.tsx
5056
4501
  function readStoredTheme(storageKey, fallback) {
5057
4502
  if (typeof window === "undefined" || !storageKey) return fallback;
@@ -5146,4 +4591,4 @@ function ThemeProvider({ theme, defaultTheme = "brutal", onThemeChange, mode, de
5146
4591
  });
5147
4592
  }
5148
4593
  //#endregion
5149
- export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Banner, BannerAction, BannerDescription, BannerTitle, Button, Checkbox, Combobox, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxControl, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxHeader, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxList, ComboboxPopup, ComboboxPortal, ComboboxRow, ComboboxSeparator, ComboboxTrigger, ComboboxTriggerIndicator, ComboboxValue, ContextMenu, ContextMenuCheckboxItem, ContextMenuCheckboxItemIndicator, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRadioItemIndicator, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSubmenu, ContextMenuSubmenuTrigger, ContextMenuTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemCount, DropdownMenuLabel, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRadioItemIndicator, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSubmenu, DropdownMenuSubmenuTrigger, DropdownMenuTrigger, EmptyState, EmptyStateActions, EmptyStateContent, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupInput, Kbd, KbdGroup, Label, LabelAsterisk, LabelOptional, LabelSub, NotificationCenter, NotificationCenterActionButton, NotificationCenterCount, NotificationCenterEmptyState, NotificationCenterHeader, NotificationCenterItem, NotificationCenterItemActions, NotificationCenterItemBody, NotificationCenterItemContent, NotificationCenterItemIcon, NotificationCenterItemRow, NotificationCenterItemTitle, NotificationCenterList, NotificationCenterPopup, NotificationCenterScroller, NotificationCenterTitle, NotificationCenterTrigger, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverPopup, PopoverPortal, PopoverSeparator, PopoverTitle, PopoverTrigger, PopoverViewport, RadioGroup, RadioGroupIndicator, RadioGroupItem, SegmentedControl, SegmentedControlCount, SegmentedControlItem, SegmentedControlLabel, Select, SelectArrow, SelectContent, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectList, SelectPopup, SelectPortal, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue, SortableTabsList, SortableTabsTab, Spinner, Status, Tabs, TabsBackground, TabsIndicator, TabsLabel, TabsList, TabsPanel, TabsTab, Text, TextHeading, TextMono, TextSans, Textarea, TextareaCounter, TextareaGroup, ThemeProvider, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, buttonVariants, cn, useOrderedTabs, useTheme, useThemeFamily };
4594
+ export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Banner, BannerAction, BannerDescription, BannerTitle, Button, Checkbox, Combobox, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxControl, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxHeader, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxList, ComboboxPopup, ComboboxPortal, ComboboxRow, ComboboxSeparator, ComboboxTrigger, ComboboxTriggerIndicator, ComboboxValue, ContextMenu, ContextMenuCheckboxItem, ContextMenuCheckboxItemIndicator, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRadioItemIndicator, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSubmenu, ContextMenuSubmenuTrigger, ContextMenuTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemCount, DropdownMenuLabel, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRadioItemIndicator, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSubmenu, DropdownMenuSubmenuTrigger, DropdownMenuTrigger, EmptyState, EmptyStateActions, EmptyStateContent, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupInput, Kbd, KbdGroup, Label, LabelAsterisk, LabelOptional, LabelSub, NotificationCenter, NotificationCenterActionButton, NotificationCenterCount, NotificationCenterEmptyState, NotificationCenterHeader, NotificationCenterItem, NotificationCenterItemActions, NotificationCenterItemBody, NotificationCenterItemContent, NotificationCenterItemIcon, NotificationCenterItemRow, NotificationCenterItemTitle, NotificationCenterList, NotificationCenterPopup, NotificationCenterScroller, NotificationCenterTitle, NotificationCenterTrigger, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverPopup, PopoverPortal, PopoverSeparator, PopoverTitle, PopoverTrigger, PopoverViewport, RadioGroup, RadioGroupIndicator, RadioGroupItem, SegmentedControl, SegmentedControlCount, SegmentedControlItem, SegmentedControlLabel, Select, SelectArrow, SelectContent, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectList, SelectPopup, SelectPortal, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue, Separator, SortableTabsList, SortableTabsTab, Spinner, Status, Tabs, TabsBackground, TabsIndicator, TabsLabel, TabsList, TabsPanel, TabsTab, Text, TextHeading, TextMono, TextSans, Textarea, TextareaCounter, TextareaGroup, ThemeProvider, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, buttonVariants, cn, useOrderedTabs, useTheme, useThemeFamily };