@boostdev/design-system-components 0.1.18 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +65 -27
- package/README.md +64 -29
- package/dist/client.cjs +412 -241
- package/dist/client.css +1378 -1186
- package/dist/client.d.cts +43 -16
- package/dist/client.d.ts +43 -16
- package/dist/client.js +414 -245
- package/dist/index.cjs +412 -241
- package/dist/index.css +1378 -1186
- package/dist/index.d.cts +43 -16
- package/dist/index.d.ts +43 -16
- package/dist/index.js +414 -245
- package/package.json +9 -4
- package/src/components/interaction/Button/Button.mdx +2 -5
- 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 +5 -2
- 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 +61 -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.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { useId, useState } from "react";
|
|
3
3
|
|
|
4
4
|
// src/components/ui/Accordion/Accordion.module.css
|
|
5
|
-
var Accordion_default = {"accordion":"
|
|
5
|
+
var Accordion_default = {"accordion":"bds100Accordion-accordion","item":"bds100Accordion-item","heading":"bds100Accordion-heading","trigger":"bds100Accordion-trigger","triggerLabel":"bds100Accordion-triggerLabel","chevron":"bds100Accordion-chevron","--open":"bds100Accordion---open","panel":"bds100Accordion-panel","panelContent":"bds100Accordion-panelContent"};
|
|
6
6
|
|
|
7
7
|
// src/components/ui/Accordion/Accordion.tsx
|
|
8
8
|
import { cn } from "@boostdev/design-system-foundation";
|
|
@@ -70,7 +70,7 @@ function Accordion({
|
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
// src/components/ui/Alert/Alert.module.css
|
|
73
|
-
var Alert_default = {"alert":"
|
|
73
|
+
var Alert_default = {"alert":"bds100Alert-alert","--variant_info":"bds100Alert---variant_info","--variant_success":"bds100Alert---variant_success","--variant_warning":"bds100Alert---variant_warning","--variant_error":"bds100Alert---variant_error","icon":"bds100Alert-icon","content":"bds100Alert-content","title":"bds100Alert-title","dismiss":"bds100Alert-dismiss"};
|
|
74
74
|
|
|
75
75
|
// src/components/ui/Alert/Alert.tsx
|
|
76
76
|
import { cn as cn2 } from "@boostdev/design-system-foundation";
|
|
@@ -113,7 +113,7 @@ function Alert({
|
|
|
113
113
|
}
|
|
114
114
|
|
|
115
115
|
// src/components/ui/Avatar/Avatar.module.css
|
|
116
|
-
var Avatar_default = {"avatar":"
|
|
116
|
+
var Avatar_default = {"avatar":"bds100Avatar-avatar","--fallback":"bds100Avatar---fallback","--size_small":"bds100Avatar---size_small","--size_medium":"bds100Avatar---size_medium","--size_large":"bds100Avatar---size_large","image":"bds100Avatar-image","initials":"bds100Avatar-initials"};
|
|
117
117
|
|
|
118
118
|
// src/components/ui/Avatar/Avatar.tsx
|
|
119
119
|
import { cn as cn3 } from "@boostdev/design-system-foundation";
|
|
@@ -124,7 +124,7 @@ function getInitials(name) {
|
|
|
124
124
|
function Avatar({ src, alt, name, size = "medium", className }) {
|
|
125
125
|
const sizeClass = Avatar_default[`--size_${size}`];
|
|
126
126
|
if (src) {
|
|
127
|
-
return /* @__PURE__ */ jsx3("span", { className: cn3(Avatar_default.avatar, sizeClass, className), children: /* @__PURE__ */ jsx3("img", { src, alt: alt ?? name ?? "", className: Avatar_default.image }) });
|
|
127
|
+
return /* @__PURE__ */ jsx3("span", { className: cn3(Avatar_default.avatar, sizeClass, className), children: /* @__PURE__ */ jsx3("img", { src, alt: alt ?? name ?? "User avatar", className: Avatar_default.image }) });
|
|
128
128
|
}
|
|
129
129
|
const initials = name ? getInitials(name) : "";
|
|
130
130
|
return /* @__PURE__ */ jsx3(
|
|
@@ -139,7 +139,7 @@ function Avatar({ src, alt, name, size = "medium", className }) {
|
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
// src/components/ui/Badge/Badge.module.css
|
|
142
|
-
var Badge_default = {"badge":"
|
|
142
|
+
var Badge_default = {"badge":"bds100Badge-badge","--variant_primary":"bds100Badge---variant_primary","--variant_secondary":"bds100Badge---variant_secondary","--variant_success":"bds100Badge---variant_success","--variant_error":"bds100Badge---variant_error","--variant_warning":"bds100Badge---variant_warning"};
|
|
143
143
|
|
|
144
144
|
// src/components/ui/Badge/Badge.tsx
|
|
145
145
|
import { cn as cn4 } from "@boostdev/design-system-foundation";
|
|
@@ -149,7 +149,7 @@ function Badge({ children, variant = "primary", className }) {
|
|
|
149
149
|
}
|
|
150
150
|
|
|
151
151
|
// src/components/ui/Breadcrumb/Breadcrumb.module.css
|
|
152
|
-
var Breadcrumb_default = {"breadcrumb":"
|
|
152
|
+
var Breadcrumb_default = {"breadcrumb":"bds100Breadcrumb-breadcrumb","list":"bds100Breadcrumb-list","item":"bds100Breadcrumb-item","link":"bds100Breadcrumb-link","separator":"bds100Breadcrumb-separator","current":"bds100Breadcrumb-current"};
|
|
153
153
|
|
|
154
154
|
// src/components/ui/Breadcrumb/Breadcrumb.tsx
|
|
155
155
|
import { cn as cn5 } from "@boostdev/design-system-foundation";
|
|
@@ -165,7 +165,7 @@ function Breadcrumb({ items, className }) {
|
|
|
165
165
|
}
|
|
166
166
|
|
|
167
167
|
// src/components/ui/Collapsible/Collapsible.module.css
|
|
168
|
-
var Collapsible_default = {"collapsible":"
|
|
168
|
+
var Collapsible_default = {"collapsible":"bds100Collapsible-collapsible","summary":"bds100Collapsible-summary","summaryContent":"bds100Collapsible-summaryContent","icon":"bds100Collapsible-icon","content":"bds100Collapsible-content"};
|
|
169
169
|
|
|
170
170
|
// src/components/ui/Collapsible/Collapsible.tsx
|
|
171
171
|
import { cn as cn6 } from "@boostdev/design-system-foundation";
|
|
@@ -206,12 +206,21 @@ function Collapsible({
|
|
|
206
206
|
import { useState as useState2, useId as useId2 } from "react";
|
|
207
207
|
|
|
208
208
|
// src/components/ui/Calendar/Calendar.module.css
|
|
209
|
-
var Calendar_default = {"calendar":"
|
|
209
|
+
var Calendar_default = {"calendar":"bds100Calendar-calendar","header":"bds100Calendar-header","monthYear":"bds100Calendar-monthYear","navBtn":"bds100Calendar-navBtn","grid":"bds100Calendar-grid","weekday":"bds100Calendar-weekday","empty":"bds100Calendar-empty","day":"bds100Calendar-day","disabled":"bds100Calendar-disabled","selected":"bds100Calendar-selected","today":"bds100Calendar-today"};
|
|
210
210
|
|
|
211
211
|
// src/components/ui/Calendar/Calendar.tsx
|
|
212
212
|
import { cn as cn7 } from "@boostdev/design-system-foundation";
|
|
213
213
|
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
214
214
|
var DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
|
|
215
|
+
var DAY_LABELS = {
|
|
216
|
+
Su: "Sunday",
|
|
217
|
+
Mo: "Monday",
|
|
218
|
+
Tu: "Tuesday",
|
|
219
|
+
We: "Wednesday",
|
|
220
|
+
Th: "Thursday",
|
|
221
|
+
Fr: "Friday",
|
|
222
|
+
Sa: "Saturday"
|
|
223
|
+
};
|
|
215
224
|
var MONTHS = [
|
|
216
225
|
"January",
|
|
217
226
|
"February",
|
|
@@ -332,7 +341,7 @@ function Calendar({ value, defaultValue, min, max, onChange, className }) {
|
|
|
332
341
|
role: "grid",
|
|
333
342
|
"aria-labelledby": titleId,
|
|
334
343
|
children: [
|
|
335
|
-
/* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsx7("tr", { children: DAYS.map((d) => /* @__PURE__ */ jsx7("th", { scope: "col",
|
|
344
|
+
/* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsx7("tr", { children: DAYS.map((d) => /* @__PURE__ */ jsx7("th", { scope: "col", "aria-label": DAY_LABELS[d] ?? d, className: Calendar_default.weekday, children: d }, d)) }) }),
|
|
336
345
|
/* @__PURE__ */ jsx7("tbody", { children: Array.from({ length: cells.length / 7 }, (_, row) => /* @__PURE__ */ jsx7("tr", { children: cells.slice(row * 7, row * 7 + 7).map((cell, col) => {
|
|
337
346
|
if (!cell) return /* @__PURE__ */ jsx7("td", { className: Calendar_default.empty, "aria-hidden": "true" }, col);
|
|
338
347
|
const date = new Date(viewYear, viewMonth, cell.day);
|
|
@@ -351,7 +360,7 @@ function Calendar({ value, defaultValue, min, max, onChange, className }) {
|
|
|
351
360
|
disabled && Calendar_default.disabled
|
|
352
361
|
),
|
|
353
362
|
"aria-label": date.toLocaleDateString("en", { month: "long", day: "numeric", year: "numeric" }),
|
|
354
|
-
"aria-
|
|
363
|
+
"aria-selected": isSelected,
|
|
355
364
|
"aria-current": isToday ? "date" : void 0,
|
|
356
365
|
"aria-disabled": disabled,
|
|
357
366
|
disabled,
|
|
@@ -372,7 +381,7 @@ function Calendar({ value, defaultValue, min, max, onChange, className }) {
|
|
|
372
381
|
import { useRef, useId as useId3 } from "react";
|
|
373
382
|
|
|
374
383
|
// src/components/ui/Carousel/Carousel.module.css
|
|
375
|
-
var Carousel_default = {"carousel":"
|
|
384
|
+
var Carousel_default = {"carousel":"bds100Carousel-carousel","track":"bds100Carousel-track","slide":"bds100Carousel-slide","navBtn":"bds100Carousel-navBtn"};
|
|
376
385
|
|
|
377
386
|
// src/components/ui/Carousel/Carousel.tsx
|
|
378
387
|
import { cn as cn8 } from "@boostdev/design-system-foundation";
|
|
@@ -425,7 +434,7 @@ function Carousel({ items, label, className }) {
|
|
|
425
434
|
}
|
|
426
435
|
|
|
427
436
|
// src/components/ui/DescriptionList/DescriptionList.module.css
|
|
428
|
-
var DescriptionList_default = {"list":"
|
|
437
|
+
var DescriptionList_default = {"list":"bds100DescriptionList-list","group":"bds100DescriptionList-group","term":"bds100DescriptionList-term","details":"bds100DescriptionList-details","--layout_inline":"bds100DescriptionList---layout_inline"};
|
|
429
438
|
|
|
430
439
|
// src/components/ui/DescriptionList/DescriptionList.tsx
|
|
431
440
|
import { cn as cn9 } from "@boostdev/design-system-foundation";
|
|
@@ -438,7 +447,7 @@ function DescriptionList({ items, layout = "stacked", className }) {
|
|
|
438
447
|
}
|
|
439
448
|
|
|
440
449
|
// src/components/ui/Link/Link.module.css
|
|
441
|
-
var Link_default = {"link":"
|
|
450
|
+
var Link_default = {"link":"bds100Link-link","--variant_default":"bds100Link---variant_default","--variant_subtle":"bds100Link---variant_subtle","--variant_standalone":"bds100Link---variant_standalone","externalLabel":"bds100Link-externalLabel"};
|
|
442
451
|
|
|
443
452
|
// src/components/ui/Link/Link.tsx
|
|
444
453
|
import { cn as cn10 } from "@boostdev/design-system-foundation";
|
|
@@ -469,7 +478,7 @@ function Link({
|
|
|
469
478
|
}
|
|
470
479
|
|
|
471
480
|
// src/components/ui/Loading/Loading.module.css
|
|
472
|
-
var Loading_default = {"loading":"
|
|
481
|
+
var Loading_default = {"loading":"bds100Loading-loading","spinner":"bds100Loading-spinner","--size_small":"bds100Loading---size_small","--size_large":"bds100Loading---size_large"};
|
|
473
482
|
|
|
474
483
|
// src/components/ui/Loading/Loading.tsx
|
|
475
484
|
import { cn as cn11 } from "@boostdev/design-system-foundation";
|
|
@@ -479,7 +488,7 @@ function Loading({ size = "medium", className }) {
|
|
|
479
488
|
}
|
|
480
489
|
|
|
481
490
|
// src/components/ui/NotificationBanner/NotificationBanner.module.css
|
|
482
|
-
var NotificationBanner_default = {"banner":"
|
|
491
|
+
var NotificationBanner_default = {"banner":"bds100NotificationBanner-banner","--variant_info":"bds100NotificationBanner---variant_info","--variant_success":"bds100NotificationBanner---variant_success","--variant_warning":"bds100NotificationBanner---variant_warning","--variant_error":"bds100NotificationBanner---variant_error","content":"bds100NotificationBanner-content","action":"bds100NotificationBanner-action","dismiss":"bds100NotificationBanner-dismiss"};
|
|
483
492
|
|
|
484
493
|
// src/components/ui/NotificationBanner/NotificationBanner.tsx
|
|
485
494
|
import { cn as cn12 } from "@boostdev/design-system-foundation";
|
|
@@ -518,7 +527,7 @@ function NotificationBanner({
|
|
|
518
527
|
}
|
|
519
528
|
|
|
520
529
|
// src/components/ui/Pagination/Pagination.module.css
|
|
521
|
-
var Pagination_default = {"pagination":"
|
|
530
|
+
var Pagination_default = {"pagination":"bds100Pagination-pagination","list":"bds100Pagination-list","button":"bds100Pagination-button","--active":"bds100Pagination---active","--nav":"bds100Pagination---nav","ellipsis":"bds100Pagination-ellipsis"};
|
|
522
531
|
|
|
523
532
|
// src/components/ui/Pagination/Pagination.tsx
|
|
524
533
|
import { cn as cn13 } from "@boostdev/design-system-foundation";
|
|
@@ -582,7 +591,7 @@ function Pagination({
|
|
|
582
591
|
}
|
|
583
592
|
|
|
584
593
|
// src/components/ui/Progress/Progress.module.css
|
|
585
|
-
var Progress_default = {"container":"
|
|
594
|
+
var Progress_default = {"container":"bds100Progress-container","labelRow":"bds100Progress-labelRow","value":"bds100Progress-value","track":"bds100Progress-track","--size_small":"bds100Progress---size_small","--size_medium":"bds100Progress---size_medium","--size_large":"bds100Progress---size_large","fill":"bds100Progress-fill"};
|
|
586
595
|
|
|
587
596
|
// src/components/ui/Progress/Progress.tsx
|
|
588
597
|
import { cn as cn14 } from "@boostdev/design-system-foundation";
|
|
@@ -620,7 +629,7 @@ function Progress({
|
|
|
620
629
|
}
|
|
621
630
|
|
|
622
631
|
// src/components/ui/ProgressCircle/ProgressCircle.module.css
|
|
623
|
-
var ProgressCircle_default = {"wrapper":"
|
|
632
|
+
var ProgressCircle_default = {"wrapper":"bds100ProgressCircle-wrapper","svg":"bds100ProgressCircle-svg","track":"bds100ProgressCircle-track","fill":"bds100ProgressCircle-fill","value":"bds100ProgressCircle-value","--size_small":"bds100ProgressCircle---size_small","--size_medium":"bds100ProgressCircle---size_medium","--size_large":"bds100ProgressCircle---size_large"};
|
|
624
633
|
|
|
625
634
|
// src/components/ui/ProgressCircle/ProgressCircle.tsx
|
|
626
635
|
import { cn as cn15 } from "@boostdev/design-system-foundation";
|
|
@@ -699,7 +708,7 @@ function ProgressCircle({
|
|
|
699
708
|
}
|
|
700
709
|
|
|
701
710
|
// src/components/ui/Separator/Separator.module.css
|
|
702
|
-
var Separator_default = {"separator":"
|
|
711
|
+
var Separator_default = {"separator":"bds100Separator-separator","--horizontal":"bds100Separator---horizontal","--vertical":"bds100Separator---vertical"};
|
|
703
712
|
|
|
704
713
|
// src/components/ui/Separator/Separator.tsx
|
|
705
714
|
import { cn as cn16 } from "@boostdev/design-system-foundation";
|
|
@@ -715,14 +724,14 @@ function Separator({ orientation = "horizontal", className }) {
|
|
|
715
724
|
}
|
|
716
725
|
);
|
|
717
726
|
}
|
|
718
|
-
return /* @__PURE__ */ jsx16("hr", { className: cn16(Separator_default.separator, Separator_default["--horizontal"], className) });
|
|
727
|
+
return /* @__PURE__ */ jsx16("hr", { "aria-orientation": "horizontal", className: cn16(Separator_default.separator, Separator_default["--horizontal"], className) });
|
|
719
728
|
}
|
|
720
729
|
|
|
721
730
|
// src/components/ui/Skeleton/Skeleton.tsx
|
|
722
731
|
import { cn as cn17 } from "@boostdev/design-system-foundation";
|
|
723
732
|
|
|
724
733
|
// src/components/ui/Skeleton/Skeleton.module.css
|
|
725
|
-
var Skeleton_default = {"skeleton":"
|
|
734
|
+
var Skeleton_default = {"skeleton":"bds100Skeleton-skeleton"};
|
|
726
735
|
|
|
727
736
|
// src/components/ui/Skeleton/Skeleton.tsx
|
|
728
737
|
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
@@ -731,7 +740,7 @@ function Skeleton({ className }) {
|
|
|
731
740
|
}
|
|
732
741
|
|
|
733
742
|
// src/components/ui/SkipLink/SkipLink.module.css
|
|
734
|
-
var SkipLink_default = {"skipLink":"
|
|
743
|
+
var SkipLink_default = {"skipLink":"bds100SkipLink-skipLink"};
|
|
735
744
|
|
|
736
745
|
// src/components/ui/SkipLink/SkipLink.tsx
|
|
737
746
|
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
@@ -740,7 +749,7 @@ function SkipLink({ href = "#main", children = "Skip to main content" }) {
|
|
|
740
749
|
}
|
|
741
750
|
|
|
742
751
|
// src/components/ui/Table/Table.module.css
|
|
743
|
-
var Table_default = {"wrapper":"
|
|
752
|
+
var Table_default = {"wrapper":"bds100Table-wrapper","table":"bds100Table-table","caption":"bds100Table-caption","thead":"bds100Table-thead","th":"bds100Table-th","--sortable":"bds100Table---sortable","sortButton":"bds100Table-sortButton","sortIcon":"bds100Table-sortIcon","--sort-active":"bds100Table---sort-active","--sort-desc":"bds100Table---sort-desc","tbody":"bds100Table-tbody","tr":"bds100Table-tr","td":"bds100Table-td"};
|
|
744
753
|
|
|
745
754
|
// src/components/ui/Table/Table.tsx
|
|
746
755
|
import { cn as cn18 } from "@boostdev/design-system-foundation";
|
|
@@ -777,6 +786,7 @@ function Table({
|
|
|
777
786
|
type: "button",
|
|
778
787
|
className: Table_default.sortButton,
|
|
779
788
|
onClick: () => handleSort(col.key),
|
|
789
|
+
"aria-label": `Sort by ${String(col.header)}${sortKey === col.key ? `, currently ${sortDirection === "asc" ? "ascending" : "descending"}` : ""}`,
|
|
780
790
|
children: [
|
|
781
791
|
col.header,
|
|
782
792
|
/* @__PURE__ */ jsx19(
|
|
@@ -801,7 +811,7 @@ function Table({
|
|
|
801
811
|
},
|
|
802
812
|
col.key
|
|
803
813
|
)) }) }),
|
|
804
|
-
/* @__PURE__ */ jsx19("tbody", { className: Table_default.tbody, children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx19("tr", { className: Table_default.tr, children: columns.map((col) => /* @__PURE__ */ jsx19("td", { className: Table_default.td, children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key)) }, rowIndex)) })
|
|
814
|
+
/* @__PURE__ */ jsx19("tbody", { className: Table_default.tbody, children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx19("tr", { className: Table_default.tr, children: columns.map((col) => /* @__PURE__ */ jsx19("td", { className: Table_default.td, children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key)) }, JSON.stringify(row) || rowIndex)) })
|
|
805
815
|
] }) });
|
|
806
816
|
}
|
|
807
817
|
|
|
@@ -809,7 +819,7 @@ function Table({
|
|
|
809
819
|
import { useId as useId4, useRef as useRef2, useState as useState3 } from "react";
|
|
810
820
|
|
|
811
821
|
// src/components/ui/Tabs/Tabs.module.css
|
|
812
|
-
var Tabs_default = {"tabs":"
|
|
822
|
+
var Tabs_default = {"tabs":"bds100Tabs-tabs","tabList":"bds100Tabs-tabList","tab":"bds100Tabs-tab","--active":"bds100Tabs---active","panel":"bds100Tabs-panel"};
|
|
813
823
|
|
|
814
824
|
// src/components/ui/Tabs/Tabs.tsx
|
|
815
825
|
import { cn as cn19 } from "@boostdev/design-system-foundation";
|
|
@@ -875,7 +885,6 @@ function Tabs({ tabs, defaultTab, className }) {
|
|
|
875
885
|
id: panelId,
|
|
876
886
|
role: "tabpanel",
|
|
877
887
|
"aria-labelledby": tabId,
|
|
878
|
-
tabIndex: 0,
|
|
879
888
|
hidden: !isActive,
|
|
880
889
|
className: Tabs_default.panel,
|
|
881
890
|
children: tab.content
|
|
@@ -887,10 +896,10 @@ function Tabs({ tabs, defaultTab, className }) {
|
|
|
887
896
|
}
|
|
888
897
|
|
|
889
898
|
// src/components/ui/Tooltip/Tooltip.tsx
|
|
890
|
-
import { cloneElement, isValidElement, useId as useId5 } from "react";
|
|
899
|
+
import { cloneElement, isValidElement, useId as useId5, useState as useState4 } from "react";
|
|
891
900
|
|
|
892
901
|
// src/components/ui/Tooltip/Tooltip.module.css
|
|
893
|
-
var Tooltip_default = {"wrapper":"
|
|
902
|
+
var Tooltip_default = {"wrapper":"bds100Tooltip-wrapper","tooltip":"bds100Tooltip-tooltip","--placement_top":"bds100Tooltip---placement_top","--placement_bottom":"bds100Tooltip---placement_bottom","--placement_left":"bds100Tooltip---placement_left","--placement_right":"bds100Tooltip---placement_right"};
|
|
894
903
|
|
|
895
904
|
// src/components/ui/Tooltip/Tooltip.tsx
|
|
896
905
|
import { cn as cn20 } from "@boostdev/design-system-foundation";
|
|
@@ -902,25 +911,37 @@ function Tooltip({
|
|
|
902
911
|
className
|
|
903
912
|
}) {
|
|
904
913
|
const tooltipId = useId5();
|
|
914
|
+
const [isVisible, setIsVisible] = useState4(false);
|
|
905
915
|
const trigger = isValidElement(children) ? cloneElement(children, {
|
|
906
916
|
"aria-describedby": tooltipId
|
|
907
917
|
}) : children;
|
|
908
|
-
return /* @__PURE__ */ jsxs15(
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
918
|
+
return /* @__PURE__ */ jsxs15(
|
|
919
|
+
"span",
|
|
920
|
+
{
|
|
921
|
+
className: cn20(Tooltip_default.wrapper, className),
|
|
922
|
+
onMouseEnter: () => setIsVisible(true),
|
|
923
|
+
onMouseLeave: () => setIsVisible(false),
|
|
924
|
+
onFocus: () => setIsVisible(true),
|
|
925
|
+
onBlur: () => setIsVisible(false),
|
|
926
|
+
children: [
|
|
927
|
+
trigger,
|
|
928
|
+
/* @__PURE__ */ jsx21(
|
|
929
|
+
"span",
|
|
930
|
+
{
|
|
931
|
+
id: tooltipId,
|
|
932
|
+
role: "tooltip",
|
|
933
|
+
"aria-hidden": !isVisible,
|
|
934
|
+
className: cn20(Tooltip_default.tooltip, Tooltip_default[`--placement_${placement}`]),
|
|
935
|
+
children: content
|
|
936
|
+
}
|
|
937
|
+
)
|
|
938
|
+
]
|
|
939
|
+
}
|
|
940
|
+
);
|
|
920
941
|
}
|
|
921
942
|
|
|
922
943
|
// src/components/ui/Typography/Typography.module.css
|
|
923
|
-
var Typography_default = {"typography":"
|
|
944
|
+
var Typography_default = {"typography":"bds100Typography-typography","--h1":"bds100Typography---h1","--h2":"bds100Typography---h2","--h3":"bds100Typography---h3","--body":"bds100Typography---body","--body_s":"bds100Typography---body_s"};
|
|
924
945
|
|
|
925
946
|
// src/components/ui/Typography/Typography.tsx
|
|
926
947
|
import { cn as cn21 } from "@boostdev/design-system-foundation";
|
|
@@ -938,7 +959,7 @@ function Typography({ variant = "body", component, children, className }) {
|
|
|
938
959
|
}
|
|
939
960
|
|
|
940
961
|
// src/components/interaction/Button/Button.module.css
|
|
941
|
-
var Button_default = {"button":"
|
|
962
|
+
var Button_default = {"button":"bds100Button-button","--default":"bds100Button---default","--ghost":"bds100Button---ghost","--size_small":"bds100Button---size_small","--size_medium":"bds100Button---size_medium","--size_large":"bds100Button---size_large","--hasPulse":"bds100Button---hasPulse","iconStart":"bds100Button-iconStart","iconEnd":"bds100Button-iconEnd"};
|
|
942
963
|
|
|
943
964
|
// src/components/interaction/Button/Button.tsx
|
|
944
965
|
import { cn as cn22 } from "@boostdev/design-system-foundation";
|
|
@@ -946,7 +967,7 @@ import { Fragment as Fragment2, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-r
|
|
|
946
967
|
function Button({
|
|
947
968
|
children,
|
|
948
969
|
className,
|
|
949
|
-
variant = "
|
|
970
|
+
variant = "default",
|
|
950
971
|
type = "button",
|
|
951
972
|
iconStart,
|
|
952
973
|
iconEnd,
|
|
@@ -977,9 +998,9 @@ function Button({
|
|
|
977
998
|
onClick?.(e);
|
|
978
999
|
};
|
|
979
1000
|
const content = /* @__PURE__ */ jsxs16(Fragment2, { children: [
|
|
980
|
-
Boolean(iconStart) && /* @__PURE__ */ jsx23("span", { className: Button_default.
|
|
1001
|
+
Boolean(iconStart) && /* @__PURE__ */ jsx23("span", { className: Button_default.iconStart, children: iconStart }),
|
|
981
1002
|
children,
|
|
982
|
-
Boolean(iconEnd) && /* @__PURE__ */ jsx23("span", { className: Button_default.
|
|
1003
|
+
Boolean(iconEnd) && /* @__PURE__ */ jsx23("span", { className: Button_default.iconEnd, children: iconEnd })
|
|
983
1004
|
] });
|
|
984
1005
|
if (href) {
|
|
985
1006
|
return /* @__PURE__ */ jsx23(
|
|
@@ -1011,10 +1032,10 @@ function Button({
|
|
|
1011
1032
|
}
|
|
1012
1033
|
|
|
1013
1034
|
// src/components/interaction/Command/Command.tsx
|
|
1014
|
-
import { useState as
|
|
1035
|
+
import { useState as useState5, useEffect, useRef as useRef3, useId as useId6, useMemo } from "react";
|
|
1015
1036
|
|
|
1016
1037
|
// src/components/interaction/Command/Command.module.css
|
|
1017
|
-
var Command_default = {"dialog":"
|
|
1038
|
+
var Command_default = {"dialog":"bds100Command-dialog","palette":"bds100Command-palette","searchRow":"bds100Command-searchRow","searchIcon":"bds100Command-searchIcon","search":"bds100Command-search","escHint":"bds100Command-escHint","list":"bds100Command-list","groupList":"bds100Command-groupList","group":"bds100Command-group","item":"bds100Command-item","itemActive":"bds100Command-itemActive","itemLabel":"bds100Command-itemLabel","itemDesc":"bds100Command-itemDesc","shortcut":"bds100Command-shortcut","empty":"bds100Command-empty"};
|
|
1018
1039
|
|
|
1019
1040
|
// src/components/interaction/Command/Command.tsx
|
|
1020
1041
|
import { cn as cn23 } from "@boostdev/design-system-foundation";
|
|
@@ -1026,8 +1047,8 @@ function Command({
|
|
|
1026
1047
|
placeholder = "Search commands\u2026",
|
|
1027
1048
|
className
|
|
1028
1049
|
}) {
|
|
1029
|
-
const [query, setQuery] =
|
|
1030
|
-
const [activeIndex, setActiveIndex] =
|
|
1050
|
+
const [query, setQuery] = useState5("");
|
|
1051
|
+
const [activeIndex, setActiveIndex] = useState5(0);
|
|
1031
1052
|
const dialogRef = useRef3(null);
|
|
1032
1053
|
const inputRef = useRef3(null);
|
|
1033
1054
|
const listboxId = useId6();
|
|
@@ -1047,10 +1068,12 @@ function Command({
|
|
|
1047
1068
|
});
|
|
1048
1069
|
return map;
|
|
1049
1070
|
}, [filtered]);
|
|
1071
|
+
const triggerRef = useRef3(null);
|
|
1050
1072
|
useEffect(() => {
|
|
1051
1073
|
const dialog = dialogRef.current;
|
|
1052
1074
|
if (!dialog) return;
|
|
1053
1075
|
if (isOpen) {
|
|
1076
|
+
triggerRef.current = document.activeElement;
|
|
1054
1077
|
dialog.showModal();
|
|
1055
1078
|
document.body.style.overflow = "hidden";
|
|
1056
1079
|
setQuery("");
|
|
@@ -1059,6 +1082,7 @@ function Command({
|
|
|
1059
1082
|
} else if (dialog.open) {
|
|
1060
1083
|
dialog.close();
|
|
1061
1084
|
document.body.style.overflow = "";
|
|
1085
|
+
triggerRef.current?.focus();
|
|
1062
1086
|
}
|
|
1063
1087
|
return () => {
|
|
1064
1088
|
document.body.style.overflow = "";
|
|
@@ -1096,6 +1120,7 @@ function Command({
|
|
|
1096
1120
|
ref: dialogRef,
|
|
1097
1121
|
className: cn23(Command_default.dialog, className),
|
|
1098
1122
|
"aria-label": "Command palette",
|
|
1123
|
+
"aria-modal": "true",
|
|
1099
1124
|
onCancel: handleCancel,
|
|
1100
1125
|
children: /* @__PURE__ */ jsxs17("div", { className: Command_default.palette, onKeyDown: handleKeyDown, children: [
|
|
1101
1126
|
/* @__PURE__ */ jsxs17("div", { className: Command_default.searchRow, children: [
|
|
@@ -1158,22 +1183,26 @@ function Command({
|
|
|
1158
1183
|
import { useEffect as useEffect2, useRef as useRef4 } from "react";
|
|
1159
1184
|
|
|
1160
1185
|
// src/components/interaction/Dialog/Dialog.module.css
|
|
1161
|
-
var Dialog_default = {"dialog":"
|
|
1186
|
+
var Dialog_default = {"dialog":"bds100Dialog-dialog","dialogContent":"bds100Dialog-dialogContent","closeForm":"bds100Dialog-closeForm","closeButton":"bds100Dialog-closeButton"};
|
|
1162
1187
|
|
|
1163
1188
|
// src/components/interaction/Dialog/Dialog.tsx
|
|
1164
1189
|
import { cn as cn24 } from "@boostdev/design-system-foundation";
|
|
1165
1190
|
import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1191
|
+
var FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
|
|
1166
1192
|
function Dialog({ children, isOpen = false, className, onClose }) {
|
|
1167
1193
|
const dialogRef = useRef4(null);
|
|
1194
|
+
const triggerRef = useRef4(null);
|
|
1168
1195
|
useEffect2(() => {
|
|
1169
1196
|
const dialog = dialogRef.current;
|
|
1170
1197
|
if (!dialog) return;
|
|
1171
1198
|
if (isOpen) {
|
|
1199
|
+
triggerRef.current = document.activeElement;
|
|
1172
1200
|
dialog.showModal();
|
|
1173
1201
|
document.body.style.overflow = "hidden";
|
|
1174
1202
|
} else if (dialog.open) {
|
|
1175
1203
|
dialog.close();
|
|
1176
1204
|
document.body.style.overflow = "";
|
|
1205
|
+
triggerRef.current?.focus();
|
|
1177
1206
|
}
|
|
1178
1207
|
return () => {
|
|
1179
1208
|
document.body.style.overflow = "";
|
|
@@ -1186,13 +1215,35 @@ function Dialog({ children, isOpen = false, className, onClose }) {
|
|
|
1186
1215
|
e.preventDefault();
|
|
1187
1216
|
onClose?.();
|
|
1188
1217
|
};
|
|
1218
|
+
const handleKeyDown = (e) => {
|
|
1219
|
+
if (e.key !== "Tab") return;
|
|
1220
|
+
const dialog = dialogRef.current;
|
|
1221
|
+
if (!dialog) return;
|
|
1222
|
+
const focusable = Array.from(dialog.querySelectorAll(FOCUSABLE_SELECTOR));
|
|
1223
|
+
if (focusable.length === 0) return;
|
|
1224
|
+
const first = focusable[0];
|
|
1225
|
+
const last = focusable[focusable.length - 1];
|
|
1226
|
+
if (e.shiftKey) {
|
|
1227
|
+
if (document.activeElement === first) {
|
|
1228
|
+
e.preventDefault();
|
|
1229
|
+
last.focus();
|
|
1230
|
+
}
|
|
1231
|
+
} else {
|
|
1232
|
+
if (document.activeElement === last) {
|
|
1233
|
+
e.preventDefault();
|
|
1234
|
+
first.focus();
|
|
1235
|
+
}
|
|
1236
|
+
}
|
|
1237
|
+
};
|
|
1189
1238
|
return /* @__PURE__ */ jsxs18(
|
|
1190
1239
|
"dialog",
|
|
1191
1240
|
{
|
|
1192
1241
|
ref: dialogRef,
|
|
1193
1242
|
className: cn24(className, Dialog_default.dialog),
|
|
1243
|
+
"aria-modal": "true",
|
|
1194
1244
|
onClick: handleBackdropClick,
|
|
1195
1245
|
onCancel: handleCancel,
|
|
1246
|
+
onKeyDown: handleKeyDown,
|
|
1196
1247
|
children: [
|
|
1197
1248
|
/* @__PURE__ */ jsx25("form", { method: "dialog", className: Dialog_default.closeForm, children: /* @__PURE__ */ jsx25(
|
|
1198
1249
|
"button",
|
|
@@ -1214,7 +1265,7 @@ function Dialog({ children, isOpen = false, className, onClose }) {
|
|
|
1214
1265
|
import { useEffect as useEffect3, useRef as useRef5 } from "react";
|
|
1215
1266
|
|
|
1216
1267
|
// src/components/interaction/Drawer/Drawer.module.css
|
|
1217
|
-
var Drawer_default = {"drawer":"
|
|
1268
|
+
var Drawer_default = {"drawer":"bds100Drawer-drawer","panel":"bds100Drawer-panel","--side_right":"bds100Drawer---side_right","--side_left":"bds100Drawer---side_left","header":"bds100Drawer-header","closeButton":"bds100Drawer-closeButton","body":"bds100Drawer-body"};
|
|
1218
1269
|
|
|
1219
1270
|
// src/components/interaction/Drawer/Drawer.tsx
|
|
1220
1271
|
import { cn as cn25 } from "@boostdev/design-system-foundation";
|
|
@@ -1225,19 +1276,22 @@ function Drawer({
|
|
|
1225
1276
|
title,
|
|
1226
1277
|
children,
|
|
1227
1278
|
side = "right",
|
|
1228
|
-
|
|
1279
|
+
ariaLabel,
|
|
1229
1280
|
className
|
|
1230
1281
|
}) {
|
|
1231
1282
|
const dialogRef = useRef5(null);
|
|
1283
|
+
const triggerRef = useRef5(null);
|
|
1232
1284
|
useEffect3(() => {
|
|
1233
1285
|
const dialog = dialogRef.current;
|
|
1234
1286
|
if (!dialog) return;
|
|
1235
1287
|
if (isOpen) {
|
|
1288
|
+
triggerRef.current = document.activeElement;
|
|
1236
1289
|
dialog.showModal();
|
|
1237
1290
|
document.body.style.overflow = "hidden";
|
|
1238
1291
|
} else if (dialog.open) {
|
|
1239
1292
|
dialog.close();
|
|
1240
1293
|
document.body.style.overflow = "";
|
|
1294
|
+
triggerRef.current?.focus();
|
|
1241
1295
|
}
|
|
1242
1296
|
return () => {
|
|
1243
1297
|
document.body.style.overflow = "";
|
|
@@ -1255,7 +1309,8 @@ function Drawer({
|
|
|
1255
1309
|
{
|
|
1256
1310
|
ref: dialogRef,
|
|
1257
1311
|
className: cn25(Drawer_default.drawer, Drawer_default[`--side_${side}`], className),
|
|
1258
|
-
"aria-label":
|
|
1312
|
+
"aria-label": ariaLabel,
|
|
1313
|
+
"aria-modal": "true",
|
|
1259
1314
|
onClick: handleClick,
|
|
1260
1315
|
onCancel: handleCancel,
|
|
1261
1316
|
children: /* @__PURE__ */ jsxs19("div", { className: Drawer_default.panel, children: [
|
|
@@ -1285,11 +1340,11 @@ import {
|
|
|
1285
1340
|
useEffect as useEffect4,
|
|
1286
1341
|
useId as useId7,
|
|
1287
1342
|
useRef as useRef6,
|
|
1288
|
-
useState as
|
|
1343
|
+
useState as useState6
|
|
1289
1344
|
} from "react";
|
|
1290
1345
|
|
|
1291
1346
|
// src/components/interaction/DropdownMenu/DropdownMenu.module.css
|
|
1292
|
-
var DropdownMenu_default = {"wrapper":"
|
|
1347
|
+
var DropdownMenu_default = {"wrapper":"bds100DropdownMenu-wrapper","menu":"bds100DropdownMenu-menu","--placement_bottom-start":"bds100DropdownMenu---placement_bottom-start","--placement_bottom-end":"bds100DropdownMenu---placement_bottom-end","separator":"bds100DropdownMenu-separator","item":"bds100DropdownMenu-item","icon":"bds100DropdownMenu-icon"};
|
|
1293
1348
|
|
|
1294
1349
|
// src/components/interaction/DropdownMenu/DropdownMenu.tsx
|
|
1295
1350
|
import { cn as cn26 } from "@boostdev/design-system-foundation";
|
|
@@ -1300,7 +1355,7 @@ function DropdownMenu({
|
|
|
1300
1355
|
placement = "bottom-start",
|
|
1301
1356
|
className
|
|
1302
1357
|
}) {
|
|
1303
|
-
const [isOpen, setIsOpen] =
|
|
1358
|
+
const [isOpen, setIsOpen] = useState6(false);
|
|
1304
1359
|
const containerRef = useRef6(null);
|
|
1305
1360
|
const menuId = useId7();
|
|
1306
1361
|
const itemRefs = useRef6([]);
|
|
@@ -1405,11 +1460,11 @@ import {
|
|
|
1405
1460
|
useEffect as useEffect5,
|
|
1406
1461
|
useId as useId8,
|
|
1407
1462
|
useRef as useRef7,
|
|
1408
|
-
useState as
|
|
1463
|
+
useState as useState7
|
|
1409
1464
|
} from "react";
|
|
1410
1465
|
|
|
1411
1466
|
// src/components/interaction/Popover/Popover.module.css
|
|
1412
|
-
var Popover_default = {"wrapper":"
|
|
1467
|
+
var Popover_default = {"wrapper":"bds100Popover-wrapper","panel":"bds100Popover-panel","--placement_bottom":"bds100Popover---placement_bottom","--placement_top":"bds100Popover---placement_top","--placement_right":"bds100Popover---placement_right","--placement_left":"bds100Popover---placement_left"};
|
|
1413
1468
|
|
|
1414
1469
|
// src/components/interaction/Popover/Popover.tsx
|
|
1415
1470
|
import { cn as cn27 } from "@boostdev/design-system-foundation";
|
|
@@ -1418,9 +1473,10 @@ function Popover({
|
|
|
1418
1473
|
children,
|
|
1419
1474
|
content,
|
|
1420
1475
|
placement = "bottom",
|
|
1421
|
-
className
|
|
1476
|
+
className,
|
|
1477
|
+
"aria-label": ariaLabel
|
|
1422
1478
|
}) {
|
|
1423
|
-
const [isOpen, setIsOpen] =
|
|
1479
|
+
const [isOpen, setIsOpen] = useState7(false);
|
|
1424
1480
|
const containerRef = useRef7(null);
|
|
1425
1481
|
const panelId = useId8();
|
|
1426
1482
|
useEffect5(() => {
|
|
@@ -1443,6 +1499,7 @@ function Popover({
|
|
|
1443
1499
|
const trigger = isValidElement3(children) ? cloneElement3(children, {
|
|
1444
1500
|
"aria-expanded": isOpen,
|
|
1445
1501
|
"aria-controls": panelId,
|
|
1502
|
+
"aria-haspopup": true,
|
|
1446
1503
|
onClick: (e) => {
|
|
1447
1504
|
setIsOpen((prev) => !prev);
|
|
1448
1505
|
const existingOnClick = children.props.onClick;
|
|
@@ -1455,8 +1512,8 @@ function Popover({
|
|
|
1455
1512
|
"div",
|
|
1456
1513
|
{
|
|
1457
1514
|
id: panelId,
|
|
1458
|
-
role: "
|
|
1459
|
-
"aria-
|
|
1515
|
+
role: ariaLabel ? "region" : void 0,
|
|
1516
|
+
"aria-label": ariaLabel,
|
|
1460
1517
|
className: cn27(Popover_default.panel, Popover_default[`--placement_${placement}`]),
|
|
1461
1518
|
children: content
|
|
1462
1519
|
}
|
|
@@ -1465,7 +1522,7 @@ function Popover({
|
|
|
1465
1522
|
}
|
|
1466
1523
|
|
|
1467
1524
|
// src/components/interaction/Rating/Rating.module.css
|
|
1468
|
-
var Rating_default = {"rating":"
|
|
1525
|
+
var Rating_default = {"rating":"bds100Rating-rating","star":"bds100Rating-star","--filled":"bds100Rating---filled"};
|
|
1469
1526
|
|
|
1470
1527
|
// src/components/interaction/Rating/Rating.tsx
|
|
1471
1528
|
import { cn as cn28 } from "@boostdev/design-system-foundation";
|
|
@@ -1493,17 +1550,17 @@ function Rating({ value, max = 5, className }) {
|
|
|
1493
1550
|
}
|
|
1494
1551
|
|
|
1495
1552
|
// src/components/interaction/Toast/Toast.tsx
|
|
1496
|
-
import { useState as
|
|
1553
|
+
import { useState as useState8, useEffect as useEffect6, createContext, useContext, useCallback, useMemo as useMemo2 } from "react";
|
|
1497
1554
|
|
|
1498
1555
|
// src/components/interaction/Toast/Toast.module.css
|
|
1499
|
-
var Toast_default = {"toastContainer":"
|
|
1556
|
+
var Toast_default = {"toastContainer":"bds100Toast-toastContainer","toast":"bds100Toast-toast","--variant_success":"bds100Toast---variant_success","--variant_warning":"bds100Toast---variant_warning","--variant_info":"bds100Toast---variant_info","--variant_error":"bds100Toast---variant_error","message":"bds100Toast-message","closeButton":"bds100Toast-closeButton"};
|
|
1500
1557
|
|
|
1501
1558
|
// src/components/interaction/Toast/Toast.tsx
|
|
1502
1559
|
import { cn as cn29 } from "@boostdev/design-system-foundation";
|
|
1503
1560
|
import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1504
1561
|
var ToastContext = createContext(void 0);
|
|
1505
1562
|
function ToastProvider({ children }) {
|
|
1506
|
-
const [toasts, setToasts] =
|
|
1563
|
+
const [toasts, setToasts] = useState8([]);
|
|
1507
1564
|
const showToast = useCallback((message, variant) => {
|
|
1508
1565
|
const id = Math.random().toString(36).substring(2, 9);
|
|
1509
1566
|
setToasts((prev) => [...prev, { id, message, variant }]);
|
|
@@ -1529,7 +1586,7 @@ function ToastItem({ toast, onRemove }) {
|
|
|
1529
1586
|
const timer = setTimeout(onRemove, 5e3);
|
|
1530
1587
|
return () => clearTimeout(timer);
|
|
1531
1588
|
}, [onRemove]);
|
|
1532
|
-
return /* @__PURE__ */ jsxs22("div", { className: cn29(Toast_default.toast, Toast_default[`--variant_${toast.variant}`]), role: "status", children: [
|
|
1589
|
+
return /* @__PURE__ */ jsxs22("div", { className: cn29(Toast_default.toast, Toast_default[`--variant_${toast.variant}`]), role: "status", "aria-live": "polite", "aria-atomic": "true", children: [
|
|
1533
1590
|
/* @__PURE__ */ jsx30("span", { className: Toast_default.message, children: toast.message }),
|
|
1534
1591
|
/* @__PURE__ */ jsx30("button", { type: "button", className: Toast_default.closeButton, onClick: onRemove, "aria-label": "Dismiss", children: /* @__PURE__ */ jsx30("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx30("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) }) })
|
|
1535
1592
|
] });
|
|
@@ -1546,10 +1603,10 @@ function useToast() {
|
|
|
1546
1603
|
import { useId as useId9 } from "react";
|
|
1547
1604
|
|
|
1548
1605
|
// src/components/interaction/form/Checkbox/Checkbox.module.css
|
|
1549
|
-
var Checkbox_default = {"checkboxGroup":"
|
|
1606
|
+
var Checkbox_default = {"checkboxGroup":"bds100Checkbox-checkboxGroup","inputWrapper":"bds100Checkbox-inputWrapper","checkbox":"bds100Checkbox-checkbox","checkboxError":"bds100Checkbox-checkboxError"};
|
|
1550
1607
|
|
|
1551
1608
|
// src/components/interaction/form/atoms/Message.module.css
|
|
1552
|
-
var Message_default = {"error":"
|
|
1609
|
+
var Message_default = {"error":"bds100Message-error","hint":"bds100Message-hint"};
|
|
1553
1610
|
|
|
1554
1611
|
// src/components/interaction/form/atoms/Message.tsx
|
|
1555
1612
|
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
@@ -1559,7 +1616,7 @@ var Message = ({ message, type, inputId }) => {
|
|
|
1559
1616
|
};
|
|
1560
1617
|
|
|
1561
1618
|
// src/components/interaction/form/atoms/Label.module.css
|
|
1562
|
-
var Label_default = {"label":"
|
|
1619
|
+
var Label_default = {"label":"bds100Label-label"};
|
|
1563
1620
|
|
|
1564
1621
|
// src/components/interaction/form/atoms/Label.tsx
|
|
1565
1622
|
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
@@ -1571,7 +1628,7 @@ var Label = ({ label, id }) => {
|
|
|
1571
1628
|
import { cn as cn31 } from "@boostdev/design-system-foundation";
|
|
1572
1629
|
|
|
1573
1630
|
// src/components/interaction/form/atoms/InputContainer.module.css
|
|
1574
|
-
var InputContainer_default = {"container":"
|
|
1631
|
+
var InputContainer_default = {"container":"bds100InputContainer-container"};
|
|
1575
1632
|
|
|
1576
1633
|
// src/components/interaction/form/atoms/InputContainer.tsx
|
|
1577
1634
|
import { cn as cn30 } from "@boostdev/design-system-foundation";
|
|
@@ -1608,21 +1665,63 @@ function Checkbox({ label, name, error, hint, className, ...props }) {
|
|
|
1608
1665
|
] });
|
|
1609
1666
|
}
|
|
1610
1667
|
|
|
1668
|
+
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
|
|
1669
|
+
import { useId as useId10 } from "react";
|
|
1670
|
+
|
|
1671
|
+
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css
|
|
1672
|
+
var CheckboxGroup_default = {"group":"bds100CheckboxGroup-group","legend":"bds100CheckboxGroup-legend","required":"bds100CheckboxGroup-required","items":"bds100CheckboxGroup-items"};
|
|
1673
|
+
|
|
1674
|
+
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
|
|
1675
|
+
import { cn as cn32 } from "@boostdev/design-system-foundation";
|
|
1676
|
+
import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
1677
|
+
function CheckboxGroup({
|
|
1678
|
+
legend,
|
|
1679
|
+
children,
|
|
1680
|
+
error,
|
|
1681
|
+
hint,
|
|
1682
|
+
required,
|
|
1683
|
+
disabled,
|
|
1684
|
+
className
|
|
1685
|
+
}) {
|
|
1686
|
+
const id = useId10();
|
|
1687
|
+
const hintId = id + "hint";
|
|
1688
|
+
const errorId = id + "error";
|
|
1689
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1690
|
+
return /* @__PURE__ */ jsxs24(
|
|
1691
|
+
"fieldset",
|
|
1692
|
+
{
|
|
1693
|
+
className: cn32(CheckboxGroup_default.group, className),
|
|
1694
|
+
disabled,
|
|
1695
|
+
"aria-required": required || void 0,
|
|
1696
|
+
"aria-describedby": describedBy,
|
|
1697
|
+
children: [
|
|
1698
|
+
/* @__PURE__ */ jsxs24("legend", { className: CheckboxGroup_default.legend, children: [
|
|
1699
|
+
legend,
|
|
1700
|
+
required && /* @__PURE__ */ jsx35("span", { className: CheckboxGroup_default.required, "aria-hidden": "true", children: " *" })
|
|
1701
|
+
] }),
|
|
1702
|
+
/* @__PURE__ */ jsx35("div", { className: CheckboxGroup_default.items, children }),
|
|
1703
|
+
/* @__PURE__ */ jsx35(Message, { inputId: id, type: "error", message: error }),
|
|
1704
|
+
/* @__PURE__ */ jsx35(Message, { inputId: id, type: "hint", message: hint })
|
|
1705
|
+
]
|
|
1706
|
+
}
|
|
1707
|
+
);
|
|
1708
|
+
}
|
|
1709
|
+
|
|
1611
1710
|
// src/components/interaction/form/Combobox/Combobox.tsx
|
|
1612
1711
|
import {
|
|
1613
1712
|
useEffect as useEffect7,
|
|
1614
|
-
useId as
|
|
1713
|
+
useId as useId11,
|
|
1615
1714
|
useRef as useRef8,
|
|
1616
|
-
useState as
|
|
1715
|
+
useState as useState9,
|
|
1617
1716
|
useMemo as useMemo3
|
|
1618
1717
|
} from "react";
|
|
1619
1718
|
|
|
1620
1719
|
// src/components/interaction/form/Combobox/Combobox.module.css
|
|
1621
|
-
var Combobox_default = {"formGroup":"
|
|
1720
|
+
var Combobox_default = {"formGroup":"bds100Combobox-formGroup","inputWrapper":"bds100Combobox-inputWrapper","input":"bds100Combobox-input","inputError":"bds100Combobox-inputError","chevron":"bds100Combobox-chevron","listbox":"bds100Combobox-listbox","option":"bds100Combobox-option","--highlighted":"bds100Combobox---highlighted","--selected":"bds100Combobox---selected","--disabled":"bds100Combobox---disabled"};
|
|
1622
1721
|
|
|
1623
1722
|
// src/components/interaction/form/Combobox/Combobox.tsx
|
|
1624
|
-
import { cn as
|
|
1625
|
-
import { jsx as
|
|
1723
|
+
import { cn as cn33 } from "@boostdev/design-system-foundation";
|
|
1724
|
+
import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
1626
1725
|
function Combobox({
|
|
1627
1726
|
label,
|
|
1628
1727
|
name,
|
|
@@ -1635,18 +1734,18 @@ function Combobox({
|
|
|
1635
1734
|
hint,
|
|
1636
1735
|
className
|
|
1637
1736
|
}) {
|
|
1638
|
-
const id = name +
|
|
1737
|
+
const id = name + useId11();
|
|
1639
1738
|
const listboxId = id + "listbox";
|
|
1640
1739
|
const hintId = id + "hint";
|
|
1641
1740
|
const errorId = id + "error";
|
|
1642
1741
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1643
1742
|
const selectedOption = useMemo3(() => options.find((o) => o.value === value), [options, value]);
|
|
1644
|
-
const [inputValue, setInputValue] =
|
|
1743
|
+
const [inputValue, setInputValue] = useState9(selectedOption?.label ?? "");
|
|
1645
1744
|
useEffect7(() => {
|
|
1646
1745
|
setInputValue(selectedOption?.label ?? "");
|
|
1647
1746
|
}, [selectedOption]);
|
|
1648
|
-
const [isOpen, setIsOpen] =
|
|
1649
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
1747
|
+
const [isOpen, setIsOpen] = useState9(false);
|
|
1748
|
+
const [highlightedIndex, setHighlightedIndex] = useState9(-1);
|
|
1650
1749
|
const containerRef = useRef8(null);
|
|
1651
1750
|
const inputRef = useRef8(null);
|
|
1652
1751
|
const filtered = options.filter(
|
|
@@ -1700,10 +1799,10 @@ function Combobox({
|
|
|
1700
1799
|
setIsOpen(false);
|
|
1701
1800
|
}
|
|
1702
1801
|
};
|
|
1703
|
-
return /* @__PURE__ */
|
|
1704
|
-
/* @__PURE__ */
|
|
1705
|
-
/* @__PURE__ */
|
|
1706
|
-
/* @__PURE__ */
|
|
1802
|
+
return /* @__PURE__ */ jsxs25(InputContainer, { className: cn33(Combobox_default.formGroup, className), children: [
|
|
1803
|
+
/* @__PURE__ */ jsx36(Label, { id, label }),
|
|
1804
|
+
/* @__PURE__ */ jsxs25("div", { ref: containerRef, className: Combobox_default.inputWrapper, children: [
|
|
1805
|
+
/* @__PURE__ */ jsx36(
|
|
1707
1806
|
"input",
|
|
1708
1807
|
{
|
|
1709
1808
|
ref: inputRef,
|
|
@@ -1722,28 +1821,27 @@ function Combobox({
|
|
|
1722
1821
|
placeholder,
|
|
1723
1822
|
value: inputValue,
|
|
1724
1823
|
disabled,
|
|
1725
|
-
className:
|
|
1824
|
+
className: cn33(Combobox_default.input, error ? Combobox_default.inputError : void 0),
|
|
1726
1825
|
onChange: handleInputChange,
|
|
1727
1826
|
onKeyDown: handleKeyDown,
|
|
1728
1827
|
onFocus: () => setIsOpen(true)
|
|
1729
1828
|
}
|
|
1730
1829
|
),
|
|
1731
|
-
/* @__PURE__ */
|
|
1732
|
-
isOpen && filtered.length > 0 && /* @__PURE__ */
|
|
1830
|
+
/* @__PURE__ */ jsx36("span", { className: Combobox_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx36("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx36("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" }) }) }),
|
|
1831
|
+
isOpen && filtered.length > 0 && /* @__PURE__ */ jsx36(
|
|
1733
1832
|
"ul",
|
|
1734
1833
|
{
|
|
1735
1834
|
id: listboxId,
|
|
1736
1835
|
role: "listbox",
|
|
1737
|
-
"aria-label": String(label),
|
|
1738
1836
|
className: Combobox_default.listbox,
|
|
1739
|
-
children: filtered.map((option, index) => /* @__PURE__ */
|
|
1837
|
+
children: filtered.map((option, index) => /* @__PURE__ */ jsx36(
|
|
1740
1838
|
"li",
|
|
1741
1839
|
{
|
|
1742
1840
|
id: getOptionId(index),
|
|
1743
1841
|
role: "option",
|
|
1744
1842
|
"aria-selected": option.value === value,
|
|
1745
1843
|
"aria-disabled": option.disabled,
|
|
1746
|
-
className:
|
|
1844
|
+
className: cn33(
|
|
1747
1845
|
Combobox_default.option,
|
|
1748
1846
|
index === highlightedIndex ? Combobox_default["--highlighted"] : void 0,
|
|
1749
1847
|
option.value === value ? Combobox_default["--selected"] : void 0,
|
|
@@ -1760,38 +1858,39 @@ function Combobox({
|
|
|
1760
1858
|
}
|
|
1761
1859
|
)
|
|
1762
1860
|
] }),
|
|
1763
|
-
/* @__PURE__ */
|
|
1764
|
-
/* @__PURE__ */
|
|
1861
|
+
/* @__PURE__ */ jsx36(Message, { inputId: id, type: "error", message: error }),
|
|
1862
|
+
/* @__PURE__ */ jsx36(Message, { inputId: id, type: "hint", message: hint })
|
|
1765
1863
|
] });
|
|
1766
1864
|
}
|
|
1767
1865
|
|
|
1768
1866
|
// src/components/interaction/form/FileInput/FileInput.tsx
|
|
1769
|
-
import { useId as
|
|
1867
|
+
import { useId as useId12, useRef as useRef9, useState as useState10 } from "react";
|
|
1770
1868
|
|
|
1771
1869
|
// src/components/interaction/form/FileInput/FileInput.module.css
|
|
1772
|
-
var FileInput_default = {"formGroup":"
|
|
1870
|
+
var FileInput_default = {"formGroup":"bds100FileInput-formGroup","fieldLabel":"bds100FileInput-fieldLabel","dropZone":"bds100FileInput-dropZone","isDragging":"bds100FileInput-isDragging","hasError":"bds100FileInput-hasError","isDisabled":"bds100FileInput-isDisabled","icon":"bds100FileInput-icon","prompt":"bds100FileInput-prompt","acceptHint":"bds100FileInput-acceptHint","hiddenInput":"bds100FileInput-hiddenInput"};
|
|
1773
1871
|
|
|
1774
1872
|
// src/components/interaction/form/FileInput/FileInput.tsx
|
|
1775
|
-
import { cn as
|
|
1776
|
-
import { Fragment as Fragment3, jsx as
|
|
1873
|
+
import { cn as cn34 } from "@boostdev/design-system-foundation";
|
|
1874
|
+
import { Fragment as Fragment3, jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
1777
1875
|
function FileInput({
|
|
1778
1876
|
label,
|
|
1779
1877
|
name,
|
|
1780
1878
|
accept,
|
|
1781
1879
|
multiple = false,
|
|
1782
1880
|
disabled = false,
|
|
1881
|
+
required,
|
|
1783
1882
|
error,
|
|
1784
1883
|
hint,
|
|
1785
1884
|
onChange,
|
|
1786
1885
|
className
|
|
1787
1886
|
}) {
|
|
1788
|
-
const uid = name +
|
|
1887
|
+
const uid = name + useId12();
|
|
1789
1888
|
const hintId = uid + "hint";
|
|
1790
1889
|
const errorId = uid + "error";
|
|
1791
1890
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1792
1891
|
const inputRef = useRef9(null);
|
|
1793
|
-
const [isDragging, setIsDragging] =
|
|
1794
|
-
const [fileNames, setFileNames] =
|
|
1892
|
+
const [isDragging, setIsDragging] = useState10(false);
|
|
1893
|
+
const [fileNames, setFileNames] = useState10([]);
|
|
1795
1894
|
const isFileAccepted = (file) => {
|
|
1796
1895
|
if (!accept) return true;
|
|
1797
1896
|
return accept.split(",").some((token) => {
|
|
@@ -1821,24 +1920,24 @@ function FileInput({
|
|
|
1821
1920
|
if (!disabled) setIsDragging(true);
|
|
1822
1921
|
};
|
|
1823
1922
|
const handleDragLeave = () => setIsDragging(false);
|
|
1824
|
-
return /* @__PURE__ */
|
|
1825
|
-
/* @__PURE__ */
|
|
1826
|
-
/* @__PURE__ */ jsxs25(
|
|
1923
|
+
return /* @__PURE__ */ jsxs26(InputContainer, { className: cn34(FileInput_default.formGroup, className), children: [
|
|
1924
|
+
/* @__PURE__ */ jsxs26(
|
|
1827
1925
|
"label",
|
|
1828
1926
|
{
|
|
1829
1927
|
htmlFor: uid,
|
|
1830
|
-
className:
|
|
1928
|
+
className: cn34(FileInput_default.dropZone, isDragging && FileInput_default.isDragging, error && FileInput_default.hasError, disabled && FileInput_default.isDisabled),
|
|
1831
1929
|
onDrop: handleDrop,
|
|
1832
1930
|
onDragOver: handleDragOver,
|
|
1833
1931
|
onDragLeave: handleDragLeave,
|
|
1834
1932
|
children: [
|
|
1835
|
-
/* @__PURE__ */
|
|
1836
|
-
/* @__PURE__ */
|
|
1837
|
-
|
|
1933
|
+
/* @__PURE__ */ jsx37("span", { className: FileInput_default.fieldLabel, children: label }),
|
|
1934
|
+
/* @__PURE__ */ jsx37("svg", { "aria-hidden": "true", className: FileInput_default.icon, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx37("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" }) }),
|
|
1935
|
+
/* @__PURE__ */ jsx37("span", { className: FileInput_default.prompt, children: fileNames.length > 0 ? fileNames.join(", ") : /* @__PURE__ */ jsxs26(Fragment3, { children: [
|
|
1936
|
+
/* @__PURE__ */ jsx37("strong", { children: "Click to upload" }),
|
|
1838
1937
|
" or drag and drop"
|
|
1839
1938
|
] }) }),
|
|
1840
|
-
accept && /* @__PURE__ */
|
|
1841
|
-
/* @__PURE__ */
|
|
1939
|
+
accept && /* @__PURE__ */ jsx37("span", { className: FileInput_default.acceptHint, children: accept }),
|
|
1940
|
+
/* @__PURE__ */ jsx37(
|
|
1842
1941
|
"input",
|
|
1843
1942
|
{
|
|
1844
1943
|
ref: inputRef,
|
|
@@ -1850,6 +1949,8 @@ function FileInput({
|
|
|
1850
1949
|
disabled,
|
|
1851
1950
|
"aria-invalid": !!error,
|
|
1852
1951
|
"aria-describedby": describedBy,
|
|
1952
|
+
"aria-required": required || void 0,
|
|
1953
|
+
required,
|
|
1853
1954
|
className: FileInput_default.hiddenInput,
|
|
1854
1955
|
onChange: handleChange
|
|
1855
1956
|
}
|
|
@@ -1857,20 +1958,20 @@ function FileInput({
|
|
|
1857
1958
|
]
|
|
1858
1959
|
}
|
|
1859
1960
|
),
|
|
1860
|
-
/* @__PURE__ */
|
|
1861
|
-
/* @__PURE__ */
|
|
1961
|
+
/* @__PURE__ */ jsx37(Message, { inputId: uid, type: "error", message: error }),
|
|
1962
|
+
/* @__PURE__ */ jsx37(Message, { inputId: uid, type: "hint", message: hint })
|
|
1862
1963
|
] });
|
|
1863
1964
|
}
|
|
1864
1965
|
|
|
1865
1966
|
// src/components/interaction/form/FormInput/FormInput.tsx
|
|
1866
|
-
import { useId as
|
|
1967
|
+
import { useId as useId13 } from "react";
|
|
1867
1968
|
|
|
1868
1969
|
// src/components/interaction/form/FormInput/FormInput.module.css
|
|
1869
|
-
var FormInput_default = {"formGroup":"
|
|
1970
|
+
var FormInput_default = {"formGroup":"bds100FormInput-formGroup","input":"bds100FormInput-input","inputError":"bds100FormInput-inputError"};
|
|
1870
1971
|
|
|
1871
1972
|
// src/components/interaction/form/FormInput/FormInput.tsx
|
|
1872
|
-
import { cn as
|
|
1873
|
-
import { jsx as
|
|
1973
|
+
import { cn as cn35 } from "@boostdev/design-system-foundation";
|
|
1974
|
+
import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
1874
1975
|
function FormInput({
|
|
1875
1976
|
label,
|
|
1876
1977
|
name,
|
|
@@ -1878,40 +1979,43 @@ function FormInput({
|
|
|
1878
1979
|
error,
|
|
1879
1980
|
hint,
|
|
1880
1981
|
className,
|
|
1982
|
+
required,
|
|
1881
1983
|
...props
|
|
1882
1984
|
}) {
|
|
1883
|
-
const id = name +
|
|
1985
|
+
const id = name + useId13();
|
|
1884
1986
|
const hintId = id + "hint";
|
|
1885
1987
|
const errorId = id + "error";
|
|
1886
1988
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1887
|
-
return /* @__PURE__ */
|
|
1888
|
-
/* @__PURE__ */
|
|
1889
|
-
/* @__PURE__ */
|
|
1989
|
+
return /* @__PURE__ */ jsxs27(InputContainer, { className: cn35(FormInput_default.formGroup, className), children: [
|
|
1990
|
+
/* @__PURE__ */ jsx38(Label, { id, label }),
|
|
1991
|
+
/* @__PURE__ */ jsx38(
|
|
1890
1992
|
"input",
|
|
1891
1993
|
{
|
|
1892
1994
|
"aria-invalid": !!error,
|
|
1893
1995
|
"aria-describedby": describedBy,
|
|
1894
1996
|
"aria-label": ariaLabel,
|
|
1997
|
+
"aria-required": required || void 0,
|
|
1895
1998
|
id,
|
|
1896
1999
|
name,
|
|
1897
|
-
|
|
2000
|
+
required,
|
|
2001
|
+
className: cn35(FormInput_default.input, error && FormInput_default.inputError),
|
|
1898
2002
|
...props
|
|
1899
2003
|
}
|
|
1900
2004
|
),
|
|
1901
|
-
/* @__PURE__ */
|
|
1902
|
-
/* @__PURE__ */
|
|
2005
|
+
/* @__PURE__ */ jsx38(Message, { inputId: id, type: "error", message: error }),
|
|
2006
|
+
/* @__PURE__ */ jsx38(Message, { inputId: id, type: "hint", message: hint })
|
|
1903
2007
|
] });
|
|
1904
2008
|
}
|
|
1905
2009
|
|
|
1906
2010
|
// src/components/interaction/form/NumberInput/NumberInput.tsx
|
|
1907
|
-
import { useId as
|
|
2011
|
+
import { useId as useId14, useRef as useRef10, useState as useState11 } from "react";
|
|
1908
2012
|
|
|
1909
2013
|
// src/components/interaction/form/NumberInput/NumberInput.module.css
|
|
1910
|
-
var NumberInput_default = {"formGroup":"
|
|
2014
|
+
var NumberInput_default = {"formGroup":"bds100NumberInput-formGroup","inputRow":"bds100NumberInput-inputRow","input":"bds100NumberInput-input","inputError":"bds100NumberInput-inputError","stepper":"bds100NumberInput-stepper"};
|
|
1911
2015
|
|
|
1912
2016
|
// src/components/interaction/form/NumberInput/NumberInput.tsx
|
|
1913
|
-
import { cn as
|
|
1914
|
-
import { jsx as
|
|
2017
|
+
import { cn as cn36 } from "@boostdev/design-system-foundation";
|
|
2018
|
+
import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
1915
2019
|
function NumberInput({
|
|
1916
2020
|
label,
|
|
1917
2021
|
name,
|
|
@@ -1926,13 +2030,13 @@ function NumberInput({
|
|
|
1926
2030
|
onChange,
|
|
1927
2031
|
className
|
|
1928
2032
|
}) {
|
|
1929
|
-
const uid = name +
|
|
2033
|
+
const uid = name + useId14();
|
|
1930
2034
|
const hintId = uid + "hint";
|
|
1931
2035
|
const errorId = uid + "error";
|
|
1932
2036
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1933
2037
|
const inputRef = useRef10(null);
|
|
1934
2038
|
const isControlled = value !== void 0;
|
|
1935
|
-
const [internalValue, setInternalValue] =
|
|
2039
|
+
const [internalValue, setInternalValue] = useState11(defaultValue ?? 0);
|
|
1936
2040
|
const currentValue = isControlled ? value : internalValue;
|
|
1937
2041
|
const clamp = (v) => {
|
|
1938
2042
|
const withMin = min !== void 0 ? Math.max(min, v) : v;
|
|
@@ -1943,22 +2047,23 @@ function NumberInput({
|
|
|
1943
2047
|
if (!isControlled) setInternalValue(next);
|
|
1944
2048
|
onChange?.(next);
|
|
1945
2049
|
};
|
|
1946
|
-
return /* @__PURE__ */
|
|
1947
|
-
/* @__PURE__ */
|
|
1948
|
-
/* @__PURE__ */
|
|
1949
|
-
/* @__PURE__ */
|
|
2050
|
+
return /* @__PURE__ */ jsxs28(InputContainer, { className: cn36(NumberInput_default.formGroup, className), children: [
|
|
2051
|
+
/* @__PURE__ */ jsx39(Label, { id: uid, label }),
|
|
2052
|
+
/* @__PURE__ */ jsxs28("div", { className: NumberInput_default.inputRow, children: [
|
|
2053
|
+
/* @__PURE__ */ jsx39(
|
|
1950
2054
|
"button",
|
|
1951
2055
|
{
|
|
1952
2056
|
type: "button",
|
|
1953
2057
|
className: NumberInput_default.stepper,
|
|
1954
2058
|
"aria-label": "Decrease",
|
|
2059
|
+
"aria-controls": uid,
|
|
1955
2060
|
disabled: disabled || min !== void 0 && currentValue <= min,
|
|
1956
2061
|
onClick: () => adjust(-step),
|
|
1957
2062
|
tabIndex: -1,
|
|
1958
|
-
children: /* @__PURE__ */
|
|
2063
|
+
children: /* @__PURE__ */ jsx39("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx39("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12h14" }) })
|
|
1959
2064
|
}
|
|
1960
2065
|
),
|
|
1961
|
-
/* @__PURE__ */
|
|
2066
|
+
/* @__PURE__ */ jsx39(
|
|
1962
2067
|
"input",
|
|
1963
2068
|
{
|
|
1964
2069
|
ref: inputRef,
|
|
@@ -1972,49 +2077,51 @@ function NumberInput({
|
|
|
1972
2077
|
disabled,
|
|
1973
2078
|
"aria-invalid": !!error,
|
|
1974
2079
|
"aria-describedby": describedBy,
|
|
1975
|
-
className:
|
|
2080
|
+
className: cn36(NumberInput_default.input, error ? NumberInput_default.inputError : void 0),
|
|
1976
2081
|
onChange: (e) => {
|
|
1977
2082
|
const v = parseFloat(e.target.value);
|
|
1978
|
-
|
|
1979
|
-
|
|
2083
|
+
const safe = isNaN(v) ? 0 : v;
|
|
2084
|
+
if (!isControlled) setInternalValue(safe);
|
|
2085
|
+
onChange?.(safe);
|
|
1980
2086
|
}
|
|
1981
2087
|
}
|
|
1982
2088
|
),
|
|
1983
|
-
/* @__PURE__ */
|
|
2089
|
+
/* @__PURE__ */ jsx39(
|
|
1984
2090
|
"button",
|
|
1985
2091
|
{
|
|
1986
2092
|
type: "button",
|
|
1987
2093
|
className: NumberInput_default.stepper,
|
|
1988
2094
|
"aria-label": "Increase",
|
|
2095
|
+
"aria-controls": uid,
|
|
1989
2096
|
disabled: disabled || max !== void 0 && currentValue >= max,
|
|
1990
2097
|
onClick: () => adjust(step),
|
|
1991
2098
|
tabIndex: -1,
|
|
1992
|
-
children: /* @__PURE__ */
|
|
2099
|
+
children: /* @__PURE__ */ jsx39("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx39("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 5v14M5 12h14" }) })
|
|
1993
2100
|
}
|
|
1994
2101
|
)
|
|
1995
2102
|
] }),
|
|
1996
|
-
/* @__PURE__ */
|
|
1997
|
-
/* @__PURE__ */
|
|
2103
|
+
/* @__PURE__ */ jsx39(Message, { inputId: uid, type: "error", message: error }),
|
|
2104
|
+
/* @__PURE__ */ jsx39(Message, { inputId: uid, type: "hint", message: hint })
|
|
1998
2105
|
] });
|
|
1999
2106
|
}
|
|
2000
2107
|
|
|
2001
2108
|
// src/components/interaction/form/Radio/Radio.tsx
|
|
2002
|
-
import { useId as
|
|
2109
|
+
import { useId as useId15 } from "react";
|
|
2003
2110
|
|
|
2004
2111
|
// src/components/interaction/form/Radio/Radio.module.css
|
|
2005
|
-
var Radio_default = {"radioGroup":"
|
|
2112
|
+
var Radio_default = {"radioGroup":"bds100Radio-radioGroup","inputWrapper":"bds100Radio-inputWrapper","textWrapper":"bds100Radio-textWrapper","description":"bds100Radio-description","radio":"bds100Radio-radio","radioError":"bds100Radio-radioError"};
|
|
2006
2113
|
|
|
2007
2114
|
// src/components/interaction/form/Radio/Radio.tsx
|
|
2008
|
-
import { cn as
|
|
2009
|
-
import { jsx as
|
|
2115
|
+
import { cn as cn37 } from "@boostdev/design-system-foundation";
|
|
2116
|
+
import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
2010
2117
|
function Radio({ label, name, description, error, hint, className, ...props }) {
|
|
2011
|
-
const id = name +
|
|
2118
|
+
const id = name + useId15();
|
|
2012
2119
|
const hintId = id + "hint";
|
|
2013
2120
|
const errorId = id + "error";
|
|
2014
2121
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2015
|
-
return /* @__PURE__ */
|
|
2016
|
-
/* @__PURE__ */
|
|
2017
|
-
/* @__PURE__ */
|
|
2122
|
+
return /* @__PURE__ */ jsxs29(InputContainer, { className: cn37(Radio_default.radioGroup, className), children: [
|
|
2123
|
+
/* @__PURE__ */ jsxs29("div", { className: Radio_default.inputWrapper, children: [
|
|
2124
|
+
/* @__PURE__ */ jsx40(
|
|
2018
2125
|
"input",
|
|
2019
2126
|
{
|
|
2020
2127
|
"aria-describedby": describedBy,
|
|
@@ -2022,29 +2129,71 @@ function Radio({ label, name, description, error, hint, className, ...props }) {
|
|
|
2022
2129
|
type: "radio",
|
|
2023
2130
|
id,
|
|
2024
2131
|
name,
|
|
2025
|
-
className:
|
|
2132
|
+
className: cn37(Radio_default.radio, error && Radio_default.radioError),
|
|
2026
2133
|
...props
|
|
2027
2134
|
}
|
|
2028
2135
|
),
|
|
2029
|
-
/* @__PURE__ */
|
|
2030
|
-
/* @__PURE__ */
|
|
2031
|
-
description && /* @__PURE__ */
|
|
2136
|
+
/* @__PURE__ */ jsxs29("div", { className: Radio_default.textWrapper, children: [
|
|
2137
|
+
/* @__PURE__ */ jsx40(Label, { id, label }),
|
|
2138
|
+
description && /* @__PURE__ */ jsx40("span", { className: Radio_default.description, children: description })
|
|
2032
2139
|
] })
|
|
2033
2140
|
] }),
|
|
2034
|
-
/* @__PURE__ */
|
|
2035
|
-
/* @__PURE__ */
|
|
2141
|
+
/* @__PURE__ */ jsx40(Message, { inputId: id, type: "error", message: error }),
|
|
2142
|
+
/* @__PURE__ */ jsx40(Message, { inputId: id, type: "hint", message: hint })
|
|
2036
2143
|
] });
|
|
2037
2144
|
}
|
|
2038
2145
|
|
|
2146
|
+
// src/components/interaction/form/RadioGroup/RadioGroup.tsx
|
|
2147
|
+
import { useId as useId16 } from "react";
|
|
2148
|
+
|
|
2149
|
+
// src/components/interaction/form/RadioGroup/RadioGroup.module.css
|
|
2150
|
+
var RadioGroup_default = {"group":"bds100RadioGroup-group","legend":"bds100RadioGroup-legend","required":"bds100RadioGroup-required","items":"bds100RadioGroup-items"};
|
|
2151
|
+
|
|
2152
|
+
// src/components/interaction/form/RadioGroup/RadioGroup.tsx
|
|
2153
|
+
import { cn as cn38 } from "@boostdev/design-system-foundation";
|
|
2154
|
+
import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
2155
|
+
function RadioGroup({
|
|
2156
|
+
legend,
|
|
2157
|
+
children,
|
|
2158
|
+
error,
|
|
2159
|
+
hint,
|
|
2160
|
+
required,
|
|
2161
|
+
disabled,
|
|
2162
|
+
className
|
|
2163
|
+
}) {
|
|
2164
|
+
const id = useId16();
|
|
2165
|
+
const hintId = id + "hint";
|
|
2166
|
+
const errorId = id + "error";
|
|
2167
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2168
|
+
return /* @__PURE__ */ jsxs30(
|
|
2169
|
+
"fieldset",
|
|
2170
|
+
{
|
|
2171
|
+
className: cn38(RadioGroup_default.group, className),
|
|
2172
|
+
disabled,
|
|
2173
|
+
"aria-required": required || void 0,
|
|
2174
|
+
"aria-describedby": describedBy,
|
|
2175
|
+
children: [
|
|
2176
|
+
/* @__PURE__ */ jsxs30("legend", { className: RadioGroup_default.legend, children: [
|
|
2177
|
+
legend,
|
|
2178
|
+
required && /* @__PURE__ */ jsx41("span", { className: RadioGroup_default.required, "aria-hidden": "true", children: " *" })
|
|
2179
|
+
] }),
|
|
2180
|
+
/* @__PURE__ */ jsx41("div", { className: RadioGroup_default.items, children }),
|
|
2181
|
+
/* @__PURE__ */ jsx41(Message, { inputId: id, type: "error", message: error }),
|
|
2182
|
+
/* @__PURE__ */ jsx41(Message, { inputId: id, type: "hint", message: hint })
|
|
2183
|
+
]
|
|
2184
|
+
}
|
|
2185
|
+
);
|
|
2186
|
+
}
|
|
2187
|
+
|
|
2039
2188
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
|
|
2040
|
-
import { useId as
|
|
2189
|
+
import { useId as useId17, useState as useState12 } from "react";
|
|
2041
2190
|
|
|
2042
2191
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.module.css
|
|
2043
|
-
var SegmentedControl_default = {"control":"
|
|
2192
|
+
var SegmentedControl_default = {"control":"bds100SegmentedControl-control","thumb":"bds100SegmentedControl-thumb","item":"bds100SegmentedControl-item","--disabled":"bds100SegmentedControl---disabled","radio":"bds100SegmentedControl-radio","label":"bds100SegmentedControl-label","--size_small":"bds100SegmentedControl---size_small","--size_large":"bds100SegmentedControl---size_large","--active":"bds100SegmentedControl---active"};
|
|
2044
2193
|
|
|
2045
2194
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
|
|
2046
|
-
import { cn as
|
|
2047
|
-
import { jsx as
|
|
2195
|
+
import { cn as cn39 } from "@boostdev/design-system-foundation";
|
|
2196
|
+
import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
2048
2197
|
function SegmentedControl({
|
|
2049
2198
|
name,
|
|
2050
2199
|
options,
|
|
@@ -2054,10 +2203,11 @@ function SegmentedControl({
|
|
|
2054
2203
|
disabled,
|
|
2055
2204
|
size = "medium",
|
|
2056
2205
|
className,
|
|
2206
|
+
"aria-label": ariaLabel,
|
|
2057
2207
|
...rest
|
|
2058
2208
|
}) {
|
|
2059
|
-
const baseId = name +
|
|
2060
|
-
const [internalValue, setInternalValue] =
|
|
2209
|
+
const baseId = name + useId17();
|
|
2210
|
+
const [internalValue, setInternalValue] = useState12(
|
|
2061
2211
|
defaultValue ?? options[0]?.value ?? ""
|
|
2062
2212
|
);
|
|
2063
2213
|
const activeValue = value ?? internalValue;
|
|
@@ -2066,27 +2216,29 @@ function SegmentedControl({
|
|
|
2066
2216
|
if (value === void 0) setInternalValue(optionValue);
|
|
2067
2217
|
onChange?.(optionValue);
|
|
2068
2218
|
};
|
|
2069
|
-
return /* @__PURE__ */
|
|
2219
|
+
return /* @__PURE__ */ jsxs31(
|
|
2070
2220
|
"div",
|
|
2071
2221
|
{
|
|
2072
|
-
|
|
2222
|
+
role: "group",
|
|
2223
|
+
"aria-label": ariaLabel,
|
|
2224
|
+
className: cn39(SegmentedControl_default.control, SegmentedControl_default[`--size_${size}`], className),
|
|
2073
2225
|
style: {
|
|
2074
2226
|
"--control_count": options.length,
|
|
2075
2227
|
"--control_selected-index": Math.max(0, selectedIndex)
|
|
2076
2228
|
},
|
|
2077
2229
|
children: [
|
|
2078
|
-
/* @__PURE__ */
|
|
2230
|
+
/* @__PURE__ */ jsx42("span", { className: SegmentedControl_default.thumb, "aria-hidden": "true" }),
|
|
2079
2231
|
options.map((option, index) => {
|
|
2080
2232
|
const id = `${baseId}-${index}`;
|
|
2081
2233
|
const isChecked = option.value === activeValue;
|
|
2082
2234
|
const isDisabled = disabled || option.disabled;
|
|
2083
|
-
return /* @__PURE__ */
|
|
2235
|
+
return /* @__PURE__ */ jsxs31(
|
|
2084
2236
|
"label",
|
|
2085
2237
|
{
|
|
2086
2238
|
htmlFor: id,
|
|
2087
|
-
className:
|
|
2239
|
+
className: cn39(SegmentedControl_default.item, isChecked && SegmentedControl_default["--active"], isDisabled && SegmentedControl_default["--disabled"]),
|
|
2088
2240
|
children: [
|
|
2089
|
-
/* @__PURE__ */
|
|
2241
|
+
/* @__PURE__ */ jsx42(
|
|
2090
2242
|
"input",
|
|
2091
2243
|
{
|
|
2092
2244
|
...rest,
|
|
@@ -2100,7 +2252,7 @@ function SegmentedControl({
|
|
|
2100
2252
|
onChange: () => handleChange(option.value)
|
|
2101
2253
|
}
|
|
2102
2254
|
),
|
|
2103
|
-
/* @__PURE__ */
|
|
2255
|
+
/* @__PURE__ */ jsx42("span", { className: SegmentedControl_default.label, children: option.label })
|
|
2104
2256
|
]
|
|
2105
2257
|
},
|
|
2106
2258
|
option.value
|
|
@@ -2112,14 +2264,14 @@ function SegmentedControl({
|
|
|
2112
2264
|
}
|
|
2113
2265
|
|
|
2114
2266
|
// src/components/interaction/form/Select/Select.tsx
|
|
2115
|
-
import { useId as
|
|
2267
|
+
import { useId as useId18 } from "react";
|
|
2116
2268
|
|
|
2117
2269
|
// src/components/interaction/form/Select/Select.module.css
|
|
2118
|
-
var Select_default = {"formGroup":"
|
|
2270
|
+
var Select_default = {"formGroup":"bds100Select-formGroup","selectWrapper":"bds100Select-selectWrapper","select":"bds100Select-select","selectError":"bds100Select-selectError","chevron":"bds100Select-chevron"};
|
|
2119
2271
|
|
|
2120
2272
|
// src/components/interaction/form/Select/Select.tsx
|
|
2121
|
-
import { cn as
|
|
2122
|
-
import { jsx as
|
|
2273
|
+
import { cn as cn40 } from "@boostdev/design-system-foundation";
|
|
2274
|
+
import { jsx as jsx43, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
2123
2275
|
function Select({
|
|
2124
2276
|
label,
|
|
2125
2277
|
name,
|
|
@@ -2128,46 +2280,49 @@ function Select({
|
|
|
2128
2280
|
error,
|
|
2129
2281
|
hint,
|
|
2130
2282
|
className,
|
|
2283
|
+
required,
|
|
2131
2284
|
...props
|
|
2132
2285
|
}) {
|
|
2133
|
-
const id = name +
|
|
2286
|
+
const id = name + useId18();
|
|
2134
2287
|
const hintId = id + "hint";
|
|
2135
2288
|
const errorId = id + "error";
|
|
2136
2289
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2137
|
-
return /* @__PURE__ */
|
|
2138
|
-
/* @__PURE__ */
|
|
2139
|
-
/* @__PURE__ */
|
|
2140
|
-
/* @__PURE__ */
|
|
2290
|
+
return /* @__PURE__ */ jsxs32(InputContainer, { className: cn40(Select_default.formGroup, className), children: [
|
|
2291
|
+
/* @__PURE__ */ jsx43(Label, { id, label }),
|
|
2292
|
+
/* @__PURE__ */ jsxs32("div", { className: Select_default.selectWrapper, children: [
|
|
2293
|
+
/* @__PURE__ */ jsxs32(
|
|
2141
2294
|
"select",
|
|
2142
2295
|
{
|
|
2143
2296
|
id,
|
|
2144
2297
|
name,
|
|
2145
2298
|
"aria-invalid": !!error,
|
|
2299
|
+
"aria-required": required || void 0,
|
|
2146
2300
|
"aria-describedby": describedBy,
|
|
2147
|
-
|
|
2301
|
+
required,
|
|
2302
|
+
className: cn40(Select_default.select, error ? Select_default.selectError : void 0),
|
|
2148
2303
|
...props,
|
|
2149
2304
|
children: [
|
|
2150
|
-
placeholder && /* @__PURE__ */
|
|
2151
|
-
options.map(({ value, label: optLabel, disabled }) => /* @__PURE__ */
|
|
2305
|
+
placeholder && /* @__PURE__ */ jsx43("option", { value: "", disabled: true, hidden: true, children: placeholder }),
|
|
2306
|
+
options.map(({ value, label: optLabel, disabled }) => /* @__PURE__ */ jsx43("option", { value, disabled, children: optLabel }, value))
|
|
2152
2307
|
]
|
|
2153
2308
|
}
|
|
2154
2309
|
),
|
|
2155
|
-
/* @__PURE__ */
|
|
2310
|
+
/* @__PURE__ */ jsx43("span", { className: Select_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx43("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx43("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" }) }) })
|
|
2156
2311
|
] }),
|
|
2157
|
-
/* @__PURE__ */
|
|
2158
|
-
/* @__PURE__ */
|
|
2312
|
+
/* @__PURE__ */ jsx43(Message, { inputId: id, type: "error", message: error }),
|
|
2313
|
+
/* @__PURE__ */ jsx43(Message, { inputId: id, type: "hint", message: hint })
|
|
2159
2314
|
] });
|
|
2160
2315
|
}
|
|
2161
2316
|
|
|
2162
2317
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
2163
|
-
import { useId as
|
|
2318
|
+
import { useId as useId19, useState as useState13 } from "react";
|
|
2164
2319
|
|
|
2165
2320
|
// src/components/interaction/form/Slider/Slider.module.css
|
|
2166
|
-
var Slider_default = {"formGroup":"
|
|
2321
|
+
var Slider_default = {"formGroup":"bds100Slider-formGroup","labelRow":"bds100Slider-labelRow","value":"bds100Slider-value","slider":"bds100Slider-slider","sliderError":"bds100Slider-sliderError"};
|
|
2167
2322
|
|
|
2168
2323
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
2169
|
-
import { cn as
|
|
2170
|
-
import { jsx as
|
|
2324
|
+
import { cn as cn41 } from "@boostdev/design-system-foundation";
|
|
2325
|
+
import { jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
2171
2326
|
function Slider({
|
|
2172
2327
|
label,
|
|
2173
2328
|
name,
|
|
@@ -2180,24 +2335,24 @@ function Slider({
|
|
|
2180
2335
|
onChange,
|
|
2181
2336
|
...props
|
|
2182
2337
|
}) {
|
|
2183
|
-
const id = name +
|
|
2338
|
+
const id = name + useId19();
|
|
2184
2339
|
const hintId = id + "hint";
|
|
2185
2340
|
const errorId = id + "error";
|
|
2186
2341
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2187
2342
|
const isControlled = props.value !== void 0;
|
|
2188
|
-
const [internalValue, setInternalValue] =
|
|
2343
|
+
const [internalValue, setInternalValue] = useState13(Number(props.defaultValue ?? min));
|
|
2189
2344
|
const currentValue = isControlled ? Number(props.value) : internalValue;
|
|
2190
2345
|
const fillPct = (currentValue - min) / (max - min) * 100;
|
|
2191
2346
|
const handleChange = (e) => {
|
|
2192
2347
|
if (!isControlled) setInternalValue(Number(e.target.value));
|
|
2193
2348
|
onChange?.(e);
|
|
2194
2349
|
};
|
|
2195
|
-
return /* @__PURE__ */
|
|
2196
|
-
/* @__PURE__ */
|
|
2197
|
-
/* @__PURE__ */
|
|
2198
|
-
showValue && /* @__PURE__ */
|
|
2350
|
+
return /* @__PURE__ */ jsxs33(InputContainer, { className: cn41(Slider_default.formGroup, className), children: [
|
|
2351
|
+
/* @__PURE__ */ jsxs33("div", { className: Slider_default.labelRow, children: [
|
|
2352
|
+
/* @__PURE__ */ jsx44(Label, { id, label }),
|
|
2353
|
+
showValue && /* @__PURE__ */ jsx44("span", { className: Slider_default.value, children: currentValue })
|
|
2199
2354
|
] }),
|
|
2200
|
-
/* @__PURE__ */
|
|
2355
|
+
/* @__PURE__ */ jsx44(
|
|
2201
2356
|
"input",
|
|
2202
2357
|
{
|
|
2203
2358
|
type: "range",
|
|
@@ -2209,26 +2364,27 @@ function Slider({
|
|
|
2209
2364
|
"aria-valuemin": min,
|
|
2210
2365
|
"aria-valuemax": max,
|
|
2211
2366
|
"aria-valuenow": currentValue,
|
|
2212
|
-
|
|
2367
|
+
"aria-valuetext": String(currentValue),
|
|
2368
|
+
className: cn41(Slider_default.slider, error ? Slider_default.sliderError : void 0),
|
|
2213
2369
|
style: { "--slider_fill": `${fillPct}%` },
|
|
2214
2370
|
onChange: handleChange,
|
|
2215
2371
|
...props
|
|
2216
2372
|
}
|
|
2217
2373
|
),
|
|
2218
|
-
/* @__PURE__ */
|
|
2219
|
-
/* @__PURE__ */
|
|
2374
|
+
/* @__PURE__ */ jsx44(Message, { inputId: id, type: "error", message: error }),
|
|
2375
|
+
/* @__PURE__ */ jsx44(Message, { inputId: id, type: "hint", message: hint })
|
|
2220
2376
|
] });
|
|
2221
2377
|
}
|
|
2222
2378
|
|
|
2223
2379
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2224
|
-
import { useId as
|
|
2380
|
+
import { useId as useId20 } from "react";
|
|
2225
2381
|
|
|
2226
2382
|
// src/components/interaction/form/Switch/Switch.module.css
|
|
2227
|
-
var Switch_default = {"switchGroup":"
|
|
2383
|
+
var Switch_default = {"switchGroup":"bds100Switch-switchGroup","--size_small":"bds100Switch---size_small","--size_medium":"bds100Switch---size_medium","--size_large":"bds100Switch---size_large","inputWrapper":"bds100Switch-inputWrapper","trackWrapper":"bds100Switch-trackWrapper","switch":"bds100Switch-switch","track":"bds100Switch-track","thumb":"bds100Switch-thumb","switchError":"bds100Switch-switchError"};
|
|
2228
2384
|
|
|
2229
2385
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2230
|
-
import { cn as
|
|
2231
|
-
import { jsx as
|
|
2386
|
+
import { cn as cn42 } from "@boostdev/design-system-foundation";
|
|
2387
|
+
import { jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
2232
2388
|
function Switch({
|
|
2233
2389
|
label,
|
|
2234
2390
|
name,
|
|
@@ -2239,15 +2395,15 @@ function Switch({
|
|
|
2239
2395
|
prefix,
|
|
2240
2396
|
...props
|
|
2241
2397
|
}) {
|
|
2242
|
-
const id = name +
|
|
2398
|
+
const id = name + useId20();
|
|
2243
2399
|
const hintId = id + "hint";
|
|
2244
2400
|
const errorId = id + "error";
|
|
2245
2401
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2246
|
-
return /* @__PURE__ */
|
|
2247
|
-
/* @__PURE__ */
|
|
2248
|
-
prefix && /* @__PURE__ */
|
|
2249
|
-
/* @__PURE__ */
|
|
2250
|
-
/* @__PURE__ */
|
|
2402
|
+
return /* @__PURE__ */ jsxs34(InputContainer, { className: cn42(Switch_default.switchGroup, Switch_default[`--size_${size}`], className), children: [
|
|
2403
|
+
/* @__PURE__ */ jsxs34("div", { className: Switch_default.inputWrapper, children: [
|
|
2404
|
+
prefix && /* @__PURE__ */ jsx45("span", { children: prefix }),
|
|
2405
|
+
/* @__PURE__ */ jsxs34("div", { className: Switch_default.trackWrapper, children: [
|
|
2406
|
+
/* @__PURE__ */ jsx45(
|
|
2251
2407
|
"input",
|
|
2252
2408
|
{
|
|
2253
2409
|
type: "checkbox",
|
|
@@ -2255,74 +2411,85 @@ function Switch({
|
|
|
2255
2411
|
id,
|
|
2256
2412
|
name,
|
|
2257
2413
|
"aria-describedby": describedBy,
|
|
2258
|
-
className:
|
|
2414
|
+
className: cn42(Switch_default.switch, error ? Switch_default.switchError : void 0),
|
|
2259
2415
|
...props
|
|
2260
2416
|
}
|
|
2261
2417
|
),
|
|
2262
|
-
/* @__PURE__ */
|
|
2418
|
+
/* @__PURE__ */ jsx45("span", { className: Switch_default.track, "aria-hidden": "true", children: /* @__PURE__ */ jsx45("span", { className: Switch_default.thumb }) })
|
|
2263
2419
|
] }),
|
|
2264
|
-
/* @__PURE__ */
|
|
2420
|
+
/* @__PURE__ */ jsx45(Label, { id, label })
|
|
2265
2421
|
] }),
|
|
2266
|
-
/* @__PURE__ */
|
|
2267
|
-
/* @__PURE__ */
|
|
2422
|
+
/* @__PURE__ */ jsx45(Message, { inputId: id, type: "error", message: error }),
|
|
2423
|
+
/* @__PURE__ */ jsx45(Message, { inputId: id, type: "hint", message: hint })
|
|
2268
2424
|
] });
|
|
2269
2425
|
}
|
|
2270
2426
|
|
|
2271
2427
|
// src/components/interaction/form/Textarea/Textarea.tsx
|
|
2272
|
-
import { useId as
|
|
2428
|
+
import { useId as useId21 } from "react";
|
|
2273
2429
|
|
|
2274
2430
|
// src/components/interaction/form/Textarea/Textarea.module.css
|
|
2275
|
-
var Textarea_default = {"formGroup":"
|
|
2431
|
+
var Textarea_default = {"formGroup":"bds100Textarea-formGroup","textarea":"bds100Textarea-textarea","textareaError":"bds100Textarea-textareaError"};
|
|
2276
2432
|
|
|
2277
2433
|
// src/components/interaction/form/Textarea/Textarea.tsx
|
|
2278
|
-
import { cn as
|
|
2279
|
-
import { jsx as
|
|
2434
|
+
import { cn as cn43 } from "@boostdev/design-system-foundation";
|
|
2435
|
+
import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
2280
2436
|
function Textarea({
|
|
2281
2437
|
label,
|
|
2282
2438
|
name,
|
|
2283
2439
|
error,
|
|
2284
2440
|
hint,
|
|
2285
2441
|
className,
|
|
2442
|
+
required,
|
|
2286
2443
|
...props
|
|
2287
2444
|
}) {
|
|
2288
|
-
const id = name +
|
|
2445
|
+
const id = name + useId21();
|
|
2289
2446
|
const hintId = id + "hint";
|
|
2290
2447
|
const errorId = id + "error";
|
|
2291
2448
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2292
|
-
return /* @__PURE__ */
|
|
2293
|
-
/* @__PURE__ */
|
|
2294
|
-
/* @__PURE__ */
|
|
2449
|
+
return /* @__PURE__ */ jsxs35(InputContainer, { className: cn43(Textarea_default.formGroup, className), children: [
|
|
2450
|
+
/* @__PURE__ */ jsx46(Label, { id, label }),
|
|
2451
|
+
/* @__PURE__ */ jsx46(
|
|
2295
2452
|
"textarea",
|
|
2296
2453
|
{
|
|
2297
2454
|
id,
|
|
2298
2455
|
name,
|
|
2299
2456
|
"aria-invalid": !!error,
|
|
2300
2457
|
"aria-describedby": describedBy,
|
|
2301
|
-
|
|
2458
|
+
"aria-required": required || void 0,
|
|
2459
|
+
required,
|
|
2460
|
+
className: cn43(Textarea_default.textarea, error ? Textarea_default.textareaError : void 0),
|
|
2302
2461
|
...props
|
|
2303
2462
|
}
|
|
2304
2463
|
),
|
|
2305
|
-
/* @__PURE__ */
|
|
2306
|
-
/* @__PURE__ */
|
|
2464
|
+
/* @__PURE__ */ jsx46(Message, { inputId: id, type: "error", message: error }),
|
|
2465
|
+
/* @__PURE__ */ jsx46(Message, { inputId: id, type: "hint", message: hint })
|
|
2307
2466
|
] });
|
|
2308
2467
|
}
|
|
2309
2468
|
|
|
2310
2469
|
// src/components/layout/ButtonGroup/ButtonGroup.module.css
|
|
2311
|
-
var ButtonGroup_default = {"buttonGroup":"
|
|
2470
|
+
var ButtonGroup_default = {"buttonGroup":"bds100ButtonGroup-buttonGroup","container":"bds100ButtonGroup-container","--variant_card":"bds100ButtonGroup---variant_card","--variant_flow":"bds100ButtonGroup---variant_flow","--variant_modal":"bds100ButtonGroup---variant_modal","--variant_content":"bds100ButtonGroup---variant_content","--variant_grid":"bds100ButtonGroup---variant_grid"};
|
|
2312
2471
|
|
|
2313
2472
|
// src/components/layout/ButtonGroup/ButtonGroup.tsx
|
|
2314
|
-
import { cn as
|
|
2315
|
-
import { jsx as
|
|
2316
|
-
function ButtonGroup({ children, className, variant }) {
|
|
2317
|
-
return /* @__PURE__ */
|
|
2473
|
+
import { cn as cn44 } from "@boostdev/design-system-foundation";
|
|
2474
|
+
import { jsx as jsx47 } from "react/jsx-runtime";
|
|
2475
|
+
function ButtonGroup({ children, className, variant, "aria-label": ariaLabel }) {
|
|
2476
|
+
return /* @__PURE__ */ jsx47(
|
|
2477
|
+
"div",
|
|
2478
|
+
{
|
|
2479
|
+
role: "group",
|
|
2480
|
+
"aria-label": ariaLabel,
|
|
2481
|
+
className: cn44(ButtonGroup_default.buttonGroup, className, variant && ButtonGroup_default[`--variant_${variant}`]),
|
|
2482
|
+
children: /* @__PURE__ */ jsx47("div", { className: ButtonGroup_default.container, children })
|
|
2483
|
+
}
|
|
2484
|
+
);
|
|
2318
2485
|
}
|
|
2319
2486
|
|
|
2320
2487
|
// src/components/layout/Card/Card.module.css
|
|
2321
|
-
var Card_default = {"card":"
|
|
2488
|
+
var Card_default = {"card":"bds100Card-card","--default":"bds100Card---default","--elevated":"bds100Card---elevated","--outlined":"bds100Card---outlined","--clickable":"bds100Card---clickable","--padding-none":"bds100Card---padding-none","--padding-small":"bds100Card---padding-small","--padding-medium":"bds100Card---padding-medium","--padding-large":"bds100Card---padding-large","--text-start":"bds100Card---text-start","--text-center":"bds100Card---text-center","--text-end":"bds100Card---text-end"};
|
|
2322
2489
|
|
|
2323
2490
|
// src/components/layout/Card/Card.tsx
|
|
2324
|
-
import { cn as
|
|
2325
|
-
import { jsx as
|
|
2491
|
+
import { cn as cn45 } from "@boostdev/design-system-foundation";
|
|
2492
|
+
import { jsx as jsx48 } from "react/jsx-runtime";
|
|
2326
2493
|
function Card({
|
|
2327
2494
|
children,
|
|
2328
2495
|
className,
|
|
@@ -2333,7 +2500,7 @@ function Card({
|
|
|
2333
2500
|
onClick,
|
|
2334
2501
|
"aria-label": ariaLabel
|
|
2335
2502
|
}) {
|
|
2336
|
-
const classNames =
|
|
2503
|
+
const classNames = cn45(
|
|
2337
2504
|
Card_default.card,
|
|
2338
2505
|
Card_default[`--${variant}`],
|
|
2339
2506
|
Card_default[`--padding-${padding}`],
|
|
@@ -2342,7 +2509,7 @@ function Card({
|
|
|
2342
2509
|
className
|
|
2343
2510
|
);
|
|
2344
2511
|
const Component = onClick ? "button" : "div";
|
|
2345
|
-
return /* @__PURE__ */
|
|
2512
|
+
return /* @__PURE__ */ jsx48(
|
|
2346
2513
|
Component,
|
|
2347
2514
|
{
|
|
2348
2515
|
className: classNames,
|
|
@@ -2356,11 +2523,11 @@ function Card({
|
|
|
2356
2523
|
}
|
|
2357
2524
|
|
|
2358
2525
|
// src/components/layout/SectionHeader/SectionHeader.module.css
|
|
2359
|
-
var SectionHeader_default = {"sectionHeader":"
|
|
2526
|
+
var SectionHeader_default = {"sectionHeader":"bds100SectionHeader-sectionHeader","title":"bds100SectionHeader-title","subtitle":"bds100SectionHeader-subtitle","--start":"bds100SectionHeader---start","--center":"bds100SectionHeader---center","--end":"bds100SectionHeader---end","--small":"bds100SectionHeader---small","--medium":"bds100SectionHeader---medium","--large":"bds100SectionHeader---large"};
|
|
2360
2527
|
|
|
2361
2528
|
// src/components/layout/SectionHeader/SectionHeader.tsx
|
|
2362
|
-
import { cn as
|
|
2363
|
-
import { jsx as
|
|
2529
|
+
import { cn as cn46 } from "@boostdev/design-system-foundation";
|
|
2530
|
+
import { jsx as jsx49, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
2364
2531
|
function SectionHeader({
|
|
2365
2532
|
title,
|
|
2366
2533
|
subtitle,
|
|
@@ -2370,24 +2537,24 @@ function SectionHeader({
|
|
|
2370
2537
|
titleAs = "h2"
|
|
2371
2538
|
}) {
|
|
2372
2539
|
const Title = titleAs;
|
|
2373
|
-
return /* @__PURE__ */
|
|
2374
|
-
/* @__PURE__ */
|
|
2375
|
-
subtitle && /* @__PURE__ */
|
|
2540
|
+
return /* @__PURE__ */ jsxs36("div", { className: cn46(SectionHeader_default.sectionHeader, SectionHeader_default[`--${alignment}`], SectionHeader_default[`--${size}`], className), children: [
|
|
2541
|
+
/* @__PURE__ */ jsx49(Title, { className: SectionHeader_default.title, children: title }),
|
|
2542
|
+
subtitle && /* @__PURE__ */ jsx49("p", { className: SectionHeader_default.subtitle, children: subtitle })
|
|
2376
2543
|
] });
|
|
2377
2544
|
}
|
|
2378
2545
|
|
|
2379
2546
|
// src/components/layout/IconWrapper/IconWrapper.module.css
|
|
2380
|
-
var IconWrapper_default = {"wrapper":"
|
|
2547
|
+
var IconWrapper_default = {"wrapper":"bds100IconWrapper-wrapper"};
|
|
2381
2548
|
|
|
2382
2549
|
// src/components/layout/IconWrapper/IconWrapper.tsx
|
|
2383
|
-
import { cn as
|
|
2384
|
-
import { jsx as
|
|
2385
|
-
function IconWrapper({ children, className }) {
|
|
2386
|
-
return /* @__PURE__ */
|
|
2550
|
+
import { cn as cn47 } from "@boostdev/design-system-foundation";
|
|
2551
|
+
import { jsx as jsx50 } from "react/jsx-runtime";
|
|
2552
|
+
function IconWrapper({ children, className, "aria-hidden": ariaHidden }) {
|
|
2553
|
+
return /* @__PURE__ */ jsx50("div", { className: cn47(className, IconWrapper_default.wrapper), "aria-hidden": ariaHidden, children });
|
|
2387
2554
|
}
|
|
2388
2555
|
|
|
2389
2556
|
// src/index.ts
|
|
2390
|
-
import { cn as
|
|
2557
|
+
import { cn as cn48 } from "@boostdev/design-system-foundation";
|
|
2391
2558
|
export {
|
|
2392
2559
|
Accordion,
|
|
2393
2560
|
Alert,
|
|
@@ -2400,6 +2567,7 @@ export {
|
|
|
2400
2567
|
Card,
|
|
2401
2568
|
Carousel,
|
|
2402
2569
|
Checkbox,
|
|
2570
|
+
CheckboxGroup,
|
|
2403
2571
|
Collapsible,
|
|
2404
2572
|
Combobox,
|
|
2405
2573
|
Command,
|
|
@@ -2419,6 +2587,7 @@ export {
|
|
|
2419
2587
|
Progress,
|
|
2420
2588
|
ProgressCircle,
|
|
2421
2589
|
Radio,
|
|
2590
|
+
RadioGroup,
|
|
2422
2591
|
Rating,
|
|
2423
2592
|
SectionHeader,
|
|
2424
2593
|
SegmentedControl,
|
|
@@ -2434,6 +2603,6 @@ export {
|
|
|
2434
2603
|
ToastProvider,
|
|
2435
2604
|
Tooltip,
|
|
2436
2605
|
Typography,
|
|
2437
|
-
|
|
2606
|
+
cn48 as cn,
|
|
2438
2607
|
useToast
|
|
2439
2608
|
};
|