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