@boostdev/design-system-components 0.1.18 → 1.0.1
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/AGENTS.md +65 -27
- package/README.md +64 -29
- package/dist/client.cjs +419 -242
- package/dist/client.css +1378 -1186
- package/dist/client.d.cts +43 -16
- package/dist/client.d.ts +43 -16
- package/dist/client.js +421 -246
- package/dist/index.cjs +419 -242
- package/dist/index.css +1378 -1186
- package/dist/index.d.cts +43 -16
- package/dist/index.d.ts +43 -16
- package/dist/index.js +421 -246
- package/package.json +9 -4
- package/src/components/interaction/Button/Button.mdx +8 -11
- package/src/components/interaction/Button/Button.module.css +74 -44
- package/src/components/interaction/Button/Button.stories.tsx +4 -4
- package/src/components/interaction/Button/Button.tsx +5 -5
- package/src/components/interaction/Button/index.ts +1 -0
- package/src/components/interaction/Command/Command.module.css +53 -38
- package/src/components/interaction/Command/Command.spec.tsx +24 -0
- package/src/components/interaction/Command/Command.tsx +5 -0
- package/src/components/interaction/Dialog/Dialog.mdx +2 -2
- package/src/components/interaction/Dialog/Dialog.module.css +20 -10
- package/src/components/interaction/Dialog/Dialog.spec.tsx +19 -0
- package/src/components/interaction/Dialog/Dialog.tsx +22 -0
- package/src/components/interaction/Drawer/Drawer.module.css +11 -11
- package/src/components/interaction/Drawer/Drawer.spec.tsx +30 -0
- package/src/components/interaction/Drawer/Drawer.tsx +7 -3
- package/src/components/interaction/DropdownMenu/DropdownMenu.module.css +24 -19
- package/src/components/interaction/DropdownMenu/DropdownMenu.stories.tsx +4 -4
- package/src/components/interaction/Popover/Popover.module.css +17 -12
- package/src/components/interaction/Popover/Popover.spec.tsx +25 -4
- package/src/components/interaction/Popover/Popover.stories.tsx +1 -1
- package/src/components/interaction/Popover/Popover.tsx +5 -2
- package/src/components/interaction/Rating/Rating.module.css +3 -3
- package/src/components/interaction/Toast/Toast.module.css +19 -19
- package/src/components/interaction/Toast/Toast.tsx +1 -1
- package/src/components/interaction/form/Checkbox/Checkbox.mdx +2 -2
- package/src/components/interaction/form/Checkbox/Checkbox.module.css +22 -18
- package/src/components/interaction/form/Checkbox/Checkbox.tsx +2 -2
- package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css +29 -0
- package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.spec.tsx +87 -0
- package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.stories.tsx +62 -0
- package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx +46 -0
- package/src/components/interaction/form/CheckboxGroup/index.ts +2 -0
- package/src/components/interaction/form/Combobox/Combobox.module.css +44 -34
- package/src/components/interaction/form/Combobox/Combobox.tsx +0 -1
- package/src/components/interaction/form/FileInput/FileInput.module.css +24 -16
- package/src/components/interaction/form/FileInput/FileInput.tsx +5 -2
- package/src/components/interaction/form/FormInput/FormInput.module.css +21 -16
- package/src/components/interaction/form/FormInput/FormInput.tsx +3 -0
- package/src/components/interaction/form/NumberInput/NumberInput.module.css +25 -19
- package/src/components/interaction/form/NumberInput/NumberInput.tsx +12 -3
- package/src/components/interaction/form/Radio/Radio.mdx +3 -3
- package/src/components/interaction/form/Radio/Radio.module.css +28 -24
- package/src/components/interaction/form/Radio/Radio.stories.tsx +1 -1
- package/src/components/interaction/form/Radio/Radio.tsx +2 -2
- package/src/components/interaction/form/RadioGroup/RadioGroup.module.css +29 -0
- package/src/components/interaction/form/RadioGroup/RadioGroup.spec.tsx +75 -0
- package/src/components/interaction/form/RadioGroup/RadioGroup.stories.tsx +64 -0
- package/src/components/interaction/form/RadioGroup/RadioGroup.tsx +46 -0
- package/src/components/interaction/form/RadioGroup/index.ts +2 -0
- package/src/components/interaction/form/SegmentedControl/SegmentedControl.mdx +5 -5
- package/src/components/interaction/form/SegmentedControl/SegmentedControl.module.css +26 -26
- package/src/components/interaction/form/SegmentedControl/SegmentedControl.tsx +4 -0
- package/src/components/interaction/form/Select/Select.module.css +24 -19
- package/src/components/interaction/form/Select/Select.tsx +3 -0
- package/src/components/interaction/form/Slider/Slider.mdx +1 -1
- package/src/components/interaction/form/Slider/Slider.module.css +24 -24
- package/src/components/interaction/form/Slider/Slider.tsx +1 -0
- package/src/components/interaction/form/Switch/Switch.mdx +4 -4
- package/src/components/interaction/form/Switch/Switch.module.css +22 -16
- package/src/components/interaction/form/Switch/Switch.tsx +1 -1
- package/src/components/interaction/form/Textarea/Textarea.module.css +23 -18
- package/src/components/interaction/form/Textarea/Textarea.tsx +3 -0
- package/src/components/interaction/form/atoms/InputContainer.module.css +2 -2
- package/src/components/interaction/form/atoms/Label.module.css +2 -2
- package/src/components/interaction/form/atoms/Message.module.css +2 -2
- package/src/components/layout/ButtonGroup/ButtonGroup.module.css +2 -2
- package/src/components/layout/ButtonGroup/ButtonGroup.stories.tsx +2 -2
- package/src/components/layout/ButtonGroup/ButtonGroup.tsx +8 -3
- package/src/components/layout/ButtonGroup/index.ts +1 -0
- package/src/components/layout/Card/Card.module.css +30 -16
- package/src/components/layout/Card/Card.tsx +1 -1
- package/src/components/layout/IconWrapper/IconWrapper.mdx +2 -2
- package/src/components/layout/IconWrapper/IconWrapper.module.css +5 -5
- package/src/components/layout/IconWrapper/IconWrapper.tsx +4 -3
- package/src/components/layout/IconWrapper/index.ts +1 -0
- package/src/components/layout/SectionHeader/SectionHeader.module.css +23 -23
- package/src/components/layout/SectionHeader/SectionHeader.spec.tsx +2 -2
- package/src/components/layout/SectionHeader/SectionHeader.tsx +2 -2
- package/src/components/ui/Accordion/Accordion.module.css +23 -18
- package/src/components/ui/Alert/Alert.module.css +31 -27
- package/src/components/ui/Avatar/Avatar.module.css +6 -6
- package/src/components/ui/Avatar/Avatar.tsx +1 -1
- package/src/components/ui/Badge/Badge.mdx +2 -2
- package/src/components/ui/Badge/Badge.module.css +15 -15
- package/src/components/ui/Breadcrumb/Breadcrumb.module.css +11 -11
- package/src/components/ui/Calendar/Calendar.module.css +39 -29
- package/src/components/ui/Calendar/Calendar.tsx +6 -2
- package/src/components/ui/Carousel/Carousel.module.css +15 -10
- package/src/components/ui/Carousel/Carousel.stories.tsx +1 -1
- package/src/components/ui/Collapsible/Collapsible.mdx +6 -6
- package/src/components/ui/Collapsible/Collapsible.module.css +18 -18
- package/src/components/ui/DescriptionList/DescriptionList.module.css +8 -8
- package/src/components/ui/Link/Link.module.css +14 -14
- package/src/components/ui/Loading/Loading.module.css +8 -2
- package/src/components/ui/NotificationBanner/NotificationBanner.module.css +27 -23
- package/src/components/ui/Pagination/Pagination.module.css +22 -17
- package/src/components/ui/Progress/Progress.mdx +1 -1
- package/src/components/ui/Progress/Progress.module.css +10 -10
- package/src/components/ui/ProgressCircle/ProgressCircle.module.css +8 -8
- package/src/components/ui/Separator/Separator.module.css +1 -1
- package/src/components/ui/Separator/Separator.tsx +1 -1
- package/src/components/ui/Skeleton/Skeleton.module.css +5 -5
- package/src/components/ui/SkipLink/SkipLink.module.css +17 -12
- package/src/components/ui/Table/Table.module.css +35 -30
- package/src/components/ui/Table/Table.tsx +2 -1
- package/src/components/ui/Tabs/Tabs.module.css +17 -17
- package/src/components/ui/Tabs/Tabs.tsx +0 -1
- package/src/components/ui/Tooltip/Tooltip.module.css +12 -12
- package/src/components/ui/Tooltip/Tooltip.spec.tsx +3 -3
- package/src/components/ui/Tooltip/Tooltip.tsx +10 -2
- package/src/components/ui/Typography/Typography.module.css +18 -18
- package/src/css/bdc.css +66 -0
- package/src/css/index.css +5 -0
- package/src/index.ts +7 -0
- package/src/stories/DesignSystem/Borders.mdx +158 -0
- package/src/stories/DesignSystem/Colors.mdx +196 -0
- package/src/stories/DesignSystem/Elevation.mdx +127 -0
- package/src/stories/DesignSystem/Grid.mdx +140 -0
- package/src/stories/DesignSystem/Motion.mdx +96 -0
- package/src/stories/DesignSystem/Overview.mdx +99 -0
- package/src/stories/DesignSystem/Spacing.mdx +74 -0
- package/src/stories/DesignSystem/Typography.mdx +110 -0
- package/src/stories/Introduction.css +2 -2
- package/src/stories/Introduction.mdx +7 -7
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
|
+
CheckboxGroup: () => CheckboxGroup,
|
|
35
36
|
Collapsible: () => Collapsible,
|
|
36
37
|
Combobox: () => Combobox,
|
|
37
38
|
Command: () => Command,
|
|
@@ -51,6 +52,7 @@ __export(client_exports, {
|
|
|
51
52
|
Progress: () => Progress,
|
|
52
53
|
ProgressCircle: () => ProgressCircle,
|
|
53
54
|
Radio: () => Radio,
|
|
55
|
+
RadioGroup: () => RadioGroup,
|
|
54
56
|
Rating: () => Rating,
|
|
55
57
|
SectionHeader: () => SectionHeader,
|
|
56
58
|
SegmentedControl: () => SegmentedControl,
|
|
@@ -66,7 +68,7 @@ __export(client_exports, {
|
|
|
66
68
|
ToastProvider: () => ToastProvider,
|
|
67
69
|
Tooltip: () => Tooltip,
|
|
68
70
|
Typography: () => Typography,
|
|
69
|
-
cn: () =>
|
|
71
|
+
cn: () => import_design_system_foundation48.cn,
|
|
70
72
|
useToast: () => useToast
|
|
71
73
|
});
|
|
72
74
|
module.exports = __toCommonJS(client_exports);
|
|
@@ -75,7 +77,7 @@ module.exports = __toCommonJS(client_exports);
|
|
|
75
77
|
var import_react = require("react");
|
|
76
78
|
|
|
77
79
|
// src/components/ui/Accordion/Accordion.module.css
|
|
78
|
-
var Accordion_default = {"accordion":"
|
|
80
|
+
var Accordion_default = {"accordion":"bds101Accordion-accordion","item":"bds101Accordion-item","heading":"bds101Accordion-heading","trigger":"bds101Accordion-trigger","triggerLabel":"bds101Accordion-triggerLabel","chevron":"bds101Accordion-chevron","--open":"bds101Accordion---open","panel":"bds101Accordion-panel","panelContent":"bds101Accordion-panelContent"};
|
|
79
81
|
|
|
80
82
|
// src/components/ui/Accordion/Accordion.tsx
|
|
81
83
|
var import_design_system_foundation = require("@boostdev/design-system-foundation");
|
|
@@ -143,7 +145,7 @@ function Accordion({
|
|
|
143
145
|
}
|
|
144
146
|
|
|
145
147
|
// src/components/ui/Alert/Alert.module.css
|
|
146
|
-
var Alert_default = {"alert":"
|
|
148
|
+
var Alert_default = {"alert":"bds101Alert-alert","--variant_info":"bds101Alert---variant_info","--variant_success":"bds101Alert---variant_success","--variant_warning":"bds101Alert---variant_warning","--variant_error":"bds101Alert---variant_error","icon":"bds101Alert-icon","content":"bds101Alert-content","title":"bds101Alert-title","dismiss":"bds101Alert-dismiss"};
|
|
147
149
|
|
|
148
150
|
// src/components/ui/Alert/Alert.tsx
|
|
149
151
|
var import_design_system_foundation2 = require("@boostdev/design-system-foundation");
|
|
@@ -186,7 +188,7 @@ function Alert({
|
|
|
186
188
|
}
|
|
187
189
|
|
|
188
190
|
// src/components/ui/Avatar/Avatar.module.css
|
|
189
|
-
var Avatar_default = {"avatar":"
|
|
191
|
+
var Avatar_default = {"avatar":"bds101Avatar-avatar","--fallback":"bds101Avatar---fallback","--size_small":"bds101Avatar---size_small","--size_medium":"bds101Avatar---size_medium","--size_large":"bds101Avatar---size_large","image":"bds101Avatar-image","initials":"bds101Avatar-initials"};
|
|
190
192
|
|
|
191
193
|
// src/components/ui/Avatar/Avatar.tsx
|
|
192
194
|
var import_design_system_foundation3 = require("@boostdev/design-system-foundation");
|
|
@@ -197,7 +199,7 @@ function getInitials(name) {
|
|
|
197
199
|
function Avatar({ src, alt, name, size = "medium", className }) {
|
|
198
200
|
const sizeClass = Avatar_default[`--size_${size}`];
|
|
199
201
|
if (src) {
|
|
200
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: (0, import_design_system_foundation3.cn)(Avatar_default.avatar, sizeClass, className), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { src, alt: alt ?? name ?? "", className: Avatar_default.image }) });
|
|
202
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: (0, import_design_system_foundation3.cn)(Avatar_default.avatar, sizeClass, className), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { src, alt: alt ?? name ?? "User avatar", className: Avatar_default.image }) });
|
|
201
203
|
}
|
|
202
204
|
const initials = name ? getInitials(name) : "";
|
|
203
205
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
@@ -212,7 +214,7 @@ function Avatar({ src, alt, name, size = "medium", className }) {
|
|
|
212
214
|
}
|
|
213
215
|
|
|
214
216
|
// src/components/ui/Badge/Badge.module.css
|
|
215
|
-
var Badge_default = {"badge":"
|
|
217
|
+
var Badge_default = {"badge":"bds101Badge-badge","--variant_primary":"bds101Badge---variant_primary","--variant_secondary":"bds101Badge---variant_secondary","--variant_success":"bds101Badge---variant_success","--variant_error":"bds101Badge---variant_error","--variant_warning":"bds101Badge---variant_warning"};
|
|
216
218
|
|
|
217
219
|
// src/components/ui/Badge/Badge.tsx
|
|
218
220
|
var import_design_system_foundation4 = require("@boostdev/design-system-foundation");
|
|
@@ -222,7 +224,7 @@ function Badge({ children, variant = "primary", className }) {
|
|
|
222
224
|
}
|
|
223
225
|
|
|
224
226
|
// src/components/ui/Breadcrumb/Breadcrumb.module.css
|
|
225
|
-
var Breadcrumb_default = {"breadcrumb":"
|
|
227
|
+
var Breadcrumb_default = {"breadcrumb":"bds101Breadcrumb-breadcrumb","list":"bds101Breadcrumb-list","item":"bds101Breadcrumb-item","link":"bds101Breadcrumb-link","separator":"bds101Breadcrumb-separator","current":"bds101Breadcrumb-current"};
|
|
226
228
|
|
|
227
229
|
// src/components/ui/Breadcrumb/Breadcrumb.tsx
|
|
228
230
|
var import_design_system_foundation5 = require("@boostdev/design-system-foundation");
|
|
@@ -238,7 +240,7 @@ function Breadcrumb({ items, className }) {
|
|
|
238
240
|
}
|
|
239
241
|
|
|
240
242
|
// src/components/ui/Collapsible/Collapsible.module.css
|
|
241
|
-
var Collapsible_default = {"collapsible":"
|
|
243
|
+
var Collapsible_default = {"collapsible":"bds101Collapsible-collapsible","summary":"bds101Collapsible-summary","summaryContent":"bds101Collapsible-summaryContent","icon":"bds101Collapsible-icon","content":"bds101Collapsible-content"};
|
|
242
244
|
|
|
243
245
|
// src/components/ui/Collapsible/Collapsible.tsx
|
|
244
246
|
var import_design_system_foundation6 = require("@boostdev/design-system-foundation");
|
|
@@ -279,12 +281,21 @@ function Collapsible({
|
|
|
279
281
|
var import_react2 = require("react");
|
|
280
282
|
|
|
281
283
|
// src/components/ui/Calendar/Calendar.module.css
|
|
282
|
-
var Calendar_default = {"calendar":"
|
|
284
|
+
var Calendar_default = {"calendar":"bds101Calendar-calendar","header":"bds101Calendar-header","monthYear":"bds101Calendar-monthYear","navBtn":"bds101Calendar-navBtn","grid":"bds101Calendar-grid","weekday":"bds101Calendar-weekday","empty":"bds101Calendar-empty","day":"bds101Calendar-day","disabled":"bds101Calendar-disabled","selected":"bds101Calendar-selected","today":"bds101Calendar-today"};
|
|
283
285
|
|
|
284
286
|
// src/components/ui/Calendar/Calendar.tsx
|
|
285
287
|
var import_design_system_foundation7 = require("@boostdev/design-system-foundation");
|
|
286
288
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
287
289
|
var DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
|
|
290
|
+
var DAY_LABELS = {
|
|
291
|
+
Su: "Sunday",
|
|
292
|
+
Mo: "Monday",
|
|
293
|
+
Tu: "Tuesday",
|
|
294
|
+
We: "Wednesday",
|
|
295
|
+
Th: "Thursday",
|
|
296
|
+
Fr: "Friday",
|
|
297
|
+
Sa: "Saturday"
|
|
298
|
+
};
|
|
288
299
|
var MONTHS = [
|
|
289
300
|
"January",
|
|
290
301
|
"February",
|
|
@@ -405,7 +416,7 @@ function Calendar({ value, defaultValue, min, max, onChange, className }) {
|
|
|
405
416
|
role: "grid",
|
|
406
417
|
"aria-labelledby": titleId,
|
|
407
418
|
children: [
|
|
408
|
-
/* @__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",
|
|
419
|
+
/* @__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", "aria-label": DAY_LABELS[d] ?? d, className: Calendar_default.weekday, children: d }, d)) }) }),
|
|
409
420
|
/* @__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) => {
|
|
410
421
|
if (!cell) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { className: Calendar_default.empty, "aria-hidden": "true" }, col);
|
|
411
422
|
const date = new Date(viewYear, viewMonth, cell.day);
|
|
@@ -424,7 +435,7 @@ function Calendar({ value, defaultValue, min, max, onChange, className }) {
|
|
|
424
435
|
disabled && Calendar_default.disabled
|
|
425
436
|
),
|
|
426
437
|
"aria-label": date.toLocaleDateString("en", { month: "long", day: "numeric", year: "numeric" }),
|
|
427
|
-
"aria-
|
|
438
|
+
"aria-selected": isSelected,
|
|
428
439
|
"aria-current": isToday ? "date" : void 0,
|
|
429
440
|
"aria-disabled": disabled,
|
|
430
441
|
disabled,
|
|
@@ -445,7 +456,7 @@ function Calendar({ value, defaultValue, min, max, onChange, className }) {
|
|
|
445
456
|
var import_react3 = require("react");
|
|
446
457
|
|
|
447
458
|
// src/components/ui/Carousel/Carousel.module.css
|
|
448
|
-
var Carousel_default = {"carousel":"
|
|
459
|
+
var Carousel_default = {"carousel":"bds101Carousel-carousel","track":"bds101Carousel-track","slide":"bds101Carousel-slide","navBtn":"bds101Carousel-navBtn"};
|
|
449
460
|
|
|
450
461
|
// src/components/ui/Carousel/Carousel.tsx
|
|
451
462
|
var import_design_system_foundation8 = require("@boostdev/design-system-foundation");
|
|
@@ -498,7 +509,7 @@ function Carousel({ items, label, className }) {
|
|
|
498
509
|
}
|
|
499
510
|
|
|
500
511
|
// src/components/ui/DescriptionList/DescriptionList.module.css
|
|
501
|
-
var DescriptionList_default = {"list":"
|
|
512
|
+
var DescriptionList_default = {"list":"bds101DescriptionList-list","group":"bds101DescriptionList-group","term":"bds101DescriptionList-term","details":"bds101DescriptionList-details","--layout_inline":"bds101DescriptionList---layout_inline"};
|
|
502
513
|
|
|
503
514
|
// src/components/ui/DescriptionList/DescriptionList.tsx
|
|
504
515
|
var import_design_system_foundation9 = require("@boostdev/design-system-foundation");
|
|
@@ -511,7 +522,7 @@ function DescriptionList({ items, layout = "stacked", className }) {
|
|
|
511
522
|
}
|
|
512
523
|
|
|
513
524
|
// src/components/ui/Link/Link.module.css
|
|
514
|
-
var Link_default = {"link":"
|
|
525
|
+
var Link_default = {"link":"bds101Link-link","--variant_default":"bds101Link---variant_default","--variant_subtle":"bds101Link---variant_subtle","--variant_standalone":"bds101Link---variant_standalone","externalLabel":"bds101Link-externalLabel"};
|
|
515
526
|
|
|
516
527
|
// src/components/ui/Link/Link.tsx
|
|
517
528
|
var import_design_system_foundation10 = require("@boostdev/design-system-foundation");
|
|
@@ -542,7 +553,7 @@ function Link({
|
|
|
542
553
|
}
|
|
543
554
|
|
|
544
555
|
// src/components/ui/Loading/Loading.module.css
|
|
545
|
-
var Loading_default = {"loading":"
|
|
556
|
+
var Loading_default = {"loading":"bds101Loading-loading","spinner":"bds101Loading-spinner","--size_small":"bds101Loading---size_small","--size_large":"bds101Loading---size_large"};
|
|
546
557
|
|
|
547
558
|
// src/components/ui/Loading/Loading.tsx
|
|
548
559
|
var import_design_system_foundation11 = require("@boostdev/design-system-foundation");
|
|
@@ -552,7 +563,7 @@ function Loading({ size = "medium", className }) {
|
|
|
552
563
|
}
|
|
553
564
|
|
|
554
565
|
// src/components/ui/NotificationBanner/NotificationBanner.module.css
|
|
555
|
-
var NotificationBanner_default = {"banner":"
|
|
566
|
+
var NotificationBanner_default = {"banner":"bds101NotificationBanner-banner","--variant_info":"bds101NotificationBanner---variant_info","--variant_success":"bds101NotificationBanner---variant_success","--variant_warning":"bds101NotificationBanner---variant_warning","--variant_error":"bds101NotificationBanner---variant_error","content":"bds101NotificationBanner-content","action":"bds101NotificationBanner-action","dismiss":"bds101NotificationBanner-dismiss"};
|
|
556
567
|
|
|
557
568
|
// src/components/ui/NotificationBanner/NotificationBanner.tsx
|
|
558
569
|
var import_design_system_foundation12 = require("@boostdev/design-system-foundation");
|
|
@@ -591,7 +602,7 @@ function NotificationBanner({
|
|
|
591
602
|
}
|
|
592
603
|
|
|
593
604
|
// src/components/ui/Pagination/Pagination.module.css
|
|
594
|
-
var Pagination_default = {"pagination":"
|
|
605
|
+
var Pagination_default = {"pagination":"bds101Pagination-pagination","list":"bds101Pagination-list","button":"bds101Pagination-button","--active":"bds101Pagination---active","--nav":"bds101Pagination---nav","ellipsis":"bds101Pagination-ellipsis"};
|
|
595
606
|
|
|
596
607
|
// src/components/ui/Pagination/Pagination.tsx
|
|
597
608
|
var import_design_system_foundation13 = require("@boostdev/design-system-foundation");
|
|
@@ -655,7 +666,7 @@ function Pagination({
|
|
|
655
666
|
}
|
|
656
667
|
|
|
657
668
|
// src/components/ui/Progress/Progress.module.css
|
|
658
|
-
var Progress_default = {"container":"
|
|
669
|
+
var Progress_default = {"container":"bds101Progress-container","labelRow":"bds101Progress-labelRow","value":"bds101Progress-value","track":"bds101Progress-track","--size_small":"bds101Progress---size_small","--size_medium":"bds101Progress---size_medium","--size_large":"bds101Progress---size_large","fill":"bds101Progress-fill"};
|
|
659
670
|
|
|
660
671
|
// src/components/ui/Progress/Progress.tsx
|
|
661
672
|
var import_design_system_foundation14 = require("@boostdev/design-system-foundation");
|
|
@@ -693,7 +704,7 @@ function Progress({
|
|
|
693
704
|
}
|
|
694
705
|
|
|
695
706
|
// src/components/ui/ProgressCircle/ProgressCircle.module.css
|
|
696
|
-
var ProgressCircle_default = {"wrapper":"
|
|
707
|
+
var ProgressCircle_default = {"wrapper":"bds101ProgressCircle-wrapper","svg":"bds101ProgressCircle-svg","track":"bds101ProgressCircle-track","fill":"bds101ProgressCircle-fill","value":"bds101ProgressCircle-value","--size_small":"bds101ProgressCircle---size_small","--size_medium":"bds101ProgressCircle---size_medium","--size_large":"bds101ProgressCircle---size_large"};
|
|
697
708
|
|
|
698
709
|
// src/components/ui/ProgressCircle/ProgressCircle.tsx
|
|
699
710
|
var import_design_system_foundation15 = require("@boostdev/design-system-foundation");
|
|
@@ -772,7 +783,7 @@ function ProgressCircle({
|
|
|
772
783
|
}
|
|
773
784
|
|
|
774
785
|
// src/components/ui/Separator/Separator.module.css
|
|
775
|
-
var Separator_default = {"separator":"
|
|
786
|
+
var Separator_default = {"separator":"bds101Separator-separator","--horizontal":"bds101Separator---horizontal","--vertical":"bds101Separator---vertical"};
|
|
776
787
|
|
|
777
788
|
// src/components/ui/Separator/Separator.tsx
|
|
778
789
|
var import_design_system_foundation16 = require("@boostdev/design-system-foundation");
|
|
@@ -788,14 +799,14 @@ function Separator({ orientation = "horizontal", className }) {
|
|
|
788
799
|
}
|
|
789
800
|
);
|
|
790
801
|
}
|
|
791
|
-
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("hr", { className: (0, import_design_system_foundation16.cn)(Separator_default.separator, Separator_default["--horizontal"], className) });
|
|
802
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("hr", { "aria-orientation": "horizontal", className: (0, import_design_system_foundation16.cn)(Separator_default.separator, Separator_default["--horizontal"], className) });
|
|
792
803
|
}
|
|
793
804
|
|
|
794
805
|
// src/components/ui/Skeleton/Skeleton.tsx
|
|
795
806
|
var import_design_system_foundation17 = require("@boostdev/design-system-foundation");
|
|
796
807
|
|
|
797
808
|
// src/components/ui/Skeleton/Skeleton.module.css
|
|
798
|
-
var Skeleton_default = {"skeleton":"
|
|
809
|
+
var Skeleton_default = {"skeleton":"bds101Skeleton-skeleton"};
|
|
799
810
|
|
|
800
811
|
// src/components/ui/Skeleton/Skeleton.tsx
|
|
801
812
|
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
@@ -804,7 +815,7 @@ function Skeleton({ className }) {
|
|
|
804
815
|
}
|
|
805
816
|
|
|
806
817
|
// src/components/ui/SkipLink/SkipLink.module.css
|
|
807
|
-
var SkipLink_default = {"skipLink":"
|
|
818
|
+
var SkipLink_default = {"skipLink":"bds101SkipLink-skipLink"};
|
|
808
819
|
|
|
809
820
|
// src/components/ui/SkipLink/SkipLink.tsx
|
|
810
821
|
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
@@ -813,7 +824,7 @@ function SkipLink({ href = "#main", children = "Skip to main content" }) {
|
|
|
813
824
|
}
|
|
814
825
|
|
|
815
826
|
// src/components/ui/Table/Table.module.css
|
|
816
|
-
var Table_default = {"wrapper":"
|
|
827
|
+
var Table_default = {"wrapper":"bds101Table-wrapper","table":"bds101Table-table","caption":"bds101Table-caption","thead":"bds101Table-thead","th":"bds101Table-th","--sortable":"bds101Table---sortable","sortButton":"bds101Table-sortButton","sortIcon":"bds101Table-sortIcon","--sort-active":"bds101Table---sort-active","--sort-desc":"bds101Table---sort-desc","tbody":"bds101Table-tbody","tr":"bds101Table-tr","td":"bds101Table-td"};
|
|
817
828
|
|
|
818
829
|
// src/components/ui/Table/Table.tsx
|
|
819
830
|
var import_design_system_foundation18 = require("@boostdev/design-system-foundation");
|
|
@@ -850,6 +861,7 @@ function Table({
|
|
|
850
861
|
type: "button",
|
|
851
862
|
className: Table_default.sortButton,
|
|
852
863
|
onClick: () => handleSort(col.key),
|
|
864
|
+
"aria-label": `Sort by ${String(col.header)}${sortKey === col.key ? `, currently ${sortDirection === "asc" ? "ascending" : "descending"}` : ""}`,
|
|
853
865
|
children: [
|
|
854
866
|
col.header,
|
|
855
867
|
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
@@ -874,7 +886,7 @@ function Table({
|
|
|
874
886
|
},
|
|
875
887
|
col.key
|
|
876
888
|
)) }) }),
|
|
877
|
-
/* @__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)) })
|
|
889
|
+
/* @__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)) }, JSON.stringify(row) || rowIndex)) })
|
|
878
890
|
] }) });
|
|
879
891
|
}
|
|
880
892
|
|
|
@@ -882,7 +894,7 @@ function Table({
|
|
|
882
894
|
var import_react4 = require("react");
|
|
883
895
|
|
|
884
896
|
// src/components/ui/Tabs/Tabs.module.css
|
|
885
|
-
var Tabs_default = {"tabs":"
|
|
897
|
+
var Tabs_default = {"tabs":"bds101Tabs-tabs","tabList":"bds101Tabs-tabList","tab":"bds101Tabs-tab","--active":"bds101Tabs---active","panel":"bds101Tabs-panel"};
|
|
886
898
|
|
|
887
899
|
// src/components/ui/Tabs/Tabs.tsx
|
|
888
900
|
var import_design_system_foundation19 = require("@boostdev/design-system-foundation");
|
|
@@ -948,7 +960,6 @@ function Tabs({ tabs, defaultTab, className }) {
|
|
|
948
960
|
id: panelId,
|
|
949
961
|
role: "tabpanel",
|
|
950
962
|
"aria-labelledby": tabId,
|
|
951
|
-
tabIndex: 0,
|
|
952
963
|
hidden: !isActive,
|
|
953
964
|
className: Tabs_default.panel,
|
|
954
965
|
children: tab.content
|
|
@@ -963,7 +974,7 @@ function Tabs({ tabs, defaultTab, className }) {
|
|
|
963
974
|
var import_react5 = require("react");
|
|
964
975
|
|
|
965
976
|
// src/components/ui/Tooltip/Tooltip.module.css
|
|
966
|
-
var Tooltip_default = {"wrapper":"
|
|
977
|
+
var Tooltip_default = {"wrapper":"bds101Tooltip-wrapper","tooltip":"bds101Tooltip-tooltip","--placement_top":"bds101Tooltip---placement_top","--placement_bottom":"bds101Tooltip---placement_bottom","--placement_left":"bds101Tooltip---placement_left","--placement_right":"bds101Tooltip---placement_right"};
|
|
967
978
|
|
|
968
979
|
// src/components/ui/Tooltip/Tooltip.tsx
|
|
969
980
|
var import_design_system_foundation20 = require("@boostdev/design-system-foundation");
|
|
@@ -975,25 +986,37 @@ function Tooltip({
|
|
|
975
986
|
className
|
|
976
987
|
}) {
|
|
977
988
|
const tooltipId = (0, import_react5.useId)();
|
|
989
|
+
const [isVisible, setIsVisible] = (0, import_react5.useState)(false);
|
|
978
990
|
const trigger = (0, import_react5.isValidElement)(children) ? (0, import_react5.cloneElement)(children, {
|
|
979
991
|
"aria-describedby": tooltipId
|
|
980
992
|
}) : children;
|
|
981
|
-
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
994
|
+
"span",
|
|
995
|
+
{
|
|
996
|
+
className: (0, import_design_system_foundation20.cn)(Tooltip_default.wrapper, className),
|
|
997
|
+
onMouseEnter: () => setIsVisible(true),
|
|
998
|
+
onMouseLeave: () => setIsVisible(false),
|
|
999
|
+
onFocus: () => setIsVisible(true),
|
|
1000
|
+
onBlur: () => setIsVisible(false),
|
|
1001
|
+
children: [
|
|
1002
|
+
trigger,
|
|
1003
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1004
|
+
"span",
|
|
1005
|
+
{
|
|
1006
|
+
id: tooltipId,
|
|
1007
|
+
role: "tooltip",
|
|
1008
|
+
"aria-hidden": !isVisible,
|
|
1009
|
+
className: (0, import_design_system_foundation20.cn)(Tooltip_default.tooltip, Tooltip_default[`--placement_${placement}`]),
|
|
1010
|
+
children: content
|
|
1011
|
+
}
|
|
1012
|
+
)
|
|
1013
|
+
]
|
|
1014
|
+
}
|
|
1015
|
+
);
|
|
993
1016
|
}
|
|
994
1017
|
|
|
995
1018
|
// src/components/ui/Typography/Typography.module.css
|
|
996
|
-
var Typography_default = {"typography":"
|
|
1019
|
+
var Typography_default = {"typography":"bds101Typography-typography","--h1":"bds101Typography---h1","--h2":"bds101Typography---h2","--h3":"bds101Typography---h3","--body":"bds101Typography---body","--body_s":"bds101Typography---body_s"};
|
|
997
1020
|
|
|
998
1021
|
// src/components/ui/Typography/Typography.tsx
|
|
999
1022
|
var import_design_system_foundation21 = require("@boostdev/design-system-foundation");
|
|
@@ -1011,7 +1034,7 @@ function Typography({ variant = "body", component, children, className }) {
|
|
|
1011
1034
|
}
|
|
1012
1035
|
|
|
1013
1036
|
// src/components/interaction/Button/Button.module.css
|
|
1014
|
-
var Button_default = {"button":"
|
|
1037
|
+
var Button_default = {"button":"bds101Button-button","--default":"bds101Button---default","--ghost":"bds101Button---ghost","--size_small":"bds101Button---size_small","--size_medium":"bds101Button---size_medium","--size_large":"bds101Button---size_large","--hasPulse":"bds101Button---hasPulse","iconStart":"bds101Button-iconStart","iconEnd":"bds101Button-iconEnd"};
|
|
1015
1038
|
|
|
1016
1039
|
// src/components/interaction/Button/Button.tsx
|
|
1017
1040
|
var import_design_system_foundation22 = require("@boostdev/design-system-foundation");
|
|
@@ -1019,7 +1042,7 @@ var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
|
1019
1042
|
function Button({
|
|
1020
1043
|
children,
|
|
1021
1044
|
className,
|
|
1022
|
-
variant = "
|
|
1045
|
+
variant = "default",
|
|
1023
1046
|
type = "button",
|
|
1024
1047
|
iconStart,
|
|
1025
1048
|
iconEnd,
|
|
@@ -1050,9 +1073,9 @@ function Button({
|
|
|
1050
1073
|
onClick?.(e);
|
|
1051
1074
|
};
|
|
1052
1075
|
const content = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
1053
|
-
Boolean(iconStart) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: Button_default.
|
|
1076
|
+
Boolean(iconStart) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: Button_default.iconStart, children: iconStart }),
|
|
1054
1077
|
children,
|
|
1055
|
-
Boolean(iconEnd) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: Button_default.
|
|
1078
|
+
Boolean(iconEnd) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: Button_default.iconEnd, children: iconEnd })
|
|
1056
1079
|
] });
|
|
1057
1080
|
if (href) {
|
|
1058
1081
|
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
@@ -1087,7 +1110,7 @@ function Button({
|
|
|
1087
1110
|
var import_react6 = require("react");
|
|
1088
1111
|
|
|
1089
1112
|
// src/components/interaction/Command/Command.module.css
|
|
1090
|
-
var Command_default = {"dialog":"
|
|
1113
|
+
var Command_default = {"dialog":"bds101Command-dialog","palette":"bds101Command-palette","searchRow":"bds101Command-searchRow","searchIcon":"bds101Command-searchIcon","search":"bds101Command-search","escHint":"bds101Command-escHint","list":"bds101Command-list","groupList":"bds101Command-groupList","group":"bds101Command-group","item":"bds101Command-item","itemActive":"bds101Command-itemActive","itemLabel":"bds101Command-itemLabel","itemDesc":"bds101Command-itemDesc","shortcut":"bds101Command-shortcut","empty":"bds101Command-empty"};
|
|
1091
1114
|
|
|
1092
1115
|
// src/components/interaction/Command/Command.tsx
|
|
1093
1116
|
var import_design_system_foundation23 = require("@boostdev/design-system-foundation");
|
|
@@ -1120,10 +1143,12 @@ function Command({
|
|
|
1120
1143
|
});
|
|
1121
1144
|
return map;
|
|
1122
1145
|
}, [filtered]);
|
|
1146
|
+
const triggerRef = (0, import_react6.useRef)(null);
|
|
1123
1147
|
(0, import_react6.useEffect)(() => {
|
|
1124
1148
|
const dialog = dialogRef.current;
|
|
1125
1149
|
if (!dialog) return;
|
|
1126
1150
|
if (isOpen) {
|
|
1151
|
+
triggerRef.current = document.activeElement;
|
|
1127
1152
|
dialog.showModal();
|
|
1128
1153
|
document.body.style.overflow = "hidden";
|
|
1129
1154
|
setQuery("");
|
|
@@ -1132,6 +1157,7 @@ function Command({
|
|
|
1132
1157
|
} else if (dialog.open) {
|
|
1133
1158
|
dialog.close();
|
|
1134
1159
|
document.body.style.overflow = "";
|
|
1160
|
+
triggerRef.current?.focus();
|
|
1135
1161
|
}
|
|
1136
1162
|
return () => {
|
|
1137
1163
|
document.body.style.overflow = "";
|
|
@@ -1169,6 +1195,7 @@ function Command({
|
|
|
1169
1195
|
ref: dialogRef,
|
|
1170
1196
|
className: (0, import_design_system_foundation23.cn)(Command_default.dialog, className),
|
|
1171
1197
|
"aria-label": "Command palette",
|
|
1198
|
+
"aria-modal": "true",
|
|
1172
1199
|
onCancel: handleCancel,
|
|
1173
1200
|
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: Command_default.palette, onKeyDown: handleKeyDown, children: [
|
|
1174
1201
|
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: Command_default.searchRow, children: [
|
|
@@ -1231,22 +1258,26 @@ function Command({
|
|
|
1231
1258
|
var import_react7 = require("react");
|
|
1232
1259
|
|
|
1233
1260
|
// src/components/interaction/Dialog/Dialog.module.css
|
|
1234
|
-
var Dialog_default = {"dialog":"
|
|
1261
|
+
var Dialog_default = {"dialog":"bds101Dialog-dialog","dialogContent":"bds101Dialog-dialogContent","closeForm":"bds101Dialog-closeForm","closeButton":"bds101Dialog-closeButton"};
|
|
1235
1262
|
|
|
1236
1263
|
// src/components/interaction/Dialog/Dialog.tsx
|
|
1237
1264
|
var import_design_system_foundation24 = require("@boostdev/design-system-foundation");
|
|
1238
1265
|
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1266
|
+
var FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
|
|
1239
1267
|
function Dialog({ children, isOpen = false, className, onClose }) {
|
|
1240
1268
|
const dialogRef = (0, import_react7.useRef)(null);
|
|
1269
|
+
const triggerRef = (0, import_react7.useRef)(null);
|
|
1241
1270
|
(0, import_react7.useEffect)(() => {
|
|
1242
1271
|
const dialog = dialogRef.current;
|
|
1243
1272
|
if (!dialog) return;
|
|
1244
1273
|
if (isOpen) {
|
|
1274
|
+
triggerRef.current = document.activeElement;
|
|
1245
1275
|
dialog.showModal();
|
|
1246
1276
|
document.body.style.overflow = "hidden";
|
|
1247
1277
|
} else if (dialog.open) {
|
|
1248
1278
|
dialog.close();
|
|
1249
1279
|
document.body.style.overflow = "";
|
|
1280
|
+
triggerRef.current?.focus();
|
|
1250
1281
|
}
|
|
1251
1282
|
return () => {
|
|
1252
1283
|
document.body.style.overflow = "";
|
|
@@ -1259,13 +1290,35 @@ function Dialog({ children, isOpen = false, className, onClose }) {
|
|
|
1259
1290
|
e.preventDefault();
|
|
1260
1291
|
onClose?.();
|
|
1261
1292
|
};
|
|
1293
|
+
const handleKeyDown = (e) => {
|
|
1294
|
+
if (e.key !== "Tab") return;
|
|
1295
|
+
const dialog = dialogRef.current;
|
|
1296
|
+
if (!dialog) return;
|
|
1297
|
+
const focusable = Array.from(dialog.querySelectorAll(FOCUSABLE_SELECTOR));
|
|
1298
|
+
if (focusable.length === 0) return;
|
|
1299
|
+
const first = focusable[0];
|
|
1300
|
+
const last = focusable[focusable.length - 1];
|
|
1301
|
+
if (e.shiftKey) {
|
|
1302
|
+
if (document.activeElement === first) {
|
|
1303
|
+
e.preventDefault();
|
|
1304
|
+
last.focus();
|
|
1305
|
+
}
|
|
1306
|
+
} else {
|
|
1307
|
+
if (document.activeElement === last) {
|
|
1308
|
+
e.preventDefault();
|
|
1309
|
+
first.focus();
|
|
1310
|
+
}
|
|
1311
|
+
}
|
|
1312
|
+
};
|
|
1262
1313
|
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
1263
1314
|
"dialog",
|
|
1264
1315
|
{
|
|
1265
1316
|
ref: dialogRef,
|
|
1266
1317
|
className: (0, import_design_system_foundation24.cn)(className, Dialog_default.dialog),
|
|
1318
|
+
"aria-modal": "true",
|
|
1267
1319
|
onClick: handleBackdropClick,
|
|
1268
1320
|
onCancel: handleCancel,
|
|
1321
|
+
onKeyDown: handleKeyDown,
|
|
1269
1322
|
children: [
|
|
1270
1323
|
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("form", { method: "dialog", className: Dialog_default.closeForm, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1271
1324
|
"button",
|
|
@@ -1287,7 +1340,7 @@ function Dialog({ children, isOpen = false, className, onClose }) {
|
|
|
1287
1340
|
var import_react8 = require("react");
|
|
1288
1341
|
|
|
1289
1342
|
// src/components/interaction/Drawer/Drawer.module.css
|
|
1290
|
-
var Drawer_default = {"drawer":"
|
|
1343
|
+
var Drawer_default = {"drawer":"bds101Drawer-drawer","panel":"bds101Drawer-panel","--side_right":"bds101Drawer---side_right","--side_left":"bds101Drawer---side_left","header":"bds101Drawer-header","closeButton":"bds101Drawer-closeButton","body":"bds101Drawer-body"};
|
|
1291
1344
|
|
|
1292
1345
|
// src/components/interaction/Drawer/Drawer.tsx
|
|
1293
1346
|
var import_design_system_foundation25 = require("@boostdev/design-system-foundation");
|
|
@@ -1298,19 +1351,22 @@ function Drawer({
|
|
|
1298
1351
|
title,
|
|
1299
1352
|
children,
|
|
1300
1353
|
side = "right",
|
|
1301
|
-
|
|
1354
|
+
ariaLabel,
|
|
1302
1355
|
className
|
|
1303
1356
|
}) {
|
|
1304
1357
|
const dialogRef = (0, import_react8.useRef)(null);
|
|
1358
|
+
const triggerRef = (0, import_react8.useRef)(null);
|
|
1305
1359
|
(0, import_react8.useEffect)(() => {
|
|
1306
1360
|
const dialog = dialogRef.current;
|
|
1307
1361
|
if (!dialog) return;
|
|
1308
1362
|
if (isOpen) {
|
|
1363
|
+
triggerRef.current = document.activeElement;
|
|
1309
1364
|
dialog.showModal();
|
|
1310
1365
|
document.body.style.overflow = "hidden";
|
|
1311
1366
|
} else if (dialog.open) {
|
|
1312
1367
|
dialog.close();
|
|
1313
1368
|
document.body.style.overflow = "";
|
|
1369
|
+
triggerRef.current?.focus();
|
|
1314
1370
|
}
|
|
1315
1371
|
return () => {
|
|
1316
1372
|
document.body.style.overflow = "";
|
|
@@ -1328,7 +1384,8 @@ function Drawer({
|
|
|
1328
1384
|
{
|
|
1329
1385
|
ref: dialogRef,
|
|
1330
1386
|
className: (0, import_design_system_foundation25.cn)(Drawer_default.drawer, Drawer_default[`--side_${side}`], className),
|
|
1331
|
-
"aria-label":
|
|
1387
|
+
"aria-label": ariaLabel,
|
|
1388
|
+
"aria-modal": "true",
|
|
1332
1389
|
onClick: handleClick,
|
|
1333
1390
|
onCancel: handleCancel,
|
|
1334
1391
|
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: Drawer_default.panel, children: [
|
|
@@ -1355,7 +1412,7 @@ function Drawer({
|
|
|
1355
1412
|
var import_react9 = require("react");
|
|
1356
1413
|
|
|
1357
1414
|
// src/components/interaction/DropdownMenu/DropdownMenu.module.css
|
|
1358
|
-
var DropdownMenu_default = {"wrapper":"
|
|
1415
|
+
var DropdownMenu_default = {"wrapper":"bds101DropdownMenu-wrapper","menu":"bds101DropdownMenu-menu","--placement_bottom-start":"bds101DropdownMenu---placement_bottom-start","--placement_bottom-end":"bds101DropdownMenu---placement_bottom-end","separator":"bds101DropdownMenu-separator","item":"bds101DropdownMenu-item","icon":"bds101DropdownMenu-icon"};
|
|
1359
1416
|
|
|
1360
1417
|
// src/components/interaction/DropdownMenu/DropdownMenu.tsx
|
|
1361
1418
|
var import_design_system_foundation26 = require("@boostdev/design-system-foundation");
|
|
@@ -1468,7 +1525,7 @@ function DropdownMenu({
|
|
|
1468
1525
|
var import_react10 = require("react");
|
|
1469
1526
|
|
|
1470
1527
|
// src/components/interaction/Popover/Popover.module.css
|
|
1471
|
-
var Popover_default = {"wrapper":"
|
|
1528
|
+
var Popover_default = {"wrapper":"bds101Popover-wrapper","panel":"bds101Popover-panel","--placement_bottom":"bds101Popover---placement_bottom","--placement_top":"bds101Popover---placement_top","--placement_right":"bds101Popover---placement_right","--placement_left":"bds101Popover---placement_left"};
|
|
1472
1529
|
|
|
1473
1530
|
// src/components/interaction/Popover/Popover.tsx
|
|
1474
1531
|
var import_design_system_foundation27 = require("@boostdev/design-system-foundation");
|
|
@@ -1477,7 +1534,8 @@ function Popover({
|
|
|
1477
1534
|
children,
|
|
1478
1535
|
content,
|
|
1479
1536
|
placement = "bottom",
|
|
1480
|
-
className
|
|
1537
|
+
className,
|
|
1538
|
+
"aria-label": ariaLabel
|
|
1481
1539
|
}) {
|
|
1482
1540
|
const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
|
|
1483
1541
|
const containerRef = (0, import_react10.useRef)(null);
|
|
@@ -1502,6 +1560,7 @@ function Popover({
|
|
|
1502
1560
|
const trigger = (0, import_react10.isValidElement)(children) ? (0, import_react10.cloneElement)(children, {
|
|
1503
1561
|
"aria-expanded": isOpen,
|
|
1504
1562
|
"aria-controls": panelId,
|
|
1563
|
+
"aria-haspopup": true,
|
|
1505
1564
|
onClick: (e) => {
|
|
1506
1565
|
setIsOpen((prev) => !prev);
|
|
1507
1566
|
const existingOnClick = children.props.onClick;
|
|
@@ -1514,8 +1573,8 @@ function Popover({
|
|
|
1514
1573
|
"div",
|
|
1515
1574
|
{
|
|
1516
1575
|
id: panelId,
|
|
1517
|
-
role: "
|
|
1518
|
-
"aria-
|
|
1576
|
+
role: ariaLabel ? "region" : void 0,
|
|
1577
|
+
"aria-label": ariaLabel,
|
|
1519
1578
|
className: (0, import_design_system_foundation27.cn)(Popover_default.panel, Popover_default[`--placement_${placement}`]),
|
|
1520
1579
|
children: content
|
|
1521
1580
|
}
|
|
@@ -1524,7 +1583,7 @@ function Popover({
|
|
|
1524
1583
|
}
|
|
1525
1584
|
|
|
1526
1585
|
// src/components/interaction/Rating/Rating.module.css
|
|
1527
|
-
var Rating_default = {"rating":"
|
|
1586
|
+
var Rating_default = {"rating":"bds101Rating-rating","star":"bds101Rating-star","--filled":"bds101Rating---filled"};
|
|
1528
1587
|
|
|
1529
1588
|
// src/components/interaction/Rating/Rating.tsx
|
|
1530
1589
|
var import_design_system_foundation28 = require("@boostdev/design-system-foundation");
|
|
@@ -1555,7 +1614,7 @@ function Rating({ value, max = 5, className }) {
|
|
|
1555
1614
|
var import_react11 = require("react");
|
|
1556
1615
|
|
|
1557
1616
|
// src/components/interaction/Toast/Toast.module.css
|
|
1558
|
-
var Toast_default = {"toastContainer":"
|
|
1617
|
+
var Toast_default = {"toastContainer":"bds101Toast-toastContainer","toast":"bds101Toast-toast","--variant_success":"bds101Toast---variant_success","--variant_warning":"bds101Toast---variant_warning","--variant_info":"bds101Toast---variant_info","--variant_error":"bds101Toast---variant_error","message":"bds101Toast-message","closeButton":"bds101Toast-closeButton"};
|
|
1559
1618
|
|
|
1560
1619
|
// src/components/interaction/Toast/Toast.tsx
|
|
1561
1620
|
var import_design_system_foundation29 = require("@boostdev/design-system-foundation");
|
|
@@ -1588,7 +1647,7 @@ function ToastItem({ toast, onRemove }) {
|
|
|
1588
1647
|
const timer = setTimeout(onRemove, 5e3);
|
|
1589
1648
|
return () => clearTimeout(timer);
|
|
1590
1649
|
}, [onRemove]);
|
|
1591
|
-
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: [
|
|
1650
|
+
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", "aria-live": "polite", "aria-atomic": "true", children: [
|
|
1592
1651
|
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: Toast_default.message, children: toast.message }),
|
|
1593
1652
|
/* @__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" }) }) })
|
|
1594
1653
|
] });
|
|
@@ -1605,10 +1664,10 @@ function useToast() {
|
|
|
1605
1664
|
var import_react12 = require("react");
|
|
1606
1665
|
|
|
1607
1666
|
// src/components/interaction/form/Checkbox/Checkbox.module.css
|
|
1608
|
-
var Checkbox_default = {"checkboxGroup":"
|
|
1667
|
+
var Checkbox_default = {"checkboxGroup":"bds101Checkbox-checkboxGroup","inputWrapper":"bds101Checkbox-inputWrapper","checkbox":"bds101Checkbox-checkbox","checkboxError":"bds101Checkbox-checkboxError"};
|
|
1609
1668
|
|
|
1610
1669
|
// src/components/interaction/form/atoms/Message.module.css
|
|
1611
|
-
var Message_default = {"error":"
|
|
1670
|
+
var Message_default = {"error":"bds101Message-error","hint":"bds101Message-hint"};
|
|
1612
1671
|
|
|
1613
1672
|
// src/components/interaction/form/atoms/Message.tsx
|
|
1614
1673
|
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
@@ -1618,7 +1677,7 @@ var Message = ({ message, type, inputId }) => {
|
|
|
1618
1677
|
};
|
|
1619
1678
|
|
|
1620
1679
|
// src/components/interaction/form/atoms/Label.module.css
|
|
1621
|
-
var Label_default = {"label":"
|
|
1680
|
+
var Label_default = {"label":"bds101Label-label"};
|
|
1622
1681
|
|
|
1623
1682
|
// src/components/interaction/form/atoms/Label.tsx
|
|
1624
1683
|
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
@@ -1630,7 +1689,7 @@ var Label = ({ label, id }) => {
|
|
|
1630
1689
|
var import_design_system_foundation31 = require("@boostdev/design-system-foundation");
|
|
1631
1690
|
|
|
1632
1691
|
// src/components/interaction/form/atoms/InputContainer.module.css
|
|
1633
|
-
var InputContainer_default = {"container":"
|
|
1692
|
+
var InputContainer_default = {"container":"bds101InputContainer-container"};
|
|
1634
1693
|
|
|
1635
1694
|
// src/components/interaction/form/atoms/InputContainer.tsx
|
|
1636
1695
|
var import_design_system_foundation30 = require("@boostdev/design-system-foundation");
|
|
@@ -1667,15 +1726,57 @@ function Checkbox({ label, name, error, hint, className, ...props }) {
|
|
|
1667
1726
|
] });
|
|
1668
1727
|
}
|
|
1669
1728
|
|
|
1670
|
-
// src/components/interaction/form/
|
|
1729
|
+
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
|
|
1671
1730
|
var import_react13 = require("react");
|
|
1672
1731
|
|
|
1673
|
-
// src/components/interaction/form/
|
|
1674
|
-
var
|
|
1732
|
+
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css
|
|
1733
|
+
var CheckboxGroup_default = {"group":"bds101CheckboxGroup-group","legend":"bds101CheckboxGroup-legend","required":"bds101CheckboxGroup-required","items":"bds101CheckboxGroup-items"};
|
|
1675
1734
|
|
|
1676
|
-
// src/components/interaction/form/
|
|
1735
|
+
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
|
|
1677
1736
|
var import_design_system_foundation32 = require("@boostdev/design-system-foundation");
|
|
1678
1737
|
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1738
|
+
function CheckboxGroup({
|
|
1739
|
+
legend,
|
|
1740
|
+
children,
|
|
1741
|
+
error,
|
|
1742
|
+
hint,
|
|
1743
|
+
required,
|
|
1744
|
+
disabled,
|
|
1745
|
+
className
|
|
1746
|
+
}) {
|
|
1747
|
+
const id = (0, import_react13.useId)();
|
|
1748
|
+
const hintId = id + "hint";
|
|
1749
|
+
const errorId = id + "error";
|
|
1750
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1751
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
1752
|
+
"fieldset",
|
|
1753
|
+
{
|
|
1754
|
+
className: (0, import_design_system_foundation32.cn)(CheckboxGroup_default.group, className),
|
|
1755
|
+
disabled,
|
|
1756
|
+
"aria-required": required || void 0,
|
|
1757
|
+
"aria-describedby": describedBy,
|
|
1758
|
+
children: [
|
|
1759
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("legend", { className: CheckboxGroup_default.legend, children: [
|
|
1760
|
+
legend,
|
|
1761
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: CheckboxGroup_default.required, "aria-hidden": "true", children: " *" })
|
|
1762
|
+
] }),
|
|
1763
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: CheckboxGroup_default.items, children }),
|
|
1764
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
1765
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
1766
|
+
]
|
|
1767
|
+
}
|
|
1768
|
+
);
|
|
1769
|
+
}
|
|
1770
|
+
|
|
1771
|
+
// src/components/interaction/form/Combobox/Combobox.tsx
|
|
1772
|
+
var import_react14 = require("react");
|
|
1773
|
+
|
|
1774
|
+
// src/components/interaction/form/Combobox/Combobox.module.css
|
|
1775
|
+
var Combobox_default = {"formGroup":"bds101Combobox-formGroup","inputWrapper":"bds101Combobox-inputWrapper","input":"bds101Combobox-input","inputError":"bds101Combobox-inputError","chevron":"bds101Combobox-chevron","listbox":"bds101Combobox-listbox","option":"bds101Combobox-option","--highlighted":"bds101Combobox---highlighted","--selected":"bds101Combobox---selected","--disabled":"bds101Combobox---disabled"};
|
|
1776
|
+
|
|
1777
|
+
// src/components/interaction/form/Combobox/Combobox.tsx
|
|
1778
|
+
var import_design_system_foundation33 = require("@boostdev/design-system-foundation");
|
|
1779
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
1679
1780
|
function Combobox({
|
|
1680
1781
|
label,
|
|
1681
1782
|
name,
|
|
@@ -1688,25 +1789,25 @@ function Combobox({
|
|
|
1688
1789
|
hint,
|
|
1689
1790
|
className
|
|
1690
1791
|
}) {
|
|
1691
|
-
const id = name + (0,
|
|
1792
|
+
const id = name + (0, import_react14.useId)();
|
|
1692
1793
|
const listboxId = id + "listbox";
|
|
1693
1794
|
const hintId = id + "hint";
|
|
1694
1795
|
const errorId = id + "error";
|
|
1695
1796
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1696
|
-
const selectedOption = (0,
|
|
1697
|
-
const [inputValue, setInputValue] = (0,
|
|
1698
|
-
(0,
|
|
1797
|
+
const selectedOption = (0, import_react14.useMemo)(() => options.find((o) => o.value === value), [options, value]);
|
|
1798
|
+
const [inputValue, setInputValue] = (0, import_react14.useState)(selectedOption?.label ?? "");
|
|
1799
|
+
(0, import_react14.useEffect)(() => {
|
|
1699
1800
|
setInputValue(selectedOption?.label ?? "");
|
|
1700
1801
|
}, [selectedOption]);
|
|
1701
|
-
const [isOpen, setIsOpen] = (0,
|
|
1702
|
-
const [highlightedIndex, setHighlightedIndex] = (0,
|
|
1703
|
-
const containerRef = (0,
|
|
1704
|
-
const inputRef = (0,
|
|
1802
|
+
const [isOpen, setIsOpen] = (0, import_react14.useState)(false);
|
|
1803
|
+
const [highlightedIndex, setHighlightedIndex] = (0, import_react14.useState)(-1);
|
|
1804
|
+
const containerRef = (0, import_react14.useRef)(null);
|
|
1805
|
+
const inputRef = (0, import_react14.useRef)(null);
|
|
1705
1806
|
const filtered = options.filter(
|
|
1706
1807
|
(o) => o.label.toLowerCase().includes(inputValue.toLowerCase())
|
|
1707
1808
|
);
|
|
1708
1809
|
const getOptionId = (index) => `${id}-option-${index}`;
|
|
1709
|
-
(0,
|
|
1810
|
+
(0, import_react14.useEffect)(() => {
|
|
1710
1811
|
if (!isOpen) return;
|
|
1711
1812
|
const handlePointerDown = (e) => {
|
|
1712
1813
|
if (!containerRef.current?.contains(e.target)) setIsOpen(false);
|
|
@@ -1753,10 +1854,10 @@ function Combobox({
|
|
|
1753
1854
|
setIsOpen(false);
|
|
1754
1855
|
}
|
|
1755
1856
|
};
|
|
1756
|
-
return /* @__PURE__ */ (0,
|
|
1757
|
-
/* @__PURE__ */ (0,
|
|
1758
|
-
/* @__PURE__ */ (0,
|
|
1759
|
-
/* @__PURE__ */ (0,
|
|
1857
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(InputContainer, { className: (0, import_design_system_foundation33.cn)(Combobox_default.formGroup, className), children: [
|
|
1858
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Label, { id, label }),
|
|
1859
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ref: containerRef, className: Combobox_default.inputWrapper, children: [
|
|
1860
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
1760
1861
|
"input",
|
|
1761
1862
|
{
|
|
1762
1863
|
ref: inputRef,
|
|
@@ -1775,28 +1876,27 @@ function Combobox({
|
|
|
1775
1876
|
placeholder,
|
|
1776
1877
|
value: inputValue,
|
|
1777
1878
|
disabled,
|
|
1778
|
-
className: (0,
|
|
1879
|
+
className: (0, import_design_system_foundation33.cn)(Combobox_default.input, error ? Combobox_default.inputError : void 0),
|
|
1779
1880
|
onChange: handleInputChange,
|
|
1780
1881
|
onKeyDown: handleKeyDown,
|
|
1781
1882
|
onFocus: () => setIsOpen(true)
|
|
1782
1883
|
}
|
|
1783
1884
|
),
|
|
1784
|
-
/* @__PURE__ */ (0,
|
|
1785
|
-
isOpen && filtered.length > 0 && /* @__PURE__ */ (0,
|
|
1885
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: Combobox_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" }) }) }),
|
|
1886
|
+
isOpen && filtered.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
1786
1887
|
"ul",
|
|
1787
1888
|
{
|
|
1788
1889
|
id: listboxId,
|
|
1789
1890
|
role: "listbox",
|
|
1790
|
-
"aria-label": String(label),
|
|
1791
1891
|
className: Combobox_default.listbox,
|
|
1792
|
-
children: filtered.map((option, index) => /* @__PURE__ */ (0,
|
|
1892
|
+
children: filtered.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
1793
1893
|
"li",
|
|
1794
1894
|
{
|
|
1795
1895
|
id: getOptionId(index),
|
|
1796
1896
|
role: "option",
|
|
1797
1897
|
"aria-selected": option.value === value,
|
|
1798
1898
|
"aria-disabled": option.disabled,
|
|
1799
|
-
className: (0,
|
|
1899
|
+
className: (0, import_design_system_foundation33.cn)(
|
|
1800
1900
|
Combobox_default.option,
|
|
1801
1901
|
index === highlightedIndex ? Combobox_default["--highlighted"] : void 0,
|
|
1802
1902
|
option.value === value ? Combobox_default["--selected"] : void 0,
|
|
@@ -1813,38 +1913,39 @@ function Combobox({
|
|
|
1813
1913
|
}
|
|
1814
1914
|
)
|
|
1815
1915
|
] }),
|
|
1816
|
-
/* @__PURE__ */ (0,
|
|
1817
|
-
/* @__PURE__ */ (0,
|
|
1916
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
1917
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
1818
1918
|
] });
|
|
1819
1919
|
}
|
|
1820
1920
|
|
|
1821
1921
|
// src/components/interaction/form/FileInput/FileInput.tsx
|
|
1822
|
-
var
|
|
1922
|
+
var import_react15 = require("react");
|
|
1823
1923
|
|
|
1824
1924
|
// src/components/interaction/form/FileInput/FileInput.module.css
|
|
1825
|
-
var FileInput_default = {"formGroup":"
|
|
1925
|
+
var FileInput_default = {"formGroup":"bds101FileInput-formGroup","fieldLabel":"bds101FileInput-fieldLabel","dropZone":"bds101FileInput-dropZone","isDragging":"bds101FileInput-isDragging","hasError":"bds101FileInput-hasError","isDisabled":"bds101FileInput-isDisabled","icon":"bds101FileInput-icon","prompt":"bds101FileInput-prompt","acceptHint":"bds101FileInput-acceptHint","hiddenInput":"bds101FileInput-hiddenInput"};
|
|
1826
1926
|
|
|
1827
1927
|
// src/components/interaction/form/FileInput/FileInput.tsx
|
|
1828
|
-
var
|
|
1829
|
-
var
|
|
1928
|
+
var import_design_system_foundation34 = require("@boostdev/design-system-foundation");
|
|
1929
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
1830
1930
|
function FileInput({
|
|
1831
1931
|
label,
|
|
1832
1932
|
name,
|
|
1833
1933
|
accept,
|
|
1834
1934
|
multiple = false,
|
|
1835
1935
|
disabled = false,
|
|
1936
|
+
required,
|
|
1836
1937
|
error,
|
|
1837
1938
|
hint,
|
|
1838
1939
|
onChange,
|
|
1839
1940
|
className
|
|
1840
1941
|
}) {
|
|
1841
|
-
const uid = name + (0,
|
|
1942
|
+
const uid = name + (0, import_react15.useId)();
|
|
1842
1943
|
const hintId = uid + "hint";
|
|
1843
1944
|
const errorId = uid + "error";
|
|
1844
1945
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1845
|
-
const inputRef = (0,
|
|
1846
|
-
const [isDragging, setIsDragging] = (0,
|
|
1847
|
-
const [fileNames, setFileNames] = (0,
|
|
1946
|
+
const inputRef = (0, import_react15.useRef)(null);
|
|
1947
|
+
const [isDragging, setIsDragging] = (0, import_react15.useState)(false);
|
|
1948
|
+
const [fileNames, setFileNames] = (0, import_react15.useState)([]);
|
|
1848
1949
|
const isFileAccepted = (file) => {
|
|
1849
1950
|
if (!accept) return true;
|
|
1850
1951
|
return accept.split(",").some((token) => {
|
|
@@ -1874,24 +1975,24 @@ function FileInput({
|
|
|
1874
1975
|
if (!disabled) setIsDragging(true);
|
|
1875
1976
|
};
|
|
1876
1977
|
const handleDragLeave = () => setIsDragging(false);
|
|
1877
|
-
return /* @__PURE__ */ (0,
|
|
1878
|
-
/* @__PURE__ */ (0,
|
|
1879
|
-
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
1978
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(InputContainer, { className: (0, import_design_system_foundation34.cn)(FileInput_default.formGroup, className), children: [
|
|
1979
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
1880
1980
|
"label",
|
|
1881
1981
|
{
|
|
1882
1982
|
htmlFor: uid,
|
|
1883
|
-
className: (0,
|
|
1983
|
+
className: (0, import_design_system_foundation34.cn)(FileInput_default.dropZone, isDragging && FileInput_default.isDragging, error && FileInput_default.hasError, disabled && FileInput_default.isDisabled),
|
|
1884
1984
|
onDrop: handleDrop,
|
|
1885
1985
|
onDragOver: handleDragOver,
|
|
1886
1986
|
onDragLeave: handleDragLeave,
|
|
1887
1987
|
children: [
|
|
1888
|
-
/* @__PURE__ */ (0,
|
|
1889
|
-
/* @__PURE__ */ (0,
|
|
1890
|
-
|
|
1988
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: FileInput_default.fieldLabel, children: label }),
|
|
1989
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.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" }) }),
|
|
1990
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: FileInput_default.prompt, children: fileNames.length > 0 ? fileNames.join(", ") : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
1991
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("strong", { children: "Click to upload" }),
|
|
1891
1992
|
" or drag and drop"
|
|
1892
1993
|
] }) }),
|
|
1893
|
-
accept && /* @__PURE__ */ (0,
|
|
1894
|
-
/* @__PURE__ */ (0,
|
|
1994
|
+
accept && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: FileInput_default.acceptHint, children: accept }),
|
|
1995
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
1895
1996
|
"input",
|
|
1896
1997
|
{
|
|
1897
1998
|
ref: inputRef,
|
|
@@ -1903,6 +2004,8 @@ function FileInput({
|
|
|
1903
2004
|
disabled,
|
|
1904
2005
|
"aria-invalid": !!error,
|
|
1905
2006
|
"aria-describedby": describedBy,
|
|
2007
|
+
"aria-required": required || void 0,
|
|
2008
|
+
required,
|
|
1906
2009
|
className: FileInput_default.hiddenInput,
|
|
1907
2010
|
onChange: handleChange
|
|
1908
2011
|
}
|
|
@@ -1910,20 +2013,20 @@ function FileInput({
|
|
|
1910
2013
|
]
|
|
1911
2014
|
}
|
|
1912
2015
|
),
|
|
1913
|
-
/* @__PURE__ */ (0,
|
|
1914
|
-
/* @__PURE__ */ (0,
|
|
2016
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Message, { inputId: uid, type: "error", message: error }),
|
|
2017
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Message, { inputId: uid, type: "hint", message: hint })
|
|
1915
2018
|
] });
|
|
1916
2019
|
}
|
|
1917
2020
|
|
|
1918
2021
|
// src/components/interaction/form/FormInput/FormInput.tsx
|
|
1919
|
-
var
|
|
2022
|
+
var import_react16 = require("react");
|
|
1920
2023
|
|
|
1921
2024
|
// src/components/interaction/form/FormInput/FormInput.module.css
|
|
1922
|
-
var FormInput_default = {"formGroup":"
|
|
2025
|
+
var FormInput_default = {"formGroup":"bds101FormInput-formGroup","input":"bds101FormInput-input","inputError":"bds101FormInput-inputError"};
|
|
1923
2026
|
|
|
1924
2027
|
// src/components/interaction/form/FormInput/FormInput.tsx
|
|
1925
|
-
var
|
|
1926
|
-
var
|
|
2028
|
+
var import_design_system_foundation35 = require("@boostdev/design-system-foundation");
|
|
2029
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
1927
2030
|
function FormInput({
|
|
1928
2031
|
label,
|
|
1929
2032
|
name,
|
|
@@ -1931,40 +2034,43 @@ function FormInput({
|
|
|
1931
2034
|
error,
|
|
1932
2035
|
hint,
|
|
1933
2036
|
className,
|
|
2037
|
+
required,
|
|
1934
2038
|
...props
|
|
1935
2039
|
}) {
|
|
1936
|
-
const id = name + (0,
|
|
2040
|
+
const id = name + (0, import_react16.useId)();
|
|
1937
2041
|
const hintId = id + "hint";
|
|
1938
2042
|
const errorId = id + "error";
|
|
1939
2043
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1940
|
-
return /* @__PURE__ */ (0,
|
|
1941
|
-
/* @__PURE__ */ (0,
|
|
1942
|
-
/* @__PURE__ */ (0,
|
|
2044
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(InputContainer, { className: (0, import_design_system_foundation35.cn)(FormInput_default.formGroup, className), children: [
|
|
2045
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Label, { id, label }),
|
|
2046
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
1943
2047
|
"input",
|
|
1944
2048
|
{
|
|
1945
2049
|
"aria-invalid": !!error,
|
|
1946
2050
|
"aria-describedby": describedBy,
|
|
1947
2051
|
"aria-label": ariaLabel,
|
|
2052
|
+
"aria-required": required || void 0,
|
|
1948
2053
|
id,
|
|
1949
2054
|
name,
|
|
1950
|
-
|
|
2055
|
+
required,
|
|
2056
|
+
className: (0, import_design_system_foundation35.cn)(FormInput_default.input, error && FormInput_default.inputError),
|
|
1951
2057
|
...props
|
|
1952
2058
|
}
|
|
1953
2059
|
),
|
|
1954
|
-
/* @__PURE__ */ (0,
|
|
1955
|
-
/* @__PURE__ */ (0,
|
|
2060
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
2061
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
1956
2062
|
] });
|
|
1957
2063
|
}
|
|
1958
2064
|
|
|
1959
2065
|
// src/components/interaction/form/NumberInput/NumberInput.tsx
|
|
1960
|
-
var
|
|
2066
|
+
var import_react17 = require("react");
|
|
1961
2067
|
|
|
1962
2068
|
// src/components/interaction/form/NumberInput/NumberInput.module.css
|
|
1963
|
-
var NumberInput_default = {"formGroup":"
|
|
2069
|
+
var NumberInput_default = {"formGroup":"bds101NumberInput-formGroup","inputRow":"bds101NumberInput-inputRow","input":"bds101NumberInput-input","inputError":"bds101NumberInput-inputError","stepper":"bds101NumberInput-stepper"};
|
|
1964
2070
|
|
|
1965
2071
|
// src/components/interaction/form/NumberInput/NumberInput.tsx
|
|
1966
|
-
var
|
|
1967
|
-
var
|
|
2072
|
+
var import_design_system_foundation36 = require("@boostdev/design-system-foundation");
|
|
2073
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
1968
2074
|
function NumberInput({
|
|
1969
2075
|
label,
|
|
1970
2076
|
name,
|
|
@@ -1979,13 +2085,13 @@ function NumberInput({
|
|
|
1979
2085
|
onChange,
|
|
1980
2086
|
className
|
|
1981
2087
|
}) {
|
|
1982
|
-
const uid = name + (0,
|
|
2088
|
+
const uid = name + (0, import_react17.useId)();
|
|
1983
2089
|
const hintId = uid + "hint";
|
|
1984
2090
|
const errorId = uid + "error";
|
|
1985
2091
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1986
|
-
const inputRef = (0,
|
|
2092
|
+
const inputRef = (0, import_react17.useRef)(null);
|
|
1987
2093
|
const isControlled = value !== void 0;
|
|
1988
|
-
const [internalValue, setInternalValue] = (0,
|
|
2094
|
+
const [internalValue, setInternalValue] = (0, import_react17.useState)(defaultValue ?? 0);
|
|
1989
2095
|
const currentValue = isControlled ? value : internalValue;
|
|
1990
2096
|
const clamp = (v) => {
|
|
1991
2097
|
const withMin = min !== void 0 ? Math.max(min, v) : v;
|
|
@@ -1993,25 +2099,32 @@ function NumberInput({
|
|
|
1993
2099
|
};
|
|
1994
2100
|
const adjust = (delta) => {
|
|
1995
2101
|
const next = clamp(currentValue + delta);
|
|
1996
|
-
if (!isControlled)
|
|
2102
|
+
if (!isControlled) {
|
|
2103
|
+
setInternalValue(next);
|
|
2104
|
+
if (inputRef.current) {
|
|
2105
|
+
inputRef.current.value = String(next);
|
|
2106
|
+
inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
|
|
2107
|
+
}
|
|
2108
|
+
}
|
|
1997
2109
|
onChange?.(next);
|
|
1998
2110
|
};
|
|
1999
|
-
return /* @__PURE__ */ (0,
|
|
2000
|
-
/* @__PURE__ */ (0,
|
|
2001
|
-
/* @__PURE__ */ (0,
|
|
2002
|
-
/* @__PURE__ */ (0,
|
|
2111
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(InputContainer, { className: (0, import_design_system_foundation36.cn)(NumberInput_default.formGroup, className), children: [
|
|
2112
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Label, { id: uid, label }),
|
|
2113
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: NumberInput_default.inputRow, children: [
|
|
2114
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2003
2115
|
"button",
|
|
2004
2116
|
{
|
|
2005
2117
|
type: "button",
|
|
2006
2118
|
className: NumberInput_default.stepper,
|
|
2007
2119
|
"aria-label": "Decrease",
|
|
2120
|
+
"aria-controls": uid,
|
|
2008
2121
|
disabled: disabled || min !== void 0 && currentValue <= min,
|
|
2009
2122
|
onClick: () => adjust(-step),
|
|
2010
2123
|
tabIndex: -1,
|
|
2011
|
-
children: /* @__PURE__ */ (0,
|
|
2124
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12h14" }) })
|
|
2012
2125
|
}
|
|
2013
2126
|
),
|
|
2014
|
-
/* @__PURE__ */ (0,
|
|
2127
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2015
2128
|
"input",
|
|
2016
2129
|
{
|
|
2017
2130
|
ref: inputRef,
|
|
@@ -2025,49 +2138,51 @@ function NumberInput({
|
|
|
2025
2138
|
disabled,
|
|
2026
2139
|
"aria-invalid": !!error,
|
|
2027
2140
|
"aria-describedby": describedBy,
|
|
2028
|
-
className: (0,
|
|
2141
|
+
className: (0, import_design_system_foundation36.cn)(NumberInput_default.input, error ? NumberInput_default.inputError : void 0),
|
|
2029
2142
|
onChange: (e) => {
|
|
2030
2143
|
const v = parseFloat(e.target.value);
|
|
2031
|
-
|
|
2032
|
-
|
|
2144
|
+
const safe = isNaN(v) ? 0 : v;
|
|
2145
|
+
if (!isControlled) setInternalValue(safe);
|
|
2146
|
+
onChange?.(safe);
|
|
2033
2147
|
}
|
|
2034
2148
|
}
|
|
2035
2149
|
),
|
|
2036
|
-
/* @__PURE__ */ (0,
|
|
2150
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2037
2151
|
"button",
|
|
2038
2152
|
{
|
|
2039
2153
|
type: "button",
|
|
2040
2154
|
className: NumberInput_default.stepper,
|
|
2041
2155
|
"aria-label": "Increase",
|
|
2156
|
+
"aria-controls": uid,
|
|
2042
2157
|
disabled: disabled || max !== void 0 && currentValue >= max,
|
|
2043
2158
|
onClick: () => adjust(step),
|
|
2044
2159
|
tabIndex: -1,
|
|
2045
|
-
children: /* @__PURE__ */ (0,
|
|
2160
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 5v14M5 12h14" }) })
|
|
2046
2161
|
}
|
|
2047
2162
|
)
|
|
2048
2163
|
] }),
|
|
2049
|
-
/* @__PURE__ */ (0,
|
|
2050
|
-
/* @__PURE__ */ (0,
|
|
2164
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Message, { inputId: uid, type: "error", message: error }),
|
|
2165
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Message, { inputId: uid, type: "hint", message: hint })
|
|
2051
2166
|
] });
|
|
2052
2167
|
}
|
|
2053
2168
|
|
|
2054
2169
|
// src/components/interaction/form/Radio/Radio.tsx
|
|
2055
|
-
var
|
|
2170
|
+
var import_react18 = require("react");
|
|
2056
2171
|
|
|
2057
2172
|
// src/components/interaction/form/Radio/Radio.module.css
|
|
2058
|
-
var Radio_default = {"radioGroup":"
|
|
2173
|
+
var Radio_default = {"radioGroup":"bds101Radio-radioGroup","inputWrapper":"bds101Radio-inputWrapper","textWrapper":"bds101Radio-textWrapper","description":"bds101Radio-description","radio":"bds101Radio-radio","radioError":"bds101Radio-radioError"};
|
|
2059
2174
|
|
|
2060
2175
|
// src/components/interaction/form/Radio/Radio.tsx
|
|
2061
|
-
var
|
|
2062
|
-
var
|
|
2176
|
+
var import_design_system_foundation37 = require("@boostdev/design-system-foundation");
|
|
2177
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2063
2178
|
function Radio({ label, name, description, error, hint, className, ...props }) {
|
|
2064
|
-
const id = name + (0,
|
|
2179
|
+
const id = name + (0, import_react18.useId)();
|
|
2065
2180
|
const hintId = id + "hint";
|
|
2066
2181
|
const errorId = id + "error";
|
|
2067
2182
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2068
|
-
return /* @__PURE__ */ (0,
|
|
2069
|
-
/* @__PURE__ */ (0,
|
|
2070
|
-
/* @__PURE__ */ (0,
|
|
2183
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(InputContainer, { className: (0, import_design_system_foundation37.cn)(Radio_default.radioGroup, className), children: [
|
|
2184
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: Radio_default.inputWrapper, children: [
|
|
2185
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
2071
2186
|
"input",
|
|
2072
2187
|
{
|
|
2073
2188
|
"aria-describedby": describedBy,
|
|
@@ -2075,29 +2190,71 @@ function Radio({ label, name, description, error, hint, className, ...props }) {
|
|
|
2075
2190
|
type: "radio",
|
|
2076
2191
|
id,
|
|
2077
2192
|
name,
|
|
2078
|
-
className: (0,
|
|
2193
|
+
className: (0, import_design_system_foundation37.cn)(Radio_default.radio, error && Radio_default.radioError),
|
|
2079
2194
|
...props
|
|
2080
2195
|
}
|
|
2081
2196
|
),
|
|
2082
|
-
/* @__PURE__ */ (0,
|
|
2083
|
-
/* @__PURE__ */ (0,
|
|
2084
|
-
description && /* @__PURE__ */ (0,
|
|
2197
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: Radio_default.textWrapper, children: [
|
|
2198
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Label, { id, label }),
|
|
2199
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: Radio_default.description, children: description })
|
|
2085
2200
|
] })
|
|
2086
2201
|
] }),
|
|
2087
|
-
/* @__PURE__ */ (0,
|
|
2088
|
-
/* @__PURE__ */ (0,
|
|
2202
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
2203
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
2089
2204
|
] });
|
|
2090
2205
|
}
|
|
2091
2206
|
|
|
2207
|
+
// src/components/interaction/form/RadioGroup/RadioGroup.tsx
|
|
2208
|
+
var import_react19 = require("react");
|
|
2209
|
+
|
|
2210
|
+
// src/components/interaction/form/RadioGroup/RadioGroup.module.css
|
|
2211
|
+
var RadioGroup_default = {"group":"bds101RadioGroup-group","legend":"bds101RadioGroup-legend","required":"bds101RadioGroup-required","items":"bds101RadioGroup-items"};
|
|
2212
|
+
|
|
2213
|
+
// src/components/interaction/form/RadioGroup/RadioGroup.tsx
|
|
2214
|
+
var import_design_system_foundation38 = require("@boostdev/design-system-foundation");
|
|
2215
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
2216
|
+
function RadioGroup({
|
|
2217
|
+
legend,
|
|
2218
|
+
children,
|
|
2219
|
+
error,
|
|
2220
|
+
hint,
|
|
2221
|
+
required,
|
|
2222
|
+
disabled,
|
|
2223
|
+
className
|
|
2224
|
+
}) {
|
|
2225
|
+
const id = (0, import_react19.useId)();
|
|
2226
|
+
const hintId = id + "hint";
|
|
2227
|
+
const errorId = id + "error";
|
|
2228
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2229
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
2230
|
+
"fieldset",
|
|
2231
|
+
{
|
|
2232
|
+
className: (0, import_design_system_foundation38.cn)(RadioGroup_default.group, className),
|
|
2233
|
+
disabled,
|
|
2234
|
+
"aria-required": required || void 0,
|
|
2235
|
+
"aria-describedby": describedBy,
|
|
2236
|
+
children: [
|
|
2237
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("legend", { className: RadioGroup_default.legend, children: [
|
|
2238
|
+
legend,
|
|
2239
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: RadioGroup_default.required, "aria-hidden": "true", children: " *" })
|
|
2240
|
+
] }),
|
|
2241
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: RadioGroup_default.items, children }),
|
|
2242
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
2243
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
2244
|
+
]
|
|
2245
|
+
}
|
|
2246
|
+
);
|
|
2247
|
+
}
|
|
2248
|
+
|
|
2092
2249
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
|
|
2093
|
-
var
|
|
2250
|
+
var import_react20 = require("react");
|
|
2094
2251
|
|
|
2095
2252
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.module.css
|
|
2096
|
-
var SegmentedControl_default = {"control":"
|
|
2253
|
+
var SegmentedControl_default = {"control":"bds101SegmentedControl-control","thumb":"bds101SegmentedControl-thumb","item":"bds101SegmentedControl-item","--disabled":"bds101SegmentedControl---disabled","radio":"bds101SegmentedControl-radio","label":"bds101SegmentedControl-label","--size_small":"bds101SegmentedControl---size_small","--size_large":"bds101SegmentedControl---size_large","--active":"bds101SegmentedControl---active"};
|
|
2097
2254
|
|
|
2098
2255
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
|
|
2099
|
-
var
|
|
2100
|
-
var
|
|
2256
|
+
var import_design_system_foundation39 = require("@boostdev/design-system-foundation");
|
|
2257
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
2101
2258
|
function SegmentedControl({
|
|
2102
2259
|
name,
|
|
2103
2260
|
options,
|
|
@@ -2107,10 +2264,11 @@ function SegmentedControl({
|
|
|
2107
2264
|
disabled,
|
|
2108
2265
|
size = "medium",
|
|
2109
2266
|
className,
|
|
2267
|
+
"aria-label": ariaLabel,
|
|
2110
2268
|
...rest
|
|
2111
2269
|
}) {
|
|
2112
|
-
const baseId = name + (0,
|
|
2113
|
-
const [internalValue, setInternalValue] = (0,
|
|
2270
|
+
const baseId = name + (0, import_react20.useId)();
|
|
2271
|
+
const [internalValue, setInternalValue] = (0, import_react20.useState)(
|
|
2114
2272
|
defaultValue ?? options[0]?.value ?? ""
|
|
2115
2273
|
);
|
|
2116
2274
|
const activeValue = value ?? internalValue;
|
|
@@ -2119,27 +2277,29 @@ function SegmentedControl({
|
|
|
2119
2277
|
if (value === void 0) setInternalValue(optionValue);
|
|
2120
2278
|
onChange?.(optionValue);
|
|
2121
2279
|
};
|
|
2122
|
-
return /* @__PURE__ */ (0,
|
|
2280
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
2123
2281
|
"div",
|
|
2124
2282
|
{
|
|
2125
|
-
|
|
2283
|
+
role: "group",
|
|
2284
|
+
"aria-label": ariaLabel,
|
|
2285
|
+
className: (0, import_design_system_foundation39.cn)(SegmentedControl_default.control, SegmentedControl_default[`--size_${size}`], className),
|
|
2126
2286
|
style: {
|
|
2127
2287
|
"--control_count": options.length,
|
|
2128
2288
|
"--control_selected-index": Math.max(0, selectedIndex)
|
|
2129
2289
|
},
|
|
2130
2290
|
children: [
|
|
2131
|
-
/* @__PURE__ */ (0,
|
|
2291
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: SegmentedControl_default.thumb, "aria-hidden": "true" }),
|
|
2132
2292
|
options.map((option, index) => {
|
|
2133
2293
|
const id = `${baseId}-${index}`;
|
|
2134
2294
|
const isChecked = option.value === activeValue;
|
|
2135
2295
|
const isDisabled = disabled || option.disabled;
|
|
2136
|
-
return /* @__PURE__ */ (0,
|
|
2296
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
2137
2297
|
"label",
|
|
2138
2298
|
{
|
|
2139
2299
|
htmlFor: id,
|
|
2140
|
-
className: (0,
|
|
2300
|
+
className: (0, import_design_system_foundation39.cn)(SegmentedControl_default.item, isChecked && SegmentedControl_default["--active"], isDisabled && SegmentedControl_default["--disabled"]),
|
|
2141
2301
|
children: [
|
|
2142
|
-
/* @__PURE__ */ (0,
|
|
2302
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2143
2303
|
"input",
|
|
2144
2304
|
{
|
|
2145
2305
|
...rest,
|
|
@@ -2153,7 +2313,7 @@ function SegmentedControl({
|
|
|
2153
2313
|
onChange: () => handleChange(option.value)
|
|
2154
2314
|
}
|
|
2155
2315
|
),
|
|
2156
|
-
/* @__PURE__ */ (0,
|
|
2316
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: SegmentedControl_default.label, children: option.label })
|
|
2157
2317
|
]
|
|
2158
2318
|
},
|
|
2159
2319
|
option.value
|
|
@@ -2165,14 +2325,14 @@ function SegmentedControl({
|
|
|
2165
2325
|
}
|
|
2166
2326
|
|
|
2167
2327
|
// src/components/interaction/form/Select/Select.tsx
|
|
2168
|
-
var
|
|
2328
|
+
var import_react21 = require("react");
|
|
2169
2329
|
|
|
2170
2330
|
// src/components/interaction/form/Select/Select.module.css
|
|
2171
|
-
var Select_default = {"formGroup":"
|
|
2331
|
+
var Select_default = {"formGroup":"bds101Select-formGroup","selectWrapper":"bds101Select-selectWrapper","select":"bds101Select-select","selectError":"bds101Select-selectError","chevron":"bds101Select-chevron"};
|
|
2172
2332
|
|
|
2173
2333
|
// src/components/interaction/form/Select/Select.tsx
|
|
2174
|
-
var
|
|
2175
|
-
var
|
|
2334
|
+
var import_design_system_foundation40 = require("@boostdev/design-system-foundation");
|
|
2335
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
2176
2336
|
function Select({
|
|
2177
2337
|
label,
|
|
2178
2338
|
name,
|
|
@@ -2181,46 +2341,49 @@ function Select({
|
|
|
2181
2341
|
error,
|
|
2182
2342
|
hint,
|
|
2183
2343
|
className,
|
|
2344
|
+
required,
|
|
2184
2345
|
...props
|
|
2185
2346
|
}) {
|
|
2186
|
-
const id = name + (0,
|
|
2347
|
+
const id = name + (0, import_react21.useId)();
|
|
2187
2348
|
const hintId = id + "hint";
|
|
2188
2349
|
const errorId = id + "error";
|
|
2189
2350
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2190
|
-
return /* @__PURE__ */ (0,
|
|
2191
|
-
/* @__PURE__ */ (0,
|
|
2192
|
-
/* @__PURE__ */ (0,
|
|
2193
|
-
/* @__PURE__ */ (0,
|
|
2351
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(InputContainer, { className: (0, import_design_system_foundation40.cn)(Select_default.formGroup, className), children: [
|
|
2352
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Label, { id, label }),
|
|
2353
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: Select_default.selectWrapper, children: [
|
|
2354
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
|
|
2194
2355
|
"select",
|
|
2195
2356
|
{
|
|
2196
2357
|
id,
|
|
2197
2358
|
name,
|
|
2198
2359
|
"aria-invalid": !!error,
|
|
2360
|
+
"aria-required": required || void 0,
|
|
2199
2361
|
"aria-describedby": describedBy,
|
|
2200
|
-
|
|
2362
|
+
required,
|
|
2363
|
+
className: (0, import_design_system_foundation40.cn)(Select_default.select, error ? Select_default.selectError : void 0),
|
|
2201
2364
|
...props,
|
|
2202
2365
|
children: [
|
|
2203
|
-
placeholder && /* @__PURE__ */ (0,
|
|
2204
|
-
options.map(({ value, label: optLabel, disabled }) => /* @__PURE__ */ (0,
|
|
2366
|
+
placeholder && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("option", { value: "", disabled: true, hidden: true, children: placeholder }),
|
|
2367
|
+
options.map(({ value, label: optLabel, disabled }) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("option", { value, disabled, children: optLabel }, value))
|
|
2205
2368
|
]
|
|
2206
2369
|
}
|
|
2207
2370
|
),
|
|
2208
|
-
/* @__PURE__ */ (0,
|
|
2371
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: Select_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" }) }) })
|
|
2209
2372
|
] }),
|
|
2210
|
-
/* @__PURE__ */ (0,
|
|
2211
|
-
/* @__PURE__ */ (0,
|
|
2373
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
2374
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
2212
2375
|
] });
|
|
2213
2376
|
}
|
|
2214
2377
|
|
|
2215
2378
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
2216
|
-
var
|
|
2379
|
+
var import_react22 = require("react");
|
|
2217
2380
|
|
|
2218
2381
|
// src/components/interaction/form/Slider/Slider.module.css
|
|
2219
|
-
var Slider_default = {"formGroup":"
|
|
2382
|
+
var Slider_default = {"formGroup":"bds101Slider-formGroup","labelRow":"bds101Slider-labelRow","value":"bds101Slider-value","slider":"bds101Slider-slider","sliderError":"bds101Slider-sliderError"};
|
|
2220
2383
|
|
|
2221
2384
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
2222
|
-
var
|
|
2223
|
-
var
|
|
2385
|
+
var import_design_system_foundation41 = require("@boostdev/design-system-foundation");
|
|
2386
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
2224
2387
|
function Slider({
|
|
2225
2388
|
label,
|
|
2226
2389
|
name,
|
|
@@ -2233,24 +2396,24 @@ function Slider({
|
|
|
2233
2396
|
onChange,
|
|
2234
2397
|
...props
|
|
2235
2398
|
}) {
|
|
2236
|
-
const id = name + (0,
|
|
2399
|
+
const id = name + (0, import_react22.useId)();
|
|
2237
2400
|
const hintId = id + "hint";
|
|
2238
2401
|
const errorId = id + "error";
|
|
2239
2402
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2240
2403
|
const isControlled = props.value !== void 0;
|
|
2241
|
-
const [internalValue, setInternalValue] = (0,
|
|
2404
|
+
const [internalValue, setInternalValue] = (0, import_react22.useState)(Number(props.defaultValue ?? min));
|
|
2242
2405
|
const currentValue = isControlled ? Number(props.value) : internalValue;
|
|
2243
2406
|
const fillPct = (currentValue - min) / (max - min) * 100;
|
|
2244
2407
|
const handleChange = (e) => {
|
|
2245
2408
|
if (!isControlled) setInternalValue(Number(e.target.value));
|
|
2246
2409
|
onChange?.(e);
|
|
2247
2410
|
};
|
|
2248
|
-
return /* @__PURE__ */ (0,
|
|
2249
|
-
/* @__PURE__ */ (0,
|
|
2250
|
-
/* @__PURE__ */ (0,
|
|
2251
|
-
showValue && /* @__PURE__ */ (0,
|
|
2411
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(InputContainer, { className: (0, import_design_system_foundation41.cn)(Slider_default.formGroup, className), children: [
|
|
2412
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: Slider_default.labelRow, children: [
|
|
2413
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Label, { id, label }),
|
|
2414
|
+
showValue && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: Slider_default.value, children: currentValue })
|
|
2252
2415
|
] }),
|
|
2253
|
-
/* @__PURE__ */ (0,
|
|
2416
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
2254
2417
|
"input",
|
|
2255
2418
|
{
|
|
2256
2419
|
type: "range",
|
|
@@ -2262,26 +2425,27 @@ function Slider({
|
|
|
2262
2425
|
"aria-valuemin": min,
|
|
2263
2426
|
"aria-valuemax": max,
|
|
2264
2427
|
"aria-valuenow": currentValue,
|
|
2265
|
-
|
|
2428
|
+
"aria-valuetext": String(currentValue),
|
|
2429
|
+
className: (0, import_design_system_foundation41.cn)(Slider_default.slider, error ? Slider_default.sliderError : void 0),
|
|
2266
2430
|
style: { "--slider_fill": `${fillPct}%` },
|
|
2267
2431
|
onChange: handleChange,
|
|
2268
2432
|
...props
|
|
2269
2433
|
}
|
|
2270
2434
|
),
|
|
2271
|
-
/* @__PURE__ */ (0,
|
|
2272
|
-
/* @__PURE__ */ (0,
|
|
2435
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
2436
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
2273
2437
|
] });
|
|
2274
2438
|
}
|
|
2275
2439
|
|
|
2276
2440
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2277
|
-
var
|
|
2441
|
+
var import_react23 = require("react");
|
|
2278
2442
|
|
|
2279
2443
|
// src/components/interaction/form/Switch/Switch.module.css
|
|
2280
|
-
var Switch_default = {"switchGroup":"
|
|
2444
|
+
var Switch_default = {"switchGroup":"bds101Switch-switchGroup","--size_small":"bds101Switch---size_small","--size_medium":"bds101Switch---size_medium","--size_large":"bds101Switch---size_large","inputWrapper":"bds101Switch-inputWrapper","trackWrapper":"bds101Switch-trackWrapper","switch":"bds101Switch-switch","track":"bds101Switch-track","thumb":"bds101Switch-thumb","switchError":"bds101Switch-switchError"};
|
|
2281
2445
|
|
|
2282
2446
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2283
|
-
var
|
|
2284
|
-
var
|
|
2447
|
+
var import_design_system_foundation42 = require("@boostdev/design-system-foundation");
|
|
2448
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
2285
2449
|
function Switch({
|
|
2286
2450
|
label,
|
|
2287
2451
|
name,
|
|
@@ -2292,15 +2456,15 @@ function Switch({
|
|
|
2292
2456
|
prefix,
|
|
2293
2457
|
...props
|
|
2294
2458
|
}) {
|
|
2295
|
-
const id = name + (0,
|
|
2459
|
+
const id = name + (0, import_react23.useId)();
|
|
2296
2460
|
const hintId = id + "hint";
|
|
2297
2461
|
const errorId = id + "error";
|
|
2298
2462
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2299
|
-
return /* @__PURE__ */ (0,
|
|
2300
|
-
/* @__PURE__ */ (0,
|
|
2301
|
-
prefix && /* @__PURE__ */ (0,
|
|
2302
|
-
/* @__PURE__ */ (0,
|
|
2303
|
-
/* @__PURE__ */ (0,
|
|
2463
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(InputContainer, { className: (0, import_design_system_foundation42.cn)(Switch_default.switchGroup, Switch_default[`--size_${size}`], className), children: [
|
|
2464
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: Switch_default.inputWrapper, children: [
|
|
2465
|
+
prefix && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: prefix }),
|
|
2466
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: Switch_default.trackWrapper, children: [
|
|
2467
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2304
2468
|
"input",
|
|
2305
2469
|
{
|
|
2306
2470
|
type: "checkbox",
|
|
@@ -2308,74 +2472,85 @@ function Switch({
|
|
|
2308
2472
|
id,
|
|
2309
2473
|
name,
|
|
2310
2474
|
"aria-describedby": describedBy,
|
|
2311
|
-
className: (0,
|
|
2475
|
+
className: (0, import_design_system_foundation42.cn)(Switch_default.switch, error ? Switch_default.switchError : void 0),
|
|
2312
2476
|
...props
|
|
2313
2477
|
}
|
|
2314
2478
|
),
|
|
2315
|
-
/* @__PURE__ */ (0,
|
|
2479
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: Switch_default.track, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: Switch_default.thumb }) })
|
|
2316
2480
|
] }),
|
|
2317
|
-
/* @__PURE__ */ (0,
|
|
2481
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Label, { id, label })
|
|
2318
2482
|
] }),
|
|
2319
|
-
/* @__PURE__ */ (0,
|
|
2320
|
-
/* @__PURE__ */ (0,
|
|
2483
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
2484
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
2321
2485
|
] });
|
|
2322
2486
|
}
|
|
2323
2487
|
|
|
2324
2488
|
// src/components/interaction/form/Textarea/Textarea.tsx
|
|
2325
|
-
var
|
|
2489
|
+
var import_react24 = require("react");
|
|
2326
2490
|
|
|
2327
2491
|
// src/components/interaction/form/Textarea/Textarea.module.css
|
|
2328
|
-
var Textarea_default = {"formGroup":"
|
|
2492
|
+
var Textarea_default = {"formGroup":"bds101Textarea-formGroup","textarea":"bds101Textarea-textarea","textareaError":"bds101Textarea-textareaError"};
|
|
2329
2493
|
|
|
2330
2494
|
// src/components/interaction/form/Textarea/Textarea.tsx
|
|
2331
|
-
var
|
|
2332
|
-
var
|
|
2495
|
+
var import_design_system_foundation43 = require("@boostdev/design-system-foundation");
|
|
2496
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
2333
2497
|
function Textarea({
|
|
2334
2498
|
label,
|
|
2335
2499
|
name,
|
|
2336
2500
|
error,
|
|
2337
2501
|
hint,
|
|
2338
2502
|
className,
|
|
2503
|
+
required,
|
|
2339
2504
|
...props
|
|
2340
2505
|
}) {
|
|
2341
|
-
const id = name + (0,
|
|
2506
|
+
const id = name + (0, import_react24.useId)();
|
|
2342
2507
|
const hintId = id + "hint";
|
|
2343
2508
|
const errorId = id + "error";
|
|
2344
2509
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2345
|
-
return /* @__PURE__ */ (0,
|
|
2346
|
-
/* @__PURE__ */ (0,
|
|
2347
|
-
/* @__PURE__ */ (0,
|
|
2510
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(InputContainer, { className: (0, import_design_system_foundation43.cn)(Textarea_default.formGroup, className), children: [
|
|
2511
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Label, { id, label }),
|
|
2512
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
2348
2513
|
"textarea",
|
|
2349
2514
|
{
|
|
2350
2515
|
id,
|
|
2351
2516
|
name,
|
|
2352
2517
|
"aria-invalid": !!error,
|
|
2353
2518
|
"aria-describedby": describedBy,
|
|
2354
|
-
|
|
2519
|
+
"aria-required": required || void 0,
|
|
2520
|
+
required,
|
|
2521
|
+
className: (0, import_design_system_foundation43.cn)(Textarea_default.textarea, error ? Textarea_default.textareaError : void 0),
|
|
2355
2522
|
...props
|
|
2356
2523
|
}
|
|
2357
2524
|
),
|
|
2358
|
-
/* @__PURE__ */ (0,
|
|
2359
|
-
/* @__PURE__ */ (0,
|
|
2525
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
2526
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
2360
2527
|
] });
|
|
2361
2528
|
}
|
|
2362
2529
|
|
|
2363
2530
|
// src/components/layout/ButtonGroup/ButtonGroup.module.css
|
|
2364
|
-
var ButtonGroup_default = {"buttonGroup":"
|
|
2531
|
+
var ButtonGroup_default = {"buttonGroup":"bds101ButtonGroup-buttonGroup","container":"bds101ButtonGroup-container","--variant_card":"bds101ButtonGroup---variant_card","--variant_flow":"bds101ButtonGroup---variant_flow","--variant_modal":"bds101ButtonGroup---variant_modal","--variant_content":"bds101ButtonGroup---variant_content","--variant_grid":"bds101ButtonGroup---variant_grid"};
|
|
2365
2532
|
|
|
2366
2533
|
// src/components/layout/ButtonGroup/ButtonGroup.tsx
|
|
2367
|
-
var
|
|
2368
|
-
var
|
|
2369
|
-
function ButtonGroup({ children, className, variant }) {
|
|
2370
|
-
return /* @__PURE__ */ (0,
|
|
2534
|
+
var import_design_system_foundation44 = require("@boostdev/design-system-foundation");
|
|
2535
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
2536
|
+
function ButtonGroup({ children, className, variant, "aria-label": ariaLabel }) {
|
|
2537
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
2538
|
+
"div",
|
|
2539
|
+
{
|
|
2540
|
+
role: "group",
|
|
2541
|
+
"aria-label": ariaLabel,
|
|
2542
|
+
className: (0, import_design_system_foundation44.cn)(ButtonGroup_default.buttonGroup, className, variant && ButtonGroup_default[`--variant_${variant}`]),
|
|
2543
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: ButtonGroup_default.container, children })
|
|
2544
|
+
}
|
|
2545
|
+
);
|
|
2371
2546
|
}
|
|
2372
2547
|
|
|
2373
2548
|
// src/components/layout/Card/Card.module.css
|
|
2374
|
-
var Card_default = {"card":"
|
|
2549
|
+
var Card_default = {"card":"bds101Card-card","--default":"bds101Card---default","--elevated":"bds101Card---elevated","--outlined":"bds101Card---outlined","--clickable":"bds101Card---clickable","--padding-none":"bds101Card---padding-none","--padding-small":"bds101Card---padding-small","--padding-medium":"bds101Card---padding-medium","--padding-large":"bds101Card---padding-large","--text-start":"bds101Card---text-start","--text-center":"bds101Card---text-center","--text-end":"bds101Card---text-end"};
|
|
2375
2550
|
|
|
2376
2551
|
// src/components/layout/Card/Card.tsx
|
|
2377
|
-
var
|
|
2378
|
-
var
|
|
2552
|
+
var import_design_system_foundation45 = require("@boostdev/design-system-foundation");
|
|
2553
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
2379
2554
|
function Card({
|
|
2380
2555
|
children,
|
|
2381
2556
|
className,
|
|
@@ -2386,7 +2561,7 @@ function Card({
|
|
|
2386
2561
|
onClick,
|
|
2387
2562
|
"aria-label": ariaLabel
|
|
2388
2563
|
}) {
|
|
2389
|
-
const classNames = (0,
|
|
2564
|
+
const classNames = (0, import_design_system_foundation45.cn)(
|
|
2390
2565
|
Card_default.card,
|
|
2391
2566
|
Card_default[`--${variant}`],
|
|
2392
2567
|
Card_default[`--padding-${padding}`],
|
|
@@ -2395,7 +2570,7 @@ function Card({
|
|
|
2395
2570
|
className
|
|
2396
2571
|
);
|
|
2397
2572
|
const Component = onClick ? "button" : "div";
|
|
2398
|
-
return /* @__PURE__ */ (0,
|
|
2573
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
2399
2574
|
Component,
|
|
2400
2575
|
{
|
|
2401
2576
|
className: classNames,
|
|
@@ -2409,11 +2584,11 @@ function Card({
|
|
|
2409
2584
|
}
|
|
2410
2585
|
|
|
2411
2586
|
// src/components/layout/SectionHeader/SectionHeader.module.css
|
|
2412
|
-
var SectionHeader_default = {"sectionHeader":"
|
|
2587
|
+
var SectionHeader_default = {"sectionHeader":"bds101SectionHeader-sectionHeader","title":"bds101SectionHeader-title","subtitle":"bds101SectionHeader-subtitle","--start":"bds101SectionHeader---start","--center":"bds101SectionHeader---center","--end":"bds101SectionHeader---end","--small":"bds101SectionHeader---small","--medium":"bds101SectionHeader---medium","--large":"bds101SectionHeader---large"};
|
|
2413
2588
|
|
|
2414
2589
|
// src/components/layout/SectionHeader/SectionHeader.tsx
|
|
2415
|
-
var
|
|
2416
|
-
var
|
|
2590
|
+
var import_design_system_foundation46 = require("@boostdev/design-system-foundation");
|
|
2591
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
2417
2592
|
function SectionHeader({
|
|
2418
2593
|
title,
|
|
2419
2594
|
subtitle,
|
|
@@ -2423,24 +2598,24 @@ function SectionHeader({
|
|
|
2423
2598
|
titleAs = "h2"
|
|
2424
2599
|
}) {
|
|
2425
2600
|
const Title = titleAs;
|
|
2426
|
-
return /* @__PURE__ */ (0,
|
|
2427
|
-
/* @__PURE__ */ (0,
|
|
2428
|
-
subtitle && /* @__PURE__ */ (0,
|
|
2601
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: (0, import_design_system_foundation46.cn)(SectionHeader_default.sectionHeader, SectionHeader_default[`--${alignment}`], SectionHeader_default[`--${size}`], className), children: [
|
|
2602
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Title, { className: SectionHeader_default.title, children: title }),
|
|
2603
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: SectionHeader_default.subtitle, children: subtitle })
|
|
2429
2604
|
] });
|
|
2430
2605
|
}
|
|
2431
2606
|
|
|
2432
2607
|
// src/components/layout/IconWrapper/IconWrapper.module.css
|
|
2433
|
-
var IconWrapper_default = {"wrapper":"
|
|
2608
|
+
var IconWrapper_default = {"wrapper":"bds101IconWrapper-wrapper"};
|
|
2434
2609
|
|
|
2435
2610
|
// src/components/layout/IconWrapper/IconWrapper.tsx
|
|
2436
|
-
var
|
|
2437
|
-
var
|
|
2438
|
-
function IconWrapper({ children, className }) {
|
|
2439
|
-
return /* @__PURE__ */ (0,
|
|
2611
|
+
var import_design_system_foundation47 = require("@boostdev/design-system-foundation");
|
|
2612
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
2613
|
+
function IconWrapper({ children, className, "aria-hidden": ariaHidden }) {
|
|
2614
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: (0, import_design_system_foundation47.cn)(className, IconWrapper_default.wrapper), "aria-hidden": ariaHidden, children });
|
|
2440
2615
|
}
|
|
2441
2616
|
|
|
2442
2617
|
// src/index.ts
|
|
2443
|
-
var
|
|
2618
|
+
var import_design_system_foundation48 = require("@boostdev/design-system-foundation");
|
|
2444
2619
|
// Annotate the CommonJS export names for ESM import in node:
|
|
2445
2620
|
0 && (module.exports = {
|
|
2446
2621
|
Accordion,
|
|
@@ -2454,6 +2629,7 @@ var import_design_system_foundation46 = require("@boostdev/design-system-foundat
|
|
|
2454
2629
|
Card,
|
|
2455
2630
|
Carousel,
|
|
2456
2631
|
Checkbox,
|
|
2632
|
+
CheckboxGroup,
|
|
2457
2633
|
Collapsible,
|
|
2458
2634
|
Combobox,
|
|
2459
2635
|
Command,
|
|
@@ -2473,6 +2649,7 @@ var import_design_system_foundation46 = require("@boostdev/design-system-foundat
|
|
|
2473
2649
|
Progress,
|
|
2474
2650
|
ProgressCircle,
|
|
2475
2651
|
Radio,
|
|
2652
|
+
RadioGroup,
|
|
2476
2653
|
Rating,
|
|
2477
2654
|
SectionHeader,
|
|
2478
2655
|
SegmentedControl,
|