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