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