@marigold/theme-rui 2.3.0 → 3.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.
Files changed (12) hide show
  1. package/dist/index.d.mts +4 -2
  2. package/dist/index.d.mts.map +1 -0
  3. package/dist/index.d.ts +4 -2
  4. package/dist/index.d.ts.map +1 -0
  5. package/dist/index.js +1056 -1286
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +1040 -1271
  8. package/dist/index.mjs.map +1 -1
  9. package/dist/styles.css +123 -27
  10. package/dist/theme.css +23 -9
  11. package/dist/utils.css +30 -0
  12. package/package.json +8 -8
package/dist/index.js CHANGED
@@ -1,1381 +1,1151 @@
1
- "use strict";
1
+ Object.defineProperty(exports, '__esModule', { value: true });
2
+ //#region rolldown:runtime
3
+ var __create = Object.create;
2
4
  var __defProp = Object.defineProperty;
3
5
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
6
  var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getProtoOf = Object.getPrototypeOf;
5
8
  var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
+ var __export = (all) => {
10
+ let target = {};
11
+ for (var name in all) __defProp(target, name, {
12
+ get: all[name],
13
+ enumerable: true
14
+ });
15
+ return target;
9
16
  };
10
17
  var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
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
23
+ });
24
+ }
25
+ return to;
17
26
  };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
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));
19
31
 
20
- // src/index.ts
21
- var index_exports = {};
22
- __export(index_exports, {
23
- default: () => index_default,
24
- theme: () => theme
25
- });
26
- module.exports = __toCommonJS(index_exports);
27
-
28
- // src/components/index.ts
29
- var components_exports = {};
30
- __export(components_exports, {
31
- Accordion: () => Accordion,
32
- Badge: () => Badge,
33
- Breadcrumbs: () => Breadcrumbs,
34
- Button: () => Button,
35
- Calendar: () => Calendar,
36
- Card: () => Card,
37
- Checkbox: () => Checkbox,
38
- CloseButton: () => CloseButton,
39
- Collapsible: () => Collapsible,
40
- ComboBox: () => ComboBox,
41
- ContextualHelp: () => ContextualHelp,
42
- DateField: () => DateField,
43
- DatePicker: () => DatePicker,
44
- Dialog: () => Dialog,
45
- Divider: () => Divider,
46
- Drawer: () => Drawer,
47
- Field: () => Field,
48
- Headline: () => Headline,
49
- HelpText: () => HelpText,
50
- IconButton: () => IconButton,
51
- Input: () => Input,
52
- Label: () => Label,
53
- Link: () => Link,
54
- List: () => List,
55
- ListBox: () => ListBox,
56
- Menu: () => Menu,
57
- Modal: () => Modal,
58
- MultiSelect: () => MultiSelect,
59
- NumberField: () => NumberField,
60
- Pagination: () => Pagination,
61
- Popover: () => Popover,
62
- ProgressCycle: () => ProgressCycle,
63
- Radio: () => Radio,
64
- SectionMessage: () => SectionMessage,
65
- Select: () => Select,
66
- Slider: () => Slider,
67
- Switch: () => Switch,
68
- Table: () => Table,
69
- Tabs: () => Tabs,
70
- Tag: () => Tag,
71
- Text: () => Text,
72
- TextArea: () => TextArea,
73
- Toast: () => Toast,
74
- Tooltip: () => Tooltip,
75
- Underlay: () => Underlay,
76
- XLoader: () => XLoader
77
- });
32
+ //#endregion
33
+ let __marigold_system = require("@marigold/system");
34
+ __marigold_system = __toESM(__marigold_system);
78
35
 
79
- // src/components/Accordion.styles.ts
80
- var import_system = require("@marigold/system");
81
- var Accordion = {
82
- container: (0, import_system.cva)("flex-col", {
83
- variants: {
84
- variant: {
85
- default: "",
86
- card: "space-y-2"
87
- }
88
- },
89
- defaultVariants: {
90
- variant: "default"
91
- }
92
- }),
93
- item: (0, import_system.cva)("bg-background border-b last:border-b-0 border-border", {
94
- variants: {
95
- variant: {
96
- default: "",
97
- card: [
98
- "rounded-md border px-4 py-1 outline-none last:border-b",
99
- // TODO: focus is still shown even if an item within the item is focused
100
- "has-focus-visible:util-focus-ring outline-none"
101
- ]
102
- }
103
- },
104
- defaultVariants: {
105
- variant: "default"
106
- }
107
- }),
108
- header: (0, import_system.cva)(
109
- [
110
- "flex w-full items-center justify-between gap-4 rounded-md py-2 cursor-pointer text-foreground",
111
- "text-left text-sm font-semibold leading-6 transition-all",
112
- "hover:no-underline",
113
- "disabled:cursor-not-allowed disabled:text-disabled-foreground"
114
- ],
115
- {
116
- variants: {
117
- variant: {
118
- default: "focus-visible:util-focus-ring outline-none",
119
- card: "outline-none"
120
- }
121
- },
122
- defaultVariants: {
123
- variant: "default"
124
- }
125
- }
126
- ),
127
- content: (0, import_system.cva)("in-data-[expanded]:pb-2"),
128
- icon: (0, import_system.cva)(
129
- "pointer-events-none shrink-0 opacity-60 transition-transform duration-200"
130
- )
36
+ //#region src/components/Accordion.styles.ts
37
+ const Accordion = {
38
+ container: (0, __marigold_system.cva)("flex-col", {
39
+ variants: { variant: {
40
+ default: "",
41
+ card: "space-y-2"
42
+ } },
43
+ defaultVariants: { variant: "default" }
44
+ }),
45
+ item: (0, __marigold_system.cva)("bg-background border-b last:border-b-0 border-border", {
46
+ variants: { variant: {
47
+ default: "",
48
+ card: ["rounded-md border px-4 py-1 outline-none last:border-b", "has-focus-visible:util-focus-ring outline-none"]
49
+ } },
50
+ defaultVariants: { variant: "default" }
51
+ }),
52
+ header: (0, __marigold_system.cva)([
53
+ "flex w-full items-center justify-between gap-4 rounded-md py-2 cursor-pointer text-foreground",
54
+ "text-left text-base font-semibold leading-6 transition-all",
55
+ "hover:no-underline",
56
+ "disabled:cursor-not-allowed disabled:text-disabled-foreground"
57
+ ], {
58
+ variants: { variant: {
59
+ default: "focus-visible:util-focus-ring outline-none",
60
+ card: "outline-none"
61
+ } },
62
+ defaultVariants: { variant: "default" }
63
+ }),
64
+ content: (0, __marigold_system.cva)("in-data-[expanded]:pb-2"),
65
+ icon: (0, __marigold_system.cva)("pointer-events-none shrink-0 opacity-60 transition-transform duration-200")
131
66
  };
132
67
 
133
- // src/components/Badge.styles.ts
134
- var import_system2 = require("@marigold/system");
135
- var Badge = (0, import_system2.cva)(
136
- [
137
- "inline-flex items-center justify-center rounded-full px-2 text-xs font-medium leading-normal transition-colors",
138
- "focus-visible:util-focus-ring outline-none"
139
- ],
140
- {
141
- variants: {
142
- variant: {
143
- default: "bg-muted text-foreground border border-border",
144
- primary: "bg-brand text-brand-foreground ",
145
- success: "bg-success-muted text-success-muted-foreground",
146
- warning: "bg-warning-muted text-warning-muted-foreground",
147
- info: "bg-info-muted text-info-muted-foreground",
148
- error: "bg-destructive-muted text-destructive-muted-foreground",
149
- admin: "text-access-admin-foreground border border-access-admin-foreground bg-background",
150
- master: "text-access-master-foreground border border-access-master-foreground bg-background"
151
- }
152
- },
153
- defaultVariants: {
154
- variant: "default"
155
- }
156
- }
157
- );
68
+ //#endregion
69
+ //#region src/components/Badge.styles.ts
70
+ const Badge = (0, __marigold_system.cva)(["inline-flex items-center justify-center rounded-full px-2 text-xs font-medium leading-normal transition-colors", "focus-visible:util-focus-ring outline-none"], {
71
+ variants: { variant: {
72
+ default: "bg-muted text-foreground border border-border",
73
+ primary: "bg-brand text-brand-foreground ",
74
+ success: "bg-success-muted text-success-muted-foreground",
75
+ warning: "bg-warning-muted text-warning-muted-foreground",
76
+ info: "bg-info-muted text-info-muted-foreground",
77
+ error: "bg-destructive-muted text-destructive-muted-foreground",
78
+ admin: "text-access-admin-foreground border border-access-admin-foreground bg-background",
79
+ master: "text-access-master-foreground border border-access-master-foreground bg-background"
80
+ } },
81
+ defaultVariants: { variant: "default" }
82
+ });
158
83
 
159
- // src/components/Button.styles.ts
160
- var import_system3 = require("@marigold/system");
161
- var Button = (0, import_system3.cva)(
162
- [
163
- "inline-flex items-center justify-center gap-2",
164
- "whitespace-nowrap rounded-md font-medium transition-[color,box-shadow,transform]",
165
- "duration-150 active:scale-[0.98] pressed:scale-[0.98]",
166
- "[&_svg]:pointer-events-none [&_svg]:shrink-0",
167
- "focus-visible:util-focus-ring outline-none disabled:util-disabled",
168
- "pending:text-disabled-foreground pending:bg-disabled pending:cursor-not-allowed pending:border-none",
169
- "cursor-pointer"
170
- ],
171
- {
172
- variants: {
173
- variant: {
174
- primary: "bg-brand text-brand-foreground shadow-xs hover:bg-brand/90",
175
- secondary: "border border-input bg-background shadow-xs hover:bg-hover hover:text-foreground expanded:bg-hover",
176
- destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
177
- ghost: "hover:bg-hover hover:text-foreground",
178
- link: "text-link util-touch-hitbox"
179
- },
180
- size: {
181
- default: "text-sm",
182
- small: "text-xs",
183
- large: "",
184
- icon: ""
185
- }
186
- },
187
- defaultVariants: {
188
- variant: "secondary",
189
- size: "default"
190
- },
191
- compoundVariants: [
192
- {
193
- variant: ["primary", "secondary", "destructive", "ghost"],
194
- class: "items-center justify-center"
195
- },
196
- {
197
- variant: ["primary", "secondary", "destructive", "ghost"],
198
- size: "default",
199
- class: "h-button px-4 py-2 [&_svg]:size-4"
200
- },
201
- {
202
- variant: ["primary", "secondary", "destructive", "ghost"],
203
- size: "small",
204
- class: "h-button-small px-3 [&_svg]:size-3.5"
205
- },
206
- {
207
- variant: ["primary", "secondary", "destructive", "ghost"],
208
- size: "large",
209
- class: "h-button-large px-8 [&_svg]:size-5"
210
- },
211
- {
212
- variant: ["primary", "secondary", "destructive", "ghost"],
213
- size: "icon",
214
- class: "size-button [&_svg]:size-4"
215
- }
216
- ]
217
- }
218
- );
84
+ //#endregion
85
+ //#region src/components/Button.styles.ts
86
+ const Button = (0, __marigold_system.cva)([
87
+ "inline-flex items-center justify-center gap-2",
88
+ "whitespace-nowrap rounded-md font-medium transition-[color,box-shadow,transform]",
89
+ "duration-150 active:scale-[0.98] pressed:scale-[0.98]",
90
+ "[&_svg]:pointer-events-none [&_svg]:shrink-0",
91
+ "focus-visible:util-focus-ring outline-none disabled:util-disabled",
92
+ "pending:text-disabled-foreground pending:bg-disabled pending:cursor-not-allowed pending:border-none",
93
+ "cursor-pointer"
94
+ ], {
95
+ variants: {
96
+ variant: {
97
+ primary: "bg-brand text-brand-foreground shadow-xs hover:bg-brand/90",
98
+ secondary: "border border-input bg-background shadow-xs hover:bg-hover hover:text-foreground expanded:bg-hover",
99
+ destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
100
+ ghost: "hover:bg-hover hover:text-foreground",
101
+ link: "text-link util-touch-hitbox"
102
+ },
103
+ size: {
104
+ default: "text-sm",
105
+ small: "text-xs",
106
+ large: "",
107
+ icon: ""
108
+ }
109
+ },
110
+ defaultVariants: {
111
+ variant: "secondary",
112
+ size: "default"
113
+ },
114
+ compoundVariants: [
115
+ {
116
+ variant: [
117
+ "primary",
118
+ "secondary",
119
+ "destructive",
120
+ "ghost"
121
+ ],
122
+ class: "items-center justify-center"
123
+ },
124
+ {
125
+ variant: [
126
+ "primary",
127
+ "secondary",
128
+ "destructive",
129
+ "ghost"
130
+ ],
131
+ size: "default",
132
+ class: "h-button px-4 py-2 [&_svg]:size-4"
133
+ },
134
+ {
135
+ variant: [
136
+ "primary",
137
+ "secondary",
138
+ "destructive",
139
+ "ghost"
140
+ ],
141
+ size: "small",
142
+ class: "h-button-small px-3 [&_svg]:size-3.5"
143
+ },
144
+ {
145
+ variant: [
146
+ "primary",
147
+ "secondary",
148
+ "destructive",
149
+ "ghost"
150
+ ],
151
+ size: "large",
152
+ class: "h-button-large px-8 [&_svg]:size-5"
153
+ },
154
+ {
155
+ variant: [
156
+ "primary",
157
+ "secondary",
158
+ "destructive",
159
+ "ghost"
160
+ ],
161
+ size: "icon",
162
+ class: "size-button [&_svg]:size-4"
163
+ }
164
+ ]
165
+ });
219
166
 
220
- // src/components/Card.styles.ts
221
- var import_system4 = require("@marigold/system");
222
- var Card = (0, import_system4.cva)(["p-4 rounded-md"], {
223
- variants: {
224
- variant: {
225
- default: "util-surface-raised",
226
- master: "rounded-md bg-access-master/30 p-4 border border-access-master",
227
- admin: "rounded-md bg-access-admin/30 p-4 border border-access-admin"
228
- },
229
- size: {
230
- default: "",
231
- full: "w-full"
232
- }
233
- },
234
- defaultVariants: {
235
- variant: "default",
236
- size: "default"
237
- }
167
+ //#endregion
168
+ //#region src/components/Card.styles.ts
169
+ const Card = (0, __marigold_system.cva)(["p-4 rounded-md"], {
170
+ variants: {
171
+ variant: {
172
+ default: "util-surface-raised",
173
+ master: "rounded-md bg-access-master/30 p-4 border border-access-master",
174
+ admin: "rounded-md bg-access-admin/30 p-4 border border-access-admin"
175
+ },
176
+ size: {
177
+ default: "",
178
+ full: "w-full"
179
+ }
180
+ },
181
+ defaultVariants: {
182
+ variant: "default",
183
+ size: "default"
184
+ }
238
185
  });
239
186
 
240
- // src/components/Checkbox.styles.ts
241
- var import_system5 = require("@marigold/system");
242
- var Checkbox = {
243
- checkbox: (0, import_system5.cva)([
244
- "grid size-4 shrink-0 place-content-center rounded",
245
- "border border-input shadow-xs",
246
- "group-focus-visible/checkbox:util-focus-ring outline-none",
247
- "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",
248
- "group-selected/checkbox:border-brand group-selected/checkbox:bg-brand group-selected/checkbox:text-brand-foreground",
249
- "group-[indeterminate]/checkbox:border-brand group-[indeterminate]/checkbox:bg-brand group-[indeterminate]/checkbox:text-brand-foreground"
250
- ]),
251
- container: (0, import_system5.cva)("cursor-pointer read-only:cursor-default gap-2"),
252
- label: (0, import_system5.cva)([
253
- "flex items-center gap-1",
254
- 'text-sm leading-4 group-[group="checkbox"]/checkboxgroup:font-normal font-medium text-foregroun',
255
- "group-disabled/checkbox:text-disabled-foreground"
256
- ]),
257
- group: (0, import_system5.cva)()
187
+ //#endregion
188
+ //#region src/components/Checkbox.styles.ts
189
+ const Checkbox = {
190
+ checkbox: (0, __marigold_system.cva)([
191
+ "grid size-4 shrink-0 place-content-center rounded",
192
+ "border border-input shadow-xs",
193
+ "group-focus-visible/checkbox:util-focus-ring outline-none",
194
+ "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",
195
+ "group-selected/checkbox:border-brand group-selected/checkbox:bg-brand group-selected/checkbox:text-brand-foreground",
196
+ "group-[indeterminate]/checkbox:border-brand group-[indeterminate]/checkbox:bg-brand group-[indeterminate]/checkbox:text-brand-foreground"
197
+ ]),
198
+ container: (0, __marigold_system.cva)("cursor-pointer read-only:cursor-default gap-2"),
199
+ label: (0, __marigold_system.cva)([
200
+ "flex items-center gap-1",
201
+ "text-sm leading-4 group-[group=\"checkbox\"]/checkboxgroup:font-normal font-medium text-foregroun",
202
+ "group-disabled/checkbox:text-disabled-foreground"
203
+ ]),
204
+ group: (0, __marigold_system.cva)()
258
205
  };
259
206
 
260
- // src/components/Calendar.styles.ts
261
- var import_system6 = require("@marigold/system");
262
- var Calendar = {
263
- calendar: (0, import_system6.cva)(
264
- "rounded-md border group-[[data-trigger]]/popover:border-0 border-border p-2"
265
- ),
266
- calendarCell: (0, import_system6.cva)([
267
- "relative flex size-9 items-center justify-center whitespace-nowrap rounded-lg justify-self-center",
268
- "border border-transparent p-0 text-sm font-normal text-foreground",
269
- "outline-offset-2 duration-150 [transition-property:color,background-color,border-radius,box-shadow]",
270
- "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",
271
- "disabled:opacity-30 data-[unavailable]:opacity-30",
272
- "focus-visible:util-focus-borderless-ring outline-none"
273
- ]),
274
- calendarControllers: (0, import_system6.cva)([
275
- "size-9 rounded-lg",
276
- "text-muted-foreground/80",
277
- "transition-colors",
278
- "focus-visible:util-focus-ring outline-none"
279
- ]),
280
- calendarHeader: (0, import_system6.cva)([
281
- "size-9 rounded-lg p-0 text-xs font-medium text-muted-foreground/80"
282
- ]),
283
- calendarGrid: (0, import_system6.cva)("[&_td]:p-2"),
284
- calendarListboxButton: (0, import_system6.cva)([
285
- "rounded-md text-sm font-medium transition-[color,box-shadow]",
286
- "px-4 py-2",
287
- "focus-visible:util-focus-ring outline-none",
288
- "cursor-pointer",
289
- "hover:bg-hover",
290
- "aria-selected:bg-brand aria-selected:text-brand-foreground aria-selected:shadow-xs aria-selected:hover:bg-brand/90"
291
- ]),
292
- select: (0, import_system6.cva)([
293
- "[&svg]:text-muted-foreground/80",
294
- "flex w-full px-3 py-2 rounded-lg shadow-xs border border-input bg-background text-sm text-foreground transition-shadow",
295
- "focus-visible:util-focus-ring outline-none",
296
- "h-input",
297
- "disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled",
298
- "cursor-pointer"
299
- ])
207
+ //#endregion
208
+ //#region src/components/Calendar.styles.ts
209
+ const Calendar = {
210
+ calendar: (0, __marigold_system.cva)("rounded-md border group-[[data-trigger]]/popover:border-0 border-border p-2"),
211
+ calendarCell: (0, __marigold_system.cva)([
212
+ "relative flex size-9 items-center justify-center whitespace-nowrap rounded-lg justify-self-center",
213
+ "border border-transparent p-0 text-sm font-normal text-foreground",
214
+ "outline-offset-2 duration-150 [transition-property:color,background-color,border-radius,box-shadow]",
215
+ "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",
216
+ "disabled:opacity-30 data-[unavailable]:opacity-30",
217
+ "focus-visible:util-focus-borderless-ring outline-none"
218
+ ]),
219
+ calendarControllers: (0, __marigold_system.cva)([
220
+ "size-9 rounded-lg",
221
+ "text-muted-foreground/80",
222
+ "transition-colors",
223
+ "focus-visible:util-focus-ring outline-none"
224
+ ]),
225
+ calendarHeader: (0, __marigold_system.cva)(["size-9 rounded-lg p-0 text-xs font-medium text-muted-foreground/80"]),
226
+ calendarGrid: (0, __marigold_system.cva)("[&_td]:p-2"),
227
+ calendarListboxButton: (0, __marigold_system.cva)([
228
+ "rounded-md text-sm font-medium transition-[color,box-shadow]",
229
+ "px-4 py-2",
230
+ "focus-visible:util-focus-ring outline-none",
231
+ "cursor-pointer",
232
+ "hover:bg-hover",
233
+ "aria-selected:bg-brand aria-selected:text-brand-foreground aria-selected:shadow-xs aria-selected:hover:bg-brand/90"
234
+ ]),
235
+ select: (0, __marigold_system.cva)([
236
+ "[&svg]:text-muted-foreground/80",
237
+ "flex w-full px-3 py-2 rounded-lg shadow-xs border border-input bg-background text-sm text-foreground transition-shadow",
238
+ "focus-visible:util-focus-ring outline-none",
239
+ "h-input",
240
+ "disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled",
241
+ "cursor-pointer"
242
+ ])
300
243
  };
301
244
 
302
- // src/components/CloseButton.styles.ts
303
- var import_system7 = require("@marigold/system");
304
- var CloseButton = (0, import_system7.cva)([
305
- "flex items-center justify-center whitespace-nowrap",
306
- "cursor-pointer",
307
- "transition-[color,box-shadow]",
308
- "mixin-ring-focus-visible",
309
- "rounded",
310
- "duration-150 active:scale-[0.98] pressed:scale-[0.98] transition-transform",
311
- "[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100"
245
+ //#endregion
246
+ //#region src/components/CloseButton.styles.ts
247
+ const CloseButton = (0, __marigold_system.cva)([
248
+ "flex items-center justify-center whitespace-nowrap",
249
+ "cursor-pointer",
250
+ "transition-[color,box-shadow]",
251
+ "mixin-ring-focus-visible",
252
+ "rounded",
253
+ "duration-150 active:scale-[0.98] pressed:scale-[0.98] transition-transform",
254
+ "[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100"
312
255
  ]);
313
256
 
314
- // src/components/ComboBox.styles.ts
315
- var import_system8 = require("@marigold/system");
316
- var ComboBox = (0, import_system8.cva)(
317
- "text-muted-foreground/80 right-2"
318
- );
257
+ //#endregion
258
+ //#region src/components/ComboBox.styles.ts
259
+ const ComboBox = (0, __marigold_system.cva)("text-muted-foreground/80 right-2");
319
260
 
320
- // src/components/Collapsible.styles.ts
321
- var import_system9 = require("@marigold/system");
322
- var Collapsible = {
323
- container: (0, import_system9.cva)(),
324
- trigger: (0, import_system9.cva)(
325
- [
326
- "inline-flex gap-2 whitespace-nowrap rounded-md font-medium transition-[color,box-shadow,transform]",
327
- "duration-150 active:scale-[0.98] pressed:scale-[0.98]",
328
- "[&_svg]:pointer-events-none [&_svg]:shrink-0",
329
- "focus-visible:util-focus-ring outline-none disabled:util-disabled",
330
- "cursor-pointer"
331
- ],
332
- {
333
- variants: {
334
- variant: {
335
- default: "",
336
- link: "text-link util-touch-hitbox"
337
- },
338
- size: {
339
- default: "text-sm"
340
- }
341
- },
342
- defaultVariants: {
343
- variant: "default",
344
- size: "default"
345
- }
346
- }
347
- ),
348
- content: (0, import_system9.cva)()
261
+ //#endregion
262
+ //#region src/components/Collapsible.styles.ts
263
+ const Collapsible = {
264
+ container: (0, __marigold_system.cva)(),
265
+ trigger: (0, __marigold_system.cva)([
266
+ "inline-flex gap-2 whitespace-nowrap rounded-md font-medium transition-[color,box-shadow,transform]",
267
+ "duration-150 active:scale-[0.98] pressed:scale-[0.98]",
268
+ "[&_svg]:pointer-events-none [&_svg]:shrink-0",
269
+ "focus-visible:util-focus-ring outline-none disabled:util-disabled",
270
+ "cursor-pointer"
271
+ ], {
272
+ variants: {
273
+ variant: {
274
+ default: "",
275
+ link: "text-link util-touch-hitbox"
276
+ },
277
+ size: { default: "text-sm" }
278
+ },
279
+ defaultVariants: {
280
+ variant: "default",
281
+ size: "default"
282
+ }
283
+ }),
284
+ content: (0, __marigold_system.cva)()
349
285
  };
350
286
 
351
- // src/components/ContextualHelp.styles.ts
352
- var import_system10 = require("@marigold/system");
353
- var ContextualHelp = {
354
- trigger: (0, import_system10.cva)(
355
- [
356
- "inline-flex items-center justify-center rounded-full transition-[color,box-shadow] hover:bg-hover hover:text-foreground",
357
- "[&_svg]:pointer-events-none [&_svg]:shrink-0",
358
- "focus-visible:util-focus-ring outline-none",
359
- "cursor-pointer"
360
- ],
361
- {
362
- variants: {
363
- variant: {
364
- help: "",
365
- info: ""
366
- },
367
- size: {
368
- default: "size-button [&_svg]:size-4",
369
- small: "size-button-small [&_svg]:size-3.5",
370
- large: "size-button-large [&_svg]:size-5"
371
- }
372
- },
373
- defaultVariants: {
374
- size: "default"
375
- }
376
- }
377
- ),
378
- popover: (0, import_system10.cva)(
379
- "bg-white border border-gray-200 p-3 rounded shadow-md z-50 data-[small]:max-w-3xs data-[medium]:max-w-xs data-[large]:max-w-md"
380
- ),
381
- dialog: (0, import_system10.cva)("text-sm leading-normal"),
382
- title: (0, import_system10.cva)("text-lg font-semibold mb-1"),
383
- content: (0, import_system10.cva)("text-sm")
287
+ //#endregion
288
+ //#region src/components/ContextualHelp.styles.ts
289
+ const ContextualHelp = {
290
+ trigger: (0, __marigold_system.cva)([
291
+ "inline-flex items-center justify-center rounded-full transition-[color,box-shadow] hover:bg-hover hover:text-foreground",
292
+ "[&_svg]:pointer-events-none [&_svg]:shrink-0",
293
+ "focus-visible:util-focus-ring outline-none",
294
+ "cursor-pointer"
295
+ ], {
296
+ variants: {
297
+ variant: {
298
+ help: "",
299
+ info: ""
300
+ },
301
+ size: {
302
+ default: "size-button [&_svg]:size-4",
303
+ small: "size-button-small [&_svg]:size-3.5",
304
+ large: "size-button-large [&_svg]:size-5"
305
+ }
306
+ },
307
+ defaultVariants: { size: "default" }
308
+ }),
309
+ popover: (0, __marigold_system.cva)([
310
+ "flex flex-col gap-0 rounded-xl p-5 util-surface-overlay",
311
+ "data-[small]:max-w-3xs data-[medium]:max-w-xs data-[large]:max-w-md",
312
+ "overflow-y-auto util-scrollbar"
313
+ ]),
314
+ container: (0, __marigold_system.cva)(""),
315
+ title: (0, __marigold_system.cva)("text-lg font-semibold mb-1"),
316
+ content: (0, __marigold_system.cva)("text-sm")
384
317
  };
385
318
 
386
- // src/components/DateField.styles.ts
387
- var import_system12 = require("@marigold/system");
388
-
389
- // src/components/Input.styles.ts
390
- var import_system11 = require("@marigold/system");
391
- var 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";
392
- var inputDisabled = "disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled";
393
- var inputInvalid = "group-invalid/field:border-destructive group-invalid/field:focus:border-destructive group-invalid/field:focus:ring-destructive/20";
394
- var inputReadOnly = "group-read-only/field:bg-muted";
395
- var Input = {
396
- input: (0, import_system11.cva)([
397
- inputContainer,
398
- inputDisabled,
399
- inputInvalid,
400
- "focus:util-focus-ring outline-none",
401
- inputReadOnly,
402
- "h-input",
403
- "placeholder:text-placeholder",
404
- "[&[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",
405
- "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",
406
- "group-[[data-icon]]/input:pl-8",
407
- "group-[[data-action]]/input:pr-7"
408
- ]),
409
- icon: (0, import_system11.cva)([
410
- "pointer-events-none left-1",
411
- "text-muted-foreground disabled:text-disabled-foreground"
412
- ]),
413
- action: (0, import_system11.cva)(["text-muted-foreground right-1"])
319
+ //#endregion
320
+ //#region src/components/Input.styles.ts
321
+ 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";
322
+ const inputDisabled = "disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled";
323
+ const inputInvalid = "group-invalid/field:border-destructive group-invalid/field:focus:border-destructive group-invalid/field:focus:ring-destructive/20";
324
+ const inputReadOnly = "group-read-only/field:bg-muted";
325
+ const Input = {
326
+ input: (0, __marigold_system.cva)([
327
+ inputContainer,
328
+ inputDisabled,
329
+ inputInvalid,
330
+ "focus:util-focus-ring outline-none",
331
+ inputReadOnly,
332
+ "h-input",
333
+ "placeholder:text-placeholder",
334
+ "[&[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",
335
+ "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",
336
+ "group-[[data-icon]]/input:pl-8",
337
+ "group-[[data-action]]/input:pr-7"
338
+ ]),
339
+ icon: (0, __marigold_system.cva)(["pointer-events-none left-2", "text-muted-foreground disabled:text-disabled-foreground"]),
340
+ action: (0, __marigold_system.cva)(["text-muted-foreground pr-1"])
414
341
  };
415
342
 
416
- // src/components/DateField.styles.ts
417
- var DateField = {
418
- field: (0, import_system12.cva)([
419
- "h-input",
420
- inputContainer,
421
- inputDisabled,
422
- "has-focus-visible:util-focus-ring outline-none",
423
- inputInvalid,
424
- inputReadOnly,
425
- "invalid:focus-within:border-destructive invalid:focus-within:ring-destructive/20",
426
- "data-[focus-within]:util-focus-ring outline-0"
427
- ]),
428
- segment: (0, import_system12.cva)([
429
- inputDisabled,
430
- "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 ",
431
- "data-[focused]:bg-focus",
432
- "data-[placeholder]:disabled:text-disabled-foreground",
433
- "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",
434
- "group/segment",
435
- "outline-0",
436
- "whitespace-pre",
437
- "data-[placeholder]:text-placeholder text-foreground data-[focused]:bg-focus data-[focused]:text-foreground rounded leading-none"
438
- ]),
439
- action: (0, import_system12.cva)(
440
- "fill-muted-foreground disabled:text-disabled-foreground group-invalid/field:fill-destructive"
441
- )
343
+ //#endregion
344
+ //#region src/components/DateField.styles.ts
345
+ const DateField = {
346
+ field: (0, __marigold_system.cva)([
347
+ "h-input",
348
+ inputContainer,
349
+ inputDisabled,
350
+ "has-focus-visible:util-focus-ring outline-none",
351
+ inputInvalid,
352
+ inputReadOnly,
353
+ "invalid:focus-within:border-destructive invalid:focus-within:ring-destructive/20",
354
+ "data-[focus-within]:util-focus-ring outline-0"
355
+ ]),
356
+ segment: (0, __marigold_system.cva)([
357
+ inputDisabled,
358
+ "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 ",
359
+ "data-[focused]:bg-focus",
360
+ "data-[placeholder]:disabled:text-disabled-foreground",
361
+ "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",
362
+ "group/segment",
363
+ "outline-0",
364
+ "whitespace-pre",
365
+ "data-[placeholder]:text-placeholder text-foreground data-[focused]:bg-focus data-[focused]:text-foreground rounded leading-none"
366
+ ]),
367
+ action: (0, __marigold_system.cva)("fill-muted-foreground disabled:text-disabled-foreground group-invalid/field:fill-destructive")
442
368
  };
443
369
 
444
- // src/components/DatePicker.styles.ts
445
- var import_system13 = require("@marigold/system");
446
- var DatePicker = (0, import_system13.cva)([
447
- "relative h-input -top-2",
448
- "text-muted-foreground/80",
449
- "hover:text-brand",
450
- "disabled:cursor-not-allowed"
370
+ //#endregion
371
+ //#region src/components/DatePicker.styles.ts
372
+ const DatePicker = (0, __marigold_system.cva)([
373
+ "relative h-input -top-2",
374
+ "text-muted-foreground/80",
375
+ "hover:text-brand",
376
+ "disabled:cursor-not-allowed"
451
377
  ]);
452
378
 
453
- // src/components/Dialog.styles.ts
454
- var import_system14 = require("@marigold/system");
455
- var Dialog = {
456
- closeButton: (0, import_system14.cva)(["absolute top-6 right-3", "size-7 "]),
457
- container: (0, import_system14.cva)(
458
- [
459
- "flex flex-col gap-0 rounded-xl p-6 overflow-y-auto",
460
- "util-surface-overlay"
461
- ],
462
- {
463
- variants: {
464
- variant: {},
465
- // Does not do anything, just to make the size appear in the appearance demo (Modal is setting the size)
466
- size: {
467
- xsmall: "",
468
- small: "",
469
- medium: ""
470
- }
471
- }
472
- }
473
- ),
474
- header: (0, import_system14.cva)("flex flex-col gap-1 text-center sm:text-left"),
475
- title: (0, import_system14.cva)("text-lg font-semibold mb-1"),
476
- content: (0, import_system14.cva)("text-muted-foreground text-sm"),
477
- actions: (0, import_system14.cva)("flex flex-col-reverse gap-3 sm:flex-row sm:justify-end mt-4")
379
+ //#endregion
380
+ //#region src/components/Dialog.styles.ts
381
+ const Dialog = {
382
+ closeButton: (0, __marigold_system.cva)(["absolute top-6 right-3", "size-7 "]),
383
+ container: (0, __marigold_system.cva)(["flex flex-col gap-0 rounded-xl p-6 overflow-y-auto", "util-surface-overlay"], { variants: {
384
+ variant: {},
385
+ size: {
386
+ xsmall: "",
387
+ small: "",
388
+ medium: ""
389
+ }
390
+ } }),
391
+ header: (0, __marigold_system.cva)("flex flex-col gap-1 text-center sm:text-left"),
392
+ title: (0, __marigold_system.cva)("text-lg font-semibold mb-1"),
393
+ content: (0, __marigold_system.cva)("text-muted-foreground text-sm"),
394
+ actions: (0, __marigold_system.cva)("flex flex-col-reverse gap-3 sm:flex-row sm:justify-end mt-4")
478
395
  };
479
396
 
480
- // src/components/Divider.styles.ts
481
- var import_system15 = require("@marigold/system");
482
- var Divider = (0, import_system15.cva)("bg-border h-px w-full", {
483
- variants: {
484
- variant: {
485
- default: "",
486
- bold: "h-0.5"
487
- }
488
- },
489
- defaultVariants: {
490
- variant: "default"
491
- }
397
+ //#endregion
398
+ //#region src/components/Divider.styles.ts
399
+ const Divider = (0, __marigold_system.cva)("bg-border h-px w-full", {
400
+ variants: { variant: {
401
+ default: "",
402
+ bold: "h-0.5"
403
+ } },
404
+ defaultVariants: { variant: "default" }
492
405
  });
493
406
 
494
- // src/components/Drawer.styles.ts
495
- var import_system16 = require("@marigold/system");
496
- var Drawer = {
497
- overlay: (0, import_system16.cva)([
498
- "group/overlay z-40",
499
- "data-[placement=top]:w-full data-[placement=top]:entering:animate-slide-in-top data-[placement=top]:exiting:animate-slide-out-top data-[placement=top]:top-0 data-[placement=top]:left-0",
500
- "data-[placement=bottom]:w-full data-[placement=bottom]:entering:animate-slide-in-bottom data-[placement=bottom]:exiting:animate-slide-out-bottom data-[placement=bottom]:bottom-0 data-[placement=bottom]:left-0",
501
- "data-[placement=left]:entering:animate-slide-in-left data-[placement=left]:exiting:animate-slide-out-left data-[placement=left]:top-0 data-[placement=left]:left-0",
502
- "data-[placement=right]:entering:animate-slide-in-right data-[placement=right]:exiting:animate-slide-out-right data-[placement=right]:top-0 data-[placement=right]:right-0"
503
- ]),
504
- container: (0, import_system16.cva)(
505
- [
506
- "w-full relative grid-rows-[auto_1fr_auto]",
507
- "util-surface-overlay",
508
- "data-[placement=top]:w-full data-[placement=bottom]:w-full"
509
- ],
510
- {
511
- variants: {
512
- size: {
513
- xsmall: "w-64 data-[placement=top]:h-48 data-[placement=bottom]:h-48",
514
- small: "w-72 data-[placement=top]:h-64 data-[placement=bottom]:h-64",
515
- medium: "w-96 data-[placement=top]:h-80 data-[placement=bottom]:h-80"
516
- }
517
- }
518
- }
519
- ),
520
- closeButton: (0, import_system16.cva)(["absolute top-3.5 right-3 z-50", "size-7"]),
521
- header: (0, import_system16.cva)("border-border border-b px-6 py-4"),
522
- title: (0, import_system16.cva)("font-semibold text-base"),
523
- content: (0, import_system16.cva)("px-6 py-4 overflow-y-auto outline-none"),
524
- actions: (0, import_system16.cva)(
525
- "flex flex-row gap-3 justify-end border-border border-t px-6 py-4"
526
- )
407
+ //#endregion
408
+ //#region src/components/Drawer.styles.ts
409
+ const Drawer = {
410
+ overlay: (0, __marigold_system.cva)([
411
+ "group/overlay z-40",
412
+ "data-[placement=top]:w-full data-[placement=top]:entering:animate-slide-in-top data-[placement=top]:exiting:animate-slide-out-top data-[placement=top]:top-0 data-[placement=top]:left-0",
413
+ "data-[placement=bottom]:w-full data-[placement=bottom]:entering:animate-slide-in-bottom data-[placement=bottom]:exiting:animate-slide-out-bottom data-[placement=bottom]:bottom-0 data-[placement=bottom]:left-0",
414
+ "data-[placement=left]:entering:animate-slide-in-left data-[placement=left]:exiting:animate-slide-out-left data-[placement=left]:top-0 data-[placement=left]:left-0",
415
+ "data-[placement=right]:entering:animate-slide-in-right data-[placement=right]:exiting:animate-slide-out-right data-[placement=right]:top-0 data-[placement=right]:right-0"
416
+ ]),
417
+ container: (0, __marigold_system.cva)([
418
+ "w-full relative grid-rows-[auto_1fr_auto]",
419
+ "util-surface-overlay",
420
+ "data-[placement=top]:w-full data-[placement=bottom]:w-full"
421
+ ], { variants: { size: {
422
+ xsmall: "w-64 data-[placement=top]:h-48 data-[placement=bottom]:h-48",
423
+ small: "w-72 data-[placement=top]:h-64 data-[placement=bottom]:h-64",
424
+ medium: "w-96 data-[placement=top]:h-80 data-[placement=bottom]:h-80"
425
+ } } }),
426
+ closeButton: (0, __marigold_system.cva)(["absolute top-3.5 right-3 z-50", "size-7"]),
427
+ header: (0, __marigold_system.cva)("border-border border-b px-6 py-4"),
428
+ title: (0, __marigold_system.cva)("font-semibold text-base"),
429
+ content: (0, __marigold_system.cva)("px-6 py-4 overflow-y-auto outline-none"),
430
+ actions: (0, __marigold_system.cva)("flex flex-row gap-3 justify-end border-border border-t px-6 py-4")
527
431
  };
528
432
 
529
- // src/components/IconButton.styles.ts
530
- var import_system17 = require("@marigold/system");
531
- var IconButton = (0, import_system17.cva)("", {
532
- variants: {
533
- variant: {
534
- 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"
535
- }
536
- }
537
- });
433
+ //#endregion
434
+ //#region src/components/IconButton.styles.ts
435
+ 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" } } });
538
436
 
539
- // src/components/Field.styles.ts
540
- var import_system18 = require("@marigold/system");
541
- var Field = (0, import_system18.cva)("space-y-2");
437
+ //#endregion
438
+ //#region src/components/Field.styles.ts
439
+ const Field = (0, __marigold_system.cva)("space-y-2");
542
440
 
543
- // src/components/Headline.styles.ts
544
- var import_system19 = require("@marigold/system");
545
- var Headline = (0, import_system19.cva)("", {
546
- variants: {
547
- size: {
548
- "level-1": "text-3xl font-extrabold",
549
- "level-2": "text-2xl font-bold",
550
- "level-3": "text-xl font-semibold",
551
- "level-4": "text-lg font-semibold",
552
- "level-5": "text-base font-medium",
553
- "level-6": "text-base font-normal"
554
- }
555
- }
556
- });
441
+ //#endregion
442
+ //#region src/components/Headline.styles.ts
443
+ const Headline = (0, __marigold_system.cva)("", { variants: { size: {
444
+ "level-1": "text-3xl font-extrabold",
445
+ "level-2": "text-2xl font-bold",
446
+ "level-3": "text-xl font-semibold",
447
+ "level-4": "text-lg font-semibold",
448
+ "level-5": "text-base font-medium",
449
+ "level-6": "text-base font-normal"
450
+ } } });
557
451
 
558
- // src/components/HelpText.styles.ts
559
- var import_system20 = require("@marigold/system");
560
- var HelpText = {
561
- container: (0, import_system20.cva)([
562
- "text-xs text-muted-foreground group-disabled/field:text-disabled-foreground",
563
- "group-invalid/field:text-destructive",
564
- /**
565
- * Removes the spacing from the field when when there are hidden
566
- * elements (e.g. the hidden select rendered by react-aria).
567
- */
568
- 'has-[+_[aria-hidden="true"]]:mb-0'
569
- ]),
570
- icon: (0, import_system20.cva)("")
452
+ //#endregion
453
+ //#region src/components/HelpText.styles.ts
454
+ const HelpText = {
455
+ container: (0, __marigold_system.cva)([
456
+ "text-xs text-muted-foreground group-disabled/field:text-disabled-foreground",
457
+ "group-invalid/field:text-destructive",
458
+ "has-[+_[aria-hidden=\"true\"]]:mb-0"
459
+ ]),
460
+ icon: (0, __marigold_system.cva)("")
571
461
  };
572
462
 
573
- // src/components/Label.styles.ts
574
- var import_system21 = require("@marigold/system");
575
- var Label = {
576
- container: (0, import_system21.cva)([
577
- "flex items-center gap-1",
578
- "text-sm font-medium leading-none text-foreground",
579
- "group-disabled/field:cursor-not-allowed group-disabled/field:text-disabled-foreground"
580
- ]),
581
- indicator: (0, import_system21.cva)(
582
- "group-required/field:block text-destructive align-super size-2.5"
583
- )
463
+ //#endregion
464
+ //#region src/components/Label.styles.ts
465
+ const Label = {
466
+ container: (0, __marigold_system.cva)([
467
+ "flex items-center gap-1",
468
+ "text-sm font-medium leading-none text-foreground",
469
+ "group-disabled/field:cursor-not-allowed group-disabled/field:text-disabled-foreground"
470
+ ]),
471
+ indicator: (0, __marigold_system.cva)("group-required/field:block text-destructive -ml-1")
584
472
  };
585
473
 
586
- // src/components/Link.styles.ts
587
- var import_system22 = require("@marigold/system");
588
- var Link = (0, import_system22.cva)(
589
- "aria-[disabled]:cursor-not-allowed",
590
- {
591
- variants: {
592
- variant: {
593
- default: "text-link font-normal",
594
- secondary: "font-medium text-foreground underline hover:no-underline"
595
- },
596
- size: {
597
- default: "",
598
- small: "text-sm"
599
- }
600
- },
601
- defaultVariants: {
602
- variant: "default",
603
- size: "default"
604
- }
605
- }
606
- );
474
+ //#endregion
475
+ //#region src/components/Link.styles.ts
476
+ const Link = (0, __marigold_system.cva)("aria-[disabled]:cursor-not-allowed", {
477
+ variants: {
478
+ variant: {
479
+ default: "text-link font-normal",
480
+ secondary: "font-medium text-foreground underline hover:no-underline"
481
+ },
482
+ size: {
483
+ default: "",
484
+ small: "text-sm"
485
+ }
486
+ },
487
+ defaultVariants: {
488
+ variant: "default",
489
+ size: "default"
490
+ }
491
+ });
607
492
 
608
- // src/components/List.styles.ts
609
- var import_system23 = require("@marigold/system");
610
- var List = {
611
- ul: (0, import_system23.cva)("ml-6 list-outside list-disc space-y-1 marker:text-foreground/50", {
612
- variants: {
613
- size: {
614
- default: "",
615
- small: "*:text-sm"
616
- }
617
- },
618
- defaultVariants: {
619
- size: "default"
620
- }
621
- }),
622
- ol: (0, import_system23.cva)(
623
- "ml-6 list-outside list-decimal space-y-1 marker:text-foreground/50",
624
- {
625
- variants: {
626
- size: {
627
- default: "",
628
- small: "*:text-sm"
629
- }
630
- },
631
- defaultVariants: {
632
- size: "default"
633
- }
634
- }
635
- ),
636
- item: (0, import_system23.cva)("")
493
+ //#endregion
494
+ //#region src/components/List.styles.ts
495
+ const List = {
496
+ ul: (0, __marigold_system.cva)("ml-6 list-outside list-disc space-y-1 marker:text-foreground/50", {
497
+ variants: { size: {
498
+ default: "",
499
+ small: "*:text-sm"
500
+ } },
501
+ defaultVariants: { size: "default" }
502
+ }),
503
+ ol: (0, __marigold_system.cva)("ml-6 list-outside list-decimal space-y-1 marker:text-foreground/50", {
504
+ variants: { size: {
505
+ default: "",
506
+ small: "*:text-sm"
507
+ } },
508
+ defaultVariants: { size: "default" }
509
+ }),
510
+ item: (0, __marigold_system.cva)("")
637
511
  };
638
512
 
639
- // src/components/ListBox.styles.ts
640
- var import_system24 = require("@marigold/system");
641
- var ListBox = {
642
- container: (0, import_system24.cva)([
643
- "overflow-hidden rounded-md border border-input group-[[data-trigger]]/popover:border-0"
644
- ]),
645
- list: (0, import_system24.cva)(["bg-background p-1 text-sm outline-0"]),
646
- item: (0, import_system24.cva)([
647
- "relative flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-foreground",
648
- "[&_.selection-indicator>svg]:invisible [&_.selection-indicator>svg]:block",
649
- "selected:bg-selected selected:[&_.selection-indicator>svg]:visible",
650
- "hover:bg-hover hover:text-hover-foreground",
651
- "disabled:cursor-not-allowed disabled:text-disabled-foreground",
652
- "focus-visible:util-focus-ring outline-none",
653
- "cursor-default data-selection-mode:cursor-pointer"
654
- ]),
655
- section: (0, import_system24.cva)(""),
656
- header: (0, import_system24.cva)(
657
- "[&_header]:px-2 [&_header]:py-1.5 [&_header]:text-xs [&_header]:font-medium [&_header]:text-muted-foreground"
658
- )
513
+ //#endregion
514
+ //#region src/components/ListBox.styles.ts
515
+ const ListBox = {
516
+ container: (0, __marigold_system.cva)(["overflow-hidden rounded-md border border-input group-[[data-trigger]]/popover:border-0"]),
517
+ list: (0, __marigold_system.cva)(["bg-background p-1 text-sm outline-0 space-y-px"]),
518
+ item: (0, __marigold_system.cva)([
519
+ "relative flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-foreground",
520
+ "[&_.selection-indicator>svg]:invisible [&_.selection-indicator>svg]:block",
521
+ "selected:bg-selected selected:[&_.selection-indicator>svg]:visible",
522
+ "hover:bg-hover hover:text-hover-foreground",
523
+ "disabled:cursor-not-allowed disabled:text-disabled-foreground",
524
+ "focus-visible:util-focus-ring outline-none focus-visible:z-1",
525
+ "cursor-default data-selection-mode:cursor-pointer"
526
+ ]),
527
+ section: (0, __marigold_system.cva)(""),
528
+ header: (0, __marigold_system.cva)("[&_header]:px-2 [&_header]:py-1.5 [&_header]:text-xs [&_header]:font-medium [&_header]:text-muted-foreground")
659
529
  };
660
530
 
661
- // src/components/Menu.styles.ts
662
- var import_system25 = require("@marigold/system");
663
- var Menu = {
664
- container: (0, import_system25.cva)([
665
- "text-foreground z-50 overflow-hidden rounded-md p-1 outline-none"
666
- ]),
667
- item: (0, import_system25.cva)(
668
- [
669
- "relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none text-nowrap",
670
- "disabled:text-disabled-foreground",
671
- "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4"
672
- ],
673
- {
674
- variants: {
675
- variant: {
676
- default: "text-foreground focus:bg-focus [&_svg]:opacity-60",
677
- destructive: "text-destructive focus:bg-destructive/10"
678
- }
679
- },
680
- defaultVariants: {
681
- variant: "default"
682
- }
683
- }
684
- ),
685
- section: (0, import_system25.cva)(
686
- "text-muted-foreground px-2 py-1.5 text-xs font-medium border-t border-t-border in-first:border-t-0"
687
- ),
688
- button: (0, import_system25.cva)(
689
- [
690
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow]",
691
- "[&_svg]:shrink-0 [&_svg]:pointer-events-none",
692
- "focus-visible:util-focus-ring outline-none disabled:util-disabled",
693
- "cursor-pointer"
694
- ],
695
- {
696
- variants: {
697
- variant: {
698
- default: "border border-input bg-background shadow-xs hover:bg-hover hover:text-foreground expanded:bg-hover",
699
- ghost: "hover:bg-hover hover:text-foreground expanded:bg-hover"
700
- },
701
- size: {
702
- default: "h-button px-4 py-2 [&_svg]:size-4",
703
- small: "h-button-small px-3 text-xs [&_svg]:size-3.5",
704
- large: "h-button-large px-8 [&_svg]:size-5",
705
- icon: "size-button [&_svg]:size-4"
706
- }
707
- },
708
- defaultVariants: {
709
- variant: "default",
710
- size: "default"
711
- }
712
- }
713
- )
531
+ //#endregion
532
+ //#region src/components/Menu.styles.ts
533
+ const Menu = {
534
+ container: (0, __marigold_system.cva)(["text-foreground z-50 overflow-hidden rounded-md p-1 outline-none"]),
535
+ item: (0, __marigold_system.cva)([
536
+ "relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none text-nowrap",
537
+ "disabled:text-disabled-foreground",
538
+ "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4"
539
+ ], {
540
+ variants: { variant: {
541
+ default: "text-foreground focus:bg-focus [&_svg]:opacity-60",
542
+ destructive: "text-destructive focus:bg-destructive/10"
543
+ } },
544
+ defaultVariants: { variant: "default" }
545
+ }),
546
+ section: (0, __marigold_system.cva)("text-muted-foreground px-2 py-1.5 text-xs font-medium border-t border-t-border in-first:border-t-0"),
547
+ button: (0, __marigold_system.cva)([
548
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow]",
549
+ "[&_svg]:shrink-0 [&_svg]:pointer-events-none",
550
+ "focus-visible:util-focus-ring outline-none disabled:util-disabled",
551
+ "cursor-pointer"
552
+ ], {
553
+ variants: {
554
+ variant: {
555
+ default: "border border-input bg-background shadow-xs hover:bg-hover hover:text-foreground expanded:bg-hover",
556
+ ghost: "hover:bg-hover hover:text-foreground expanded:bg-hover"
557
+ },
558
+ size: {
559
+ default: "h-button px-4 py-2 [&_svg]:size-4",
560
+ small: "h-button-small px-3 text-xs [&_svg]:size-3.5",
561
+ large: "h-button-large px-8 [&_svg]:size-5",
562
+ icon: "size-button [&_svg]:size-4"
563
+ }
564
+ },
565
+ defaultVariants: {
566
+ variant: "default",
567
+ size: "default"
568
+ }
569
+ })
714
570
  };
715
571
 
716
- // src/components/Modal.styles.ts
717
- var import_system26 = require("@marigold/system");
718
- var Modal = (0, import_system26.cva)(
719
- [
720
- "sm:max-h-[min(640px,80vh)]",
721
- "[--dialog-spacing-x:1rem]",
722
- // Minimal padding to the horizontal edges
723
- "w-[min(calc(100%_-_var(--dialog-spacing-x)),calc(var(--dialog-width)_-_var(--dialog-spacing-x)))]"
724
- ],
725
- {
726
- variants: {
727
- size: {
728
- xsmall: "[--dialog-width:480px]",
729
- // "xs" breakpoint
730
- small: "[--dialog-width:640px]",
731
- // sm breakpoint
732
- medium: "[--dialog-width:768px]"
733
- // md breakpoint
734
- }
735
- },
736
- defaultVariants: {
737
- size: "small"
738
- }
739
- }
740
- );
572
+ //#endregion
573
+ //#region src/components/Modal.styles.ts
574
+ const Modal = (0, __marigold_system.cva)([
575
+ "sm:max-h-[min(640px,80vh)]",
576
+ "[--dialog-spacing-x:1rem]",
577
+ "w-[min(calc(100%_-_var(--dialog-spacing-x)),calc(var(--dialog-width)_-_var(--dialog-spacing-x)))]"
578
+ ], {
579
+ variants: { size: {
580
+ xsmall: "[--dialog-width:480px]",
581
+ small: "[--dialog-width:640px]",
582
+ medium: "[--dialog-width:768px]"
583
+ } },
584
+ defaultVariants: { size: "small" }
585
+ });
741
586
 
742
- // src/components/Multiselect.styles.ts
743
- var import_system27 = require("@marigold/system");
744
- var MultiSelect = {
745
- field: (0, import_system27.cva)("space-y-2"),
746
- container: (0, import_system27.cva)([
747
- "bg-background shadow-xs border",
748
- "px-3 text-sm text-foreground transition-shadow",
749
- "border border-input rounded-lg outline-hidden",
750
- "aria-disabled:bg-disabled aria-disabled:text-disabled-foreground aria-disabled:hover:border-input aria-disabled:border-input aria-disabled:cursor-not-allowed",
751
- "has-[input[data-invalid=true]]:border-destructive has-[input[data-invalid=true][data-focused=true]]:!border-destructive has-[input[data-invalid=true][data-focused=true]]:!ring-destructive/20",
752
- "has-[input[data-focused=true]]:!border-ring has-[input[data-focused=true]]:!ring-ring/50 has-[input[data-focused=true]]:ring-[3px] has-[input[data-focused=true]]:!outline-none",
753
- "has-[input[aria-readonly=true]]:bg-muted",
754
- "min-h-input"
755
- ]),
756
- input: (0, import_system27.cva)([
757
- "bg-transparent flex-1 h-full",
758
- "leading-loose",
759
- "data-[focused]:outline-hidden outline-hidden border-0",
760
- "disabled:cursor-not-allowed",
761
- "group-data-[icon]/input:pl-5",
762
- "group-data-[action]/input:pr-8",
763
- "placeholder:text-placeholder"
764
- ]),
765
- tag: (0, import_system27.cva)([
766
- "border border-solid border-input rounded-md",
767
- "bg-background",
768
- "font-medium text-xs",
769
- "flex items-center gap-1 ",
770
- "h-7 px-2 cursor-default"
771
- ]),
772
- closeButton: (0, import_system27.cva)(
773
- "size-4 cursor-pointer border-none bg-transparent p-0 leading-normal outline-0"
774
- ),
775
- icon: (0, import_system27.cva)("left-1"),
776
- listContainer: (0, import_system27.cva)(["util-surface-overlay mt-0.5 rounded-lg outline-0"]),
777
- list: (0, import_system27.cva)("pointer-events-auto space-y-1 p-1"),
778
- option: (0, import_system27.cva)([
779
- "text-sm text-foreground",
780
- "flex flex-col",
781
- "cursor-pointer p-2 outline-hidden",
782
- "[&.isFocused:not([aria-disabled=true])]:!text-foreground [&.isFocused[aria-disabled=true]]:bg-transparent",
783
- "aria-disabled:text-disabled-foreground aria-disabled:cursor-not-allowed",
784
- "[&.isFocused:not([aria-disabled=true])]:!bg-hover"
785
- ]),
786
- valueContainer: (0, import_system27.cva)("gap-2")
587
+ //#endregion
588
+ //#region src/components/Multiselect.styles.ts
589
+ const MultiSelect = {
590
+ field: (0, __marigold_system.cva)("space-y-2"),
591
+ container: (0, __marigold_system.cva)([
592
+ "bg-background shadow-xs border",
593
+ "px-3 text-sm text-foreground transition-shadow",
594
+ "border border-input rounded-lg outline-hidden",
595
+ "aria-disabled:bg-disabled aria-disabled:text-disabled-foreground aria-disabled:hover:border-input aria-disabled:border-input aria-disabled:cursor-not-allowed",
596
+ "has-[input[data-invalid=true]]:border-destructive has-[input[data-invalid=true][data-focused=true]]:!border-destructive has-[input[data-invalid=true][data-focused=true]]:!ring-destructive/20",
597
+ "has-[input[data-focused=true]]:!border-ring has-[input[data-focused=true]]:!ring-ring/50 has-[input[data-focused=true]]:ring-[3px] has-[input[data-focused=true]]:!outline-none",
598
+ "has-[input[aria-readonly=true]]:bg-muted",
599
+ "min-h-input"
600
+ ]),
601
+ input: (0, __marigold_system.cva)([
602
+ "bg-transparent flex-1 h-full",
603
+ "leading-loose",
604
+ "data-[focused]:outline-hidden outline-hidden border-0",
605
+ "disabled:cursor-not-allowed",
606
+ "group-data-[icon]/input:pl-5",
607
+ "group-data-[action]/input:pr-8",
608
+ "placeholder:text-placeholder"
609
+ ]),
610
+ tag: (0, __marigold_system.cva)([
611
+ "border border-solid border-input rounded-md",
612
+ "bg-background",
613
+ "font-medium text-xs",
614
+ "flex items-center gap-1 ",
615
+ "h-7 px-2 cursor-default"
616
+ ]),
617
+ closeButton: (0, __marigold_system.cva)("size-4 cursor-pointer border-none bg-transparent p-0 leading-normal outline-0"),
618
+ icon: (0, __marigold_system.cva)("left-1"),
619
+ listContainer: (0, __marigold_system.cva)(["util-surface-overlay mt-0.5 rounded-lg outline-0"]),
620
+ list: (0, __marigold_system.cva)("pointer-events-auto space-y-1 p-1"),
621
+ option: (0, __marigold_system.cva)([
622
+ "text-sm text-foreground",
623
+ "flex flex-col",
624
+ "cursor-pointer p-2 outline-hidden",
625
+ "[&.isFocused:not([aria-disabled=true])]:!text-foreground [&.isFocused[aria-disabled=true]]:bg-transparent",
626
+ "aria-disabled:text-disabled-foreground aria-disabled:cursor-not-allowed",
627
+ "[&.isFocused:not([aria-disabled=true])]:!bg-hover"
628
+ ]),
629
+ valueContainer: (0, __marigold_system.cva)("gap-2")
787
630
  };
788
631
 
789
- // src/components/NumberField.styles.ts
790
- var import_system28 = require("@marigold/system");
791
- var NumberField = {
792
- group: (0, import_system28.cva)([
793
- "rounded-lg h-input bg-background",
794
- "has-focus-visible:util-focus-ring outline-none",
795
- inputInvalid,
796
- inputReadOnly,
797
- "border border-input text-sm shadow-xs transition-shadow",
798
- "data-invalid:data-[focus-within]:border-destructive data-invalid:data-[focus-within]:ring-destructive/20"
799
- ]),
800
- stepper: (0, import_system28.cva)([
801
- "w-7 h-full text-center shrink-0",
802
- "disabled:text-disabled-foreground disabled:bg-disabled",
803
- "border-input! first-of-type:border-r! last-of-type:border-l!"
804
- ]),
805
- input: (0, import_system28.cva)([
806
- "tabular-nums text-foreground px-3 py-2",
807
- "min-w-0 flex-1 bg-transparent",
808
- "group-[[data-stepper]]/field:text-center",
809
- "disabled:text-disabled-foreground disabled:bg-disabled"
810
- ])
632
+ //#endregion
633
+ //#region src/components/NumberField.styles.ts
634
+ const NumberField = {
635
+ group: (0, __marigold_system.cva)([
636
+ "rounded-lg h-input bg-background",
637
+ "has-focus-visible:util-focus-ring outline-none",
638
+ inputInvalid,
639
+ inputReadOnly,
640
+ "border border-input text-sm shadow-xs transition-shadow",
641
+ "data-invalid:data-[focus-within]:border-destructive data-invalid:data-[focus-within]:ring-destructive/20"
642
+ ]),
643
+ stepper: (0, __marigold_system.cva)([
644
+ "w-7 h-full text-center shrink-0",
645
+ "disabled:text-disabled-foreground disabled:bg-disabled",
646
+ "border-input! first-of-type:border-r! last-of-type:border-l!"
647
+ ]),
648
+ input: (0, __marigold_system.cva)([
649
+ "tabular-nums text-foreground px-3 py-2",
650
+ "min-w-0 flex-1 bg-transparent",
651
+ "group-[[data-stepper]]/field:text-center",
652
+ "disabled:text-disabled-foreground disabled:bg-disabled"
653
+ ])
811
654
  };
812
655
 
813
- // src/components/Popover.styles.ts
814
- var import_system29 = require("@marigold/system");
815
- var Popover = (0, import_system29.cva)([
816
- "group/popover",
817
- "text-foreground z-50 overflow-y-auto overflow-x-hidden rounded-md outline-0",
818
- "placement-top:mb-1",
819
- "placement-bottom:mt-1",
820
- "placement-right:ml-1",
821
- "placement-left:mr-1",
822
- "util-surface-overlay"
656
+ //#endregion
657
+ //#region src/components/Popover.styles.ts
658
+ const Popover = (0, __marigold_system.cva)([
659
+ "group/popover",
660
+ "text-foreground z-50 overflow-y-auto overflow-x-hidden rounded-md outline-0",
661
+ "placement-top:mb-1",
662
+ "placement-bottom:mt-1",
663
+ "placement-right:ml-1",
664
+ "placement-left:mr-1",
665
+ "util-surface-overlay"
823
666
  ]);
824
667
 
825
- // src/components/Radio.styles.ts
826
- var import_system30 = require("@marigold/system");
827
- var Radio = {
828
- container: (0, import_system30.cva)("group-disabled/radio:cursor-not-allowed"),
829
- label: (0, import_system30.cva)([
830
- "text-sm font-normal cursor-pointer",
831
- "group-disabled/radio:text-disabled-foreground group-disabled/radio:cursor-not-allowed"
832
- ]),
833
- radio: (0, import_system30.cva)([
834
- "aspect-square size-4 rounded-full",
835
- "border border-input shadow-xs",
836
- "group-focus-visible/radio:util-focus-ring outline-none",
837
- "group-disabled/radio:group-selected/radio:bg-disabled group-disabled/radio:border-disabled! group-disabled/radio:cursor-not-allowed",
838
- "group-selected/radio:border-brand group-selected/radio:bg-brand group-selected/radio:text-brand-foreground"
839
- ]),
840
- group: (0, import_system30.cva)()
668
+ //#endregion
669
+ //#region src/components/Radio.styles.ts
670
+ const Radio = {
671
+ container: (0, __marigold_system.cva)("group-disabled/radio:cursor-not-allowed"),
672
+ label: (0, __marigold_system.cva)(["text-sm font-normal cursor-pointer", "group-disabled/radio:text-disabled-foreground group-disabled/radio:cursor-not-allowed"]),
673
+ radio: (0, __marigold_system.cva)([
674
+ "aspect-square size-4 rounded-full",
675
+ "border border-input shadow-xs",
676
+ "group-focus-visible/radio:util-focus-ring outline-none",
677
+ "group-disabled/radio:group-selected/radio:bg-disabled group-disabled/radio:border-disabled! group-disabled/radio:cursor-not-allowed",
678
+ "group-selected/radio:border-brand group-selected/radio:bg-brand group-selected/radio:text-brand-foreground"
679
+ ]),
680
+ group: (0, __marigold_system.cva)()
841
681
  };
842
682
 
843
- // src/components/Pagination.styles.ts
844
- var import_system31 = require("@marigold/system");
845
- var button = [
846
- "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors",
847
- "focus-visible:util-focus-ring outline-none",
848
- "disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground",
849
- "[&_svg]:pointer-events-none [&_svg]:shrink-0",
850
- "hover:bg-hover hover:text-hover-foreground",
851
- "cursor-pointer"
683
+ //#endregion
684
+ //#region src/components/Pagination.styles.ts
685
+ const button = [
686
+ "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors",
687
+ "focus-visible:util-focus-ring outline-none",
688
+ "disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground",
689
+ "[&_svg]:pointer-events-none [&_svg]:shrink-0",
690
+ "hover:bg-hover hover:text-hover-foreground",
691
+ "cursor-pointer"
852
692
  ];
853
- var Pagination = {
854
- container: (0, import_system31.cva)("flex items-center justify-center space-x-2"),
855
- navigationButton: (0, import_system31.cva)([
856
- ...button,
857
- "disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground",
858
- "h-9 py-2 gap-1 px-2.5"
859
- ]),
860
- pageButton: (0, import_system31.cva)([
861
- ...button,
862
- "bg-background size-9",
863
- "data-[selected=true]:border data-[selected=true]:border-input data-[selected=true]:shadow-xs"
864
- ]),
865
- icon: (0, import_system31.cva)("h-4 w-4"),
866
- ellipsis: (0, import_system31.cva)("text-foreground flex h-8 w-8 items-center justify-center")
693
+ const Pagination = {
694
+ container: (0, __marigold_system.cva)("flex items-center justify-center space-x-2"),
695
+ navigationButton: (0, __marigold_system.cva)([
696
+ ...button,
697
+ "disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground",
698
+ "h-9 py-2 gap-1 px-2.5"
699
+ ]),
700
+ pageButton: (0, __marigold_system.cva)([
701
+ ...button,
702
+ "bg-background size-9",
703
+ "data-[selected=true]:border data-[selected=true]:border-input data-[selected=true]:shadow-xs"
704
+ ]),
705
+ icon: (0, __marigold_system.cva)("h-4 w-4"),
706
+ ellipsis: (0, __marigold_system.cva)("text-foreground flex h-8 w-8 items-center justify-center")
867
707
  };
868
708
 
869
- // src/components/ProgressCycle.styles.ts
870
- var import_system32 = require("@marigold/system");
871
- var ProgressCycle = (0, import_system32.cva)([
872
- "stroke-foreground"
873
- ]);
709
+ //#endregion
710
+ //#region src/components/ProgressCycle.styles.ts
711
+ const ProgressCycle = (0, __marigold_system.cva)(["stroke-foreground"]);
874
712
 
875
- // src/components/SectionMessage.styles.ts
876
- var import_system33 = require("@marigold/system");
877
- var SectionMessage = {
878
- container: (0, import_system33.cva)(
879
- [
880
- 'grid-cols-[min-content_auto_min-content] gap-x-4 gap-y-1 [grid-template-areas:"icon_title_close""icon_content_content"]',
881
- "bg-background rounded-md border px-3 py-4"
882
- ],
883
- {
884
- variants: {
885
- variant: {
886
- success: "border-success-muted-accent bg-success-muted text-success-muted-foreground",
887
- warning: "border-warning-muted-accent bg-warning-muted text-warning-muted-foreground",
888
- info: "border-info-muted-accent bg-info-muted text-info-muted-foreground",
889
- error: "border-destructive-muted-accent bg-destructive-muted text-destructive-muted-foreground"
890
- }
891
- },
892
- defaultVariants: {
893
- variant: "info"
894
- }
895
- }
896
- ),
897
- title: (0, import_system33.cva)("text-sm font-medium"),
898
- content: (0, import_system33.cva)("text-muted-foreground text-sm leading-5 font-normal", {
899
- variants: {
900
- variant: {
901
- success: "text-success-muted-foreground",
902
- warning: "text-warning-muted-foreground",
903
- info: "text-info-muted-foreground",
904
- error: "text-destructive-muted-foreground"
905
- }
906
- },
907
- defaultVariants: {
908
- variant: "info"
909
- }
910
- }),
911
- icon: (0, import_system33.cva)("h-6 w-6 align-baseline leading-none -mt-0.5", {
912
- variants: {
913
- variant: {
914
- success: "text-success-muted-accent",
915
- warning: "text-warning-muted-accent",
916
- info: "text-info-muted-accent",
917
- error: "text-destructive-muted-accent"
918
- }
919
- },
920
- defaultVariants: {
921
- variant: "info"
922
- }
923
- }),
924
- close: (0, import_system33.cva)([
925
- "size-8 text-foreground",
926
- "[&_svg]:size-6",
927
- "-my-1.5 -me-2"
928
- // align button with title
929
- ])
713
+ //#endregion
714
+ //#region src/components/SectionMessage.styles.ts
715
+ const SectionMessage = {
716
+ container: (0, __marigold_system.cva)(["grid-cols-[min-content_auto_min-content] gap-x-4 gap-y-1 [grid-template-areas:\"icon_title_close\"\"icon_content_content\"]", "bg-background rounded-md border px-3 py-4"], {
717
+ variants: { variant: {
718
+ success: "border-success-muted-accent bg-success-muted text-success-muted-foreground",
719
+ warning: "border-warning-muted-accent bg-warning-muted text-warning-muted-foreground",
720
+ info: "border-info-muted-accent bg-info-muted text-info-muted-foreground",
721
+ error: "border-destructive-muted-accent bg-destructive-muted text-destructive-muted-foreground"
722
+ } },
723
+ defaultVariants: { variant: "info" }
724
+ }),
725
+ title: (0, __marigold_system.cva)("text-sm font-medium"),
726
+ content: (0, __marigold_system.cva)("text-muted-foreground text-sm leading-5 font-normal", {
727
+ variants: { variant: {
728
+ success: "text-success-muted-foreground",
729
+ warning: "text-warning-muted-foreground",
730
+ info: "text-info-muted-foreground",
731
+ error: "text-destructive-muted-foreground"
732
+ } },
733
+ defaultVariants: { variant: "info" }
734
+ }),
735
+ icon: (0, __marigold_system.cva)("h-6 w-6 align-baseline leading-none -mt-0.5", {
736
+ variants: { variant: {
737
+ success: "text-success-muted-accent",
738
+ warning: "text-warning-muted-accent",
739
+ info: "text-info-muted-accent",
740
+ error: "text-destructive-muted-accent"
741
+ } },
742
+ defaultVariants: { variant: "info" }
743
+ }),
744
+ close: (0, __marigold_system.cva)([
745
+ "size-8 text-foreground",
746
+ "[&_svg]:size-6",
747
+ "-my-1.5 -me-2"
748
+ ])
930
749
  };
931
750
 
932
- // src/components/Select.styles.ts
933
- var import_system34 = require("@marigold/system");
934
- var Select = {
935
- icon: (0, import_system34.cva)("text-muted-foreground/80"),
936
- select: (0, import_system34.cva)([
937
- inputContainer,
938
- inputInvalid,
939
- inputDisabled,
940
- "focus-visible:util-focus-ring outline-none",
941
- "h-input",
942
- "cursor-pointer",
943
- "*:data-placeholder:text-placeholder",
944
- /**
945
- * Removes the spacing from the field when there is no
946
- * helptext. Spacing is applied because the select is followed
947
- * by a hidden select that is rendered by react-aria.
948
- */
949
- 'has-[+_[aria-hidden="true"]]:mb-0'
950
- ])
751
+ //#endregion
752
+ //#region src/components/Select.styles.ts
753
+ const Select = {
754
+ icon: (0, __marigold_system.cva)("text-muted-foreground/80"),
755
+ select: (0, __marigold_system.cva)([
756
+ inputContainer,
757
+ inputInvalid,
758
+ inputDisabled,
759
+ "focus-visible:util-focus-ring outline-none",
760
+ "h-input",
761
+ "cursor-pointer",
762
+ "*:data-placeholder:text-placeholder",
763
+ "has-[+_[aria-hidden=\"true\"]]:mb-0"
764
+ ])
951
765
  };
952
766
 
953
- // src/components/Slider.styles.ts
954
- var import_system35 = require("@marigold/system");
955
- var Slider = {
956
- container: (0, import_system35.cva)("*:aria-hidden:hidden"),
957
- track: (0, import_system35.cva)([
958
- "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"
959
- ]),
960
- selectedTrack: (0, import_system35.cva)([
961
- "absolute bg-black data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full rounded-lg"
962
- ]),
963
- thumb: (0, import_system35.cva)([
964
- "block h-5 w-5 rounded-full border-2 border-primary bg-background transition-colors",
965
- "focus-visible:util-focus-borderless-ring outline-none",
966
- "disabled:cursor-not-allowed"
967
- ]),
968
- output: (0, import_system35.cva)("text-foreground text-sm")
767
+ //#endregion
768
+ //#region src/components/Slider.styles.ts
769
+ const Slider = {
770
+ container: (0, __marigold_system.cva)("*:aria-hidden:hidden"),
771
+ track: (0, __marigold_system.cva)(["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"]),
772
+ selectedTrack: (0, __marigold_system.cva)(["absolute bg-black data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full rounded-lg"]),
773
+ thumb: (0, __marigold_system.cva)([
774
+ "block h-5 w-5 rounded-full border-2 border-primary bg-background transition-colors",
775
+ "focus-visible:util-focus-borderless-ring outline-none",
776
+ "disabled:cursor-not-allowed"
777
+ ]),
778
+ output: (0, __marigold_system.cva)("text-foreground text-sm")
969
779
  };
970
780
 
971
- // src/components/Switch.styles.ts
972
- var import_system36 = require("@marigold/system");
973
- var Switch = {
974
- container: (0, import_system36.cva)(
975
- "disabled:cursor-not-allowed disabled:text-disabled-foreground"
976
- ),
977
- track: (0, import_system36.cva)([
978
- "flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full transition-colors",
979
- "border-2 border-transparent",
980
- // this increases the hit area so it is 24px
981
- "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",
982
- "group-selected/switch:bg-brand bg-input",
983
- "group-focus-visible/switch:util-focus-borderless-ring outline-none"
984
- ]),
985
- thumb: (0, import_system36.cva)([
986
- "pointer-events-none block size-5 rounded-full",
987
- "bg-background shadow-xs",
988
- "ring-0 transition-transform duration-150 ease-out-quint",
989
- "group-selected/switch:translate-x-4 translate-x-0"
990
- ])
781
+ //#endregion
782
+ //#region src/components/Switch.styles.ts
783
+ const Switch = {
784
+ container: (0, __marigold_system.cva)("disabled:cursor-not-allowed disabled:text-disabled-foreground"),
785
+ track: (0, __marigold_system.cva)([
786
+ "flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full transition-colors",
787
+ "border-2 border-transparent",
788
+ "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",
789
+ "group-selected/switch:bg-brand bg-input",
790
+ "group-focus-visible/switch:util-focus-borderless-ring outline-none"
791
+ ]),
792
+ thumb: (0, __marigold_system.cva)([
793
+ "pointer-events-none block size-5 rounded-full",
794
+ "bg-background shadow-xs",
795
+ "ring-0 transition-transform duration-150 ease-out-quint",
796
+ "group-selected/switch:translate-x-4 translate-x-0"
797
+ ])
991
798
  };
992
799
 
993
- // src/components/Table.styles.ts
994
- var import_system37 = require("@marigold/system");
995
- var Table = {
996
- table: (0, import_system37.cva)(
997
- "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",
998
- {
999
- variants: {
1000
- variant: {
1001
- default: "",
1002
- grid: ""
1003
- }
1004
- }
1005
- }
1006
- ),
1007
- thead: (0, import_system37.cva)(
1008
- // for sticky header
1009
- "bg-background/90 top-0 z-1 backdrop-blur-xs ",
1010
- {
1011
- variants: {
1012
- variant: {
1013
- default: "",
1014
- grid: ""
1015
- }
1016
- }
1017
- }
1018
- ),
1019
- headerRow: (0, import_system37.cva)(["border-border border-b"], {
1020
- variants: {
1021
- variant: {
1022
- default: "",
1023
- grid: "[&>:not(:last-child)]:border-r [&>:not(:last-child)]:border-border",
1024
- muted: "bg-muted"
1025
- }
1026
- },
1027
- defaultVariants: {
1028
- variant: "default"
1029
- }
1030
- }),
1031
- header: (0, import_system37.cva)(
1032
- [
1033
- "h-12 px-3 align-middle font-medium text-muted-foreground",
1034
- "focus-visible:outline-2 outline-offset-2 outline-ring/70"
1035
- ],
1036
- {
1037
- variants: {
1038
- variant: {
1039
- default: "[&:has([type=checkbox])]:pr-0",
1040
- grid: "",
1041
- muted: "border-t"
1042
- }
1043
- },
1044
- defaultVariants: {
1045
- variant: "default"
1046
- }
1047
- }
1048
- ),
1049
- body: (0, import_system37.cva)("[&_tr:last-child]:border-0"),
1050
- row: (0, import_system37.cva)(
1051
- [
1052
- "border-b border-border transition-colors",
1053
- "focus-visible:outline-2 outline-offset-2 outline-ring/70",
1054
- "data-disabled:cursor-not-allowed"
1055
- ],
1056
- {
1057
- variants: {
1058
- variant: {
1059
- default: "aria-[selected=true]:bg-muted",
1060
- grid: "aria-[selected=true]:bg-muted [&>:not(:last-child)]:border-r [&>:not(:last-child)]:border-border",
1061
- admin: [
1062
- "bg-access-admin",
1063
- "[&_td:first-child]:relative [&_td:first-child]:pl-4",
1064
- '[&_td:first-child:before]:content-[""] [&_td:first-child:before]:absolute [&_td:first-child:before]:top-0 [&_td:first-child:before]:bottom-0 [&_td:first-child:before]:left-0 [&_td:first-child:before]:w-1',
1065
- "[&_td:first-child:before]:bg-access-admin-foreground"
1066
- ],
1067
- master: [
1068
- "bg-access-master",
1069
- "[&_td:first-child]:relative [&_td:first-child]:pl-4",
1070
- '[&_td:first-child:before]:content-[""] [&_td:first-child:before]:absolute [&_td:first-child:before]:top-0 [&_td:first-child:before]:bottom-0 [&_td:first-child:before]:left-0 [&_td:first-child:before]:w-1',
1071
- "[&_td:first-child:before]:bg-access-master-foreground"
1072
- ]
1073
- }
1074
- },
1075
- defaultVariants: {
1076
- variant: "default"
1077
- }
1078
- }
1079
- ),
1080
- cell: (0, import_system37.cva)("p-3 focus-visible:outline-2 outline-offset-2 outline-ring/70", {
1081
- variants: {
1082
- variant: {
1083
- default: "[&:has([type=checkbox])]:pr-0",
1084
- grid: ""
1085
- }
1086
- },
1087
- defaultVariants: {
1088
- variant: "default"
1089
- }
1090
- })
800
+ //#endregion
801
+ //#region src/components/Table.styles.ts
802
+ const Table = {
803
+ 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: {
804
+ default: "",
805
+ grid: ""
806
+ } } }),
807
+ thead: (0, __marigold_system.cva)("bg-background/90 top-0 z-1 backdrop-blur-xs ", { variants: { variant: {
808
+ default: "",
809
+ grid: ""
810
+ } } }),
811
+ headerRow: (0, __marigold_system.cva)(["border-border border-b"], {
812
+ variants: { variant: {
813
+ default: "",
814
+ grid: "[&>:not(:last-child)]:border-r [&>:not(:last-child)]:border-border",
815
+ muted: "bg-muted"
816
+ } },
817
+ defaultVariants: { variant: "default" }
818
+ }),
819
+ header: (0, __marigold_system.cva)(["h-12 px-3 align-middle font-medium text-muted-foreground", "focus-visible:outline-2 outline-offset-2 outline-ring/70"], {
820
+ variants: { variant: {
821
+ default: "[&:has([type=checkbox])]:pr-0",
822
+ grid: "",
823
+ muted: "border-t"
824
+ } },
825
+ defaultVariants: { variant: "default" }
826
+ }),
827
+ body: (0, __marigold_system.cva)("[&_tr:last-child]:border-0"),
828
+ row: (0, __marigold_system.cva)([
829
+ "border-b border-border transition-colors",
830
+ "focus-visible:outline-2 outline-offset-2 outline-ring/70",
831
+ "data-disabled:cursor-not-allowed"
832
+ ], {
833
+ variants: { variant: {
834
+ default: "aria-[selected=true]:bg-muted",
835
+ grid: "aria-[selected=true]:bg-muted [&>:not(:last-child)]:border-r [&>:not(:last-child)]:border-border",
836
+ admin: [
837
+ "bg-access-admin",
838
+ "[&_td:first-child]:relative [&_td:first-child]:pl-4",
839
+ "[&_td:first-child:before]:content-[\"\"] [&_td:first-child:before]:absolute [&_td:first-child:before]:top-0 [&_td:first-child:before]:bottom-0 [&_td:first-child:before]:left-0 [&_td:first-child:before]:w-1",
840
+ "[&_td:first-child:before]:bg-access-admin-foreground"
841
+ ],
842
+ master: [
843
+ "bg-access-master",
844
+ "[&_td:first-child]:relative [&_td:first-child]:pl-4",
845
+ "[&_td:first-child:before]:content-[\"\"] [&_td:first-child:before]:absolute [&_td:first-child:before]:top-0 [&_td:first-child:before]:bottom-0 [&_td:first-child:before]:left-0 [&_td:first-child:before]:w-1",
846
+ "[&_td:first-child:before]:bg-access-master-foreground"
847
+ ]
848
+ } },
849
+ defaultVariants: { variant: "default" }
850
+ }),
851
+ cell: (0, __marigold_system.cva)("p-3 focus-visible:outline-2 outline-offset-2 outline-ring/70", {
852
+ variants: { variant: {
853
+ default: "[&:has([type=checkbox])]:pr-0",
854
+ grid: ""
855
+ } },
856
+ defaultVariants: { variant: "default" }
857
+ })
1091
858
  };
1092
859
 
1093
- // src/components/Tabs.styles.ts
1094
- var import_system38 = require("@marigold/system");
1095
- var Tabs = {
1096
- container: (0, import_system38.cva)("flex flex-col gap-2"),
1097
- tabsList: (0, import_system38.cva)([
1098
- "text-muted-foreground",
1099
- "flex items-center p-0.5 h-auto gap-2 border-b border-border px-0 py-1"
1100
- ]),
1101
- tab: (0, import_system38.cva)([
1102
- "relative inline-flex items-center justify-center gap-1 rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors",
1103
- "[&_svg]:shrink-0",
1104
- "focus-visible:util-focus-ring outline-none",
1105
- "hover:bg-hover hover:text-foreground",
1106
- "disabled:pointer-events-none disabled:opacity-50",
1107
- "data-selected:text-foreground data-selected:hover:bg-hover",
1108
- "data-[selected=true]:after:bg-foreground after:absolute after:inset-x-0 after:bottom-0 after:-mb-1 after:h-0.5"
1109
- ]),
1110
- tabpanel: (0, import_system38.cva)([
1111
- "py-4 rounded-sm",
1112
- "focus-visible:util-focus-ring outline-none"
1113
- ])
860
+ //#endregion
861
+ //#region src/components/Tabs.styles.ts
862
+ const Tabs = {
863
+ container: (0, __marigold_system.cva)("flex flex-col gap-2"),
864
+ tabsList: (0, __marigold_system.cva)(["text-muted-foreground", "flex items-center p-0.5 h-auto gap-2 border-b border-border px-0 py-1"]),
865
+ tab: (0, __marigold_system.cva)([
866
+ "relative inline-flex items-center justify-center gap-1 rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors",
867
+ "[&_svg]:shrink-0",
868
+ "focus-visible:util-focus-ring outline-none",
869
+ "hover:bg-hover hover:text-foreground",
870
+ "disabled:pointer-events-none disabled:opacity-50",
871
+ "data-selected:text-foreground data-selected:hover:bg-hover",
872
+ "data-[selected=true]:after:bg-foreground after:absolute after:inset-x-0 after:bottom-0 after:-mb-1 after:h-0.5"
873
+ ]),
874
+ tabpanel: (0, __marigold_system.cva)(["py-4 rounded-sm", "focus-visible:util-focus-ring outline-none"])
1114
875
  };
1115
876
 
1116
- // src/components/Tag.styles.ts
1117
- var import_system39 = require("@marigold/system");
1118
- var Tag = {
1119
- container: (0, import_system39.cva)([
1120
- "flex gap-3",
1121
- // prevent layout jumps when a smaller empty state is shown (min height is set to height of tags)
1122
- "min-h-7"
1123
- ]),
1124
- tag: (0, import_system39.cva)([
1125
- "relative inline-flex items-center gap-[7px]",
1126
- "border border-solid border-input rounded-lg",
1127
- "font-medium text-xs",
1128
- "h-7 px-2 cursor-default",
1129
- "bg-background",
1130
- "data-selected:text-white data-selected:bg-brand",
1131
- "data-[disabled]:cursor-not-allowed data-[disabled]:text-disabled-foreground data-[disabled]:bg-disabled",
1132
- "focus-visible:util-focus-ring outline-none"
1133
- ]),
1134
- closeButton: (0, import_system39.cva)([
1135
- "size-4",
1136
- "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed"
1137
- ]),
1138
- listItems: (0, import_system39.cva)([
1139
- "flex flex-wrap gap-1",
1140
- // mb-0 prevents whitespace when the hidden field is rendered
1141
- "mb-0"
1142
- ]),
1143
- removeAll: (0, import_system39.cva)([
1144
- "inline whitespace-nowrap font-medium transition-[color,box-shadow,transform]",
1145
- "duration-150 active:scale-[0.98] pressed:scale-[0.98]",
1146
- "focus-visible:util-focus-ring outline-none",
1147
- "cursor-pointer",
1148
- "text-link text-xs util-touch-hitbox"
1149
- ])
877
+ //#endregion
878
+ //#region src/components/Tag.styles.ts
879
+ const Tag = {
880
+ container: (0, __marigold_system.cva)(["flex gap-3", "min-h-7"]),
881
+ tag: (0, __marigold_system.cva)([
882
+ "relative inline-flex items-center gap-[7px]",
883
+ "border border-solid border-input rounded-lg",
884
+ "font-medium text-xs",
885
+ "h-7 px-2 cursor-default",
886
+ "bg-background",
887
+ "data-selected:text-white data-selected:bg-brand",
888
+ "data-[disabled]:cursor-not-allowed data-[disabled]:text-disabled-foreground data-[disabled]:bg-disabled",
889
+ "focus-visible:util-focus-ring outline-none"
890
+ ]),
891
+ closeButton: (0, __marigold_system.cva)(["size-4", "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed"]),
892
+ listItems: (0, __marigold_system.cva)(["flex flex-wrap gap-1", "mb-0"]),
893
+ removeAll: (0, __marigold_system.cva)([
894
+ "inline whitespace-nowrap font-medium transition-[color,box-shadow,transform]",
895
+ "duration-150 active:scale-[0.98] pressed:scale-[0.98]",
896
+ "focus-visible:util-focus-ring outline-none",
897
+ "cursor-pointer",
898
+ "text-link text-xs util-touch-hitbox"
899
+ ])
1150
900
  };
1151
901
 
1152
- // src/components/TextArea.styles.ts
1153
- var import_system40 = require("@marigold/system");
1154
- var TextArea = (0, import_system40.cva)([
1155
- inputContainer,
1156
- inputInvalid,
1157
- "focus:util-focus-ring outline-none",
1158
- inputDisabled,
1159
- inputReadOnly,
1160
- "invalid:text-destructive"
902
+ //#endregion
903
+ //#region src/components/TextArea.styles.ts
904
+ const TextArea = (0, __marigold_system.cva)([
905
+ inputContainer,
906
+ inputInvalid,
907
+ "focus:util-focus-ring outline-none",
908
+ inputDisabled,
909
+ inputReadOnly,
910
+ "invalid:text-destructive"
1161
911
  ]);
1162
912
 
1163
- // src/components/Text.styles.ts
1164
- var import_system41 = require("@marigold/system");
1165
- var Text = (0, import_system41.cva)("", {
1166
- variants: {
1167
- variant: {
1168
- default: "",
1169
- muted: "text-muted-foreground"
1170
- },
1171
- size: {
1172
- // Adding a default here, which beasically acts as an inherit
1173
- default: "",
1174
- xs: "text-xs",
1175
- sm: "text-sm",
1176
- base: "text-base",
1177
- lg: "text-lg",
1178
- xl: "text-xl",
1179
- "2xl": "text-2xl",
1180
- "3xl": "text-3xl",
1181
- "4xl": "text-4xl",
1182
- "5xl": "text-5xl",
1183
- "6xl": "text-6xl",
1184
- "7xl": "text-7xl",
1185
- "8xl": "text-8xl",
1186
- "9xl": "text-9xl"
1187
- }
1188
- },
1189
- defaultVariants: {
1190
- variant: "default",
1191
- size: "default"
1192
- }
913
+ //#endregion
914
+ //#region src/components/Text.styles.ts
915
+ const Text = (0, __marigold_system.cva)("", {
916
+ variants: {
917
+ variant: {
918
+ default: "",
919
+ muted: "text-muted-foreground"
920
+ },
921
+ size: {
922
+ default: "",
923
+ xs: "text-xs",
924
+ sm: "text-sm",
925
+ base: "text-base",
926
+ lg: "text-lg",
927
+ xl: "text-xl",
928
+ "2xl": "text-2xl",
929
+ "3xl": "text-3xl",
930
+ "4xl": "text-4xl",
931
+ "5xl": "text-5xl",
932
+ "6xl": "text-6xl",
933
+ "7xl": "text-7xl",
934
+ "8xl": "text-8xl",
935
+ "9xl": "text-9xl"
936
+ }
937
+ },
938
+ defaultVariants: {
939
+ variant: "default",
940
+ size: "default"
941
+ }
1193
942
  });
1194
943
 
1195
- // src/components/Toast.styles.ts
1196
- var import_system42 = require("@marigold/system");
1197
- var Toast = {
1198
- toast: (0, import_system42.cva)([
1199
- "z-50",
1200
- "max-w-sm w-full pointer-events-auto overflow-hidden rounded-md border shadow-lg bg-background text-foreground border-border",
1201
- "grid grid-cols-[auto_1fr_auto] grid-rows-[auto_auto] gap-x-1 gap-y-0",
1202
- '[grid-template-areas:"icon_title_close""icon_description_description"] focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
1203
- "p-4"
1204
- ]),
1205
- title: (0, import_system42.cva)([
1206
- "text-sm font-medium",
1207
- "[grid-area:title]",
1208
- "flex items-center mb-0"
1209
- ]),
1210
- description: (0, import_system42.cva)([
1211
- "text-muted-foreground text-sm",
1212
- "[grid-area:description] mt-0"
1213
- ]),
1214
- closeButton: (0, import_system42.cva)([
1215
- "[grid-area:close] row-end-1",
1216
- "ml-2",
1217
- "flex items-center justify-center",
1218
- "size-5 rounded transition-[color,box-shadow] outline-none",
1219
- "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] text-muted-foreground hover:text-hover-foreground"
1220
- ]),
1221
- icon: (0, import_system42.cva)(
1222
- [
1223
- "[grid-area:icon]",
1224
- "flex items-center justify-center",
1225
- "h-5 w-5 leading-none"
1226
- ],
1227
- {
1228
- variants: {
1229
- variant: {
1230
- default: "",
1231
- success: "text-success-muted-accent",
1232
- warning: "text-warning-muted-accent",
1233
- info: "text-info-muted-accent",
1234
- error: "text-destructive-muted-accent"
1235
- }
1236
- },
1237
- defaultVariants: {
1238
- variant: "default"
1239
- }
1240
- }
1241
- ),
1242
- content: (0, import_system42.cva)(["contents"]),
1243
- "bottom-left": (0, import_system42.cva)(["fixed bottom-4 left-4 flex flex-col-reverse"]),
1244
- "bottom-right": (0, import_system42.cva)(["fixed bottom-4 right-4 flex flex-col-reverse"]),
1245
- "top-left": (0, import_system42.cva)(["fixed top-4 left-4 flex flex-col"]),
1246
- "top-right": (0, import_system42.cva)(["fixed top-4 right-4 flex flex-col"]),
1247
- top: (0, import_system42.cva)([
1248
- "fixed top-4 left-1/2 right-auto -translate-x-1/2 flex flex-col items-center w-auto align-middle"
1249
- ]),
1250
- bottom: (0, import_system42.cva)([
1251
- "fixed bottom-4 left-1/2 right-auto -translate-x-1/2 flex flex-col-reverse items-center w-auto align-middle"
1252
- ])
944
+ //#endregion
945
+ //#region src/components/Toast.styles.ts
946
+ const Toast = {
947
+ toast: (0, __marigold_system.cva)([
948
+ "z-50",
949
+ "max-w-sm w-full pointer-events-auto overflow-hidden rounded-md border shadow-lg bg-background text-foreground border-border",
950
+ "grid grid-cols-[auto_1fr_auto_auto] grid-rows-[auto_auto] gap-x-1 gap-y-0",
951
+ "[grid-template-areas:\"icon_title_action_close\"\"icon_description_action_close\"] focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
952
+ "p-4"
953
+ ]),
954
+ title: (0, __marigold_system.cva)([
955
+ "text-sm font-medium",
956
+ "[grid-area:title]",
957
+ "flex items-center mb-0"
958
+ ]),
959
+ description: (0, __marigold_system.cva)(["text-muted-foreground text-sm", "[grid-area:description] mt-0"]),
960
+ closeButton: (0, __marigold_system.cva)([
961
+ "[grid-area:close] row-end-1",
962
+ "ml-2",
963
+ "flex items-center justify-center",
964
+ "size-5 rounded transition-[color,box-shadow] outline-none",
965
+ "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] text-muted-foreground hover:text-hover-foreground"
966
+ ]),
967
+ icon: (0, __marigold_system.cva)([
968
+ "[grid-area:icon]",
969
+ "flex items-center justify-center",
970
+ "h-5 w-5 leading-none"
971
+ ], {
972
+ variants: { variant: {
973
+ default: "",
974
+ success: "text-success-muted-accent",
975
+ warning: "text-warning-muted-accent",
976
+ info: "text-info-muted-accent",
977
+ error: "text-destructive-muted-accent"
978
+ } },
979
+ defaultVariants: { variant: "default" }
980
+ }),
981
+ content: (0, __marigold_system.cva)(["contents"]),
982
+ "bottom-left": (0, __marigold_system.cva)(["fixed bottom-4 left-4 flex flex-col-reverse"]),
983
+ "bottom-right": (0, __marigold_system.cva)(["fixed bottom-4 right-4 flex flex-col-reverse"]),
984
+ "top-left": (0, __marigold_system.cva)(["fixed top-4 left-4 flex flex-col"]),
985
+ "top-right": (0, __marigold_system.cva)(["fixed top-4 right-4 flex flex-col"]),
986
+ top: (0, __marigold_system.cva)(["fixed top-4 left-1/2 right-auto -translate-x-1/2 flex flex-col items-center w-auto align-middle"]),
987
+ bottom: (0, __marigold_system.cva)(["fixed bottom-4 left-1/2 right-auto -translate-x-1/2 flex flex-col-reverse items-center w-auto align-middle"]),
988
+ action: (0, __marigold_system.cva)(["[grid-area:action] flex items-start pl-4"])
1253
989
  };
1254
990
 
1255
- // src/components/Tooltip.styles.ts
1256
- var import_system43 = require("@marigold/system");
1257
- var Tooltip = {
1258
- container: (0, import_system43.cva)(
1259
- [
1260
- "relative z-50 max-w-70 rounded-md border px-3 py-1.5 text-sm",
1261
- "placement-top:mb-2",
1262
- "placement-bottom:mt-2",
1263
- "placement-right:ml-2",
1264
- "placement-left:mr-2"
1265
- ],
1266
- {
1267
- variants: {
1268
- variant: {
1269
- default: "text-brand-foreground bg-brand border-brand",
1270
- white: "text-secondary-foreground border-border bg-white"
1271
- }
1272
- },
1273
- defaultVariants: {
1274
- variant: "default"
1275
- }
1276
- }
1277
- ),
1278
- arrow: (0, import_system43.cva)(
1279
- [
1280
- // right
1281
- "data-[placement=right]:[&_svg]:rotate-90",
1282
- // left
1283
- "data-[placement=left]:[&_svg]:-rotate-90",
1284
- // bottom
1285
- "data-[placement=bottom]:[&_svg]:rotate-180"
1286
- ],
1287
- {
1288
- variants: {
1289
- variant: {
1290
- default: "fill-brand stroke-brand",
1291
- white: "fill-white stroke-border "
1292
- }
1293
- },
1294
- defaultVariants: {
1295
- variant: "default"
1296
- }
1297
- }
1298
- )
991
+ //#endregion
992
+ //#region src/components/Tooltip.styles.ts
993
+ const Tooltip = {
994
+ container: (0, __marigold_system.cva)([
995
+ "relative z-50 max-w-70 rounded-md border px-3 py-1.5 text-sm",
996
+ "placement-top:mb-2",
997
+ "placement-bottom:mt-2",
998
+ "placement-right:ml-2",
999
+ "placement-left:mr-2"
1000
+ ], {
1001
+ variants: { variant: {
1002
+ default: "text-brand-foreground bg-brand border-brand",
1003
+ white: "text-secondary-foreground border-border bg-white"
1004
+ } },
1005
+ defaultVariants: { variant: "default" }
1006
+ }),
1007
+ arrow: (0, __marigold_system.cva)([
1008
+ "data-[placement=right]:[&_svg]:rotate-90",
1009
+ "data-[placement=left]:[&_svg]:-rotate-90",
1010
+ "data-[placement=bottom]:[&_svg]:rotate-180"
1011
+ ], {
1012
+ variants: { variant: {
1013
+ default: "fill-brand stroke-brand",
1014
+ white: "fill-white stroke-border "
1015
+ } },
1016
+ defaultVariants: { variant: "default" }
1017
+ })
1299
1018
  };
1300
1019
 
1301
- // src/components/Underlay.styles.ts
1302
- var import_system44 = require("@marigold/system");
1303
- var Underlay = (0, import_system44.cva)("bg-black/80 px-4");
1020
+ //#endregion
1021
+ //#region src/components/Underlay.styles.ts
1022
+ const Underlay = (0, __marigold_system.cva)("bg-black/80 px-4");
1304
1023
 
1305
- // src/components/XLoader.styles.ts
1306
- var import_system45 = require("@marigold/system");
1307
- var XLoader = {
1308
- container: (0, import_system45.cva)("grid place-items-center text-brand", {
1309
- variants: {
1310
- variant: {
1311
- default: "",
1312
- inverted: "text-secondary"
1313
- },
1314
- size: {
1315
- default: "size-20",
1316
- large: "size-36",
1317
- fit: "size-full"
1318
- }
1319
- },
1320
- defaultVariants: {
1321
- variant: "default",
1322
- size: "default"
1323
- }
1324
- }),
1325
- loader: (0, import_system45.cva)("size-full", {
1326
- variants: {
1327
- variant: {
1328
- default: "",
1329
- inverted: ""
1330
- },
1331
- size: {
1332
- default: "",
1333
- large: "",
1334
- fit: ""
1335
- }
1336
- },
1337
- defaultVariants: {
1338
- variant: "default",
1339
- size: "default"
1340
- }
1341
- }),
1342
- label: (0, import_system45.cva)("text-current text-sm")
1024
+ //#endregion
1025
+ //#region src/components/XLoader.styles.ts
1026
+ const XLoader = {
1027
+ container: (0, __marigold_system.cva)("grid place-items-center text-brand", {
1028
+ variants: {
1029
+ variant: {
1030
+ default: "",
1031
+ inverted: "text-secondary"
1032
+ },
1033
+ size: {
1034
+ default: "size-20",
1035
+ large: "size-36",
1036
+ fit: "size-full"
1037
+ }
1038
+ },
1039
+ defaultVariants: {
1040
+ variant: "default",
1041
+ size: "default"
1042
+ }
1043
+ }),
1044
+ loader: (0, __marigold_system.cva)("size-full", {
1045
+ variants: {
1046
+ variant: {
1047
+ default: "",
1048
+ inverted: ""
1049
+ },
1050
+ size: {
1051
+ default: "",
1052
+ large: "",
1053
+ fit: ""
1054
+ }
1055
+ },
1056
+ defaultVariants: {
1057
+ variant: "default",
1058
+ size: "default"
1059
+ }
1060
+ }),
1061
+ label: (0, __marigold_system.cva)("text-current text-sm")
1343
1062
  };
1344
1063
 
1345
- // src/components/Breadcrumbs.styles.ts
1346
- var import_system46 = require("@marigold/system");
1347
- var Breadcrumbs = {
1348
- container: (0, import_system46.cva)(["flex flex-wrap items-center"], {
1349
- variants: {
1350
- variant: {
1351
- default: "text-foreground"
1352
- },
1353
- size: {
1354
- small: "text-xs gap-1.5",
1355
- default: "text-sm gap-1.5",
1356
- large: "text-base gap-1.5"
1357
- }
1358
- },
1359
- defaultVariants: {
1360
- variant: "default",
1361
- size: "default"
1362
- }
1363
- }),
1364
- item: (0, import_system46.cva)("inline-flex items-center gap-1.5 whitespace-nowrap "),
1365
- link: (0, import_system46.cva)("hover:underline cursor-pointer"),
1366
- current: (0, import_system46.cva)("font-medium")
1064
+ //#endregion
1065
+ //#region src/components/Breadcrumbs.styles.ts
1066
+ const Breadcrumbs = {
1067
+ container: (0, __marigold_system.cva)(["flex flex-wrap items-center"], {
1068
+ variants: {
1069
+ variant: { default: "text-foreground" },
1070
+ size: {
1071
+ small: "text-xs gap-1.5",
1072
+ default: "text-sm gap-1.5",
1073
+ large: "text-base gap-1.5"
1074
+ }
1075
+ },
1076
+ defaultVariants: {
1077
+ variant: "default",
1078
+ size: "default"
1079
+ }
1080
+ }),
1081
+ item: (0, __marigold_system.cva)("inline-flex items-center gap-1.5 whitespace-nowrap "),
1082
+ link: (0, __marigold_system.cva)("hover:underline cursor-pointer"),
1083
+ current: (0, __marigold_system.cva)("font-medium")
1367
1084
  };
1368
1085
 
1369
- // src/theme.ts
1370
- var theme = {
1371
- name: "rui",
1372
- components: components_exports
1086
+ //#endregion
1087
+ //#region src/components/index.ts
1088
+ var components_exports = /* @__PURE__ */ __export({
1089
+ Accordion: () => Accordion,
1090
+ Badge: () => Badge,
1091
+ Breadcrumbs: () => Breadcrumbs,
1092
+ Button: () => Button,
1093
+ Calendar: () => Calendar,
1094
+ Card: () => Card,
1095
+ Checkbox: () => Checkbox,
1096
+ CloseButton: () => CloseButton,
1097
+ Collapsible: () => Collapsible,
1098
+ ComboBox: () => ComboBox,
1099
+ ContextualHelp: () => ContextualHelp,
1100
+ DateField: () => DateField,
1101
+ DatePicker: () => DatePicker,
1102
+ Dialog: () => Dialog,
1103
+ Divider: () => Divider,
1104
+ Drawer: () => Drawer,
1105
+ Field: () => Field,
1106
+ Headline: () => Headline,
1107
+ HelpText: () => HelpText,
1108
+ IconButton: () => IconButton,
1109
+ Input: () => Input,
1110
+ Label: () => Label,
1111
+ Link: () => Link,
1112
+ List: () => List,
1113
+ ListBox: () => ListBox,
1114
+ Menu: () => Menu,
1115
+ Modal: () => Modal,
1116
+ MultiSelect: () => MultiSelect,
1117
+ NumberField: () => NumberField,
1118
+ Pagination: () => Pagination,
1119
+ Popover: () => Popover,
1120
+ ProgressCycle: () => ProgressCycle,
1121
+ Radio: () => Radio,
1122
+ SectionMessage: () => SectionMessage,
1123
+ Select: () => Select,
1124
+ Slider: () => Slider,
1125
+ Switch: () => Switch,
1126
+ Table: () => Table,
1127
+ Tabs: () => Tabs,
1128
+ Tag: () => Tag,
1129
+ Text: () => Text,
1130
+ TextArea: () => TextArea,
1131
+ Toast: () => Toast,
1132
+ Tooltip: () => Tooltip,
1133
+ Underlay: () => Underlay,
1134
+ XLoader: () => XLoader
1135
+ });
1136
+
1137
+ //#endregion
1138
+ //#region src/theme.ts
1139
+ const theme = {
1140
+ name: "rui",
1141
+ components: components_exports
1373
1142
  };
1374
1143
 
1375
- // src/index.ts
1376
- var index_default = theme;
1377
- // Annotate the CommonJS export names for ESM import in node:
1378
- 0 && (module.exports = {
1379
- theme
1380
- });
1144
+ //#endregion
1145
+ //#region src/index.ts
1146
+ var src_default = theme;
1147
+
1148
+ //#endregion
1149
+ exports.default = src_default;
1150
+ exports.theme = theme;
1381
1151
  //# sourceMappingURL=index.js.map