@mond-design-system/react 1.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs ADDED
@@ -0,0 +1,1306 @@
1
+ 'use strict';
2
+
3
+ var react = require('react');
4
+ var jsxRuntime = require('react/jsx-runtime');
5
+ var reactDom = require('react-dom');
6
+
7
+ // src/internal/cx.ts
8
+ function cx(...parts) {
9
+ return parts.filter(Boolean).join(" ");
10
+ }
11
+
12
+ // src/components/Text/Text.module.css
13
+ var Text_default = {
14
+ text: "Text_text",
15
+ "variant-body": "Text_variant-body",
16
+ "variant-label": "Text_variant-label",
17
+ "variant-note": "Text_variant-note",
18
+ "variant-meta": "Text_variant-meta",
19
+ "variant-eyebrow": "Text_variant-eyebrow",
20
+ "tone-primary": "Text_tone-primary",
21
+ "tone-secondary": "Text_tone-secondary",
22
+ "tone-muted": "Text_tone-muted",
23
+ "tone-inverse": "Text_tone-inverse",
24
+ "tone-accent": "Text_tone-accent",
25
+ "tone-on-media": "Text_tone-on-media",
26
+ "tone-danger": "Text_tone-danger",
27
+ "tone-warning": "Text_tone-warning",
28
+ "tone-success": "Text_tone-success",
29
+ "align-left": "Text_align-left",
30
+ "align-center": "Text_align-center",
31
+ "align-right": "Text_align-right",
32
+ truncate: "Text_truncate"
33
+ };
34
+
35
+ // src/components/Text/Text.tsx
36
+ var ELEMENT = {
37
+ body: "p",
38
+ label: "span",
39
+ note: "p",
40
+ meta: "span",
41
+ eyebrow: "span"
42
+ };
43
+ var DEFAULT_TONE = {
44
+ note: "secondary",
45
+ meta: "muted",
46
+ eyebrow: "muted"
47
+ };
48
+ function Text({
49
+ variant = "body",
50
+ as,
51
+ tone,
52
+ align,
53
+ truncate = false,
54
+ className,
55
+ ...rest
56
+ }) {
57
+ const element = as ?? ELEMENT[variant];
58
+ const resolvedTone = tone ?? DEFAULT_TONE[variant] ?? "primary";
59
+ return react.createElement(element, {
60
+ className: cx(
61
+ Text_default.text,
62
+ Text_default[`variant-${variant}`],
63
+ Text_default[`tone-${resolvedTone}`],
64
+ align && Text_default[`align-${align}`],
65
+ truncate && Text_default.truncate,
66
+ className
67
+ ),
68
+ ...rest
69
+ });
70
+ }
71
+
72
+ // src/components/Heading/Heading.module.css
73
+ var Heading_default = {
74
+ heading: "Heading_heading",
75
+ "variant-display": "Heading_variant-display",
76
+ "variant-title": "Heading_variant-title",
77
+ "variant-subtitle": "Heading_variant-subtitle",
78
+ "tone-primary": "Heading_tone-primary",
79
+ "tone-secondary": "Heading_tone-secondary",
80
+ "tone-inverse": "Heading_tone-inverse",
81
+ "tone-accent": "Heading_tone-accent",
82
+ "tone-on-media": "Heading_tone-on-media"
83
+ };
84
+
85
+ // src/components/Heading/Heading.tsx
86
+ var LEVEL_VARIANT = {
87
+ 1: "display",
88
+ 2: "title",
89
+ 3: "subtitle",
90
+ 4: "subtitle"
91
+ };
92
+ function Heading({
93
+ level = 2,
94
+ variant,
95
+ tone = "primary",
96
+ className,
97
+ ...rest
98
+ }) {
99
+ return react.createElement(`h${level}`, {
100
+ className: cx(
101
+ Heading_default.heading,
102
+ Heading_default[`variant-${variant ?? LEVEL_VARIANT[level]}`],
103
+ Heading_default[`tone-${tone}`],
104
+ className
105
+ ),
106
+ ...rest
107
+ });
108
+ }
109
+
110
+ // src/components/Spinner/Spinner.module.css
111
+ var Spinner_default = {
112
+ spinner: "Spinner_spinner"
113
+ };
114
+ function Spinner({
115
+ size = 20,
116
+ label = "Loading",
117
+ className,
118
+ style,
119
+ ...rest
120
+ }) {
121
+ const vars = {
122
+ "--spinner-size": `${size}px`,
123
+ "--spinner-border": `${Math.max(2, Math.round(size / 10))}px`
124
+ };
125
+ return /* @__PURE__ */ jsxRuntime.jsx(
126
+ "span",
127
+ {
128
+ role: "status",
129
+ "aria-label": label,
130
+ className: cx(Spinner_default.spinner, className),
131
+ style: { ...vars, ...style },
132
+ ...rest
133
+ }
134
+ );
135
+ }
136
+
137
+ // src/components/Icon/Icon.module.css
138
+ var Icon_default = {
139
+ icon: "Icon_icon",
140
+ "size-sm": "Icon_size-sm",
141
+ "size-md": "Icon_size-md",
142
+ "size-lg": "Icon_size-lg"
143
+ };
144
+ var IconContext = react.createContext(null);
145
+ function IconProvider({ render, children }) {
146
+ return /* @__PURE__ */ jsxRuntime.jsx(IconContext.Provider, { value: render, children });
147
+ }
148
+ var SIZE_PX = { sm: 16, md: 20, lg: 24 };
149
+ var warned = /* @__PURE__ */ new Set();
150
+ function Icon({ name, size = "md", label, className, ...rest }) {
151
+ const render = react.useContext(IconContext);
152
+ if (render === null && !warned.has(name)) {
153
+ warned.add(name);
154
+ console.error(
155
+ `Icon "${name}": no IconProvider above this tree. Register the app's icon set once at the root.`
156
+ );
157
+ }
158
+ return /* @__PURE__ */ jsxRuntime.jsx(
159
+ "span",
160
+ {
161
+ className: cx(Icon_default.icon, Icon_default[`size-${size}`], className),
162
+ ...label ? { role: "img", "aria-label": label } : { "aria-hidden": true },
163
+ ...rest,
164
+ children: render?.(name, { size: SIZE_PX[size] })
165
+ }
166
+ );
167
+ }
168
+
169
+ // src/components/Button/Button.module.css
170
+ var Button_default = {
171
+ button: "Button_button",
172
+ "size-sm": "Button_size-sm",
173
+ "size-md": "Button_size-md",
174
+ "size-lg": "Button_size-lg",
175
+ "variant-primary": "Button_variant-primary",
176
+ "variant-secondary": "Button_variant-secondary",
177
+ "variant-ghost": "Button_variant-ghost",
178
+ "variant-danger": "Button_variant-danger",
179
+ fullWidth: "Button_fullWidth",
180
+ "icon-only": "Button_icon-only"
181
+ };
182
+ var SPINNER_PX = { sm: 16, md: 18, lg: 20 };
183
+ function Button({
184
+ variant = "primary",
185
+ size = "md",
186
+ iconLeft,
187
+ iconRight,
188
+ loading = false,
189
+ disabled = false,
190
+ fullWidth = false,
191
+ iconOnly = false,
192
+ type = "button",
193
+ href,
194
+ as,
195
+ className,
196
+ children,
197
+ ...rest
198
+ }) {
199
+ const Element = as ?? (href !== void 0 ? "a" : "button");
200
+ const isButton = Element === "button";
201
+ const own = isButton ? { type, disabled: disabled || loading } : { href };
202
+ return /* @__PURE__ */ jsxRuntime.jsxs(
203
+ Element,
204
+ {
205
+ className: cx(
206
+ Button_default.button,
207
+ Button_default[`variant-${variant}`],
208
+ Button_default[`size-${size}`],
209
+ fullWidth && Button_default.fullWidth,
210
+ iconOnly && Button_default["icon-only"],
211
+ className
212
+ ),
213
+ "aria-busy": loading || void 0,
214
+ ...own,
215
+ ...rest,
216
+ children: [
217
+ loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: SPINNER_PX[size] }) : iconLeft,
218
+ children,
219
+ !loading && iconRight
220
+ ]
221
+ }
222
+ );
223
+ }
224
+
225
+ // src/components/Link/Link.module.css
226
+ var Link_default = {
227
+ link: "Link_link",
228
+ "variant-inline": "Link_variant-inline",
229
+ "variant-standalone": "Link_variant-standalone"
230
+ };
231
+ function Link({
232
+ variant = "inline",
233
+ external = false,
234
+ as: Element = "a",
235
+ className,
236
+ ...rest
237
+ }) {
238
+ const externalProps = external ? { target: "_blank", rel: "noopener noreferrer" } : {};
239
+ return /* @__PURE__ */ jsxRuntime.jsx(
240
+ Element,
241
+ {
242
+ className: cx(Link_default.link, Link_default[`variant-${variant}`], className),
243
+ ...externalProps,
244
+ ...rest
245
+ }
246
+ );
247
+ }
248
+
249
+ // src/components/Avatar/Avatar.module.css
250
+ var Avatar_default = {
251
+ avatar: "Avatar_avatar",
252
+ "size-sm": "Avatar_size-sm",
253
+ "size-md": "Avatar_size-md",
254
+ "size-lg": "Avatar_size-lg",
255
+ image: "Avatar_image",
256
+ initials: "Avatar_initials"
257
+ };
258
+ function initials(name) {
259
+ const words = name.trim().split(/\s+/).filter(Boolean);
260
+ const first = words[0]?.[0] ?? "";
261
+ const last = words.length > 1 ? words.at(-1)?.[0] ?? "" : "";
262
+ return (first + last).toUpperCase();
263
+ }
264
+ function Avatar({ name, src, size = "md", className, ...rest }) {
265
+ return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(Avatar_default.avatar, Avatar_default[`size-${size}`], className), ...rest, children: src ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: Avatar_default.image, src, alt: name }) : /* @__PURE__ */ jsxRuntime.jsx("span", { role: "img", "aria-label": name, className: Avatar_default.initials, children: initials(name) }) });
266
+ }
267
+
268
+ // src/components/AvatarGroup/AvatarGroup.module.css
269
+ var AvatarGroup_default = {
270
+ group: "AvatarGroup_group",
271
+ item: "AvatarGroup_item",
272
+ overflow: "AvatarGroup_overflow",
273
+ "size-sm": "AvatarGroup_size-sm",
274
+ "size-md": "AvatarGroup_size-md",
275
+ "size-lg": "AvatarGroup_size-lg"
276
+ };
277
+ function AvatarGroup({
278
+ children,
279
+ max = 4,
280
+ size = "md",
281
+ className,
282
+ ...rest
283
+ }) {
284
+ const all = react.Children.toArray(children);
285
+ const visible = all.slice(0, max);
286
+ const hidden = all.length - visible.length;
287
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(AvatarGroup_default.group, className), ...rest, children: [
288
+ visible.map((child, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: AvatarGroup_default.item, children: child }, i)),
289
+ hidden > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
290
+ "span",
291
+ {
292
+ className: cx(AvatarGroup_default.item, AvatarGroup_default.overflow, AvatarGroup_default[`size-${size}`]),
293
+ "aria-label": `${hidden} more`,
294
+ children: [
295
+ "+",
296
+ hidden
297
+ ]
298
+ }
299
+ )
300
+ ] });
301
+ }
302
+
303
+ // src/components/Badge/Badge.module.css
304
+ var Badge_default = {
305
+ badge: "Badge_badge",
306
+ "tone-neutral": "Badge_tone-neutral",
307
+ "tone-accent": "Badge_tone-accent",
308
+ "tone-danger": "Badge_tone-danger",
309
+ "tone-warning": "Badge_tone-warning",
310
+ "tone-success": "Badge_tone-success"
311
+ };
312
+ function Badge({ tone = "neutral", className, ...rest }) {
313
+ return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(Badge_default.badge, Badge_default[`tone-${tone}`], className), ...rest });
314
+ }
315
+
316
+ // src/components/Tag/Tag.module.css
317
+ var Tag_default = {
318
+ tag: "Tag_tag",
319
+ "tone-accent": "Tag_tone-accent",
320
+ remove: "Tag_remove",
321
+ removeGlyph: "Tag_removeGlyph"
322
+ };
323
+ function Tag({ children, tone = "neutral", onRemove, className, ...rest }) {
324
+ const text = typeof children === "string" ? children : void 0;
325
+ return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx(Tag_default.tag, Tag_default[`tone-${tone}`], className), ...rest, children: [
326
+ children,
327
+ onRemove && /* @__PURE__ */ jsxRuntime.jsx(
328
+ "button",
329
+ {
330
+ type: "button",
331
+ className: Tag_default.remove,
332
+ "aria-label": text ? `Remove ${text}` : "Remove",
333
+ onClick: onRemove,
334
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: Tag_default.removeGlyph, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
335
+ }
336
+ )
337
+ ] });
338
+ }
339
+
340
+ // src/components/Divider/Divider.module.css
341
+ var Divider_default = {
342
+ divider: "Divider_divider",
343
+ horizontal: "Divider_horizontal",
344
+ vertical: "Divider_vertical"
345
+ };
346
+ function Divider({ orientation = "horizontal", className, ...rest }) {
347
+ return /* @__PURE__ */ jsxRuntime.jsx(
348
+ "div",
349
+ {
350
+ role: "separator",
351
+ "aria-orientation": orientation === "vertical" ? "vertical" : void 0,
352
+ className: cx(Divider_default.divider, Divider_default[orientation], className),
353
+ ...rest
354
+ }
355
+ );
356
+ }
357
+
358
+ // src/components/Skeleton/Skeleton.module.css
359
+ var Skeleton_default = {
360
+ skeleton: "Skeleton_skeleton",
361
+ pulse: "Skeleton_pulse",
362
+ "variant-text": "Skeleton_variant-text",
363
+ "variant-rect": "Skeleton_variant-rect",
364
+ "variant-circle": "Skeleton_variant-circle"
365
+ };
366
+ function Skeleton({
367
+ variant = "text",
368
+ width,
369
+ height,
370
+ className,
371
+ style,
372
+ ...rest
373
+ }) {
374
+ const vars = {
375
+ ...width ? { "--skeleton-w": width } : {},
376
+ ...height ? { "--skeleton-h": height } : {}
377
+ };
378
+ return /* @__PURE__ */ jsxRuntime.jsx(
379
+ "span",
380
+ {
381
+ "aria-hidden": "true",
382
+ className: cx(Skeleton_default.skeleton, Skeleton_default[`variant-${variant}`], className),
383
+ style: { ...vars, ...style },
384
+ ...rest
385
+ }
386
+ );
387
+ }
388
+
389
+ // src/components/ProgressBar/ProgressBar.module.css
390
+ var ProgressBar_default = {
391
+ track: "ProgressBar_track",
392
+ fill: "ProgressBar_fill",
393
+ indeterminate: "ProgressBar_indeterminate"};
394
+ function ProgressBar({
395
+ value = 0,
396
+ label,
397
+ indeterminate = false,
398
+ className,
399
+ style,
400
+ ...rest
401
+ }) {
402
+ const clamped = Math.min(100, Math.max(0, value));
403
+ return /* @__PURE__ */ jsxRuntime.jsx(
404
+ "div",
405
+ {
406
+ role: "progressbar",
407
+ "aria-label": label,
408
+ "aria-valuemin": 0,
409
+ "aria-valuemax": 100,
410
+ "aria-valuenow": indeterminate ? void 0 : clamped,
411
+ className: cx(ProgressBar_default.track, indeterminate && ProgressBar_default.indeterminate, className),
412
+ style: { ...{ "--progress": `${clamped}%` }, ...style },
413
+ ...rest,
414
+ children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: ProgressBar_default.fill })
415
+ }
416
+ );
417
+ }
418
+
419
+ // src/components/Field/Field.module.css
420
+ var Field_default = {
421
+ field: "Field_field",
422
+ label: "Field_label",
423
+ required: "Field_required",
424
+ message: "Field_message",
425
+ error: "Field_error"
426
+ };
427
+ var FieldContext = react.createContext(null);
428
+ function useFieldContext() {
429
+ return react.useContext(FieldContext);
430
+ }
431
+ function Field({ label, children, hint, error, required = false, className }) {
432
+ const id = react.useId();
433
+ const messageId = `${id}-message`;
434
+ const message = error ?? hint;
435
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(Field_default.field, className), children: [
436
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { className: Field_default.label, htmlFor: id, children: [
437
+ label,
438
+ required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Field_default.required, "aria-hidden": "true", children: "*" })
439
+ ] }),
440
+ /* @__PURE__ */ jsxRuntime.jsx(
441
+ FieldContext.Provider,
442
+ {
443
+ value: { id, describedBy: message ? messageId : void 0, invalid: error !== void 0 },
444
+ children
445
+ }
446
+ ),
447
+ message && /* @__PURE__ */ jsxRuntime.jsx("span", { id: messageId, className: cx(Field_default.message, error !== void 0 && Field_default.error), children: message })
448
+ ] });
449
+ }
450
+
451
+ // src/components/Input/Input.module.css
452
+ var Input_default = {
453
+ input: "Input_input",
454
+ "size-sm": "Input_size-sm",
455
+ "size-md": "Input_size-md",
456
+ "size-lg": "Input_size-lg"
457
+ };
458
+ function Input({ size = "md", className, ...rest }) {
459
+ const field = useFieldContext();
460
+ return /* @__PURE__ */ jsxRuntime.jsx(
461
+ "input",
462
+ {
463
+ id: rest.id ?? field?.id,
464
+ "aria-describedby": rest["aria-describedby"] ?? field?.describedBy,
465
+ "aria-invalid": rest["aria-invalid"] ?? (field?.invalid || void 0),
466
+ className: cx(Input_default.input, Input_default[`size-${size}`], className),
467
+ ...rest
468
+ }
469
+ );
470
+ }
471
+
472
+ // src/components/PasswordInput/PasswordInput.module.css
473
+ var PasswordInput_default = {
474
+ wrap: "PasswordInput_wrap",
475
+ input: "PasswordInput_input",
476
+ toggle: "PasswordInput_toggle"
477
+ };
478
+ function PasswordInput({ className, ...rest }) {
479
+ const [visible, setVisible] = react.useState(false);
480
+ return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: PasswordInput_default.wrap, children: [
481
+ /* @__PURE__ */ jsxRuntime.jsx(Input, { ...rest, type: visible ? "text" : "password", className: cx(PasswordInput_default.input, className) }),
482
+ /* @__PURE__ */ jsxRuntime.jsx(
483
+ "button",
484
+ {
485
+ type: "button",
486
+ className: PasswordInput_default.toggle,
487
+ "aria-label": visible ? "Hide password" : "Show password",
488
+ "aria-pressed": visible,
489
+ onClick: () => setVisible((v) => !v),
490
+ children: visible ? (
491
+ /* eye-off */
492
+ /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
493
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" }),
494
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" }),
495
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.12 14.12a3 3 0 1 1-4.24-4.24" }),
496
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
497
+ ] })
498
+ ) : (
499
+ /* eye */
500
+ /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
501
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z" }),
502
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3" })
503
+ ] })
504
+ )
505
+ }
506
+ )
507
+ ] });
508
+ }
509
+
510
+ // src/components/Textarea/Textarea.module.css
511
+ var Textarea_default = {
512
+ textarea: "Textarea_textarea",
513
+ wrap: "Textarea_wrap",
514
+ count: "Textarea_count"
515
+ };
516
+ function Textarea({ rows = 3, showCount = false, className, ...rest }) {
517
+ const field = useFieldContext();
518
+ const [tracked, setTracked] = react.useState(() => String(rest.defaultValue ?? ""));
519
+ const current = rest.value !== void 0 ? String(rest.value) : tracked;
520
+ const onChange = (event) => {
521
+ setTracked(event.target.value);
522
+ rest.onChange?.(event);
523
+ };
524
+ const textarea = /* @__PURE__ */ jsxRuntime.jsx(
525
+ "textarea",
526
+ {
527
+ id: rest.id ?? field?.id,
528
+ "aria-describedby": rest["aria-describedby"] ?? field?.describedBy,
529
+ "aria-invalid": rest["aria-invalid"] ?? (field?.invalid || void 0),
530
+ rows,
531
+ className: cx(Textarea_default.textarea, className),
532
+ ...rest,
533
+ ...showCount ? { onChange } : {}
534
+ }
535
+ );
536
+ if (!showCount) return textarea;
537
+ return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Textarea_default.wrap, children: [
538
+ textarea,
539
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: Textarea_default.count, "aria-hidden": "true", children: rest.maxLength !== void 0 ? `${current.length}/${rest.maxLength}` : current.length })
540
+ ] });
541
+ }
542
+
543
+ // src/components/Select/Select.module.css
544
+ var Select_default = {
545
+ wrap: "Select_wrap",
546
+ select: "Select_select",
547
+ "size-sm": "Select_size-sm",
548
+ "size-md": "Select_size-md",
549
+ "size-lg": "Select_size-lg",
550
+ chevron: "Select_chevron"
551
+ };
552
+ function Select({ size = "md", className, children, ...rest }) {
553
+ const field = useFieldContext();
554
+ return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Select_default.wrap, children: [
555
+ /* @__PURE__ */ jsxRuntime.jsx(
556
+ "select",
557
+ {
558
+ id: rest.id ?? field?.id,
559
+ "aria-describedby": rest["aria-describedby"] ?? field?.describedBy,
560
+ "aria-invalid": rest["aria-invalid"] ?? (field?.invalid || void 0),
561
+ className: cx(Select_default.select, Select_default[`size-${size}`], className),
562
+ ...rest,
563
+ children
564
+ }
565
+ ),
566
+ /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: Select_default.chevron, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })
567
+ ] });
568
+ }
569
+
570
+ // src/components/Checkbox/Checkbox.module.css
571
+ var Checkbox_default = {
572
+ root: "Checkbox_root",
573
+ box: "Checkbox_box",
574
+ label: "Checkbox_label"
575
+ };
576
+ function Checkbox({ label, className, ...rest }) {
577
+ return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx(Checkbox_default.root, className), children: [
578
+ /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: Checkbox_default.box, ...rest }),
579
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: Checkbox_default.label, children: label })
580
+ ] });
581
+ }
582
+
583
+ // src/components/Radio/Radio.module.css
584
+ var Radio_default = {
585
+ root: "Radio_root",
586
+ dot: "Radio_dot",
587
+ label: "Radio_label"
588
+ };
589
+ function Radio({ label, className, ...rest }) {
590
+ return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx(Radio_default.root, className), children: [
591
+ /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: Radio_default.dot, ...rest }),
592
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: Radio_default.label, children: label })
593
+ ] });
594
+ }
595
+
596
+ // src/components/Switch/Switch.module.css
597
+ var Switch_default = {
598
+ root: "Switch_root",
599
+ track: "Switch_track",
600
+ label: "Switch_label"
601
+ };
602
+ function Switch({ label, className, ...rest }) {
603
+ return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx(Switch_default.root, className), children: [
604
+ /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", role: "switch", className: Switch_default.track, ...rest }),
605
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: Switch_default.label, children: label })
606
+ ] });
607
+ }
608
+
609
+ // src/components/SegmentedControl/SegmentedControl.module.css
610
+ var SegmentedControl_default = {
611
+ group: "SegmentedControl_group",
612
+ segment: "SegmentedControl_segment",
613
+ input: "SegmentedControl_input",
614
+ face: "SegmentedControl_face"
615
+ };
616
+ function SegmentedControl({
617
+ label,
618
+ options,
619
+ value,
620
+ onChange,
621
+ className
622
+ }) {
623
+ const name = react.useId();
624
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "radiogroup", "aria-label": label, className: cx(SegmentedControl_default.group, className), children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: SegmentedControl_default.segment, children: [
625
+ /* @__PURE__ */ jsxRuntime.jsx(
626
+ "input",
627
+ {
628
+ type: "radio",
629
+ name,
630
+ value: option.value,
631
+ checked: option.value === value,
632
+ onChange: () => onChange(option.value),
633
+ className: SegmentedControl_default.input
634
+ }
635
+ ),
636
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: SegmentedControl_default.face, children: option.label })
637
+ ] }, option.value)) });
638
+ }
639
+
640
+ // src/components/SearchField/SearchField.module.css
641
+ var SearchField_default = {
642
+ wrap: "SearchField_wrap",
643
+ glass: "SearchField_glass",
644
+ input: "SearchField_input",
645
+ clear: "SearchField_clear",
646
+ clearGlyph: "SearchField_clearGlyph"
647
+ };
648
+ function SearchField({ label, value, onChange, className, ...rest }) {
649
+ return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx(SearchField_default.wrap, className), children: [
650
+ /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: SearchField_default.glass, children: /* @__PURE__ */ jsxRuntime.jsx(
651
+ "path",
652
+ {
653
+ d: "M7 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm7 2-3.5-3.5",
654
+ fill: "none",
655
+ stroke: "currentColor",
656
+ strokeWidth: "1.5",
657
+ strokeLinecap: "round"
658
+ }
659
+ ) }),
660
+ /* @__PURE__ */ jsxRuntime.jsx(
661
+ "input",
662
+ {
663
+ type: "search",
664
+ "aria-label": label,
665
+ value,
666
+ onChange: (event) => onChange(event.target.value),
667
+ className: SearchField_default.input,
668
+ ...rest
669
+ }
670
+ ),
671
+ value !== "" && /* @__PURE__ */ jsxRuntime.jsx(
672
+ "button",
673
+ {
674
+ type: "button",
675
+ "aria-label": "Clear search",
676
+ className: SearchField_default.clear,
677
+ onClick: () => onChange(""),
678
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: SearchField_default.clearGlyph, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
679
+ }
680
+ )
681
+ ] });
682
+ }
683
+
684
+ // src/components/List/List.module.css
685
+ var List_default = {
686
+ group: "List_group",
687
+ item: "List_item",
688
+ row: "List_row",
689
+ interactive: "List_interactive",
690
+ leading: "List_leading",
691
+ trailing: "List_trailing",
692
+ text: "List_text",
693
+ title: "List_title",
694
+ description: "List_description"
695
+ };
696
+ function ListGroup({ className, ...rest }) {
697
+ return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx(List_default.group, className), ...rest });
698
+ }
699
+ function ListItem({
700
+ title,
701
+ description,
702
+ leading,
703
+ trailing,
704
+ onClick,
705
+ href,
706
+ className,
707
+ ...rest
708
+ }) {
709
+ const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
710
+ leading != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_default.leading, children: leading }),
711
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: List_default.text, children: [
712
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_default.title, children: title }),
713
+ description != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_default.description, children: description })
714
+ ] }),
715
+ trailing != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_default.trailing, children: trailing })
716
+ ] });
717
+ return /* @__PURE__ */ jsxRuntime.jsx("li", { className: cx(List_default.item, className), ...rest, children: href !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("a", { className: cx(List_default.row, List_default.interactive), href, children: content }) : onClick !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: cx(List_default.row, List_default.interactive), onClick, children: content }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_default.row, children: content }) });
718
+ }
719
+
720
+ // src/components/EmptyState/EmptyState.module.css
721
+ var EmptyState_default = {
722
+ root: "EmptyState_root",
723
+ icon: "EmptyState_icon",
724
+ action: "EmptyState_action"
725
+ };
726
+ function EmptyState({ title, description, icon, action, className }) {
727
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(EmptyState_default.root, className), children: [
728
+ icon != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: EmptyState_default.icon, "aria-hidden": "true", children: icon }),
729
+ /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, children: title }),
730
+ description !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Text, { tone: "secondary", children: description }),
731
+ action != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: EmptyState_default.action, children: action })
732
+ ] });
733
+ }
734
+
735
+ // src/components/Tabs/Tabs.module.css
736
+ var Tabs_default = {
737
+ list: "Tabs_list",
738
+ tab: "Tabs_tab",
739
+ selected: "Tabs_selected",
740
+ panel: "Tabs_panel"
741
+ };
742
+ var TabsContext = react.createContext(null);
743
+ function useTabs(component) {
744
+ const context = react.useContext(TabsContext);
745
+ if (context === null) throw new Error(`${component} must sit inside <Tabs>`);
746
+ return context;
747
+ }
748
+ function Tabs({ value, onChange, children }) {
749
+ const baseId = react.useId();
750
+ return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value, onChange, baseId }, children });
751
+ }
752
+ function onArrow(event, onChange) {
753
+ const keys = ["ArrowLeft", "ArrowRight", "Home", "End"];
754
+ if (!keys.includes(event.key)) return;
755
+ const tabs = [...event.currentTarget.querySelectorAll('[role="tab"]')];
756
+ const current = tabs.findIndex((tab2) => tab2 === document.activeElement);
757
+ if (current === -1) return;
758
+ event.preventDefault();
759
+ const next = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : (current + (event.key === "ArrowRight" ? 1 : -1) + tabs.length) % tabs.length;
760
+ const tab = tabs[next];
761
+ if (!tab) return;
762
+ tab.focus();
763
+ const value = tab.dataset.value;
764
+ if (value !== void 0) onChange(value);
765
+ }
766
+ function TabList({ label, className, children, ...rest }) {
767
+ const { onChange } = useTabs("TabList");
768
+ return /* @__PURE__ */ jsxRuntime.jsx(
769
+ "div",
770
+ {
771
+ role: "tablist",
772
+ "aria-label": label,
773
+ className: cx(Tabs_default.list, className),
774
+ onKeyDown: (event) => onArrow(event, onChange),
775
+ ...rest,
776
+ children
777
+ }
778
+ );
779
+ }
780
+ function Tab({ value, className, children, ...rest }) {
781
+ const tabs = useTabs("Tab");
782
+ const selected = tabs.value === value;
783
+ return /* @__PURE__ */ jsxRuntime.jsx(
784
+ "button",
785
+ {
786
+ type: "button",
787
+ role: "tab",
788
+ id: `${tabs.baseId}-tab-${value}`,
789
+ "aria-selected": selected,
790
+ "aria-controls": `${tabs.baseId}-panel-${value}`,
791
+ tabIndex: selected ? 0 : -1,
792
+ "data-value": value,
793
+ className: cx(Tabs_default.tab, selected && Tabs_default.selected, className),
794
+ onClick: () => tabs.onChange(value),
795
+ ...rest,
796
+ children
797
+ }
798
+ );
799
+ }
800
+ function TabPanel({ value, className, children, ...rest }) {
801
+ const tabs = useTabs("TabPanel");
802
+ const selected = tabs.value === value;
803
+ return /* @__PURE__ */ jsxRuntime.jsx(
804
+ "div",
805
+ {
806
+ role: "tabpanel",
807
+ id: `${tabs.baseId}-panel-${value}`,
808
+ "aria-labelledby": `${tabs.baseId}-tab-${value}`,
809
+ hidden: !selected,
810
+ className: cx(Tabs_default.panel, className),
811
+ ...rest,
812
+ children
813
+ }
814
+ );
815
+ }
816
+
817
+ // src/components/Toast/Toast.module.css
818
+ var Toast_default = {
819
+ viewport: "Toast_viewport",
820
+ toast: "Toast_toast",
821
+ "tone-success": "Toast_tone-success",
822
+ "tone-danger": "Toast_tone-danger",
823
+ body: "Toast_body",
824
+ title: "Toast_title",
825
+ description: "Toast_description",
826
+ close: "Toast_close",
827
+ closeGlyph: "Toast_closeGlyph"
828
+ };
829
+ var ToastContext = react.createContext(null);
830
+ function useToast() {
831
+ const context = react.useContext(ToastContext);
832
+ if (context === null) throw new Error("useToast needs a <ToastProvider> above it");
833
+ return context;
834
+ }
835
+ function ToastProvider({ children }) {
836
+ const [toasts, setToasts] = react.useState([]);
837
+ const nextId = react.useRef(1);
838
+ const dismiss = react.useCallback((id) => {
839
+ setToasts((current) => current.filter((entry) => entry.id !== id));
840
+ }, []);
841
+ const toast = react.useCallback(
842
+ ({ title, description, tone = "neutral", duration = 5e3 }) => {
843
+ const id = nextId.current++;
844
+ setToasts((current) => [...current, { id, title, description, tone }]);
845
+ if (duration > 0) setTimeout(() => dismiss(id), duration);
846
+ return id;
847
+ },
848
+ [dismiss]
849
+ );
850
+ const value = react.useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
851
+ return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value, children: [
852
+ children,
853
+ /* @__PURE__ */ jsxRuntime.jsx("div", { role: "region", "aria-label": "Notifications", className: Toast_default.viewport, children: toasts.map((entry) => /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "status", className: cx(Toast_default.toast, Toast_default[`tone-${entry.tone}`]), children: [
854
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Toast_default.body, children: [
855
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: Toast_default.title, children: entry.title }),
856
+ entry.description !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Toast_default.description, children: entry.description })
857
+ ] }),
858
+ /* @__PURE__ */ jsxRuntime.jsx(
859
+ "button",
860
+ {
861
+ type: "button",
862
+ "aria-label": "Dismiss",
863
+ className: Toast_default.close,
864
+ onClick: () => dismiss(entry.id),
865
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: Toast_default.closeGlyph, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
866
+ }
867
+ )
868
+ ] }, entry.id)) })
869
+ ] });
870
+ }
871
+
872
+ // src/components/Stack/Stack.module.css
873
+ var Stack_default = {
874
+ stack: "Stack_stack",
875
+ "gap-hairline": "Stack_gap-hairline",
876
+ "gap-tight": "Stack_gap-tight",
877
+ "gap-base": "Stack_gap-base",
878
+ "gap-loose": "Stack_gap-loose",
879
+ "gap-section": "Stack_gap-section",
880
+ "align-start": "Stack_align-start",
881
+ "align-center": "Stack_align-center",
882
+ "align-end": "Stack_align-end",
883
+ "align-stretch": "Stack_align-stretch"
884
+ };
885
+
886
+ // src/components/Stack/Stack.tsx
887
+ function Stack({
888
+ gap = "base",
889
+ align = "stretch",
890
+ as = "div",
891
+ className,
892
+ ...rest
893
+ }) {
894
+ return react.createElement(as, {
895
+ className: cx(Stack_default.stack, Stack_default[`gap-${gap}`], Stack_default[`align-${align}`], className),
896
+ ...rest
897
+ });
898
+ }
899
+
900
+ // src/components/Inline/Inline.module.css
901
+ var Inline_default = {
902
+ inline: "Inline_inline",
903
+ "gap-hairline": "Inline_gap-hairline",
904
+ "gap-tight": "Inline_gap-tight",
905
+ "gap-base": "Inline_gap-base",
906
+ "gap-loose": "Inline_gap-loose",
907
+ "align-start": "Inline_align-start",
908
+ "align-center": "Inline_align-center",
909
+ "align-end": "Inline_align-end",
910
+ "align-baseline": "Inline_align-baseline",
911
+ "justify-start": "Inline_justify-start",
912
+ "justify-center": "Inline_justify-center",
913
+ "justify-end": "Inline_justify-end",
914
+ "justify-between": "Inline_justify-between",
915
+ wrap: "Inline_wrap"
916
+ };
917
+
918
+ // src/components/Inline/Inline.tsx
919
+ function Inline({
920
+ gap = "base",
921
+ align = "center",
922
+ justify = "start",
923
+ wrap = false,
924
+ as = "div",
925
+ className,
926
+ ...rest
927
+ }) {
928
+ return react.createElement(as, {
929
+ className: cx(
930
+ Inline_default.inline,
931
+ Inline_default[`gap-${gap}`],
932
+ Inline_default[`align-${align}`],
933
+ Inline_default[`justify-${justify}`],
934
+ wrap && Inline_default.wrap,
935
+ className
936
+ ),
937
+ ...rest
938
+ });
939
+ }
940
+
941
+ // src/components/Container/Container.module.css
942
+ var Container_default = {
943
+ container: "Container_container",
944
+ "width-content": "Container_width-content",
945
+ "width-wide": "Container_width-wide"
946
+ };
947
+
948
+ // src/components/Container/Container.tsx
949
+ function Container({
950
+ width = "content",
951
+ as = "div",
952
+ className,
953
+ ...rest
954
+ }) {
955
+ return react.createElement(as, {
956
+ className: cx(Container_default.container, Container_default[`width-${width}`], className),
957
+ ...rest
958
+ });
959
+ }
960
+
961
+ // src/components/Card/Card.module.css
962
+ var Card_default = {
963
+ card: "Card_card",
964
+ "variant-raised": "Card_variant-raised",
965
+ interactive: "Card_interactive",
966
+ header: "Card_header",
967
+ body: "Card_body",
968
+ footer: "Card_footer"
969
+ };
970
+ function Card({ children, variant = "card", onClick, href, className, ...rest }) {
971
+ const cardClass = cx(Card_default.card, Card_default[`variant-${variant}`], className);
972
+ if (href !== void 0) {
973
+ return /* @__PURE__ */ jsxRuntime.jsx("a", { className: cx(cardClass, Card_default.interactive), href, ...rest, children });
974
+ }
975
+ if (onClick !== void 0) {
976
+ return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: cx(cardClass, Card_default.interactive), onClick, ...rest, children });
977
+ }
978
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardClass, ...rest, children });
979
+ }
980
+ function CardHeader({ className, ...rest }) {
981
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(Card_default.header, className), ...rest });
982
+ }
983
+ function CardBody({ className, ...rest }) {
984
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(Card_default.body, className), ...rest });
985
+ }
986
+ function CardFooter({ className, ...rest }) {
987
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(Card_default.footer, className), ...rest });
988
+ }
989
+ var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
990
+ function useOverlay(options) {
991
+ const ref = react.useRef(null);
992
+ const { open, onClose } = options;
993
+ const close = react.useRef(onClose);
994
+ react.useEffect(() => {
995
+ close.current = onClose;
996
+ }, [onClose]);
997
+ react.useEffect(() => {
998
+ if (!open) return;
999
+ const panel = ref.current;
1000
+ const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
1001
+ panel?.focus();
1002
+ const onKeyDown = (event) => {
1003
+ if (event.key === "Escape") {
1004
+ event.stopPropagation();
1005
+ close.current();
1006
+ return;
1007
+ }
1008
+ if (event.key !== "Tab" || !panel) return;
1009
+ const focusable = [...panel.querySelectorAll(FOCUSABLE)];
1010
+ if (focusable.length === 0) {
1011
+ event.preventDefault();
1012
+ panel.focus();
1013
+ return;
1014
+ }
1015
+ const first = focusable[0];
1016
+ const last = focusable[focusable.length - 1];
1017
+ const active = document.activeElement;
1018
+ if (event.shiftKey && (active === first || active === panel)) {
1019
+ event.preventDefault();
1020
+ last?.focus();
1021
+ } else if (!event.shiftKey && active === last) {
1022
+ event.preventDefault();
1023
+ first?.focus();
1024
+ }
1025
+ };
1026
+ document.addEventListener("keydown", onKeyDown);
1027
+ const bodyOverflow = document.body.style.overflow;
1028
+ document.body.style.overflow = "hidden";
1029
+ return () => {
1030
+ document.removeEventListener("keydown", onKeyDown);
1031
+ document.body.style.overflow = bodyOverflow;
1032
+ previous?.focus();
1033
+ };
1034
+ }, [open]);
1035
+ return ref;
1036
+ }
1037
+ function usePresence(open, durationMs) {
1038
+ const [mounted, setMounted] = react.useState(open);
1039
+ if (open && !mounted) setMounted(true);
1040
+ react.useEffect(() => {
1041
+ if (open) return;
1042
+ const timer = setTimeout(() => setMounted(false), durationMs);
1043
+ return () => clearTimeout(timer);
1044
+ }, [open, durationMs]);
1045
+ return { mounted: open || mounted, visible: open };
1046
+ }
1047
+
1048
+ // src/components/Overlay/Overlay.module.css
1049
+ var Overlay_default = {
1050
+ scrim: "Overlay_scrim",
1051
+ "variant-modal": "Overlay_variant-modal",
1052
+ "variant-sheet": "Overlay_variant-sheet"
1053
+ };
1054
+ var OVERLAY_EXIT_MS = 200;
1055
+ function Overlay({ open, onClose, label, variant, closeOnScrimClick, panelClassName, children }) {
1056
+ const { mounted, visible } = usePresence(open, OVERLAY_EXIT_MS);
1057
+ const ref = useOverlay({ open, onClose });
1058
+ if (!mounted) return null;
1059
+ return reactDom.createPortal(
1060
+ /* @__PURE__ */ jsxRuntime.jsx(
1061
+ "div",
1062
+ {
1063
+ className: cx(Overlay_default.scrim, Overlay_default[`variant-${variant}`]),
1064
+ "data-open": visible || void 0,
1065
+ "data-testid": "mds-scrim",
1066
+ onClick: closeOnScrimClick ? onClose : void 0,
1067
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1068
+ "div",
1069
+ {
1070
+ ref,
1071
+ role: "dialog",
1072
+ "aria-modal": "true",
1073
+ "aria-label": label,
1074
+ tabIndex: -1,
1075
+ className: panelClassName,
1076
+ "data-open": visible || void 0,
1077
+ onClick: (event) => event.stopPropagation(),
1078
+ children
1079
+ }
1080
+ )
1081
+ }
1082
+ ),
1083
+ document.body
1084
+ );
1085
+ }
1086
+
1087
+ // src/components/Modal/Modal.module.css
1088
+ var Modal_default = {
1089
+ panel: "Modal_panel",
1090
+ header: "Modal_header",
1091
+ body: "Modal_body",
1092
+ footer: "Modal_footer"
1093
+ };
1094
+ function Modal({ open, onClose, label, closeOnScrimClick = true, children }) {
1095
+ return /* @__PURE__ */ jsxRuntime.jsx(
1096
+ Overlay,
1097
+ {
1098
+ open,
1099
+ onClose,
1100
+ label,
1101
+ variant: "modal",
1102
+ closeOnScrimClick,
1103
+ panelClassName: Modal_default.panel,
1104
+ children
1105
+ }
1106
+ );
1107
+ }
1108
+ function ModalHeader({ children }) {
1109
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_default.header, children });
1110
+ }
1111
+ function ModalBody({ children }) {
1112
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_default.body, children });
1113
+ }
1114
+ function ModalFooter({ children }) {
1115
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_default.footer, children });
1116
+ }
1117
+
1118
+ // src/components/Sheet/Sheet.module.css
1119
+ var Sheet_default = {
1120
+ panel: "Sheet_panel",
1121
+ header: "Sheet_header",
1122
+ body: "Sheet_body",
1123
+ footer: "Sheet_footer"
1124
+ };
1125
+ function Sheet({ open, onClose, label, closeOnScrimClick = true, children }) {
1126
+ return /* @__PURE__ */ jsxRuntime.jsx(
1127
+ Overlay,
1128
+ {
1129
+ open,
1130
+ onClose,
1131
+ label,
1132
+ variant: "sheet",
1133
+ closeOnScrimClick,
1134
+ panelClassName: Sheet_default.panel,
1135
+ children
1136
+ }
1137
+ );
1138
+ }
1139
+ function SheetHeader({ children }) {
1140
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Sheet_default.header, children });
1141
+ }
1142
+ function SheetBody({ children }) {
1143
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Sheet_default.body, children });
1144
+ }
1145
+ function SheetFooter({ children }) {
1146
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Sheet_default.footer, children });
1147
+ }
1148
+
1149
+ // src/components/ConfirmDialog/ConfirmDialog.module.css
1150
+ var ConfirmDialog_default = {
1151
+ description: "ConfirmDialog_description"
1152
+ };
1153
+ function ConfirmDialog({
1154
+ open,
1155
+ onClose,
1156
+ onConfirm,
1157
+ title,
1158
+ description,
1159
+ confirmLabel,
1160
+ cancelLabel = "Cancel",
1161
+ danger = false
1162
+ }) {
1163
+ return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open, onClose, label: title, closeOnScrimClick: false, children: [
1164
+ /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { children: title }),
1165
+ /* @__PURE__ */ jsxRuntime.jsx(ModalBody, { children: description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: ConfirmDialog_default.description, children: description }) : null }),
1166
+ /* @__PURE__ */ jsxRuntime.jsxs(ModalFooter, { children: [
1167
+ /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", onClick: onClose, children: cancelLabel }),
1168
+ /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: danger ? "danger" : "primary", onClick: onConfirm, children: confirmLabel })
1169
+ ] })
1170
+ ] });
1171
+ }
1172
+
1173
+ // src/components/Screen/Screen.module.css
1174
+ var Screen_default = {
1175
+ screen: "Screen_screen",
1176
+ content: "Screen_content"
1177
+ };
1178
+ function Screen({ children }) {
1179
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Screen_default.screen, children });
1180
+ }
1181
+ function ScreenContent({ children }) {
1182
+ return /* @__PURE__ */ jsxRuntime.jsx("main", { className: Screen_default.content, children });
1183
+ }
1184
+
1185
+ // src/components/AppBar/AppBar.module.css
1186
+ var AppBar_default = {
1187
+ bar: "AppBar_bar",
1188
+ title: "AppBar_title",
1189
+ slot: "AppBar_slot"
1190
+ };
1191
+ function AppBar({ title, leading, trailing }) {
1192
+ return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: AppBar_default.bar, children: [
1193
+ leading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: AppBar_default.slot, children: leading }) : null,
1194
+ title ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: AppBar_default.title, children: title }) : null,
1195
+ trailing ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: AppBar_default.slot, children: trailing }) : null
1196
+ ] });
1197
+ }
1198
+
1199
+ // src/components/TabBar/TabBar.module.css
1200
+ var TabBar_default = {
1201
+ bar: "TabBar_bar",
1202
+ item: "TabBar_item",
1203
+ active: "TabBar_active",
1204
+ icon: "TabBar_icon",
1205
+ label: "TabBar_label"
1206
+ };
1207
+ function TabBar({ label, children }) {
1208
+ return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": label, className: TabBar_default.bar, children });
1209
+ }
1210
+ function TabBarItem({ label, icon, href, onClick, active = false }) {
1211
+ const className = cx(TabBar_default.item, active && TabBar_default.active);
1212
+ const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1213
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: TabBar_default.icon, "aria-hidden": "true", children: icon }),
1214
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: TabBar_default.label, children: label })
1215
+ ] });
1216
+ if (href !== void 0) {
1217
+ return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className, "aria-current": active ? "page" : void 0, onClick, children: content });
1218
+ }
1219
+ return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className, "aria-current": active ? "page" : void 0, onClick, children: content });
1220
+ }
1221
+ function useRovingGroup(ref, { selector, orientation = "horizontal" }) {
1222
+ return react.useCallback(
1223
+ (event) => {
1224
+ const horizontal = orientation !== "vertical";
1225
+ const vertical = orientation !== "horizontal";
1226
+ const forward = horizontal && event.key === "ArrowRight" || vertical && event.key === "ArrowDown";
1227
+ const backward = horizontal && event.key === "ArrowLeft" || vertical && event.key === "ArrowUp";
1228
+ const home = event.key === "Home";
1229
+ const end = event.key === "End";
1230
+ if (!forward && !backward && !home && !end) return;
1231
+ const container = ref.current;
1232
+ if (container === null) return;
1233
+ const items = [...container.querySelectorAll(selector)].filter(
1234
+ (item) => !item.hasAttribute("disabled")
1235
+ );
1236
+ const current = items.indexOf(document.activeElement);
1237
+ if (items.length === 0 || current === -1) return;
1238
+ event.preventDefault();
1239
+ const next = home ? 0 : end ? items.length - 1 : (current + (forward ? 1 : -1) + items.length) % items.length;
1240
+ items[next]?.focus();
1241
+ },
1242
+ [ref, selector, orientation]
1243
+ );
1244
+ }
1245
+
1246
+ exports.AppBar = AppBar;
1247
+ exports.Avatar = Avatar;
1248
+ exports.AvatarGroup = AvatarGroup;
1249
+ exports.Badge = Badge;
1250
+ exports.Button = Button;
1251
+ exports.Card = Card;
1252
+ exports.CardBody = CardBody;
1253
+ exports.CardFooter = CardFooter;
1254
+ exports.CardHeader = CardHeader;
1255
+ exports.Checkbox = Checkbox;
1256
+ exports.ConfirmDialog = ConfirmDialog;
1257
+ exports.Container = Container;
1258
+ exports.Divider = Divider;
1259
+ exports.EmptyState = EmptyState;
1260
+ exports.Field = Field;
1261
+ exports.Heading = Heading;
1262
+ exports.Icon = Icon;
1263
+ exports.IconProvider = IconProvider;
1264
+ exports.Inline = Inline;
1265
+ exports.Input = Input;
1266
+ exports.Link = Link;
1267
+ exports.ListGroup = ListGroup;
1268
+ exports.ListItem = ListItem;
1269
+ exports.Modal = Modal;
1270
+ exports.ModalBody = ModalBody;
1271
+ exports.ModalFooter = ModalFooter;
1272
+ exports.ModalHeader = ModalHeader;
1273
+ exports.PasswordInput = PasswordInput;
1274
+ exports.ProgressBar = ProgressBar;
1275
+ exports.Radio = Radio;
1276
+ exports.Screen = Screen;
1277
+ exports.ScreenContent = ScreenContent;
1278
+ exports.SearchField = SearchField;
1279
+ exports.SegmentedControl = SegmentedControl;
1280
+ exports.Select = Select;
1281
+ exports.Sheet = Sheet;
1282
+ exports.SheetBody = SheetBody;
1283
+ exports.SheetFooter = SheetFooter;
1284
+ exports.SheetHeader = SheetHeader;
1285
+ exports.Skeleton = Skeleton;
1286
+ exports.Spinner = Spinner;
1287
+ exports.Stack = Stack;
1288
+ exports.Switch = Switch;
1289
+ exports.Tab = Tab;
1290
+ exports.TabBar = TabBar;
1291
+ exports.TabBarItem = TabBarItem;
1292
+ exports.TabList = TabList;
1293
+ exports.TabPanel = TabPanel;
1294
+ exports.Tabs = Tabs;
1295
+ exports.Tag = Tag;
1296
+ exports.Text = Text;
1297
+ exports.Textarea = Textarea;
1298
+ exports.ToastProvider = ToastProvider;
1299
+ exports.cx = cx;
1300
+ exports.useFieldContext = useFieldContext;
1301
+ exports.useOverlay = useOverlay;
1302
+ exports.usePresence = usePresence;
1303
+ exports.useRovingGroup = useRovingGroup;
1304
+ exports.useToast = useToast;
1305
+ //# sourceMappingURL=index.cjs.map
1306
+ //# sourceMappingURL=index.cjs.map