@marigold/theme-rui 4.0.1 → 5.0.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/{index.js → index.cjs} +505 -216
- package/dist/index.cjs.map +1 -0
- package/dist/{index.d.ts → index.d.cts} +1 -1
- package/dist/index.d.cts.map +1 -0
- package/dist/index.mjs +505 -196
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1904 -751
- package/dist/theme.css +63 -11
- package/dist/utils.css +51 -99
- package/dist/variants.css +5 -0
- package/package.json +9 -7
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js.map +0 -1
|
@@ -1,37 +1,22 @@
|
|
|
1
1
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
2
2
|
//#region rolldown:runtime
|
|
3
|
-
var __create = Object.create;
|
|
4
3
|
var __defProp = Object.defineProperty;
|
|
5
|
-
var
|
|
6
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
-
var __export = (all) => {
|
|
4
|
+
var __export = (all, symbols) => {
|
|
10
5
|
let target = {};
|
|
11
|
-
for (var name in all)
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
return target;
|
|
16
|
-
};
|
|
17
|
-
var __copyProps = (to, from, except, desc) => {
|
|
18
|
-
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
19
|
-
key = keys[i];
|
|
20
|
-
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
21
|
-
get: ((k) => from[k]).bind(null, key),
|
|
22
|
-
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
6
|
+
for (var name in all) {
|
|
7
|
+
__defProp(target, name, {
|
|
8
|
+
get: all[name],
|
|
9
|
+
enumerable: true
|
|
23
10
|
});
|
|
24
11
|
}
|
|
25
|
-
|
|
12
|
+
if (symbols) {
|
|
13
|
+
__defProp(target, Symbol.toStringTag, { value: "Module" });
|
|
14
|
+
}
|
|
15
|
+
return target;
|
|
26
16
|
};
|
|
27
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
28
|
-
value: mod,
|
|
29
|
-
enumerable: true
|
|
30
|
-
}) : target, mod));
|
|
31
17
|
|
|
32
18
|
//#endregion
|
|
33
19
|
let __marigold_system = require("@marigold/system");
|
|
34
|
-
__marigold_system = __toESM(__marigold_system);
|
|
35
20
|
|
|
36
21
|
//#region src/components/Accordion.styles.ts
|
|
37
22
|
const Accordion = {
|
|
@@ -42,10 +27,10 @@ const Accordion = {
|
|
|
42
27
|
} },
|
|
43
28
|
defaultVariants: { variant: "default" }
|
|
44
29
|
}),
|
|
45
|
-
item: (0, __marigold_system.cva)("
|
|
30
|
+
item: (0, __marigold_system.cva)("", {
|
|
46
31
|
variants: { variant: {
|
|
47
|
-
default: "",
|
|
48
|
-
card: ["
|
|
32
|
+
default: ["bg-background border-b last:border-b-0 border-border"],
|
|
33
|
+
card: ["ui-surface shadow-elevation-raised py-1 outline-none", "has-[[slot=trigger]:focus-visible]:ui-state-focus outline-none"]
|
|
49
34
|
} },
|
|
50
35
|
defaultVariants: { variant: "default" }
|
|
51
36
|
}),
|
|
@@ -56,19 +41,60 @@ const Accordion = {
|
|
|
56
41
|
"disabled:cursor-not-allowed disabled:text-disabled-foreground"
|
|
57
42
|
], {
|
|
58
43
|
variants: { variant: {
|
|
59
|
-
default: "focus-visible:
|
|
60
|
-
card: "outline-none"
|
|
44
|
+
default: "focus-visible:ui-state-focus outline-none",
|
|
45
|
+
card: "px-4 outline-none"
|
|
61
46
|
} },
|
|
62
47
|
defaultVariants: { variant: "default" }
|
|
63
48
|
}),
|
|
64
49
|
panel: (0, __marigold_system.cva)("overflow-clip h-(--disclosure-panel-height) transition-[height,padding] duration-250"),
|
|
65
|
-
content: (0, __marigold_system.cva)("pb-2"
|
|
50
|
+
content: (0, __marigold_system.cva)("pb-2", { variants: { variant: {
|
|
51
|
+
default: "",
|
|
52
|
+
card: "px-4"
|
|
53
|
+
} } }),
|
|
66
54
|
icon: (0, __marigold_system.cva)("pointer-events-none shrink-0 opacity-60 transition-transform duration-250")
|
|
67
55
|
};
|
|
68
56
|
|
|
57
|
+
//#endregion
|
|
58
|
+
//#region src/components/ActionBar.styles.ts
|
|
59
|
+
const ActionBar = {
|
|
60
|
+
container: (0, __marigold_system.cva)([
|
|
61
|
+
"relative w-fit",
|
|
62
|
+
"flex items-center justify-between justify-items-center gap-4",
|
|
63
|
+
"px-6 py-3",
|
|
64
|
+
"shadow-lg",
|
|
65
|
+
"bg-brand text-brand-foreground border-brand",
|
|
66
|
+
"rounded-lg font-medium transition-colors",
|
|
67
|
+
"focus-visible:util-focus-ring outline-none disabled:util-disabled",
|
|
68
|
+
"[&_svg]:pointer-events-none [&_svg]:shrink-0"
|
|
69
|
+
]),
|
|
70
|
+
count: (0, __marigold_system.cva)([
|
|
71
|
+
"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
|
+
"flex-1 justify-center",
|
|
78
|
+
"overflow-x-auto"
|
|
79
|
+
]),
|
|
80
|
+
clearButton: (0, __marigold_system.cva)([
|
|
81
|
+
"shrink-0",
|
|
82
|
+
"size-8",
|
|
83
|
+
"transition-colors"
|
|
84
|
+
])
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
//#endregion
|
|
88
|
+
//#region src/components/Autocomplete.styles.ts
|
|
89
|
+
const Autocomplete = { mobileTrigger: (0, __marigold_system.cva)("group/input relative flex items-center") };
|
|
90
|
+
|
|
69
91
|
//#endregion
|
|
70
92
|
//#region src/components/Badge.styles.ts
|
|
71
|
-
const Badge = (0, __marigold_system.cva)([
|
|
93
|
+
const Badge = (0, __marigold_system.cva)([
|
|
94
|
+
"inline-flex items-center justify-center rounded-full px-2 text-xs font-medium leading-normal transition-colors",
|
|
95
|
+
"focus-visible:state-focus outline-none",
|
|
96
|
+
"has-[svg]:gap-1"
|
|
97
|
+
], {
|
|
72
98
|
variants: { variant: {
|
|
73
99
|
default: "bg-muted text-foreground border border-border",
|
|
74
100
|
primary: "bg-brand text-brand-foreground ",
|
|
@@ -84,22 +110,30 @@ const Badge = (0, __marigold_system.cva)(["inline-flex items-center justify-cent
|
|
|
84
110
|
|
|
85
111
|
//#endregion
|
|
86
112
|
//#region src/components/Button.styles.ts
|
|
87
|
-
const
|
|
113
|
+
const buttonBase = [
|
|
88
114
|
"inline-flex items-center justify-center gap-2",
|
|
89
|
-
"whitespace-nowrap rounded-
|
|
90
|
-
"duration-150 active:scale-[0.98] pressed:scale-[0.98]",
|
|
115
|
+
"whitespace-nowrap rounded-surface font-medium transition-[color,box-shadow,transform]",
|
|
91
116
|
"[&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
92
|
-
"focus-visible:
|
|
93
|
-
"pending:text-disabled-foreground pending:bg-disabled pending:cursor-not-allowed pending:border-none",
|
|
117
|
+
"focus-visible:ui-state-focus outline-none disabled:ui-state-disabled",
|
|
94
118
|
"cursor-pointer"
|
|
119
|
+
];
|
|
120
|
+
const Button = (0, __marigold_system.cva)([
|
|
121
|
+
...buttonBase,
|
|
122
|
+
"duration-150 active:scale-[0.97] pressed:not-expanded:scale-[0.97]",
|
|
123
|
+
"pending:text-disabled-foreground pending:bg-disabled pending:cursor-not-allowed pending:border-none"
|
|
95
124
|
], {
|
|
96
125
|
variants: {
|
|
97
126
|
variant: {
|
|
98
|
-
primary: "bg-brand text-brand-foreground
|
|
99
|
-
secondary:
|
|
100
|
-
|
|
101
|
-
|
|
127
|
+
primary: "bg-brand text-brand-foreground hover:bg-brand/90",
|
|
128
|
+
secondary: [
|
|
129
|
+
"ui-surface shadow-elevation-border",
|
|
130
|
+
"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
|
+
"expanded:[--ui-background-color:var(--color-hover)]"
|
|
133
|
+
],
|
|
102
134
|
ghost: "hover:bg-hover hover:text-foreground",
|
|
135
|
+
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
|
136
|
+
"destructive-ghost": "text-destructive hover:bg-destructive/10",
|
|
103
137
|
link: "text-link util-touch-hitbox"
|
|
104
138
|
},
|
|
105
139
|
size: {
|
|
@@ -133,7 +167,7 @@ const Button = (0, __marigold_system.cva)([
|
|
|
133
167
|
"destructive-ghost"
|
|
134
168
|
],
|
|
135
169
|
size: "default",
|
|
136
|
-
class: "h-button
|
|
170
|
+
class: "h-button p-squish-relaxed [&_svg]:size-4"
|
|
137
171
|
},
|
|
138
172
|
{
|
|
139
173
|
variant: [
|
|
@@ -174,21 +208,12 @@ const Button = (0, __marigold_system.cva)([
|
|
|
174
208
|
//#endregion
|
|
175
209
|
//#region src/components/Card.styles.ts
|
|
176
210
|
const Card = (0, __marigold_system.cva)(["p-4 rounded-md"], {
|
|
177
|
-
variants: {
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
size: {
|
|
184
|
-
default: "",
|
|
185
|
-
full: "w-full"
|
|
186
|
-
}
|
|
187
|
-
},
|
|
188
|
-
defaultVariants: {
|
|
189
|
-
variant: "default",
|
|
190
|
-
size: "default"
|
|
191
|
-
}
|
|
211
|
+
variants: { variant: {
|
|
212
|
+
default: "ui-surface shadow-elevation-raised",
|
|
213
|
+
master: "bg-access-master/30 border border-access-master",
|
|
214
|
+
admin: "bg-access-admin/30 border border-access-admin"
|
|
215
|
+
} },
|
|
216
|
+
defaultVariants: { variant: "default" }
|
|
192
217
|
});
|
|
193
218
|
|
|
194
219
|
//#endregion
|
|
@@ -197,7 +222,7 @@ const Checkbox = {
|
|
|
197
222
|
checkbox: (0, __marigold_system.cva)([
|
|
198
223
|
"grid size-4 shrink-0 place-content-center rounded",
|
|
199
224
|
"border border-input shadow-xs",
|
|
200
|
-
"group-focus-visible/checkbox:
|
|
225
|
+
"group-focus-visible/checkbox:ui-state-focus group-focus-visible/checkbox:border-(--ui-border-color) outline-none",
|
|
201
226
|
"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",
|
|
202
227
|
"group-selected/checkbox:border-brand group-selected/checkbox:bg-brand group-selected/checkbox:text-brand-foreground",
|
|
203
228
|
"group-[indeterminate]/checkbox:border-brand group-[indeterminate]/checkbox:bg-brand group-[indeterminate]/checkbox:text-brand-foreground"
|
|
@@ -205,36 +230,45 @@ const Checkbox = {
|
|
|
205
230
|
container: (0, __marigold_system.cva)("cursor-pointer read-only:cursor-default gap-2"),
|
|
206
231
|
label: (0, __marigold_system.cva)([
|
|
207
232
|
"flex items-center gap-1",
|
|
208
|
-
"text-sm leading-4 group-[&]/checkboxgroup:font-normal font-medium text-
|
|
233
|
+
"text-sm leading-4 group-[&]/checkboxgroup:font-normal font-medium text-foreground",
|
|
209
234
|
"group-disabled/checkbox:text-disabled-foreground"
|
|
210
235
|
]),
|
|
211
|
-
group: (0, __marigold_system.cva)()
|
|
236
|
+
group: (0, __marigold_system.cva)("flex flex-col gap-1")
|
|
212
237
|
};
|
|
213
238
|
|
|
214
239
|
//#endregion
|
|
215
240
|
//#region src/components/Calendar.styles.ts
|
|
216
241
|
const Calendar = {
|
|
217
|
-
calendar: (0, __marigold_system.cva)(
|
|
242
|
+
calendar: (0, __marigold_system.cva)([
|
|
243
|
+
"ui-surface shadow-elevation-border p-2",
|
|
244
|
+
"group-data-trigger/popover:shadow-elevation-overlay",
|
|
245
|
+
"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: (0, __marigold_system.cva)("flex gap-4"),
|
|
248
|
+
calendarMonth: (0, __marigold_system.cva)("min-w-[250px] flex-1"),
|
|
218
249
|
calendarCell: (0, __marigold_system.cva)([
|
|
219
250
|
"relative flex size-9 items-center justify-center whitespace-nowrap rounded-lg justify-self-center",
|
|
220
251
|
"border border-transparent p-0 text-sm font-normal text-foreground",
|
|
221
|
-
"outline-offset-2 duration-150
|
|
222
|
-
"
|
|
223
|
-
"
|
|
224
|
-
"focus-visible:
|
|
252
|
+
"outline-offset-2 duration-150 transition-all",
|
|
253
|
+
"selected:bg-brand selected:text-brand-foreground",
|
|
254
|
+
"data-hovered:bg-hover data-hovered:text-foreground",
|
|
255
|
+
"data-focus-visible:z-10 focus-visible:ui-state-focus outline-none",
|
|
256
|
+
"disabled:pointer-events-none disabled:opacity-30",
|
|
257
|
+
"unavailable:pointer-events-none unavailable:opacity-30 unavailable:line-through",
|
|
258
|
+
"outside-month:hidden"
|
|
225
259
|
]),
|
|
226
260
|
calendarControllers: (0, __marigold_system.cva)([
|
|
227
261
|
"size-9 rounded-lg",
|
|
228
262
|
"text-muted-foreground/80",
|
|
229
263
|
"transition-colors",
|
|
230
|
-
"focus-visible:
|
|
264
|
+
"focus-visible:ui-state-focus outline-none"
|
|
231
265
|
]),
|
|
232
266
|
calendarHeader: (0, __marigold_system.cva)(["size-9 rounded-lg p-0 text-xs font-medium text-muted-foreground/80"]),
|
|
233
|
-
calendarGrid: (0, __marigold_system.cva)("[&_td]:p-2"),
|
|
267
|
+
calendarGrid: (0, __marigold_system.cva)("[&_td]:p-2 [&_td]:group-[[role=dialog]]/tray:p-0.75"),
|
|
234
268
|
calendarListboxButton: (0, __marigold_system.cva)([
|
|
235
269
|
"rounded-md text-sm font-medium transition-[color,box-shadow]",
|
|
236
270
|
"px-4 py-2",
|
|
237
|
-
"focus-visible:
|
|
271
|
+
"focus-visible:ui-state-focus outline-none",
|
|
238
272
|
"cursor-pointer",
|
|
239
273
|
"hover:bg-hover",
|
|
240
274
|
"aria-selected:bg-brand aria-selected:text-brand-foreground aria-selected:shadow-xs aria-selected:hover:bg-brand/90"
|
|
@@ -242,7 +276,7 @@ const Calendar = {
|
|
|
242
276
|
select: (0, __marigold_system.cva)([
|
|
243
277
|
"[&svg]:text-muted-foreground/80",
|
|
244
278
|
"flex w-full px-3 py-2 rounded-lg shadow-xs border border-input bg-background text-sm text-foreground transition-shadow",
|
|
245
|
-
"focus-visible:
|
|
279
|
+
"focus-visible:ui-state-focus outline-none",
|
|
246
280
|
"h-input",
|
|
247
281
|
"disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled",
|
|
248
282
|
"cursor-pointer"
|
|
@@ -255,15 +289,18 @@ const CloseButton = (0, __marigold_system.cva)([
|
|
|
255
289
|
"flex items-center justify-center whitespace-nowrap",
|
|
256
290
|
"cursor-pointer",
|
|
257
291
|
"transition-[color,box-shadow]",
|
|
258
|
-
"focus-visible:
|
|
292
|
+
"focus-visible:ui-state-focus outline-none",
|
|
259
293
|
"rounded-full",
|
|
260
|
-
"duration-150 active:scale-[0.
|
|
294
|
+
"duration-150 active:scale-[0.97] pressed:scale-[0.97] transition-transform",
|
|
261
295
|
"[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100"
|
|
262
296
|
]);
|
|
263
297
|
|
|
264
298
|
//#endregion
|
|
265
299
|
//#region src/components/ComboBox.styles.ts
|
|
266
|
-
const ComboBox =
|
|
300
|
+
const ComboBox = {
|
|
301
|
+
icon: (0, __marigold_system.cva)("text-muted-foreground/80 right-2"),
|
|
302
|
+
mobileTrigger: (0, __marigold_system.cva)("group/input relative flex items-center")
|
|
303
|
+
};
|
|
267
304
|
|
|
268
305
|
//#endregion
|
|
269
306
|
//#region src/components/Collapsible.styles.ts
|
|
@@ -271,9 +308,9 @@ const Collapsible = {
|
|
|
271
308
|
container: (0, __marigold_system.cva)(),
|
|
272
309
|
trigger: (0, __marigold_system.cva)([
|
|
273
310
|
"inline-flex gap-2 whitespace-nowrap rounded-md font-medium transition-[color,box-shadow,transform]",
|
|
274
|
-
"duration-150 active:scale-[0.
|
|
311
|
+
"duration-150 active:scale-[0.97] pressed:scale-[0.97]",
|
|
275
312
|
"[&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
276
|
-
"focus-visible:
|
|
313
|
+
"focus-visible:ui-state-focus outline-none disabled:ui-state-disabled",
|
|
277
314
|
"cursor-pointer"
|
|
278
315
|
], {
|
|
279
316
|
variants: {
|
|
@@ -295,81 +332,53 @@ const Collapsible = {
|
|
|
295
332
|
//#region src/components/ContextualHelp.styles.ts
|
|
296
333
|
const ContextualHelp = {
|
|
297
334
|
trigger: (0, __marigold_system.cva)([
|
|
298
|
-
"inline-flex items-center justify-center rounded-full transition-[color,box-shadow]
|
|
335
|
+
"inline-flex items-center justify-center rounded-full transition-[color,box-shadow]",
|
|
336
|
+
"hover:util-focus-ring hover:text-foreground",
|
|
299
337
|
"[&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
300
|
-
"focus-visible:
|
|
301
|
-
"cursor-pointer"
|
|
338
|
+
"focus-visible:ui-state-focus outline-none",
|
|
339
|
+
"cursor-pointer util-touch-hitbox"
|
|
302
340
|
], {
|
|
303
341
|
variants: {
|
|
304
342
|
variant: {
|
|
305
343
|
help: "",
|
|
306
344
|
info: ""
|
|
307
345
|
},
|
|
308
|
-
size: {
|
|
309
|
-
default: "size-button [&_svg]:size-4",
|
|
310
|
-
small: "size-button-small [&_svg]:size-3.5",
|
|
311
|
-
large: "size-button-large [&_svg]:size-5"
|
|
312
|
-
}
|
|
346
|
+
size: { default: "[&_svg]:size-4" }
|
|
313
347
|
},
|
|
314
348
|
defaultVariants: { size: "default" }
|
|
315
349
|
}),
|
|
316
|
-
|
|
317
|
-
"
|
|
318
|
-
"
|
|
319
|
-
"
|
|
350
|
+
container: (0, __marigold_system.cva)([
|
|
351
|
+
"outline-none",
|
|
352
|
+
"ui-surface shadow-elevation-overlay util-scrollbar",
|
|
353
|
+
"p-5",
|
|
354
|
+
"data-small:max-w-3xs data-medium:max-w-xs data-large:max-w-md"
|
|
320
355
|
]),
|
|
321
|
-
container: (0, __marigold_system.cva)(""),
|
|
322
356
|
title: (0, __marigold_system.cva)("text-lg font-semibold mb-1"),
|
|
323
357
|
content: (0, __marigold_system.cva)("text-sm")
|
|
324
358
|
};
|
|
325
359
|
|
|
326
|
-
//#endregion
|
|
327
|
-
//#region src/components/Input.styles.ts
|
|
328
|
-
const inputContainer = "flex w-full px-3 py-2 rounded-lg shadow-xs border border-input bg-background text-sm text-foreground transition-shadow group-read-only/field:bg-muted";
|
|
329
|
-
const inputDisabled = "disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled";
|
|
330
|
-
const inputInvalid = "group-invalid/field:border-destructive group-invalid/field:focus:border-destructive group-invalid/field:focus:ring-destructive/20";
|
|
331
|
-
const inputReadOnly = "group-read-only/field:bg-muted";
|
|
332
|
-
const Input = {
|
|
333
|
-
input: (0, __marigold_system.cva)([
|
|
334
|
-
inputContainer,
|
|
335
|
-
inputDisabled,
|
|
336
|
-
inputInvalid,
|
|
337
|
-
"focus:util-focus-ring outline-none",
|
|
338
|
-
inputReadOnly,
|
|
339
|
-
"h-input",
|
|
340
|
-
"placeholder:text-placeholder",
|
|
341
|
-
"[&[type=file]]:cursor-pointer [&[type=file]]:border-solid [&[type=file]]:bg-background [&[type=file]]:p-0 [&[type=file]]:pr-3 [&[type=file]]:italic [&[type=file]]:text-muted-foreground/70",
|
|
342
|
-
"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",
|
|
343
|
-
"group-[[data-icon]]/input:pl-8",
|
|
344
|
-
"group-[[data-action]]/input:pr-7"
|
|
345
|
-
]),
|
|
346
|
-
icon: (0, __marigold_system.cva)(["pointer-events-none left-2", "text-muted-foreground disabled:text-disabled-foreground"]),
|
|
347
|
-
action: (0, __marigold_system.cva)(["text-muted-foreground pr-1"])
|
|
348
|
-
};
|
|
349
|
-
|
|
350
360
|
//#endregion
|
|
351
361
|
//#region src/components/DateField.styles.ts
|
|
352
362
|
const DateField = {
|
|
353
363
|
field: (0, __marigold_system.cva)([
|
|
354
|
-
"h-input",
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
"
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
"invalid:focus-within:border-destructive invalid:focus-within:ring-destructive/20",
|
|
361
|
-
"data-[focus-within]:util-focus-ring outline-0"
|
|
364
|
+
"ui-surface shadow-elevation-border h-input",
|
|
365
|
+
"flex items-center",
|
|
366
|
+
"disabled:ui-state-disabled",
|
|
367
|
+
"group-read-only/field:ui-state-readonly",
|
|
368
|
+
"has-focus:ui-state-focus",
|
|
369
|
+
"has-invalid:ui-state-error has-focus:has-invalid:ring-destructive/20"
|
|
362
370
|
]),
|
|
371
|
+
input: (0, __marigold_system.cva)(["ui-input", "cursor-text"]),
|
|
363
372
|
segment: (0, __marigold_system.cva)([
|
|
364
|
-
|
|
365
|
-
"
|
|
366
|
-
"data-
|
|
367
|
-
"data-
|
|
368
|
-
"invalid:data-
|
|
373
|
+
"inline rounded p-0.5 text-foreground caret-transparent outline-0 type-literal:px-0 data-focused:data-placeholder:text-foreground data-focused:text-foreground type-literal:text-placeholder",
|
|
374
|
+
"disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled",
|
|
375
|
+
"data-focused:bg-focus",
|
|
376
|
+
"data-placeholder:disabled:text-disabled-foreground",
|
|
377
|
+
"invalid:data-focused:bg-destructive invalid:data-focused:data-placeholder:text-destructive-foreground invalid:data-focused:text-destructive-foreground invalid:placeholder:text-destructive invalid:text-destructive data-placeholder:text-placeholder",
|
|
369
378
|
"group/segment",
|
|
370
379
|
"outline-0",
|
|
371
380
|
"whitespace-pre",
|
|
372
|
-
"data-
|
|
381
|
+
"data-placeholder:text-placeholder text-foreground data-focused:bg-focus data-focused:text-foreground rounded leading-none"
|
|
373
382
|
]),
|
|
374
383
|
action: (0, __marigold_system.cva)("fill-muted-foreground disabled:text-disabled-foreground group-invalid/field:fill-destructive")
|
|
375
384
|
};
|
|
@@ -377,17 +386,18 @@ const DateField = {
|
|
|
377
386
|
//#endregion
|
|
378
387
|
//#region src/components/DatePicker.styles.ts
|
|
379
388
|
const DatePicker = (0, __marigold_system.cva)([
|
|
380
|
-
"
|
|
389
|
+
"h-input pr-3",
|
|
381
390
|
"text-muted-foreground/80",
|
|
382
391
|
"hover:text-brand",
|
|
383
|
-
"disabled:cursor-not-allowed"
|
|
392
|
+
"disabled:cursor-not-allowed",
|
|
393
|
+
"util-touch-hitbox"
|
|
384
394
|
]);
|
|
385
395
|
|
|
386
396
|
//#endregion
|
|
387
397
|
//#region src/components/Dialog.styles.ts
|
|
388
398
|
const Dialog = {
|
|
389
399
|
closeButton: (0, __marigold_system.cva)(["absolute top-6 right-3", "size-7 "]),
|
|
390
|
-
container: (0, __marigold_system.cva)(["flex flex-col gap-0 rounded-xl p-6 overflow-y-auto", "
|
|
400
|
+
container: (0, __marigold_system.cva)(["flex flex-col gap-0 rounded-xl p-6 overflow-y-auto", "ui-surface shadow-elevation-overlay util-scrollbar"], { variants: {
|
|
391
401
|
variant: {},
|
|
392
402
|
size: {
|
|
393
403
|
xsmall: "",
|
|
@@ -415,32 +425,70 @@ const Divider = (0, __marigold_system.cva)("bg-border h-px w-full", {
|
|
|
415
425
|
//#region src/components/Drawer.styles.ts
|
|
416
426
|
const Drawer = {
|
|
417
427
|
overlay: (0, __marigold_system.cva)([
|
|
418
|
-
"group/overlay
|
|
419
|
-
"
|
|
420
|
-
"
|
|
421
|
-
"
|
|
422
|
-
"
|
|
428
|
+
"group/overlay",
|
|
429
|
+
"placement-top:w-full placement-top:entering:animate-slide-in-top placement-top:exiting:animate-slide-out-top placement-top:top-0 placement-top:left-0",
|
|
430
|
+
"placement-bottom:w-full placement-bottom:entering:animate-slide-in-bottom placement-bottom:exiting:animate-slide-out-bottom placement-bottom:bottom-0 placement-bottom:left-0",
|
|
431
|
+
"placement-left:entering:animate-slide-in-left placement-left:exiting:animate-slide-out-left placement-left:top-0 placement-left:left-0",
|
|
432
|
+
"placement-right:entering:animate-slide-in-right placement-right:exiting:animate-slide-out-right placement-right:top-0 placement-right:right-0"
|
|
423
433
|
]),
|
|
424
434
|
container: (0, __marigold_system.cva)([
|
|
425
435
|
"w-full relative grid-rows-[auto_1fr_auto]",
|
|
426
|
-
"
|
|
427
|
-
"
|
|
436
|
+
"bg-surface border-surface-border shadow-elevation-overlay util-scrollbar",
|
|
437
|
+
"placement-right:border-l placement-left:border-r placement-top:border-b placement-bottom:border-t",
|
|
438
|
+
"placement-top:w-full placement-bottom:w-full"
|
|
428
439
|
], { variants: { size: {
|
|
429
|
-
xsmall: "w-64
|
|
430
|
-
small: "w-72
|
|
431
|
-
medium: "w-96
|
|
440
|
+
xsmall: "w-64 placement-top:sm:h-48 placement-bottom:sm:h-48",
|
|
441
|
+
small: "w-72 placement-top:sm:h-64 placement-bottom:sm:h-64",
|
|
442
|
+
medium: "w-96 placement-top:sm:h-80 placement-bottom:sm:h-80"
|
|
432
443
|
} } }),
|
|
433
|
-
closeButton: (0, __marigold_system.cva)(["absolute top-3.5 right-3
|
|
444
|
+
closeButton: (0, __marigold_system.cva)(["absolute top-3.5 right-3", "size-7"]),
|
|
434
445
|
header: (0, __marigold_system.cva)("border-border border-b px-6 py-4"),
|
|
435
446
|
title: (0, __marigold_system.cva)("font-semibold text-base"),
|
|
436
447
|
content: (0, __marigold_system.cva)("px-6 py-4 overflow-y-auto outline-none"),
|
|
437
448
|
actions: (0, __marigold_system.cva)("flex flex-row gap-3 justify-end border-border border-t px-6 py-4")
|
|
438
449
|
};
|
|
439
450
|
|
|
451
|
+
//#endregion
|
|
452
|
+
//#region src/components/EmptyState.styles.ts
|
|
453
|
+
const EmptyState = {
|
|
454
|
+
container: (0, __marigold_system.cva)(["mx-auto flex max-w-sm flex-col items-center p-6"]),
|
|
455
|
+
title: (0, __marigold_system.cva)(["text-lg"]),
|
|
456
|
+
description: (0, __marigold_system.cva)(["text-muted-foreground text-sm text-center"]),
|
|
457
|
+
action: (0, __marigold_system.cva)(["mt-6"])
|
|
458
|
+
};
|
|
459
|
+
|
|
440
460
|
//#endregion
|
|
441
461
|
//#region src/components/IconButton.styles.ts
|
|
442
462
|
const IconButton = (0, __marigold_system.cva)("", { variants: { variant: { navigation: "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors outline-offset-2 focus-visible:outline-2 outline-ring/30 disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-hover hover:text-hover-foreground h-9 py-2 gap-1 px-2.5" } } });
|
|
443
463
|
|
|
464
|
+
//#endregion
|
|
465
|
+
//#region src/components/Input.styles.ts
|
|
466
|
+
const Input = {
|
|
467
|
+
input: (0, __marigold_system.cva)([
|
|
468
|
+
"ui-surface shadow-elevation-border ui-input",
|
|
469
|
+
"disabled:ui-state-disabled",
|
|
470
|
+
"group-read-only/field:ui-state-readonly",
|
|
471
|
+
"invalid:ui-state-error",
|
|
472
|
+
"focus:ui-state-focus outline-none",
|
|
473
|
+
"group-read-only/field:cursor-default",
|
|
474
|
+
"group-data-icon/input:pl-8",
|
|
475
|
+
"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/70",
|
|
477
|
+
"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
|
+
"[&[type=color]]:h-input",
|
|
479
|
+
"[&::-webkit-color-swatch-wrapper]:p-0",
|
|
480
|
+
"[&::-webkit-color-swatch]:p-2 [&::-moz-color-swatch]:p-2",
|
|
481
|
+
"[&::-webkit-color-swatch]:rounded-[inherit] [&::-moz-color-swatch]:rounded-[inherit]",
|
|
482
|
+
"[&::-webkit-color-swatch]:border-0 [&::-moz-color-swatch]:border-0"
|
|
483
|
+
]),
|
|
484
|
+
icon: (0, __marigold_system.cva)([
|
|
485
|
+
"pointer-events-none left-2.5",
|
|
486
|
+
"text-muted-foreground disabled:text-disabled-foreground",
|
|
487
|
+
"disabled:text-gray-50"
|
|
488
|
+
]),
|
|
489
|
+
action: (0, __marigold_system.cva)(["text-muted-foreground pr-1 right-2"])
|
|
490
|
+
};
|
|
491
|
+
|
|
444
492
|
//#endregion
|
|
445
493
|
//#region src/components/Field.styles.ts
|
|
446
494
|
const Field = (0, __marigold_system.cva)("space-y-2");
|
|
@@ -520,15 +568,22 @@ const List = {
|
|
|
520
568
|
//#endregion
|
|
521
569
|
//#region src/components/ListBox.styles.ts
|
|
522
570
|
const ListBox = {
|
|
523
|
-
container: (0, __marigold_system.cva)([
|
|
524
|
-
|
|
571
|
+
container: (0, __marigold_system.cva)([
|
|
572
|
+
"flex ui-surface",
|
|
573
|
+
"not-group-data-trigger/popover:",
|
|
574
|
+
"group-data-trigger/popover:shadow-elevation-overlay",
|
|
575
|
+
"group-data-trigger/popover:w-full",
|
|
576
|
+
"group-data-trigger/popover:overflow-hidden",
|
|
577
|
+
"group-[[role=dialog]]/tray:border-0 group-[[role=dialog]]/tray:shadow-none"
|
|
578
|
+
]),
|
|
579
|
+
list: (0, __marigold_system.cva)(["p-1 text-sm outline-0 space-y-px overflow-y-auto w-full"]),
|
|
525
580
|
item: (0, __marigold_system.cva)([
|
|
526
581
|
"relative grid grid-cols-[auto_1fr] items-center gap-x-2 rounded-md px-2 py-1.5 text-sm text-foreground",
|
|
527
582
|
"[&_.selection-indicator>svg]:invisible [&_.selection-indicator>svg]:block",
|
|
528
583
|
"selected:bg-selected selected:[&_.selection-indicator>svg]:visible",
|
|
529
584
|
"hover:bg-hover hover:text-hover-foreground",
|
|
530
585
|
"disabled:cursor-not-allowed disabled:text-disabled-foreground",
|
|
531
|
-
"focus-visible:
|
|
586
|
+
"focus-visible:ui-state-focus outline-none focus-visible:z-1 transition-[border,color]",
|
|
532
587
|
"cursor-default data-selection-mode:cursor-pointer",
|
|
533
588
|
"[&_[slot=description]]:col-start-2 [&_[slot=description]]:row-start-2 [&_[slot=description]]:text-xs [&_[slot=description]]:text-muted-foreground"
|
|
534
589
|
]),
|
|
@@ -539,9 +594,13 @@ const ListBox = {
|
|
|
539
594
|
//#endregion
|
|
540
595
|
//#region src/components/Menu.styles.ts
|
|
541
596
|
const Menu = {
|
|
542
|
-
container: (0, __marigold_system.cva)([
|
|
597
|
+
container: (0, __marigold_system.cva)([
|
|
598
|
+
"ui-surface shadow-elevation-overlay w-full",
|
|
599
|
+
"text-foreground overflow-hidden p-1 outline-none",
|
|
600
|
+
"group-[[role=dialog]]/tray:border-0 group-[[role=dialog]]/tray:shadow-none"
|
|
601
|
+
]),
|
|
543
602
|
item: (0, __marigold_system.cva)([
|
|
544
|
-
"relative flex cursor-pointer items-center gap-2 rounded-
|
|
603
|
+
"relative flex cursor-pointer items-center gap-2 rounded-[calc(var(--radius-surface)-3px)] p-2 text-sm outline-hidden select-none text-nowrap",
|
|
545
604
|
"disabled:text-disabled-foreground",
|
|
546
605
|
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4"
|
|
547
606
|
], {
|
|
@@ -551,17 +610,17 @@ const Menu = {
|
|
|
551
610
|
} },
|
|
552
611
|
defaultVariants: { variant: "default" }
|
|
553
612
|
}),
|
|
554
|
-
section: (0, __marigold_system.cva)("text-muted-foreground
|
|
613
|
+
section: (0, __marigold_system.cva)("text-muted-foreground p-2 text-xs font-medium border-t border-t-border in-first:border-t-0"),
|
|
555
614
|
button: (0, __marigold_system.cva)([
|
|
556
|
-
"inline-flex items-center justify-center gap-2 whitespace-nowrap
|
|
557
|
-
"
|
|
558
|
-
"
|
|
559
|
-
"
|
|
615
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium",
|
|
616
|
+
"focus-visible:ui-state-focus outline-none disabled:ui-state-disabled",
|
|
617
|
+
"cursor-pointer",
|
|
618
|
+
"[&_svg]:shrink-0 [&_svg]:pointer-events-none"
|
|
560
619
|
], {
|
|
561
620
|
variants: {
|
|
562
621
|
variant: {
|
|
563
|
-
default: "
|
|
564
|
-
ghost: "hover:bg-hover hover:text-foreground expanded:bg-hover"
|
|
622
|
+
default: "ui-surface expanded:bg-hover",
|
|
623
|
+
ghost: "hover:bg-hover hover:text-foreground expanded:bg-hover rounded-surface"
|
|
565
624
|
},
|
|
566
625
|
size: {
|
|
567
626
|
default: "h-button px-4 py-2 [&_svg]:size-4",
|
|
@@ -597,7 +656,7 @@ const Modal = (0, __marigold_system.cva)([
|
|
|
597
656
|
const MultiSelect = {
|
|
598
657
|
field: (0, __marigold_system.cva)("space-y-2"),
|
|
599
658
|
container: (0, __marigold_system.cva)([
|
|
600
|
-
"
|
|
659
|
+
"ui-surface",
|
|
601
660
|
"px-3 text-sm text-foreground transition-shadow",
|
|
602
661
|
"border border-input rounded-lg outline-hidden",
|
|
603
662
|
"aria-disabled:bg-disabled aria-disabled:text-disabled-foreground aria-disabled:hover:border-input aria-disabled:border-input aria-disabled:cursor-not-allowed",
|
|
@@ -624,15 +683,15 @@ const MultiSelect = {
|
|
|
624
683
|
]),
|
|
625
684
|
closeButton: (0, __marigold_system.cva)("size-4 cursor-pointer border-none bg-transparent p-0 leading-normal outline-0"),
|
|
626
685
|
icon: (0, __marigold_system.cva)("left-1"),
|
|
627
|
-
listContainer: (0, __marigold_system.cva)(["
|
|
686
|
+
listContainer: (0, __marigold_system.cva)(["ui-surface shadow-elevation-overlay mt-0.5 outline-0"]),
|
|
628
687
|
list: (0, __marigold_system.cva)("pointer-events-auto space-y-1 p-1"),
|
|
629
688
|
option: (0, __marigold_system.cva)([
|
|
630
689
|
"text-sm text-foreground",
|
|
631
690
|
"flex flex-col",
|
|
632
691
|
"cursor-pointer p-2 outline-hidden",
|
|
633
|
-
"[&.isFocused:not([aria-disabled=true])]
|
|
692
|
+
"[&.isFocused:not([aria-disabled=true])]:text-foreground! [&.isFocused[aria-disabled=true]]:bg-transparent",
|
|
634
693
|
"aria-disabled:text-disabled-foreground aria-disabled:cursor-not-allowed",
|
|
635
|
-
"[&.isFocused:not([aria-disabled=true])]
|
|
694
|
+
"[&.isFocused:not([aria-disabled=true])]:bg-hover!"
|
|
636
695
|
]),
|
|
637
696
|
valueContainer: (0, __marigold_system.cva)("gap-2")
|
|
638
697
|
};
|
|
@@ -641,22 +700,24 @@ const MultiSelect = {
|
|
|
641
700
|
//#region src/components/NumberField.styles.ts
|
|
642
701
|
const NumberField = {
|
|
643
702
|
group: (0, __marigold_system.cva)([
|
|
644
|
-
"
|
|
645
|
-
"has-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
"
|
|
649
|
-
"data-invalid:data-[focus-within]:border-destructive data-invalid:data-[focus-within]:ring-destructive/20"
|
|
703
|
+
"ui-surface shadow-elevation-border h-input",
|
|
704
|
+
"has-invalid:ui-state-error",
|
|
705
|
+
"has-disabled:ui-state-disabled",
|
|
706
|
+
"group-read-only/field:ui-state-readonly",
|
|
707
|
+
"has-focus:ui-state-focus outline-none"
|
|
650
708
|
]),
|
|
651
709
|
stepper: (0, __marigold_system.cva)([
|
|
652
|
-
"w-
|
|
710
|
+
"w-8 h-full text-center shrink-0 grid palce-items-center",
|
|
711
|
+
"text-foreground",
|
|
653
712
|
"disabled:text-disabled-foreground disabled:bg-disabled",
|
|
654
|
-
"border-input!
|
|
713
|
+
"border-input!",
|
|
714
|
+
"first-of-type:border-r! first-of-type:rounded-l-[calc(var(--radius-lg)-1px)]",
|
|
715
|
+
"last-of-type:border-l! last-of-type:rounded-r-[calc(var(--radius-lg)-1px)]"
|
|
655
716
|
]),
|
|
656
717
|
input: (0, __marigold_system.cva)([
|
|
657
|
-
"
|
|
658
|
-
"
|
|
659
|
-
"group-
|
|
718
|
+
"ui-input",
|
|
719
|
+
"flex-1",
|
|
720
|
+
"group-data-stepper/field:text-center",
|
|
660
721
|
"disabled:text-disabled-foreground disabled:bg-disabled"
|
|
661
722
|
])
|
|
662
723
|
};
|
|
@@ -665,12 +726,11 @@ const NumberField = {
|
|
|
665
726
|
//#region src/components/Popover.styles.ts
|
|
666
727
|
const Popover = (0, __marigold_system.cva)([
|
|
667
728
|
"group/popover",
|
|
668
|
-
"
|
|
729
|
+
"outline-0",
|
|
669
730
|
"placement-top:mb-1",
|
|
670
731
|
"placement-bottom:mt-1",
|
|
671
732
|
"placement-right:ml-1",
|
|
672
|
-
"placement-left:mr-1"
|
|
673
|
-
"util-surface-overlay"
|
|
733
|
+
"placement-left:mr-1"
|
|
674
734
|
]);
|
|
675
735
|
|
|
676
736
|
//#endregion
|
|
@@ -681,7 +741,7 @@ const Radio = {
|
|
|
681
741
|
radio: (0, __marigold_system.cva)([
|
|
682
742
|
"aspect-square size-4 rounded-full",
|
|
683
743
|
"border border-input shadow-xs",
|
|
684
|
-
"group-focus-visible/radio:
|
|
744
|
+
"group-focus-visible/radio:ui-state-focus outline-none",
|
|
685
745
|
"group-disabled/radio:group-selected/radio:bg-disabled group-disabled/radio:border-disabled! group-disabled/radio:cursor-not-allowed",
|
|
686
746
|
"group-selected/radio:border-brand group-selected/radio:bg-brand group-selected/radio:text-brand-foreground"
|
|
687
747
|
]),
|
|
@@ -692,7 +752,7 @@ const Radio = {
|
|
|
692
752
|
//#region src/components/Pagination.styles.ts
|
|
693
753
|
const button = [
|
|
694
754
|
"inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors",
|
|
695
|
-
"focus-visible:
|
|
755
|
+
"focus-visible:ui-state-focus outline-none",
|
|
696
756
|
"disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground",
|
|
697
757
|
"[&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
698
758
|
"hover:bg-hover hover:text-hover-foreground",
|
|
@@ -709,7 +769,7 @@ const Pagination = {
|
|
|
709
769
|
pageButton: (0, __marigold_system.cva)([
|
|
710
770
|
...button,
|
|
711
771
|
"bg-background size-9",
|
|
712
|
-
"data-[selected=true]:
|
|
772
|
+
"data-[selected=true]:ui-surface data-[selected=true]:shadow-elevation-border"
|
|
713
773
|
]),
|
|
714
774
|
icon: (0, __marigold_system.cva)("h-4 w-4"),
|
|
715
775
|
ellipsis: (0, __marigold_system.cva)("text-foreground flex h-8 w-8 items-center justify-center")
|
|
@@ -798,12 +858,11 @@ const SectionMessage = {
|
|
|
798
858
|
const Select = {
|
|
799
859
|
icon: (0, __marigold_system.cva)("text-muted-foreground/80"),
|
|
800
860
|
select: (0, __marigold_system.cva)([
|
|
801
|
-
|
|
802
|
-
inputInvalid,
|
|
803
|
-
inputDisabled,
|
|
804
|
-
"focus-visible:util-focus-ring outline-none",
|
|
805
|
-
"h-input",
|
|
861
|
+
"ui-surface shadow-elevation-border ui-input h-input ",
|
|
806
862
|
"cursor-pointer",
|
|
863
|
+
"group-invalid/field:ui-state-error",
|
|
864
|
+
"disabled:ui-state-disabled",
|
|
865
|
+
"focus-visible:ui-state-focus outline-none",
|
|
807
866
|
"*:data-placeholder:text-placeholder",
|
|
808
867
|
"has-[+_[aria-hidden=true]]:mb-0"
|
|
809
868
|
])
|
|
@@ -813,11 +872,11 @@ const Select = {
|
|
|
813
872
|
//#region src/components/Slider.styles.ts
|
|
814
873
|
const Slider = {
|
|
815
874
|
container: (0, __marigold_system.cva)("*:aria-hidden:hidden"),
|
|
816
|
-
track: (0, __marigold_system.cva)(["relative bg-muted rounded-lg flex w-full touch-none select-none items-center
|
|
817
|
-
selectedTrack: (0, __marigold_system.cva)(["absolute bg-black
|
|
875
|
+
track: (0, __marigold_system.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: (0, __marigold_system.cva)(["absolute bg-black orientation-horizontal:h-full orientation-vertical:w-full rounded-lg"]),
|
|
818
877
|
thumb: (0, __marigold_system.cva)([
|
|
819
878
|
"block h-5 w-5 rounded-full border-2 border-primary bg-background transition-colors",
|
|
820
|
-
"focus-visible:
|
|
879
|
+
"focus-visible:ui-state-focus outline-none",
|
|
821
880
|
"disabled:cursor-not-allowed"
|
|
822
881
|
]),
|
|
823
882
|
output: (0, __marigold_system.cva)("text-foreground text-sm")
|
|
@@ -832,7 +891,7 @@ const Switch = {
|
|
|
832
891
|
"border-2 border-transparent",
|
|
833
892
|
"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",
|
|
834
893
|
"group-selected/switch:bg-brand bg-input",
|
|
835
|
-
"group-focus-visible/switch:
|
|
894
|
+
"group-focus-visible/switch:ui-state-focus outline-none"
|
|
836
895
|
]),
|
|
837
896
|
thumb: (0, __marigold_system.cva)([
|
|
838
897
|
"pointer-events-none block size-5 rounded-full",
|
|
@@ -845,6 +904,127 @@ const Switch = {
|
|
|
845
904
|
//#endregion
|
|
846
905
|
//#region src/components/Table.styles.ts
|
|
847
906
|
const Table = {
|
|
907
|
+
table: (0, __marigold_system.cva)(["text-sm bg-background"], {
|
|
908
|
+
variants: {
|
|
909
|
+
variant: {
|
|
910
|
+
default: "",
|
|
911
|
+
grid: "border-hidden",
|
|
912
|
+
muted: ""
|
|
913
|
+
},
|
|
914
|
+
size: {
|
|
915
|
+
compact: [
|
|
916
|
+
"[--cell-y-padding:calc(var(--spacing)*1.5)]",
|
|
917
|
+
"[--cell-x-padding:calc(var(--spacing)*2)]",
|
|
918
|
+
"[--header-height:calc(var(--spacing)*8)]"
|
|
919
|
+
],
|
|
920
|
+
default: [
|
|
921
|
+
"[--cell-y-padding:calc(var(--spacing)*2.5)]",
|
|
922
|
+
"[--cell-x-padding:calc(var(--spacing)*2.5)]",
|
|
923
|
+
"[--header-height:calc(var(--spacing)*10)]"
|
|
924
|
+
],
|
|
925
|
+
spacious: [
|
|
926
|
+
"[--cell-y-padding:calc(var(--spacing)*4)]",
|
|
927
|
+
"[--cell-x-padding:calc(var(--spacing)*4)]",
|
|
928
|
+
"[--header-height:calc(var(--spacing)*12)]"
|
|
929
|
+
]
|
|
930
|
+
}
|
|
931
|
+
},
|
|
932
|
+
defaultVariants: {
|
|
933
|
+
variant: "default",
|
|
934
|
+
size: "default"
|
|
935
|
+
}
|
|
936
|
+
}),
|
|
937
|
+
row: (0, __marigold_system.cva)([
|
|
938
|
+
"border-border not-last:border-b",
|
|
939
|
+
"transition-[background-color]",
|
|
940
|
+
"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/50",
|
|
941
|
+
"disabled:cursor-not-allowed",
|
|
942
|
+
"data-selection-mode:cursor-pointer data-selection-mode:hover:bg-muted",
|
|
943
|
+
"dragging:opacity-50 dragging:transform-gpu"
|
|
944
|
+
], {
|
|
945
|
+
variants: { variant: {
|
|
946
|
+
default: "",
|
|
947
|
+
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"],
|
|
948
|
+
admin: ["bg-access-admin"],
|
|
949
|
+
master: ["bg-access-master"]
|
|
950
|
+
} },
|
|
951
|
+
defaultVariants: { variant: "default" }
|
|
952
|
+
}),
|
|
953
|
+
head: (0, __marigold_system.cva)(["bg-background/90", "border-border border-b"]),
|
|
954
|
+
column: (0, __marigold_system.cva)([
|
|
955
|
+
"h-(--header-height) px-(--cell-x-padding) align-middle",
|
|
956
|
+
"font-medium text-muted-foreground",
|
|
957
|
+
"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",
|
|
958
|
+
"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/50",
|
|
959
|
+
"aria-[sort]:hover:bg-muted aria-[sort]:hover:cursor-pointer aria-[sort]:hover:text-foreground"
|
|
960
|
+
], {
|
|
961
|
+
variants: { variant: {
|
|
962
|
+
default: "",
|
|
963
|
+
grid: "not-last:border-r border-border",
|
|
964
|
+
muted: "bg-muted border-t border-border"
|
|
965
|
+
} },
|
|
966
|
+
defaultVariants: { variant: "default" }
|
|
967
|
+
}),
|
|
968
|
+
body: (0, __marigold_system.cva)(["bg-background"]),
|
|
969
|
+
cell: (0, __marigold_system.cva)([
|
|
970
|
+
"px-(--cell-x-padding) py-(--cell-y-padding)",
|
|
971
|
+
"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/50",
|
|
972
|
+
"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
|
+
"**:data-cell-content:outline-none"
|
|
974
|
+
]),
|
|
975
|
+
dragHandle: (0, __marigold_system.cva)([
|
|
976
|
+
"text-muted-foreground rounded size-4",
|
|
977
|
+
"[&_svg]:size-4",
|
|
978
|
+
"focus-visible:util-focus-ring outline-none"
|
|
979
|
+
]),
|
|
980
|
+
dragPreview: (0, __marigold_system.cva)(["px-4 py-3 bg-brand rounded-lg shadow-lg", "text-sm text-brand-foreground"]),
|
|
981
|
+
dragPreviewCounter: (0, __marigold_system.cva)([
|
|
982
|
+
"flex items-center justify-center rounded-full",
|
|
983
|
+
"bg-brand-foreground px-2",
|
|
984
|
+
"text-xs font-medium leading-normal text-brand"
|
|
985
|
+
]),
|
|
986
|
+
dropIndicator: (0, __marigold_system.cva)([
|
|
987
|
+
"relative",
|
|
988
|
+
"before:absolute before:inset-0 before:h-0.5 before:-translate-y-1/2 before:bg-stone-300",
|
|
989
|
+
"drop-target:before:z-10 drop-target:before:bg-stone-800"
|
|
990
|
+
]),
|
|
991
|
+
editablePopover: (0, __marigold_system.cva)(["ui-surface ui-elevation-overlay", "flex items-start justify-center gap-1 pl-1 pr-1 py-1"]),
|
|
992
|
+
editTrigger: (0, __marigold_system.cva)([
|
|
993
|
+
"flex items-center justify-center",
|
|
994
|
+
"text-foreground/60",
|
|
995
|
+
"size-button aspect-square rounded-surface transition-[color,background,transform]",
|
|
996
|
+
"cursor-pointer",
|
|
997
|
+
"focus-visible:ui-state-focus outline-none disabled:ui-state-disabled",
|
|
998
|
+
"duration-150 active:scale-[0.97] pressed:scale-[0.97]",
|
|
999
|
+
"hover:bg-hover hover:text-foreground",
|
|
1000
|
+
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-5"
|
|
1001
|
+
]),
|
|
1002
|
+
editCancel: (0, __marigold_system.cva)([
|
|
1003
|
+
"inline-flex items-center justify-center",
|
|
1004
|
+
"min-[600px]:text-foreground/60 font-medium",
|
|
1005
|
+
"text-sm h-button-small min-[600px]:size-button min-[600px]:aspect-square rounded-surface transition-[color,background,transform]",
|
|
1006
|
+
"cursor-pointer",
|
|
1007
|
+
"ml-1.5",
|
|
1008
|
+
"focus-visible:ui-state-focus outline-none",
|
|
1009
|
+
"duration-150 active:scale-[0.97] pressed:scale-[0.97]",
|
|
1010
|
+
"hover:bg-hover hover:text-foreground",
|
|
1011
|
+
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-5"
|
|
1012
|
+
]),
|
|
1013
|
+
editSave: (0, __marigold_system.cva)([
|
|
1014
|
+
"inline-flex items-center justify-center",
|
|
1015
|
+
"min-[600px]:text-foreground/60 font-medium",
|
|
1016
|
+
"text-sm h-button-small min-[600px]:size-button min-[600px]:aspect-square rounded-surface transition-[color,background,transform]",
|
|
1017
|
+
"cursor-pointer",
|
|
1018
|
+
"focus-visible:ui-state-focus outline-none",
|
|
1019
|
+
"duration-150 active:scale-[0.97] pressed:scale-[0.97]",
|
|
1020
|
+
"hover:bg-hover hover:text-foreground",
|
|
1021
|
+
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4.5"
|
|
1022
|
+
])
|
|
1023
|
+
};
|
|
1024
|
+
|
|
1025
|
+
//#endregion
|
|
1026
|
+
//#region src/components/LegacyTable.styles.ts
|
|
1027
|
+
const LegacyTable = {
|
|
848
1028
|
table: (0, __marigold_system.cva)("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", { variants: { variant: {
|
|
849
1029
|
default: "",
|
|
850
1030
|
grid: ""
|
|
@@ -869,15 +1049,15 @@ const Table = {
|
|
|
869
1049
|
} },
|
|
870
1050
|
defaultVariants: { variant: "default" }
|
|
871
1051
|
}),
|
|
872
|
-
body: (0, __marigold_system.cva)("[&_tr:last-child]:border-0"),
|
|
1052
|
+
body: (0, __marigold_system.cva)("[&_tr:last-child]:border-0 bg-background"),
|
|
873
1053
|
row: (0, __marigold_system.cva)([
|
|
874
1054
|
"border-b border-border transition-colors",
|
|
875
1055
|
"focus-visible:outline-2 outline-offset-2 outline-ring/70",
|
|
876
1056
|
"data-disabled:cursor-not-allowed"
|
|
877
1057
|
], {
|
|
878
1058
|
variants: { variant: {
|
|
879
|
-
default: "aria-
|
|
880
|
-
grid: "aria-
|
|
1059
|
+
default: "aria-selected:bg-muted",
|
|
1060
|
+
grid: "aria-selected:bg-muted [&>:not(:last-child)]:border-r [&>:not(:last-child)]:border-border",
|
|
881
1061
|
admin: [
|
|
882
1062
|
"bg-access-admin",
|
|
883
1063
|
"[&_td:first-child]:relative [&_td:first-child]:pl-4",
|
|
@@ -910,13 +1090,13 @@ const Tabs = {
|
|
|
910
1090
|
tab: (0, __marigold_system.cva)([
|
|
911
1091
|
"relative inline-flex items-center justify-center gap-1 rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors",
|
|
912
1092
|
"[&_svg]:shrink-0",
|
|
913
|
-
"focus-visible:
|
|
1093
|
+
"focus-visible:ui-state-focus outline-none",
|
|
914
1094
|
"hover:bg-hover hover:text-foreground",
|
|
915
1095
|
"disabled:pointer-events-none disabled:opacity-50",
|
|
916
|
-
"
|
|
1096
|
+
"selected:text-foreground selected:hover:bg-hover",
|
|
917
1097
|
"data-[selected=true]:after:bg-foreground after:absolute after:inset-x-0 after:bottom-0 after:-mb-1 after:h-0.5"
|
|
918
1098
|
]),
|
|
919
|
-
tabpanel: (0, __marigold_system.cva)(["py-4 rounded-sm", "focus-visible:
|
|
1099
|
+
tabpanel: (0, __marigold_system.cva)(["py-4 rounded-sm", "focus-visible:ui-state-focus outline-none"])
|
|
920
1100
|
};
|
|
921
1101
|
|
|
922
1102
|
//#endregion
|
|
@@ -924,35 +1104,64 @@ const Tabs = {
|
|
|
924
1104
|
const Tag = {
|
|
925
1105
|
container: (0, __marigold_system.cva)(["flex gap-3", "min-h-7"]),
|
|
926
1106
|
tag: (0, __marigold_system.cva)([
|
|
927
|
-
"relative inline-flex items-center gap-
|
|
928
|
-
"
|
|
1107
|
+
"relative inline-flex items-center gap-1.75",
|
|
1108
|
+
"ui-surface shadow-elevation-border",
|
|
929
1109
|
"font-medium text-xs",
|
|
930
|
-
"h-
|
|
931
|
-
"
|
|
932
|
-
"selected:text-white selected:bg-brand",
|
|
1110
|
+
"h-6 px-2 cursor-default",
|
|
1111
|
+
"selected:text-white selected:[--ui-background-color:var(--color-brand)]",
|
|
933
1112
|
"data-disabled:cursor-not-allowed data-disabled:text-disabled-foreground data-disabled:bg-disabled",
|
|
934
|
-
"focus-visible:
|
|
1113
|
+
"focus-visible:ui-state-focus outline-none"
|
|
935
1114
|
]),
|
|
936
1115
|
closeButton: (0, __marigold_system.cva)(["size-4", "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed"]),
|
|
937
1116
|
listItems: (0, __marigold_system.cva)(["flex flex-wrap gap-1", "mb-0"]),
|
|
938
1117
|
removeAll: (0, __marigold_system.cva)([
|
|
939
1118
|
"inline whitespace-nowrap font-medium transition-[color,box-shadow,transform] rounded-md",
|
|
940
|
-
"duration-150 active:scale-[0.
|
|
941
|
-
"focus-visible:
|
|
1119
|
+
"duration-150 active:scale-[0.97] pressed:scale-[0.97]",
|
|
1120
|
+
"focus-visible:ui-state-focus outline-none",
|
|
942
1121
|
"cursor-pointer",
|
|
943
1122
|
"text-link text-xs util-touch-hitbox"
|
|
944
1123
|
])
|
|
945
1124
|
};
|
|
946
1125
|
|
|
1126
|
+
//#endregion
|
|
1127
|
+
//#region src/components/TagField.styles.ts
|
|
1128
|
+
const TagField = {
|
|
1129
|
+
trigger: (0, __marigold_system.cva)([
|
|
1130
|
+
"flex w-full items-center justify-between gap-1",
|
|
1131
|
+
"ui-surface shadow-elevation-border ui-input h-fit min-h-input",
|
|
1132
|
+
"cursor-pointer py-1",
|
|
1133
|
+
"group-disabled/field:ui-state-disabled",
|
|
1134
|
+
"has-focus:ui-state-focus",
|
|
1135
|
+
"group-invalid/field:ui-state-error",
|
|
1136
|
+
"has-focus:group-invalid/field:ring-destructive/20"
|
|
1137
|
+
]),
|
|
1138
|
+
tagGroup: (0, __marigold_system.cva)("flex flex-1 flex-wrap items-center gap-1"),
|
|
1139
|
+
listItems: (0, __marigold_system.cva)("flex flex-wrap gap-1"),
|
|
1140
|
+
button: (0, __marigold_system.cva)([
|
|
1141
|
+
"util-touch-hitbox rounded-full [&_svg]:size-4",
|
|
1142
|
+
"shrink-0 cursor-pointer outline-0",
|
|
1143
|
+
"flex items-center justify-center",
|
|
1144
|
+
"hover:bg-hover size-6",
|
|
1145
|
+
"focus:ui-state-focus",
|
|
1146
|
+
"disabled:ui-state-disabled"
|
|
1147
|
+
]),
|
|
1148
|
+
container: (0, __marigold_system.cva)([
|
|
1149
|
+
"ui-surface shadow-elevation-border group/tagfield",
|
|
1150
|
+
"flex flex-col overflow-hidden gap-1.5 p-2",
|
|
1151
|
+
"w-(--tagfield-trigger-width)",
|
|
1152
|
+
"[&_div]:shadow-none! [&_div]:border-0!"
|
|
1153
|
+
])
|
|
1154
|
+
};
|
|
1155
|
+
|
|
947
1156
|
//#endregion
|
|
948
1157
|
//#region src/components/TextArea.styles.ts
|
|
949
1158
|
const TextArea = (0, __marigold_system.cva)([
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
"
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
"
|
|
1159
|
+
"inline-flex",
|
|
1160
|
+
"ui-surface shadow-elevation-border ui-input h-[initial]",
|
|
1161
|
+
"disabled:ui-state-disabled",
|
|
1162
|
+
"group-read-only/field:ui-state-readonly",
|
|
1163
|
+
"invalid:ui-state-error",
|
|
1164
|
+
"focus:ui-state-focus outline-none"
|
|
956
1165
|
]);
|
|
957
1166
|
|
|
958
1167
|
//#endregion
|
|
@@ -990,10 +1199,10 @@ const Text = (0, __marigold_system.cva)("", {
|
|
|
990
1199
|
//#region src/components/Toast.styles.ts
|
|
991
1200
|
const Toast = {
|
|
992
1201
|
toast: (0, __marigold_system.cva)([
|
|
993
|
-
"
|
|
994
|
-
"max-w-sm w-full pointer-events-auto overflow-hidden
|
|
1202
|
+
"ui-surface shadow-elevation-overlay",
|
|
1203
|
+
"max-w-sm w-full pointer-events-auto overflow-hidden text-foreground",
|
|
995
1204
|
"grid grid-cols-[auto_1fr_auto_auto] grid-rows-[auto_auto] gap-x-1 gap-y-0",
|
|
996
|
-
"[grid-template-areas:'icon_title_action_close''icon_description_action_close'] focus-visible:
|
|
1205
|
+
"[grid-template-areas:'icon_title_action_close''icon_description_action_close'] focus-visible:state-focus outline-none",
|
|
997
1206
|
"p-4"
|
|
998
1207
|
]),
|
|
999
1208
|
title: (0, __marigold_system.cva)([
|
|
@@ -1007,7 +1216,7 @@ const Toast = {
|
|
|
1007
1216
|
"ml-2",
|
|
1008
1217
|
"flex items-center justify-center",
|
|
1009
1218
|
"size-5 rounded transition-[color,box-shadow] outline-none",
|
|
1010
|
-
"focus-visible:
|
|
1219
|
+
"focus-visible:ui-state-focus outline-none text-muted-foreground hover:text-hover-foreground"
|
|
1011
1220
|
]),
|
|
1012
1221
|
icon: (0, __marigold_system.cva)([
|
|
1013
1222
|
"[grid-area:icon]",
|
|
@@ -1037,7 +1246,7 @@ const Toast = {
|
|
|
1037
1246
|
//#region src/components/Tooltip.styles.ts
|
|
1038
1247
|
const Tooltip = {
|
|
1039
1248
|
container: (0, __marigold_system.cva)([
|
|
1040
|
-
"relative
|
|
1249
|
+
"relative max-w-70 rounded-md border px-3 py-1.5 text-sm",
|
|
1041
1250
|
"placement-top:mb-2",
|
|
1042
1251
|
"placement-bottom:mt-2",
|
|
1043
1252
|
"placement-right:ml-2",
|
|
@@ -1045,26 +1254,44 @@ const Tooltip = {
|
|
|
1045
1254
|
], {
|
|
1046
1255
|
variants: { variant: {
|
|
1047
1256
|
default: "text-brand-foreground bg-brand border-brand",
|
|
1048
|
-
white: "text-secondary-foreground border-
|
|
1257
|
+
white: "text-secondary-foreground border-input bg-white"
|
|
1049
1258
|
} },
|
|
1050
1259
|
defaultVariants: { variant: "default" }
|
|
1051
1260
|
}),
|
|
1052
1261
|
arrow: (0, __marigold_system.cva)([
|
|
1053
|
-
"
|
|
1054
|
-
"
|
|
1055
|
-
"
|
|
1262
|
+
"placement-right:[&_svg]:rotate-90",
|
|
1263
|
+
"placement-left:[&_svg]:-rotate-90",
|
|
1264
|
+
"placement-bottom:[&_svg]:rotate-180"
|
|
1056
1265
|
], {
|
|
1057
1266
|
variants: { variant: {
|
|
1058
1267
|
default: "fill-brand stroke-brand",
|
|
1059
|
-
white: "fill-white stroke-
|
|
1268
|
+
white: "fill-white stroke-input "
|
|
1060
1269
|
} },
|
|
1061
1270
|
defaultVariants: { variant: "default" }
|
|
1062
1271
|
})
|
|
1063
1272
|
};
|
|
1064
1273
|
|
|
1274
|
+
//#endregion
|
|
1275
|
+
//#region src/components/Tray.styles.ts
|
|
1276
|
+
const Tray = {
|
|
1277
|
+
overlay: (0, __marigold_system.cva)("bg-black/50 fixed inset-0 z-40 flex items-end justify-center"),
|
|
1278
|
+
container: (0, __marigold_system.cva)([
|
|
1279
|
+
"w-full border-0 inset-shadow-black inset-shadow-sm/20",
|
|
1280
|
+
"relative grid-rows-[auto_auto_1fr_auto] max-h-[95vh] rounded-b-none",
|
|
1281
|
+
"ui-surface ui-elevation-overlay",
|
|
1282
|
+
"outline-hidden grid",
|
|
1283
|
+
"after:absolute after:inset-x-0 after:top-full after:h-screen after:bg-background after:content-['']"
|
|
1284
|
+
]),
|
|
1285
|
+
dragHandle: (0, __marigold_system.cva)("bg-surface-border mx-auto mt-2 h-1.5 w-12 rounded-full"),
|
|
1286
|
+
header: (0, __marigold_system.cva)("border-border border-b px-6 py-4"),
|
|
1287
|
+
title: (0, __marigold_system.cva)("font-semibold text-base"),
|
|
1288
|
+
content: (0, __marigold_system.cva)("overflow-y-auto outline-none p-2"),
|
|
1289
|
+
actions: (0, __marigold_system.cva)("flex flex-row gap-3 justify-end border-border border-t px-6 py-4")
|
|
1290
|
+
};
|
|
1291
|
+
|
|
1065
1292
|
//#endregion
|
|
1066
1293
|
//#region src/components/Underlay.styles.ts
|
|
1067
|
-
const Underlay = (0, __marigold_system.cva)("bg-black/80 px-4");
|
|
1294
|
+
const Underlay = (0, __marigold_system.cva)(["bg-black/80 px-4"]);
|
|
1068
1295
|
|
|
1069
1296
|
//#endregion
|
|
1070
1297
|
//#region src/components/Loader.styles.ts
|
|
@@ -1132,18 +1359,75 @@ const Breadcrumbs = {
|
|
|
1132
1359
|
//#region src/components/FileField.styles.ts
|
|
1133
1360
|
const FileField = {
|
|
1134
1361
|
container: (0, __marigold_system.cva)("space-y-2 "),
|
|
1135
|
-
dropZone: (0, __marigold_system.cva)(
|
|
1362
|
+
dropZone: (0, __marigold_system.cva)([
|
|
1363
|
+
"relative flex min-h-52 flex-col items-center overflow-hidden",
|
|
1364
|
+
"rounded-xl border border-dashed border-surface-border",
|
|
1365
|
+
"p-4 transition-[color,background] not-data-files:justify-center",
|
|
1366
|
+
"data-[drop-target=true]:bg-muted",
|
|
1367
|
+
"focus-visible:bg-focus/50"
|
|
1368
|
+
]),
|
|
1136
1369
|
dropZoneContent: (0, __marigold_system.cva)("flex flex-col items-center justify-center gap-2 px-4 py-3 text-center"),
|
|
1137
1370
|
dropZoneLabel: (0, __marigold_system.cva)("text-sm font-medium"),
|
|
1138
|
-
item: (0, __marigold_system.cva)(
|
|
1139
|
-
|
|
1140
|
-
|
|
1371
|
+
item: (0, __marigold_system.cva)([
|
|
1372
|
+
"[grid-template-areas:'label_remove'_'description_remove'] grid-cols-[1fr_auto] gap-y-0.5 gap-x-2",
|
|
1373
|
+
"p-2",
|
|
1374
|
+
"ui-surface shadow-elevation-border"
|
|
1375
|
+
]),
|
|
1376
|
+
itemLabel: (0, __marigold_system.cva)(["truncate text-[13px] font-medium"]),
|
|
1377
|
+
itemDescription: (0, __marigold_system.cva)(["text-muted-foreground text-xs"]),
|
|
1378
|
+
itemRemove: (0, __marigold_system.cva)(["flex items-center"])
|
|
1379
|
+
};
|
|
1380
|
+
|
|
1381
|
+
//#endregion
|
|
1382
|
+
//#region src/components/ToggleButton.styles.ts
|
|
1383
|
+
const ToggleButton = {
|
|
1384
|
+
group: (0, __marigold_system.cva)("group inline-flex ui-surface shadow-elevation-border", {
|
|
1385
|
+
variants: { size: {
|
|
1386
|
+
default: "text-sm",
|
|
1387
|
+
small: "text-xs",
|
|
1388
|
+
icon: ""
|
|
1389
|
+
} },
|
|
1390
|
+
defaultVariants: { size: "default" }
|
|
1391
|
+
}),
|
|
1392
|
+
button: (0, __marigold_system.cva)([
|
|
1393
|
+
...buttonBase,
|
|
1394
|
+
"ui-surface shadow-elevation-border",
|
|
1395
|
+
"hover:[--ui-background-color:var(--color-hover)] hover:text-foreground",
|
|
1396
|
+
"disabled:border-0 disabled:shadow-none disabled:[--ui-background-color:var(--color-disabled)]",
|
|
1397
|
+
"selected:[--ui-background-color:var(--color-input)] selected:shadow-none",
|
|
1398
|
+
"in-[.group]:rounded-none in-[.group]:shadow-none in-[.group]:border-y-0 in-[.group]:border-l-0",
|
|
1399
|
+
"in-[.group]:first:rounded-l-surface",
|
|
1400
|
+
"in-[.group]:last:rounded-r-surface in-[.group]:last:border-r-0"
|
|
1401
|
+
], {
|
|
1402
|
+
variants: { size: {
|
|
1403
|
+
default: "text-sm",
|
|
1404
|
+
small: "text-xs",
|
|
1405
|
+
icon: ""
|
|
1406
|
+
} },
|
|
1407
|
+
defaultVariants: { size: "default" },
|
|
1408
|
+
compoundVariants: [
|
|
1409
|
+
{
|
|
1410
|
+
size: "default",
|
|
1411
|
+
class: "h-button px-4 py-2 [&_svg]:size-4"
|
|
1412
|
+
},
|
|
1413
|
+
{
|
|
1414
|
+
size: "small",
|
|
1415
|
+
class: "h-button-small px-3 [&_svg]:size-3.5"
|
|
1416
|
+
},
|
|
1417
|
+
{
|
|
1418
|
+
size: "icon",
|
|
1419
|
+
class: "size-button [&_svg]:size-4"
|
|
1420
|
+
}
|
|
1421
|
+
]
|
|
1422
|
+
})
|
|
1141
1423
|
};
|
|
1142
1424
|
|
|
1143
1425
|
//#endregion
|
|
1144
1426
|
//#region src/components/index.ts
|
|
1145
1427
|
var components_exports = /* @__PURE__ */ __export({
|
|
1146
1428
|
Accordion: () => Accordion,
|
|
1429
|
+
ActionBar: () => ActionBar,
|
|
1430
|
+
Autocomplete: () => Autocomplete,
|
|
1147
1431
|
Badge: () => Badge,
|
|
1148
1432
|
Breadcrumbs: () => Breadcrumbs,
|
|
1149
1433
|
Button: () => Button,
|
|
@@ -1159,6 +1443,7 @@ var components_exports = /* @__PURE__ */ __export({
|
|
|
1159
1443
|
Dialog: () => Dialog,
|
|
1160
1444
|
Divider: () => Divider,
|
|
1161
1445
|
Drawer: () => Drawer,
|
|
1446
|
+
EmptyState: () => EmptyState,
|
|
1162
1447
|
Field: () => Field,
|
|
1163
1448
|
FileField: () => FileField,
|
|
1164
1449
|
Headline: () => Headline,
|
|
@@ -1166,6 +1451,7 @@ var components_exports = /* @__PURE__ */ __export({
|
|
|
1166
1451
|
IconButton: () => IconButton,
|
|
1167
1452
|
Input: () => Input,
|
|
1168
1453
|
Label: () => Label,
|
|
1454
|
+
LegacyTable: () => LegacyTable,
|
|
1169
1455
|
Link: () => Link,
|
|
1170
1456
|
List: () => List,
|
|
1171
1457
|
ListBox: () => ListBox,
|
|
@@ -1185,10 +1471,13 @@ var components_exports = /* @__PURE__ */ __export({
|
|
|
1185
1471
|
Table: () => Table,
|
|
1186
1472
|
Tabs: () => Tabs,
|
|
1187
1473
|
Tag: () => Tag,
|
|
1474
|
+
TagField: () => TagField,
|
|
1188
1475
|
Text: () => Text,
|
|
1189
1476
|
TextArea: () => TextArea,
|
|
1190
1477
|
Toast: () => Toast,
|
|
1478
|
+
ToggleButton: () => ToggleButton,
|
|
1191
1479
|
Tooltip: () => Tooltip,
|
|
1480
|
+
Tray: () => Tray,
|
|
1192
1481
|
Underlay: () => Underlay
|
|
1193
1482
|
});
|
|
1194
1483
|
|
|
@@ -1206,4 +1495,4 @@ var src_default = theme;
|
|
|
1206
1495
|
//#endregion
|
|
1207
1496
|
exports.default = src_default;
|
|
1208
1497
|
exports.theme = theme;
|
|
1209
|
-
//# sourceMappingURL=index.
|
|
1498
|
+
//# sourceMappingURL=index.cjs.map
|