@boostdev/design-system-components 0.1.14 → 0.1.16
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/client.cjs +403 -361
- package/dist/client.css +485 -424
- package/dist/client.d.cts +25 -4
- package/dist/client.d.ts +25 -4
- package/dist/client.js +402 -361
- package/dist/index.cjs +403 -361
- package/dist/index.css +485 -424
- package/dist/index.d.cts +25 -4
- package/dist/index.d.ts +25 -4
- package/dist/index.js +402 -361
- package/package.json +1 -1
- package/src/components/interaction/form/Switch/Switch.mdx +7 -2
- package/src/components/interaction/form/Switch/Switch.module.css +6 -6
- package/src/components/interaction/form/Switch/Switch.spec.tsx +23 -0
- package/src/components/interaction/form/Switch/Switch.stories.tsx +8 -0
- package/src/components/interaction/form/Switch/Switch.tsx +5 -2
- package/src/components/interaction/form/atoms/Label.module.css +0 -1
- package/src/components/ui/Collapsible/Collapsible.mdx +59 -0
- package/src/components/ui/Collapsible/Collapsible.module.css +76 -0
- package/src/components/ui/Collapsible/Collapsible.spec.tsx +75 -0
- package/src/components/ui/Collapsible/Collapsible.stories.tsx +57 -0
- package/src/components/ui/Collapsible/Collapsible.tsx +55 -0
- package/src/components/ui/Collapsible/index.ts +2 -0
- package/src/components/ui/Progress/Progress.module.css +0 -4
- package/src/index.ts +2 -0
- package/src/stories/Introduction.mdx +2 -2
package/dist/client.cjs
CHANGED
|
@@ -32,6 +32,7 @@ __export(client_exports, {
|
|
|
32
32
|
Card: () => Card,
|
|
33
33
|
Carousel: () => Carousel,
|
|
34
34
|
Checkbox: () => Checkbox,
|
|
35
|
+
Collapsible: () => Collapsible,
|
|
35
36
|
Combobox: () => Combobox,
|
|
36
37
|
Command: () => Command,
|
|
37
38
|
DescriptionList: () => DescriptionList,
|
|
@@ -64,7 +65,7 @@ __export(client_exports, {
|
|
|
64
65
|
ToastProvider: () => ToastProvider,
|
|
65
66
|
Tooltip: () => Tooltip,
|
|
66
67
|
Typography: () => Typography,
|
|
67
|
-
cn: () =>
|
|
68
|
+
cn: () => import_design_system_foundation45.cn,
|
|
68
69
|
useToast: () => useToast
|
|
69
70
|
});
|
|
70
71
|
module.exports = __toCommonJS(client_exports);
|
|
@@ -73,7 +74,7 @@ module.exports = __toCommonJS(client_exports);
|
|
|
73
74
|
var import_react = require("react");
|
|
74
75
|
|
|
75
76
|
// src/components/ui/Accordion/Accordion.module.css
|
|
76
|
-
var Accordion_default = {"accordion":"
|
|
77
|
+
var Accordion_default = {"accordion":"bds0116Accordion-accordion","item":"bds0116Accordion-item","heading":"bds0116Accordion-heading","trigger":"bds0116Accordion-trigger","triggerLabel":"bds0116Accordion-triggerLabel","chevron":"bds0116Accordion-chevron","--open":"bds0116Accordion---open","panel":"bds0116Accordion-panel","panelContent":"bds0116Accordion-panelContent"};
|
|
77
78
|
|
|
78
79
|
// src/components/ui/Accordion/Accordion.tsx
|
|
79
80
|
var import_design_system_foundation = require("@boostdev/design-system-foundation");
|
|
@@ -141,7 +142,7 @@ function Accordion({
|
|
|
141
142
|
}
|
|
142
143
|
|
|
143
144
|
// src/components/ui/Alert/Alert.module.css
|
|
144
|
-
var Alert_default = {"alert":"
|
|
145
|
+
var Alert_default = {"alert":"bds0116Alert-alert","--variant_info":"bds0116Alert---variant_info","--variant_success":"bds0116Alert---variant_success","--variant_warning":"bds0116Alert---variant_warning","--variant_error":"bds0116Alert---variant_error","icon":"bds0116Alert-icon","content":"bds0116Alert-content","title":"bds0116Alert-title","dismiss":"bds0116Alert-dismiss"};
|
|
145
146
|
|
|
146
147
|
// src/components/ui/Alert/Alert.tsx
|
|
147
148
|
var import_design_system_foundation2 = require("@boostdev/design-system-foundation");
|
|
@@ -184,7 +185,7 @@ function Alert({
|
|
|
184
185
|
}
|
|
185
186
|
|
|
186
187
|
// src/components/ui/Avatar/Avatar.module.css
|
|
187
|
-
var Avatar_default = {"avatar":"
|
|
188
|
+
var Avatar_default = {"avatar":"bds0116Avatar-avatar","--fallback":"bds0116Avatar---fallback","--size_small":"bds0116Avatar---size_small","--size_medium":"bds0116Avatar---size_medium","--size_large":"bds0116Avatar---size_large","image":"bds0116Avatar-image","initials":"bds0116Avatar-initials"};
|
|
188
189
|
|
|
189
190
|
// src/components/ui/Avatar/Avatar.tsx
|
|
190
191
|
var import_design_system_foundation3 = require("@boostdev/design-system-foundation");
|
|
@@ -210,7 +211,7 @@ function Avatar({ src, alt, name, size = "medium", className }) {
|
|
|
210
211
|
}
|
|
211
212
|
|
|
212
213
|
// src/components/ui/Badge/Badge.module.css
|
|
213
|
-
var Badge_default = {"badge":"
|
|
214
|
+
var Badge_default = {"badge":"bds0116Badge-badge","--variant_primary":"bds0116Badge---variant_primary","--variant_secondary":"bds0116Badge---variant_secondary","--variant_success":"bds0116Badge---variant_success","--variant_error":"bds0116Badge---variant_error","--variant_warning":"bds0116Badge---variant_warning"};
|
|
214
215
|
|
|
215
216
|
// src/components/ui/Badge/Badge.tsx
|
|
216
217
|
var import_design_system_foundation4 = require("@boostdev/design-system-foundation");
|
|
@@ -220,7 +221,7 @@ function Badge({ children, variant = "primary", className }) {
|
|
|
220
221
|
}
|
|
221
222
|
|
|
222
223
|
// src/components/ui/Breadcrumb/Breadcrumb.module.css
|
|
223
|
-
var Breadcrumb_default = {"breadcrumb":"
|
|
224
|
+
var Breadcrumb_default = {"breadcrumb":"bds0116Breadcrumb-breadcrumb","list":"bds0116Breadcrumb-list","item":"bds0116Breadcrumb-item","link":"bds0116Breadcrumb-link","separator":"bds0116Breadcrumb-separator","current":"bds0116Breadcrumb-current"};
|
|
224
225
|
|
|
225
226
|
// src/components/ui/Breadcrumb/Breadcrumb.tsx
|
|
226
227
|
var import_design_system_foundation5 = require("@boostdev/design-system-foundation");
|
|
@@ -235,15 +236,53 @@ function Breadcrumb({ items, className }) {
|
|
|
235
236
|
}) }) });
|
|
236
237
|
}
|
|
237
238
|
|
|
239
|
+
// src/components/ui/Collapsible/Collapsible.module.css
|
|
240
|
+
var Collapsible_default = {"collapsible":"bds0116Collapsible-collapsible","summary":"bds0116Collapsible-summary","summaryContent":"bds0116Collapsible-summaryContent","icon":"bds0116Collapsible-icon","content":"bds0116Collapsible-content"};
|
|
241
|
+
|
|
242
|
+
// src/components/ui/Collapsible/Collapsible.tsx
|
|
243
|
+
var import_design_system_foundation6 = require("@boostdev/design-system-foundation");
|
|
244
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
245
|
+
function Collapsible({
|
|
246
|
+
summary,
|
|
247
|
+
children,
|
|
248
|
+
open,
|
|
249
|
+
defaultOpen,
|
|
250
|
+
onToggle,
|
|
251
|
+
name,
|
|
252
|
+
className,
|
|
253
|
+
...rest
|
|
254
|
+
}) {
|
|
255
|
+
const handleToggle = (e) => {
|
|
256
|
+
onToggle?.(e.currentTarget.open);
|
|
257
|
+
};
|
|
258
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
259
|
+
"details",
|
|
260
|
+
{
|
|
261
|
+
className: (0, import_design_system_foundation6.cn)(Collapsible_default.collapsible, className),
|
|
262
|
+
open: open ?? defaultOpen,
|
|
263
|
+
name,
|
|
264
|
+
onToggle: handleToggle,
|
|
265
|
+
...rest,
|
|
266
|
+
children: [
|
|
267
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("summary", { className: Collapsible_default.summary, children: [
|
|
268
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: Collapsible_default.summaryContent, children: summary }),
|
|
269
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: Collapsible_default.icon, "aria-hidden": "true" })
|
|
270
|
+
] }),
|
|
271
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: Collapsible_default.content, children })
|
|
272
|
+
]
|
|
273
|
+
}
|
|
274
|
+
);
|
|
275
|
+
}
|
|
276
|
+
|
|
238
277
|
// src/components/ui/Calendar/Calendar.tsx
|
|
239
278
|
var import_react2 = require("react");
|
|
240
279
|
|
|
241
280
|
// src/components/ui/Calendar/Calendar.module.css
|
|
242
|
-
var Calendar_default = {"calendar":"
|
|
281
|
+
var Calendar_default = {"calendar":"bds0116Calendar-calendar","header":"bds0116Calendar-header","monthYear":"bds0116Calendar-monthYear","navBtn":"bds0116Calendar-navBtn","grid":"bds0116Calendar-grid","weekday":"bds0116Calendar-weekday","empty":"bds0116Calendar-empty","day":"bds0116Calendar-day","disabled":"bds0116Calendar-disabled","selected":"bds0116Calendar-selected","today":"bds0116Calendar-today"};
|
|
243
282
|
|
|
244
283
|
// src/components/ui/Calendar/Calendar.tsx
|
|
245
|
-
var
|
|
246
|
-
var
|
|
284
|
+
var import_design_system_foundation7 = require("@boostdev/design-system-foundation");
|
|
285
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
247
286
|
var DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
|
|
248
287
|
var MONTHS = [
|
|
249
288
|
"January",
|
|
@@ -330,54 +369,54 @@ function Calendar({ value, defaultValue, min, max, onChange, className }) {
|
|
|
330
369
|
...Array.from({ length: daysInMonth }, (_, i) => ({ day: i + 1 }))
|
|
331
370
|
];
|
|
332
371
|
while (cells.length % 7 !== 0) cells.push(null);
|
|
333
|
-
return /* @__PURE__ */ (0,
|
|
334
|
-
/* @__PURE__ */ (0,
|
|
335
|
-
/* @__PURE__ */ (0,
|
|
372
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: (0, import_design_system_foundation7.cn)(Calendar_default.calendar, className), role: "group", "aria-labelledby": titleId, children: [
|
|
373
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: Calendar_default.header, children: [
|
|
374
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
336
375
|
"button",
|
|
337
376
|
{
|
|
338
377
|
type: "button",
|
|
339
378
|
className: Calendar_default.navBtn,
|
|
340
379
|
"aria-label": "Previous month",
|
|
341
380
|
onClick: () => navigate(-1),
|
|
342
|
-
children: /* @__PURE__ */ (0,
|
|
381
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
|
|
343
382
|
}
|
|
344
383
|
),
|
|
345
|
-
/* @__PURE__ */ (0,
|
|
384
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { id: titleId, className: Calendar_default.monthYear, "aria-live": "polite", children: [
|
|
346
385
|
MONTHS[viewMonth],
|
|
347
386
|
" ",
|
|
348
387
|
viewYear
|
|
349
388
|
] }),
|
|
350
|
-
/* @__PURE__ */ (0,
|
|
389
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
351
390
|
"button",
|
|
352
391
|
{
|
|
353
392
|
type: "button",
|
|
354
393
|
className: Calendar_default.navBtn,
|
|
355
394
|
"aria-label": "Next month",
|
|
356
395
|
onClick: () => navigate(1),
|
|
357
|
-
children: /* @__PURE__ */ (0,
|
|
396
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
|
|
358
397
|
}
|
|
359
398
|
)
|
|
360
399
|
] }),
|
|
361
|
-
/* @__PURE__ */ (0,
|
|
400
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
362
401
|
"table",
|
|
363
402
|
{
|
|
364
403
|
className: Calendar_default.grid,
|
|
365
404
|
role: "grid",
|
|
366
405
|
"aria-labelledby": titleId,
|
|
367
406
|
children: [
|
|
368
|
-
/* @__PURE__ */ (0,
|
|
369
|
-
/* @__PURE__ */ (0,
|
|
370
|
-
if (!cell) return /* @__PURE__ */ (0,
|
|
407
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tr", { children: DAYS.map((d) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("th", { scope: "col", abbr: d, className: Calendar_default.weekday, children: d }, d)) }) }),
|
|
408
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tbody", { children: Array.from({ length: cells.length / 7 }, (_, row) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tr", { children: cells.slice(row * 7, row * 7 + 7).map((cell, col) => {
|
|
409
|
+
if (!cell) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { className: Calendar_default.empty, "aria-hidden": "true" }, col);
|
|
371
410
|
const date = new Date(viewYear, viewMonth, cell.day);
|
|
372
411
|
const isSelected = selected ? isSameDay(date, selected) : false;
|
|
373
412
|
const isToday = isSameDay(date, today);
|
|
374
413
|
const disabled = isOutOfRange(date, min, max);
|
|
375
414
|
const isFocused = focusedDay === cell.day;
|
|
376
|
-
return /* @__PURE__ */ (0,
|
|
415
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { role: "gridcell", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
377
416
|
"button",
|
|
378
417
|
{
|
|
379
418
|
type: "button",
|
|
380
|
-
className: (0,
|
|
419
|
+
className: (0, import_design_system_foundation7.cn)(
|
|
381
420
|
Calendar_default.day,
|
|
382
421
|
isSelected && Calendar_default.selected,
|
|
383
422
|
isToday && !isSelected && Calendar_default.today,
|
|
@@ -405,11 +444,11 @@ function Calendar({ value, defaultValue, min, max, onChange, className }) {
|
|
|
405
444
|
var import_react3 = require("react");
|
|
406
445
|
|
|
407
446
|
// src/components/ui/Carousel/Carousel.module.css
|
|
408
|
-
var Carousel_default = {"carousel":"
|
|
447
|
+
var Carousel_default = {"carousel":"bds0116Carousel-carousel","track":"bds0116Carousel-track","slide":"bds0116Carousel-slide","navBtn":"bds0116Carousel-navBtn"};
|
|
409
448
|
|
|
410
449
|
// src/components/ui/Carousel/Carousel.tsx
|
|
411
|
-
var
|
|
412
|
-
var
|
|
450
|
+
var import_design_system_foundation8 = require("@boostdev/design-system-foundation");
|
|
451
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
413
452
|
function Carousel({ items, label, className }) {
|
|
414
453
|
const trackRef = (0, import_react3.useRef)(null);
|
|
415
454
|
const listId = (0, import_react3.useId)();
|
|
@@ -421,61 +460,61 @@ function Carousel({ items, label, className }) {
|
|
|
421
460
|
behavior: "smooth"
|
|
422
461
|
});
|
|
423
462
|
};
|
|
424
|
-
return /* @__PURE__ */ (0,
|
|
425
|
-
/* @__PURE__ */ (0,
|
|
463
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { "aria-label": label, className: (0, import_design_system_foundation8.cn)(Carousel_default.carousel, className), children: [
|
|
464
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
426
465
|
"button",
|
|
427
466
|
{
|
|
428
467
|
type: "button",
|
|
429
|
-
className: (0,
|
|
468
|
+
className: (0, import_design_system_foundation8.cn)(Carousel_default.navBtn, Carousel_default["--prev"]),
|
|
430
469
|
"aria-label": "Previous",
|
|
431
470
|
"aria-controls": listId,
|
|
432
471
|
onClick: () => scroll("prev"),
|
|
433
|
-
children: /* @__PURE__ */ (0,
|
|
472
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
|
|
434
473
|
}
|
|
435
474
|
),
|
|
436
|
-
/* @__PURE__ */ (0,
|
|
475
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
437
476
|
"div",
|
|
438
477
|
{
|
|
439
478
|
ref: trackRef,
|
|
440
479
|
id: listId,
|
|
441
480
|
role: "list",
|
|
442
481
|
className: Carousel_default.track,
|
|
443
|
-
children: items.map((item, i) => /* @__PURE__ */ (0,
|
|
482
|
+
children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { role: "listitem", className: Carousel_default.slide, children: item }, i))
|
|
444
483
|
}
|
|
445
484
|
),
|
|
446
|
-
/* @__PURE__ */ (0,
|
|
485
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
447
486
|
"button",
|
|
448
487
|
{
|
|
449
488
|
type: "button",
|
|
450
|
-
className: (0,
|
|
489
|
+
className: (0, import_design_system_foundation8.cn)(Carousel_default.navBtn, Carousel_default["--next"]),
|
|
451
490
|
"aria-label": "Next",
|
|
452
491
|
"aria-controls": listId,
|
|
453
492
|
onClick: () => scroll("next"),
|
|
454
|
-
children: /* @__PURE__ */ (0,
|
|
493
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
|
|
455
494
|
}
|
|
456
495
|
)
|
|
457
496
|
] });
|
|
458
497
|
}
|
|
459
498
|
|
|
460
499
|
// src/components/ui/DescriptionList/DescriptionList.module.css
|
|
461
|
-
var DescriptionList_default = {"list":"
|
|
500
|
+
var DescriptionList_default = {"list":"bds0116DescriptionList-list","group":"bds0116DescriptionList-group","term":"bds0116DescriptionList-term","details":"bds0116DescriptionList-details","--layout_inline":"bds0116DescriptionList---layout_inline"};
|
|
462
501
|
|
|
463
502
|
// src/components/ui/DescriptionList/DescriptionList.tsx
|
|
464
|
-
var
|
|
465
|
-
var
|
|
503
|
+
var import_design_system_foundation9 = require("@boostdev/design-system-foundation");
|
|
504
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
466
505
|
function DescriptionList({ items, layout = "stacked", className }) {
|
|
467
|
-
return /* @__PURE__ */ (0,
|
|
468
|
-
/* @__PURE__ */ (0,
|
|
469
|
-
Array.isArray(item.details) ? item.details.map((d, j) => /* @__PURE__ */ (0,
|
|
506
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("dl", { className: (0, import_design_system_foundation9.cn)(DescriptionList_default.list, DescriptionList_default[`--layout_${layout}`], className), children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: DescriptionList_default.group, children: [
|
|
507
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("dt", { className: DescriptionList_default.term, children: item.term }),
|
|
508
|
+
Array.isArray(item.details) ? item.details.map((d, j) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("dd", { className: DescriptionList_default.details, children: d }, j)) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("dd", { className: DescriptionList_default.details, children: item.details })
|
|
470
509
|
] }, i)) });
|
|
471
510
|
}
|
|
472
511
|
|
|
473
512
|
// src/components/ui/Link/Link.module.css
|
|
474
|
-
var Link_default = {"link":"
|
|
513
|
+
var Link_default = {"link":"bds0116Link-link","--variant_default":"bds0116Link---variant_default","--variant_subtle":"bds0116Link---variant_subtle","--variant_standalone":"bds0116Link---variant_standalone","externalLabel":"bds0116Link-externalLabel"};
|
|
475
514
|
|
|
476
515
|
// src/components/ui/Link/Link.tsx
|
|
477
|
-
var
|
|
478
|
-
var
|
|
516
|
+
var import_design_system_foundation10 = require("@boostdev/design-system-foundation");
|
|
517
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
479
518
|
function Link({
|
|
480
519
|
as,
|
|
481
520
|
children,
|
|
@@ -487,36 +526,36 @@ function Link({
|
|
|
487
526
|
}) {
|
|
488
527
|
const Component = as ?? "a";
|
|
489
528
|
const externalProps = external ? { target: "_blank", rel: "noreferrer noopener" } : {};
|
|
490
|
-
return /* @__PURE__ */ (0,
|
|
529
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
491
530
|
Component,
|
|
492
531
|
{
|
|
493
|
-
className: (0,
|
|
532
|
+
className: (0, import_design_system_foundation10.cn)(Link_default.link, Link_default[`--variant_${variant}`], className),
|
|
494
533
|
...externalProps,
|
|
495
534
|
...props,
|
|
496
535
|
children: [
|
|
497
536
|
children,
|
|
498
|
-
external && /* @__PURE__ */ (0,
|
|
537
|
+
external && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: Link_default.externalLabel, children: externalLabel })
|
|
499
538
|
]
|
|
500
539
|
}
|
|
501
540
|
);
|
|
502
541
|
}
|
|
503
542
|
|
|
504
543
|
// src/components/ui/Loading/Loading.module.css
|
|
505
|
-
var Loading_default = {"loading":"
|
|
544
|
+
var Loading_default = {"loading":"bds0116Loading-loading","spinner":"bds0116Loading-spinner","--size_small":"bds0116Loading---size_small","--size_large":"bds0116Loading---size_large"};
|
|
506
545
|
|
|
507
546
|
// src/components/ui/Loading/Loading.tsx
|
|
508
|
-
var
|
|
509
|
-
var
|
|
547
|
+
var import_design_system_foundation11 = require("@boostdev/design-system-foundation");
|
|
548
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
510
549
|
function Loading({ size = "medium", className }) {
|
|
511
|
-
return /* @__PURE__ */ (0,
|
|
550
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_design_system_foundation11.cn)(Loading_default.loading, Loading_default[`--size_${size}`], className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: Loading_default.spinner, role: "status", "aria-label": "Loading" }) });
|
|
512
551
|
}
|
|
513
552
|
|
|
514
553
|
// src/components/ui/NotificationBanner/NotificationBanner.module.css
|
|
515
|
-
var NotificationBanner_default = {"banner":"
|
|
554
|
+
var NotificationBanner_default = {"banner":"bds0116NotificationBanner-banner","--variant_info":"bds0116NotificationBanner---variant_info","--variant_success":"bds0116NotificationBanner---variant_success","--variant_warning":"bds0116NotificationBanner---variant_warning","--variant_error":"bds0116NotificationBanner---variant_error","content":"bds0116NotificationBanner-content","action":"bds0116NotificationBanner-action","dismiss":"bds0116NotificationBanner-dismiss"};
|
|
516
555
|
|
|
517
556
|
// src/components/ui/NotificationBanner/NotificationBanner.tsx
|
|
518
|
-
var
|
|
519
|
-
var
|
|
557
|
+
var import_design_system_foundation12 = require("@boostdev/design-system-foundation");
|
|
558
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
520
559
|
function NotificationBanner({
|
|
521
560
|
variant = "info",
|
|
522
561
|
children,
|
|
@@ -525,24 +564,24 @@ function NotificationBanner({
|
|
|
525
564
|
className
|
|
526
565
|
}) {
|
|
527
566
|
const isUrgent = variant === "error" || variant === "warning";
|
|
528
|
-
return /* @__PURE__ */ (0,
|
|
567
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
529
568
|
"div",
|
|
530
569
|
{
|
|
531
570
|
role: isUrgent ? "alert" : "status",
|
|
532
571
|
"aria-live": isUrgent ? "assertive" : "polite",
|
|
533
572
|
"aria-atomic": "true",
|
|
534
|
-
className: (0,
|
|
573
|
+
className: (0, import_design_system_foundation12.cn)(NotificationBanner_default.banner, NotificationBanner_default[`--variant_${variant}`], className),
|
|
535
574
|
children: [
|
|
536
|
-
/* @__PURE__ */ (0,
|
|
537
|
-
action && /* @__PURE__ */ (0,
|
|
538
|
-
onDismiss && /* @__PURE__ */ (0,
|
|
575
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: NotificationBanner_default.content, children }),
|
|
576
|
+
action && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: NotificationBanner_default.action, children: action }),
|
|
577
|
+
onDismiss && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
539
578
|
"button",
|
|
540
579
|
{
|
|
541
580
|
type: "button",
|
|
542
581
|
className: NotificationBanner_default.dismiss,
|
|
543
582
|
onClick: onDismiss,
|
|
544
583
|
"aria-label": "Dismiss notification",
|
|
545
|
-
children: /* @__PURE__ */ (0,
|
|
584
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
|
|
546
585
|
}
|
|
547
586
|
)
|
|
548
587
|
]
|
|
@@ -551,11 +590,11 @@ function NotificationBanner({
|
|
|
551
590
|
}
|
|
552
591
|
|
|
553
592
|
// src/components/ui/Pagination/Pagination.module.css
|
|
554
|
-
var Pagination_default = {"pagination":"
|
|
593
|
+
var Pagination_default = {"pagination":"bds0116Pagination-pagination","list":"bds0116Pagination-list","button":"bds0116Pagination-button","--active":"bds0116Pagination---active","--nav":"bds0116Pagination---nav","ellipsis":"bds0116Pagination-ellipsis"};
|
|
555
594
|
|
|
556
595
|
// src/components/ui/Pagination/Pagination.tsx
|
|
557
|
-
var
|
|
558
|
-
var
|
|
596
|
+
var import_design_system_foundation13 = require("@boostdev/design-system-foundation");
|
|
597
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
559
598
|
function getPageRange(current, total) {
|
|
560
599
|
const delta = 1;
|
|
561
600
|
const range = [];
|
|
@@ -575,24 +614,24 @@ function Pagination({
|
|
|
575
614
|
className
|
|
576
615
|
}) {
|
|
577
616
|
const pages = getPageRange(currentPage, totalPages);
|
|
578
|
-
return /* @__PURE__ */ (0,
|
|
579
|
-
/* @__PURE__ */ (0,
|
|
617
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("nav", { "aria-label": "Pagination", className: (0, import_design_system_foundation13.cn)(Pagination_default.pagination, className), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("ul", { className: Pagination_default.list, children: [
|
|
618
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
580
619
|
"button",
|
|
581
620
|
{
|
|
582
621
|
type: "button",
|
|
583
|
-
className: (0,
|
|
622
|
+
className: (0, import_design_system_foundation13.cn)(Pagination_default.button, Pagination_default["--nav"]),
|
|
584
623
|
onClick: () => onPageChange(currentPage - 1),
|
|
585
624
|
disabled: currentPage <= 1,
|
|
586
625
|
"aria-label": "Previous page",
|
|
587
|
-
children: /* @__PURE__ */ (0,
|
|
626
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
|
|
588
627
|
}
|
|
589
628
|
) }),
|
|
590
629
|
pages.map(
|
|
591
|
-
(page, index) => page === "..." ? /* @__PURE__ */ (0,
|
|
630
|
+
(page, index) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: Pagination_default.ellipsis, "aria-hidden": "true", children: "\u2026" }) }, `ellipsis-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
592
631
|
"button",
|
|
593
632
|
{
|
|
594
633
|
type: "button",
|
|
595
|
-
className: (0,
|
|
634
|
+
className: (0, import_design_system_foundation13.cn)(Pagination_default.button, currentPage === page ? Pagination_default["--active"] : void 0),
|
|
596
635
|
onClick: () => onPageChange(page),
|
|
597
636
|
"aria-label": `Page ${page}`,
|
|
598
637
|
"aria-current": currentPage === page ? "page" : void 0,
|
|
@@ -600,26 +639,26 @@ function Pagination({
|
|
|
600
639
|
}
|
|
601
640
|
) }, page)
|
|
602
641
|
),
|
|
603
|
-
/* @__PURE__ */ (0,
|
|
642
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
604
643
|
"button",
|
|
605
644
|
{
|
|
606
645
|
type: "button",
|
|
607
|
-
className: (0,
|
|
646
|
+
className: (0, import_design_system_foundation13.cn)(Pagination_default.button, Pagination_default["--nav"]),
|
|
608
647
|
onClick: () => onPageChange(currentPage + 1),
|
|
609
648
|
disabled: currentPage >= totalPages,
|
|
610
649
|
"aria-label": "Next page",
|
|
611
|
-
children: /* @__PURE__ */ (0,
|
|
650
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
|
|
612
651
|
}
|
|
613
652
|
) })
|
|
614
653
|
] }) });
|
|
615
654
|
}
|
|
616
655
|
|
|
617
656
|
// src/components/ui/Progress/Progress.module.css
|
|
618
|
-
var Progress_default = {"container":"
|
|
657
|
+
var Progress_default = {"container":"bds0116Progress-container","labelRow":"bds0116Progress-labelRow","value":"bds0116Progress-value","track":"bds0116Progress-track","--size_small":"bds0116Progress---size_small","--size_medium":"bds0116Progress---size_medium","--size_large":"bds0116Progress---size_large","fill":"bds0116Progress-fill"};
|
|
619
658
|
|
|
620
659
|
// src/components/ui/Progress/Progress.tsx
|
|
621
|
-
var
|
|
622
|
-
var
|
|
660
|
+
var import_design_system_foundation14 = require("@boostdev/design-system-foundation");
|
|
661
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
623
662
|
function Progress({
|
|
624
663
|
value,
|
|
625
664
|
max = 100,
|
|
@@ -629,15 +668,15 @@ function Progress({
|
|
|
629
668
|
className
|
|
630
669
|
}) {
|
|
631
670
|
const percentage = Math.min(100, Math.max(0, value / max * 100));
|
|
632
|
-
return /* @__PURE__ */ (0,
|
|
633
|
-
showLabel && /* @__PURE__ */ (0,
|
|
634
|
-
/* @__PURE__ */ (0,
|
|
635
|
-
/* @__PURE__ */ (0,
|
|
671
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: (0, import_design_system_foundation14.cn)(Progress_default.container, className), children: [
|
|
672
|
+
showLabel && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: Progress_default.labelRow, children: [
|
|
673
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: Progress_default.label, children: label }),
|
|
674
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: Progress_default.value, children: [
|
|
636
675
|
Math.round(percentage),
|
|
637
676
|
"%"
|
|
638
677
|
] })
|
|
639
678
|
] }),
|
|
640
|
-
/* @__PURE__ */ (0,
|
|
679
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
641
680
|
"div",
|
|
642
681
|
{
|
|
643
682
|
role: "progressbar",
|
|
@@ -645,19 +684,19 @@ function Progress({
|
|
|
645
684
|
"aria-valuenow": value,
|
|
646
685
|
"aria-valuemin": 0,
|
|
647
686
|
"aria-valuemax": max,
|
|
648
|
-
className: (0,
|
|
649
|
-
children: /* @__PURE__ */ (0,
|
|
687
|
+
className: (0, import_design_system_foundation14.cn)(Progress_default.track, Progress_default[`--size_${size}`]),
|
|
688
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: Progress_default.fill, style: { width: `${percentage}%` } })
|
|
650
689
|
}
|
|
651
690
|
)
|
|
652
691
|
] });
|
|
653
692
|
}
|
|
654
693
|
|
|
655
694
|
// src/components/ui/ProgressCircle/ProgressCircle.module.css
|
|
656
|
-
var ProgressCircle_default = {"wrapper":"
|
|
695
|
+
var ProgressCircle_default = {"wrapper":"bds0116ProgressCircle-wrapper","svg":"bds0116ProgressCircle-svg","track":"bds0116ProgressCircle-track","fill":"bds0116ProgressCircle-fill","value":"bds0116ProgressCircle-value","--size_small":"bds0116ProgressCircle---size_small","--size_medium":"bds0116ProgressCircle---size_medium","--size_large":"bds0116ProgressCircle---size_large"};
|
|
657
696
|
|
|
658
697
|
// src/components/ui/ProgressCircle/ProgressCircle.tsx
|
|
659
|
-
var
|
|
660
|
-
var
|
|
698
|
+
var import_design_system_foundation15 = require("@boostdev/design-system-foundation");
|
|
699
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
661
700
|
var SIZE_PX = { small: 40, medium: 64, large: 96 };
|
|
662
701
|
var STROKE_WIDTH = 4;
|
|
663
702
|
function ProgressCircle({
|
|
@@ -674,7 +713,7 @@ function ProgressCircle({
|
|
|
674
713
|
const circumference = 2 * Math.PI * radius;
|
|
675
714
|
const offset = circumference - percentage / 100 * circumference;
|
|
676
715
|
const cx = px / 2;
|
|
677
|
-
return /* @__PURE__ */ (0,
|
|
716
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
678
717
|
"div",
|
|
679
718
|
{
|
|
680
719
|
role: "progressbar",
|
|
@@ -682,9 +721,9 @@ function ProgressCircle({
|
|
|
682
721
|
"aria-valuenow": value,
|
|
683
722
|
"aria-valuemin": 0,
|
|
684
723
|
"aria-valuemax": max,
|
|
685
|
-
className: (0,
|
|
724
|
+
className: (0, import_design_system_foundation15.cn)(ProgressCircle_default.wrapper, ProgressCircle_default[`--size_${size}`], className),
|
|
686
725
|
children: [
|
|
687
|
-
/* @__PURE__ */ (0,
|
|
726
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
688
727
|
"svg",
|
|
689
728
|
{
|
|
690
729
|
width: px,
|
|
@@ -693,7 +732,7 @@ function ProgressCircle({
|
|
|
693
732
|
"aria-hidden": "true",
|
|
694
733
|
className: ProgressCircle_default.svg,
|
|
695
734
|
children: [
|
|
696
|
-
/* @__PURE__ */ (0,
|
|
735
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
697
736
|
"circle",
|
|
698
737
|
{
|
|
699
738
|
className: ProgressCircle_default.track,
|
|
@@ -704,7 +743,7 @@ function ProgressCircle({
|
|
|
704
743
|
fill: "none"
|
|
705
744
|
}
|
|
706
745
|
),
|
|
707
|
-
/* @__PURE__ */ (0,
|
|
746
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
708
747
|
"circle",
|
|
709
748
|
{
|
|
710
749
|
className: ProgressCircle_default.fill,
|
|
@@ -722,7 +761,7 @@ function ProgressCircle({
|
|
|
722
761
|
]
|
|
723
762
|
}
|
|
724
763
|
),
|
|
725
|
-
showValue && /* @__PURE__ */ (0,
|
|
764
|
+
showValue && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: ProgressCircle_default.value, "aria-hidden": "true", children: [
|
|
726
765
|
Math.round(percentage),
|
|
727
766
|
"%"
|
|
728
767
|
] })
|
|
@@ -732,52 +771,52 @@ function ProgressCircle({
|
|
|
732
771
|
}
|
|
733
772
|
|
|
734
773
|
// src/components/ui/Separator/Separator.module.css
|
|
735
|
-
var Separator_default = {"separator":"
|
|
774
|
+
var Separator_default = {"separator":"bds0116Separator-separator","--horizontal":"bds0116Separator---horizontal","--vertical":"bds0116Separator---vertical"};
|
|
736
775
|
|
|
737
776
|
// src/components/ui/Separator/Separator.tsx
|
|
738
|
-
var
|
|
739
|
-
var
|
|
777
|
+
var import_design_system_foundation16 = require("@boostdev/design-system-foundation");
|
|
778
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
740
779
|
function Separator({ orientation = "horizontal", className }) {
|
|
741
780
|
if (orientation === "vertical") {
|
|
742
|
-
return /* @__PURE__ */ (0,
|
|
781
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
743
782
|
"div",
|
|
744
783
|
{
|
|
745
784
|
role: "separator",
|
|
746
785
|
"aria-orientation": "vertical",
|
|
747
|
-
className: (0,
|
|
786
|
+
className: (0, import_design_system_foundation16.cn)(Separator_default.separator, Separator_default["--vertical"], className)
|
|
748
787
|
}
|
|
749
788
|
);
|
|
750
789
|
}
|
|
751
|
-
return /* @__PURE__ */ (0,
|
|
790
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("hr", { className: (0, import_design_system_foundation16.cn)(Separator_default.separator, Separator_default["--horizontal"], className) });
|
|
752
791
|
}
|
|
753
792
|
|
|
754
793
|
// src/components/ui/Skeleton/Skeleton.tsx
|
|
755
|
-
var
|
|
794
|
+
var import_design_system_foundation17 = require("@boostdev/design-system-foundation");
|
|
756
795
|
|
|
757
796
|
// src/components/ui/Skeleton/Skeleton.module.css
|
|
758
|
-
var Skeleton_default = {"skeleton":"
|
|
797
|
+
var Skeleton_default = {"skeleton":"bds0116Skeleton-skeleton"};
|
|
759
798
|
|
|
760
799
|
// src/components/ui/Skeleton/Skeleton.tsx
|
|
761
|
-
var
|
|
800
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
762
801
|
function Skeleton({ className }) {
|
|
763
|
-
return /* @__PURE__ */ (0,
|
|
802
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { "aria-hidden": "true", className: (0, import_design_system_foundation17.cn)(Skeleton_default.skeleton, className) });
|
|
764
803
|
}
|
|
765
804
|
|
|
766
805
|
// src/components/ui/SkipLink/SkipLink.module.css
|
|
767
|
-
var SkipLink_default = {"skipLink":"
|
|
806
|
+
var SkipLink_default = {"skipLink":"bds0116SkipLink-skipLink"};
|
|
768
807
|
|
|
769
808
|
// src/components/ui/SkipLink/SkipLink.tsx
|
|
770
|
-
var
|
|
809
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
771
810
|
function SkipLink({ href = "#main", children = "Skip to main content" }) {
|
|
772
|
-
return /* @__PURE__ */ (0,
|
|
811
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { href, className: SkipLink_default.skipLink, children });
|
|
773
812
|
}
|
|
774
813
|
|
|
775
814
|
// src/components/ui/Table/Table.module.css
|
|
776
|
-
var Table_default = {"wrapper":"
|
|
815
|
+
var Table_default = {"wrapper":"bds0116Table-wrapper","table":"bds0116Table-table","caption":"bds0116Table-caption","thead":"bds0116Table-thead","th":"bds0116Table-th","--sortable":"bds0116Table---sortable","sortButton":"bds0116Table-sortButton","sortIcon":"bds0116Table-sortIcon","--sort-active":"bds0116Table---sort-active","--sort-desc":"bds0116Table---sort-desc","tbody":"bds0116Table-tbody","tr":"bds0116Table-tr","td":"bds0116Table-td"};
|
|
777
816
|
|
|
778
817
|
// src/components/ui/Table/Table.tsx
|
|
779
|
-
var
|
|
780
|
-
var
|
|
818
|
+
var import_design_system_foundation18 = require("@boostdev/design-system-foundation");
|
|
819
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
781
820
|
function Table({
|
|
782
821
|
columns,
|
|
783
822
|
rows,
|
|
@@ -796,15 +835,15 @@ function Table({
|
|
|
796
835
|
if (sortKey !== key) return "none";
|
|
797
836
|
return sortDirection === "asc" ? "ascending" : "descending";
|
|
798
837
|
};
|
|
799
|
-
return /* @__PURE__ */ (0,
|
|
800
|
-
caption && /* @__PURE__ */ (0,
|
|
801
|
-
/* @__PURE__ */ (0,
|
|
838
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: (0, import_design_system_foundation18.cn)(Table_default.wrapper, className), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("table", { className: Table_default.table, children: [
|
|
839
|
+
caption && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("caption", { className: Table_default.caption, children: caption }),
|
|
840
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("thead", { className: Table_default.thead, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tr", { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
802
841
|
"th",
|
|
803
842
|
{
|
|
804
843
|
scope: "col",
|
|
805
844
|
"aria-sort": col.sortable ? getAriaSort(col.key) : void 0,
|
|
806
|
-
className: (0,
|
|
807
|
-
children: col.sortable ? /* @__PURE__ */ (0,
|
|
845
|
+
className: (0, import_design_system_foundation18.cn)(Table_default.th, col.sortable ? Table_default["--sortable"] : void 0),
|
|
846
|
+
children: col.sortable ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
808
847
|
"button",
|
|
809
848
|
{
|
|
810
849
|
type: "button",
|
|
@@ -812,11 +851,11 @@ function Table({
|
|
|
812
851
|
onClick: () => handleSort(col.key),
|
|
813
852
|
children: [
|
|
814
853
|
col.header,
|
|
815
|
-
/* @__PURE__ */ (0,
|
|
854
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
816
855
|
"svg",
|
|
817
856
|
{
|
|
818
857
|
"aria-hidden": "true",
|
|
819
|
-
className: (0,
|
|
858
|
+
className: (0, import_design_system_foundation18.cn)(
|
|
820
859
|
Table_default.sortIcon,
|
|
821
860
|
sortKey === col.key ? Table_default["--sort-active"] : void 0,
|
|
822
861
|
sortKey === col.key && sortDirection === "desc" ? Table_default["--sort-desc"] : void 0
|
|
@@ -825,7 +864,7 @@ function Table({
|
|
|
825
864
|
fill: "none",
|
|
826
865
|
stroke: "currentColor",
|
|
827
866
|
strokeWidth: "2",
|
|
828
|
-
children: /* @__PURE__ */ (0,
|
|
867
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" })
|
|
829
868
|
}
|
|
830
869
|
)
|
|
831
870
|
]
|
|
@@ -834,7 +873,7 @@ function Table({
|
|
|
834
873
|
},
|
|
835
874
|
col.key
|
|
836
875
|
)) }) }),
|
|
837
|
-
/* @__PURE__ */ (0,
|
|
876
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tbody", { className: Table_default.tbody, children: rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tr", { className: Table_default.tr, children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("td", { className: Table_default.td, children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key)) }, rowIndex)) })
|
|
838
877
|
] }) });
|
|
839
878
|
}
|
|
840
879
|
|
|
@@ -842,11 +881,11 @@ function Table({
|
|
|
842
881
|
var import_react4 = require("react");
|
|
843
882
|
|
|
844
883
|
// src/components/ui/Tabs/Tabs.module.css
|
|
845
|
-
var Tabs_default = {"tabs":"
|
|
884
|
+
var Tabs_default = {"tabs":"bds0116Tabs-tabs","tabList":"bds0116Tabs-tabList","tab":"bds0116Tabs-tab","--active":"bds0116Tabs---active","panel":"bds0116Tabs-panel"};
|
|
846
885
|
|
|
847
886
|
// src/components/ui/Tabs/Tabs.tsx
|
|
848
|
-
var
|
|
849
|
-
var
|
|
887
|
+
var import_design_system_foundation19 = require("@boostdev/design-system-foundation");
|
|
888
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
850
889
|
function Tabs({ tabs, defaultTab, className }) {
|
|
851
890
|
const baseId = (0, import_react4.useId)();
|
|
852
891
|
const [activeTab, setActiveTab] = (0, import_react4.useState)(defaultTab ?? tabs[0]?.id);
|
|
@@ -872,12 +911,12 @@ function Tabs({ tabs, defaultTab, className }) {
|
|
|
872
911
|
focusAt(enabledIndexes[enabledIndexes.length - 1]);
|
|
873
912
|
}
|
|
874
913
|
};
|
|
875
|
-
return /* @__PURE__ */ (0,
|
|
876
|
-
/* @__PURE__ */ (0,
|
|
914
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: (0, import_design_system_foundation19.cn)(Tabs_default.tabs, className), children: [
|
|
915
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { role: "tablist", className: Tabs_default.tabList, children: tabs.map((tab, i) => {
|
|
877
916
|
const tabId = `${baseId}-tab-${tab.id}`;
|
|
878
917
|
const panelId = `${baseId}-panel-${tab.id}`;
|
|
879
918
|
const isActive = activeTab === tab.id;
|
|
880
|
-
return /* @__PURE__ */ (0,
|
|
919
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
881
920
|
"button",
|
|
882
921
|
{
|
|
883
922
|
ref: (el) => {
|
|
@@ -890,7 +929,7 @@ function Tabs({ tabs, defaultTab, className }) {
|
|
|
890
929
|
"aria-controls": panelId,
|
|
891
930
|
tabIndex: isActive ? 0 : -1,
|
|
892
931
|
disabled: tab.disabled,
|
|
893
|
-
className: (0,
|
|
932
|
+
className: (0, import_design_system_foundation19.cn)(Tabs_default.tab, isActive ? Tabs_default["--active"] : void 0),
|
|
894
933
|
onClick: () => setActiveTab(tab.id),
|
|
895
934
|
onKeyDown: (e) => handleKeyDown(e, i),
|
|
896
935
|
children: tab.label
|
|
@@ -902,7 +941,7 @@ function Tabs({ tabs, defaultTab, className }) {
|
|
|
902
941
|
const tabId = `${baseId}-tab-${tab.id}`;
|
|
903
942
|
const panelId = `${baseId}-panel-${tab.id}`;
|
|
904
943
|
const isActive = activeTab === tab.id;
|
|
905
|
-
return /* @__PURE__ */ (0,
|
|
944
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
906
945
|
"div",
|
|
907
946
|
{
|
|
908
947
|
id: panelId,
|
|
@@ -923,11 +962,11 @@ function Tabs({ tabs, defaultTab, className }) {
|
|
|
923
962
|
var import_react5 = require("react");
|
|
924
963
|
|
|
925
964
|
// src/components/ui/Tooltip/Tooltip.module.css
|
|
926
|
-
var Tooltip_default = {"wrapper":"
|
|
965
|
+
var Tooltip_default = {"wrapper":"bds0116Tooltip-wrapper","tooltip":"bds0116Tooltip-tooltip","--placement_top":"bds0116Tooltip---placement_top","--placement_bottom":"bds0116Tooltip---placement_bottom","--placement_left":"bds0116Tooltip---placement_left","--placement_right":"bds0116Tooltip---placement_right"};
|
|
927
966
|
|
|
928
967
|
// src/components/ui/Tooltip/Tooltip.tsx
|
|
929
|
-
var
|
|
930
|
-
var
|
|
968
|
+
var import_design_system_foundation20 = require("@boostdev/design-system-foundation");
|
|
969
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
931
970
|
function Tooltip({
|
|
932
971
|
content,
|
|
933
972
|
placement = "top",
|
|
@@ -938,14 +977,14 @@ function Tooltip({
|
|
|
938
977
|
const trigger = (0, import_react5.isValidElement)(children) ? (0, import_react5.cloneElement)(children, {
|
|
939
978
|
"aria-describedby": tooltipId
|
|
940
979
|
}) : children;
|
|
941
|
-
return /* @__PURE__ */ (0,
|
|
980
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: (0, import_design_system_foundation20.cn)(Tooltip_default.wrapper, className), children: [
|
|
942
981
|
trigger,
|
|
943
|
-
/* @__PURE__ */ (0,
|
|
982
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
944
983
|
"span",
|
|
945
984
|
{
|
|
946
985
|
id: tooltipId,
|
|
947
986
|
role: "tooltip",
|
|
948
|
-
className: (0,
|
|
987
|
+
className: (0, import_design_system_foundation20.cn)(Tooltip_default.tooltip, Tooltip_default[`--placement_${placement}`]),
|
|
949
988
|
children: content
|
|
950
989
|
}
|
|
951
990
|
)
|
|
@@ -953,11 +992,11 @@ function Tooltip({
|
|
|
953
992
|
}
|
|
954
993
|
|
|
955
994
|
// src/components/ui/Typography/Typography.module.css
|
|
956
|
-
var Typography_default = {"typography":"
|
|
995
|
+
var Typography_default = {"typography":"bds0116Typography-typography","--h1":"bds0116Typography---h1","--h2":"bds0116Typography---h2","--h3":"bds0116Typography---h3","--body":"bds0116Typography---body","--body_s":"bds0116Typography---body_s"};
|
|
957
996
|
|
|
958
997
|
// src/components/ui/Typography/Typography.tsx
|
|
959
|
-
var
|
|
960
|
-
var
|
|
998
|
+
var import_design_system_foundation21 = require("@boostdev/design-system-foundation");
|
|
999
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
961
1000
|
var variantToElement = {
|
|
962
1001
|
h1: "h1",
|
|
963
1002
|
h2: "h2",
|
|
@@ -967,15 +1006,15 @@ var variantToElement = {
|
|
|
967
1006
|
};
|
|
968
1007
|
function Typography({ variant = "body", component, children, className }) {
|
|
969
1008
|
const Component = component || variantToElement[variant];
|
|
970
|
-
return /* @__PURE__ */ (0,
|
|
1009
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Component, { className: (0, import_design_system_foundation21.cn)(Typography_default.typography, Typography_default[`--${variant}`], className), children });
|
|
971
1010
|
}
|
|
972
1011
|
|
|
973
1012
|
// src/components/interaction/Button/Button.module.css
|
|
974
|
-
var Button_default = {"button":"
|
|
1013
|
+
var Button_default = {"button":"bds0116Button-button","--primary":"bds0116Button---primary","--secondary":"bds0116Button---secondary","--size_small":"bds0116Button---size_small","--size_medium":"bds0116Button---size_medium","--size_large":"bds0116Button---size_large","--hasPulse":"bds0116Button---hasPulse","prefix":"bds0116Button-prefix","suffix":"bds0116Button-suffix"};
|
|
975
1014
|
|
|
976
1015
|
// src/components/interaction/Button/Button.tsx
|
|
977
|
-
var
|
|
978
|
-
var
|
|
1016
|
+
var import_design_system_foundation22 = require("@boostdev/design-system-foundation");
|
|
1017
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
979
1018
|
function Button({
|
|
980
1019
|
children,
|
|
981
1020
|
className,
|
|
@@ -992,7 +1031,7 @@ function Button({
|
|
|
992
1031
|
onClick,
|
|
993
1032
|
...rest
|
|
994
1033
|
}) {
|
|
995
|
-
const classNames = (0,
|
|
1034
|
+
const classNames = (0, import_design_system_foundation22.cn)(
|
|
996
1035
|
Button_default.button,
|
|
997
1036
|
Button_default[`--${variant}`],
|
|
998
1037
|
Button_default[`--size_${size}`],
|
|
@@ -1009,13 +1048,13 @@ function Button({
|
|
|
1009
1048
|
const handleButtonClick = (e) => {
|
|
1010
1049
|
onClick?.(e);
|
|
1011
1050
|
};
|
|
1012
|
-
const content = /* @__PURE__ */ (0,
|
|
1013
|
-
Boolean(iconStart) && /* @__PURE__ */ (0,
|
|
1051
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
1052
|
+
Boolean(iconStart) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: Button_default.prefix, children: iconStart }),
|
|
1014
1053
|
children,
|
|
1015
|
-
Boolean(iconEnd) && /* @__PURE__ */ (0,
|
|
1054
|
+
Boolean(iconEnd) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: Button_default.suffix, children: iconEnd })
|
|
1016
1055
|
] });
|
|
1017
1056
|
if (href) {
|
|
1018
|
-
return /* @__PURE__ */ (0,
|
|
1057
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1019
1058
|
"a",
|
|
1020
1059
|
{
|
|
1021
1060
|
className: classNames,
|
|
@@ -1030,7 +1069,7 @@ function Button({
|
|
|
1030
1069
|
}
|
|
1031
1070
|
);
|
|
1032
1071
|
}
|
|
1033
|
-
return /* @__PURE__ */ (0,
|
|
1072
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1034
1073
|
"button",
|
|
1035
1074
|
{
|
|
1036
1075
|
type,
|
|
@@ -1047,11 +1086,11 @@ function Button({
|
|
|
1047
1086
|
var import_react6 = require("react");
|
|
1048
1087
|
|
|
1049
1088
|
// src/components/interaction/Command/Command.module.css
|
|
1050
|
-
var Command_default = {"dialog":"
|
|
1089
|
+
var Command_default = {"dialog":"bds0116Command-dialog","palette":"bds0116Command-palette","searchRow":"bds0116Command-searchRow","searchIcon":"bds0116Command-searchIcon","search":"bds0116Command-search","escHint":"bds0116Command-escHint","list":"bds0116Command-list","groupList":"bds0116Command-groupList","group":"bds0116Command-group","item":"bds0116Command-item","itemActive":"bds0116Command-itemActive","itemLabel":"bds0116Command-itemLabel","itemDesc":"bds0116Command-itemDesc","shortcut":"bds0116Command-shortcut","empty":"bds0116Command-empty"};
|
|
1051
1090
|
|
|
1052
1091
|
// src/components/interaction/Command/Command.tsx
|
|
1053
|
-
var
|
|
1054
|
-
var
|
|
1092
|
+
var import_design_system_foundation23 = require("@boostdev/design-system-foundation");
|
|
1093
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1055
1094
|
function Command({
|
|
1056
1095
|
isOpen,
|
|
1057
1096
|
onClose,
|
|
@@ -1118,20 +1157,20 @@ function Command({
|
|
|
1118
1157
|
item.onSelect();
|
|
1119
1158
|
onClose();
|
|
1120
1159
|
};
|
|
1121
|
-
return /* @__PURE__ */ (0,
|
|
1160
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1122
1161
|
"dialog",
|
|
1123
1162
|
{
|
|
1124
1163
|
ref: dialogRef,
|
|
1125
|
-
className: (0,
|
|
1164
|
+
className: (0, import_design_system_foundation23.cn)(Command_default.dialog, className),
|
|
1126
1165
|
"aria-label": "Command palette",
|
|
1127
1166
|
onCancel: handleCancel,
|
|
1128
|
-
children: /* @__PURE__ */ (0,
|
|
1129
|
-
/* @__PURE__ */ (0,
|
|
1130
|
-
/* @__PURE__ */ (0,
|
|
1131
|
-
/* @__PURE__ */ (0,
|
|
1132
|
-
/* @__PURE__ */ (0,
|
|
1167
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: Command_default.palette, onKeyDown: handleKeyDown, children: [
|
|
1168
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: Command_default.searchRow, children: [
|
|
1169
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("svg", { "aria-hidden": "true", className: Command_default.searchIcon, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
|
|
1170
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
|
|
1171
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { strokeLinecap: "round", d: "M21 21l-4.35-4.35" })
|
|
1133
1172
|
] }),
|
|
1134
|
-
/* @__PURE__ */ (0,
|
|
1173
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1135
1174
|
"input",
|
|
1136
1175
|
{
|
|
1137
1176
|
ref: inputRef,
|
|
@@ -1147,32 +1186,32 @@ function Command({
|
|
|
1147
1186
|
onChange: (e) => setQuery(e.target.value)
|
|
1148
1187
|
}
|
|
1149
1188
|
),
|
|
1150
|
-
/* @__PURE__ */ (0,
|
|
1189
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("kbd", { className: Command_default.escHint, children: "Esc" })
|
|
1151
1190
|
] }),
|
|
1152
|
-
filtered.length > 0 ? /* @__PURE__ */ (0,
|
|
1153
|
-
group && /* @__PURE__ */ (0,
|
|
1154
|
-
/* @__PURE__ */ (0,
|
|
1191
|
+
filtered.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { id: listboxId, role: "listbox", className: Command_default.list, "aria-label": "Commands", children: Array.from(groups.entries()).map(([group, groupItems]) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("li", { role: "presentation", children: [
|
|
1192
|
+
group && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: Command_default.group, role: "presentation", children: group }),
|
|
1193
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { role: "group", "aria-label": group || void 0, className: Command_default.groupList, children: groupItems.map((item) => {
|
|
1155
1194
|
const flatIndex = filtered.indexOf(item);
|
|
1156
1195
|
const isActive = flatIndex === activeIndex;
|
|
1157
|
-
return /* @__PURE__ */ (0,
|
|
1196
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1158
1197
|
"li",
|
|
1159
1198
|
{
|
|
1160
1199
|
id: `cmd-${item.id}`,
|
|
1161
1200
|
role: "option",
|
|
1162
1201
|
"aria-selected": isActive,
|
|
1163
|
-
className: (0,
|
|
1202
|
+
className: (0, import_design_system_foundation23.cn)(Command_default.item, isActive && Command_default.itemActive),
|
|
1164
1203
|
onPointerDown: (e) => e.preventDefault(),
|
|
1165
1204
|
onClick: () => selectItem(item),
|
|
1166
1205
|
children: [
|
|
1167
|
-
/* @__PURE__ */ (0,
|
|
1168
|
-
item.description && /* @__PURE__ */ (0,
|
|
1169
|
-
item.shortcut && /* @__PURE__ */ (0,
|
|
1206
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: Command_default.itemLabel, children: item.label }),
|
|
1207
|
+
item.description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: Command_default.itemDesc, children: item.description }),
|
|
1208
|
+
item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("kbd", { className: Command_default.shortcut, children: item.shortcut })
|
|
1170
1209
|
]
|
|
1171
1210
|
},
|
|
1172
1211
|
item.id
|
|
1173
1212
|
);
|
|
1174
1213
|
}) })
|
|
1175
|
-
] }, group)) }) : /* @__PURE__ */ (0,
|
|
1214
|
+
] }, group)) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: Command_default.empty, "aria-live": "polite", children: [
|
|
1176
1215
|
"No results for \u201C",
|
|
1177
1216
|
query,
|
|
1178
1217
|
"\u201D"
|
|
@@ -1186,11 +1225,11 @@ function Command({
|
|
|
1186
1225
|
var import_react7 = require("react");
|
|
1187
1226
|
|
|
1188
1227
|
// src/components/interaction/Dialog/Dialog.module.css
|
|
1189
|
-
var Dialog_default = {"dialog":"
|
|
1228
|
+
var Dialog_default = {"dialog":"bds0116Dialog-dialog","dialogContent":"bds0116Dialog-dialogContent","closeForm":"bds0116Dialog-closeForm","closeButton":"bds0116Dialog-closeButton"};
|
|
1190
1229
|
|
|
1191
1230
|
// src/components/interaction/Dialog/Dialog.tsx
|
|
1192
|
-
var
|
|
1193
|
-
var
|
|
1231
|
+
var import_design_system_foundation24 = require("@boostdev/design-system-foundation");
|
|
1232
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1194
1233
|
function Dialog({ children, isOpen = false, className, onClose }) {
|
|
1195
1234
|
const dialogRef = (0, import_react7.useRef)(null);
|
|
1196
1235
|
(0, import_react7.useEffect)(() => {
|
|
@@ -1214,25 +1253,25 @@ function Dialog({ children, isOpen = false, className, onClose }) {
|
|
|
1214
1253
|
e.preventDefault();
|
|
1215
1254
|
onClose?.();
|
|
1216
1255
|
};
|
|
1217
|
-
return /* @__PURE__ */ (0,
|
|
1256
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
1218
1257
|
"dialog",
|
|
1219
1258
|
{
|
|
1220
1259
|
ref: dialogRef,
|
|
1221
|
-
className: (0,
|
|
1260
|
+
className: (0, import_design_system_foundation24.cn)(className, Dialog_default.dialog),
|
|
1222
1261
|
onClick: handleBackdropClick,
|
|
1223
1262
|
onCancel: handleCancel,
|
|
1224
1263
|
children: [
|
|
1225
|
-
/* @__PURE__ */ (0,
|
|
1264
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("form", { method: "dialog", className: Dialog_default.closeForm, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1226
1265
|
"button",
|
|
1227
1266
|
{
|
|
1228
1267
|
type: "submit",
|
|
1229
1268
|
className: Dialog_default.closeButton,
|
|
1230
1269
|
onClick: onClose,
|
|
1231
1270
|
"aria-label": "Close dialog",
|
|
1232
|
-
children: /* @__PURE__ */ (0,
|
|
1271
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
|
|
1233
1272
|
}
|
|
1234
1273
|
) }),
|
|
1235
|
-
/* @__PURE__ */ (0,
|
|
1274
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: Dialog_default.dialogContent, children })
|
|
1236
1275
|
]
|
|
1237
1276
|
}
|
|
1238
1277
|
);
|
|
@@ -1242,11 +1281,11 @@ function Dialog({ children, isOpen = false, className, onClose }) {
|
|
|
1242
1281
|
var import_react8 = require("react");
|
|
1243
1282
|
|
|
1244
1283
|
// src/components/interaction/Drawer/Drawer.module.css
|
|
1245
|
-
var Drawer_default = {"drawer":"
|
|
1284
|
+
var Drawer_default = {"drawer":"bds0116Drawer-drawer","panel":"bds0116Drawer-panel","--side_right":"bds0116Drawer---side_right","--side_left":"bds0116Drawer---side_left","header":"bds0116Drawer-header","closeButton":"bds0116Drawer-closeButton","body":"bds0116Drawer-body"};
|
|
1246
1285
|
|
|
1247
1286
|
// src/components/interaction/Drawer/Drawer.tsx
|
|
1248
|
-
var
|
|
1249
|
-
var
|
|
1287
|
+
var import_design_system_foundation25 = require("@boostdev/design-system-foundation");
|
|
1288
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1250
1289
|
function Drawer({
|
|
1251
1290
|
isOpen,
|
|
1252
1291
|
onClose,
|
|
@@ -1273,29 +1312,29 @@ function Drawer({
|
|
|
1273
1312
|
e.preventDefault();
|
|
1274
1313
|
onClose();
|
|
1275
1314
|
};
|
|
1276
|
-
return /* @__PURE__ */ (0,
|
|
1315
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1277
1316
|
"dialog",
|
|
1278
1317
|
{
|
|
1279
1318
|
ref: dialogRef,
|
|
1280
|
-
className: (0,
|
|
1319
|
+
className: (0, import_design_system_foundation25.cn)(Drawer_default.drawer, Drawer_default[`--side_${side}`], className),
|
|
1281
1320
|
"aria-label": arialLabel,
|
|
1282
1321
|
onClick: handleClick,
|
|
1283
1322
|
onCancel: handleCancel,
|
|
1284
|
-
children: /* @__PURE__ */ (0,
|
|
1285
|
-
/* @__PURE__ */ (0,
|
|
1323
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: Drawer_default.panel, children: [
|
|
1324
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: Drawer_default.header, children: [
|
|
1286
1325
|
!!title && title,
|
|
1287
|
-
/* @__PURE__ */ (0,
|
|
1326
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1288
1327
|
"button",
|
|
1289
1328
|
{
|
|
1290
1329
|
type: "button",
|
|
1291
1330
|
className: Drawer_default.closeButton,
|
|
1292
1331
|
onClick: onClose,
|
|
1293
1332
|
"aria-label": "Close drawer",
|
|
1294
|
-
children: /* @__PURE__ */ (0,
|
|
1333
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
|
|
1295
1334
|
}
|
|
1296
1335
|
)
|
|
1297
1336
|
] }),
|
|
1298
|
-
/* @__PURE__ */ (0,
|
|
1337
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: Drawer_default.body, children })
|
|
1299
1338
|
] })
|
|
1300
1339
|
}
|
|
1301
1340
|
);
|
|
@@ -1305,11 +1344,11 @@ function Drawer({
|
|
|
1305
1344
|
var import_react9 = require("react");
|
|
1306
1345
|
|
|
1307
1346
|
// src/components/interaction/DropdownMenu/DropdownMenu.module.css
|
|
1308
|
-
var DropdownMenu_default = {"wrapper":"
|
|
1347
|
+
var DropdownMenu_default = {"wrapper":"bds0116DropdownMenu-wrapper","menu":"bds0116DropdownMenu-menu","--placement_bottom-start":"bds0116DropdownMenu---placement_bottom-start","--placement_bottom-end":"bds0116DropdownMenu---placement_bottom-end","separator":"bds0116DropdownMenu-separator","item":"bds0116DropdownMenu-item","icon":"bds0116DropdownMenu-icon"};
|
|
1309
1348
|
|
|
1310
1349
|
// src/components/interaction/DropdownMenu/DropdownMenu.tsx
|
|
1311
|
-
var
|
|
1312
|
-
var
|
|
1350
|
+
var import_design_system_foundation26 = require("@boostdev/design-system-foundation");
|
|
1351
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1313
1352
|
function DropdownMenu({
|
|
1314
1353
|
trigger,
|
|
1315
1354
|
items,
|
|
@@ -1377,17 +1416,17 @@ function DropdownMenu({
|
|
|
1377
1416
|
if (typeof existingOnClick === "function") existingOnClick(e);
|
|
1378
1417
|
}
|
|
1379
1418
|
}) : trigger;
|
|
1380
|
-
return /* @__PURE__ */ (0,
|
|
1419
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ref: containerRef, className: (0, import_design_system_foundation26.cn)(DropdownMenu_default.wrapper, className), children: [
|
|
1381
1420
|
triggerEl,
|
|
1382
|
-
isOpen && /* @__PURE__ */ (0,
|
|
1421
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1383
1422
|
"ul",
|
|
1384
1423
|
{
|
|
1385
1424
|
id: menuId,
|
|
1386
1425
|
role: "menu",
|
|
1387
|
-
className: (0,
|
|
1388
|
-
children: items.map((item, index) => /* @__PURE__ */ (0,
|
|
1389
|
-
item.separator && /* @__PURE__ */ (0,
|
|
1390
|
-
/* @__PURE__ */ (0,
|
|
1426
|
+
className: (0, import_design_system_foundation26.cn)(DropdownMenu_default.menu, DropdownMenu_default[`--placement_${placement}`]),
|
|
1427
|
+
children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("li", { role: "presentation", children: [
|
|
1428
|
+
item.separator && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("hr", { className: DropdownMenu_default.separator, role: "separator" }),
|
|
1429
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
1391
1430
|
"button",
|
|
1392
1431
|
{
|
|
1393
1432
|
ref: (el) => {
|
|
@@ -1403,7 +1442,7 @@ function DropdownMenu({
|
|
|
1403
1442
|
},
|
|
1404
1443
|
onKeyDown: (e) => handleItemKeyDown(e, index),
|
|
1405
1444
|
children: [
|
|
1406
|
-
item.icon && /* @__PURE__ */ (0,
|
|
1445
|
+
item.icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: DropdownMenu_default.icon, "aria-hidden": "true", children: item.icon }),
|
|
1407
1446
|
item.label
|
|
1408
1447
|
]
|
|
1409
1448
|
}
|
|
@@ -1418,11 +1457,11 @@ function DropdownMenu({
|
|
|
1418
1457
|
var import_react10 = require("react");
|
|
1419
1458
|
|
|
1420
1459
|
// src/components/interaction/Popover/Popover.module.css
|
|
1421
|
-
var Popover_default = {"wrapper":"
|
|
1460
|
+
var Popover_default = {"wrapper":"bds0116Popover-wrapper","panel":"bds0116Popover-panel","--placement_bottom":"bds0116Popover---placement_bottom","--placement_top":"bds0116Popover---placement_top","--placement_right":"bds0116Popover---placement_right","--placement_left":"bds0116Popover---placement_left"};
|
|
1422
1461
|
|
|
1423
1462
|
// src/components/interaction/Popover/Popover.tsx
|
|
1424
|
-
var
|
|
1425
|
-
var
|
|
1463
|
+
var import_design_system_foundation27 = require("@boostdev/design-system-foundation");
|
|
1464
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1426
1465
|
function Popover({
|
|
1427
1466
|
children,
|
|
1428
1467
|
content,
|
|
@@ -1458,15 +1497,15 @@ function Popover({
|
|
|
1458
1497
|
if (typeof existingOnClick === "function") existingOnClick(e);
|
|
1459
1498
|
}
|
|
1460
1499
|
}) : children;
|
|
1461
|
-
return /* @__PURE__ */ (0,
|
|
1500
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { ref: containerRef, className: (0, import_design_system_foundation27.cn)(Popover_default.wrapper, className), children: [
|
|
1462
1501
|
trigger,
|
|
1463
|
-
isOpen && /* @__PURE__ */ (0,
|
|
1502
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1464
1503
|
"div",
|
|
1465
1504
|
{
|
|
1466
1505
|
id: panelId,
|
|
1467
1506
|
role: "dialog",
|
|
1468
1507
|
"aria-modal": "false",
|
|
1469
|
-
className: (0,
|
|
1508
|
+
className: (0, import_design_system_foundation27.cn)(Popover_default.panel, Popover_default[`--placement_${placement}`]),
|
|
1470
1509
|
children: content
|
|
1471
1510
|
}
|
|
1472
1511
|
)
|
|
@@ -1474,26 +1513,26 @@ function Popover({
|
|
|
1474
1513
|
}
|
|
1475
1514
|
|
|
1476
1515
|
// src/components/interaction/Rating/Rating.module.css
|
|
1477
|
-
var Rating_default = {"rating":"
|
|
1516
|
+
var Rating_default = {"rating":"bds0116Rating-rating","star":"bds0116Rating-star","--filled":"bds0116Rating---filled"};
|
|
1478
1517
|
|
|
1479
1518
|
// src/components/interaction/Rating/Rating.tsx
|
|
1480
|
-
var
|
|
1481
|
-
var
|
|
1519
|
+
var import_design_system_foundation28 = require("@boostdev/design-system-foundation");
|
|
1520
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1482
1521
|
function Rating({ value, max = 5, className }) {
|
|
1483
|
-
return /* @__PURE__ */ (0,
|
|
1522
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1484
1523
|
"div",
|
|
1485
1524
|
{
|
|
1486
|
-
className: (0,
|
|
1525
|
+
className: (0, import_design_system_foundation28.cn)(Rating_default.rating, className),
|
|
1487
1526
|
role: "img",
|
|
1488
1527
|
"aria-label": `${value} out of ${max} stars`,
|
|
1489
|
-
children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ (0,
|
|
1528
|
+
children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1490
1529
|
"svg",
|
|
1491
1530
|
{
|
|
1492
1531
|
"aria-hidden": "true",
|
|
1493
|
-
className: (0,
|
|
1532
|
+
className: (0, import_design_system_foundation28.cn)(Rating_default.star, i < value && Rating_default["--filled"]),
|
|
1494
1533
|
fill: "currentColor",
|
|
1495
1534
|
viewBox: "0 0 24 24",
|
|
1496
|
-
children: /* @__PURE__ */ (0,
|
|
1535
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" })
|
|
1497
1536
|
},
|
|
1498
1537
|
i
|
|
1499
1538
|
))
|
|
@@ -1505,11 +1544,11 @@ function Rating({ value, max = 5, className }) {
|
|
|
1505
1544
|
var import_react11 = require("react");
|
|
1506
1545
|
|
|
1507
1546
|
// src/components/interaction/Toast/Toast.module.css
|
|
1508
|
-
var Toast_default = {"toastContainer":"
|
|
1547
|
+
var Toast_default = {"toastContainer":"bds0116Toast-toastContainer","toast":"bds0116Toast-toast","--variant_success":"bds0116Toast---variant_success","--variant_warning":"bds0116Toast---variant_warning","--variant_info":"bds0116Toast---variant_info","--variant_error":"bds0116Toast---variant_error","message":"bds0116Toast-message","closeButton":"bds0116Toast-closeButton"};
|
|
1509
1548
|
|
|
1510
1549
|
// src/components/interaction/Toast/Toast.tsx
|
|
1511
|
-
var
|
|
1512
|
-
var
|
|
1550
|
+
var import_design_system_foundation29 = require("@boostdev/design-system-foundation");
|
|
1551
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1513
1552
|
var ToastContext = (0, import_react11.createContext)(void 0);
|
|
1514
1553
|
function ToastProvider({ children }) {
|
|
1515
1554
|
const [toasts, setToasts] = (0, import_react11.useState)([]);
|
|
@@ -1521,9 +1560,9 @@ function ToastProvider({ children }) {
|
|
|
1521
1560
|
setToasts((prev) => prev.filter((toast) => toast.id !== id));
|
|
1522
1561
|
}, []);
|
|
1523
1562
|
const value = (0, import_react11.useMemo)(() => ({ showToast }), [showToast]);
|
|
1524
|
-
return /* @__PURE__ */ (0,
|
|
1563
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(ToastContext.Provider, { value, children: [
|
|
1525
1564
|
children,
|
|
1526
|
-
/* @__PURE__ */ (0,
|
|
1565
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: Toast_default.toastContainer, children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
1527
1566
|
ToastItem,
|
|
1528
1567
|
{
|
|
1529
1568
|
toast,
|
|
@@ -1538,9 +1577,9 @@ function ToastItem({ toast, onRemove }) {
|
|
|
1538
1577
|
const timer = setTimeout(onRemove, 5e3);
|
|
1539
1578
|
return () => clearTimeout(timer);
|
|
1540
1579
|
}, [onRemove]);
|
|
1541
|
-
return /* @__PURE__ */ (0,
|
|
1542
|
-
/* @__PURE__ */ (0,
|
|
1543
|
-
/* @__PURE__ */ (0,
|
|
1580
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: (0, import_design_system_foundation29.cn)(Toast_default.toast, Toast_default[`--variant_${toast.variant}`]), role: "status", children: [
|
|
1581
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: Toast_default.message, children: toast.message }),
|
|
1582
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { type: "button", className: Toast_default.closeButton, onClick: onRemove, "aria-label": "Dismiss", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) }) })
|
|
1544
1583
|
] });
|
|
1545
1584
|
}
|
|
1546
1585
|
function useToast() {
|
|
@@ -1555,50 +1594,50 @@ function useToast() {
|
|
|
1555
1594
|
var import_react12 = require("react");
|
|
1556
1595
|
|
|
1557
1596
|
// src/components/interaction/form/Checkbox/Checkbox.module.css
|
|
1558
|
-
var Checkbox_default = {"checkboxGroup":"
|
|
1597
|
+
var Checkbox_default = {"checkboxGroup":"bds0116Checkbox-checkboxGroup","inputWrapper":"bds0116Checkbox-inputWrapper","checkbox":"bds0116Checkbox-checkbox","checkboxError":"bds0116Checkbox-checkboxError"};
|
|
1559
1598
|
|
|
1560
1599
|
// src/components/interaction/form/atoms/Message.module.css
|
|
1561
|
-
var Message_default = {"error":"
|
|
1600
|
+
var Message_default = {"error":"bds0116Message-error","hint":"bds0116Message-hint"};
|
|
1562
1601
|
|
|
1563
1602
|
// src/components/interaction/form/atoms/Message.tsx
|
|
1564
|
-
var
|
|
1603
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1565
1604
|
var Message = ({ message, type, inputId }) => {
|
|
1566
1605
|
if (!message) return null;
|
|
1567
|
-
return /* @__PURE__ */ (0,
|
|
1606
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { id: inputId + type, className: Message_default[type], children: message });
|
|
1568
1607
|
};
|
|
1569
1608
|
|
|
1570
1609
|
// src/components/interaction/form/atoms/Label.module.css
|
|
1571
|
-
var Label_default = {"label":"
|
|
1610
|
+
var Label_default = {"label":"bds0116Label-label"};
|
|
1572
1611
|
|
|
1573
1612
|
// src/components/interaction/form/atoms/Label.tsx
|
|
1574
|
-
var
|
|
1613
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1575
1614
|
var Label = ({ label, id }) => {
|
|
1576
|
-
return /* @__PURE__ */ (0,
|
|
1615
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("label", { htmlFor: id, className: Label_default.label, children: label });
|
|
1577
1616
|
};
|
|
1578
1617
|
|
|
1579
1618
|
// src/components/interaction/form/Checkbox/Checkbox.tsx
|
|
1580
|
-
var
|
|
1619
|
+
var import_design_system_foundation31 = require("@boostdev/design-system-foundation");
|
|
1581
1620
|
|
|
1582
1621
|
// src/components/interaction/form/atoms/InputContainer.module.css
|
|
1583
|
-
var InputContainer_default = {"container":"
|
|
1622
|
+
var InputContainer_default = {"container":"bds0116InputContainer-container"};
|
|
1584
1623
|
|
|
1585
1624
|
// src/components/interaction/form/atoms/InputContainer.tsx
|
|
1586
|
-
var
|
|
1587
|
-
var
|
|
1625
|
+
var import_design_system_foundation30 = require("@boostdev/design-system-foundation");
|
|
1626
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1588
1627
|
var InputContainer = ({ children, className }) => {
|
|
1589
|
-
return /* @__PURE__ */ (0,
|
|
1628
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: (0, import_design_system_foundation30.cn)(InputContainer_default.container, className), children });
|
|
1590
1629
|
};
|
|
1591
1630
|
|
|
1592
1631
|
// src/components/interaction/form/Checkbox/Checkbox.tsx
|
|
1593
|
-
var
|
|
1632
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1594
1633
|
function Checkbox({ label, name, error, hint, className, ...props }) {
|
|
1595
1634
|
const id = name + (0, import_react12.useId)();
|
|
1596
1635
|
const hintId = id + "hint";
|
|
1597
1636
|
const errorId = id + "error";
|
|
1598
1637
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1599
|
-
return /* @__PURE__ */ (0,
|
|
1600
|
-
/* @__PURE__ */ (0,
|
|
1601
|
-
/* @__PURE__ */ (0,
|
|
1638
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(InputContainer, { className: (0, import_design_system_foundation31.cn)(Checkbox_default.checkboxGroup, className), children: [
|
|
1639
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: Checkbox_default.inputWrapper, children: [
|
|
1640
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
1602
1641
|
"input",
|
|
1603
1642
|
{
|
|
1604
1643
|
"aria-describedby": describedBy,
|
|
@@ -1606,14 +1645,14 @@ function Checkbox({ label, name, error, hint, className, ...props }) {
|
|
|
1606
1645
|
type: "checkbox",
|
|
1607
1646
|
id,
|
|
1608
1647
|
name,
|
|
1609
|
-
className: (0,
|
|
1648
|
+
className: (0, import_design_system_foundation31.cn)(Checkbox_default.checkbox, error && Checkbox_default.checkboxError),
|
|
1610
1649
|
...props
|
|
1611
1650
|
}
|
|
1612
1651
|
),
|
|
1613
|
-
/* @__PURE__ */ (0,
|
|
1652
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Label, { id, label })
|
|
1614
1653
|
] }),
|
|
1615
|
-
/* @__PURE__ */ (0,
|
|
1616
|
-
/* @__PURE__ */ (0,
|
|
1654
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
1655
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
1617
1656
|
] });
|
|
1618
1657
|
}
|
|
1619
1658
|
|
|
@@ -1621,11 +1660,11 @@ function Checkbox({ label, name, error, hint, className, ...props }) {
|
|
|
1621
1660
|
var import_react13 = require("react");
|
|
1622
1661
|
|
|
1623
1662
|
// src/components/interaction/form/Combobox/Combobox.module.css
|
|
1624
|
-
var Combobox_default = {"formGroup":"
|
|
1663
|
+
var Combobox_default = {"formGroup":"bds0116Combobox-formGroup","inputWrapper":"bds0116Combobox-inputWrapper","input":"bds0116Combobox-input","inputError":"bds0116Combobox-inputError","chevron":"bds0116Combobox-chevron","listbox":"bds0116Combobox-listbox","option":"bds0116Combobox-option","--highlighted":"bds0116Combobox---highlighted","--selected":"bds0116Combobox---selected","--disabled":"bds0116Combobox---disabled"};
|
|
1625
1664
|
|
|
1626
1665
|
// src/components/interaction/form/Combobox/Combobox.tsx
|
|
1627
|
-
var
|
|
1628
|
-
var
|
|
1666
|
+
var import_design_system_foundation32 = require("@boostdev/design-system-foundation");
|
|
1667
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1629
1668
|
function Combobox({
|
|
1630
1669
|
label,
|
|
1631
1670
|
name,
|
|
@@ -1703,10 +1742,10 @@ function Combobox({
|
|
|
1703
1742
|
setIsOpen(false);
|
|
1704
1743
|
}
|
|
1705
1744
|
};
|
|
1706
|
-
return /* @__PURE__ */ (0,
|
|
1707
|
-
/* @__PURE__ */ (0,
|
|
1708
|
-
/* @__PURE__ */ (0,
|
|
1709
|
-
/* @__PURE__ */ (0,
|
|
1745
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(InputContainer, { className: (0, import_design_system_foundation32.cn)(Combobox_default.formGroup, className), children: [
|
|
1746
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Label, { id, label }),
|
|
1747
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { ref: containerRef, className: Combobox_default.inputWrapper, children: [
|
|
1748
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
1710
1749
|
"input",
|
|
1711
1750
|
{
|
|
1712
1751
|
ref: inputRef,
|
|
@@ -1725,28 +1764,28 @@ function Combobox({
|
|
|
1725
1764
|
placeholder,
|
|
1726
1765
|
value: inputValue,
|
|
1727
1766
|
disabled,
|
|
1728
|
-
className: (0,
|
|
1767
|
+
className: (0, import_design_system_foundation32.cn)(Combobox_default.input, error ? Combobox_default.inputError : void 0),
|
|
1729
1768
|
onChange: handleInputChange,
|
|
1730
1769
|
onKeyDown: handleKeyDown,
|
|
1731
1770
|
onFocus: () => setIsOpen(true)
|
|
1732
1771
|
}
|
|
1733
1772
|
),
|
|
1734
|
-
/* @__PURE__ */ (0,
|
|
1735
|
-
isOpen && filtered.length > 0 && /* @__PURE__ */ (0,
|
|
1773
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: Combobox_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" }) }) }),
|
|
1774
|
+
isOpen && filtered.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
1736
1775
|
"ul",
|
|
1737
1776
|
{
|
|
1738
1777
|
id: listboxId,
|
|
1739
1778
|
role: "listbox",
|
|
1740
1779
|
"aria-label": String(label),
|
|
1741
1780
|
className: Combobox_default.listbox,
|
|
1742
|
-
children: filtered.map((option, index) => /* @__PURE__ */ (0,
|
|
1781
|
+
children: filtered.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
1743
1782
|
"li",
|
|
1744
1783
|
{
|
|
1745
1784
|
id: getOptionId(index),
|
|
1746
1785
|
role: "option",
|
|
1747
1786
|
"aria-selected": option.value === value,
|
|
1748
1787
|
"aria-disabled": option.disabled,
|
|
1749
|
-
className: (0,
|
|
1788
|
+
className: (0, import_design_system_foundation32.cn)(
|
|
1750
1789
|
Combobox_default.option,
|
|
1751
1790
|
index === highlightedIndex ? Combobox_default["--highlighted"] : void 0,
|
|
1752
1791
|
option.value === value ? Combobox_default["--selected"] : void 0,
|
|
@@ -1763,8 +1802,8 @@ function Combobox({
|
|
|
1763
1802
|
}
|
|
1764
1803
|
)
|
|
1765
1804
|
] }),
|
|
1766
|
-
/* @__PURE__ */ (0,
|
|
1767
|
-
/* @__PURE__ */ (0,
|
|
1805
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
1806
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
1768
1807
|
] });
|
|
1769
1808
|
}
|
|
1770
1809
|
|
|
@@ -1772,11 +1811,11 @@ function Combobox({
|
|
|
1772
1811
|
var import_react14 = require("react");
|
|
1773
1812
|
|
|
1774
1813
|
// src/components/interaction/form/FileInput/FileInput.module.css
|
|
1775
|
-
var FileInput_default = {"formGroup":"
|
|
1814
|
+
var FileInput_default = {"formGroup":"bds0116FileInput-formGroup","dropZone":"bds0116FileInput-dropZone","isDragging":"bds0116FileInput-isDragging","hasError":"bds0116FileInput-hasError","isDisabled":"bds0116FileInput-isDisabled","icon":"bds0116FileInput-icon","prompt":"bds0116FileInput-prompt","acceptHint":"bds0116FileInput-acceptHint","hiddenInput":"bds0116FileInput-hiddenInput"};
|
|
1776
1815
|
|
|
1777
1816
|
// src/components/interaction/form/FileInput/FileInput.tsx
|
|
1778
|
-
var
|
|
1779
|
-
var
|
|
1817
|
+
var import_design_system_foundation33 = require("@boostdev/design-system-foundation");
|
|
1818
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
1780
1819
|
function FileInput({
|
|
1781
1820
|
label,
|
|
1782
1821
|
name,
|
|
@@ -1824,24 +1863,24 @@ function FileInput({
|
|
|
1824
1863
|
if (!disabled) setIsDragging(true);
|
|
1825
1864
|
};
|
|
1826
1865
|
const handleDragLeave = () => setIsDragging(false);
|
|
1827
|
-
return /* @__PURE__ */ (0,
|
|
1828
|
-
/* @__PURE__ */ (0,
|
|
1829
|
-
/* @__PURE__ */ (0,
|
|
1866
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(InputContainer, { className: (0, import_design_system_foundation33.cn)(FileInput_default.formGroup, className), children: [
|
|
1867
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Label, { id: uid, label }),
|
|
1868
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
1830
1869
|
"label",
|
|
1831
1870
|
{
|
|
1832
1871
|
htmlFor: uid,
|
|
1833
|
-
className: (0,
|
|
1872
|
+
className: (0, import_design_system_foundation33.cn)(FileInput_default.dropZone, isDragging && FileInput_default.isDragging, error && FileInput_default.hasError, disabled && FileInput_default.isDisabled),
|
|
1834
1873
|
onDrop: handleDrop,
|
|
1835
1874
|
onDragOver: handleDragOver,
|
|
1836
1875
|
onDragLeave: handleDragLeave,
|
|
1837
1876
|
children: [
|
|
1838
|
-
/* @__PURE__ */ (0,
|
|
1839
|
-
/* @__PURE__ */ (0,
|
|
1840
|
-
/* @__PURE__ */ (0,
|
|
1877
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("svg", { "aria-hidden": "true", className: FileInput_default.icon, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" }) }),
|
|
1878
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: FileInput_default.prompt, children: fileNames.length > 0 ? fileNames.join(", ") : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
|
|
1879
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("strong", { children: "Click to upload" }),
|
|
1841
1880
|
" or drag and drop"
|
|
1842
1881
|
] }) }),
|
|
1843
|
-
accept && /* @__PURE__ */ (0,
|
|
1844
|
-
/* @__PURE__ */ (0,
|
|
1882
|
+
accept && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: FileInput_default.acceptHint, children: accept }),
|
|
1883
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
1845
1884
|
"input",
|
|
1846
1885
|
{
|
|
1847
1886
|
ref: inputRef,
|
|
@@ -1860,8 +1899,8 @@ function FileInput({
|
|
|
1860
1899
|
]
|
|
1861
1900
|
}
|
|
1862
1901
|
),
|
|
1863
|
-
/* @__PURE__ */ (0,
|
|
1864
|
-
/* @__PURE__ */ (0,
|
|
1902
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Message, { inputId: uid, type: "error", message: error }),
|
|
1903
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Message, { inputId: uid, type: "hint", message: hint })
|
|
1865
1904
|
] });
|
|
1866
1905
|
}
|
|
1867
1906
|
|
|
@@ -1869,11 +1908,11 @@ function FileInput({
|
|
|
1869
1908
|
var import_react15 = require("react");
|
|
1870
1909
|
|
|
1871
1910
|
// src/components/interaction/form/FormInput/FormInput.module.css
|
|
1872
|
-
var FormInput_default = {"formGroup":"
|
|
1911
|
+
var FormInput_default = {"formGroup":"bds0116FormInput-formGroup","input":"bds0116FormInput-input","inputError":"bds0116FormInput-inputError"};
|
|
1873
1912
|
|
|
1874
1913
|
// src/components/interaction/form/FormInput/FormInput.tsx
|
|
1875
|
-
var
|
|
1876
|
-
var
|
|
1914
|
+
var import_design_system_foundation34 = require("@boostdev/design-system-foundation");
|
|
1915
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
1877
1916
|
function FormInput({
|
|
1878
1917
|
label,
|
|
1879
1918
|
name,
|
|
@@ -1887,9 +1926,9 @@ function FormInput({
|
|
|
1887
1926
|
const hintId = id + "hint";
|
|
1888
1927
|
const errorId = id + "error";
|
|
1889
1928
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1890
|
-
return /* @__PURE__ */ (0,
|
|
1891
|
-
/* @__PURE__ */ (0,
|
|
1892
|
-
/* @__PURE__ */ (0,
|
|
1929
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(InputContainer, { className: (0, import_design_system_foundation34.cn)(FormInput_default.formGroup, className), children: [
|
|
1930
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Label, { id, label }),
|
|
1931
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
1893
1932
|
"input",
|
|
1894
1933
|
{
|
|
1895
1934
|
"aria-invalid": !!error,
|
|
@@ -1897,12 +1936,12 @@ function FormInput({
|
|
|
1897
1936
|
"aria-label": ariaLabel,
|
|
1898
1937
|
id,
|
|
1899
1938
|
name,
|
|
1900
|
-
className: (0,
|
|
1939
|
+
className: (0, import_design_system_foundation34.cn)(FormInput_default.input, error && FormInput_default.inputError),
|
|
1901
1940
|
...props
|
|
1902
1941
|
}
|
|
1903
1942
|
),
|
|
1904
|
-
/* @__PURE__ */ (0,
|
|
1905
|
-
/* @__PURE__ */ (0,
|
|
1943
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
1944
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
1906
1945
|
] });
|
|
1907
1946
|
}
|
|
1908
1947
|
|
|
@@ -1910,11 +1949,11 @@ function FormInput({
|
|
|
1910
1949
|
var import_react16 = require("react");
|
|
1911
1950
|
|
|
1912
1951
|
// src/components/interaction/form/NumberInput/NumberInput.module.css
|
|
1913
|
-
var NumberInput_default = {"formGroup":"
|
|
1952
|
+
var NumberInput_default = {"formGroup":"bds0116NumberInput-formGroup","inputRow":"bds0116NumberInput-inputRow","input":"bds0116NumberInput-input","inputError":"bds0116NumberInput-inputError","stepper":"bds0116NumberInput-stepper"};
|
|
1914
1953
|
|
|
1915
1954
|
// src/components/interaction/form/NumberInput/NumberInput.tsx
|
|
1916
|
-
var
|
|
1917
|
-
var
|
|
1955
|
+
var import_design_system_foundation35 = require("@boostdev/design-system-foundation");
|
|
1956
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
1918
1957
|
function NumberInput({
|
|
1919
1958
|
label,
|
|
1920
1959
|
name,
|
|
@@ -1946,10 +1985,10 @@ function NumberInput({
|
|
|
1946
1985
|
if (!isControlled) setInternalValue(next);
|
|
1947
1986
|
onChange?.(next);
|
|
1948
1987
|
};
|
|
1949
|
-
return /* @__PURE__ */ (0,
|
|
1950
|
-
/* @__PURE__ */ (0,
|
|
1951
|
-
/* @__PURE__ */ (0,
|
|
1952
|
-
/* @__PURE__ */ (0,
|
|
1988
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(InputContainer, { className: (0, import_design_system_foundation35.cn)(NumberInput_default.formGroup, className), children: [
|
|
1989
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Label, { id: uid, label }),
|
|
1990
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: NumberInput_default.inputRow, children: [
|
|
1991
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
1953
1992
|
"button",
|
|
1954
1993
|
{
|
|
1955
1994
|
type: "button",
|
|
@@ -1958,10 +1997,10 @@ function NumberInput({
|
|
|
1958
1997
|
disabled: disabled || min !== void 0 && currentValue <= min,
|
|
1959
1998
|
onClick: () => adjust(-step),
|
|
1960
1999
|
tabIndex: -1,
|
|
1961
|
-
children: /* @__PURE__ */ (0,
|
|
2000
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12h14" }) })
|
|
1962
2001
|
}
|
|
1963
2002
|
),
|
|
1964
|
-
/* @__PURE__ */ (0,
|
|
2003
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
1965
2004
|
"input",
|
|
1966
2005
|
{
|
|
1967
2006
|
ref: inputRef,
|
|
@@ -1975,7 +2014,7 @@ function NumberInput({
|
|
|
1975
2014
|
disabled,
|
|
1976
2015
|
"aria-invalid": !!error,
|
|
1977
2016
|
"aria-describedby": describedBy,
|
|
1978
|
-
className: (0,
|
|
2017
|
+
className: (0, import_design_system_foundation35.cn)(NumberInput_default.input, error ? NumberInput_default.inputError : void 0),
|
|
1979
2018
|
onChange: (e) => {
|
|
1980
2019
|
const v = parseFloat(e.target.value);
|
|
1981
2020
|
if (!isControlled) setInternalValue(isNaN(v) ? 0 : v);
|
|
@@ -1983,7 +2022,7 @@ function NumberInput({
|
|
|
1983
2022
|
}
|
|
1984
2023
|
}
|
|
1985
2024
|
),
|
|
1986
|
-
/* @__PURE__ */ (0,
|
|
2025
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
1987
2026
|
"button",
|
|
1988
2027
|
{
|
|
1989
2028
|
type: "button",
|
|
@@ -1992,12 +2031,12 @@ function NumberInput({
|
|
|
1992
2031
|
disabled: disabled || max !== void 0 && currentValue >= max,
|
|
1993
2032
|
onClick: () => adjust(step),
|
|
1994
2033
|
tabIndex: -1,
|
|
1995
|
-
children: /* @__PURE__ */ (0,
|
|
2034
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 5v14M5 12h14" }) })
|
|
1996
2035
|
}
|
|
1997
2036
|
)
|
|
1998
2037
|
] }),
|
|
1999
|
-
/* @__PURE__ */ (0,
|
|
2000
|
-
/* @__PURE__ */ (0,
|
|
2038
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Message, { inputId: uid, type: "error", message: error }),
|
|
2039
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Message, { inputId: uid, type: "hint", message: hint })
|
|
2001
2040
|
] });
|
|
2002
2041
|
}
|
|
2003
2042
|
|
|
@@ -2005,19 +2044,19 @@ function NumberInput({
|
|
|
2005
2044
|
var import_react17 = require("react");
|
|
2006
2045
|
|
|
2007
2046
|
// src/components/interaction/form/Radio/Radio.module.css
|
|
2008
|
-
var Radio_default = {"radioGroup":"
|
|
2047
|
+
var Radio_default = {"radioGroup":"bds0116Radio-radioGroup","inputWrapper":"bds0116Radio-inputWrapper","textWrapper":"bds0116Radio-textWrapper","description":"bds0116Radio-description","radio":"bds0116Radio-radio","radioError":"bds0116Radio-radioError"};
|
|
2009
2048
|
|
|
2010
2049
|
// src/components/interaction/form/Radio/Radio.tsx
|
|
2011
|
-
var
|
|
2012
|
-
var
|
|
2050
|
+
var import_design_system_foundation36 = require("@boostdev/design-system-foundation");
|
|
2051
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
2013
2052
|
function Radio({ label, name, description, error, hint, className, ...props }) {
|
|
2014
2053
|
const id = name + (0, import_react17.useId)();
|
|
2015
2054
|
const hintId = id + "hint";
|
|
2016
2055
|
const errorId = id + "error";
|
|
2017
2056
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2018
|
-
return /* @__PURE__ */ (0,
|
|
2019
|
-
/* @__PURE__ */ (0,
|
|
2020
|
-
/* @__PURE__ */ (0,
|
|
2057
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(InputContainer, { className: (0, import_design_system_foundation36.cn)(Radio_default.radioGroup, className), children: [
|
|
2058
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: Radio_default.inputWrapper, children: [
|
|
2059
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2021
2060
|
"input",
|
|
2022
2061
|
{
|
|
2023
2062
|
"aria-describedby": describedBy,
|
|
@@ -2025,17 +2064,17 @@ function Radio({ label, name, description, error, hint, className, ...props }) {
|
|
|
2025
2064
|
type: "radio",
|
|
2026
2065
|
id,
|
|
2027
2066
|
name,
|
|
2028
|
-
className: (0,
|
|
2067
|
+
className: (0, import_design_system_foundation36.cn)(Radio_default.radio, error && Radio_default.radioError),
|
|
2029
2068
|
...props
|
|
2030
2069
|
}
|
|
2031
2070
|
),
|
|
2032
|
-
/* @__PURE__ */ (0,
|
|
2033
|
-
/* @__PURE__ */ (0,
|
|
2034
|
-
description && /* @__PURE__ */ (0,
|
|
2071
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: Radio_default.textWrapper, children: [
|
|
2072
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Label, { id, label }),
|
|
2073
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: Radio_default.description, children: description })
|
|
2035
2074
|
] })
|
|
2036
2075
|
] }),
|
|
2037
|
-
/* @__PURE__ */ (0,
|
|
2038
|
-
/* @__PURE__ */ (0,
|
|
2076
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
2077
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
2039
2078
|
] });
|
|
2040
2079
|
}
|
|
2041
2080
|
|
|
@@ -2043,11 +2082,11 @@ function Radio({ label, name, description, error, hint, className, ...props }) {
|
|
|
2043
2082
|
var import_react18 = require("react");
|
|
2044
2083
|
|
|
2045
2084
|
// src/components/interaction/form/Select/Select.module.css
|
|
2046
|
-
var Select_default = {"formGroup":"
|
|
2085
|
+
var Select_default = {"formGroup":"bds0116Select-formGroup","selectWrapper":"bds0116Select-selectWrapper","select":"bds0116Select-select","selectError":"bds0116Select-selectError","chevron":"bds0116Select-chevron"};
|
|
2047
2086
|
|
|
2048
2087
|
// src/components/interaction/form/Select/Select.tsx
|
|
2049
|
-
var
|
|
2050
|
-
var
|
|
2088
|
+
var import_design_system_foundation37 = require("@boostdev/design-system-foundation");
|
|
2089
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2051
2090
|
function Select({
|
|
2052
2091
|
label,
|
|
2053
2092
|
name,
|
|
@@ -2062,28 +2101,28 @@ function Select({
|
|
|
2062
2101
|
const hintId = id + "hint";
|
|
2063
2102
|
const errorId = id + "error";
|
|
2064
2103
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2065
|
-
return /* @__PURE__ */ (0,
|
|
2066
|
-
/* @__PURE__ */ (0,
|
|
2067
|
-
/* @__PURE__ */ (0,
|
|
2068
|
-
/* @__PURE__ */ (0,
|
|
2104
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(InputContainer, { className: (0, import_design_system_foundation37.cn)(Select_default.formGroup, className), children: [
|
|
2105
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Label, { id, label }),
|
|
2106
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: Select_default.selectWrapper, children: [
|
|
2107
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
2069
2108
|
"select",
|
|
2070
2109
|
{
|
|
2071
2110
|
id,
|
|
2072
2111
|
name,
|
|
2073
2112
|
"aria-invalid": !!error,
|
|
2074
2113
|
"aria-describedby": describedBy,
|
|
2075
|
-
className: (0,
|
|
2114
|
+
className: (0, import_design_system_foundation37.cn)(Select_default.select, error ? Select_default.selectError : void 0),
|
|
2076
2115
|
...props,
|
|
2077
2116
|
children: [
|
|
2078
|
-
placeholder && /* @__PURE__ */ (0,
|
|
2079
|
-
options.map(({ value, label: optLabel, disabled }) => /* @__PURE__ */ (0,
|
|
2117
|
+
placeholder && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("option", { value: "", disabled: true, hidden: true, children: placeholder }),
|
|
2118
|
+
options.map(({ value, label: optLabel, disabled }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("option", { value, disabled, children: optLabel }, value))
|
|
2080
2119
|
]
|
|
2081
2120
|
}
|
|
2082
2121
|
),
|
|
2083
|
-
/* @__PURE__ */ (0,
|
|
2122
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: Select_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" }) }) })
|
|
2084
2123
|
] }),
|
|
2085
|
-
/* @__PURE__ */ (0,
|
|
2086
|
-
/* @__PURE__ */ (0,
|
|
2124
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
2125
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
2087
2126
|
] });
|
|
2088
2127
|
}
|
|
2089
2128
|
|
|
@@ -2091,11 +2130,11 @@ function Select({
|
|
|
2091
2130
|
var import_react19 = require("react");
|
|
2092
2131
|
|
|
2093
2132
|
// src/components/interaction/form/Slider/Slider.module.css
|
|
2094
|
-
var Slider_default = {"formGroup":"
|
|
2133
|
+
var Slider_default = {"formGroup":"bds0116Slider-formGroup","labelRow":"bds0116Slider-labelRow","value":"bds0116Slider-value","slider":"bds0116Slider-slider","sliderError":"bds0116Slider-sliderError"};
|
|
2095
2134
|
|
|
2096
2135
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
2097
|
-
var
|
|
2098
|
-
var
|
|
2136
|
+
var import_design_system_foundation38 = require("@boostdev/design-system-foundation");
|
|
2137
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
2099
2138
|
function Slider({
|
|
2100
2139
|
label,
|
|
2101
2140
|
name,
|
|
@@ -2120,12 +2159,12 @@ function Slider({
|
|
|
2120
2159
|
if (!isControlled) setInternalValue(Number(e.target.value));
|
|
2121
2160
|
onChange?.(e);
|
|
2122
2161
|
};
|
|
2123
|
-
return /* @__PURE__ */ (0,
|
|
2124
|
-
/* @__PURE__ */ (0,
|
|
2125
|
-
/* @__PURE__ */ (0,
|
|
2126
|
-
showValue && /* @__PURE__ */ (0,
|
|
2162
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(InputContainer, { className: (0, import_design_system_foundation38.cn)(Slider_default.formGroup, className), children: [
|
|
2163
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: Slider_default.labelRow, children: [
|
|
2164
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Label, { id, label }),
|
|
2165
|
+
showValue && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: Slider_default.value, children: currentValue })
|
|
2127
2166
|
] }),
|
|
2128
|
-
/* @__PURE__ */ (0,
|
|
2167
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
2129
2168
|
"input",
|
|
2130
2169
|
{
|
|
2131
2170
|
type: "range",
|
|
@@ -2137,14 +2176,14 @@ function Slider({
|
|
|
2137
2176
|
"aria-valuemin": min,
|
|
2138
2177
|
"aria-valuemax": max,
|
|
2139
2178
|
"aria-valuenow": currentValue,
|
|
2140
|
-
className: (0,
|
|
2179
|
+
className: (0, import_design_system_foundation38.cn)(Slider_default.slider, error ? Slider_default.sliderError : void 0),
|
|
2141
2180
|
style: { "--slider_fill": `${fillPct}%` },
|
|
2142
2181
|
onChange: handleChange,
|
|
2143
2182
|
...props
|
|
2144
2183
|
}
|
|
2145
2184
|
),
|
|
2146
|
-
/* @__PURE__ */ (0,
|
|
2147
|
-
/* @__PURE__ */ (0,
|
|
2185
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
2186
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
2148
2187
|
] });
|
|
2149
2188
|
}
|
|
2150
2189
|
|
|
@@ -2152,11 +2191,11 @@ function Slider({
|
|
|
2152
2191
|
var import_react20 = require("react");
|
|
2153
2192
|
|
|
2154
2193
|
// src/components/interaction/form/Switch/Switch.module.css
|
|
2155
|
-
var Switch_default = {"switchGroup":"
|
|
2194
|
+
var Switch_default = {"switchGroup":"bds0116Switch-switchGroup","--size_small":"bds0116Switch---size_small","--size_medium":"bds0116Switch---size_medium","--size_large":"bds0116Switch---size_large","inputWrapper":"bds0116Switch-inputWrapper","trackWrapper":"bds0116Switch-trackWrapper","switch":"bds0116Switch-switch","track":"bds0116Switch-track","thumb":"bds0116Switch-thumb","switchError":"bds0116Switch-switchError"};
|
|
2156
2195
|
|
|
2157
2196
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2158
|
-
var
|
|
2159
|
-
var
|
|
2197
|
+
var import_design_system_foundation39 = require("@boostdev/design-system-foundation");
|
|
2198
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
2160
2199
|
function Switch({
|
|
2161
2200
|
label,
|
|
2162
2201
|
name,
|
|
@@ -2164,16 +2203,18 @@ function Switch({
|
|
|
2164
2203
|
error,
|
|
2165
2204
|
hint,
|
|
2166
2205
|
className,
|
|
2206
|
+
prefix,
|
|
2167
2207
|
...props
|
|
2168
2208
|
}) {
|
|
2169
2209
|
const id = name + (0, import_react20.useId)();
|
|
2170
2210
|
const hintId = id + "hint";
|
|
2171
2211
|
const errorId = id + "error";
|
|
2172
2212
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2173
|
-
return /* @__PURE__ */ (0,
|
|
2174
|
-
/* @__PURE__ */ (0,
|
|
2175
|
-
/* @__PURE__ */ (0,
|
|
2176
|
-
|
|
2213
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(InputContainer, { className: (0, import_design_system_foundation39.cn)(Switch_default.switchGroup, Switch_default[`--size_${size}`], className), children: [
|
|
2214
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: Switch_default.inputWrapper, children: [
|
|
2215
|
+
prefix && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Label, { id, label: prefix }),
|
|
2216
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: Switch_default.trackWrapper, children: [
|
|
2217
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2177
2218
|
"input",
|
|
2178
2219
|
{
|
|
2179
2220
|
type: "checkbox",
|
|
@@ -2181,16 +2222,16 @@ function Switch({
|
|
|
2181
2222
|
id,
|
|
2182
2223
|
name,
|
|
2183
2224
|
"aria-describedby": describedBy,
|
|
2184
|
-
className: (0,
|
|
2225
|
+
className: (0, import_design_system_foundation39.cn)(Switch_default.switch, error ? Switch_default.switchError : void 0),
|
|
2185
2226
|
...props
|
|
2186
2227
|
}
|
|
2187
2228
|
),
|
|
2188
|
-
/* @__PURE__ */ (0,
|
|
2229
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: Switch_default.track, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: Switch_default.thumb }) })
|
|
2189
2230
|
] }),
|
|
2190
|
-
/* @__PURE__ */ (0,
|
|
2231
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Label, { id, label })
|
|
2191
2232
|
] }),
|
|
2192
|
-
/* @__PURE__ */ (0,
|
|
2193
|
-
/* @__PURE__ */ (0,
|
|
2233
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
2234
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
2194
2235
|
] });
|
|
2195
2236
|
}
|
|
2196
2237
|
|
|
@@ -2198,11 +2239,11 @@ function Switch({
|
|
|
2198
2239
|
var import_react21 = require("react");
|
|
2199
2240
|
|
|
2200
2241
|
// src/components/interaction/form/Textarea/Textarea.module.css
|
|
2201
|
-
var Textarea_default = {"formGroup":"
|
|
2242
|
+
var Textarea_default = {"formGroup":"bds0116Textarea-formGroup","textarea":"bds0116Textarea-textarea","textareaError":"bds0116Textarea-textareaError"};
|
|
2202
2243
|
|
|
2203
2244
|
// src/components/interaction/form/Textarea/Textarea.tsx
|
|
2204
|
-
var
|
|
2205
|
-
var
|
|
2245
|
+
var import_design_system_foundation40 = require("@boostdev/design-system-foundation");
|
|
2246
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
2206
2247
|
function Textarea({
|
|
2207
2248
|
label,
|
|
2208
2249
|
name,
|
|
@@ -2215,40 +2256,40 @@ function Textarea({
|
|
|
2215
2256
|
const hintId = id + "hint";
|
|
2216
2257
|
const errorId = id + "error";
|
|
2217
2258
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2218
|
-
return /* @__PURE__ */ (0,
|
|
2219
|
-
/* @__PURE__ */ (0,
|
|
2220
|
-
/* @__PURE__ */ (0,
|
|
2259
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(InputContainer, { className: (0, import_design_system_foundation40.cn)(Textarea_default.formGroup, className), children: [
|
|
2260
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Label, { id, label }),
|
|
2261
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
2221
2262
|
"textarea",
|
|
2222
2263
|
{
|
|
2223
2264
|
id,
|
|
2224
2265
|
name,
|
|
2225
2266
|
"aria-invalid": !!error,
|
|
2226
2267
|
"aria-describedby": describedBy,
|
|
2227
|
-
className: (0,
|
|
2268
|
+
className: (0, import_design_system_foundation40.cn)(Textarea_default.textarea, error ? Textarea_default.textareaError : void 0),
|
|
2228
2269
|
...props
|
|
2229
2270
|
}
|
|
2230
2271
|
),
|
|
2231
|
-
/* @__PURE__ */ (0,
|
|
2232
|
-
/* @__PURE__ */ (0,
|
|
2272
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
2273
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
2233
2274
|
] });
|
|
2234
2275
|
}
|
|
2235
2276
|
|
|
2236
2277
|
// src/components/layout/ButtonGroup/ButtonGroup.module.css
|
|
2237
|
-
var ButtonGroup_default = {"buttonGroup":"
|
|
2278
|
+
var ButtonGroup_default = {"buttonGroup":"bds0116ButtonGroup-buttonGroup","container":"bds0116ButtonGroup-container","--variant_card":"bds0116ButtonGroup---variant_card","--variant_flow":"bds0116ButtonGroup---variant_flow","--variant_modal":"bds0116ButtonGroup---variant_modal","--variant_content":"bds0116ButtonGroup---variant_content","--variant_grid":"bds0116ButtonGroup---variant_grid"};
|
|
2238
2279
|
|
|
2239
2280
|
// src/components/layout/ButtonGroup/ButtonGroup.tsx
|
|
2240
|
-
var
|
|
2241
|
-
var
|
|
2281
|
+
var import_design_system_foundation41 = require("@boostdev/design-system-foundation");
|
|
2282
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
2242
2283
|
function ButtonGroup({ children, className, variant }) {
|
|
2243
|
-
return /* @__PURE__ */ (0,
|
|
2284
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: (0, import_design_system_foundation41.cn)(ButtonGroup_default.buttonGroup, className, variant && ButtonGroup_default[`--variant_${variant}`]), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: ButtonGroup_default.container, children }) });
|
|
2244
2285
|
}
|
|
2245
2286
|
|
|
2246
2287
|
// src/components/layout/Card/Card.module.css
|
|
2247
|
-
var Card_default = {"card":"
|
|
2288
|
+
var Card_default = {"card":"bds0116Card-card","--default":"bds0116Card---default","--elevated":"bds0116Card---elevated","--outlined":"bds0116Card---outlined","--clickable":"bds0116Card---clickable","--padding-none":"bds0116Card---padding-none","--padding-small":"bds0116Card---padding-small","--padding-medium":"bds0116Card---padding-medium","--padding-large":"bds0116Card---padding-large","--text-start":"bds0116Card---text-start","--text-center":"bds0116Card---text-center","--text-end":"bds0116Card---text-end"};
|
|
2248
2289
|
|
|
2249
2290
|
// src/components/layout/Card/Card.tsx
|
|
2250
|
-
var
|
|
2251
|
-
var
|
|
2291
|
+
var import_design_system_foundation42 = require("@boostdev/design-system-foundation");
|
|
2292
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
2252
2293
|
function Card({
|
|
2253
2294
|
children,
|
|
2254
2295
|
className,
|
|
@@ -2259,7 +2300,7 @@ function Card({
|
|
|
2259
2300
|
onClick,
|
|
2260
2301
|
"aria-label": ariaLabel
|
|
2261
2302
|
}) {
|
|
2262
|
-
const classNames = (0,
|
|
2303
|
+
const classNames = (0, import_design_system_foundation42.cn)(
|
|
2263
2304
|
Card_default.card,
|
|
2264
2305
|
Card_default[`--${variant}`],
|
|
2265
2306
|
Card_default[`--padding-${padding}`],
|
|
@@ -2268,7 +2309,7 @@ function Card({
|
|
|
2268
2309
|
className
|
|
2269
2310
|
);
|
|
2270
2311
|
const Component = onClick ? "button" : "div";
|
|
2271
|
-
return /* @__PURE__ */ (0,
|
|
2312
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2272
2313
|
Component,
|
|
2273
2314
|
{
|
|
2274
2315
|
className: classNames,
|
|
@@ -2282,11 +2323,11 @@ function Card({
|
|
|
2282
2323
|
}
|
|
2283
2324
|
|
|
2284
2325
|
// src/components/layout/SectionHeader/SectionHeader.module.css
|
|
2285
|
-
var SectionHeader_default = {"sectionHeader":"
|
|
2326
|
+
var SectionHeader_default = {"sectionHeader":"bds0116SectionHeader-sectionHeader","title":"bds0116SectionHeader-title","subtitle":"bds0116SectionHeader-subtitle","--start":"bds0116SectionHeader---start","--center":"bds0116SectionHeader---center","--end":"bds0116SectionHeader---end","--small":"bds0116SectionHeader---small","--medium":"bds0116SectionHeader---medium","--large":"bds0116SectionHeader---large"};
|
|
2286
2327
|
|
|
2287
2328
|
// src/components/layout/SectionHeader/SectionHeader.tsx
|
|
2288
|
-
var
|
|
2289
|
-
var
|
|
2329
|
+
var import_design_system_foundation43 = require("@boostdev/design-system-foundation");
|
|
2330
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
2290
2331
|
function SectionHeader({
|
|
2291
2332
|
title,
|
|
2292
2333
|
subtitle,
|
|
@@ -2296,24 +2337,24 @@ function SectionHeader({
|
|
|
2296
2337
|
titleAs = "h2"
|
|
2297
2338
|
}) {
|
|
2298
2339
|
const Title = titleAs;
|
|
2299
|
-
return /* @__PURE__ */ (0,
|
|
2300
|
-
/* @__PURE__ */ (0,
|
|
2301
|
-
subtitle && /* @__PURE__ */ (0,
|
|
2340
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("header", { className: (0, import_design_system_foundation43.cn)(SectionHeader_default.sectionHeader, SectionHeader_default[`--${alignment}`], SectionHeader_default[`--${size}`], className), children: [
|
|
2341
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Title, { className: SectionHeader_default.title, children: title }),
|
|
2342
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: SectionHeader_default.subtitle, children: subtitle })
|
|
2302
2343
|
] });
|
|
2303
2344
|
}
|
|
2304
2345
|
|
|
2305
2346
|
// src/components/layout/IconWrapper/IconWrapper.module.css
|
|
2306
|
-
var IconWrapper_default = {"wrapper":"
|
|
2347
|
+
var IconWrapper_default = {"wrapper":"bds0116IconWrapper-wrapper"};
|
|
2307
2348
|
|
|
2308
2349
|
// src/components/layout/IconWrapper/IconWrapper.tsx
|
|
2309
|
-
var
|
|
2310
|
-
var
|
|
2350
|
+
var import_design_system_foundation44 = require("@boostdev/design-system-foundation");
|
|
2351
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
2311
2352
|
function IconWrapper({ children, className }) {
|
|
2312
|
-
return /* @__PURE__ */ (0,
|
|
2353
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: (0, import_design_system_foundation44.cn)(className, IconWrapper_default.wrapper), children });
|
|
2313
2354
|
}
|
|
2314
2355
|
|
|
2315
2356
|
// src/index.ts
|
|
2316
|
-
var
|
|
2357
|
+
var import_design_system_foundation45 = require("@boostdev/design-system-foundation");
|
|
2317
2358
|
// Annotate the CommonJS export names for ESM import in node:
|
|
2318
2359
|
0 && (module.exports = {
|
|
2319
2360
|
Accordion,
|
|
@@ -2327,6 +2368,7 @@ var import_design_system_foundation44 = require("@boostdev/design-system-foundat
|
|
|
2327
2368
|
Card,
|
|
2328
2369
|
Carousel,
|
|
2329
2370
|
Checkbox,
|
|
2371
|
+
Collapsible,
|
|
2330
2372
|
Combobox,
|
|
2331
2373
|
Command,
|
|
2332
2374
|
DescriptionList,
|