@boostdev/design-system-components 0.1.18 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +65 -27
- package/README.md +64 -29
- package/dist/client.cjs +419 -242
- package/dist/client.css +1378 -1186
- package/dist/client.d.cts +43 -16
- package/dist/client.d.ts +43 -16
- package/dist/client.js +421 -246
- package/dist/index.cjs +419 -242
- package/dist/index.css +1378 -1186
- package/dist/index.d.cts +43 -16
- package/dist/index.d.ts +43 -16
- package/dist/index.js +421 -246
- package/package.json +9 -4
- package/src/components/interaction/Button/Button.mdx +8 -11
- package/src/components/interaction/Button/Button.module.css +74 -44
- package/src/components/interaction/Button/Button.stories.tsx +4 -4
- package/src/components/interaction/Button/Button.tsx +5 -5
- package/src/components/interaction/Button/index.ts +1 -0
- package/src/components/interaction/Command/Command.module.css +53 -38
- package/src/components/interaction/Command/Command.spec.tsx +24 -0
- package/src/components/interaction/Command/Command.tsx +5 -0
- package/src/components/interaction/Dialog/Dialog.mdx +2 -2
- package/src/components/interaction/Dialog/Dialog.module.css +20 -10
- package/src/components/interaction/Dialog/Dialog.spec.tsx +19 -0
- package/src/components/interaction/Dialog/Dialog.tsx +22 -0
- package/src/components/interaction/Drawer/Drawer.module.css +11 -11
- package/src/components/interaction/Drawer/Drawer.spec.tsx +30 -0
- package/src/components/interaction/Drawer/Drawer.tsx +7 -3
- package/src/components/interaction/DropdownMenu/DropdownMenu.module.css +24 -19
- package/src/components/interaction/DropdownMenu/DropdownMenu.stories.tsx +4 -4
- package/src/components/interaction/Popover/Popover.module.css +17 -12
- package/src/components/interaction/Popover/Popover.spec.tsx +25 -4
- package/src/components/interaction/Popover/Popover.stories.tsx +1 -1
- package/src/components/interaction/Popover/Popover.tsx +5 -2
- package/src/components/interaction/Rating/Rating.module.css +3 -3
- package/src/components/interaction/Toast/Toast.module.css +19 -19
- package/src/components/interaction/Toast/Toast.tsx +1 -1
- package/src/components/interaction/form/Checkbox/Checkbox.mdx +2 -2
- package/src/components/interaction/form/Checkbox/Checkbox.module.css +22 -18
- package/src/components/interaction/form/Checkbox/Checkbox.tsx +2 -2
- package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css +29 -0
- package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.spec.tsx +87 -0
- package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.stories.tsx +62 -0
- package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx +46 -0
- package/src/components/interaction/form/CheckboxGroup/index.ts +2 -0
- package/src/components/interaction/form/Combobox/Combobox.module.css +44 -34
- package/src/components/interaction/form/Combobox/Combobox.tsx +0 -1
- package/src/components/interaction/form/FileInput/FileInput.module.css +24 -16
- package/src/components/interaction/form/FileInput/FileInput.tsx +5 -2
- package/src/components/interaction/form/FormInput/FormInput.module.css +21 -16
- package/src/components/interaction/form/FormInput/FormInput.tsx +3 -0
- package/src/components/interaction/form/NumberInput/NumberInput.module.css +25 -19
- package/src/components/interaction/form/NumberInput/NumberInput.tsx +12 -3
- package/src/components/interaction/form/Radio/Radio.mdx +3 -3
- package/src/components/interaction/form/Radio/Radio.module.css +28 -24
- package/src/components/interaction/form/Radio/Radio.stories.tsx +1 -1
- package/src/components/interaction/form/Radio/Radio.tsx +2 -2
- package/src/components/interaction/form/RadioGroup/RadioGroup.module.css +29 -0
- package/src/components/interaction/form/RadioGroup/RadioGroup.spec.tsx +75 -0
- package/src/components/interaction/form/RadioGroup/RadioGroup.stories.tsx +64 -0
- package/src/components/interaction/form/RadioGroup/RadioGroup.tsx +46 -0
- package/src/components/interaction/form/RadioGroup/index.ts +2 -0
- package/src/components/interaction/form/SegmentedControl/SegmentedControl.mdx +5 -5
- package/src/components/interaction/form/SegmentedControl/SegmentedControl.module.css +26 -26
- package/src/components/interaction/form/SegmentedControl/SegmentedControl.tsx +4 -0
- package/src/components/interaction/form/Select/Select.module.css +24 -19
- package/src/components/interaction/form/Select/Select.tsx +3 -0
- package/src/components/interaction/form/Slider/Slider.mdx +1 -1
- package/src/components/interaction/form/Slider/Slider.module.css +24 -24
- package/src/components/interaction/form/Slider/Slider.tsx +1 -0
- package/src/components/interaction/form/Switch/Switch.mdx +4 -4
- package/src/components/interaction/form/Switch/Switch.module.css +22 -16
- package/src/components/interaction/form/Switch/Switch.tsx +1 -1
- package/src/components/interaction/form/Textarea/Textarea.module.css +23 -18
- package/src/components/interaction/form/Textarea/Textarea.tsx +3 -0
- package/src/components/interaction/form/atoms/InputContainer.module.css +2 -2
- package/src/components/interaction/form/atoms/Label.module.css +2 -2
- package/src/components/interaction/form/atoms/Message.module.css +2 -2
- package/src/components/layout/ButtonGroup/ButtonGroup.module.css +2 -2
- package/src/components/layout/ButtonGroup/ButtonGroup.stories.tsx +2 -2
- package/src/components/layout/ButtonGroup/ButtonGroup.tsx +8 -3
- package/src/components/layout/ButtonGroup/index.ts +1 -0
- package/src/components/layout/Card/Card.module.css +30 -16
- package/src/components/layout/Card/Card.tsx +1 -1
- package/src/components/layout/IconWrapper/IconWrapper.mdx +2 -2
- package/src/components/layout/IconWrapper/IconWrapper.module.css +5 -5
- package/src/components/layout/IconWrapper/IconWrapper.tsx +4 -3
- package/src/components/layout/IconWrapper/index.ts +1 -0
- package/src/components/layout/SectionHeader/SectionHeader.module.css +23 -23
- package/src/components/layout/SectionHeader/SectionHeader.spec.tsx +2 -2
- package/src/components/layout/SectionHeader/SectionHeader.tsx +2 -2
- package/src/components/ui/Accordion/Accordion.module.css +23 -18
- package/src/components/ui/Alert/Alert.module.css +31 -27
- package/src/components/ui/Avatar/Avatar.module.css +6 -6
- package/src/components/ui/Avatar/Avatar.tsx +1 -1
- package/src/components/ui/Badge/Badge.mdx +2 -2
- package/src/components/ui/Badge/Badge.module.css +15 -15
- package/src/components/ui/Breadcrumb/Breadcrumb.module.css +11 -11
- package/src/components/ui/Calendar/Calendar.module.css +39 -29
- package/src/components/ui/Calendar/Calendar.tsx +6 -2
- package/src/components/ui/Carousel/Carousel.module.css +15 -10
- package/src/components/ui/Carousel/Carousel.stories.tsx +1 -1
- package/src/components/ui/Collapsible/Collapsible.mdx +6 -6
- package/src/components/ui/Collapsible/Collapsible.module.css +18 -18
- package/src/components/ui/DescriptionList/DescriptionList.module.css +8 -8
- package/src/components/ui/Link/Link.module.css +14 -14
- package/src/components/ui/Loading/Loading.module.css +8 -2
- package/src/components/ui/NotificationBanner/NotificationBanner.module.css +27 -23
- package/src/components/ui/Pagination/Pagination.module.css +22 -17
- package/src/components/ui/Progress/Progress.mdx +1 -1
- package/src/components/ui/Progress/Progress.module.css +10 -10
- package/src/components/ui/ProgressCircle/ProgressCircle.module.css +8 -8
- package/src/components/ui/Separator/Separator.module.css +1 -1
- package/src/components/ui/Separator/Separator.tsx +1 -1
- package/src/components/ui/Skeleton/Skeleton.module.css +5 -5
- package/src/components/ui/SkipLink/SkipLink.module.css +17 -12
- package/src/components/ui/Table/Table.module.css +35 -30
- package/src/components/ui/Table/Table.tsx +2 -1
- package/src/components/ui/Tabs/Tabs.module.css +17 -17
- package/src/components/ui/Tabs/Tabs.tsx +0 -1
- package/src/components/ui/Tooltip/Tooltip.module.css +12 -12
- package/src/components/ui/Tooltip/Tooltip.spec.tsx +3 -3
- package/src/components/ui/Tooltip/Tooltip.tsx +10 -2
- package/src/components/ui/Typography/Typography.module.css +18 -18
- package/src/css/bdc.css +66 -0
- package/src/css/index.css +5 -0
- package/src/index.ts +7 -0
- package/src/stories/DesignSystem/Borders.mdx +158 -0
- package/src/stories/DesignSystem/Colors.mdx +196 -0
- package/src/stories/DesignSystem/Elevation.mdx +127 -0
- package/src/stories/DesignSystem/Grid.mdx +140 -0
- package/src/stories/DesignSystem/Motion.mdx +96 -0
- package/src/stories/DesignSystem/Overview.mdx +99 -0
- package/src/stories/DesignSystem/Spacing.mdx +74 -0
- package/src/stories/DesignSystem/Typography.mdx +110 -0
- package/src/stories/Introduction.css +2 -2
- package/src/stories/Introduction.mdx +7 -7
package/dist/client.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":"bds101Accordion-accordion","item":"bds101Accordion-item","heading":"bds101Accordion-heading","trigger":"bds101Accordion-trigger","triggerLabel":"bds101Accordion-triggerLabel","chevron":"bds101Accordion-chevron","--open":"bds101Accordion---open","panel":"bds101Accordion-panel","panelContent":"bds101Accordion-panelContent"};
|
|
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":"bds101Alert-alert","--variant_info":"bds101Alert---variant_info","--variant_success":"bds101Alert---variant_success","--variant_warning":"bds101Alert---variant_warning","--variant_error":"bds101Alert---variant_error","icon":"bds101Alert-icon","content":"bds101Alert-content","title":"bds101Alert-title","dismiss":"bds101Alert-dismiss"};
|
|
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":"bds101Avatar-avatar","--fallback":"bds101Avatar---fallback","--size_small":"bds101Avatar---size_small","--size_medium":"bds101Avatar---size_medium","--size_large":"bds101Avatar---size_large","image":"bds101Avatar-image","initials":"bds101Avatar-initials"};
|
|
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":"bds101Badge-badge","--variant_primary":"bds101Badge---variant_primary","--variant_secondary":"bds101Badge---variant_secondary","--variant_success":"bds101Badge---variant_success","--variant_error":"bds101Badge---variant_error","--variant_warning":"bds101Badge---variant_warning"};
|
|
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":"bds101Breadcrumb-breadcrumb","list":"bds101Breadcrumb-list","item":"bds101Breadcrumb-item","link":"bds101Breadcrumb-link","separator":"bds101Breadcrumb-separator","current":"bds101Breadcrumb-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":"bds101Collapsible-collapsible","summary":"bds101Collapsible-summary","summaryContent":"bds101Collapsible-summaryContent","icon":"bds101Collapsible-icon","content":"bds101Collapsible-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":"bds101Calendar-calendar","header":"bds101Calendar-header","monthYear":"bds101Calendar-monthYear","navBtn":"bds101Calendar-navBtn","grid":"bds101Calendar-grid","weekday":"bds101Calendar-weekday","empty":"bds101Calendar-empty","day":"bds101Calendar-day","disabled":"bds101Calendar-disabled","selected":"bds101Calendar-selected","today":"bds101Calendar-today"};
|
|
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":"bds101Carousel-carousel","track":"bds101Carousel-track","slide":"bds101Carousel-slide","navBtn":"bds101Carousel-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":"bds101DescriptionList-list","group":"bds101DescriptionList-group","term":"bds101DescriptionList-term","details":"bds101DescriptionList-details","--layout_inline":"bds101DescriptionList---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":"bds101Link-link","--variant_default":"bds101Link---variant_default","--variant_subtle":"bds101Link---variant_subtle","--variant_standalone":"bds101Link---variant_standalone","externalLabel":"bds101Link-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":"bds101Loading-loading","spinner":"bds101Loading-spinner","--size_small":"bds101Loading---size_small","--size_large":"bds101Loading---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":"bds101NotificationBanner-banner","--variant_info":"bds101NotificationBanner---variant_info","--variant_success":"bds101NotificationBanner---variant_success","--variant_warning":"bds101NotificationBanner---variant_warning","--variant_error":"bds101NotificationBanner---variant_error","content":"bds101NotificationBanner-content","action":"bds101NotificationBanner-action","dismiss":"bds101NotificationBanner-dismiss"};
|
|
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":"bds101Pagination-pagination","list":"bds101Pagination-list","button":"bds101Pagination-button","--active":"bds101Pagination---active","--nav":"bds101Pagination---nav","ellipsis":"bds101Pagination-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":"bds101Progress-container","labelRow":"bds101Progress-labelRow","value":"bds101Progress-value","track":"bds101Progress-track","--size_small":"bds101Progress---size_small","--size_medium":"bds101Progress---size_medium","--size_large":"bds101Progress---size_large","fill":"bds101Progress-fill"};
|
|
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":"bds101ProgressCircle-wrapper","svg":"bds101ProgressCircle-svg","track":"bds101ProgressCircle-track","fill":"bds101ProgressCircle-fill","value":"bds101ProgressCircle-value","--size_small":"bds101ProgressCircle---size_small","--size_medium":"bds101ProgressCircle---size_medium","--size_large":"bds101ProgressCircle---size_large"};
|
|
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":"bds101Separator-separator","--horizontal":"bds101Separator---horizontal","--vertical":"bds101Separator---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":"bds101Skeleton-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":"bds101SkipLink-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":"bds101Table-wrapper","table":"bds101Table-table","caption":"bds101Table-caption","thead":"bds101Table-thead","th":"bds101Table-th","--sortable":"bds101Table---sortable","sortButton":"bds101Table-sortButton","sortIcon":"bds101Table-sortIcon","--sort-active":"bds101Table---sort-active","--sort-desc":"bds101Table---sort-desc","tbody":"bds101Table-tbody","tr":"bds101Table-tr","td":"bds101Table-td"};
|
|
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":"bds101Tabs-tabs","tabList":"bds101Tabs-tabList","tab":"bds101Tabs-tab","--active":"bds101Tabs---active","panel":"bds101Tabs-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":"bds101Tooltip-wrapper","tooltip":"bds101Tooltip-tooltip","--placement_top":"bds101Tooltip---placement_top","--placement_bottom":"bds101Tooltip---placement_bottom","--placement_left":"bds101Tooltip---placement_left","--placement_right":"bds101Tooltip---placement_right"};
|
|
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":"bds101Typography-typography","--h1":"bds101Typography---h1","--h2":"bds101Typography---h2","--h3":"bds101Typography---h3","--body":"bds101Typography---body","--body_s":"bds101Typography---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":"bds101Button-button","--default":"bds101Button---default","--ghost":"bds101Button---ghost","--size_small":"bds101Button---size_small","--size_medium":"bds101Button---size_medium","--size_large":"bds101Button---size_large","--hasPulse":"bds101Button---hasPulse","iconStart":"bds101Button-iconStart","iconEnd":"bds101Button-iconEnd"};
|
|
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":"bds101Command-dialog","palette":"bds101Command-palette","searchRow":"bds101Command-searchRow","searchIcon":"bds101Command-searchIcon","search":"bds101Command-search","escHint":"bds101Command-escHint","list":"bds101Command-list","groupList":"bds101Command-groupList","group":"bds101Command-group","item":"bds101Command-item","itemActive":"bds101Command-itemActive","itemLabel":"bds101Command-itemLabel","itemDesc":"bds101Command-itemDesc","shortcut":"bds101Command-shortcut","empty":"bds101Command-empty"};
|
|
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":"bds101Dialog-dialog","dialogContent":"bds101Dialog-dialogContent","closeForm":"bds101Dialog-closeForm","closeButton":"bds101Dialog-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":"bds101Drawer-drawer","panel":"bds101Drawer-panel","--side_right":"bds101Drawer---side_right","--side_left":"bds101Drawer---side_left","header":"bds101Drawer-header","closeButton":"bds101Drawer-closeButton","body":"bds101Drawer-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":"bds101DropdownMenu-wrapper","menu":"bds101DropdownMenu-menu","--placement_bottom-start":"bds101DropdownMenu---placement_bottom-start","--placement_bottom-end":"bds101DropdownMenu---placement_bottom-end","separator":"bds101DropdownMenu-separator","item":"bds101DropdownMenu-item","icon":"bds101DropdownMenu-icon"};
|
|
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":"bds101Popover-wrapper","panel":"bds101Popover-panel","--placement_bottom":"bds101Popover---placement_bottom","--placement_top":"bds101Popover---placement_top","--placement_right":"bds101Popover---placement_right","--placement_left":"bds101Popover---placement_left"};
|
|
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":"bds101Rating-rating","star":"bds101Rating-star","--filled":"bds101Rating---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":"bds101Toast-toastContainer","toast":"bds101Toast-toast","--variant_success":"bds101Toast---variant_success","--variant_warning":"bds101Toast---variant_warning","--variant_info":"bds101Toast---variant_info","--variant_error":"bds101Toast---variant_error","message":"bds101Toast-message","closeButton":"bds101Toast-closeButton"};
|
|
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":"bds101Checkbox-checkboxGroup","inputWrapper":"bds101Checkbox-inputWrapper","checkbox":"bds101Checkbox-checkbox","checkboxError":"bds101Checkbox-checkboxError"};
|
|
1552
1609
|
|
|
1553
1610
|
// src/components/interaction/form/atoms/Message.module.css
|
|
1554
|
-
var Message_default = {"error":"
|
|
1611
|
+
var Message_default = {"error":"bds101Message-error","hint":"bds101Message-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":"bds101Label-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":"bds101InputContainer-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":"bds101CheckboxGroup-group","legend":"bds101CheckboxGroup-legend","required":"bds101CheckboxGroup-required","items":"bds101CheckboxGroup-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":"bds101Combobox-formGroup","inputWrapper":"bds101Combobox-inputWrapper","input":"bds101Combobox-input","inputError":"bds101Combobox-inputError","chevron":"bds101Combobox-chevron","listbox":"bds101Combobox-listbox","option":"bds101Combobox-option","--highlighted":"bds101Combobox---highlighted","--selected":"bds101Combobox---selected","--disabled":"bds101Combobox---disabled"};
|
|
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":"bds101FileInput-formGroup","fieldLabel":"bds101FileInput-fieldLabel","dropZone":"bds101FileInput-dropZone","isDragging":"bds101FileInput-isDragging","hasError":"bds101FileInput-hasError","isDisabled":"bds101FileInput-isDisabled","icon":"bds101FileInput-icon","prompt":"bds101FileInput-prompt","acceptHint":"bds101FileInput-acceptHint","hiddenInput":"bds101FileInput-hiddenInput"};
|
|
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":"bds101FormInput-formGroup","input":"bds101FormInput-input","inputError":"bds101FormInput-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":"bds101NumberInput-formGroup","inputRow":"bds101NumberInput-inputRow","input":"bds101NumberInput-input","inputError":"bds101NumberInput-inputError","stepper":"bds101NumberInput-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;
|
|
@@ -1942,25 +2046,32 @@ function NumberInput({
|
|
|
1942
2046
|
};
|
|
1943
2047
|
const adjust = (delta) => {
|
|
1944
2048
|
const next = clamp(currentValue + delta);
|
|
1945
|
-
if (!isControlled)
|
|
2049
|
+
if (!isControlled) {
|
|
2050
|
+
setInternalValue(next);
|
|
2051
|
+
if (inputRef.current) {
|
|
2052
|
+
inputRef.current.value = String(next);
|
|
2053
|
+
inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
|
|
2054
|
+
}
|
|
2055
|
+
}
|
|
1946
2056
|
onChange?.(next);
|
|
1947
2057
|
};
|
|
1948
|
-
return /* @__PURE__ */
|
|
1949
|
-
/* @__PURE__ */
|
|
1950
|
-
/* @__PURE__ */
|
|
1951
|
-
/* @__PURE__ */
|
|
2058
|
+
return /* @__PURE__ */ jsxs28(InputContainer, { className: cn36(NumberInput_default.formGroup, className), children: [
|
|
2059
|
+
/* @__PURE__ */ jsx39(Label, { id: uid, label }),
|
|
2060
|
+
/* @__PURE__ */ jsxs28("div", { className: NumberInput_default.inputRow, children: [
|
|
2061
|
+
/* @__PURE__ */ jsx39(
|
|
1952
2062
|
"button",
|
|
1953
2063
|
{
|
|
1954
2064
|
type: "button",
|
|
1955
2065
|
className: NumberInput_default.stepper,
|
|
1956
2066
|
"aria-label": "Decrease",
|
|
2067
|
+
"aria-controls": uid,
|
|
1957
2068
|
disabled: disabled || min !== void 0 && currentValue <= min,
|
|
1958
2069
|
onClick: () => adjust(-step),
|
|
1959
2070
|
tabIndex: -1,
|
|
1960
|
-
children: /* @__PURE__ */
|
|
2071
|
+
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
2072
|
}
|
|
1962
2073
|
),
|
|
1963
|
-
/* @__PURE__ */
|
|
2074
|
+
/* @__PURE__ */ jsx39(
|
|
1964
2075
|
"input",
|
|
1965
2076
|
{
|
|
1966
2077
|
ref: inputRef,
|
|
@@ -1974,49 +2085,51 @@ function NumberInput({
|
|
|
1974
2085
|
disabled,
|
|
1975
2086
|
"aria-invalid": !!error,
|
|
1976
2087
|
"aria-describedby": describedBy,
|
|
1977
|
-
className:
|
|
2088
|
+
className: cn36(NumberInput_default.input, error ? NumberInput_default.inputError : void 0),
|
|
1978
2089
|
onChange: (e) => {
|
|
1979
2090
|
const v = parseFloat(e.target.value);
|
|
1980
|
-
|
|
1981
|
-
|
|
2091
|
+
const safe = isNaN(v) ? 0 : v;
|
|
2092
|
+
if (!isControlled) setInternalValue(safe);
|
|
2093
|
+
onChange?.(safe);
|
|
1982
2094
|
}
|
|
1983
2095
|
}
|
|
1984
2096
|
),
|
|
1985
|
-
/* @__PURE__ */
|
|
2097
|
+
/* @__PURE__ */ jsx39(
|
|
1986
2098
|
"button",
|
|
1987
2099
|
{
|
|
1988
2100
|
type: "button",
|
|
1989
2101
|
className: NumberInput_default.stepper,
|
|
1990
2102
|
"aria-label": "Increase",
|
|
2103
|
+
"aria-controls": uid,
|
|
1991
2104
|
disabled: disabled || max !== void 0 && currentValue >= max,
|
|
1992
2105
|
onClick: () => adjust(step),
|
|
1993
2106
|
tabIndex: -1,
|
|
1994
|
-
children: /* @__PURE__ */
|
|
2107
|
+
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
2108
|
}
|
|
1996
2109
|
)
|
|
1997
2110
|
] }),
|
|
1998
|
-
/* @__PURE__ */
|
|
1999
|
-
/* @__PURE__ */
|
|
2111
|
+
/* @__PURE__ */ jsx39(Message, { inputId: uid, type: "error", message: error }),
|
|
2112
|
+
/* @__PURE__ */ jsx39(Message, { inputId: uid, type: "hint", message: hint })
|
|
2000
2113
|
] });
|
|
2001
2114
|
}
|
|
2002
2115
|
|
|
2003
2116
|
// src/components/interaction/form/Radio/Radio.tsx
|
|
2004
|
-
import { useId as
|
|
2117
|
+
import { useId as useId15 } from "react";
|
|
2005
2118
|
|
|
2006
2119
|
// src/components/interaction/form/Radio/Radio.module.css
|
|
2007
|
-
var Radio_default = {"radioGroup":"
|
|
2120
|
+
var Radio_default = {"radioGroup":"bds101Radio-radioGroup","inputWrapper":"bds101Radio-inputWrapper","textWrapper":"bds101Radio-textWrapper","description":"bds101Radio-description","radio":"bds101Radio-radio","radioError":"bds101Radio-radioError"};
|
|
2008
2121
|
|
|
2009
2122
|
// src/components/interaction/form/Radio/Radio.tsx
|
|
2010
|
-
import { cn as
|
|
2011
|
-
import { jsx as
|
|
2123
|
+
import { cn as cn37 } from "@boostdev/design-system-foundation";
|
|
2124
|
+
import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
2012
2125
|
function Radio({ label, name, description, error, hint, className, ...props }) {
|
|
2013
|
-
const id = name +
|
|
2126
|
+
const id = name + useId15();
|
|
2014
2127
|
const hintId = id + "hint";
|
|
2015
2128
|
const errorId = id + "error";
|
|
2016
2129
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2017
|
-
return /* @__PURE__ */
|
|
2018
|
-
/* @__PURE__ */
|
|
2019
|
-
/* @__PURE__ */
|
|
2130
|
+
return /* @__PURE__ */ jsxs29(InputContainer, { className: cn37(Radio_default.radioGroup, className), children: [
|
|
2131
|
+
/* @__PURE__ */ jsxs29("div", { className: Radio_default.inputWrapper, children: [
|
|
2132
|
+
/* @__PURE__ */ jsx40(
|
|
2020
2133
|
"input",
|
|
2021
2134
|
{
|
|
2022
2135
|
"aria-describedby": describedBy,
|
|
@@ -2024,29 +2137,71 @@ function Radio({ label, name, description, error, hint, className, ...props }) {
|
|
|
2024
2137
|
type: "radio",
|
|
2025
2138
|
id,
|
|
2026
2139
|
name,
|
|
2027
|
-
className:
|
|
2140
|
+
className: cn37(Radio_default.radio, error && Radio_default.radioError),
|
|
2028
2141
|
...props
|
|
2029
2142
|
}
|
|
2030
2143
|
),
|
|
2031
|
-
/* @__PURE__ */
|
|
2032
|
-
/* @__PURE__ */
|
|
2033
|
-
description && /* @__PURE__ */
|
|
2144
|
+
/* @__PURE__ */ jsxs29("div", { className: Radio_default.textWrapper, children: [
|
|
2145
|
+
/* @__PURE__ */ jsx40(Label, { id, label }),
|
|
2146
|
+
description && /* @__PURE__ */ jsx40("span", { className: Radio_default.description, children: description })
|
|
2034
2147
|
] })
|
|
2035
2148
|
] }),
|
|
2036
|
-
/* @__PURE__ */
|
|
2037
|
-
/* @__PURE__ */
|
|
2149
|
+
/* @__PURE__ */ jsx40(Message, { inputId: id, type: "error", message: error }),
|
|
2150
|
+
/* @__PURE__ */ jsx40(Message, { inputId: id, type: "hint", message: hint })
|
|
2038
2151
|
] });
|
|
2039
2152
|
}
|
|
2040
2153
|
|
|
2154
|
+
// src/components/interaction/form/RadioGroup/RadioGroup.tsx
|
|
2155
|
+
import { useId as useId16 } from "react";
|
|
2156
|
+
|
|
2157
|
+
// src/components/interaction/form/RadioGroup/RadioGroup.module.css
|
|
2158
|
+
var RadioGroup_default = {"group":"bds101RadioGroup-group","legend":"bds101RadioGroup-legend","required":"bds101RadioGroup-required","items":"bds101RadioGroup-items"};
|
|
2159
|
+
|
|
2160
|
+
// src/components/interaction/form/RadioGroup/RadioGroup.tsx
|
|
2161
|
+
import { cn as cn38 } from "@boostdev/design-system-foundation";
|
|
2162
|
+
import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
2163
|
+
function RadioGroup({
|
|
2164
|
+
legend,
|
|
2165
|
+
children,
|
|
2166
|
+
error,
|
|
2167
|
+
hint,
|
|
2168
|
+
required,
|
|
2169
|
+
disabled,
|
|
2170
|
+
className
|
|
2171
|
+
}) {
|
|
2172
|
+
const id = useId16();
|
|
2173
|
+
const hintId = id + "hint";
|
|
2174
|
+
const errorId = id + "error";
|
|
2175
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2176
|
+
return /* @__PURE__ */ jsxs30(
|
|
2177
|
+
"fieldset",
|
|
2178
|
+
{
|
|
2179
|
+
className: cn38(RadioGroup_default.group, className),
|
|
2180
|
+
disabled,
|
|
2181
|
+
"aria-required": required || void 0,
|
|
2182
|
+
"aria-describedby": describedBy,
|
|
2183
|
+
children: [
|
|
2184
|
+
/* @__PURE__ */ jsxs30("legend", { className: RadioGroup_default.legend, children: [
|
|
2185
|
+
legend,
|
|
2186
|
+
required && /* @__PURE__ */ jsx41("span", { className: RadioGroup_default.required, "aria-hidden": "true", children: " *" })
|
|
2187
|
+
] }),
|
|
2188
|
+
/* @__PURE__ */ jsx41("div", { className: RadioGroup_default.items, children }),
|
|
2189
|
+
/* @__PURE__ */ jsx41(Message, { inputId: id, type: "error", message: error }),
|
|
2190
|
+
/* @__PURE__ */ jsx41(Message, { inputId: id, type: "hint", message: hint })
|
|
2191
|
+
]
|
|
2192
|
+
}
|
|
2193
|
+
);
|
|
2194
|
+
}
|
|
2195
|
+
|
|
2041
2196
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
|
|
2042
|
-
import { useId as
|
|
2197
|
+
import { useId as useId17, useState as useState12 } from "react";
|
|
2043
2198
|
|
|
2044
2199
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.module.css
|
|
2045
|
-
var SegmentedControl_default = {"control":"
|
|
2200
|
+
var SegmentedControl_default = {"control":"bds101SegmentedControl-control","thumb":"bds101SegmentedControl-thumb","item":"bds101SegmentedControl-item","--disabled":"bds101SegmentedControl---disabled","radio":"bds101SegmentedControl-radio","label":"bds101SegmentedControl-label","--size_small":"bds101SegmentedControl---size_small","--size_large":"bds101SegmentedControl---size_large","--active":"bds101SegmentedControl---active"};
|
|
2046
2201
|
|
|
2047
2202
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
|
|
2048
|
-
import { cn as
|
|
2049
|
-
import { jsx as
|
|
2203
|
+
import { cn as cn39 } from "@boostdev/design-system-foundation";
|
|
2204
|
+
import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
2050
2205
|
function SegmentedControl({
|
|
2051
2206
|
name,
|
|
2052
2207
|
options,
|
|
@@ -2056,10 +2211,11 @@ function SegmentedControl({
|
|
|
2056
2211
|
disabled,
|
|
2057
2212
|
size = "medium",
|
|
2058
2213
|
className,
|
|
2214
|
+
"aria-label": ariaLabel,
|
|
2059
2215
|
...rest
|
|
2060
2216
|
}) {
|
|
2061
|
-
const baseId = name +
|
|
2062
|
-
const [internalValue, setInternalValue] =
|
|
2217
|
+
const baseId = name + useId17();
|
|
2218
|
+
const [internalValue, setInternalValue] = useState12(
|
|
2063
2219
|
defaultValue ?? options[0]?.value ?? ""
|
|
2064
2220
|
);
|
|
2065
2221
|
const activeValue = value ?? internalValue;
|
|
@@ -2068,27 +2224,29 @@ function SegmentedControl({
|
|
|
2068
2224
|
if (value === void 0) setInternalValue(optionValue);
|
|
2069
2225
|
onChange?.(optionValue);
|
|
2070
2226
|
};
|
|
2071
|
-
return /* @__PURE__ */
|
|
2227
|
+
return /* @__PURE__ */ jsxs31(
|
|
2072
2228
|
"div",
|
|
2073
2229
|
{
|
|
2074
|
-
|
|
2230
|
+
role: "group",
|
|
2231
|
+
"aria-label": ariaLabel,
|
|
2232
|
+
className: cn39(SegmentedControl_default.control, SegmentedControl_default[`--size_${size}`], className),
|
|
2075
2233
|
style: {
|
|
2076
2234
|
"--control_count": options.length,
|
|
2077
2235
|
"--control_selected-index": Math.max(0, selectedIndex)
|
|
2078
2236
|
},
|
|
2079
2237
|
children: [
|
|
2080
|
-
/* @__PURE__ */
|
|
2238
|
+
/* @__PURE__ */ jsx42("span", { className: SegmentedControl_default.thumb, "aria-hidden": "true" }),
|
|
2081
2239
|
options.map((option, index) => {
|
|
2082
2240
|
const id = `${baseId}-${index}`;
|
|
2083
2241
|
const isChecked = option.value === activeValue;
|
|
2084
2242
|
const isDisabled = disabled || option.disabled;
|
|
2085
|
-
return /* @__PURE__ */
|
|
2243
|
+
return /* @__PURE__ */ jsxs31(
|
|
2086
2244
|
"label",
|
|
2087
2245
|
{
|
|
2088
2246
|
htmlFor: id,
|
|
2089
|
-
className:
|
|
2247
|
+
className: cn39(SegmentedControl_default.item, isChecked && SegmentedControl_default["--active"], isDisabled && SegmentedControl_default["--disabled"]),
|
|
2090
2248
|
children: [
|
|
2091
|
-
/* @__PURE__ */
|
|
2249
|
+
/* @__PURE__ */ jsx42(
|
|
2092
2250
|
"input",
|
|
2093
2251
|
{
|
|
2094
2252
|
...rest,
|
|
@@ -2102,7 +2260,7 @@ function SegmentedControl({
|
|
|
2102
2260
|
onChange: () => handleChange(option.value)
|
|
2103
2261
|
}
|
|
2104
2262
|
),
|
|
2105
|
-
/* @__PURE__ */
|
|
2263
|
+
/* @__PURE__ */ jsx42("span", { className: SegmentedControl_default.label, children: option.label })
|
|
2106
2264
|
]
|
|
2107
2265
|
},
|
|
2108
2266
|
option.value
|
|
@@ -2114,14 +2272,14 @@ function SegmentedControl({
|
|
|
2114
2272
|
}
|
|
2115
2273
|
|
|
2116
2274
|
// src/components/interaction/form/Select/Select.tsx
|
|
2117
|
-
import { useId as
|
|
2275
|
+
import { useId as useId18 } from "react";
|
|
2118
2276
|
|
|
2119
2277
|
// src/components/interaction/form/Select/Select.module.css
|
|
2120
|
-
var Select_default = {"formGroup":"
|
|
2278
|
+
var Select_default = {"formGroup":"bds101Select-formGroup","selectWrapper":"bds101Select-selectWrapper","select":"bds101Select-select","selectError":"bds101Select-selectError","chevron":"bds101Select-chevron"};
|
|
2121
2279
|
|
|
2122
2280
|
// src/components/interaction/form/Select/Select.tsx
|
|
2123
|
-
import { cn as
|
|
2124
|
-
import { jsx as
|
|
2281
|
+
import { cn as cn40 } from "@boostdev/design-system-foundation";
|
|
2282
|
+
import { jsx as jsx43, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
2125
2283
|
function Select({
|
|
2126
2284
|
label,
|
|
2127
2285
|
name,
|
|
@@ -2130,46 +2288,49 @@ function Select({
|
|
|
2130
2288
|
error,
|
|
2131
2289
|
hint,
|
|
2132
2290
|
className,
|
|
2291
|
+
required,
|
|
2133
2292
|
...props
|
|
2134
2293
|
}) {
|
|
2135
|
-
const id = name +
|
|
2294
|
+
const id = name + useId18();
|
|
2136
2295
|
const hintId = id + "hint";
|
|
2137
2296
|
const errorId = id + "error";
|
|
2138
2297
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2139
|
-
return /* @__PURE__ */
|
|
2140
|
-
/* @__PURE__ */
|
|
2141
|
-
/* @__PURE__ */
|
|
2142
|
-
/* @__PURE__ */
|
|
2298
|
+
return /* @__PURE__ */ jsxs32(InputContainer, { className: cn40(Select_default.formGroup, className), children: [
|
|
2299
|
+
/* @__PURE__ */ jsx43(Label, { id, label }),
|
|
2300
|
+
/* @__PURE__ */ jsxs32("div", { className: Select_default.selectWrapper, children: [
|
|
2301
|
+
/* @__PURE__ */ jsxs32(
|
|
2143
2302
|
"select",
|
|
2144
2303
|
{
|
|
2145
2304
|
id,
|
|
2146
2305
|
name,
|
|
2147
2306
|
"aria-invalid": !!error,
|
|
2307
|
+
"aria-required": required || void 0,
|
|
2148
2308
|
"aria-describedby": describedBy,
|
|
2149
|
-
|
|
2309
|
+
required,
|
|
2310
|
+
className: cn40(Select_default.select, error ? Select_default.selectError : void 0),
|
|
2150
2311
|
...props,
|
|
2151
2312
|
children: [
|
|
2152
|
-
placeholder && /* @__PURE__ */
|
|
2153
|
-
options.map(({ value, label: optLabel, disabled }) => /* @__PURE__ */
|
|
2313
|
+
placeholder && /* @__PURE__ */ jsx43("option", { value: "", disabled: true, hidden: true, children: placeholder }),
|
|
2314
|
+
options.map(({ value, label: optLabel, disabled }) => /* @__PURE__ */ jsx43("option", { value, disabled, children: optLabel }, value))
|
|
2154
2315
|
]
|
|
2155
2316
|
}
|
|
2156
2317
|
),
|
|
2157
|
-
/* @__PURE__ */
|
|
2318
|
+
/* @__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
2319
|
] }),
|
|
2159
|
-
/* @__PURE__ */
|
|
2160
|
-
/* @__PURE__ */
|
|
2320
|
+
/* @__PURE__ */ jsx43(Message, { inputId: id, type: "error", message: error }),
|
|
2321
|
+
/* @__PURE__ */ jsx43(Message, { inputId: id, type: "hint", message: hint })
|
|
2161
2322
|
] });
|
|
2162
2323
|
}
|
|
2163
2324
|
|
|
2164
2325
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
2165
|
-
import { useId as
|
|
2326
|
+
import { useId as useId19, useState as useState13 } from "react";
|
|
2166
2327
|
|
|
2167
2328
|
// src/components/interaction/form/Slider/Slider.module.css
|
|
2168
|
-
var Slider_default = {"formGroup":"
|
|
2329
|
+
var Slider_default = {"formGroup":"bds101Slider-formGroup","labelRow":"bds101Slider-labelRow","value":"bds101Slider-value","slider":"bds101Slider-slider","sliderError":"bds101Slider-sliderError"};
|
|
2169
2330
|
|
|
2170
2331
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
2171
|
-
import { cn as
|
|
2172
|
-
import { jsx as
|
|
2332
|
+
import { cn as cn41 } from "@boostdev/design-system-foundation";
|
|
2333
|
+
import { jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
2173
2334
|
function Slider({
|
|
2174
2335
|
label,
|
|
2175
2336
|
name,
|
|
@@ -2182,24 +2343,24 @@ function Slider({
|
|
|
2182
2343
|
onChange,
|
|
2183
2344
|
...props
|
|
2184
2345
|
}) {
|
|
2185
|
-
const id = name +
|
|
2346
|
+
const id = name + useId19();
|
|
2186
2347
|
const hintId = id + "hint";
|
|
2187
2348
|
const errorId = id + "error";
|
|
2188
2349
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2189
2350
|
const isControlled = props.value !== void 0;
|
|
2190
|
-
const [internalValue, setInternalValue] =
|
|
2351
|
+
const [internalValue, setInternalValue] = useState13(Number(props.defaultValue ?? min));
|
|
2191
2352
|
const currentValue = isControlled ? Number(props.value) : internalValue;
|
|
2192
2353
|
const fillPct = (currentValue - min) / (max - min) * 100;
|
|
2193
2354
|
const handleChange = (e) => {
|
|
2194
2355
|
if (!isControlled) setInternalValue(Number(e.target.value));
|
|
2195
2356
|
onChange?.(e);
|
|
2196
2357
|
};
|
|
2197
|
-
return /* @__PURE__ */
|
|
2198
|
-
/* @__PURE__ */
|
|
2199
|
-
/* @__PURE__ */
|
|
2200
|
-
showValue && /* @__PURE__ */
|
|
2358
|
+
return /* @__PURE__ */ jsxs33(InputContainer, { className: cn41(Slider_default.formGroup, className), children: [
|
|
2359
|
+
/* @__PURE__ */ jsxs33("div", { className: Slider_default.labelRow, children: [
|
|
2360
|
+
/* @__PURE__ */ jsx44(Label, { id, label }),
|
|
2361
|
+
showValue && /* @__PURE__ */ jsx44("span", { className: Slider_default.value, children: currentValue })
|
|
2201
2362
|
] }),
|
|
2202
|
-
/* @__PURE__ */
|
|
2363
|
+
/* @__PURE__ */ jsx44(
|
|
2203
2364
|
"input",
|
|
2204
2365
|
{
|
|
2205
2366
|
type: "range",
|
|
@@ -2211,26 +2372,27 @@ function Slider({
|
|
|
2211
2372
|
"aria-valuemin": min,
|
|
2212
2373
|
"aria-valuemax": max,
|
|
2213
2374
|
"aria-valuenow": currentValue,
|
|
2214
|
-
|
|
2375
|
+
"aria-valuetext": String(currentValue),
|
|
2376
|
+
className: cn41(Slider_default.slider, error ? Slider_default.sliderError : void 0),
|
|
2215
2377
|
style: { "--slider_fill": `${fillPct}%` },
|
|
2216
2378
|
onChange: handleChange,
|
|
2217
2379
|
...props
|
|
2218
2380
|
}
|
|
2219
2381
|
),
|
|
2220
|
-
/* @__PURE__ */
|
|
2221
|
-
/* @__PURE__ */
|
|
2382
|
+
/* @__PURE__ */ jsx44(Message, { inputId: id, type: "error", message: error }),
|
|
2383
|
+
/* @__PURE__ */ jsx44(Message, { inputId: id, type: "hint", message: hint })
|
|
2222
2384
|
] });
|
|
2223
2385
|
}
|
|
2224
2386
|
|
|
2225
2387
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2226
|
-
import { useId as
|
|
2388
|
+
import { useId as useId20 } from "react";
|
|
2227
2389
|
|
|
2228
2390
|
// src/components/interaction/form/Switch/Switch.module.css
|
|
2229
|
-
var Switch_default = {"switchGroup":"
|
|
2391
|
+
var Switch_default = {"switchGroup":"bds101Switch-switchGroup","--size_small":"bds101Switch---size_small","--size_medium":"bds101Switch---size_medium","--size_large":"bds101Switch---size_large","inputWrapper":"bds101Switch-inputWrapper","trackWrapper":"bds101Switch-trackWrapper","switch":"bds101Switch-switch","track":"bds101Switch-track","thumb":"bds101Switch-thumb","switchError":"bds101Switch-switchError"};
|
|
2230
2392
|
|
|
2231
2393
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2232
|
-
import { cn as
|
|
2233
|
-
import { jsx as
|
|
2394
|
+
import { cn as cn42 } from "@boostdev/design-system-foundation";
|
|
2395
|
+
import { jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
2234
2396
|
function Switch({
|
|
2235
2397
|
label,
|
|
2236
2398
|
name,
|
|
@@ -2241,15 +2403,15 @@ function Switch({
|
|
|
2241
2403
|
prefix,
|
|
2242
2404
|
...props
|
|
2243
2405
|
}) {
|
|
2244
|
-
const id = name +
|
|
2406
|
+
const id = name + useId20();
|
|
2245
2407
|
const hintId = id + "hint";
|
|
2246
2408
|
const errorId = id + "error";
|
|
2247
2409
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2248
|
-
return /* @__PURE__ */
|
|
2249
|
-
/* @__PURE__ */
|
|
2250
|
-
prefix && /* @__PURE__ */
|
|
2251
|
-
/* @__PURE__ */
|
|
2252
|
-
/* @__PURE__ */
|
|
2410
|
+
return /* @__PURE__ */ jsxs34(InputContainer, { className: cn42(Switch_default.switchGroup, Switch_default[`--size_${size}`], className), children: [
|
|
2411
|
+
/* @__PURE__ */ jsxs34("div", { className: Switch_default.inputWrapper, children: [
|
|
2412
|
+
prefix && /* @__PURE__ */ jsx45("span", { children: prefix }),
|
|
2413
|
+
/* @__PURE__ */ jsxs34("div", { className: Switch_default.trackWrapper, children: [
|
|
2414
|
+
/* @__PURE__ */ jsx45(
|
|
2253
2415
|
"input",
|
|
2254
2416
|
{
|
|
2255
2417
|
type: "checkbox",
|
|
@@ -2257,74 +2419,85 @@ function Switch({
|
|
|
2257
2419
|
id,
|
|
2258
2420
|
name,
|
|
2259
2421
|
"aria-describedby": describedBy,
|
|
2260
|
-
className:
|
|
2422
|
+
className: cn42(Switch_default.switch, error ? Switch_default.switchError : void 0),
|
|
2261
2423
|
...props
|
|
2262
2424
|
}
|
|
2263
2425
|
),
|
|
2264
|
-
/* @__PURE__ */
|
|
2426
|
+
/* @__PURE__ */ jsx45("span", { className: Switch_default.track, "aria-hidden": "true", children: /* @__PURE__ */ jsx45("span", { className: Switch_default.thumb }) })
|
|
2265
2427
|
] }),
|
|
2266
|
-
/* @__PURE__ */
|
|
2428
|
+
/* @__PURE__ */ jsx45(Label, { id, label })
|
|
2267
2429
|
] }),
|
|
2268
|
-
/* @__PURE__ */
|
|
2269
|
-
/* @__PURE__ */
|
|
2430
|
+
/* @__PURE__ */ jsx45(Message, { inputId: id, type: "error", message: error }),
|
|
2431
|
+
/* @__PURE__ */ jsx45(Message, { inputId: id, type: "hint", message: hint })
|
|
2270
2432
|
] });
|
|
2271
2433
|
}
|
|
2272
2434
|
|
|
2273
2435
|
// src/components/interaction/form/Textarea/Textarea.tsx
|
|
2274
|
-
import { useId as
|
|
2436
|
+
import { useId as useId21 } from "react";
|
|
2275
2437
|
|
|
2276
2438
|
// src/components/interaction/form/Textarea/Textarea.module.css
|
|
2277
|
-
var Textarea_default = {"formGroup":"
|
|
2439
|
+
var Textarea_default = {"formGroup":"bds101Textarea-formGroup","textarea":"bds101Textarea-textarea","textareaError":"bds101Textarea-textareaError"};
|
|
2278
2440
|
|
|
2279
2441
|
// src/components/interaction/form/Textarea/Textarea.tsx
|
|
2280
|
-
import { cn as
|
|
2281
|
-
import { jsx as
|
|
2442
|
+
import { cn as cn43 } from "@boostdev/design-system-foundation";
|
|
2443
|
+
import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
2282
2444
|
function Textarea({
|
|
2283
2445
|
label,
|
|
2284
2446
|
name,
|
|
2285
2447
|
error,
|
|
2286
2448
|
hint,
|
|
2287
2449
|
className,
|
|
2450
|
+
required,
|
|
2288
2451
|
...props
|
|
2289
2452
|
}) {
|
|
2290
|
-
const id = name +
|
|
2453
|
+
const id = name + useId21();
|
|
2291
2454
|
const hintId = id + "hint";
|
|
2292
2455
|
const errorId = id + "error";
|
|
2293
2456
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2294
|
-
return /* @__PURE__ */
|
|
2295
|
-
/* @__PURE__ */
|
|
2296
|
-
/* @__PURE__ */
|
|
2457
|
+
return /* @__PURE__ */ jsxs35(InputContainer, { className: cn43(Textarea_default.formGroup, className), children: [
|
|
2458
|
+
/* @__PURE__ */ jsx46(Label, { id, label }),
|
|
2459
|
+
/* @__PURE__ */ jsx46(
|
|
2297
2460
|
"textarea",
|
|
2298
2461
|
{
|
|
2299
2462
|
id,
|
|
2300
2463
|
name,
|
|
2301
2464
|
"aria-invalid": !!error,
|
|
2302
2465
|
"aria-describedby": describedBy,
|
|
2303
|
-
|
|
2466
|
+
"aria-required": required || void 0,
|
|
2467
|
+
required,
|
|
2468
|
+
className: cn43(Textarea_default.textarea, error ? Textarea_default.textareaError : void 0),
|
|
2304
2469
|
...props
|
|
2305
2470
|
}
|
|
2306
2471
|
),
|
|
2307
|
-
/* @__PURE__ */
|
|
2308
|
-
/* @__PURE__ */
|
|
2472
|
+
/* @__PURE__ */ jsx46(Message, { inputId: id, type: "error", message: error }),
|
|
2473
|
+
/* @__PURE__ */ jsx46(Message, { inputId: id, type: "hint", message: hint })
|
|
2309
2474
|
] });
|
|
2310
2475
|
}
|
|
2311
2476
|
|
|
2312
2477
|
// src/components/layout/ButtonGroup/ButtonGroup.module.css
|
|
2313
|
-
var ButtonGroup_default = {"buttonGroup":"
|
|
2478
|
+
var ButtonGroup_default = {"buttonGroup":"bds101ButtonGroup-buttonGroup","container":"bds101ButtonGroup-container","--variant_card":"bds101ButtonGroup---variant_card","--variant_flow":"bds101ButtonGroup---variant_flow","--variant_modal":"bds101ButtonGroup---variant_modal","--variant_content":"bds101ButtonGroup---variant_content","--variant_grid":"bds101ButtonGroup---variant_grid"};
|
|
2314
2479
|
|
|
2315
2480
|
// src/components/layout/ButtonGroup/ButtonGroup.tsx
|
|
2316
|
-
import { cn as
|
|
2317
|
-
import { jsx as
|
|
2318
|
-
function ButtonGroup({ children, className, variant }) {
|
|
2319
|
-
return /* @__PURE__ */
|
|
2481
|
+
import { cn as cn44 } from "@boostdev/design-system-foundation";
|
|
2482
|
+
import { jsx as jsx47 } from "react/jsx-runtime";
|
|
2483
|
+
function ButtonGroup({ children, className, variant, "aria-label": ariaLabel }) {
|
|
2484
|
+
return /* @__PURE__ */ jsx47(
|
|
2485
|
+
"div",
|
|
2486
|
+
{
|
|
2487
|
+
role: "group",
|
|
2488
|
+
"aria-label": ariaLabel,
|
|
2489
|
+
className: cn44(ButtonGroup_default.buttonGroup, className, variant && ButtonGroup_default[`--variant_${variant}`]),
|
|
2490
|
+
children: /* @__PURE__ */ jsx47("div", { className: ButtonGroup_default.container, children })
|
|
2491
|
+
}
|
|
2492
|
+
);
|
|
2320
2493
|
}
|
|
2321
2494
|
|
|
2322
2495
|
// src/components/layout/Card/Card.module.css
|
|
2323
|
-
var Card_default = {"card":"
|
|
2496
|
+
var Card_default = {"card":"bds101Card-card","--default":"bds101Card---default","--elevated":"bds101Card---elevated","--outlined":"bds101Card---outlined","--clickable":"bds101Card---clickable","--padding-none":"bds101Card---padding-none","--padding-small":"bds101Card---padding-small","--padding-medium":"bds101Card---padding-medium","--padding-large":"bds101Card---padding-large","--text-start":"bds101Card---text-start","--text-center":"bds101Card---text-center","--text-end":"bds101Card---text-end"};
|
|
2324
2497
|
|
|
2325
2498
|
// src/components/layout/Card/Card.tsx
|
|
2326
|
-
import { cn as
|
|
2327
|
-
import { jsx as
|
|
2499
|
+
import { cn as cn45 } from "@boostdev/design-system-foundation";
|
|
2500
|
+
import { jsx as jsx48 } from "react/jsx-runtime";
|
|
2328
2501
|
function Card({
|
|
2329
2502
|
children,
|
|
2330
2503
|
className,
|
|
@@ -2335,7 +2508,7 @@ function Card({
|
|
|
2335
2508
|
onClick,
|
|
2336
2509
|
"aria-label": ariaLabel
|
|
2337
2510
|
}) {
|
|
2338
|
-
const classNames =
|
|
2511
|
+
const classNames = cn45(
|
|
2339
2512
|
Card_default.card,
|
|
2340
2513
|
Card_default[`--${variant}`],
|
|
2341
2514
|
Card_default[`--padding-${padding}`],
|
|
@@ -2344,7 +2517,7 @@ function Card({
|
|
|
2344
2517
|
className
|
|
2345
2518
|
);
|
|
2346
2519
|
const Component = onClick ? "button" : "div";
|
|
2347
|
-
return /* @__PURE__ */
|
|
2520
|
+
return /* @__PURE__ */ jsx48(
|
|
2348
2521
|
Component,
|
|
2349
2522
|
{
|
|
2350
2523
|
className: classNames,
|
|
@@ -2358,11 +2531,11 @@ function Card({
|
|
|
2358
2531
|
}
|
|
2359
2532
|
|
|
2360
2533
|
// src/components/layout/SectionHeader/SectionHeader.module.css
|
|
2361
|
-
var SectionHeader_default = {"sectionHeader":"
|
|
2534
|
+
var SectionHeader_default = {"sectionHeader":"bds101SectionHeader-sectionHeader","title":"bds101SectionHeader-title","subtitle":"bds101SectionHeader-subtitle","--start":"bds101SectionHeader---start","--center":"bds101SectionHeader---center","--end":"bds101SectionHeader---end","--small":"bds101SectionHeader---small","--medium":"bds101SectionHeader---medium","--large":"bds101SectionHeader---large"};
|
|
2362
2535
|
|
|
2363
2536
|
// src/components/layout/SectionHeader/SectionHeader.tsx
|
|
2364
|
-
import { cn as
|
|
2365
|
-
import { jsx as
|
|
2537
|
+
import { cn as cn46 } from "@boostdev/design-system-foundation";
|
|
2538
|
+
import { jsx as jsx49, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
2366
2539
|
function SectionHeader({
|
|
2367
2540
|
title,
|
|
2368
2541
|
subtitle,
|
|
@@ -2372,24 +2545,24 @@ function SectionHeader({
|
|
|
2372
2545
|
titleAs = "h2"
|
|
2373
2546
|
}) {
|
|
2374
2547
|
const Title = titleAs;
|
|
2375
|
-
return /* @__PURE__ */
|
|
2376
|
-
/* @__PURE__ */
|
|
2377
|
-
subtitle && /* @__PURE__ */
|
|
2548
|
+
return /* @__PURE__ */ jsxs36("div", { className: cn46(SectionHeader_default.sectionHeader, SectionHeader_default[`--${alignment}`], SectionHeader_default[`--${size}`], className), children: [
|
|
2549
|
+
/* @__PURE__ */ jsx49(Title, { className: SectionHeader_default.title, children: title }),
|
|
2550
|
+
subtitle && /* @__PURE__ */ jsx49("p", { className: SectionHeader_default.subtitle, children: subtitle })
|
|
2378
2551
|
] });
|
|
2379
2552
|
}
|
|
2380
2553
|
|
|
2381
2554
|
// src/components/layout/IconWrapper/IconWrapper.module.css
|
|
2382
|
-
var IconWrapper_default = {"wrapper":"
|
|
2555
|
+
var IconWrapper_default = {"wrapper":"bds101IconWrapper-wrapper"};
|
|
2383
2556
|
|
|
2384
2557
|
// src/components/layout/IconWrapper/IconWrapper.tsx
|
|
2385
|
-
import { cn as
|
|
2386
|
-
import { jsx as
|
|
2387
|
-
function IconWrapper({ children, className }) {
|
|
2388
|
-
return /* @__PURE__ */
|
|
2558
|
+
import { cn as cn47 } from "@boostdev/design-system-foundation";
|
|
2559
|
+
import { jsx as jsx50 } from "react/jsx-runtime";
|
|
2560
|
+
function IconWrapper({ children, className, "aria-hidden": ariaHidden }) {
|
|
2561
|
+
return /* @__PURE__ */ jsx50("div", { className: cn47(className, IconWrapper_default.wrapper), "aria-hidden": ariaHidden, children });
|
|
2389
2562
|
}
|
|
2390
2563
|
|
|
2391
2564
|
// src/index.ts
|
|
2392
|
-
import { cn as
|
|
2565
|
+
import { cn as cn48 } from "@boostdev/design-system-foundation";
|
|
2393
2566
|
export {
|
|
2394
2567
|
Accordion,
|
|
2395
2568
|
Alert,
|
|
@@ -2402,6 +2575,7 @@ export {
|
|
|
2402
2575
|
Card,
|
|
2403
2576
|
Carousel,
|
|
2404
2577
|
Checkbox,
|
|
2578
|
+
CheckboxGroup,
|
|
2405
2579
|
Collapsible,
|
|
2406
2580
|
Combobox,
|
|
2407
2581
|
Command,
|
|
@@ -2421,6 +2595,7 @@ export {
|
|
|
2421
2595
|
Progress,
|
|
2422
2596
|
ProgressCircle,
|
|
2423
2597
|
Radio,
|
|
2598
|
+
RadioGroup,
|
|
2424
2599
|
Rating,
|
|
2425
2600
|
SectionHeader,
|
|
2426
2601
|
SegmentedControl,
|
|
@@ -2436,6 +2611,6 @@ export {
|
|
|
2436
2611
|
ToastProvider,
|
|
2437
2612
|
Tooltip,
|
|
2438
2613
|
Typography,
|
|
2439
|
-
|
|
2614
|
+
cn48 as cn,
|
|
2440
2615
|
useToast
|
|
2441
2616
|
};
|