@marigold/theme-rui 5.0.1 → 5.2.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.
- package/dist/appearances.cjs +368 -0
- package/dist/appearances.cjs.map +1 -0
- package/dist/appearances.d.cts +239 -0
- package/dist/appearances.d.cts.map +1 -0
- package/dist/appearances.d.mts +239 -0
- package/dist/appearances.d.mts.map +1 -0
- package/dist/appearances.mjs +366 -0
- package/dist/appearances.mjs.map +1 -0
- package/dist/index.cjs +606 -475
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +604 -473
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1007 -610
- package/dist/theme.css +55 -31
- package/dist/ui.css +151 -7
- package/dist/utils.css +0 -57
- package/dist/variants.css +1 -0
- package/package.json +18 -11
package/dist/index.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { cva } from "@marigold/system";
|
|
2
2
|
|
|
3
|
-
//#region
|
|
3
|
+
//#region \0rolldown/runtime.js
|
|
4
4
|
var __defProp = Object.defineProperty;
|
|
5
|
-
var
|
|
5
|
+
var __exportAll = (all, no_symbols) => {
|
|
6
6
|
let target = {};
|
|
7
7
|
for (var name in all) {
|
|
8
8
|
__defProp(target, name, {
|
|
@@ -10,7 +10,7 @@ var __export = (all, symbols) => {
|
|
|
10
10
|
enumerable: true
|
|
11
11
|
});
|
|
12
12
|
}
|
|
13
|
-
if (
|
|
13
|
+
if (!no_symbols) {
|
|
14
14
|
__defProp(target, Symbol.toStringTag, { value: "Module" });
|
|
15
15
|
}
|
|
16
16
|
return target;
|
|
@@ -19,81 +19,95 @@ var __export = (all, symbols) => {
|
|
|
19
19
|
//#endregion
|
|
20
20
|
//#region src/components/Accordion.styles.ts
|
|
21
21
|
const Accordion = {
|
|
22
|
-
container: cva(
|
|
22
|
+
container: cva({
|
|
23
|
+
base: "flex-col",
|
|
23
24
|
variants: { variant: {
|
|
24
25
|
default: "",
|
|
25
26
|
card: "space-y-2"
|
|
26
27
|
} },
|
|
27
28
|
defaultVariants: { variant: "default" }
|
|
28
29
|
}),
|
|
29
|
-
item: cva(
|
|
30
|
+
item: cva({
|
|
30
31
|
variants: { variant: {
|
|
31
32
|
default: ["bg-background border-b last:border-b-0 border-border"],
|
|
32
33
|
card: ["ui-surface shadow-elevation-raised py-1 outline-none", "has-[[slot=trigger]:focus-visible]:ui-state-focus outline-none"]
|
|
33
34
|
} },
|
|
34
35
|
defaultVariants: { variant: "default" }
|
|
35
36
|
}),
|
|
36
|
-
header: cva(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
37
|
+
header: cva({
|
|
38
|
+
base: [
|
|
39
|
+
"flex w-full items-center justify-between gap-4 py-2 rounded-md cursor-pointer text-foreground",
|
|
40
|
+
"text-left text-base font-semibold leading-6 transition-all",
|
|
41
|
+
"hover:no-underline",
|
|
42
|
+
"disabled:cursor-not-allowed disabled:text-disabled-foreground"
|
|
43
|
+
],
|
|
42
44
|
variants: { variant: {
|
|
43
45
|
default: "focus-visible:ui-state-focus outline-none",
|
|
44
46
|
card: "px-4 outline-none"
|
|
45
47
|
} },
|
|
46
48
|
defaultVariants: { variant: "default" }
|
|
47
49
|
}),
|
|
48
|
-
panel: cva("overflow-clip h-(--disclosure-panel-height) transition-[height,padding] duration-250"),
|
|
49
|
-
content: cva(
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
50
|
+
panel: cva({ base: "overflow-clip h-(--disclosure-panel-height) transition-[height,padding] duration-250" }),
|
|
51
|
+
content: cva({
|
|
52
|
+
base: "pb-2",
|
|
53
|
+
variants: { variant: {
|
|
54
|
+
default: "",
|
|
55
|
+
card: "px-4"
|
|
56
|
+
} }
|
|
57
|
+
}),
|
|
58
|
+
icon: cva({ base: "pointer-events-none shrink-0 text-muted-foreground transition-transform duration-250" })
|
|
54
59
|
};
|
|
55
60
|
|
|
56
61
|
//#endregion
|
|
57
62
|
//#region src/components/ActionBar.styles.ts
|
|
58
63
|
const ActionBar = {
|
|
59
|
-
container: cva([
|
|
64
|
+
container: cva({ base: [
|
|
60
65
|
"relative w-fit",
|
|
61
|
-
"flex items-center justify-between justify-items-center gap-
|
|
66
|
+
"flex items-center justify-between justify-items-center gap-16",
|
|
62
67
|
"px-6 py-3",
|
|
63
|
-
"shadow-
|
|
64
|
-
"
|
|
65
|
-
"rounded-
|
|
66
|
-
"focus-visible:
|
|
67
|
-
"[&_svg]:pointer-events-none [&_svg]:shrink-0"
|
|
68
|
-
|
|
69
|
-
|
|
68
|
+
"shadow-elevation-overlay",
|
|
69
|
+
"ui-surface-contrast",
|
|
70
|
+
"rounded-full font-medium",
|
|
71
|
+
"focus-visible:ui-state-focus outline-none disabled:ui-state-disabled",
|
|
72
|
+
"[&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
73
|
+
"entering:animate-slide-in",
|
|
74
|
+
"exiting:animate-slide-out"
|
|
75
|
+
] }),
|
|
76
|
+
selection: cva({ base: "flex items-center gap-1" }),
|
|
77
|
+
count: cva({ base: "flex items-center text-sm font-medium whitespace-nowrap" }),
|
|
78
|
+
toolbar: cva({ base: [
|
|
70
79
|
"flex items-center",
|
|
71
|
-
"text-sm font-medium",
|
|
72
|
-
"whitespace-nowrap"
|
|
73
|
-
]),
|
|
74
|
-
actions: cva([
|
|
75
|
-
"flex items-center gap-2",
|
|
76
80
|
"flex-1 justify-center",
|
|
77
|
-
"overflow-x-auto"
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
"
|
|
82
|
-
"transition-colors"
|
|
83
|
-
|
|
81
|
+
"overflow-x-auto",
|
|
82
|
+
"p-1 -m-1"
|
|
83
|
+
] }),
|
|
84
|
+
clearButton: cva({ base: [
|
|
85
|
+
"inline-flex items-center justify-center",
|
|
86
|
+
"shrink-0 size-8 rounded-full cursor-pointer transition-colors",
|
|
87
|
+
"hover:bg-current/10",
|
|
88
|
+
"focus-visible:ui-state-focus outline-none",
|
|
89
|
+
"disabled:ui-state-disabled",
|
|
90
|
+
"[&_svg]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
|
|
91
|
+
] }),
|
|
92
|
+
actionButton: cva({ base: [
|
|
93
|
+
"ui-button-base",
|
|
94
|
+
"hover:bg-current/10",
|
|
95
|
+
"text-sm h-button p-squish-relaxed [&_svg]:size-4"
|
|
96
|
+
] })
|
|
84
97
|
};
|
|
85
98
|
|
|
86
99
|
//#endregion
|
|
87
100
|
//#region src/components/Autocomplete.styles.ts
|
|
88
|
-
const Autocomplete = { mobileTrigger: cva("group/input relative flex items-center") };
|
|
101
|
+
const Autocomplete = { mobileTrigger: cva({ base: "group/input relative flex items-center" }) };
|
|
89
102
|
|
|
90
103
|
//#endregion
|
|
91
104
|
//#region src/components/Badge.styles.ts
|
|
92
|
-
const Badge = cva(
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
]
|
|
105
|
+
const Badge = cva({
|
|
106
|
+
base: [
|
|
107
|
+
"inline-flex items-center justify-center rounded-full px-2 text-xs font-medium leading-normal transition-colors",
|
|
108
|
+
"focus-visible:ui-state-focus outline-none",
|
|
109
|
+
"has-[svg]:gap-1"
|
|
110
|
+
],
|
|
97
111
|
variants: { variant: {
|
|
98
112
|
default: "bg-muted text-foreground border border-border",
|
|
99
113
|
primary: "bg-brand text-brand-foreground ",
|
|
@@ -109,31 +123,24 @@ const Badge = cva([
|
|
|
109
123
|
|
|
110
124
|
//#endregion
|
|
111
125
|
//#region src/components/Button.styles.ts
|
|
112
|
-
const
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
];
|
|
119
|
-
const Button = cva([
|
|
120
|
-
...buttonBase,
|
|
121
|
-
"duration-150 active:scale-[0.97] pressed:not-expanded:scale-[0.97]",
|
|
122
|
-
"pending:text-disabled-foreground pending:bg-disabled pending:cursor-not-allowed pending:border-none"
|
|
123
|
-
], {
|
|
126
|
+
const Button = cva({
|
|
127
|
+
base: [
|
|
128
|
+
"ui-button-base gap-2",
|
|
129
|
+
"duration-150 active:scale-[0.97] pressed:not-aria-expanded:scale-[0.97]",
|
|
130
|
+
"pending:ui-state-disabled"
|
|
131
|
+
],
|
|
124
132
|
variants: {
|
|
125
133
|
variant: {
|
|
126
|
-
primary: "
|
|
134
|
+
primary: ["ui-surface-contrast", "hover:[--ui-background-color:oklch(from_var(--color-brand)_calc(l-0.05)_c_h)]"],
|
|
127
135
|
secondary: [
|
|
128
136
|
"ui-surface shadow-elevation-border",
|
|
129
137
|
"hover:[--ui-background-color:var(--color-hover)] hover:text-foreground",
|
|
130
|
-
"disabled:border-0 disabled:shadow-none disabled:[--ui-background-color:var(--color-disabled)]",
|
|
131
138
|
"expanded:[--ui-background-color:var(--color-hover)]"
|
|
132
139
|
],
|
|
133
|
-
ghost: "hover:bg-
|
|
140
|
+
ghost: "hover:bg-current/10",
|
|
134
141
|
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
|
135
|
-
"destructive-ghost": "text-destructive hover:bg-
|
|
136
|
-
link: "text-link
|
|
142
|
+
"destructive-ghost": "text-destructive hover:bg-current/8",
|
|
143
|
+
link: "text-link ui-touch-hitbox"
|
|
137
144
|
},
|
|
138
145
|
size: {
|
|
139
146
|
default: "text-sm",
|
|
@@ -206,9 +213,10 @@ const Button = cva([
|
|
|
206
213
|
|
|
207
214
|
//#endregion
|
|
208
215
|
//#region src/components/Card.styles.ts
|
|
209
|
-
const Card = cva(
|
|
216
|
+
const Card = cva({
|
|
217
|
+
base: ["p-4 rounded-md shadow-elevation-raised"],
|
|
210
218
|
variants: { variant: {
|
|
211
|
-
default: "ui-surface
|
|
219
|
+
default: "ui-surface",
|
|
212
220
|
master: "bg-access-master/30 border border-access-master",
|
|
213
221
|
admin: "bg-access-admin/30 border border-access-admin"
|
|
214
222
|
} },
|
|
@@ -218,34 +226,34 @@ const Card = cva(["p-4 rounded-md"], {
|
|
|
218
226
|
//#endregion
|
|
219
227
|
//#region src/components/Checkbox.styles.ts
|
|
220
228
|
const Checkbox = {
|
|
221
|
-
checkbox: cva([
|
|
229
|
+
checkbox: cva({ base: [
|
|
222
230
|
"grid size-4 shrink-0 place-content-center rounded",
|
|
223
231
|
"border border-input shadow-xs",
|
|
224
232
|
"group-focus-visible/checkbox:ui-state-focus group-focus-visible/checkbox:border-(--ui-border-color) outline-none",
|
|
225
233
|
"group-disabled/checkbox:group-selected/checkbox:bg-disabled group-disabled/checkbox:border-disabled! group-disabled/checkbox:text-disabled-foreground group-disabled/checkbox:cursor-not-allowed",
|
|
226
234
|
"group-selected/checkbox:border-brand group-selected/checkbox:bg-brand group-selected/checkbox:text-brand-foreground",
|
|
227
235
|
"group-[indeterminate]/checkbox:border-brand group-[indeterminate]/checkbox:bg-brand group-[indeterminate]/checkbox:text-brand-foreground"
|
|
228
|
-
]),
|
|
229
|
-
container: cva("cursor-pointer read-only:cursor-default gap-2"),
|
|
230
|
-
label: cva([
|
|
236
|
+
] }),
|
|
237
|
+
container: cva({ base: "cursor-pointer read-only:cursor-default gap-2" }),
|
|
238
|
+
label: cva({ base: [
|
|
231
239
|
"flex items-center gap-1",
|
|
232
240
|
"text-sm leading-4 group-[&]/checkboxgroup:font-normal font-medium text-foreground",
|
|
233
241
|
"group-disabled/checkbox:text-disabled-foreground"
|
|
234
|
-
]),
|
|
235
|
-
group: cva("flex flex-col gap-1")
|
|
242
|
+
] }),
|
|
243
|
+
group: cva({ base: "flex flex-col gap-1" })
|
|
236
244
|
};
|
|
237
245
|
|
|
238
246
|
//#endregion
|
|
239
247
|
//#region src/components/Calendar.styles.ts
|
|
240
248
|
const Calendar = {
|
|
241
|
-
calendar: cva([
|
|
249
|
+
calendar: cva({ base: [
|
|
242
250
|
"ui-surface shadow-elevation-border p-2",
|
|
243
251
|
"group-data-trigger/popover:shadow-elevation-overlay",
|
|
244
252
|
"group-[[role=dialog]]/tray:shadow-none group-[[role=dialog]]/tray:border-0 group-[[role=dialog]]/tray:p-0 group-[[role=dialog]]/tray:place-self-center"
|
|
245
|
-
]),
|
|
246
|
-
calendarContainer: cva("flex gap-4"),
|
|
247
|
-
calendarMonth: cva("min-w-[250px] flex-1"),
|
|
248
|
-
calendarCell: cva([
|
|
253
|
+
] }),
|
|
254
|
+
calendarContainer: cva({ base: "flex gap-4" }),
|
|
255
|
+
calendarMonth: cva({ base: "min-w-[250px] flex-1" }),
|
|
256
|
+
calendarCell: cva({ base: [
|
|
249
257
|
"relative flex size-9 items-center justify-center whitespace-nowrap rounded-lg justify-self-center",
|
|
250
258
|
"border border-transparent p-0 text-sm font-normal text-foreground",
|
|
251
259
|
"outline-offset-2 duration-150 transition-all",
|
|
@@ -255,67 +263,67 @@ const Calendar = {
|
|
|
255
263
|
"disabled:pointer-events-none disabled:opacity-30",
|
|
256
264
|
"unavailable:pointer-events-none unavailable:opacity-30 unavailable:line-through",
|
|
257
265
|
"outside-month:hidden"
|
|
258
|
-
]),
|
|
259
|
-
calendarControllers: cva([
|
|
266
|
+
] }),
|
|
267
|
+
calendarControllers: cva({ base: [
|
|
260
268
|
"size-9 rounded-lg",
|
|
261
|
-
"text-muted-foreground
|
|
269
|
+
"text-muted-foreground",
|
|
262
270
|
"transition-colors",
|
|
263
271
|
"focus-visible:ui-state-focus outline-none"
|
|
264
|
-
]),
|
|
265
|
-
calendarHeader: cva(["size-9 rounded-lg p-0 text-xs font-medium text-muted-foreground
|
|
266
|
-
calendarGrid: cva("[&_td]:p-2 [&_td]:group-[[role=dialog]]/tray:p-0.75"),
|
|
267
|
-
calendarListboxButton: cva([
|
|
272
|
+
] }),
|
|
273
|
+
calendarHeader: cva({ base: ["size-9 rounded-lg p-0 text-xs font-medium text-muted-foreground"] }),
|
|
274
|
+
calendarGrid: cva({ base: "[&_td]:p-2 [&_td]:group-[[role=dialog]]/tray:p-0.75" }),
|
|
275
|
+
calendarListboxButton: cva({ base: [
|
|
268
276
|
"rounded-md text-sm font-medium transition-[color,box-shadow]",
|
|
269
277
|
"px-4 py-2",
|
|
270
278
|
"focus-visible:ui-state-focus outline-none",
|
|
271
279
|
"cursor-pointer",
|
|
272
280
|
"hover:bg-hover",
|
|
273
281
|
"aria-selected:bg-brand aria-selected:text-brand-foreground aria-selected:shadow-xs aria-selected:hover:bg-brand/90"
|
|
274
|
-
]),
|
|
275
|
-
select: cva([
|
|
276
|
-
"[&svg]:text-muted-foreground
|
|
282
|
+
] }),
|
|
283
|
+
select: cva({ base: [
|
|
284
|
+
"[&svg]:text-muted-foreground",
|
|
277
285
|
"flex w-full px-3 py-2 rounded-lg shadow-xs border border-input bg-background text-sm text-foreground transition-shadow",
|
|
278
286
|
"focus-visible:ui-state-focus outline-none",
|
|
279
287
|
"h-input",
|
|
280
288
|
"disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled",
|
|
281
289
|
"cursor-pointer"
|
|
282
|
-
])
|
|
290
|
+
] })
|
|
283
291
|
};
|
|
284
292
|
|
|
285
293
|
//#endregion
|
|
286
294
|
//#region src/components/CloseButton.styles.ts
|
|
287
|
-
const CloseButton = cva([
|
|
295
|
+
const CloseButton = cva({ base: [
|
|
288
296
|
"flex items-center justify-center whitespace-nowrap",
|
|
289
297
|
"cursor-pointer",
|
|
290
|
-
"transition-[color,box-shadow]",
|
|
298
|
+
"transition-[color,box-shadow,transform]",
|
|
291
299
|
"focus-visible:ui-state-focus outline-none",
|
|
292
300
|
"rounded-full",
|
|
293
|
-
"
|
|
301
|
+
"ui-press",
|
|
294
302
|
"[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100"
|
|
295
|
-
]);
|
|
303
|
+
] });
|
|
296
304
|
|
|
297
305
|
//#endregion
|
|
298
306
|
//#region src/components/ComboBox.styles.ts
|
|
299
307
|
const ComboBox = {
|
|
300
|
-
icon: cva("text-muted-foreground/80 right-2"),
|
|
301
|
-
mobileTrigger: cva("group/input relative flex items-center")
|
|
308
|
+
icon: cva({ base: "text-muted-foreground/80 right-2" }),
|
|
309
|
+
mobileTrigger: cva({ base: "group/input relative flex items-center" })
|
|
302
310
|
};
|
|
303
311
|
|
|
304
312
|
//#endregion
|
|
305
313
|
//#region src/components/Collapsible.styles.ts
|
|
306
314
|
const Collapsible = {
|
|
307
|
-
container: cva(),
|
|
308
|
-
trigger: cva(
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
+
container: cva({}),
|
|
316
|
+
trigger: cva({
|
|
317
|
+
base: [
|
|
318
|
+
"inline-flex gap-2 whitespace-nowrap rounded-md font-medium transition-[color,box-shadow,transform]",
|
|
319
|
+
"ui-interactive",
|
|
320
|
+
"ui-press",
|
|
321
|
+
"[&_svg]:pointer-events-none [&_svg]:shrink-0"
|
|
322
|
+
],
|
|
315
323
|
variants: {
|
|
316
324
|
variant: {
|
|
317
325
|
default: "",
|
|
318
|
-
link: "text-link
|
|
326
|
+
link: "text-link ui-touch-hitbox"
|
|
319
327
|
},
|
|
320
328
|
size: { default: "text-sm" }
|
|
321
329
|
},
|
|
@@ -324,19 +332,20 @@ const Collapsible = {
|
|
|
324
332
|
size: "default"
|
|
325
333
|
}
|
|
326
334
|
}),
|
|
327
|
-
content: cva()
|
|
335
|
+
content: cva({})
|
|
328
336
|
};
|
|
329
337
|
|
|
330
338
|
//#endregion
|
|
331
339
|
//#region src/components/ContextualHelp.styles.ts
|
|
332
340
|
const ContextualHelp = {
|
|
333
|
-
trigger: cva(
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
341
|
+
trigger: cva({
|
|
342
|
+
base: [
|
|
343
|
+
"inline-flex items-center justify-center rounded-full transition-[color,box-shadow]",
|
|
344
|
+
"hover:ui-state-focus hover:text-foreground",
|
|
345
|
+
"[&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
346
|
+
"focus-visible:ui-state-focus outline-none",
|
|
347
|
+
"cursor-pointer ui-touch-hitbox"
|
|
348
|
+
],
|
|
340
349
|
variants: {
|
|
341
350
|
variant: {
|
|
342
351
|
help: "",
|
|
@@ -346,73 +355,75 @@ const ContextualHelp = {
|
|
|
346
355
|
},
|
|
347
356
|
defaultVariants: { size: "default" }
|
|
348
357
|
}),
|
|
349
|
-
container: cva([
|
|
358
|
+
container: cva({ base: [
|
|
350
359
|
"outline-none",
|
|
351
|
-
"ui-surface shadow-elevation-overlay
|
|
360
|
+
"ui-surface shadow-elevation-overlay ui-scrollbar",
|
|
352
361
|
"p-5",
|
|
353
362
|
"data-small:max-w-3xs data-medium:max-w-xs data-large:max-w-md"
|
|
354
|
-
]),
|
|
355
|
-
title: cva("text-lg font-semibold mb-1"),
|
|
356
|
-
content: cva("text-sm")
|
|
363
|
+
] }),
|
|
364
|
+
title: cva({ base: "text-lg font-semibold mb-1" }),
|
|
365
|
+
content: cva({ base: "text-sm" })
|
|
357
366
|
};
|
|
358
367
|
|
|
359
368
|
//#endregion
|
|
360
369
|
//#region src/components/DateField.styles.ts
|
|
361
370
|
const DateField = {
|
|
362
|
-
field: cva([
|
|
371
|
+
field: cva({ base: [
|
|
363
372
|
"ui-surface shadow-elevation-border h-input",
|
|
364
373
|
"flex items-center",
|
|
365
374
|
"disabled:ui-state-disabled",
|
|
366
375
|
"group-read-only/field:ui-state-readonly",
|
|
367
376
|
"has-focus:ui-state-focus",
|
|
368
377
|
"has-invalid:ui-state-error has-focus:has-invalid:ring-destructive/20"
|
|
369
|
-
]),
|
|
370
|
-
input: cva(["ui-input", "cursor-text"]),
|
|
371
|
-
segment: cva([
|
|
372
|
-
"inline rounded p-0.5
|
|
378
|
+
] }),
|
|
379
|
+
input: cva({ base: ["ui-input", "cursor-text"] }),
|
|
380
|
+
segment: cva({ base: [
|
|
381
|
+
"group/segment inline rounded leading-none whitespace-pre p-0.5 outline-0 caret-transparent",
|
|
382
|
+
"text-foreground",
|
|
383
|
+
"data-placeholder:text-placeholder type-literal:text-placeholder type-literal:px-0",
|
|
384
|
+
"data-focused:bg-stone-300 data-focused:text-foreground data-focused:data-placeholder:text-foreground",
|
|
373
385
|
"disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled",
|
|
374
|
-
"data-focused:bg-focus",
|
|
375
386
|
"data-placeholder:disabled:text-disabled-foreground",
|
|
376
|
-
"invalid:
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
"whitespace-pre",
|
|
380
|
-
"data-placeholder:text-placeholder text-foreground data-focused:bg-focus data-focused:text-foreground rounded leading-none"
|
|
381
|
-
]),
|
|
382
|
-
action: cva("fill-muted-foreground disabled:text-disabled-foreground group-invalid/field:fill-destructive")
|
|
387
|
+
"invalid:text-destructive invalid:data-focused:bg-destructive invalid:data-focused:text-destructive-foreground invalid:data-focused:data-placeholder:text-destructive-foreground"
|
|
388
|
+
] }),
|
|
389
|
+
action: cva({ base: "fill-muted-foreground disabled:text-disabled-foreground group-invalid/field:fill-destructive" })
|
|
383
390
|
};
|
|
384
391
|
|
|
385
392
|
//#endregion
|
|
386
393
|
//#region src/components/DatePicker.styles.ts
|
|
387
|
-
const DatePicker = cva([
|
|
394
|
+
const DatePicker = cva({ base: [
|
|
388
395
|
"h-input pr-3",
|
|
389
|
-
"text-muted-foreground
|
|
396
|
+
"text-muted-foreground",
|
|
390
397
|
"hover:text-brand",
|
|
391
398
|
"disabled:cursor-not-allowed",
|
|
392
|
-
"
|
|
393
|
-
]);
|
|
399
|
+
"ui-touch-hitbox"
|
|
400
|
+
] });
|
|
394
401
|
|
|
395
402
|
//#endregion
|
|
396
403
|
//#region src/components/Dialog.styles.ts
|
|
397
404
|
const Dialog = {
|
|
398
|
-
closeButton: cva(["absolute top-6 right-3", "size-7 "]),
|
|
399
|
-
container: cva(
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
+
closeButton: cva({ base: ["absolute top-6 right-3", "size-7 "] }),
|
|
406
|
+
container: cva({
|
|
407
|
+
base: ["flex flex-col gap-0 rounded-xl p-6 overflow-y-auto", "ui-surface shadow-elevation-overlay ui-scrollbar"],
|
|
408
|
+
variants: {
|
|
409
|
+
variant: {},
|
|
410
|
+
size: {
|
|
411
|
+
xsmall: "",
|
|
412
|
+
small: "",
|
|
413
|
+
medium: ""
|
|
414
|
+
}
|
|
405
415
|
}
|
|
406
|
-
}
|
|
407
|
-
header: cva("flex flex-col gap-1 text-center sm:text-left"),
|
|
408
|
-
title: cva("text-lg font-semibold mb-1"),
|
|
409
|
-
content: cva("text-muted-foreground text-sm"),
|
|
410
|
-
actions: cva("flex flex-col-reverse gap-3 sm:flex-row sm:justify-end mt-4")
|
|
416
|
+
}),
|
|
417
|
+
header: cva({ base: "flex flex-col gap-1 text-center sm:text-left" }),
|
|
418
|
+
title: cva({ base: "text-lg font-semibold mb-1" }),
|
|
419
|
+
content: cva({ base: "text-muted-foreground text-sm" }),
|
|
420
|
+
actions: cva({ base: "flex flex-col-reverse gap-3 sm:flex-row sm:justify-end mt-4" })
|
|
411
421
|
};
|
|
412
422
|
|
|
413
423
|
//#endregion
|
|
414
424
|
//#region src/components/Divider.styles.ts
|
|
415
|
-
const Divider = cva(
|
|
425
|
+
const Divider = cva({
|
|
426
|
+
base: "bg-border h-px w-full",
|
|
416
427
|
variants: { variant: {
|
|
417
428
|
default: "",
|
|
418
429
|
bold: "h-0.5"
|
|
@@ -423,47 +434,49 @@ const Divider = cva("bg-border h-px w-full", {
|
|
|
423
434
|
//#endregion
|
|
424
435
|
//#region src/components/Drawer.styles.ts
|
|
425
436
|
const Drawer = {
|
|
426
|
-
overlay: cva([
|
|
437
|
+
overlay: cva({ base: [
|
|
427
438
|
"group/overlay",
|
|
428
|
-
"
|
|
429
|
-
"
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
439
|
+
"[--slide-offset:1rem]",
|
|
440
|
+
"inset-y-4 right-4 entering:animate-slide-in-right exiting:animate-slide-out-right"
|
|
441
|
+
] }),
|
|
442
|
+
container: cva({
|
|
443
|
+
base: [
|
|
444
|
+
"w-full relative grid-rows-[auto_1fr_auto]",
|
|
445
|
+
"rounded-xl ui-surface util-scrollbar",
|
|
446
|
+
"shadow-[var(--shadow-elevation-overlay),0_0_3px_1px_oklch(0_0_0/0.06)]",
|
|
447
|
+
"[--ui-border-color:oklch(from_var(--color-surface-border)_calc(l-0.1)_c_h)]",
|
|
448
|
+
"h-full"
|
|
449
|
+
],
|
|
450
|
+
variants: { size: {
|
|
451
|
+
xsmall: "w-64",
|
|
452
|
+
small: "w-72",
|
|
453
|
+
medium: "w-96"
|
|
454
|
+
} }
|
|
455
|
+
}),
|
|
456
|
+
closeButton: cva({ base: ["absolute top-3.5 right-3", "size-7"] }),
|
|
457
|
+
header: cva({ base: "ui-panel-header" }),
|
|
458
|
+
title: cva({ base: "font-semibold text-base" }),
|
|
459
|
+
content: cva({ base: "px-6 py-4 overflow-y-auto outline-none" }),
|
|
460
|
+
actions: cva({ base: "ui-panel-actions" })
|
|
448
461
|
};
|
|
449
462
|
|
|
450
463
|
//#endregion
|
|
451
464
|
//#region src/components/EmptyState.styles.ts
|
|
452
465
|
const EmptyState = {
|
|
453
|
-
container: cva(["mx-auto flex max-w-sm flex-col items-center p-6"]),
|
|
454
|
-
title: cva(["text-lg"]),
|
|
455
|
-
description: cva(["text-muted-foreground text-sm text-center"]),
|
|
456
|
-
action: cva(["mt-6"])
|
|
466
|
+
container: cva({ base: ["mx-auto flex max-w-sm flex-col items-center p-6"] }),
|
|
467
|
+
title: cva({ base: ["text-lg"] }),
|
|
468
|
+
description: cva({ base: ["text-muted-foreground text-sm text-center"] }),
|
|
469
|
+
action: cva({ base: ["mt-6"] })
|
|
457
470
|
};
|
|
458
471
|
|
|
459
472
|
//#endregion
|
|
460
473
|
//#region src/components/IconButton.styles.ts
|
|
461
|
-
const IconButton = cva(
|
|
474
|
+
const IconButton = cva({ variants: { variant: { navigation: "ui-button-base text-sm hover:bg-current/8 h-9 py-2 px-2.5 disabled:pointer-events-none" } } });
|
|
462
475
|
|
|
463
476
|
//#endregion
|
|
464
477
|
//#region src/components/Input.styles.ts
|
|
465
478
|
const Input = {
|
|
466
|
-
input: cva([
|
|
479
|
+
input: cva({ base: [
|
|
467
480
|
"ui-surface shadow-elevation-border ui-input",
|
|
468
481
|
"disabled:ui-state-disabled",
|
|
469
482
|
"group-read-only/field:ui-state-readonly",
|
|
@@ -472,29 +485,25 @@ const Input = {
|
|
|
472
485
|
"group-read-only/field:cursor-default",
|
|
473
486
|
"group-data-icon/input:pl-8",
|
|
474
487
|
"group-data-action/input:pr-7",
|
|
475
|
-
"[&[type=file]]:cursor-pointer [&[type=file]]:border-solid [&[type=file]]:bg-background [&[type=file]]:h-[calc(var(--spacing-input)-2px)] [&[type=file]]:pl-0 [&[type=file]]:pr-3 [&[type=file]]:italic [&[type=file]]:text-muted-foreground
|
|
488
|
+
"[&[type=file]]:cursor-pointer [&[type=file]]:border-solid [&[type=file]]:bg-background [&[type=file]]:h-[calc(var(--spacing-input)-2px)] [&[type=file]]:pl-0 [&[type=file]]:pr-3 [&[type=file]]:italic [&[type=file]]:text-muted-foreground",
|
|
476
489
|
"file:cursor-pointer file:me-3 file:h-full file:border-0 file:border-r file:border-solid file:border-input file:bg-transparent file:px-3 file:text-sm file:font-medium file:not-italic file:text-foreground",
|
|
477
490
|
"[&[type=color]]:h-input",
|
|
478
491
|
"[&::-webkit-color-swatch-wrapper]:p-0",
|
|
479
492
|
"[&::-webkit-color-swatch]:p-2 [&::-moz-color-swatch]:p-2",
|
|
480
493
|
"[&::-webkit-color-swatch]:rounded-[inherit] [&::-moz-color-swatch]:rounded-[inherit]",
|
|
481
494
|
"[&::-webkit-color-swatch]:border-0 [&::-moz-color-swatch]:border-0"
|
|
482
|
-
]),
|
|
483
|
-
icon: cva([
|
|
484
|
-
|
|
485
|
-
"text-muted-foreground disabled:text-disabled-foreground",
|
|
486
|
-
"disabled:text-gray-50"
|
|
487
|
-
]),
|
|
488
|
-
action: cva(["text-muted-foreground pr-1 right-2"])
|
|
495
|
+
] }),
|
|
496
|
+
icon: cva({ base: ["pointer-events-none left-2.5", "text-muted-foreground disabled:text-disabled-foreground"] }),
|
|
497
|
+
action: cva({ base: ["text-muted-foreground pr-1 right-2"] })
|
|
489
498
|
};
|
|
490
499
|
|
|
491
500
|
//#endregion
|
|
492
501
|
//#region src/components/Field.styles.ts
|
|
493
|
-
const Field = cva("
|
|
502
|
+
const Field = cva({ base: "" });
|
|
494
503
|
|
|
495
504
|
//#endregion
|
|
496
505
|
//#region src/components/Headline.styles.ts
|
|
497
|
-
const Headline = cva(
|
|
506
|
+
const Headline = cva({ variants: { size: {
|
|
498
507
|
"level-1": "text-3xl font-extrabold",
|
|
499
508
|
"level-2": "text-2xl font-bold",
|
|
500
509
|
"level-3": "text-xl font-semibold",
|
|
@@ -506,28 +515,29 @@ const Headline = cva("", { variants: { size: {
|
|
|
506
515
|
//#endregion
|
|
507
516
|
//#region src/components/HelpText.styles.ts
|
|
508
517
|
const HelpText = {
|
|
509
|
-
container: cva([
|
|
518
|
+
container: cva({ base: [
|
|
510
519
|
"text-xs text-muted-foreground group-disabled/field:text-disabled-foreground",
|
|
511
520
|
"group-invalid/field:text-destructive",
|
|
512
521
|
"has-[+_[aria-hidden=true]]:mb-0"
|
|
513
|
-
]),
|
|
514
|
-
icon: cva("")
|
|
522
|
+
] }),
|
|
523
|
+
icon: cva({ base: "" })
|
|
515
524
|
};
|
|
516
525
|
|
|
517
526
|
//#endregion
|
|
518
527
|
//#region src/components/Label.styles.ts
|
|
519
|
-
const Label = cva([
|
|
528
|
+
const Label = cva({ base: [
|
|
520
529
|
"flex items-center gap-1",
|
|
521
530
|
"text-sm font-medium leading-none text-foreground",
|
|
522
531
|
"group-disabled/field:cursor-not-allowed group-disabled/field:text-disabled-foreground",
|
|
523
532
|
"group-required/field:after:content-[\"*\"]",
|
|
524
533
|
"group-required/field:after:-ml-1",
|
|
525
534
|
"group-required/field:after:text-destructive"
|
|
526
|
-
]);
|
|
535
|
+
] });
|
|
527
536
|
|
|
528
537
|
//#endregion
|
|
529
538
|
//#region src/components/Link.styles.ts
|
|
530
|
-
const Link = cva(
|
|
539
|
+
const Link = cva({
|
|
540
|
+
base: "aria-[disabled]:cursor-not-allowed",
|
|
531
541
|
variants: {
|
|
532
542
|
variant: {
|
|
533
543
|
default: "text-link font-normal",
|
|
@@ -547,37 +557,39 @@ const Link = cva("aria-[disabled]:cursor-not-allowed", {
|
|
|
547
557
|
//#endregion
|
|
548
558
|
//#region src/components/List.styles.ts
|
|
549
559
|
const List = {
|
|
550
|
-
ul: cva(
|
|
560
|
+
ul: cva({
|
|
561
|
+
base: "ml-6 list-outside list-disc space-y-1 marker:text-muted-foreground",
|
|
551
562
|
variants: { size: {
|
|
552
563
|
default: "",
|
|
553
564
|
small: "*:text-sm"
|
|
554
565
|
} },
|
|
555
566
|
defaultVariants: { size: "default" }
|
|
556
567
|
}),
|
|
557
|
-
ol: cva(
|
|
568
|
+
ol: cva({
|
|
569
|
+
base: "ml-6 list-outside list-decimal space-y-1 marker:text-muted-foreground",
|
|
558
570
|
variants: { size: {
|
|
559
571
|
default: "",
|
|
560
572
|
small: "*:text-sm"
|
|
561
573
|
} },
|
|
562
574
|
defaultVariants: { size: "default" }
|
|
563
575
|
}),
|
|
564
|
-
item: cva("")
|
|
576
|
+
item: cva({ base: "" })
|
|
565
577
|
};
|
|
566
578
|
|
|
567
579
|
//#endregion
|
|
568
580
|
//#region src/components/ListBox.styles.ts
|
|
569
581
|
const ListBox = {
|
|
570
|
-
container: cva([
|
|
582
|
+
container: cva({ base: [
|
|
571
583
|
"flex ui-surface",
|
|
572
584
|
"not-group-data-trigger/popover:",
|
|
573
585
|
"group-data-trigger/popover:shadow-elevation-overlay",
|
|
574
586
|
"group-data-trigger/popover:w-full",
|
|
575
587
|
"group-data-trigger/popover:overflow-hidden",
|
|
576
588
|
"group-[[role=dialog]]/tray:border-0 group-[[role=dialog]]/tray:shadow-none"
|
|
577
|
-
]),
|
|
578
|
-
list: cva(["p-1 text-sm outline-0 space-y-px overflow-y-auto w-full"]),
|
|
579
|
-
item: cva([
|
|
580
|
-
"relative grid grid-cols-[auto_1fr] items-center gap-x-2 rounded-md px-2 py-1.5 text-sm text-foreground",
|
|
589
|
+
] }),
|
|
590
|
+
list: cva({ base: ["p-1 text-sm outline-0 space-y-px overflow-y-auto w-full"] }),
|
|
591
|
+
item: cva({ base: [
|
|
592
|
+
"relative grid grid-cols-[auto_1fr] items-center gap-x-2 rounded-md px-2 py-1.5 text-sm text-foreground max-sm:min-h-11",
|
|
581
593
|
"[&_.selection-indicator>svg]:invisible [&_.selection-indicator>svg]:block",
|
|
582
594
|
"selected:bg-selected selected:[&_.selection-indicator>svg]:visible",
|
|
583
595
|
"hover:bg-hover hover:text-hover-foreground",
|
|
@@ -585,63 +597,97 @@ const ListBox = {
|
|
|
585
597
|
"focus-visible:ui-state-focus outline-none focus-visible:z-1 transition-[border,color]",
|
|
586
598
|
"cursor-default data-selection-mode:cursor-pointer",
|
|
587
599
|
"[&_[slot=description]]:col-start-2 [&_[slot=description]]:row-start-2 [&_[slot=description]]:text-xs [&_[slot=description]]:text-muted-foreground"
|
|
588
|
-
]),
|
|
589
|
-
section: cva(""),
|
|
590
|
-
header: cva("[&_header]:px-2 [&_header]:py-1.5 [&_header]:text-xs [&_header]:font-medium [&_header]:text-muted-foreground")
|
|
600
|
+
] }),
|
|
601
|
+
section: cva({ base: "" }),
|
|
602
|
+
header: cva({ base: "[&_header]:px-2 [&_header]:py-1.5 [&_header]:text-xs [&_header]:font-medium [&_header]:text-muted-foreground" })
|
|
591
603
|
};
|
|
592
604
|
|
|
593
605
|
//#endregion
|
|
594
606
|
//#region src/components/Menu.styles.ts
|
|
595
607
|
const Menu = {
|
|
596
|
-
container: cva([
|
|
608
|
+
container: cva({ base: [
|
|
597
609
|
"ui-surface shadow-elevation-overlay w-full",
|
|
598
|
-
"text-foreground overflow-hidden p-1 outline-none",
|
|
610
|
+
"text-foreground overflow-x-hidden p-1 outline-none overflow-y-auto",
|
|
599
611
|
"group-[[role=dialog]]/tray:border-0 group-[[role=dialog]]/tray:shadow-none"
|
|
600
|
-
]),
|
|
601
|
-
item: cva(
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
612
|
+
] }),
|
|
613
|
+
item: cva({
|
|
614
|
+
base: [
|
|
615
|
+
"relative flex cursor-pointer items-center gap-2 rounded-[calc(var(--radius-surface)-3px)] p-2 text-sm outline-hidden select-none text-nowrap max-sm:min-h-11",
|
|
616
|
+
"disabled:text-disabled-foreground",
|
|
617
|
+
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4"
|
|
618
|
+
],
|
|
606
619
|
variants: { variant: {
|
|
607
|
-
default: "text-foreground focus:bg-focus [&_svg]:opacity-60",
|
|
620
|
+
default: "text-foreground focus:bg-focus [&_svg]:text-muted-foreground:opacity-60",
|
|
608
621
|
destructive: "text-destructive focus:bg-destructive/10"
|
|
609
622
|
} },
|
|
610
623
|
defaultVariants: { variant: "default" }
|
|
611
624
|
}),
|
|
612
|
-
section: cva("text-muted-foreground p-2 text-xs font-medium border-t border-t-border in-first:border-t-0"),
|
|
613
|
-
button: cva(
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
625
|
+
section: cva({ base: "text-muted-foreground p-2 text-xs font-medium border-t border-t-border in-first:border-t-0" }),
|
|
626
|
+
button: cva({
|
|
627
|
+
base: [
|
|
628
|
+
"ui-button-base gap-2",
|
|
629
|
+
"duration-150 active:scale-[0.97] pressed:not-aria-expanded:scale-[0.97]",
|
|
630
|
+
"pending:ui-state-disabled"
|
|
631
|
+
],
|
|
619
632
|
variants: {
|
|
620
633
|
variant: {
|
|
621
|
-
default:
|
|
622
|
-
|
|
634
|
+
default: [
|
|
635
|
+
"ui-surface shadow-elevation-border",
|
|
636
|
+
"hover:[--ui-background-color:var(--color-hover)] hover:text-foreground",
|
|
637
|
+
"disabled:border-0 disabled:shadow-none disabled:[--ui-background-color:var(--color-disabled)]",
|
|
638
|
+
"pending:[--ui-background-color:var(--color-disabled)] pending:border-0 pending:shadow-none",
|
|
639
|
+
"expanded:[--ui-background-color:var(--color-hover)]"
|
|
640
|
+
],
|
|
641
|
+
ghost: "hover:bg-hover hover:text-foreground"
|
|
623
642
|
},
|
|
624
643
|
size: {
|
|
625
|
-
default: "
|
|
626
|
-
small: "
|
|
627
|
-
large: "
|
|
628
|
-
icon: "
|
|
644
|
+
default: "text-sm",
|
|
645
|
+
small: "text-xs",
|
|
646
|
+
large: "",
|
|
647
|
+
icon: ""
|
|
629
648
|
}
|
|
630
649
|
},
|
|
631
650
|
defaultVariants: {
|
|
632
651
|
variant: "default",
|
|
633
652
|
size: "default"
|
|
634
|
-
}
|
|
653
|
+
},
|
|
654
|
+
compoundVariants: [
|
|
655
|
+
{
|
|
656
|
+
variant: ["default", "ghost"],
|
|
657
|
+
class: "items-center justify-center"
|
|
658
|
+
},
|
|
659
|
+
{
|
|
660
|
+
variant: ["default", "ghost"],
|
|
661
|
+
size: "default",
|
|
662
|
+
class: "h-button p-squish-relaxed [&_svg]:size-4"
|
|
663
|
+
},
|
|
664
|
+
{
|
|
665
|
+
variant: ["default", "ghost"],
|
|
666
|
+
size: "small",
|
|
667
|
+
class: "h-button-small px-3 [&_svg]:size-3.5"
|
|
668
|
+
},
|
|
669
|
+
{
|
|
670
|
+
variant: ["default", "ghost"],
|
|
671
|
+
size: "large",
|
|
672
|
+
class: "h-button-large px-8 [&_svg]:size-5"
|
|
673
|
+
},
|
|
674
|
+
{
|
|
675
|
+
variant: ["default", "ghost"],
|
|
676
|
+
size: "icon",
|
|
677
|
+
class: "size-button [&_svg]:size-4"
|
|
678
|
+
}
|
|
679
|
+
]
|
|
635
680
|
})
|
|
636
681
|
};
|
|
637
682
|
|
|
638
683
|
//#endregion
|
|
639
684
|
//#region src/components/Modal.styles.ts
|
|
640
|
-
const Modal = cva(
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
]
|
|
685
|
+
const Modal = cva({
|
|
686
|
+
base: [
|
|
687
|
+
"sm:max-h-[min(640px,80vh)]",
|
|
688
|
+
"[--dialog-spacing-x:1rem]",
|
|
689
|
+
"w-[min(calc(100%_-_var(--dialog-spacing-x)),calc(var(--dialog-width)_-_var(--dialog-spacing-x)))]"
|
|
690
|
+
],
|
|
645
691
|
variants: { size: {
|
|
646
692
|
xsmall: "[--dialog-width:480px]",
|
|
647
693
|
small: "[--dialog-width:640px]",
|
|
@@ -653,9 +699,9 @@ const Modal = cva([
|
|
|
653
699
|
//#endregion
|
|
654
700
|
//#region src/components/Multiselect.styles.ts
|
|
655
701
|
const MultiSelect = {
|
|
656
|
-
field: cva("space-y-2"),
|
|
657
|
-
container: cva([
|
|
658
|
-
"ui-surface",
|
|
702
|
+
field: cva({ base: "space-y-2" }),
|
|
703
|
+
container: cva({ base: [
|
|
704
|
+
"ui-surface shadow-elevation-border",
|
|
659
705
|
"px-3 text-sm text-foreground transition-shadow",
|
|
660
706
|
"border border-input rounded-lg outline-hidden",
|
|
661
707
|
"aria-disabled:bg-disabled aria-disabled:text-disabled-foreground aria-disabled:hover:border-input aria-disabled:border-input aria-disabled:cursor-not-allowed",
|
|
@@ -663,8 +709,8 @@ const MultiSelect = {
|
|
|
663
709
|
"has-[input[data-focused=true]]:!border-ring has-[input[data-focused=true]]:!ring-ring/50 has-[input[data-focused=true]]:ring-[3px] has-[input[data-focused=true]]:!outline-none",
|
|
664
710
|
"has-[input[aria-readonly=true]]:bg-muted",
|
|
665
711
|
"min-h-input"
|
|
666
|
-
]),
|
|
667
|
-
input: cva([
|
|
712
|
+
] }),
|
|
713
|
+
input: cva({ base: [
|
|
668
714
|
"bg-transparent flex-1 h-full",
|
|
669
715
|
"leading-loose",
|
|
670
716
|
"data-[focused]:outline-hidden outline-hidden border-0",
|
|
@@ -672,112 +718,105 @@ const MultiSelect = {
|
|
|
672
718
|
"group-data-[icon]/input:pl-5",
|
|
673
719
|
"group-data-[action]/input:pr-8",
|
|
674
720
|
"placeholder:text-placeholder"
|
|
675
|
-
]),
|
|
676
|
-
tag: cva([
|
|
721
|
+
] }),
|
|
722
|
+
tag: cva({ base: [
|
|
677
723
|
"border border-solid border-input rounded-md",
|
|
678
724
|
"bg-background",
|
|
679
725
|
"font-medium text-xs",
|
|
680
726
|
"flex items-center gap-1 ",
|
|
681
727
|
"h-7 px-2 cursor-default"
|
|
682
|
-
]),
|
|
683
|
-
closeButton: cva("size-4 cursor-pointer border-none bg-transparent p-0 leading-normal outline-0"),
|
|
684
|
-
icon: cva("left-1"),
|
|
685
|
-
listContainer: cva(["ui-surface shadow-elevation-overlay mt-0.5 outline-0"]),
|
|
686
|
-
list: cva("pointer-events-auto space-y-1 p-1"),
|
|
687
|
-
option: cva([
|
|
728
|
+
] }),
|
|
729
|
+
closeButton: cva({ base: "size-4 cursor-pointer border-none bg-transparent p-0 leading-normal outline-0" }),
|
|
730
|
+
icon: cva({ base: "left-1" }),
|
|
731
|
+
listContainer: cva({ base: ["ui-surface shadow-elevation-overlay mt-0.5 outline-0"] }),
|
|
732
|
+
list: cva({ base: "pointer-events-auto space-y-1 p-1" }),
|
|
733
|
+
option: cva({ base: [
|
|
688
734
|
"text-sm text-foreground",
|
|
689
735
|
"flex flex-col",
|
|
690
736
|
"cursor-pointer p-2 outline-hidden",
|
|
691
737
|
"[&.isFocused:not([aria-disabled=true])]:text-foreground! [&.isFocused[aria-disabled=true]]:bg-transparent",
|
|
692
738
|
"aria-disabled:text-disabled-foreground aria-disabled:cursor-not-allowed",
|
|
693
739
|
"[&.isFocused:not([aria-disabled=true])]:bg-hover!"
|
|
694
|
-
]),
|
|
695
|
-
valueContainer: cva("gap-2")
|
|
740
|
+
] }),
|
|
741
|
+
valueContainer: cva({ base: "gap-2" })
|
|
696
742
|
};
|
|
697
743
|
|
|
698
744
|
//#endregion
|
|
699
745
|
//#region src/components/NumberField.styles.ts
|
|
700
746
|
const NumberField = {
|
|
701
|
-
group: cva([
|
|
747
|
+
group: cva({ base: [
|
|
702
748
|
"ui-surface shadow-elevation-border h-input",
|
|
703
749
|
"has-invalid:ui-state-error",
|
|
704
|
-
"
|
|
750
|
+
"group-data-disabled/field:ui-state-disabled",
|
|
705
751
|
"group-read-only/field:ui-state-readonly",
|
|
706
752
|
"has-focus:ui-state-focus outline-none"
|
|
707
|
-
]),
|
|
708
|
-
stepper: cva([
|
|
753
|
+
] }),
|
|
754
|
+
stepper: cva({ base: [
|
|
709
755
|
"w-8 h-full text-center shrink-0 grid palce-items-center",
|
|
710
756
|
"text-foreground",
|
|
711
757
|
"disabled:text-disabled-foreground disabled:bg-disabled",
|
|
712
758
|
"border-input!",
|
|
713
759
|
"first-of-type:border-r! first-of-type:rounded-l-[calc(var(--radius-lg)-1px)]",
|
|
714
760
|
"last-of-type:border-l! last-of-type:rounded-r-[calc(var(--radius-lg)-1px)]"
|
|
715
|
-
]),
|
|
716
|
-
input: cva([
|
|
761
|
+
] }),
|
|
762
|
+
input: cva({ base: [
|
|
717
763
|
"ui-input",
|
|
718
764
|
"flex-1",
|
|
719
765
|
"group-data-stepper/field:text-center",
|
|
720
766
|
"disabled:text-disabled-foreground disabled:bg-disabled"
|
|
721
|
-
])
|
|
767
|
+
] })
|
|
722
768
|
};
|
|
723
769
|
|
|
724
770
|
//#endregion
|
|
725
771
|
//#region src/components/Popover.styles.ts
|
|
726
|
-
const Popover = cva([
|
|
772
|
+
const Popover = cva({ base: [
|
|
727
773
|
"group/popover",
|
|
728
774
|
"outline-0",
|
|
729
775
|
"placement-top:mb-1",
|
|
730
776
|
"placement-bottom:mt-1",
|
|
731
777
|
"placement-right:ml-1",
|
|
732
778
|
"placement-left:mr-1"
|
|
733
|
-
]);
|
|
779
|
+
] });
|
|
734
780
|
|
|
735
781
|
//#endregion
|
|
736
782
|
//#region src/components/Radio.styles.ts
|
|
737
783
|
const Radio = {
|
|
738
|
-
container: cva("group-disabled/radio:cursor-not-allowed"),
|
|
739
|
-
label: cva(["text-sm font-normal cursor-pointer w-full", "group-disabled/radio:text-disabled-foreground group-disabled/radio:cursor-not-allowed"]),
|
|
740
|
-
radio: cva([
|
|
784
|
+
container: cva({ base: "group-disabled/radio:cursor-not-allowed" }),
|
|
785
|
+
label: cva({ base: ["text-sm font-normal cursor-pointer w-full", "group-disabled/radio:text-disabled-foreground group-disabled/radio:cursor-not-allowed"] }),
|
|
786
|
+
radio: cva({ base: [
|
|
741
787
|
"aspect-square size-4 rounded-full",
|
|
742
788
|
"border border-input shadow-xs",
|
|
743
789
|
"group-focus-visible/radio:ui-state-focus outline-none",
|
|
744
790
|
"group-disabled/radio:group-selected/radio:bg-disabled group-disabled/radio:border-disabled! group-disabled/radio:cursor-not-allowed",
|
|
745
791
|
"group-selected/radio:border-brand group-selected/radio:bg-brand group-selected/radio:text-brand-foreground"
|
|
746
|
-
]),
|
|
747
|
-
group: cva()
|
|
792
|
+
] }),
|
|
793
|
+
group: cva({})
|
|
748
794
|
};
|
|
749
795
|
|
|
750
796
|
//#endregion
|
|
751
797
|
//#region src/components/Pagination.styles.ts
|
|
752
|
-
const button = [
|
|
753
|
-
"inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors",
|
|
754
|
-
"focus-visible:ui-state-focus outline-none",
|
|
755
|
-
"disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground",
|
|
756
|
-
"[&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
757
|
-
"hover:bg-hover hover:text-hover-foreground",
|
|
758
|
-
"cursor-pointer"
|
|
759
|
-
];
|
|
760
798
|
const Pagination = {
|
|
761
|
-
container: cva("flex items-center justify-center space-x-2"),
|
|
762
|
-
navigationButton: cva([
|
|
763
|
-
|
|
764
|
-
"
|
|
799
|
+
container: cva({ base: "flex items-center justify-center space-x-2" }),
|
|
800
|
+
navigationButton: cva({ base: [
|
|
801
|
+
"ui-button-base",
|
|
802
|
+
"text-sm hover:bg-current/10",
|
|
765
803
|
"h-9 py-2 gap-1 px-2.5",
|
|
766
804
|
"has-[+_[hidden]]:mr-0"
|
|
767
|
-
]),
|
|
768
|
-
pageButton: cva([
|
|
769
|
-
|
|
770
|
-
"bg-background size-9",
|
|
805
|
+
] }),
|
|
806
|
+
pageButton: cva({ base: [
|
|
807
|
+
"ui-button-base",
|
|
808
|
+
"text-sm bg-background size-9",
|
|
771
809
|
"data-[selected=true]:ui-surface data-[selected=true]:shadow-elevation-border"
|
|
772
|
-
]),
|
|
773
|
-
icon: cva("h-4 w-4"),
|
|
774
|
-
ellipsis: cva("text-foreground flex h-8 w-8 items-center justify-center")
|
|
810
|
+
] }),
|
|
811
|
+
icon: cva({ base: "h-4 w-4" }),
|
|
812
|
+
ellipsis: cva({ base: "text-foreground flex h-8 w-8 items-center justify-center" })
|
|
775
813
|
};
|
|
776
814
|
|
|
777
815
|
//#endregion
|
|
778
816
|
//#region src/components/ProgressCircle.styles.ts
|
|
779
817
|
const ProgressCircle = {
|
|
780
|
-
container: cva(
|
|
818
|
+
container: cva({
|
|
819
|
+
base: "stroke-foreground",
|
|
781
820
|
variants: {
|
|
782
821
|
variant: {
|
|
783
822
|
default: "",
|
|
@@ -794,7 +833,7 @@ const ProgressCircle = {
|
|
|
794
833
|
size: "default"
|
|
795
834
|
}
|
|
796
835
|
}),
|
|
797
|
-
loader: cva(
|
|
836
|
+
loader: cva({
|
|
798
837
|
variants: {
|
|
799
838
|
variant: {
|
|
800
839
|
default: "",
|
|
@@ -811,13 +850,14 @@ const ProgressCircle = {
|
|
|
811
850
|
size: "default"
|
|
812
851
|
}
|
|
813
852
|
}),
|
|
814
|
-
label: cva("text-current text-sm")
|
|
853
|
+
label: cva({ base: "text-current text-sm" })
|
|
815
854
|
};
|
|
816
855
|
|
|
817
856
|
//#endregion
|
|
818
857
|
//#region src/components/SectionMessage.styles.ts
|
|
819
858
|
const SectionMessage = {
|
|
820
|
-
container: cva(
|
|
859
|
+
container: cva({
|
|
860
|
+
base: ["grid-cols-[min-content_auto_min-content] gap-x-4 gap-y-1 [grid-template-areas:'icon_title_close''icon_content_content']", "bg-background rounded-md border px-3 py-4"],
|
|
821
861
|
variants: { variant: {
|
|
822
862
|
success: "border-success-muted-accent bg-success-muted text-success-muted-foreground",
|
|
823
863
|
warning: "border-warning-muted-accent bg-warning-muted text-warning-muted-foreground",
|
|
@@ -826,8 +866,9 @@ const SectionMessage = {
|
|
|
826
866
|
} },
|
|
827
867
|
defaultVariants: { variant: "info" }
|
|
828
868
|
}),
|
|
829
|
-
title: cva("text-sm font-medium"),
|
|
830
|
-
content: cva(
|
|
869
|
+
title: cva({ base: "text-sm font-medium" }),
|
|
870
|
+
content: cva({
|
|
871
|
+
base: "text-muted-foreground text-sm leading-5 font-normal",
|
|
831
872
|
variants: { variant: {
|
|
832
873
|
success: "text-success-muted-foreground",
|
|
833
874
|
warning: "text-warning-muted-foreground",
|
|
@@ -836,7 +877,8 @@ const SectionMessage = {
|
|
|
836
877
|
} },
|
|
837
878
|
defaultVariants: { variant: "info" }
|
|
838
879
|
}),
|
|
839
|
-
icon: cva(
|
|
880
|
+
icon: cva({
|
|
881
|
+
base: "h-6 w-6 align-baseline leading-none -mt-0.5",
|
|
840
882
|
variants: { variant: {
|
|
841
883
|
success: "text-success-muted-accent",
|
|
842
884
|
warning: "text-warning-muted-accent",
|
|
@@ -845,18 +887,18 @@ const SectionMessage = {
|
|
|
845
887
|
} },
|
|
846
888
|
defaultVariants: { variant: "info" }
|
|
847
889
|
}),
|
|
848
|
-
close: cva([
|
|
890
|
+
close: cva({ base: [
|
|
849
891
|
"size-8 text-foreground",
|
|
850
892
|
"[&_svg]:size-6",
|
|
851
893
|
"-my-1.5 -me-2"
|
|
852
|
-
])
|
|
894
|
+
] })
|
|
853
895
|
};
|
|
854
896
|
|
|
855
897
|
//#endregion
|
|
856
898
|
//#region src/components/Select.styles.ts
|
|
857
899
|
const Select = {
|
|
858
|
-
icon: cva("text-muted-foreground/80"),
|
|
859
|
-
select: cva([
|
|
900
|
+
icon: cva({ base: "text-muted-foreground/80" }),
|
|
901
|
+
select: cva({ base: [
|
|
860
902
|
"ui-surface shadow-elevation-border ui-input h-input ",
|
|
861
903
|
"cursor-pointer",
|
|
862
904
|
"group-invalid/field:ui-state-error",
|
|
@@ -864,46 +906,110 @@ const Select = {
|
|
|
864
906
|
"focus-visible:ui-state-focus outline-none",
|
|
865
907
|
"*:data-placeholder:text-placeholder",
|
|
866
908
|
"has-[+_[aria-hidden=true]]:mb-0"
|
|
867
|
-
])
|
|
909
|
+
] })
|
|
910
|
+
};
|
|
911
|
+
|
|
912
|
+
//#endregion
|
|
913
|
+
//#region src/components/Sidebar.styles.ts
|
|
914
|
+
const Sidebar = {
|
|
915
|
+
overlay: cva({}),
|
|
916
|
+
modal: cva({ base: [
|
|
917
|
+
"flex h-full *:flex-1",
|
|
918
|
+
"justify-start",
|
|
919
|
+
"entering:animate-slide-in-left",
|
|
920
|
+
"exiting:animate-slide-out-left exiting:[--slide-out-duration:0.1s]",
|
|
921
|
+
"motion-reduce:entering:animate-none motion-reduce:exiting:animate-none"
|
|
922
|
+
] }),
|
|
923
|
+
root: cva({ base: [
|
|
924
|
+
"relative h-full overflow-hidden",
|
|
925
|
+
"bg-surface border-surface-border ui-elevation-overlay util-scrollbar",
|
|
926
|
+
"sm:data-[state=expanded]:w-64",
|
|
927
|
+
"sm:data-[state=collapsed]:w-0",
|
|
928
|
+
"sm:transition-[width] sm:duration-200 sm:ease-in-out",
|
|
929
|
+
"motion-reduce:sm:transition-none",
|
|
930
|
+
"border-r"
|
|
931
|
+
] }),
|
|
932
|
+
closeButton: cva({ base: ["absolute top-3.5 right-3", "size-7"] }),
|
|
933
|
+
content: cva({ base: "sm:w-64" }),
|
|
934
|
+
header: cva({ base: "ui-panel-header" }),
|
|
935
|
+
nav: cva({ base: ["flex flex-col px-3 py-1 overflow-y-auto outline-none", "ui-scrollbar"] }),
|
|
936
|
+
footer: cva({ base: "ui-panel-actions" }),
|
|
937
|
+
toggle: cva({ base: [
|
|
938
|
+
"ui-button-base ui-press",
|
|
939
|
+
"hover:bg-current/10",
|
|
940
|
+
"size-button [&_svg]:size-6"
|
|
941
|
+
] }),
|
|
942
|
+
separator: cva({ base: "bg-border my-1 h-px border-0" }),
|
|
943
|
+
groupLabel: cva({ base: "px-2 h-7.5 pt-3 pb-0.5 mb-1 text-xs font-medium text-muted-foreground uppercase tracking-wider" }),
|
|
944
|
+
navPanel: cva({ base: [
|
|
945
|
+
"flex flex-col gap-0.5 p-1",
|
|
946
|
+
"transition-[opacity,translate,filter] duration-300 ease-out sm:duration-200",
|
|
947
|
+
"data-[position=before]:absolute data-[position=before]:inset-x-0 data-[position=before]:top-0",
|
|
948
|
+
"data-[position=before]:invisible data-[position=before]:opacity-0",
|
|
949
|
+
"data-[position=before]:-translate-x-1/3 data-[position=before]:sm:-translate-x-2",
|
|
950
|
+
"data-[position=before]:sm:blur-[2px]",
|
|
951
|
+
"data-[position=before]:pointer-events-none",
|
|
952
|
+
"data-[position=after]:absolute data-[position=after]:inset-x-0 data-[position=after]:top-0",
|
|
953
|
+
"data-[position=after]:invisible data-[position=after]:opacity-0",
|
|
954
|
+
"data-[position=after]:translate-x-1/3 data-[position=after]:sm:translate-x-2",
|
|
955
|
+
"data-[position=after]:sm:blur-[2px]",
|
|
956
|
+
"data-[position=after]:pointer-events-none",
|
|
957
|
+
"motion-reduce:transition-none"
|
|
958
|
+
] }),
|
|
959
|
+
navLink: cva({ base: [
|
|
960
|
+
"flex items-center gap-2 w-full px-2 h-9 text-sm rounded-md",
|
|
961
|
+
"text-foreground/80 hover:text-foreground hover:bg-hover transition-colors",
|
|
962
|
+
"data-active:bg-selected data-active:text-foreground data-active:font-medium",
|
|
963
|
+
"motion-reduce:transition-none",
|
|
964
|
+
"outline-none focus-visible:ui-state-focus"
|
|
965
|
+
] }),
|
|
966
|
+
backButton: cva({ base: [
|
|
967
|
+
"flex items-center gap-2 w-full pl-0.5 pr-2 h-9 text-sm rounded-md",
|
|
968
|
+
"text-foreground/80 hover:text-foreground hover:bg-hover transition-colors",
|
|
969
|
+
"motion-reduce:transition-none",
|
|
970
|
+
"outline-none focus-visible:ui-state-focus",
|
|
971
|
+
"cursor-pointer mb-1"
|
|
972
|
+
] })
|
|
868
973
|
};
|
|
869
974
|
|
|
870
975
|
//#endregion
|
|
871
976
|
//#region src/components/Slider.styles.ts
|
|
872
977
|
const Slider = {
|
|
873
|
-
container: cva("*:aria-hidden:hidden"),
|
|
874
|
-
track: cva(["relative bg-muted rounded-lg flex w-full touch-none select-none items-center", "orientation-vertical:h-full orientation-vertical:w-auto orientation-vertical:flex-col disabled:opacity-50"]),
|
|
875
|
-
selectedTrack: cva(["absolute bg-black orientation-horizontal:h-full orientation-vertical:w-full rounded-lg"]),
|
|
876
|
-
thumb: cva([
|
|
978
|
+
container: cva({ base: "*:aria-hidden:hidden" }),
|
|
979
|
+
track: cva({ base: ["relative bg-muted rounded-lg flex w-full touch-none select-none items-center", "orientation-vertical:h-full orientation-vertical:w-auto orientation-vertical:flex-col disabled:opacity-50"] }),
|
|
980
|
+
selectedTrack: cva({ base: ["absolute bg-black orientation-horizontal:h-full orientation-vertical:w-full rounded-lg"] }),
|
|
981
|
+
thumb: cva({ base: [
|
|
877
982
|
"block h-5 w-5 rounded-full border-2 border-primary bg-background transition-colors",
|
|
878
983
|
"focus-visible:ui-state-focus outline-none",
|
|
879
984
|
"disabled:cursor-not-allowed"
|
|
880
|
-
]),
|
|
881
|
-
output: cva("text-foreground text-sm")
|
|
985
|
+
] }),
|
|
986
|
+
output: cva({ base: "text-foreground text-sm" })
|
|
882
987
|
};
|
|
883
988
|
|
|
884
989
|
//#endregion
|
|
885
990
|
//#region src/components/Switch.styles.ts
|
|
886
991
|
const Switch = {
|
|
887
|
-
container: cva("disabled:cursor-not-allowed disabled:text-disabled-foreground"),
|
|
888
|
-
track: cva([
|
|
992
|
+
container: cva({ base: "disabled:cursor-not-allowed disabled:text-disabled-foreground" }),
|
|
993
|
+
track: cva({ base: [
|
|
889
994
|
"flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full transition-colors",
|
|
890
995
|
"border-2 border-transparent",
|
|
891
996
|
"group-disabled/switch:bg-disabled group-disabled/switch:text-disabled-foreground group-selected/switch:group-disabled/switch:bg-disabled group-selected/switch:group-disabled/switch:text-disabled-foreground",
|
|
892
997
|
"group-selected/switch:bg-brand bg-input",
|
|
893
998
|
"group-focus-visible/switch:ui-state-focus outline-none"
|
|
894
|
-
]),
|
|
895
|
-
thumb: cva([
|
|
999
|
+
] }),
|
|
1000
|
+
thumb: cva({ base: [
|
|
896
1001
|
"pointer-events-none block size-5 rounded-full",
|
|
897
1002
|
"bg-background shadow-xs",
|
|
898
1003
|
"ring-0 transition-transform duration-150 ease-out-quint",
|
|
899
1004
|
"group-selected/switch:translate-x-4 translate-x-0"
|
|
900
|
-
])
|
|
1005
|
+
] })
|
|
901
1006
|
};
|
|
902
1007
|
|
|
903
1008
|
//#endregion
|
|
904
1009
|
//#region src/components/Table.styles.ts
|
|
905
1010
|
const Table = {
|
|
906
|
-
table: cva(
|
|
1011
|
+
table: cva({
|
|
1012
|
+
base: ["text-sm bg-background"],
|
|
907
1013
|
variants: {
|
|
908
1014
|
variant: {
|
|
909
1015
|
default: "",
|
|
@@ -933,14 +1039,15 @@ const Table = {
|
|
|
933
1039
|
size: "default"
|
|
934
1040
|
}
|
|
935
1041
|
}),
|
|
936
|
-
row: cva(
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
1042
|
+
row: cva({
|
|
1043
|
+
base: [
|
|
1044
|
+
"border-border not-last:border-b",
|
|
1045
|
+
"transition-[background-color]",
|
|
1046
|
+
"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/50",
|
|
1047
|
+
"disabled:cursor-not-allowed",
|
|
1048
|
+
"data-selection-mode:cursor-pointer data-selection-mode:hover:bg-muted",
|
|
1049
|
+
"dragging:opacity-50 dragging:transform-gpu"
|
|
1050
|
+
],
|
|
944
1051
|
variants: { variant: {
|
|
945
1052
|
default: "",
|
|
946
1053
|
grid: ["**:not-last:[[role=rowheader]]:border-r **:not-last:[[role=rowheader]]:border-border", "**:not-last:[[role=gridcell]]:border-r **:not-last:[[role=gridcell]]:border-border"],
|
|
@@ -949,14 +1056,15 @@ const Table = {
|
|
|
949
1056
|
} },
|
|
950
1057
|
defaultVariants: { variant: "default" }
|
|
951
1058
|
}),
|
|
952
|
-
head: cva(["bg-background/90", "border-border border-b"]),
|
|
953
|
-
column: cva(
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
1059
|
+
head: cva({ base: ["bg-background/90", "border-border border-b"] }),
|
|
1060
|
+
column: cva({
|
|
1061
|
+
base: [
|
|
1062
|
+
"h-(--header-height) px-(--cell-x-padding) py-0 align-middle",
|
|
1063
|
+
"font-medium text-muted-foreground",
|
|
1064
|
+
"not-has-[[type=checkbox]]:has-focus-visible:outline-2 not-has-[[type=checkbox]]:has-focus-visible:-outline-offset-2 not-has-[[type=checkbox]]:has-focus-visible:outline-ring/50",
|
|
1065
|
+
"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/50",
|
|
1066
|
+
"aria-[sort]:hover:bg-muted aria-[sort]:hover:cursor-pointer aria-[sort]:hover:text-foreground"
|
|
1067
|
+
],
|
|
960
1068
|
variants: { variant: {
|
|
961
1069
|
default: "",
|
|
962
1070
|
grid: "not-last:border-r border-border",
|
|
@@ -964,75 +1072,81 @@ const Table = {
|
|
|
964
1072
|
} },
|
|
965
1073
|
defaultVariants: { variant: "default" }
|
|
966
1074
|
}),
|
|
967
|
-
body: cva(["bg-background"]),
|
|
968
|
-
cell: cva([
|
|
1075
|
+
body: cva({ base: ["bg-background"] }),
|
|
1076
|
+
cell: cva({ base: [
|
|
969
1077
|
"px-(--cell-x-padding) py-(--cell-y-padding)",
|
|
970
1078
|
"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/50",
|
|
971
1079
|
"has-[[data-cell-content]:focus-visible]:outline-2 has-[[data-cell-content]:focus-visible]:-outline-offset-2 has-[[data-cell-content]:focus-visible]:outline-ring/50",
|
|
972
1080
|
"**:data-cell-content:outline-none"
|
|
973
|
-
]),
|
|
974
|
-
dragHandle: cva([
|
|
1081
|
+
] }),
|
|
1082
|
+
dragHandle: cva({ base: [
|
|
975
1083
|
"text-muted-foreground rounded size-4",
|
|
976
1084
|
"[&_svg]:size-4",
|
|
977
|
-
"focus-visible:
|
|
978
|
-
]),
|
|
979
|
-
dragPreview: cva(["px-4 py-3 bg-brand rounded-lg shadow-lg", "text-sm text-brand-foreground"]),
|
|
980
|
-
dragPreviewCounter: cva([
|
|
1085
|
+
"focus-visible:ui-state-focus outline-none"
|
|
1086
|
+
] }),
|
|
1087
|
+
dragPreview: cva({ base: ["px-4 py-3 bg-brand rounded-lg shadow-lg", "text-sm text-brand-foreground"] }),
|
|
1088
|
+
dragPreviewCounter: cva({ base: [
|
|
981
1089
|
"flex items-center justify-center rounded-full",
|
|
982
1090
|
"bg-brand-foreground px-2",
|
|
983
1091
|
"text-xs font-medium leading-normal text-brand"
|
|
984
|
-
]),
|
|
985
|
-
dropIndicator: cva([
|
|
1092
|
+
] }),
|
|
1093
|
+
dropIndicator: cva({ base: [
|
|
986
1094
|
"relative",
|
|
987
|
-
"before:absolute before:inset-0 before:h-0.5 before:-translate-y-1/2 before:bg-
|
|
988
|
-
"drop-target:before:z-10 drop-target:before:bg-
|
|
989
|
-
]),
|
|
990
|
-
editablePopover: cva(["ui-surface
|
|
991
|
-
editTrigger: cva([
|
|
1095
|
+
"before:absolute before:inset-0 before:h-0.5 before:-translate-y-1/2 before:bg-border",
|
|
1096
|
+
"drop-target:before:z-10 drop-target:before:bg-brand"
|
|
1097
|
+
] }),
|
|
1098
|
+
editablePopover: cva({ base: ["ui-surface shadow-elevation-overlay", "flex items-start justify-center gap-1 pl-1 pr-1 py-1"] }),
|
|
1099
|
+
editTrigger: cva({ base: [
|
|
992
1100
|
"flex items-center justify-center",
|
|
993
|
-
"text-foreground
|
|
1101
|
+
"text-muted-foreground",
|
|
994
1102
|
"size-button aspect-square rounded-surface transition-[color,background,transform]",
|
|
995
|
-
"
|
|
996
|
-
"
|
|
997
|
-
"
|
|
998
|
-
"hover:bg-hover hover:text-foreground",
|
|
1103
|
+
"ui-interactive",
|
|
1104
|
+
"ui-press",
|
|
1105
|
+
"hover:bg-current/10",
|
|
999
1106
|
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-5"
|
|
1000
|
-
]),
|
|
1001
|
-
editCancel: cva([
|
|
1107
|
+
] }),
|
|
1108
|
+
editCancel: cva({ base: [
|
|
1002
1109
|
"inline-flex items-center justify-center",
|
|
1003
|
-
"
|
|
1004
|
-
"text-sm h-button-small
|
|
1110
|
+
"sm:text-muted-foreground font-medium",
|
|
1111
|
+
"text-sm h-button-small sm:size-button sm:aspect-square rounded-surface transition-[color,background,transform]",
|
|
1005
1112
|
"cursor-pointer",
|
|
1006
1113
|
"ml-1.5",
|
|
1007
1114
|
"focus-visible:ui-state-focus outline-none",
|
|
1008
|
-
"
|
|
1009
|
-
"hover:bg-
|
|
1115
|
+
"ui-press",
|
|
1116
|
+
"hover:bg-current/10",
|
|
1010
1117
|
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-5"
|
|
1011
|
-
]),
|
|
1012
|
-
editSave: cva([
|
|
1118
|
+
] }),
|
|
1119
|
+
editSave: cva({ base: [
|
|
1013
1120
|
"inline-flex items-center justify-center",
|
|
1014
|
-
"
|
|
1015
|
-
"text-sm h-button-small
|
|
1121
|
+
"sm:text-muted-foreground font-medium",
|
|
1122
|
+
"text-sm h-button-small sm:size-button sm:aspect-square rounded-surface transition-[color,background,transform]",
|
|
1016
1123
|
"cursor-pointer",
|
|
1017
1124
|
"focus-visible:ui-state-focus outline-none",
|
|
1018
|
-
"
|
|
1019
|
-
"hover:bg-
|
|
1125
|
+
"ui-press",
|
|
1126
|
+
"hover:bg-current/10",
|
|
1020
1127
|
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4.5"
|
|
1021
|
-
])
|
|
1128
|
+
] })
|
|
1022
1129
|
};
|
|
1023
1130
|
|
|
1024
1131
|
//#endregion
|
|
1025
1132
|
//#region src/components/LegacyTable.styles.ts
|
|
1026
1133
|
const LegacyTable = {
|
|
1027
|
-
table: cva(
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1134
|
+
table: cva({
|
|
1135
|
+
base: "text-sm [&_td]:border-border [&_th]:border-border border-separate border-spacing-0 [&_th]:border-b [&_tr]:border-none [&_tr:not(:last-child)_td]:border-b",
|
|
1136
|
+
variants: { variant: {
|
|
1137
|
+
default: "",
|
|
1138
|
+
grid: ""
|
|
1139
|
+
} }
|
|
1140
|
+
}),
|
|
1141
|
+
thead: cva({
|
|
1142
|
+
base: "bg-background/90 top-0 z-1 backdrop-blur-xs ",
|
|
1143
|
+
variants: { variant: {
|
|
1144
|
+
default: "",
|
|
1145
|
+
grid: ""
|
|
1146
|
+
} }
|
|
1147
|
+
}),
|
|
1148
|
+
headerRow: cva({
|
|
1149
|
+
base: ["border-border border-b"],
|
|
1036
1150
|
variants: { variant: {
|
|
1037
1151
|
default: "",
|
|
1038
1152
|
grid: "[&>:not(:last-child)]:border-r [&>:not(:last-child)]:border-border",
|
|
@@ -1040,7 +1154,8 @@ const LegacyTable = {
|
|
|
1040
1154
|
} },
|
|
1041
1155
|
defaultVariants: { variant: "default" }
|
|
1042
1156
|
}),
|
|
1043
|
-
header: cva(
|
|
1157
|
+
header: cva({
|
|
1158
|
+
base: ["h-12 px-3 align-middle font-medium text-muted-foreground", "focus-visible:outline-2 outline-offset-2 outline-ring/70"],
|
|
1044
1159
|
variants: { variant: {
|
|
1045
1160
|
default: "[&:has([type=checkbox])]:pr-0",
|
|
1046
1161
|
grid: "",
|
|
@@ -1048,12 +1163,13 @@ const LegacyTable = {
|
|
|
1048
1163
|
} },
|
|
1049
1164
|
defaultVariants: { variant: "default" }
|
|
1050
1165
|
}),
|
|
1051
|
-
body: cva("[&_tr:last-child]:border-0 bg-background"),
|
|
1052
|
-
row: cva(
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1166
|
+
body: cva({ base: "[&_tr:last-child]:border-0 bg-background" }),
|
|
1167
|
+
row: cva({
|
|
1168
|
+
base: [
|
|
1169
|
+
"border-b border-border transition-colors",
|
|
1170
|
+
"focus-visible:outline-2 outline-offset-2 outline-ring/70",
|
|
1171
|
+
"data-disabled:cursor-not-allowed"
|
|
1172
|
+
],
|
|
1057
1173
|
variants: { variant: {
|
|
1058
1174
|
default: "aria-selected:bg-muted",
|
|
1059
1175
|
grid: "aria-selected:bg-muted [&>:not(:last-child)]:border-r [&>:not(:last-child)]:border-border",
|
|
@@ -1072,7 +1188,8 @@ const LegacyTable = {
|
|
|
1072
1188
|
} },
|
|
1073
1189
|
defaultVariants: { variant: "default" }
|
|
1074
1190
|
}),
|
|
1075
|
-
cell: cva(
|
|
1191
|
+
cell: cva({
|
|
1192
|
+
base: "p-3 focus-visible:outline-2 outline-offset-2 outline-ring/70",
|
|
1076
1193
|
variants: { variant: {
|
|
1077
1194
|
default: "[&:has([type=checkbox])]:pr-0",
|
|
1078
1195
|
grid: ""
|
|
@@ -1084,25 +1201,25 @@ const LegacyTable = {
|
|
|
1084
1201
|
//#endregion
|
|
1085
1202
|
//#region src/components/Tabs.styles.ts
|
|
1086
1203
|
const Tabs = {
|
|
1087
|
-
container: cva("flex flex-col gap-2"),
|
|
1088
|
-
tabsList: cva(["text-muted-foreground", "flex items-center p-0.5 h-auto gap-2 border-b border-border px-0 py-1"]),
|
|
1089
|
-
tab: cva([
|
|
1204
|
+
container: cva({ base: "flex flex-col gap-2" }),
|
|
1205
|
+
tabsList: cva({ base: ["text-muted-foreground", "flex items-center p-0.5 h-auto gap-2 border-b border-border px-0 py-1"] }),
|
|
1206
|
+
tab: cva({ base: [
|
|
1090
1207
|
"relative inline-flex items-center justify-center gap-1 rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors",
|
|
1091
1208
|
"[&_svg]:shrink-0",
|
|
1092
1209
|
"focus-visible:ui-state-focus outline-none",
|
|
1093
|
-
"hover:bg-
|
|
1094
|
-
"disabled:pointer-events-none disabled:
|
|
1095
|
-
"selected:text-foreground selected:hover:bg-
|
|
1096
|
-
|
|
1097
|
-
]),
|
|
1098
|
-
tabpanel: cva(["py-4 rounded-sm", "focus-visible:ui-state-focus outline-none"])
|
|
1210
|
+
"hover:bg-current/10",
|
|
1211
|
+
"disabled:pointer-events-none disabled:text-disabled-foreground",
|
|
1212
|
+
"selected:text-foreground selected:hover:bg-current/10"
|
|
1213
|
+
] }),
|
|
1214
|
+
tabIndicator: cva({ base: ["absolute inset-x-0 bottom-0 -mb-1 h-0.5 bg-foreground", "origin-left"] }),
|
|
1215
|
+
tabpanel: cva({ base: ["py-4 rounded-sm", "focus-visible:ui-state-focus outline-none"] })
|
|
1099
1216
|
};
|
|
1100
1217
|
|
|
1101
1218
|
//#endregion
|
|
1102
1219
|
//#region src/components/Tag.styles.ts
|
|
1103
1220
|
const Tag = {
|
|
1104
|
-
container: cva(["flex gap-3", "min-h-7"]),
|
|
1105
|
-
tag: cva([
|
|
1221
|
+
container: cva({ base: ["flex gap-3", "min-h-7"] }),
|
|
1222
|
+
tag: cva({ base: [
|
|
1106
1223
|
"relative inline-flex items-center gap-1.75",
|
|
1107
1224
|
"ui-surface shadow-elevation-border",
|
|
1108
1225
|
"font-medium text-xs",
|
|
@@ -1110,62 +1227,53 @@ const Tag = {
|
|
|
1110
1227
|
"selected:text-white selected:[--ui-background-color:var(--color-brand)]",
|
|
1111
1228
|
"data-disabled:cursor-not-allowed data-disabled:text-disabled-foreground data-disabled:bg-disabled",
|
|
1112
1229
|
"focus-visible:ui-state-focus outline-none"
|
|
1113
|
-
]),
|
|
1114
|
-
closeButton: cva(["size-4", "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed"]),
|
|
1115
|
-
listItems: cva(["flex flex-wrap gap-1", "mb-0"]),
|
|
1116
|
-
removeAll: cva([
|
|
1230
|
+
] }),
|
|
1231
|
+
closeButton: cva({ base: ["size-4", "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed"] }),
|
|
1232
|
+
listItems: cva({ base: ["flex flex-wrap gap-1", "mb-0"] }),
|
|
1233
|
+
removeAll: cva({ base: [
|
|
1117
1234
|
"inline whitespace-nowrap font-medium transition-[color,box-shadow,transform] rounded-md",
|
|
1118
|
-
"
|
|
1235
|
+
"ui-press",
|
|
1119
1236
|
"focus-visible:ui-state-focus outline-none",
|
|
1120
1237
|
"cursor-pointer",
|
|
1121
|
-
"text-link text-xs
|
|
1122
|
-
])
|
|
1238
|
+
"text-link text-xs ui-touch-hitbox"
|
|
1239
|
+
] })
|
|
1123
1240
|
};
|
|
1124
1241
|
|
|
1125
1242
|
//#endregion
|
|
1126
1243
|
//#region src/components/TagField.styles.ts
|
|
1127
1244
|
const TagField = {
|
|
1128
|
-
trigger: cva([
|
|
1129
|
-
"flex w-full items-center justify-between gap-1",
|
|
1245
|
+
trigger: cva({ base: [
|
|
1130
1246
|
"ui-surface shadow-elevation-border ui-input h-fit min-h-input",
|
|
1131
1247
|
"cursor-pointer py-1",
|
|
1132
1248
|
"group-disabled/field:ui-state-disabled",
|
|
1133
|
-
"has-focus:ui-state-focus",
|
|
1249
|
+
"[&:has(>button[data-focus-visible])]:ui-state-focus",
|
|
1134
1250
|
"group-invalid/field:ui-state-error",
|
|
1135
|
-
"has-focus:group-invalid/field:ring-destructive/20"
|
|
1136
|
-
]),
|
|
1137
|
-
tagGroup: cva("flex flex-1 flex-wrap items-center gap-1"),
|
|
1138
|
-
listItems: cva("flex flex-wrap gap-1"),
|
|
1139
|
-
|
|
1140
|
-
"util-touch-hitbox rounded-full [&_svg]:size-4",
|
|
1141
|
-
"shrink-0 cursor-pointer outline-0",
|
|
1142
|
-
"flex items-center justify-center",
|
|
1143
|
-
"hover:bg-hover size-6",
|
|
1144
|
-
"focus:ui-state-focus",
|
|
1145
|
-
"disabled:ui-state-disabled"
|
|
1146
|
-
]),
|
|
1147
|
-
container: cva([
|
|
1251
|
+
"[&:has(>button[data-focus-visible])]:group-invalid/field:ring-destructive/20"
|
|
1252
|
+
] }),
|
|
1253
|
+
tagGroup: cva({ base: "flex flex-1 flex-wrap items-center gap-1" }),
|
|
1254
|
+
listItems: cva({ base: "flex flex-wrap gap-1" }),
|
|
1255
|
+
container: cva({ base: [
|
|
1148
1256
|
"ui-surface shadow-elevation-border group/tagfield",
|
|
1149
1257
|
"flex flex-col overflow-hidden gap-1.5 p-2",
|
|
1150
1258
|
"w-(--tagfield-trigger-width)",
|
|
1151
1259
|
"[&_div]:shadow-none! [&_div]:border-0!"
|
|
1152
|
-
])
|
|
1260
|
+
] })
|
|
1153
1261
|
};
|
|
1154
1262
|
|
|
1155
1263
|
//#endregion
|
|
1156
1264
|
//#region src/components/TextArea.styles.ts
|
|
1157
|
-
const TextArea = cva([
|
|
1265
|
+
const TextArea = cva({ base: [
|
|
1158
1266
|
"inline-flex",
|
|
1159
1267
|
"ui-surface shadow-elevation-border ui-input h-[initial]",
|
|
1160
1268
|
"disabled:ui-state-disabled",
|
|
1161
1269
|
"group-read-only/field:ui-state-readonly",
|
|
1162
1270
|
"invalid:ui-state-error",
|
|
1163
1271
|
"focus:ui-state-focus outline-none"
|
|
1164
|
-
]);
|
|
1272
|
+
] });
|
|
1165
1273
|
|
|
1166
1274
|
//#endregion
|
|
1167
1275
|
//#region src/components/Text.styles.ts
|
|
1168
|
-
const Text = cva(
|
|
1276
|
+
const Text = cva({
|
|
1169
1277
|
variants: {
|
|
1170
1278
|
variant: {
|
|
1171
1279
|
default: "",
|
|
@@ -1197,31 +1305,32 @@ const Text = cva("", {
|
|
|
1197
1305
|
//#endregion
|
|
1198
1306
|
//#region src/components/Toast.styles.ts
|
|
1199
1307
|
const Toast = {
|
|
1200
|
-
toast: cva([
|
|
1308
|
+
toast: cva({ base: [
|
|
1201
1309
|
"ui-surface shadow-elevation-overlay",
|
|
1202
1310
|
"max-w-sm w-full pointer-events-auto overflow-hidden text-foreground",
|
|
1203
1311
|
"grid grid-cols-[auto_1fr_auto_auto] grid-rows-[auto_auto] gap-x-1 gap-y-0",
|
|
1204
|
-
"[grid-template-areas:'icon_title_action_close''icon_description_action_close'] focus-visible:state-focus outline-none",
|
|
1312
|
+
"[grid-template-areas:'icon_title_action_close''icon_description_action_close'] focus-visible:ui-state-focus outline-none",
|
|
1205
1313
|
"p-4"
|
|
1206
|
-
]),
|
|
1207
|
-
title: cva([
|
|
1314
|
+
] }),
|
|
1315
|
+
title: cva({ base: [
|
|
1208
1316
|
"text-sm font-medium",
|
|
1209
1317
|
"[grid-area:title]",
|
|
1210
1318
|
"flex items-center mb-0"
|
|
1211
|
-
]),
|
|
1212
|
-
description: cva(["text-muted-foreground text-sm", "[grid-area:description] mt-0"]),
|
|
1213
|
-
closeButton: cva([
|
|
1319
|
+
] }),
|
|
1320
|
+
description: cva({ base: ["text-muted-foreground text-sm", "[grid-area:description] mt-0"] }),
|
|
1321
|
+
closeButton: cva({ base: [
|
|
1214
1322
|
"[grid-area:close] row-end-1",
|
|
1215
1323
|
"ml-2",
|
|
1216
1324
|
"flex items-center justify-center",
|
|
1217
1325
|
"size-5 rounded transition-[color,box-shadow] outline-none",
|
|
1218
1326
|
"focus-visible:ui-state-focus outline-none text-muted-foreground hover:text-hover-foreground"
|
|
1219
|
-
]),
|
|
1220
|
-
icon: cva(
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1327
|
+
] }),
|
|
1328
|
+
icon: cva({
|
|
1329
|
+
base: [
|
|
1330
|
+
"[grid-area:icon]",
|
|
1331
|
+
"flex items-center justify-center",
|
|
1332
|
+
"h-5 w-5 leading-none"
|
|
1333
|
+
],
|
|
1225
1334
|
variants: { variant: {
|
|
1226
1335
|
default: "",
|
|
1227
1336
|
success: "text-success-muted-accent",
|
|
@@ -1231,37 +1340,39 @@ const Toast = {
|
|
|
1231
1340
|
} },
|
|
1232
1341
|
defaultVariants: { variant: "default" }
|
|
1233
1342
|
}),
|
|
1234
|
-
content: cva(["contents"]),
|
|
1235
|
-
"bottom-left": cva(["fixed bottom-4 left-4 flex flex-col-reverse"]),
|
|
1236
|
-
"bottom-right": cva(["fixed bottom-4 right-4 flex flex-col-reverse"]),
|
|
1237
|
-
"top-left": cva(["fixed top-4 left-4 flex flex-col"]),
|
|
1238
|
-
"top-right": cva(["fixed top-4 right-4 flex flex-col"]),
|
|
1239
|
-
top: cva(["fixed top-4 left-1/2 right-auto -translate-x-1/2 flex flex-col items-center w-auto align-middle"]),
|
|
1240
|
-
bottom: cva(["fixed bottom-4 left-1/2 right-auto -translate-x-1/2 flex flex-col-reverse items-center w-auto align-middle"]),
|
|
1241
|
-
action: cva(["[grid-area:action] flex items-start pl-4"])
|
|
1343
|
+
content: cva({ base: ["contents"] }),
|
|
1344
|
+
"bottom-left": cva({ base: ["fixed bottom-4 left-4 flex flex-col-reverse"] }),
|
|
1345
|
+
"bottom-right": cva({ base: ["fixed bottom-4 right-4 flex flex-col-reverse"] }),
|
|
1346
|
+
"top-left": cva({ base: ["fixed top-4 left-4 flex flex-col"] }),
|
|
1347
|
+
"top-right": cva({ base: ["fixed top-4 right-4 flex flex-col"] }),
|
|
1348
|
+
top: cva({ base: ["fixed top-4 left-1/2 right-auto -translate-x-1/2 flex flex-col items-center w-auto align-middle"] }),
|
|
1349
|
+
bottom: cva({ base: ["fixed bottom-4 left-1/2 right-auto -translate-x-1/2 flex flex-col-reverse items-center w-auto align-middle"] }),
|
|
1350
|
+
action: cva({ base: ["[grid-area:action] flex items-start pl-4"] })
|
|
1242
1351
|
};
|
|
1243
1352
|
|
|
1244
1353
|
//#endregion
|
|
1245
1354
|
//#region src/components/Tooltip.styles.ts
|
|
1246
1355
|
const Tooltip = {
|
|
1247
|
-
container: cva(
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1356
|
+
container: cva({
|
|
1357
|
+
base: [
|
|
1358
|
+
"relative max-w-70 rounded-md border px-3 py-1.5 text-sm",
|
|
1359
|
+
"placement-top:mb-2",
|
|
1360
|
+
"placement-bottom:mt-2",
|
|
1361
|
+
"placement-right:ml-2",
|
|
1362
|
+
"placement-left:mr-2"
|
|
1363
|
+
],
|
|
1254
1364
|
variants: { variant: {
|
|
1255
1365
|
default: "text-brand-foreground bg-brand border-brand",
|
|
1256
1366
|
white: "text-secondary-foreground border-input bg-white"
|
|
1257
1367
|
} },
|
|
1258
1368
|
defaultVariants: { variant: "default" }
|
|
1259
1369
|
}),
|
|
1260
|
-
arrow: cva(
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1370
|
+
arrow: cva({
|
|
1371
|
+
base: [
|
|
1372
|
+
"placement-right:[&_svg]:rotate-90",
|
|
1373
|
+
"placement-left:[&_svg]:-rotate-90",
|
|
1374
|
+
"placement-bottom:[&_svg]:rotate-180"
|
|
1375
|
+
],
|
|
1265
1376
|
variants: { variant: {
|
|
1266
1377
|
default: "fill-brand stroke-brand",
|
|
1267
1378
|
white: "fill-white stroke-input "
|
|
@@ -1273,29 +1384,30 @@ const Tooltip = {
|
|
|
1273
1384
|
//#endregion
|
|
1274
1385
|
//#region src/components/Tray.styles.ts
|
|
1275
1386
|
const Tray = {
|
|
1276
|
-
overlay: cva("bg-black/50 fixed inset-0 z-40 flex items-end justify-center"),
|
|
1277
|
-
container: cva([
|
|
1387
|
+
overlay: cva({ base: "bg-black/50 fixed inset-0 z-40 flex items-end justify-center" }),
|
|
1388
|
+
container: cva({ base: [
|
|
1278
1389
|
"w-full border-0 inset-shadow-black inset-shadow-sm/20",
|
|
1279
1390
|
"relative grid-rows-[auto_auto_1fr_auto] max-h-[95vh] rounded-b-none",
|
|
1280
|
-
"ui-surface
|
|
1391
|
+
"ui-surface shadow-elevation-overlay",
|
|
1281
1392
|
"outline-hidden grid",
|
|
1282
1393
|
"after:absolute after:inset-x-0 after:top-full after:h-screen after:bg-background after:content-['']"
|
|
1283
|
-
]),
|
|
1284
|
-
dragHandle: cva("bg-surface-border mx-auto mt-2 h-1.5 w-12 rounded-full"),
|
|
1285
|
-
header: cva(
|
|
1286
|
-
title: cva("font-semibold text-base"),
|
|
1287
|
-
content: cva("overflow-y-auto outline-none p-2"),
|
|
1288
|
-
actions: cva(
|
|
1394
|
+
] }),
|
|
1395
|
+
dragHandle: cva({ base: "bg-surface-border mx-auto mt-2 h-1.5 w-12 rounded-full" }),
|
|
1396
|
+
header: cva({ base: "ui-panel-header" }),
|
|
1397
|
+
title: cva({ base: "font-semibold text-base" }),
|
|
1398
|
+
content: cva({ base: "overflow-y-auto outline-none p-2" }),
|
|
1399
|
+
actions: cva({ base: "ui-panel-actions" })
|
|
1289
1400
|
};
|
|
1290
1401
|
|
|
1291
1402
|
//#endregion
|
|
1292
1403
|
//#region src/components/Underlay.styles.ts
|
|
1293
|
-
const Underlay = cva(
|
|
1404
|
+
const Underlay = cva({ base: "bg-black/80 px-4" });
|
|
1294
1405
|
|
|
1295
1406
|
//#endregion
|
|
1296
1407
|
//#region src/components/Loader.styles.ts
|
|
1297
1408
|
const Loader = {
|
|
1298
|
-
container: cva(
|
|
1409
|
+
container: cva({
|
|
1410
|
+
base: "grid place-items-center text-brand",
|
|
1299
1411
|
variants: {
|
|
1300
1412
|
variant: {
|
|
1301
1413
|
default: "",
|
|
@@ -1312,7 +1424,8 @@ const Loader = {
|
|
|
1312
1424
|
size: "default"
|
|
1313
1425
|
}
|
|
1314
1426
|
}),
|
|
1315
|
-
loader: cva(
|
|
1427
|
+
loader: cva({
|
|
1428
|
+
base: "size-full",
|
|
1316
1429
|
variants: {
|
|
1317
1430
|
variant: {
|
|
1318
1431
|
default: "",
|
|
@@ -1329,13 +1442,14 @@ const Loader = {
|
|
|
1329
1442
|
size: "default"
|
|
1330
1443
|
}
|
|
1331
1444
|
}),
|
|
1332
|
-
label: cva("text-current text-sm")
|
|
1445
|
+
label: cva({ base: "text-current text-sm" })
|
|
1333
1446
|
};
|
|
1334
1447
|
|
|
1335
1448
|
//#endregion
|
|
1336
1449
|
//#region src/components/Breadcrumbs.styles.ts
|
|
1337
1450
|
const Breadcrumbs = {
|
|
1338
|
-
container: cva(
|
|
1451
|
+
container: cva({
|
|
1452
|
+
base: ["flex flex-wrap items-center gap-1 wrap-break-word text-sm sm:gap-1.5 text-muted-foreground"],
|
|
1339
1453
|
variants: {
|
|
1340
1454
|
variant: { default: "" },
|
|
1341
1455
|
size: {
|
|
@@ -1349,38 +1463,39 @@ const Breadcrumbs = {
|
|
|
1349
1463
|
size: "default"
|
|
1350
1464
|
}
|
|
1351
1465
|
}),
|
|
1352
|
-
item: cva("inline-flex items-center
|
|
1353
|
-
link: cva("transition-colors hover:text-foreground cursor-pointer"),
|
|
1354
|
-
current: cva("font-normal text-foreground")
|
|
1466
|
+
item: cva({ base: "inline-flex items-center gap-1.5 sm:gap-2.5" }),
|
|
1467
|
+
link: cva({ base: "transition-colors hover:text-foreground cursor-pointer" }),
|
|
1468
|
+
current: cva({ base: "font-normal text-foreground" })
|
|
1355
1469
|
};
|
|
1356
1470
|
|
|
1357
1471
|
//#endregion
|
|
1358
1472
|
//#region src/components/FileField.styles.ts
|
|
1359
1473
|
const FileField = {
|
|
1360
|
-
container: cva("space-y-2 "),
|
|
1361
|
-
dropZone: cva([
|
|
1474
|
+
container: cva({ base: "space-y-2 " }),
|
|
1475
|
+
dropZone: cva({ base: [
|
|
1362
1476
|
"relative flex min-h-52 flex-col items-center overflow-hidden",
|
|
1363
1477
|
"rounded-xl border border-dashed border-surface-border",
|
|
1364
1478
|
"p-4 transition-[color,background] not-data-files:justify-center",
|
|
1365
1479
|
"data-[drop-target=true]:bg-muted",
|
|
1366
1480
|
"focus-visible:bg-focus/50"
|
|
1367
|
-
]),
|
|
1368
|
-
dropZoneContent: cva("flex flex-col items-center justify-center gap-2 px-4 py-3 text-center"),
|
|
1369
|
-
dropZoneLabel: cva("text-sm font-medium"),
|
|
1370
|
-
item: cva([
|
|
1481
|
+
] }),
|
|
1482
|
+
dropZoneContent: cva({ base: "flex flex-col items-center justify-center gap-2 px-4 py-3 text-center" }),
|
|
1483
|
+
dropZoneLabel: cva({ base: "text-sm font-medium" }),
|
|
1484
|
+
item: cva({ base: [
|
|
1371
1485
|
"[grid-template-areas:'label_remove'_'description_remove'] grid-cols-[1fr_auto] gap-y-0.5 gap-x-2",
|
|
1372
1486
|
"p-2",
|
|
1373
1487
|
"ui-surface shadow-elevation-border"
|
|
1374
|
-
]),
|
|
1375
|
-
itemLabel: cva(["truncate text-[13px] font-medium"]),
|
|
1376
|
-
itemDescription: cva(["text-muted-foreground text-xs"]),
|
|
1377
|
-
itemRemove: cva(["flex items-center"])
|
|
1488
|
+
] }),
|
|
1489
|
+
itemLabel: cva({ base: ["truncate text-[13px] font-medium"] }),
|
|
1490
|
+
itemDescription: cva({ base: ["text-muted-foreground text-xs"] }),
|
|
1491
|
+
itemRemove: cva({ base: ["flex items-center"] })
|
|
1378
1492
|
};
|
|
1379
1493
|
|
|
1380
1494
|
//#endregion
|
|
1381
1495
|
//#region src/components/ToggleButton.styles.ts
|
|
1382
1496
|
const ToggleButton = {
|
|
1383
|
-
group: cva(
|
|
1497
|
+
group: cva({
|
|
1498
|
+
base: "group inline-flex ui-surface shadow-elevation-border",
|
|
1384
1499
|
variants: { size: {
|
|
1385
1500
|
default: "text-sm",
|
|
1386
1501
|
small: "text-xs",
|
|
@@ -1388,16 +1503,17 @@ const ToggleButton = {
|
|
|
1388
1503
|
} },
|
|
1389
1504
|
defaultVariants: { size: "default" }
|
|
1390
1505
|
}),
|
|
1391
|
-
button: cva(
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1506
|
+
button: cva({
|
|
1507
|
+
base: [
|
|
1508
|
+
"ui-button-base gap-2",
|
|
1509
|
+
"ui-surface shadow-elevation-border",
|
|
1510
|
+
"hover:[--ui-background-color:var(--color-hover)] hover:text-foreground",
|
|
1511
|
+
"disabled:border-0 disabled:shadow-none disabled:[--ui-background-color:var(--color-disabled)]",
|
|
1512
|
+
"selected:[--ui-background-color:var(--color-input)] selected:shadow-none",
|
|
1513
|
+
"in-[.group]:rounded-none in-[.group]:shadow-none in-[.group]:border-y-0 in-[.group]:border-l-0",
|
|
1514
|
+
"in-[.group]:first:rounded-l-surface",
|
|
1515
|
+
"in-[.group]:last:rounded-r-surface in-[.group]:last:border-r-0"
|
|
1516
|
+
],
|
|
1401
1517
|
variants: { size: {
|
|
1402
1518
|
default: "text-sm",
|
|
1403
1519
|
small: "text-xs",
|
|
@@ -1421,9 +1537,22 @@ const ToggleButton = {
|
|
|
1421
1537
|
})
|
|
1422
1538
|
};
|
|
1423
1539
|
|
|
1540
|
+
//#endregion
|
|
1541
|
+
//#region src/components/TopNavigation.styles.ts
|
|
1542
|
+
const TopNavigation = {
|
|
1543
|
+
container: cva({ base: [
|
|
1544
|
+
"w-full min-h-14",
|
|
1545
|
+
"bg-background border-b border-border shadow-elevation-border",
|
|
1546
|
+
"gap-4 px-3 pt-2 sm:gap-6 md:gap-8 lg:gap-12"
|
|
1547
|
+
] }),
|
|
1548
|
+
start: cva({ base: "flex justify-start gap-4" }),
|
|
1549
|
+
middle: cva({ base: ["flex items-end", "p-1 -m-1"] }),
|
|
1550
|
+
end: cva({ base: "flex justify-end gap-4" })
|
|
1551
|
+
};
|
|
1552
|
+
|
|
1424
1553
|
//#endregion
|
|
1425
1554
|
//#region src/components/index.ts
|
|
1426
|
-
var components_exports = /* @__PURE__ */
|
|
1555
|
+
var components_exports = /* @__PURE__ */ __exportAll({
|
|
1427
1556
|
Accordion: () => Accordion,
|
|
1428
1557
|
ActionBar: () => ActionBar,
|
|
1429
1558
|
Autocomplete: () => Autocomplete,
|
|
@@ -1465,6 +1594,7 @@ var components_exports = /* @__PURE__ */ __export({
|
|
|
1465
1594
|
Radio: () => Radio,
|
|
1466
1595
|
SectionMessage: () => SectionMessage,
|
|
1467
1596
|
Select: () => Select,
|
|
1597
|
+
Sidebar: () => Sidebar,
|
|
1468
1598
|
Slider: () => Slider,
|
|
1469
1599
|
Switch: () => Switch,
|
|
1470
1600
|
Table: () => Table,
|
|
@@ -1476,6 +1606,7 @@ var components_exports = /* @__PURE__ */ __export({
|
|
|
1476
1606
|
Toast: () => Toast,
|
|
1477
1607
|
ToggleButton: () => ToggleButton,
|
|
1478
1608
|
Tooltip: () => Tooltip,
|
|
1609
|
+
TopNavigation: () => TopNavigation,
|
|
1479
1610
|
Tray: () => Tray,
|
|
1480
1611
|
Underlay: () => Underlay
|
|
1481
1612
|
});
|