@marigold/theme-rui 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -28,145 +28,886 @@ module.exports = __toCommonJS(index_exports);
28
28
  // src/components/index.ts
29
29
  var components_exports = {};
30
30
  __export(components_exports, {
31
+ Accordion: () => Accordion,
32
+ Badge: () => Badge,
33
+ Body: () => Body,
31
34
  Button: () => Button,
35
+ Calendar: () => Calendar,
32
36
  Card: () => Card,
37
+ Checkbox: () => Checkbox,
38
+ ComboBox: () => ComboBox,
33
39
  DateField: () => DateField,
40
+ DatePicker: () => DatePicker,
41
+ Dialog: () => Dialog,
42
+ Divider: () => Divider,
34
43
  Field: () => Field,
44
+ Footer: () => Footer,
45
+ Header: () => Header,
46
+ Headline: () => Headline,
35
47
  HelpText: () => HelpText,
48
+ IconButton: () => IconButton,
49
+ Image: () => Image,
36
50
  Input: () => Input,
37
51
  Label: () => Label,
52
+ Link: () => Link,
53
+ List: () => List,
54
+ ListBox: () => ListBox,
55
+ Menu: () => Menu,
38
56
  NumberField: () => NumberField,
57
+ Pagination: () => Pagination,
58
+ Popover: () => Popover,
59
+ ProgressCycle: () => ProgressCycle,
60
+ Radio: () => Radio,
61
+ SectionMessage: () => SectionMessage,
62
+ Select: () => Select,
63
+ Slider: () => Slider,
64
+ Switch: () => Switch,
65
+ Table: () => Table,
66
+ Tabs: () => Tabs,
67
+ Tag: () => Tag,
68
+ Text: () => Text,
39
69
  TextArea: () => TextArea,
40
- inputContainer: () => inputContainer,
41
- inputDisabled: () => inputDisabled,
42
- inputFocus: () => inputFocus,
43
- inputInvalid: () => inputInvalid,
44
- inputReadOnly: () => inputReadOnly
70
+ Tooltip: () => Tooltip,
71
+ Underlay: () => Underlay,
72
+ XLoader: () => XLoader
45
73
  });
46
74
 
47
- // src/components/Button.styles.ts
75
+ // src/components/Accordion.styles.ts
48
76
  var import_system = require("@marigold/system");
49
- var Button = (0, import_system.cva)(
77
+ var Accordion = {
78
+ container: (0, import_system.cva)("flex-col", {
79
+ variants: {
80
+ variant: {
81
+ default: "",
82
+ card: "space-y-2"
83
+ }
84
+ },
85
+ defaultVariants: {
86
+ variant: "default"
87
+ }
88
+ }),
89
+ item: (0, import_system.cva)("border-b last:border-b-0 border-border ", {
90
+ variants: {
91
+ variant: {
92
+ default: "",
93
+ card: "has-focus-visible:border-border has-focus-visible:ring-ring/50 rounded-md border px-4 py-1 outline-none last:border-b has-focus-visible:ring-[3px]"
94
+ }
95
+ },
96
+ defaultVariants: {
97
+ variant: "default"
98
+ }
99
+ }),
100
+ header: (0, import_system.cva)(
101
+ [
102
+ "focus-visible:border-border focus-visible:ring-ring/50 flex flex-1 w-full items-center justify-between gap-4 rounded-md py-2 text-left text-sm font-semibold",
103
+ " transition-all outline-none hover:no-underline focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:text-disabled-foreground leading-6"
104
+ ],
105
+ {
106
+ variants: {
107
+ variant: {
108
+ default: "",
109
+ card: "hover:no-underline focus-visible:ring-0"
110
+ }
111
+ },
112
+ defaultVariants: {
113
+ variant: "default"
114
+ }
115
+ }
116
+ ),
117
+ content: (0, import_system.cva)(
118
+ "overflow-hidden text-sm text-muted-foreground in-data-[expanded]:pb-2"
119
+ ),
120
+ icon: (0, import_system.cva)(
121
+ "pointer-events-none shrink-0 opacity-60 transition-transform duration-200"
122
+ )
123
+ };
124
+
125
+ // src/components/Badge.styles.ts
126
+ var import_system2 = require("@marigold/system");
127
+ var circle = "before:size-1.5 before:rounded-full";
128
+ var Badge = (0, import_system2.cva)(
129
+ [
130
+ "inline-flex items-center justify-center rounded-full border px-1.5 text-xs font-medium leading-normal transition-colors",
131
+ // TODO: Make focus style be a utility or something?
132
+ "outline-offset-2 focus-visible:outline-2 outline-ring/70"
133
+ ],
134
+ {
135
+ variants: {
136
+ variant: {
137
+ default: "border-border bg-white",
138
+ primary: "bg-brand text-brand-foreground border-transparent",
139
+ success: [
140
+ "bg-success-muted text-success-muted-foreground border-success-muted-accent before:bg-success-muted-accent gap-1.5",
141
+ circle
142
+ ],
143
+ warning: [
144
+ "bg-warning-muted text-warning-muted-foreground border-warning-muted-accent before:bg-warning-muted-accent gap-1.5",
145
+ circle
146
+ ],
147
+ info: [
148
+ "bg-info-muted text-info-muted-foreground border-info-muted-accent before:bg-info-muted-accent gap-1.5",
149
+ circle
150
+ ],
151
+ error: [
152
+ "bg-destructive-muted text-destructive-muted-foreground border-destructive-muted-accent before:bg-destructive-muted-accent gap-1.5",
153
+ circle
154
+ ]
155
+ }
156
+ },
157
+ defaultVariants: {
158
+ variant: "default"
159
+ }
160
+ }
161
+ );
162
+
163
+ // src/components/Body.styles.ts
164
+ var import_system3 = require("@marigold/system");
165
+ var Body = (0, import_system3.cva)("");
166
+
167
+ // src/components/Button.styles.ts
168
+ var import_system4 = require("@marigold/system");
169
+ var Button = (0, import_system4.cva)(
50
170
  [
51
- "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors outline-offset-2 focus-visible:outline-2 focus-visible:outline-ring/70 disabled:pointer-events-none disabled:opacity-50"
171
+ "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors outline-hidden",
172
+ "[&_svg]:pointer-events-none [&_svg]:shrink-0",
173
+ "focus-visible:outline-offset-2 focus-visible:outline focus-visible:outline-ring/70",
174
+ "h-button px-4 py-2",
175
+ "disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground disabled:border-none disabled:cursor-not-allowed",
176
+ "pending:text-disabled-foreground pending:bg-disabled pending:cursor-not-allowed pending:border-none"
52
177
  ],
53
178
  {
54
179
  variants: {
55
180
  variant: {
56
- primary: "bg-brand text-brand-foreground shadow-sm shadow-black/5 hover:bg-primary/90",
57
- destructive: "bg-destructive text-destructive-foreground"
181
+ default: "border border-border bg-background shadow-sm shadow-black/5 hover:bg-hover hover:text-foreground",
182
+ primary: "bg-brand text-brand-foreground shadow-sm shadow-black/5 hover:bg-brand/90",
183
+ destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
184
+ ghost: "hover:bg-hover hover:text-foreground",
185
+ // only used for calendar in MonthListBox and YearListBox to have a hover over other options
186
+ // TODO: Remove this in future and rethink the MonthListBox and YearListBox or use another variant
187
+ text: "hover:bg-hover"
58
188
  }
189
+ },
190
+ defaultVariants: {
191
+ variant: "default"
59
192
  }
60
193
  }
61
194
  );
62
195
 
63
196
  // src/components/Card.styles.ts
64
- var import_system2 = require("@marigold/system");
65
- var Card = (0, import_system2.cva)("");
197
+ var import_system5 = require("@marigold/system");
198
+ var Card = (0, import_system5.cva)([
199
+ "border border-input rounded-lg",
200
+ "bg-surface-overlay ",
201
+ "p-4",
202
+ " shadow-sm shadow-black/5"
203
+ ]);
204
+
205
+ // src/components/Checkbox.styles.ts
206
+ var import_system6 = require("@marigold/system");
207
+ var Checkbox = {
208
+ checkbox: (0, import_system6.cva)([
209
+ "grid size-4 shrink-0 place-content-center rounded",
210
+ "border border-input shadow-sm shadow-black/5",
211
+ "group-disabled/checkbox:border-disabled",
212
+ "outline-offset-2 group-[focus-visible]/checkbox:outline-2 group-[focus-visible]/checkbox:outline-ring/70",
213
+ "group-selected/checkbox:border-brand group-selected/checkbox:bg-brand group-selected/checkbox:text-brand-foreground",
214
+ "group-[indeterminate]/checkbox:border-brand group-[indeterminate]/checkbox:bg-brand group-[indeterminate]/checkbox:text-brand-foreground"
215
+ ]),
216
+ container: (0, import_system6.cva)(),
217
+ label: (0, import_system6.cva)(
218
+ 'text-sm leading-4 group-[group="checkbox"]/checkboxgroup:font-normal font-medium text-foreground group-disabled/checkbox:text-disabled-foreground'
219
+ ),
220
+ group: (0, import_system6.cva)()
221
+ };
222
+
223
+ // src/components/Calendar.styles.ts
224
+ var import_system7 = require("@marigold/system");
225
+ var Calendar = {
226
+ calendar: (0, import_system7.cva)(
227
+ "rounded-lg border group-[trigger]/popover:border-0 border-border p-2"
228
+ ),
229
+ calendarCell: (0, import_system7.cva)([
230
+ "relative flex size-9 items-center justify-center whitespace-nowrap rounded-lg",
231
+ "border border-transparent p-0 text-sm font-normal text-foreground",
232
+ "outline-offset-2 duration-150 [transition-property:color,background-color,border-radius,box-shadow]",
233
+ "disabled:pointer-events-none data-[unavailable]:pointer-events-none data-focus-visible:z-10 data-[hovered]:bg-hover selected:bg-brand data-[hovered]:text-foreground selected:text-brand-foreground data-[unavailable]:line-through",
234
+ "disabled:opacity-30 data-[unavailable]:opacity-30",
235
+ "focus:outline-0 focus-visible:outline-2 focus-visible:outline-ring/70"
236
+ ]),
237
+ calendarControllers: (0, import_system7.cva)([
238
+ "size-9 rounded-lg",
239
+ "text-muted-foreground/80",
240
+ "outline-offset-2 transition-colors",
241
+ "focus-visible:outline-2 focus-visible:outline-ring/70"
242
+ ]),
243
+ calendarHeader: (0, import_system7.cva)([
244
+ "size-9 rounded-lg p-0 text-xs font-medium text-muted-foreground/80"
245
+ ]),
246
+ calendarGrid: (0, import_system7.cva)("[&_td]:p-2")
247
+ };
248
+
249
+ // src/components/ComboBox.styles.ts
250
+ var import_system8 = require("@marigold/system");
251
+ var ComboBox = (0, import_system8.cva)(
252
+ "text-muted-foreground/80 right-2"
253
+ );
66
254
 
67
255
  // src/components/DateField.styles.ts
68
- var import_system4 = require("@marigold/system");
256
+ var import_system10 = require("@marigold/system");
69
257
 
70
258
  // src/components/Input.styles.ts
71
- var import_system3 = require("@marigold/system");
72
- var inputContainer = "flex w-full px-3 py-2 rounded-lg shadow-sm shadow-black/5 border border-input-border bg-background text-sm text-foreground transition-shadow";
73
- var inputDisabled = "disabled:cursor-not-allowed disabled:opacity-50";
259
+ var import_system9 = require("@marigold/system");
260
+ var inputContainer = "flex w-full px-3 py-2 rounded-lg shadow-sm shadow-black/5 border border-input bg-background text-sm text-foreground transition-shadow";
261
+ var inputDisabled = "disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled";
74
262
  var inputInvalid = "group-error/field:border-destructive group-error/field:focus:border-destructive group-error/field:focus:ring-destructive/20";
75
- var inputFocus = "focus:border-input-ring focus:outline-none focus:ring-[3px] focus:ring-input-ring/20";
76
- var inputReadOnly = "read-only:bg-muted";
263
+ var inputFocus = {
264
+ focus: "focus:border-ring focus:outline-none focus:ring-[3px] focus:ring-ring/20",
265
+ "focus-within": "focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20"
266
+ };
267
+ var inputReadOnly = "group-[readonly]/field:bg-muted";
77
268
  var Input = {
78
- input: (0, import_system3.cva)([
269
+ input: (0, import_system9.cva)([
79
270
  inputContainer,
80
271
  inputDisabled,
81
272
  inputInvalid,
82
- inputFocus,
273
+ inputFocus["focus"],
83
274
  inputReadOnly,
84
275
  "h-input",
85
276
  "placeholder:text-placeholder",
86
- "[&[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 file:me-3 file:h-full file:border-0 file:border-r file:border-solid file:border-input-border file:bg-transparent file:px-3 file:text-sm file:font-medium file:not-italic file:text-foreground",
277
+ "[&[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 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",
87
278
  "group-[icon]/input:pl-8",
88
279
  "group-[action]/input:pr-8"
89
280
  ]),
90
- icon: (0, import_system3.cva)([
281
+ icon: (0, import_system9.cva)([
91
282
  "pointer-events-none left-1",
92
- "text-muted-foreground disabled:opacity-50"
283
+ "text-muted-foreground disabled:text-disabled-foreground"
93
284
  ]),
94
- action: (0, import_system3.cva)(["text-muted-foreground right-1"])
285
+ action: (0, import_system9.cva)(["text-muted-foreground right-1"])
95
286
  };
96
287
 
97
288
  // src/components/DateField.styles.ts
98
289
  var DateField = {
99
- field: (0, import_system4.cva)([
290
+ field: (0, import_system10.cva)([
100
291
  "h-input",
101
292
  inputContainer,
102
293
  inputDisabled,
103
- inputFocus,
294
+ inputFocus["focus-within"],
104
295
  inputInvalid,
105
- inputReadOnly
296
+ inputReadOnly,
297
+ "invalid:focus-within:border-destructive invalid:focus-within:ring-destructive/20"
298
+ ]),
299
+ segment: (0, import_system10.cva)([
300
+ inputDisabled,
301
+ "inline rounded p-0.5 text-foreground caret-transparent outline-0 data-[type=literal]:px-0 data-[focused]:data-[placeholder]:text-foreground data-[focused]:text-foreground data-[type=literal]:text-placeholder ",
302
+ "data-[focused]:bg-focus",
303
+ "data-[placeholder]:disabled:text-disabled-foreground",
304
+ "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"
106
305
  ]),
107
- segment: (0, import_system4.cva)([]),
108
- action: (0, import_system4.cva)("")
306
+ action: (0, import_system10.cva)(
307
+ "fill-muted-foreground disabled:text-disabled-foreground group-error/field:fill-destructive"
308
+ )
309
+ };
310
+
311
+ // src/components/DatePicker.styles.ts
312
+ var import_system11 = require("@marigold/system");
313
+ var DatePicker = (0, import_system11.cva)([
314
+ "relative h-input -top-2",
315
+ "text-muted-foreground/80",
316
+ "hover:text-brand"
317
+ ]);
318
+
319
+ // src/components/Dialog.styles.ts
320
+ var import_system12 = require("@marigold/system");
321
+ var Dialog = {
322
+ closeButton: (0, import_system12.cva)(""),
323
+ container: (0, import_system12.cva)(
324
+ [
325
+ "bg-background fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl",
326
+ " border p-6 shadow-lg duration-200 sm:max-w-100 border-border"
327
+ ],
328
+ {
329
+ variants: {
330
+ size: {
331
+ default: "",
332
+ small: "w-[min(100%,640px)]",
333
+ medium: "w-[min(100%,768px)]",
334
+ large: "w-[min(100%,1024px)]"
335
+ }
336
+ },
337
+ defaultVariants: {
338
+ size: "default"
339
+ }
340
+ }
341
+ ),
342
+ header: (0, import_system12.cva)("flex flex-col gap-1 text-center sm:text-left"),
343
+ content: (0, import_system12.cva)("text-muted-foreground text-sm"),
344
+ actions: (0, import_system12.cva)("flex flex-col-reverse gap-3 sm:flex-row sm:justify-end")
109
345
  };
110
346
 
347
+ // src/components/Divider.styles.ts
348
+ var import_system13 = require("@marigold/system");
349
+ var Divider = (0, import_system13.cva)(
350
+ "bg-stone-300 h-px w-full",
351
+ {
352
+ variants: {
353
+ variant: {
354
+ bold: "h-0.5",
355
+ section: ""
356
+ }
357
+ }
358
+ }
359
+ );
360
+
361
+ // src/components/IconButton.styles.ts
362
+ var import_system14 = require("@marigold/system");
363
+ var IconButton = (0, import_system14.cva)("", {
364
+ variants: {
365
+ variant: {
366
+ 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"
367
+ }
368
+ }
369
+ });
370
+
111
371
  // src/components/Field.styles.ts
112
- var import_system5 = require("@marigold/system");
113
- var Field = (0, import_system5.cva)("space-y-2");
372
+ var import_system15 = require("@marigold/system");
373
+ var Field = (0, import_system15.cva)("space-y-2");
374
+
375
+ // src/components/Footer.styles.ts
376
+ var import_system16 = require("@marigold/system");
377
+ var Footer = (0, import_system16.cva)("");
378
+
379
+ // src/components/Header.styles.ts
380
+ var import_system17 = require("@marigold/system");
381
+ var Header = (0, import_system17.cva)("");
382
+
383
+ // src/components/Headline.styles.ts
384
+ var import_system18 = require("@marigold/system");
385
+ var Headline = (0, import_system18.cva)("", {
386
+ variants: {
387
+ size: {
388
+ "level-1": "text-5xl font-black",
389
+ "level-2": "text-3xl font-black",
390
+ "level-3": "text-2xl font-black",
391
+ "level-4": "text-lg font-black",
392
+ "level-5": "text-base font-black",
393
+ "level-6": "text-base font-normal"
394
+ }
395
+ }
396
+ });
114
397
 
115
398
  // src/components/HelpText.styles.ts
116
- var import_system6 = require("@marigold/system");
399
+ var import_system19 = require("@marigold/system");
117
400
  var HelpText = {
118
- container: (0, import_system6.cva)([
119
- "mt-2 text-xs text-muted-foreground",
401
+ container: (0, import_system19.cva)([
402
+ "mt-2 text-xs text-muted-foreground group-disabled/field:text-disabled-foreground",
120
403
  "group-error/field:text-destructive"
121
404
  ]),
122
- icon: (0, import_system6.cva)("")
405
+ icon: (0, import_system19.cva)("")
123
406
  };
124
407
 
408
+ // src/components/Image.styles.ts
409
+ var import_system20 = require("@marigold/system");
410
+ var Image = (0, import_system20.cva)();
411
+
125
412
  // src/components/Label.styles.ts
126
- var import_system7 = require("@marigold/system");
413
+ var import_system21 = require("@marigold/system");
127
414
  var Label = {
128
- container: (0, import_system7.cva)([
415
+ container: (0, import_system21.cva)([
129
416
  "text-sm font-medium leading-4 text-foreground",
130
- "group-disabled/field:cursor-not-allowed group-disabled/field:opacity-70"
417
+ "group-disabled/field:cursor-not-allowed group-disabled/field:text-disabled-foreground"
131
418
  ]),
132
- indicator: (0, import_system7.cva)(
419
+ indicator: (0, import_system21.cva)(
133
420
  "group-required/field:block group-required/field:text-destructive"
134
421
  )
135
422
  };
136
423
 
424
+ // src/components/Link.styles.ts
425
+ var import_system22 = require("@marigold/system");
426
+ var Link = (0, import_system22.cva)(
427
+ [
428
+ "text-text-link hover:underline aria-[disabled]:cursor-not-allowed py-2 underline-offset-5"
429
+ ],
430
+ {
431
+ variants: {
432
+ variant: {
433
+ menuItemLink: "",
434
+ secondary: ""
435
+ }
436
+ }
437
+ }
438
+ );
439
+
440
+ // src/components/List.styles.ts
441
+ var import_system23 = require("@marigold/system");
442
+ var List = {
443
+ ul: (0, import_system23.cva)("ml-6 list-inside list-disc py-3"),
444
+ ol: (0, import_system23.cva)("ml-6 list-inside list-decimal py-3"),
445
+ item: (0, import_system23.cva)("pt-3")
446
+ };
447
+
448
+ // src/components/ListBox.styles.ts
449
+ var import_system24 = require("@marigold/system");
450
+ var ListBox = {
451
+ container: (0, import_system24.cva)([
452
+ "overflow-hidden rounded-lg border border-input group-[trigger]/popover:border-0"
453
+ ]),
454
+ list: (0, import_system24.cva)(["space-y-1 bg-background p-1 text-sm outline-0"]),
455
+ option: (0, import_system24.cva)([
456
+ "disabled:cursor-not-allowed disabled:text-disabled-foreground",
457
+ "relative flex flex-col rounded-md px-2 py-1.5 text-sm text-foreground",
458
+ "selected:bg-selected",
459
+ "focus:outline-2 focus:outline-ring/70"
460
+ ]),
461
+ section: (0, import_system24.cva)(""),
462
+ header: (0, import_system24.cva)(
463
+ "[&_header]:px-2 [&_header]:py-1.5 [&_header]:text-xs [&_header]:font-medium [&_header]:text-muted-foreground"
464
+ )
465
+ };
466
+
467
+ // src/components/Menu.styles.ts
468
+ var import_system25 = require("@marigold/system");
469
+ var Menu = {
470
+ container: (0, import_system25.cva)([
471
+ "bg-surface-overlay text-foreground z-50 min-w-40 overflow-hidden rounded-md p-1 border-border"
472
+ ]),
473
+ item: (0, import_system25.cva)([
474
+ "focus:bg-focus focus:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none disabled:text-disabled-foreground"
475
+ ]),
476
+ section: (0, import_system25.cva)(
477
+ "text-muted-foreground px-2 py-1.5 text-xs font-medium border-t border-t-border in-first:border-t-0"
478
+ )
479
+ };
480
+
137
481
  // src/components/NumberField.styles.ts
138
- var import_system8 = require("@marigold/system");
482
+ var import_system26 = require("@marigold/system");
139
483
  var NumberField = {
140
- group: (0, import_system8.cva)([
141
- inputFocus,
484
+ group: (0, import_system26.cva)([
485
+ inputFocus["focus-within"],
142
486
  inputInvalid,
143
487
  "relative inline-flex w-full -mb-0.5 items-center overflow-hidden whitespace-nowrap rounded-lg h-input grow text-center tabular-nums text-foreground",
144
- "border border-input-border text-sm shadow-sm shadow-black/5 transition-shadow",
145
- "data-invalid:data-[focus-within]:border-destructive data-invalid:data-[focus-within]:ring-destructive/20",
146
- "data-[focus-within]:border-input-ring data-[focus-within]:outline-none data-[focus-within]:ring-[3px] data-[focus-within]:ring-input-ring/20"
488
+ "border border-input text-sm shadow-sm shadow-black/5 transition-shadow",
489
+ "data-invalid:data-[focus-within]:border-destructive data-invalid:data-[focus-within]:ring-destructive/20"
147
490
  ]),
148
- stepper: (0, import_system8.cva)([
491
+ stepper: (0, import_system26.cva)([
149
492
  "w-7 h-full",
150
- "data-[disabled]:opacity-50",
151
- "border-input-border border-solid first-of-type:border-r",
152
- "border-input-border border-solid last-of-type:border-l "
493
+ "disabled:text-disabled-foreground disabled:bg-disabled",
494
+ "border-input border-solid first-of-type:border-r",
495
+ "border-input border-solid last-of-type:border-l "
153
496
  ]),
154
- input: (0, import_system8.cva)(
497
+ input: (0, import_system26.cva)(
155
498
  "border-none shadow-none rounded-none outline-offset-0 text-center focus-visible:ring-0"
156
499
  )
157
500
  };
158
501
 
502
+ // src/components/Popover.styles.ts
503
+ var import_system27 = require("@marigold/system");
504
+ var Popover = (0, import_system27.cva)([
505
+ "group/popover",
506
+ "z-50 overflow-y-auto overflow-x-hidden rounded-lg outline-0",
507
+ "border border-border",
508
+ /** animate stuff missing */
509
+ "bg-surface-overlay text-foreground shadow-lg shadow-black/5 ",
510
+ "placement-t:mb-1",
511
+ "placement-b:mt-1",
512
+ "placement-r:ml-1",
513
+ "placement-l:mr-1"
514
+ ]);
515
+
516
+ // src/components/Radio.styles.ts
517
+ var import_system28 = require("@marigold/system");
518
+ var Radio = {
519
+ container: (0, import_system28.cva)(),
520
+ label: (0, import_system28.cva)(
521
+ "group-disabled/radio:text-disabled-foreground text-sm font-normal"
522
+ ),
523
+ radio: (0, import_system28.cva)([
524
+ "aspect-square size-4 rounded-full",
525
+ "border border-input shadow-sm shadow-black/5",
526
+ "outline-offset-2 group-[focus-visible]/radio:outline-2 group-[focus-visible]/radio:outline-ring/70",
527
+ "group-disabled/radio:border-disabled",
528
+ "group-selected/radio:border-brand group-selected/radio:bg-brand group-selected/radio:text-brand-foreground"
529
+ ]),
530
+ group: (0, import_system28.cva)()
531
+ };
532
+
533
+ // src/components/Pagination.styles.ts
534
+ var import_system29 = require("@marigold/system");
535
+ var Pagination = {
536
+ navigationButton: (0, import_system29.cva)(
537
+ "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"
538
+ ),
539
+ pageButton: (0, import_system29.cva)([
540
+ "inline-flex items-center justify-center gap-2 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 bg-background size-9",
541
+ "data-[selected=true]:border data-[selected=true]:border-input data-[selected=true]:shadow-xs",
542
+ "hover:bg-hover hover:text-hover-foreground"
543
+ ]),
544
+ icon: (0, import_system29.cva)("h-4 w-4")
545
+ };
546
+
547
+ // src/components/ProgressCycle.styles.ts
548
+ var import_system30 = require("@marigold/system");
549
+ var ProgressCycle = (0, import_system30.cva)([
550
+ "stroke-background"
551
+ ]);
552
+
553
+ // src/components/SectionMessage.styles.ts
554
+ var import_system31 = require("@marigold/system");
555
+ var SectionMessage = {
556
+ container: (0, import_system31.cva)(
557
+ [
558
+ 'grid-cols-[min-content_auto_min-content] gap-x-4 gap-y-2 [grid-template-areas:"icon_title_close""icon_content_content"]',
559
+ "bg-background z-50 max-w-[601px] rounded-sm border p-4"
560
+ ],
561
+ {
562
+ variants: {
563
+ variant: {
564
+ success: "border-success-muted-accent bg-success-muted text-success-muted-foreground",
565
+ warning: "border-warning-muted-accent bg-warning-muted text-warning-muted-foreground",
566
+ info: "border-info-muted-accent bg-info-muted text-info-muted-foreground",
567
+ error: "border-destructive-muted-accent bg-destructive-muted text-destructive-muted-foreground"
568
+ }
569
+ },
570
+ defaultVariants: {
571
+ variant: "info"
572
+ }
573
+ }
574
+ ),
575
+ title: (0, import_system31.cva)("text-base leading-5 font-bold"),
576
+ content: (0, import_system31.cva)("text-muted-foreground text-sm leading-5 font-normal", {
577
+ variants: {
578
+ variant: {
579
+ success: "text-success-muted-foreground",
580
+ warning: "text-warning-muted-foreground",
581
+ info: "text-info-muted-foreground",
582
+ error: "text-destructive-muted-foreground"
583
+ }
584
+ },
585
+ defaultVariants: {
586
+ variant: "info"
587
+ }
588
+ }),
589
+ icon: (0, import_system31.cva)("h-4 w-4 align-baseline leading-none pt-0.5", {
590
+ variants: {
591
+ variant: {
592
+ success: "text-success-muted-accent",
593
+ warning: "text-warning-muted-accent",
594
+ info: "text-info-muted-accent",
595
+ error: "text-destructive-muted-accent"
596
+ }
597
+ },
598
+ defaultVariants: {
599
+ variant: "info"
600
+ }
601
+ }),
602
+ close: (0, import_system31.cva)(
603
+ "h-[9.98px] w-[9.98px] cursor-pointer border-none p-0 leading-normal outline-0"
604
+ )
605
+ };
606
+
607
+ // src/components/Select.styles.ts
608
+ var import_system32 = require("@marigold/system");
609
+ var Select = {
610
+ icon: (0, import_system32.cva)("text-muted-foreground/80"),
611
+ select: (0, import_system32.cva)([
612
+ inputContainer,
613
+ inputInvalid,
614
+ inputDisabled,
615
+ inputFocus["focus"],
616
+ "h-input",
617
+ "cursor-pointer",
618
+ "*:data-placeholder:text-placeholder"
619
+ ])
620
+ };
621
+
622
+ // src/components/Slider.styles.ts
623
+ var import_system33 = require("@marigold/system");
624
+ var Slider = {
625
+ container: (0, import_system33.cva)("*:aria-hidden:hidden"),
626
+ track: (0, import_system33.cva)([
627
+ "relative bg-muted rounded-lg flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50"
628
+ ]),
629
+ selectedTrack: (0, import_system33.cva)([
630
+ "absolute bg-black data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full rounded-lg"
631
+ ]),
632
+ thumb: (0, import_system33.cva)([
633
+ "block h-5 w-5 rounded-full border-2 border-primary bg-background transition-colors focus-visible:outline-[3px] focus-visible:outline-ring/40 data-[disabled]:cursor-not-allowed"
634
+ ]),
635
+ output: (0, import_system33.cva)("text-text-base text-sm")
636
+ };
637
+
638
+ // src/components/Switch.styles.ts
639
+ var import_system34 = require("@marigold/system");
640
+ var Switch = {
641
+ container: (0, import_system34.cva)(
642
+ "disabled:cursor-not-allowed disabled:text-disabled-foreground"
643
+ ),
644
+ track: (0, import_system34.cva)([
645
+ "inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full",
646
+ "border-2 border-transparent",
647
+ "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",
648
+ "group-selected/switch:bg-brand bg-input",
649
+ "outline-offset-2 group-[focus-visible]/switch:outline-2 group-[focus-visible]/switch:outline-ring/70"
650
+ ]),
651
+ thumb: (0, import_system34.cva)([
652
+ "pointer-events-none block size-5 rounded-full",
653
+ "bg-background shadow-sm shadow-black/5",
654
+ "ring-0 transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]",
655
+ "group-selected/switch:translate-x-4 translate-x-0 rtl:group-selected/switch:-translate-x-4"
656
+ ])
657
+ };
658
+
659
+ // src/components/Table.styles.ts
660
+ var import_system35 = require("@marigold/system");
661
+ var Table = {
662
+ table: (0, import_system35.cva)("text-sm", {
663
+ variants: {
664
+ variant: {
665
+ default: "",
666
+ grid: ""
667
+ }
668
+ }
669
+ }),
670
+ headerRow: (0, import_system35.cva)("border-border border-b", {
671
+ variants: {
672
+ variant: {
673
+ default: "",
674
+ grid: "[&>:not(:last-child)]:border-r [&>:not(:last-child)]:border-border"
675
+ }
676
+ },
677
+ defaultVariants: {
678
+ variant: "default"
679
+ }
680
+ }),
681
+ header: (0, import_system35.cva)(
682
+ [
683
+ "h-12 px-3 align-middle font-medium text-muted-foreground last:text-right",
684
+ "focus-visible:outline-2 outline-offset-2 outline-ring/70",
685
+ // for sticky header
686
+ "bg-background/90 top-0 z-10 backdrop-blur-xs"
687
+ ],
688
+ {
689
+ variants: {
690
+ variant: {
691
+ default: "[&:has([type=checkbox])]:pr-0",
692
+ grid: ""
693
+ }
694
+ },
695
+ defaultVariants: {
696
+ variant: "default"
697
+ }
698
+ }
699
+ ),
700
+ body: (0, import_system35.cva)("[&_tr:last-child]:border-0"),
701
+ row: (0, import_system35.cva)(
702
+ [
703
+ "border-b border-border transition-colors",
704
+ "focus-visible:outline-2 outline-offset-2 outline-ring/70",
705
+ "aria-[selected=true]:bg-muted hover:bg-transparent data-disabled:cursor-not-allowed"
706
+ ],
707
+ {
708
+ variants: {
709
+ variant: {
710
+ default: "",
711
+ grid: "[&>:not(:last-child)]:border-r [&>:not(:last-child)]:border-border"
712
+ }
713
+ },
714
+ defaultVariants: {
715
+ variant: "default"
716
+ }
717
+ }
718
+ ),
719
+ cell: (0, import_system35.cva)(
720
+ [
721
+ "p-3 align-middle last:text-right",
722
+ "focus-visible:outline-2 outline-offset-2 outline-ring/70"
723
+ ],
724
+ {
725
+ variants: {
726
+ variant: {
727
+ default: "[&:has([type=checkbox])]:pr-0",
728
+ grid: ""
729
+ }
730
+ },
731
+ defaultVariants: {
732
+ variant: "default"
733
+ }
734
+ }
735
+ )
736
+ };
737
+
738
+ // src/components/Tabs.styles.ts
739
+ var import_system36 = require("@marigold/system");
740
+ var Tabs = {
741
+ container: (0, import_system36.cva)("flex flex-col gap-2 items-center"),
742
+ tabsList: (0, import_system36.cva)([
743
+ "bg-muted text-muted-foreground/70",
744
+ "inline-flex w-fit items-center justify-center p-0.5 h-auto gap-2 rounded-none border-b bg-transparent px-0 py-1"
745
+ ]),
746
+ tabpanel: (0, import_system36.cva)("text-muted-foreground p-4 text-center text-xs"),
747
+ tab: (0, import_system36.cva)([
748
+ "data-selected:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0",
749
+ "hover:bg-hover hover:text-foreground data-selected:hover:bg-hover relative data-selected:bg-transparent data-selected:shadow-none",
750
+ " data-[selected=true]:after:bg-foreground after:absolute after:inset-x-0 after:bottom-0 after:-mb-1 after:h-0.5"
751
+ ])
752
+ };
753
+
754
+ // src/components/Tag.styles.ts
755
+ var import_system37 = require("@marigold/system");
756
+ var Tag = {
757
+ tag: (0, import_system37.cva)([
758
+ "relative inline-flex items-center gap-[7px]",
759
+ "border border-solid border-input rounded-md",
760
+ "font-medium text-xs",
761
+ "h-7 px-2 cursor-default",
762
+ "bg-background",
763
+ "data-selected:text-white data-selected:bg-brand",
764
+ "data-[disabled]:cursor-not-allowed data-[disabled]:text-disabled-foreground data-[disabled]:bg-disabled",
765
+ "focus:outline-0 focus-visible:outline-2 focus-visible:outline-ring/70"
766
+ ]),
767
+ closeButton: (0, import_system37.cva)([
768
+ "size-4 flex items-center justify-end whitespace-nowrap",
769
+ "font-medium text-muted-foreground text-sm hover:text-brand rounded-md",
770
+ "p-0 transition-colors outline-0 cursor-pointer",
771
+ "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed"
772
+ ]),
773
+ listItems: (0, import_system37.cva)("flex flex-wrap items-center gap-1")
774
+ };
775
+
159
776
  // src/components/TextArea.styles.ts
160
- var import_system9 = require("@marigold/system");
161
- var TextArea = (0, import_system9.cva)([
777
+ var import_system38 = require("@marigold/system");
778
+ var TextArea = (0, import_system38.cva)([
162
779
  inputContainer,
163
780
  inputInvalid,
164
- inputFocus,
781
+ inputFocus["focus"],
165
782
  inputDisabled,
166
783
  inputReadOnly,
167
- "data-invalid:text-destructive"
784
+ "invalid:text-destructive"
168
785
  ]);
169
786
 
787
+ // src/components/Text.styles.ts
788
+ var import_system39 = require("@marigold/system");
789
+ var Text = (0, import_system39.cva)("", {
790
+ variants: {
791
+ size: {
792
+ // Adding a default here, which beasically acts as an inherit
793
+ default: "",
794
+ xs: "text-xs",
795
+ sm: "text-sm",
796
+ base: "text-base",
797
+ lg: "text-lg",
798
+ xl: "text-xl",
799
+ "2xl": "text-2xl",
800
+ "3xl": "text-3xl",
801
+ "4xl": "text-4xl",
802
+ "5xl": "text-5xl",
803
+ "6xl": "text-6xl",
804
+ "7xl": "text-7xl",
805
+ "8xl": "text-8xl",
806
+ "9xl": "text-9xl"
807
+ }
808
+ },
809
+ defaultVariants: {
810
+ size: "default"
811
+ }
812
+ });
813
+
814
+ // src/components/Tooltip.styles.ts
815
+ var import_system40 = require("@marigold/system");
816
+ var Tooltip = {
817
+ container: (0, import_system40.cva)(
818
+ [
819
+ "text-brand-foreground bg-brand relative z-50 max-w-70 rounded-md border border-brand px-3 py-1.5 text-sm ",
820
+ "placement-t:mb-2",
821
+ "placement-b:mt-2",
822
+ "placement-r:ml-2",
823
+ "placement-l:mr-2"
824
+ ],
825
+ {
826
+ variants: {
827
+ variant: {
828
+ default: "",
829
+ white: "text-secondary-foreground border-border bg-white"
830
+ }
831
+ },
832
+ defaultVariants: {
833
+ variant: "default"
834
+ }
835
+ }
836
+ ),
837
+ arrow: (0, import_system40.cva)(
838
+ [
839
+ "fill-brand stroke-brand",
840
+ // right
841
+ "data-[placement=right]:[&_svg]:rotate-90",
842
+ // left
843
+ "data-[placement=left]:[&_svg]:-rotate-90",
844
+ // bottom
845
+ "data-[placement=bottom]:[&_svg]:rotate-180"
846
+ ],
847
+ {
848
+ variants: {
849
+ variant: {
850
+ default: "",
851
+ white: "fill-white stroke-border "
852
+ }
853
+ },
854
+ defaultVariants: {
855
+ variant: "default"
856
+ }
857
+ }
858
+ )
859
+ };
860
+
861
+ // src/components/Underlay.styles.ts
862
+ var import_system41 = require("@marigold/system");
863
+ var Underlay = (0, import_system41.cva)("", {
864
+ variants: {
865
+ variant: {
866
+ modal: " bg-black/25 backdrop-blur-sm"
867
+ }
868
+ }
869
+ });
870
+
871
+ // src/components/XLoader.styles.ts
872
+ var import_system42 = require("@marigold/system");
873
+ var XLoader = {
874
+ container: (0, import_system42.cva)("grid place-items-center text-brand", {
875
+ variants: {
876
+ variant: {
877
+ default: "",
878
+ inverted: "text-secondary"
879
+ },
880
+ size: {
881
+ default: "size-20",
882
+ large: "size-36",
883
+ fit: "size-full"
884
+ }
885
+ },
886
+ defaultVariants: {
887
+ variant: "default",
888
+ size: "default"
889
+ }
890
+ }),
891
+ loader: (0, import_system42.cva)("size-full", {
892
+ variants: {
893
+ variant: {
894
+ default: "",
895
+ inverted: ""
896
+ },
897
+ size: {
898
+ default: "",
899
+ large: "",
900
+ fit: ""
901
+ }
902
+ },
903
+ defaultVariants: {
904
+ variant: "default",
905
+ size: "default"
906
+ }
907
+ }),
908
+ label: (0, import_system42.cva)("text-current text-sm")
909
+ };
910
+
170
911
  // src/theme.ts
171
912
  var theme = {
172
913
  name: "rui",