@boostdev/design-system-components 0.1.4 → 0.1.5
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/dist/client.cjs +185 -104
- package/dist/client.css +435 -411
- package/dist/client.d.cts +15 -13
- package/dist/client.d.ts +15 -13
- package/dist/client.js +189 -107
- package/dist/index.cjs +185 -104
- package/dist/index.css +435 -411
- package/dist/index.d.cts +15 -13
- package/dist/index.d.ts +15 -13
- package/dist/index.js +189 -107
- package/package.json +1 -1
- package/src/components/interaction/Button/Button.tsx +35 -8
- package/src/components/interaction/Dialog/Dialog.spec.tsx +10 -10
- package/src/components/interaction/Dialog/Dialog.tsx +21 -7
- package/src/components/interaction/DropdownMenu/DropdownMenu.tsx +1 -1
- package/src/components/interaction/DropdownMenu/index.ts +1 -0
- package/src/components/interaction/Toast/Toast.module.css +28 -0
- package/src/components/interaction/Toast/Toast.tsx +10 -1
- package/src/components/interaction/form/Checkbox/Checkbox.module.css +1 -1
- package/src/components/interaction/form/Checkbox/Checkbox.tsx +2 -1
- package/src/components/interaction/form/Combobox/Combobox.tsx +11 -3
- package/src/components/interaction/form/Combobox/index.ts +1 -0
- package/src/components/interaction/form/FileInput/FileInput.tsx +15 -2
- package/src/components/interaction/form/FormInput/FormInput.tsx +4 -3
- package/src/components/interaction/form/NumberInput/NumberInput.tsx +21 -17
- package/src/components/interaction/form/Radio/Radio.module.css +1 -1
- package/src/components/interaction/form/Radio/Radio.tsx +2 -1
- package/src/components/interaction/form/Select/Select.spec.tsx +2 -1
- package/src/components/interaction/form/Select/Select.tsx +3 -3
- package/src/components/interaction/form/Select/index.ts +1 -0
- package/src/components/interaction/form/Slider/Slider.tsx +5 -4
- package/src/components/interaction/form/Switch/Switch.tsx +1 -1
- package/src/components/interaction/form/Textarea/Textarea.tsx +1 -1
- package/src/components/interaction/form/atoms/Message.tsx +2 -2
- package/src/components/layout/ButtonGroup/ButtonGroup.tsx +1 -1
- package/src/components/layout/Card/Card.tsx +3 -0
- package/src/components/layout/SectionHeader/SectionHeader.tsx +2 -3
- package/src/components/ui/Accordion/Accordion.tsx +1 -1
- package/src/components/ui/Accordion/index.ts +1 -0
- package/src/components/ui/Breadcrumb/Breadcrumb.tsx +2 -2
- package/src/components/ui/Breadcrumb/index.ts +1 -0
- package/src/components/ui/Calendar/Calendar.tsx +8 -3
- package/src/components/ui/DescriptionList/DescriptionList.tsx +1 -1
- package/src/components/ui/DescriptionList/index.ts +1 -0
- package/src/components/ui/Link/Link.tsx +3 -1
- package/src/components/ui/Separator/Separator.module.css +1 -1
- package/src/components/ui/Table/Table.tsx +1 -1
- package/src/components/ui/Table/index.ts +1 -0
- package/src/components/ui/Tabs/Tabs.tsx +1 -1
- package/src/components/ui/Tabs/index.ts +1 -0
- package/src/index.ts +8 -0
package/dist/client.cjs
CHANGED
|
@@ -73,7 +73,7 @@ module.exports = __toCommonJS(client_exports);
|
|
|
73
73
|
var import_react = require("react");
|
|
74
74
|
|
|
75
75
|
// src/components/ui/Accordion/Accordion.module.css
|
|
76
|
-
var Accordion_default = {"accordion":"
|
|
76
|
+
var Accordion_default = {"accordion":"bds015-accordion","item":"bds015-item","heading":"bds015-heading","trigger":"bds015-trigger","triggerLabel":"bds015-triggerLabel","chevron":"bds015-chevron","--open":"bds015---open","panel":"bds015-panel","panelContent":"bds015-panelContent"};
|
|
77
77
|
|
|
78
78
|
// src/components/ui/Accordion/Accordion.tsx
|
|
79
79
|
var import_design_system_foundation = require("@boostdev/design-system-foundation");
|
|
@@ -141,7 +141,7 @@ function Accordion({
|
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
// src/components/ui/Alert/Alert.module.css
|
|
144
|
-
var Alert_default = {"alert":"
|
|
144
|
+
var Alert_default = {"alert":"bds015-alert","--variant_info":"bds015---variant_info","--variant_success":"bds015---variant_success","--variant_warning":"bds015---variant_warning","--variant_error":"bds015---variant_error","icon":"bds015-icon","content":"bds015-content","title":"bds015-title","dismiss":"bds015-dismiss"};
|
|
145
145
|
|
|
146
146
|
// src/components/ui/Alert/Alert.tsx
|
|
147
147
|
var import_design_system_foundation2 = require("@boostdev/design-system-foundation");
|
|
@@ -184,7 +184,7 @@ function Alert({
|
|
|
184
184
|
}
|
|
185
185
|
|
|
186
186
|
// src/components/ui/Avatar/Avatar.module.css
|
|
187
|
-
var Avatar_default = {"avatar":"
|
|
187
|
+
var Avatar_default = {"avatar":"bds015-avatar","--fallback":"bds015---fallback","--size_small":"bds015---size_small","--size_medium":"bds015---size_medium","--size_large":"bds015---size_large","image":"bds015-image","initials":"bds015-initials"};
|
|
188
188
|
|
|
189
189
|
// src/components/ui/Avatar/Avatar.tsx
|
|
190
190
|
var import_design_system_foundation3 = require("@boostdev/design-system-foundation");
|
|
@@ -210,7 +210,7 @@ function Avatar({ src, alt, name, size = "medium", className }) {
|
|
|
210
210
|
}
|
|
211
211
|
|
|
212
212
|
// src/components/ui/Badge/Badge.module.css
|
|
213
|
-
var Badge_default = {"badge":"
|
|
213
|
+
var Badge_default = {"badge":"bds015-badge","--variant_primary":"bds015---variant_primary","--variant_secondary":"bds015---variant_secondary","--variant_success":"bds015---variant_success","--variant_error":"bds015---variant_error","--variant_warning":"bds015---variant_warning"};
|
|
214
214
|
|
|
215
215
|
// src/components/ui/Badge/Badge.tsx
|
|
216
216
|
var import_design_system_foundation4 = require("@boostdev/design-system-foundation");
|
|
@@ -220,7 +220,7 @@ function Badge({ children, variant = "primary", className }) {
|
|
|
220
220
|
}
|
|
221
221
|
|
|
222
222
|
// src/components/ui/Breadcrumb/Breadcrumb.module.css
|
|
223
|
-
var Breadcrumb_default = {"breadcrumb":"
|
|
223
|
+
var Breadcrumb_default = {"breadcrumb":"bds015-breadcrumb","list":"bds015-list","item":"bds015-item","link":"bds015-link","separator":"bds015-separator","current":"bds015-current"};
|
|
224
224
|
|
|
225
225
|
// src/components/ui/Breadcrumb/Breadcrumb.tsx
|
|
226
226
|
var import_design_system_foundation5 = require("@boostdev/design-system-foundation");
|
|
@@ -231,7 +231,7 @@ function Breadcrumb({ items, className }) {
|
|
|
231
231
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { className: Breadcrumb_default.item, children: isLast ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "aria-current": "page", className: Breadcrumb_default.current, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
232
232
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: item.href, className: Breadcrumb_default.link, children: item.label }),
|
|
233
233
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: Breadcrumb_default.separator, "aria-hidden": "true", children: "\u203A" })
|
|
234
|
-
] }) },
|
|
234
|
+
] }) }, index);
|
|
235
235
|
}) }) });
|
|
236
236
|
}
|
|
237
237
|
|
|
@@ -239,7 +239,7 @@ function Breadcrumb({ items, className }) {
|
|
|
239
239
|
var import_react2 = require("react");
|
|
240
240
|
|
|
241
241
|
// src/components/ui/Calendar/Calendar.module.css
|
|
242
|
-
var Calendar_default = {"calendar":"
|
|
242
|
+
var Calendar_default = {"calendar":"bds015-calendar","header":"bds015-header","monthYear":"bds015-monthYear","navBtn":"bds015-navBtn","grid":"bds015-grid","weekday":"bds015-weekday","empty":"bds015-empty","day":"bds015-day","disabled":"bds015-disabled","selected":"bds015-selected","today":"bds015-today"};
|
|
243
243
|
|
|
244
244
|
// src/components/ui/Calendar/Calendar.tsx
|
|
245
245
|
var import_design_system_foundation6 = require("@boostdev/design-system-foundation");
|
|
@@ -262,10 +262,13 @@ var MONTHS = [
|
|
|
262
262
|
function isSameDay(a, b) {
|
|
263
263
|
return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
|
|
264
264
|
}
|
|
265
|
+
function toMidnight(date) {
|
|
266
|
+
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
267
|
+
}
|
|
265
268
|
function isOutOfRange(date, min, max) {
|
|
266
|
-
|
|
267
|
-
if (
|
|
268
|
-
return
|
|
269
|
+
const d = toMidnight(date);
|
|
270
|
+
if (min && d < toMidnight(min)) return true;
|
|
271
|
+
return !!(max && d > toMidnight(max));
|
|
269
272
|
}
|
|
270
273
|
function getDaysInMonth(year, month) {
|
|
271
274
|
return new Date(year, month + 1, 0).getDate();
|
|
@@ -402,7 +405,7 @@ function Calendar({ value, defaultValue, min, max, onChange, className }) {
|
|
|
402
405
|
var import_react3 = require("react");
|
|
403
406
|
|
|
404
407
|
// src/components/ui/Carousel/Carousel.module.css
|
|
405
|
-
var Carousel_default = {"carousel":"
|
|
408
|
+
var Carousel_default = {"carousel":"bds015-carousel","track":"bds015-track","slide":"bds015-slide","navBtn":"bds015-navBtn"};
|
|
406
409
|
|
|
407
410
|
// src/components/ui/Carousel/Carousel.tsx
|
|
408
411
|
var import_design_system_foundation7 = require("@boostdev/design-system-foundation");
|
|
@@ -455,7 +458,7 @@ function Carousel({ items, label, className }) {
|
|
|
455
458
|
}
|
|
456
459
|
|
|
457
460
|
// src/components/ui/DescriptionList/DescriptionList.module.css
|
|
458
|
-
var DescriptionList_default = {"list":"
|
|
461
|
+
var DescriptionList_default = {"list":"bds015-list","group":"bds015-group","term":"bds015-term","details":"bds015-details","--layout_inline":"bds015---layout_inline"};
|
|
459
462
|
|
|
460
463
|
// src/components/ui/DescriptionList/DescriptionList.tsx
|
|
461
464
|
var import_design_system_foundation8 = require("@boostdev/design-system-foundation");
|
|
@@ -468,7 +471,7 @@ function DescriptionList({ items, layout = "stacked", className }) {
|
|
|
468
471
|
}
|
|
469
472
|
|
|
470
473
|
// src/components/ui/Link/Link.module.css
|
|
471
|
-
var Link_default = {"link":"
|
|
474
|
+
var Link_default = {"link":"bds015-link","--variant_default":"bds015---variant_default","--variant_subtle":"bds015---variant_subtle","--variant_standalone":"bds015---variant_standalone","externalLabel":"bds015-externalLabel"};
|
|
472
475
|
|
|
473
476
|
// src/components/ui/Link/Link.tsx
|
|
474
477
|
var import_design_system_foundation9 = require("@boostdev/design-system-foundation");
|
|
@@ -478,6 +481,7 @@ function Link({
|
|
|
478
481
|
children,
|
|
479
482
|
variant = "default",
|
|
480
483
|
external = false,
|
|
484
|
+
externalLabel = "(opens in new tab)",
|
|
481
485
|
className,
|
|
482
486
|
...props
|
|
483
487
|
}) {
|
|
@@ -491,14 +495,14 @@ function Link({
|
|
|
491
495
|
...props,
|
|
492
496
|
children: [
|
|
493
497
|
children,
|
|
494
|
-
external && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: Link_default.externalLabel, children:
|
|
498
|
+
external && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: Link_default.externalLabel, children: externalLabel })
|
|
495
499
|
]
|
|
496
500
|
}
|
|
497
501
|
);
|
|
498
502
|
}
|
|
499
503
|
|
|
500
504
|
// src/components/ui/Loading/Loading.module.css
|
|
501
|
-
var Loading_default = {"loading":"
|
|
505
|
+
var Loading_default = {"loading":"bds015-loading","spinner":"bds015-spinner","--size_small":"bds015---size_small","--size_large":"bds015---size_large"};
|
|
502
506
|
|
|
503
507
|
// src/components/ui/Loading/Loading.tsx
|
|
504
508
|
var import_design_system_foundation10 = require("@boostdev/design-system-foundation");
|
|
@@ -508,7 +512,7 @@ function Loading({ size = "medium", className }) {
|
|
|
508
512
|
}
|
|
509
513
|
|
|
510
514
|
// src/components/ui/NotificationBanner/NotificationBanner.module.css
|
|
511
|
-
var NotificationBanner_default = {"banner":"
|
|
515
|
+
var NotificationBanner_default = {"banner":"bds015-banner","--variant_info":"bds015---variant_info","--variant_success":"bds015---variant_success","--variant_warning":"bds015---variant_warning","--variant_error":"bds015---variant_error","content":"bds015-content","action":"bds015-action","dismiss":"bds015-dismiss"};
|
|
512
516
|
|
|
513
517
|
// src/components/ui/NotificationBanner/NotificationBanner.tsx
|
|
514
518
|
var import_design_system_foundation11 = require("@boostdev/design-system-foundation");
|
|
@@ -547,7 +551,7 @@ function NotificationBanner({
|
|
|
547
551
|
}
|
|
548
552
|
|
|
549
553
|
// src/components/ui/Pagination/Pagination.module.css
|
|
550
|
-
var Pagination_default = {"pagination":"
|
|
554
|
+
var Pagination_default = {"pagination":"bds015-pagination","list":"bds015-list","button":"bds015-button","--active":"bds015---active","--nav":"bds015---nav","ellipsis":"bds015-ellipsis"};
|
|
551
555
|
|
|
552
556
|
// src/components/ui/Pagination/Pagination.tsx
|
|
553
557
|
var import_design_system_foundation12 = require("@boostdev/design-system-foundation");
|
|
@@ -611,7 +615,7 @@ function Pagination({
|
|
|
611
615
|
}
|
|
612
616
|
|
|
613
617
|
// src/components/ui/Progress/Progress.module.css
|
|
614
|
-
var Progress_default = {"container":"
|
|
618
|
+
var Progress_default = {"container":"bds015-container","labelRow":"bds015-labelRow","label":"bds015-label","value":"bds015-value","track":"bds015-track","--size_small":"bds015---size_small","--size_medium":"bds015---size_medium","--size_large":"bds015---size_large","fill":"bds015-fill"};
|
|
615
619
|
|
|
616
620
|
// src/components/ui/Progress/Progress.tsx
|
|
617
621
|
var import_design_system_foundation13 = require("@boostdev/design-system-foundation");
|
|
@@ -649,7 +653,7 @@ function Progress({
|
|
|
649
653
|
}
|
|
650
654
|
|
|
651
655
|
// src/components/ui/ProgressCircle/ProgressCircle.module.css
|
|
652
|
-
var ProgressCircle_default = {"wrapper":"
|
|
656
|
+
var ProgressCircle_default = {"wrapper":"bds015-wrapper","svg":"bds015-svg","track":"bds015-track","fill":"bds015-fill","value":"bds015-value","--size_small":"bds015---size_small","--size_medium":"bds015---size_medium","--size_large":"bds015---size_large"};
|
|
653
657
|
|
|
654
658
|
// src/components/ui/ProgressCircle/ProgressCircle.tsx
|
|
655
659
|
var import_design_system_foundation14 = require("@boostdev/design-system-foundation");
|
|
@@ -728,7 +732,7 @@ function ProgressCircle({
|
|
|
728
732
|
}
|
|
729
733
|
|
|
730
734
|
// src/components/ui/Separator/Separator.module.css
|
|
731
|
-
var Separator_default = {"separator":"
|
|
735
|
+
var Separator_default = {"separator":"bds015-separator","--horizontal":"bds015---horizontal","--vertical":"bds015---vertical"};
|
|
732
736
|
|
|
733
737
|
// src/components/ui/Separator/Separator.tsx
|
|
734
738
|
var import_design_system_foundation15 = require("@boostdev/design-system-foundation");
|
|
@@ -751,7 +755,7 @@ function Separator({ orientation = "horizontal", className }) {
|
|
|
751
755
|
var import_design_system_foundation16 = require("@boostdev/design-system-foundation");
|
|
752
756
|
|
|
753
757
|
// src/components/ui/Skeleton/Skeleton.module.css
|
|
754
|
-
var Skeleton_default = {"skeleton":"
|
|
758
|
+
var Skeleton_default = {"skeleton":"bds015-skeleton"};
|
|
755
759
|
|
|
756
760
|
// src/components/ui/Skeleton/Skeleton.tsx
|
|
757
761
|
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
@@ -760,7 +764,7 @@ function Skeleton({ className }) {
|
|
|
760
764
|
}
|
|
761
765
|
|
|
762
766
|
// src/components/ui/SkipLink/SkipLink.module.css
|
|
763
|
-
var SkipLink_default = {"skipLink":"
|
|
767
|
+
var SkipLink_default = {"skipLink":"bds015-skipLink"};
|
|
764
768
|
|
|
765
769
|
// src/components/ui/SkipLink/SkipLink.tsx
|
|
766
770
|
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
@@ -769,7 +773,7 @@ function SkipLink({ href = "#main", children = "Skip to main content" }) {
|
|
|
769
773
|
}
|
|
770
774
|
|
|
771
775
|
// src/components/ui/Table/Table.module.css
|
|
772
|
-
var Table_default = {"wrapper":"
|
|
776
|
+
var Table_default = {"wrapper":"bds015-wrapper","table":"bds015-table","caption":"bds015-caption","thead":"bds015-thead","th":"bds015-th","--sortable":"bds015---sortable","sortButton":"bds015-sortButton","sortIcon":"bds015-sortIcon","--sort-active":"bds015---sort-active","--sort-desc":"bds015---sort-desc","tbody":"bds015-tbody","tr":"bds015-tr","td":"bds015-td"};
|
|
773
777
|
|
|
774
778
|
// src/components/ui/Table/Table.tsx
|
|
775
779
|
var import_design_system_foundation17 = require("@boostdev/design-system-foundation");
|
|
@@ -838,7 +842,7 @@ function Table({
|
|
|
838
842
|
var import_react4 = require("react");
|
|
839
843
|
|
|
840
844
|
// src/components/ui/Tabs/Tabs.module.css
|
|
841
|
-
var Tabs_default = {"tabs":"
|
|
845
|
+
var Tabs_default = {"tabs":"bds015-tabs","tabList":"bds015-tabList","tab":"bds015-tab","--active":"bds015---active","panel":"bds015-panel"};
|
|
842
846
|
|
|
843
847
|
// src/components/ui/Tabs/Tabs.tsx
|
|
844
848
|
var import_design_system_foundation18 = require("@boostdev/design-system-foundation");
|
|
@@ -919,7 +923,7 @@ function Tabs({ tabs, defaultTab, className }) {
|
|
|
919
923
|
var import_react5 = require("react");
|
|
920
924
|
|
|
921
925
|
// src/components/ui/Tooltip/Tooltip.module.css
|
|
922
|
-
var Tooltip_default = {"wrapper":"
|
|
926
|
+
var Tooltip_default = {"wrapper":"bds015-wrapper","tooltip":"bds015-tooltip","--placement_top":"bds015---placement_top","--placement_bottom":"bds015---placement_bottom","--placement_left":"bds015---placement_left","--placement_right":"bds015---placement_right"};
|
|
923
927
|
|
|
924
928
|
// src/components/ui/Tooltip/Tooltip.tsx
|
|
925
929
|
var import_design_system_foundation19 = require("@boostdev/design-system-foundation");
|
|
@@ -949,7 +953,7 @@ function Tooltip({
|
|
|
949
953
|
}
|
|
950
954
|
|
|
951
955
|
// src/components/ui/Typography/Typography.module.css
|
|
952
|
-
var Typography_default = {"typography":"
|
|
956
|
+
var Typography_default = {"typography":"bds015-typography","--h1":"bds015---h1","--h2":"bds015---h2","--h3":"bds015---h3","--body":"bds015---body","--body_s":"bds015---body_s"};
|
|
953
957
|
|
|
954
958
|
// src/components/ui/Typography/Typography.tsx
|
|
955
959
|
var import_design_system_foundation20 = require("@boostdev/design-system-foundation");
|
|
@@ -967,14 +971,14 @@ function Typography({ variant = "body", component, children, className }) {
|
|
|
967
971
|
}
|
|
968
972
|
|
|
969
973
|
// src/components/interaction/Button/Button.module.css
|
|
970
|
-
var Button_default = {"button":"
|
|
974
|
+
var Button_default = {"button":"bds015-button","--primary":"bds015---primary","--secondary":"bds015---secondary","--size_small":"bds015---size_small","--size_medium":"bds015---size_medium","--size_large":"bds015---size_large","--hasPulse":"bds015---hasPulse","prefix":"bds015-prefix","suffix":"bds015-suffix"};
|
|
971
975
|
|
|
972
976
|
// src/components/interaction/Button/Button.tsx
|
|
973
977
|
var import_design_system_foundation21 = require("@boostdev/design-system-foundation");
|
|
974
978
|
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
975
979
|
function Button({
|
|
976
980
|
children,
|
|
977
|
-
className
|
|
981
|
+
className,
|
|
978
982
|
variant = "primary",
|
|
979
983
|
type = "button",
|
|
980
984
|
iconStart,
|
|
@@ -995,22 +999,55 @@ function Button({
|
|
|
995
999
|
hasPulse && Button_default["--hasPulse"],
|
|
996
1000
|
className
|
|
997
1001
|
);
|
|
998
|
-
const
|
|
999
|
-
|
|
1002
|
+
const handleAnchorClick = (e) => {
|
|
1003
|
+
if (disabled) {
|
|
1004
|
+
e.preventDefault();
|
|
1005
|
+
return;
|
|
1006
|
+
}
|
|
1007
|
+
onClick?.(e);
|
|
1008
|
+
};
|
|
1009
|
+
const handleButtonClick = (e) => {
|
|
1010
|
+
onClick?.(e);
|
|
1011
|
+
};
|
|
1012
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
1013
|
+
Boolean(iconStart) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: Button_default.prefix, children: iconStart }),
|
|
1000
1014
|
children,
|
|
1001
|
-
|
|
1015
|
+
Boolean(iconEnd) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: Button_default.suffix, children: iconEnd })
|
|
1002
1016
|
] });
|
|
1003
1017
|
if (href) {
|
|
1004
|
-
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1018
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1019
|
+
"a",
|
|
1020
|
+
{
|
|
1021
|
+
className: classNames,
|
|
1022
|
+
href: disabled ? void 0 : href,
|
|
1023
|
+
target,
|
|
1024
|
+
rel,
|
|
1025
|
+
"aria-disabled": disabled,
|
|
1026
|
+
tabIndex: disabled ? -1 : void 0,
|
|
1027
|
+
onClick: handleAnchorClick,
|
|
1028
|
+
...rest,
|
|
1029
|
+
children: content
|
|
1030
|
+
}
|
|
1031
|
+
);
|
|
1005
1032
|
}
|
|
1006
|
-
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1033
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1034
|
+
"button",
|
|
1035
|
+
{
|
|
1036
|
+
type,
|
|
1037
|
+
className: classNames,
|
|
1038
|
+
disabled,
|
|
1039
|
+
onClick: handleButtonClick,
|
|
1040
|
+
...rest,
|
|
1041
|
+
children: content
|
|
1042
|
+
}
|
|
1043
|
+
);
|
|
1007
1044
|
}
|
|
1008
1045
|
|
|
1009
1046
|
// src/components/interaction/Command/Command.tsx
|
|
1010
1047
|
var import_react6 = require("react");
|
|
1011
1048
|
|
|
1012
1049
|
// src/components/interaction/Command/Command.module.css
|
|
1013
|
-
var Command_default = {"dialog":"
|
|
1050
|
+
var Command_default = {"dialog":"bds015-dialog","palette":"bds015-palette","searchRow":"bds015-searchRow","searchIcon":"bds015-searchIcon","search":"bds015-search","escHint":"bds015-escHint","list":"bds015-list","groupList":"bds015-groupList","group":"bds015-group","item":"bds015-item","itemActive":"bds015-itemActive","itemLabel":"bds015-itemLabel","itemDesc":"bds015-itemDesc","shortcut":"bds015-shortcut","empty":"bds015-empty"};
|
|
1014
1051
|
|
|
1015
1052
|
// src/components/interaction/Command/Command.tsx
|
|
1016
1053
|
var import_design_system_foundation22 = require("@boostdev/design-system-foundation");
|
|
@@ -1149,42 +1186,58 @@ function Command({
|
|
|
1149
1186
|
var import_react7 = require("react");
|
|
1150
1187
|
|
|
1151
1188
|
// src/components/interaction/Dialog/Dialog.module.css
|
|
1152
|
-
var Dialog_default = {"dialog":"
|
|
1189
|
+
var Dialog_default = {"dialog":"bds015-dialog","closeForm":"bds015-closeForm","closeButton":"bds015-closeButton"};
|
|
1153
1190
|
|
|
1154
1191
|
// src/components/interaction/Dialog/Dialog.tsx
|
|
1155
1192
|
var import_design_system_foundation23 = require("@boostdev/design-system-foundation");
|
|
1156
1193
|
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1157
|
-
function Dialog({ children,
|
|
1194
|
+
function Dialog({ children, isOpen = false, className, onClose }) {
|
|
1158
1195
|
const dialogRef = (0, import_react7.useRef)(null);
|
|
1159
1196
|
(0, import_react7.useEffect)(() => {
|
|
1160
1197
|
const dialog = dialogRef.current;
|
|
1161
1198
|
if (!dialog) return;
|
|
1162
|
-
if (
|
|
1199
|
+
if (isOpen) {
|
|
1163
1200
|
dialog.showModal();
|
|
1164
1201
|
} else if (dialog.open) {
|
|
1165
1202
|
dialog.close();
|
|
1166
1203
|
}
|
|
1167
|
-
}, [
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1204
|
+
}, [isOpen]);
|
|
1205
|
+
const handleBackdropClick = (e) => {
|
|
1206
|
+
if (e.target === dialogRef.current) onClose?.();
|
|
1207
|
+
};
|
|
1208
|
+
const handleCancel = (e) => {
|
|
1209
|
+
e.preventDefault();
|
|
1210
|
+
onClose?.();
|
|
1211
|
+
};
|
|
1212
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1213
|
+
"dialog",
|
|
1214
|
+
{
|
|
1215
|
+
ref: dialogRef,
|
|
1216
|
+
className: (0, import_design_system_foundation23.cn)(className, Dialog_default.dialog),
|
|
1217
|
+
onClick: handleBackdropClick,
|
|
1218
|
+
onCancel: handleCancel,
|
|
1219
|
+
children: [
|
|
1220
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("form", { method: "dialog", className: Dialog_default.closeForm, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1221
|
+
"button",
|
|
1222
|
+
{
|
|
1223
|
+
type: "submit",
|
|
1224
|
+
className: Dialog_default.closeButton,
|
|
1225
|
+
onClick: onClose,
|
|
1226
|
+
"aria-label": "Close dialog",
|
|
1227
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
|
|
1228
|
+
}
|
|
1229
|
+
) }),
|
|
1230
|
+
children
|
|
1231
|
+
]
|
|
1232
|
+
}
|
|
1233
|
+
);
|
|
1181
1234
|
}
|
|
1182
1235
|
|
|
1183
1236
|
// src/components/interaction/Drawer/Drawer.tsx
|
|
1184
1237
|
var import_react8 = require("react");
|
|
1185
1238
|
|
|
1186
1239
|
// src/components/interaction/Drawer/Drawer.module.css
|
|
1187
|
-
var Drawer_default = {"drawer":"
|
|
1240
|
+
var Drawer_default = {"drawer":"bds015-drawer","panel":"bds015-panel","--side_right":"bds015---side_right","--side_left":"bds015---side_left","header":"bds015-header","title":"bds015-title","closeButton":"bds015-closeButton","body":"bds015-body"};
|
|
1188
1241
|
|
|
1189
1242
|
// src/components/interaction/Drawer/Drawer.tsx
|
|
1190
1243
|
var import_design_system_foundation24 = require("@boostdev/design-system-foundation");
|
|
@@ -1246,7 +1299,7 @@ function Drawer({
|
|
|
1246
1299
|
var import_react9 = require("react");
|
|
1247
1300
|
|
|
1248
1301
|
// src/components/interaction/DropdownMenu/DropdownMenu.module.css
|
|
1249
|
-
var DropdownMenu_default = {"wrapper":"
|
|
1302
|
+
var DropdownMenu_default = {"wrapper":"bds015-wrapper","menu":"bds015-menu","--placement_bottom-start":"bds015---placement_bottom-start","--placement_bottom-end":"bds015---placement_bottom-end","separator":"bds015-separator","item":"bds015-item","icon":"bds015-icon"};
|
|
1250
1303
|
|
|
1251
1304
|
// src/components/interaction/DropdownMenu/DropdownMenu.tsx
|
|
1252
1305
|
var import_design_system_foundation25 = require("@boostdev/design-system-foundation");
|
|
@@ -1359,7 +1412,7 @@ function DropdownMenu({
|
|
|
1359
1412
|
var import_react10 = require("react");
|
|
1360
1413
|
|
|
1361
1414
|
// src/components/interaction/Popover/Popover.module.css
|
|
1362
|
-
var Popover_default = {"wrapper":"
|
|
1415
|
+
var Popover_default = {"wrapper":"bds015-wrapper","panel":"bds015-panel","--placement_bottom":"bds015---placement_bottom","--placement_top":"bds015---placement_top","--placement_right":"bds015---placement_right","--placement_left":"bds015---placement_left"};
|
|
1363
1416
|
|
|
1364
1417
|
// src/components/interaction/Popover/Popover.tsx
|
|
1365
1418
|
var import_design_system_foundation26 = require("@boostdev/design-system-foundation");
|
|
@@ -1415,7 +1468,7 @@ function Popover({
|
|
|
1415
1468
|
}
|
|
1416
1469
|
|
|
1417
1470
|
// src/components/interaction/Rating/Rating.module.css
|
|
1418
|
-
var Rating_default = {"rating":"
|
|
1471
|
+
var Rating_default = {"rating":"bds015-rating","star":"bds015-star","--filled":"bds015---filled"};
|
|
1419
1472
|
|
|
1420
1473
|
// src/components/interaction/Rating/Rating.tsx
|
|
1421
1474
|
var import_design_system_foundation27 = require("@boostdev/design-system-foundation");
|
|
@@ -1446,7 +1499,7 @@ function Rating({ value, max = 5, className }) {
|
|
|
1446
1499
|
var import_react11 = require("react");
|
|
1447
1500
|
|
|
1448
1501
|
// src/components/interaction/Toast/Toast.module.css
|
|
1449
|
-
var Toast_default = {"toastContainer":"
|
|
1502
|
+
var Toast_default = {"toastContainer":"bds015-toastContainer","toast":"bds015-toast","--variant_success":"bds015---variant_success","--variant_error":"bds015---variant_error","--variant_info":"bds015---variant_info","message":"bds015-message","closeButton":"bds015-closeButton"};
|
|
1450
1503
|
|
|
1451
1504
|
// src/components/interaction/Toast/Toast.tsx
|
|
1452
1505
|
var import_design_system_foundation28 = require("@boostdev/design-system-foundation");
|
|
@@ -1479,7 +1532,10 @@ function ToastItem({ toast, onRemove }) {
|
|
|
1479
1532
|
const timer = setTimeout(onRemove, 5e3);
|
|
1480
1533
|
return () => clearTimeout(timer);
|
|
1481
1534
|
}, [onRemove]);
|
|
1482
|
-
return /* @__PURE__ */ (0, import_jsx_runtime29.
|
|
1535
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: (0, import_design_system_foundation28.cn)(Toast_default.toast, Toast_default[`--variant_${toast.variant}`]), role: "status", children: [
|
|
1536
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: Toast_default.message, children: toast.message }),
|
|
1537
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { type: "button", className: Toast_default.closeButton, onClick: onRemove, "aria-label": "Dismiss", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) }) })
|
|
1538
|
+
] });
|
|
1483
1539
|
}
|
|
1484
1540
|
function useToast() {
|
|
1485
1541
|
const context = (0, import_react11.useContext)(ToastContext);
|
|
@@ -1493,20 +1549,20 @@ function useToast() {
|
|
|
1493
1549
|
var import_react12 = require("react");
|
|
1494
1550
|
|
|
1495
1551
|
// src/components/interaction/form/Checkbox/Checkbox.module.css
|
|
1496
|
-
var Checkbox_default = {"checkboxGroup":"
|
|
1552
|
+
var Checkbox_default = {"checkboxGroup":"bds015-checkboxGroup","inputWrapper":"bds015-inputWrapper","checkbox":"bds015-checkbox","checkboxError":"bds015-checkboxError"};
|
|
1497
1553
|
|
|
1498
1554
|
// src/components/interaction/form/atoms/Message.module.css
|
|
1499
|
-
var Message_default = {"error":"
|
|
1555
|
+
var Message_default = {"error":"bds015-error","hint":"bds015-hint"};
|
|
1500
1556
|
|
|
1501
1557
|
// src/components/interaction/form/atoms/Message.tsx
|
|
1502
1558
|
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1503
1559
|
var Message = ({ message, type, inputId }) => {
|
|
1504
1560
|
if (!message) return null;
|
|
1505
|
-
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("
|
|
1561
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { id: inputId + type, className: Message_default[type], children: message });
|
|
1506
1562
|
};
|
|
1507
1563
|
|
|
1508
1564
|
// src/components/interaction/form/atoms/Label.module.css
|
|
1509
|
-
var Label_default = {"label":"
|
|
1565
|
+
var Label_default = {"label":"bds015-label"};
|
|
1510
1566
|
|
|
1511
1567
|
// src/components/interaction/form/atoms/Label.tsx
|
|
1512
1568
|
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
@@ -1518,7 +1574,7 @@ var Label = ({ label, id }) => {
|
|
|
1518
1574
|
var import_design_system_foundation30 = require("@boostdev/design-system-foundation");
|
|
1519
1575
|
|
|
1520
1576
|
// src/components/interaction/form/atoms/InputContainer.module.css
|
|
1521
|
-
var InputContainer_default = {"container":"
|
|
1577
|
+
var InputContainer_default = {"container":"bds015-container"};
|
|
1522
1578
|
|
|
1523
1579
|
// src/components/interaction/form/atoms/InputContainer.tsx
|
|
1524
1580
|
var import_design_system_foundation29 = require("@boostdev/design-system-foundation");
|
|
@@ -1533,13 +1589,14 @@ function Checkbox({ label, name, error, hint, className, ...props }) {
|
|
|
1533
1589
|
const id = name + (0, import_react12.useId)();
|
|
1534
1590
|
const hintId = id + "hint";
|
|
1535
1591
|
const errorId = id + "error";
|
|
1536
|
-
const describedBy =
|
|
1592
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1537
1593
|
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(InputContainer, { className: (0, import_design_system_foundation30.cn)(Checkbox_default.checkboxGroup, className), children: [
|
|
1538
1594
|
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: Checkbox_default.inputWrapper, children: [
|
|
1539
1595
|
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1540
1596
|
"input",
|
|
1541
1597
|
{
|
|
1542
1598
|
"aria-describedby": describedBy,
|
|
1599
|
+
"aria-invalid": !!error,
|
|
1543
1600
|
type: "checkbox",
|
|
1544
1601
|
id,
|
|
1545
1602
|
name,
|
|
@@ -1558,7 +1615,7 @@ function Checkbox({ label, name, error, hint, className, ...props }) {
|
|
|
1558
1615
|
var import_react13 = require("react");
|
|
1559
1616
|
|
|
1560
1617
|
// src/components/interaction/form/Combobox/Combobox.module.css
|
|
1561
|
-
var Combobox_default = {"formGroup":"
|
|
1618
|
+
var Combobox_default = {"formGroup":"bds015-formGroup","inputWrapper":"bds015-inputWrapper","input":"bds015-input","inputError":"bds015-inputError","chevron":"bds015-chevron","listbox":"bds015-listbox","option":"bds015-option","--highlighted":"bds015---highlighted","--selected":"bds015---selected","--disabled":"bds015---disabled"};
|
|
1562
1619
|
|
|
1563
1620
|
// src/components/interaction/form/Combobox/Combobox.tsx
|
|
1564
1621
|
var import_design_system_foundation31 = require("@boostdev/design-system-foundation");
|
|
@@ -1570,6 +1627,7 @@ function Combobox({
|
|
|
1570
1627
|
placeholder,
|
|
1571
1628
|
value,
|
|
1572
1629
|
onChange,
|
|
1630
|
+
disabled = false,
|
|
1573
1631
|
error,
|
|
1574
1632
|
hint,
|
|
1575
1633
|
className
|
|
@@ -1578,9 +1636,12 @@ function Combobox({
|
|
|
1578
1636
|
const listboxId = id + "listbox";
|
|
1579
1637
|
const hintId = id + "hint";
|
|
1580
1638
|
const errorId = id + "error";
|
|
1581
|
-
const describedBy = error
|
|
1582
|
-
const selectedOption = options.find((o) => o.value === value);
|
|
1639
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1640
|
+
const selectedOption = (0, import_react13.useMemo)(() => options.find((o) => o.value === value), [options, value]);
|
|
1583
1641
|
const [inputValue, setInputValue] = (0, import_react13.useState)(selectedOption?.label ?? "");
|
|
1642
|
+
(0, import_react13.useEffect)(() => {
|
|
1643
|
+
setInputValue(selectedOption?.label ?? "");
|
|
1644
|
+
}, [selectedOption]);
|
|
1584
1645
|
const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
|
|
1585
1646
|
const [highlightedIndex, setHighlightedIndex] = (0, import_react13.useState)(-1);
|
|
1586
1647
|
const containerRef = (0, import_react13.useRef)(null);
|
|
@@ -1657,6 +1718,7 @@ function Combobox({
|
|
|
1657
1718
|
autoComplete: "off",
|
|
1658
1719
|
placeholder,
|
|
1659
1720
|
value: inputValue,
|
|
1721
|
+
disabled,
|
|
1660
1722
|
className: (0, import_design_system_foundation31.cn)(Combobox_default.input, error ? Combobox_default.inputError : void 0),
|
|
1661
1723
|
onChange: handleInputChange,
|
|
1662
1724
|
onKeyDown: handleKeyDown,
|
|
@@ -1704,7 +1766,7 @@ function Combobox({
|
|
|
1704
1766
|
var import_react14 = require("react");
|
|
1705
1767
|
|
|
1706
1768
|
// src/components/interaction/form/FileInput/FileInput.module.css
|
|
1707
|
-
var FileInput_default = {"formGroup":"
|
|
1769
|
+
var FileInput_default = {"formGroup":"bds015-formGroup","dropZone":"bds015-dropZone","isDragging":"bds015-isDragging","hasError":"bds015-hasError","isDisabled":"bds015-isDisabled","icon":"bds015-icon","prompt":"bds015-prompt","acceptHint":"bds015-acceptHint","hiddenInput":"bds015-hiddenInput"};
|
|
1708
1770
|
|
|
1709
1771
|
// src/components/interaction/form/FileInput/FileInput.tsx
|
|
1710
1772
|
var import_design_system_foundation32 = require("@boostdev/design-system-foundation");
|
|
@@ -1723,10 +1785,19 @@ function FileInput({
|
|
|
1723
1785
|
const uid = name + (0, import_react14.useId)();
|
|
1724
1786
|
const hintId = uid + "hint";
|
|
1725
1787
|
const errorId = uid + "error";
|
|
1726
|
-
const describedBy = error
|
|
1788
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1727
1789
|
const inputRef = (0, import_react14.useRef)(null);
|
|
1728
1790
|
const [isDragging, setIsDragging] = (0, import_react14.useState)(false);
|
|
1729
1791
|
const [fileNames, setFileNames] = (0, import_react14.useState)([]);
|
|
1792
|
+
const isFileAccepted = (file) => {
|
|
1793
|
+
if (!accept) return true;
|
|
1794
|
+
return accept.split(",").some((token) => {
|
|
1795
|
+
const t = token.trim();
|
|
1796
|
+
if (t.startsWith(".")) return file.name.toLowerCase().endsWith(t.toLowerCase());
|
|
1797
|
+
if (t.endsWith("/*")) return file.type.startsWith(t.slice(0, -1));
|
|
1798
|
+
return file.type === t;
|
|
1799
|
+
});
|
|
1800
|
+
};
|
|
1730
1801
|
const handleFiles = (files) => {
|
|
1731
1802
|
if (!files) return;
|
|
1732
1803
|
setFileNames(Array.from(files).map((f) => f.name));
|
|
@@ -1737,7 +1808,10 @@ function FileInput({
|
|
|
1737
1808
|
e.preventDefault();
|
|
1738
1809
|
setIsDragging(false);
|
|
1739
1810
|
if (disabled) return;
|
|
1740
|
-
|
|
1811
|
+
const dt = new DataTransfer();
|
|
1812
|
+
Array.from(e.dataTransfer.files).filter(isFileAccepted).forEach((f) => dt.items.add(f));
|
|
1813
|
+
if (inputRef.current) inputRef.current.files = dt.files;
|
|
1814
|
+
handleFiles(dt.files.length > 0 ? dt.files : null);
|
|
1741
1815
|
};
|
|
1742
1816
|
const handleDragOver = (e) => {
|
|
1743
1817
|
e.preventDefault();
|
|
@@ -1789,7 +1863,7 @@ function FileInput({
|
|
|
1789
1863
|
var import_react15 = require("react");
|
|
1790
1864
|
|
|
1791
1865
|
// src/components/interaction/form/FormInput/FormInput.module.css
|
|
1792
|
-
var FormInput_default = {"formGroup":"
|
|
1866
|
+
var FormInput_default = {"formGroup":"bds015-formGroup","input":"bds015-input","inputError":"bds015-inputError"};
|
|
1793
1867
|
|
|
1794
1868
|
// src/components/interaction/form/FormInput/FormInput.tsx
|
|
1795
1869
|
var import_design_system_foundation33 = require("@boostdev/design-system-foundation");
|
|
@@ -1806,7 +1880,7 @@ function FormInput({
|
|
|
1806
1880
|
const id = name + (0, import_react15.useId)();
|
|
1807
1881
|
const hintId = id + "hint";
|
|
1808
1882
|
const errorId = id + "error";
|
|
1809
|
-
const describedBy =
|
|
1883
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1810
1884
|
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(InputContainer, { className: (0, import_design_system_foundation33.cn)(FormInput_default.formGroup, className), children: [
|
|
1811
1885
|
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Label, { id, label }),
|
|
1812
1886
|
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
@@ -1830,7 +1904,7 @@ function FormInput({
|
|
|
1830
1904
|
var import_react16 = require("react");
|
|
1831
1905
|
|
|
1832
1906
|
// src/components/interaction/form/NumberInput/NumberInput.module.css
|
|
1833
|
-
var NumberInput_default = {"formGroup":"
|
|
1907
|
+
var NumberInput_default = {"formGroup":"bds015-formGroup","inputRow":"bds015-inputRow","input":"bds015-input","inputError":"bds015-inputError","stepper":"bds015-stepper"};
|
|
1834
1908
|
|
|
1835
1909
|
// src/components/interaction/form/NumberInput/NumberInput.tsx
|
|
1836
1910
|
var import_design_system_foundation34 = require("@boostdev/design-system-foundation");
|
|
@@ -1852,18 +1926,18 @@ function NumberInput({
|
|
|
1852
1926
|
const uid = name + (0, import_react16.useId)();
|
|
1853
1927
|
const hintId = uid + "hint";
|
|
1854
1928
|
const errorId = uid + "error";
|
|
1855
|
-
const describedBy = error
|
|
1929
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1856
1930
|
const inputRef = (0, import_react16.useRef)(null);
|
|
1931
|
+
const isControlled = value !== void 0;
|
|
1932
|
+
const [internalValue, setInternalValue] = (0, import_react16.useState)(defaultValue ?? 0);
|
|
1933
|
+
const currentValue = isControlled ? value : internalValue;
|
|
1857
1934
|
const clamp = (v) => {
|
|
1858
1935
|
const withMin = min !== void 0 ? Math.max(min, v) : v;
|
|
1859
|
-
|
|
1860
|
-
return withMax;
|
|
1936
|
+
return max !== void 0 ? Math.min(max, withMin) : withMin;
|
|
1861
1937
|
};
|
|
1862
1938
|
const adjust = (delta) => {
|
|
1863
|
-
|
|
1864
|
-
|
|
1865
|
-
const next = clamp(current + delta);
|
|
1866
|
-
inputRef.current.value = String(next);
|
|
1939
|
+
const next = clamp(currentValue + delta);
|
|
1940
|
+
if (!isControlled) setInternalValue(next);
|
|
1867
1941
|
onChange?.(next);
|
|
1868
1942
|
};
|
|
1869
1943
|
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(InputContainer, { className: (0, import_design_system_foundation34.cn)(NumberInput_default.formGroup, className), children: [
|
|
@@ -1875,7 +1949,7 @@ function NumberInput({
|
|
|
1875
1949
|
type: "button",
|
|
1876
1950
|
className: NumberInput_default.stepper,
|
|
1877
1951
|
"aria-label": "Decrease",
|
|
1878
|
-
disabled: disabled || min !== void 0 &&
|
|
1952
|
+
disabled: disabled || min !== void 0 && currentValue <= min,
|
|
1879
1953
|
onClick: () => adjust(-step),
|
|
1880
1954
|
tabIndex: -1,
|
|
1881
1955
|
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12h14" }) })
|
|
@@ -1888,8 +1962,7 @@ function NumberInput({
|
|
|
1888
1962
|
id: uid,
|
|
1889
1963
|
type: "number",
|
|
1890
1964
|
name,
|
|
1891
|
-
defaultValue,
|
|
1892
|
-
value,
|
|
1965
|
+
...isControlled ? { value } : { defaultValue },
|
|
1893
1966
|
min,
|
|
1894
1967
|
max,
|
|
1895
1968
|
step,
|
|
@@ -1897,7 +1970,11 @@ function NumberInput({
|
|
|
1897
1970
|
"aria-invalid": !!error,
|
|
1898
1971
|
"aria-describedby": describedBy,
|
|
1899
1972
|
className: (0, import_design_system_foundation34.cn)(NumberInput_default.input, error ? NumberInput_default.inputError : void 0),
|
|
1900
|
-
onChange: (e) =>
|
|
1973
|
+
onChange: (e) => {
|
|
1974
|
+
const v = parseFloat(e.target.value);
|
|
1975
|
+
if (!isControlled) setInternalValue(isNaN(v) ? 0 : v);
|
|
1976
|
+
onChange?.(v);
|
|
1977
|
+
}
|
|
1901
1978
|
}
|
|
1902
1979
|
),
|
|
1903
1980
|
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
@@ -1906,7 +1983,7 @@ function NumberInput({
|
|
|
1906
1983
|
type: "button",
|
|
1907
1984
|
className: NumberInput_default.stepper,
|
|
1908
1985
|
"aria-label": "Increase",
|
|
1909
|
-
disabled: disabled || max !== void 0 &&
|
|
1986
|
+
disabled: disabled || max !== void 0 && currentValue >= max,
|
|
1910
1987
|
onClick: () => adjust(step),
|
|
1911
1988
|
tabIndex: -1,
|
|
1912
1989
|
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 5v14M5 12h14" }) })
|
|
@@ -1922,7 +1999,7 @@ function NumberInput({
|
|
|
1922
1999
|
var import_react17 = require("react");
|
|
1923
2000
|
|
|
1924
2001
|
// src/components/interaction/form/Radio/Radio.module.css
|
|
1925
|
-
var Radio_default = {"radioGroup":"
|
|
2002
|
+
var Radio_default = {"radioGroup":"bds015-radioGroup","inputWrapper":"bds015-inputWrapper","radio":"bds015-radio","radioError":"bds015-radioError"};
|
|
1926
2003
|
|
|
1927
2004
|
// src/components/interaction/form/Radio/Radio.tsx
|
|
1928
2005
|
var import_design_system_foundation35 = require("@boostdev/design-system-foundation");
|
|
@@ -1931,13 +2008,14 @@ function Radio({ label, name, error, hint, className, ...props }) {
|
|
|
1931
2008
|
const id = name + (0, import_react17.useId)();
|
|
1932
2009
|
const hintId = id + "hint";
|
|
1933
2010
|
const errorId = id + "error";
|
|
1934
|
-
const describedBy =
|
|
2011
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1935
2012
|
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(InputContainer, { className: (0, import_design_system_foundation35.cn)(Radio_default.radioGroup, className), children: [
|
|
1936
2013
|
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: Radio_default.inputWrapper, children: [
|
|
1937
2014
|
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
1938
2015
|
"input",
|
|
1939
2016
|
{
|
|
1940
2017
|
"aria-describedby": describedBy,
|
|
2018
|
+
"aria-invalid": !!error,
|
|
1941
2019
|
type: "radio",
|
|
1942
2020
|
id,
|
|
1943
2021
|
name,
|
|
@@ -1956,7 +2034,7 @@ function Radio({ label, name, error, hint, className, ...props }) {
|
|
|
1956
2034
|
var import_react18 = require("react");
|
|
1957
2035
|
|
|
1958
2036
|
// src/components/interaction/form/Select/Select.module.css
|
|
1959
|
-
var Select_default = {"formGroup":"
|
|
2037
|
+
var Select_default = {"formGroup":"bds015-formGroup","selectWrapper":"bds015-selectWrapper","select":"bds015-select","selectError":"bds015-selectError","chevron":"bds015-chevron"};
|
|
1960
2038
|
|
|
1961
2039
|
// src/components/interaction/form/Select/Select.tsx
|
|
1962
2040
|
var import_design_system_foundation36 = require("@boostdev/design-system-foundation");
|
|
@@ -1974,7 +2052,7 @@ function Select({
|
|
|
1974
2052
|
const id = name + (0, import_react18.useId)();
|
|
1975
2053
|
const hintId = id + "hint";
|
|
1976
2054
|
const errorId = id + "error";
|
|
1977
|
-
const describedBy = error
|
|
2055
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1978
2056
|
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(InputContainer, { className: (0, import_design_system_foundation36.cn)(Select_default.formGroup, className), children: [
|
|
1979
2057
|
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Label, { id, label }),
|
|
1980
2058
|
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: Select_default.selectWrapper, children: [
|
|
@@ -1988,7 +2066,7 @@ function Select({
|
|
|
1988
2066
|
className: (0, import_design_system_foundation36.cn)(Select_default.select, error ? Select_default.selectError : void 0),
|
|
1989
2067
|
...props,
|
|
1990
2068
|
children: [
|
|
1991
|
-
placeholder && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("option", { value: "", disabled: true, children: placeholder }),
|
|
2069
|
+
placeholder && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("option", { value: "", disabled: true, hidden: true, children: placeholder }),
|
|
1992
2070
|
options.map(({ value, label: optLabel, disabled }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("option", { value, disabled, children: optLabel }, value))
|
|
1993
2071
|
]
|
|
1994
2072
|
}
|
|
@@ -2004,7 +2082,7 @@ function Select({
|
|
|
2004
2082
|
var import_react19 = require("react");
|
|
2005
2083
|
|
|
2006
2084
|
// src/components/interaction/form/Slider/Slider.module.css
|
|
2007
|
-
var Slider_default = {"formGroup":"
|
|
2085
|
+
var Slider_default = {"formGroup":"bds015-formGroup","labelRow":"bds015-labelRow","value":"bds015-value","slider":"bds015-slider","sliderError":"bds015-sliderError"};
|
|
2008
2086
|
|
|
2009
2087
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
2010
2088
|
var import_design_system_foundation37 = require("@boostdev/design-system-foundation");
|
|
@@ -2024,12 +2102,13 @@ function Slider({
|
|
|
2024
2102
|
const id = name + (0, import_react19.useId)();
|
|
2025
2103
|
const hintId = id + "hint";
|
|
2026
2104
|
const errorId = id + "error";
|
|
2027
|
-
const describedBy = error
|
|
2028
|
-
const
|
|
2029
|
-
const [
|
|
2105
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2106
|
+
const isControlled = props.value !== void 0;
|
|
2107
|
+
const [internalValue, setInternalValue] = (0, import_react19.useState)(Number(props.defaultValue ?? min));
|
|
2108
|
+
const currentValue = isControlled ? Number(props.value) : internalValue;
|
|
2030
2109
|
const fillPct = (currentValue - min) / (max - min) * 100;
|
|
2031
2110
|
const handleChange = (e) => {
|
|
2032
|
-
|
|
2111
|
+
if (!isControlled) setInternalValue(Number(e.target.value));
|
|
2033
2112
|
onChange?.(e);
|
|
2034
2113
|
};
|
|
2035
2114
|
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(InputContainer, { className: (0, import_design_system_foundation37.cn)(Slider_default.formGroup, className), children: [
|
|
@@ -2064,7 +2143,7 @@ function Slider({
|
|
|
2064
2143
|
var import_react20 = require("react");
|
|
2065
2144
|
|
|
2066
2145
|
// src/components/interaction/form/Switch/Switch.module.css
|
|
2067
|
-
var Switch_default = {"switchGroup":"
|
|
2146
|
+
var Switch_default = {"switchGroup":"bds015-switchGroup","--size_small":"bds015---size_small","--size_medium":"bds015---size_medium","--size_large":"bds015---size_large","inputWrapper":"bds015-inputWrapper","trackWrapper":"bds015-trackWrapper","switch":"bds015-switch","track":"bds015-track","thumb":"bds015-thumb","switchError":"bds015-switchError"};
|
|
2068
2147
|
|
|
2069
2148
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2070
2149
|
var import_design_system_foundation38 = require("@boostdev/design-system-foundation");
|
|
@@ -2081,7 +2160,7 @@ function Switch({
|
|
|
2081
2160
|
const id = name + (0, import_react20.useId)();
|
|
2082
2161
|
const hintId = id + "hint";
|
|
2083
2162
|
const errorId = id + "error";
|
|
2084
|
-
const describedBy = error
|
|
2163
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2085
2164
|
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(InputContainer, { className: (0, import_design_system_foundation38.cn)(Switch_default.switchGroup, Switch_default[`--size_${size}`], className), children: [
|
|
2086
2165
|
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: Switch_default.inputWrapper, children: [
|
|
2087
2166
|
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: Switch_default.trackWrapper, children: [
|
|
@@ -2110,7 +2189,7 @@ function Switch({
|
|
|
2110
2189
|
var import_react21 = require("react");
|
|
2111
2190
|
|
|
2112
2191
|
// src/components/interaction/form/Textarea/Textarea.module.css
|
|
2113
|
-
var Textarea_default = {"formGroup":"
|
|
2192
|
+
var Textarea_default = {"formGroup":"bds015-formGroup","textarea":"bds015-textarea","textareaError":"bds015-textareaError"};
|
|
2114
2193
|
|
|
2115
2194
|
// src/components/interaction/form/Textarea/Textarea.tsx
|
|
2116
2195
|
var import_design_system_foundation39 = require("@boostdev/design-system-foundation");
|
|
@@ -2126,7 +2205,7 @@ function Textarea({
|
|
|
2126
2205
|
const id = name + (0, import_react21.useId)();
|
|
2127
2206
|
const hintId = id + "hint";
|
|
2128
2207
|
const errorId = id + "error";
|
|
2129
|
-
const describedBy = error
|
|
2208
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2130
2209
|
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(InputContainer, { className: (0, import_design_system_foundation39.cn)(Textarea_default.formGroup, className), children: [
|
|
2131
2210
|
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Label, { id, label }),
|
|
2132
2211
|
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
@@ -2146,17 +2225,17 @@ function Textarea({
|
|
|
2146
2225
|
}
|
|
2147
2226
|
|
|
2148
2227
|
// src/components/layout/ButtonGroup/ButtonGroup.module.css
|
|
2149
|
-
var ButtonGroup_default = {"buttonGroup":"
|
|
2228
|
+
var ButtonGroup_default = {"buttonGroup":"bds015-buttonGroup","container":"bds015-container","--variant__card":"bds015---variant__card","--variant__flow":"bds015---variant__flow","--variant__modal":"bds015---variant__modal","--variant__content":"bds015---variant__content","--variant__grid":"bds015---variant__grid"};
|
|
2150
2229
|
|
|
2151
2230
|
// src/components/layout/ButtonGroup/ButtonGroup.tsx
|
|
2152
2231
|
var import_design_system_foundation40 = require("@boostdev/design-system-foundation");
|
|
2153
2232
|
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
2154
2233
|
function ButtonGroup({ children, className, variant }) {
|
|
2155
|
-
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: (0, import_design_system_foundation40.cn)(ButtonGroup_default.buttonGroup, className, variant && ButtonGroup_default[`--
|
|
2234
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: (0, import_design_system_foundation40.cn)(ButtonGroup_default.buttonGroup, className, variant && ButtonGroup_default[`--variant_${variant}`]), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: ButtonGroup_default.container, children }) });
|
|
2156
2235
|
}
|
|
2157
2236
|
|
|
2158
2237
|
// src/components/layout/Card/Card.module.css
|
|
2159
|
-
var Card_default = {"card":"
|
|
2238
|
+
var Card_default = {"card":"bds015-card","--default":"bds015---default","--elevated":"bds015---elevated","--outlined":"bds015---outlined","--clickable":"bds015---clickable","--padding-none":"bds015---padding-none","--padding-small":"bds015---padding-small","--padding-medium":"bds015---padding-medium","--padding-large":"bds015---padding-large","--text-start":"bds015---text-start","--text-center":"bds015---text-center","--text-end":"bds015---text-end"};
|
|
2160
2239
|
|
|
2161
2240
|
// src/components/layout/Card/Card.tsx
|
|
2162
2241
|
var import_design_system_foundation41 = require("@boostdev/design-system-foundation");
|
|
@@ -2168,7 +2247,8 @@ function Card({
|
|
|
2168
2247
|
padding = "medium",
|
|
2169
2248
|
textAlign = "start",
|
|
2170
2249
|
style,
|
|
2171
|
-
onClick
|
|
2250
|
+
onClick,
|
|
2251
|
+
"aria-label": ariaLabel
|
|
2172
2252
|
}) {
|
|
2173
2253
|
const classNames = (0, import_design_system_foundation41.cn)(
|
|
2174
2254
|
Card_default.card,
|
|
@@ -2185,6 +2265,7 @@ function Card({
|
|
|
2185
2265
|
className: classNames,
|
|
2186
2266
|
onClick,
|
|
2187
2267
|
style,
|
|
2268
|
+
"aria-label": ariaLabel,
|
|
2188
2269
|
...onClick && { type: "button" },
|
|
2189
2270
|
children
|
|
2190
2271
|
}
|
|
@@ -2192,7 +2273,7 @@ function Card({
|
|
|
2192
2273
|
}
|
|
2193
2274
|
|
|
2194
2275
|
// src/components/layout/SectionHeader/SectionHeader.module.css
|
|
2195
|
-
var SectionHeader_default = {"sectionHeader":"
|
|
2276
|
+
var SectionHeader_default = {"sectionHeader":"bds015-sectionHeader","title":"bds015-title","subtitle":"bds015-subtitle","--start":"bds015---start","--center":"bds015---center","--end":"bds015---end","--small":"bds015---small","--medium":"bds015---medium","--large":"bds015---large"};
|
|
2196
2277
|
|
|
2197
2278
|
// src/components/layout/SectionHeader/SectionHeader.tsx
|
|
2198
2279
|
var import_design_system_foundation42 = require("@boostdev/design-system-foundation");
|
|
@@ -2213,7 +2294,7 @@ function SectionHeader({
|
|
|
2213
2294
|
}
|
|
2214
2295
|
|
|
2215
2296
|
// src/components/layout/IconWrapper/IconWrapper.module.css
|
|
2216
|
-
var IconWrapper_default = {"wrapper":"
|
|
2297
|
+
var IconWrapper_default = {"wrapper":"bds015-wrapper"};
|
|
2217
2298
|
|
|
2218
2299
|
// src/components/layout/IconWrapper/IconWrapper.tsx
|
|
2219
2300
|
var import_design_system_foundation43 = require("@boostdev/design-system-foundation");
|