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