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