@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.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":"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"};
|
|
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":"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"};
|
|
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":"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"};
|
|
119
119
|
|
|
120
120
|
// src/components/ui/Avatar/Avatar.tsx
|
|
121
121
|
import { cn as cn3 } from "@boostdev/design-system-foundation";
|
|
@@ -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":"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"};
|
|
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":"bds015-breadcrumb","list":"bds015-list","item":"bds015-item","link":"bds015-link","separator":"bds015-separator","current":"bds015-current"};
|
|
155
155
|
|
|
156
156
|
// src/components/ui/Breadcrumb/Breadcrumb.tsx
|
|
157
157
|
import { cn as cn5 } from "@boostdev/design-system-foundation";
|
|
@@ -162,7 +162,7 @@ function Breadcrumb({ items, className }) {
|
|
|
162
162
|
return /* @__PURE__ */ jsx5("li", { className: Breadcrumb_default.item, children: isLast ? /* @__PURE__ */ jsx5("span", { "aria-current": "page", className: Breadcrumb_default.current, children: item.label }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
|
|
163
163
|
/* @__PURE__ */ jsx5("a", { href: item.href, className: Breadcrumb_default.link, children: item.label }),
|
|
164
164
|
/* @__PURE__ */ jsx5("span", { className: Breadcrumb_default.separator, "aria-hidden": "true", children: "\u203A" })
|
|
165
|
-
] }) },
|
|
165
|
+
] }) }, index);
|
|
166
166
|
}) }) });
|
|
167
167
|
}
|
|
168
168
|
|
|
@@ -170,7 +170,7 @@ function Breadcrumb({ items, className }) {
|
|
|
170
170
|
import { useState as useState2, useId as useId2 } from "react";
|
|
171
171
|
|
|
172
172
|
// src/components/ui/Calendar/Calendar.module.css
|
|
173
|
-
var Calendar_default = {"calendar":"
|
|
173
|
+
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"};
|
|
174
174
|
|
|
175
175
|
// src/components/ui/Calendar/Calendar.tsx
|
|
176
176
|
import { cn as cn6 } from "@boostdev/design-system-foundation";
|
|
@@ -193,10 +193,13 @@ var MONTHS = [
|
|
|
193
193
|
function isSameDay(a, b) {
|
|
194
194
|
return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
|
|
195
195
|
}
|
|
196
|
+
function toMidnight(date) {
|
|
197
|
+
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
198
|
+
}
|
|
196
199
|
function isOutOfRange(date, min, max) {
|
|
197
|
-
|
|
198
|
-
if (
|
|
199
|
-
return
|
|
200
|
+
const d = toMidnight(date);
|
|
201
|
+
if (min && d < toMidnight(min)) return true;
|
|
202
|
+
return !!(max && d > toMidnight(max));
|
|
200
203
|
}
|
|
201
204
|
function getDaysInMonth(year, month) {
|
|
202
205
|
return new Date(year, month + 1, 0).getDate();
|
|
@@ -333,7 +336,7 @@ function Calendar({ value, defaultValue, min, max, onChange, className }) {
|
|
|
333
336
|
import { useRef, useId as useId3 } from "react";
|
|
334
337
|
|
|
335
338
|
// src/components/ui/Carousel/Carousel.module.css
|
|
336
|
-
var Carousel_default = {"carousel":"
|
|
339
|
+
var Carousel_default = {"carousel":"bds015-carousel","track":"bds015-track","slide":"bds015-slide","navBtn":"bds015-navBtn"};
|
|
337
340
|
|
|
338
341
|
// src/components/ui/Carousel/Carousel.tsx
|
|
339
342
|
import { cn as cn7 } from "@boostdev/design-system-foundation";
|
|
@@ -386,7 +389,7 @@ function Carousel({ items, label, className }) {
|
|
|
386
389
|
}
|
|
387
390
|
|
|
388
391
|
// src/components/ui/DescriptionList/DescriptionList.module.css
|
|
389
|
-
var DescriptionList_default = {"list":"
|
|
392
|
+
var DescriptionList_default = {"list":"bds015-list","group":"bds015-group","term":"bds015-term","details":"bds015-details","--layout_inline":"bds015---layout_inline"};
|
|
390
393
|
|
|
391
394
|
// src/components/ui/DescriptionList/DescriptionList.tsx
|
|
392
395
|
import { cn as cn8 } from "@boostdev/design-system-foundation";
|
|
@@ -399,7 +402,7 @@ function DescriptionList({ items, layout = "stacked", className }) {
|
|
|
399
402
|
}
|
|
400
403
|
|
|
401
404
|
// src/components/ui/Link/Link.module.css
|
|
402
|
-
var Link_default = {"link":"
|
|
405
|
+
var Link_default = {"link":"bds015-link","--variant_default":"bds015---variant_default","--variant_subtle":"bds015---variant_subtle","--variant_standalone":"bds015---variant_standalone","externalLabel":"bds015-externalLabel"};
|
|
403
406
|
|
|
404
407
|
// src/components/ui/Link/Link.tsx
|
|
405
408
|
import { cn as cn9 } from "@boostdev/design-system-foundation";
|
|
@@ -409,6 +412,7 @@ function Link({
|
|
|
409
412
|
children,
|
|
410
413
|
variant = "default",
|
|
411
414
|
external = false,
|
|
415
|
+
externalLabel = "(opens in new tab)",
|
|
412
416
|
className,
|
|
413
417
|
...props
|
|
414
418
|
}) {
|
|
@@ -422,14 +426,14 @@ function Link({
|
|
|
422
426
|
...props,
|
|
423
427
|
children: [
|
|
424
428
|
children,
|
|
425
|
-
external && /* @__PURE__ */ jsx9("span", { className: Link_default.externalLabel, children:
|
|
429
|
+
external && /* @__PURE__ */ jsx9("span", { className: Link_default.externalLabel, children: externalLabel })
|
|
426
430
|
]
|
|
427
431
|
}
|
|
428
432
|
);
|
|
429
433
|
}
|
|
430
434
|
|
|
431
435
|
// src/components/ui/Loading/Loading.module.css
|
|
432
|
-
var Loading_default = {"loading":"
|
|
436
|
+
var Loading_default = {"loading":"bds015-loading","spinner":"bds015-spinner","--size_small":"bds015---size_small","--size_large":"bds015---size_large"};
|
|
433
437
|
|
|
434
438
|
// src/components/ui/Loading/Loading.tsx
|
|
435
439
|
import { cn as cn10 } from "@boostdev/design-system-foundation";
|
|
@@ -439,7 +443,7 @@ function Loading({ size = "medium", className }) {
|
|
|
439
443
|
}
|
|
440
444
|
|
|
441
445
|
// src/components/ui/NotificationBanner/NotificationBanner.module.css
|
|
442
|
-
var NotificationBanner_default = {"banner":"
|
|
446
|
+
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"};
|
|
443
447
|
|
|
444
448
|
// src/components/ui/NotificationBanner/NotificationBanner.tsx
|
|
445
449
|
import { cn as cn11 } from "@boostdev/design-system-foundation";
|
|
@@ -478,7 +482,7 @@ function NotificationBanner({
|
|
|
478
482
|
}
|
|
479
483
|
|
|
480
484
|
// src/components/ui/Pagination/Pagination.module.css
|
|
481
|
-
var Pagination_default = {"pagination":"
|
|
485
|
+
var Pagination_default = {"pagination":"bds015-pagination","list":"bds015-list","button":"bds015-button","--active":"bds015---active","--nav":"bds015---nav","ellipsis":"bds015-ellipsis"};
|
|
482
486
|
|
|
483
487
|
// src/components/ui/Pagination/Pagination.tsx
|
|
484
488
|
import { cn as cn12 } from "@boostdev/design-system-foundation";
|
|
@@ -542,7 +546,7 @@ function Pagination({
|
|
|
542
546
|
}
|
|
543
547
|
|
|
544
548
|
// src/components/ui/Progress/Progress.module.css
|
|
545
|
-
var Progress_default = {"container":"
|
|
549
|
+
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"};
|
|
546
550
|
|
|
547
551
|
// src/components/ui/Progress/Progress.tsx
|
|
548
552
|
import { cn as cn13 } from "@boostdev/design-system-foundation";
|
|
@@ -580,7 +584,7 @@ function Progress({
|
|
|
580
584
|
}
|
|
581
585
|
|
|
582
586
|
// src/components/ui/ProgressCircle/ProgressCircle.module.css
|
|
583
|
-
var ProgressCircle_default = {"wrapper":"
|
|
587
|
+
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"};
|
|
584
588
|
|
|
585
589
|
// src/components/ui/ProgressCircle/ProgressCircle.tsx
|
|
586
590
|
import { cn as cn14 } from "@boostdev/design-system-foundation";
|
|
@@ -659,7 +663,7 @@ function ProgressCircle({
|
|
|
659
663
|
}
|
|
660
664
|
|
|
661
665
|
// src/components/ui/Separator/Separator.module.css
|
|
662
|
-
var Separator_default = {"separator":"
|
|
666
|
+
var Separator_default = {"separator":"bds015-separator","--horizontal":"bds015---horizontal","--vertical":"bds015---vertical"};
|
|
663
667
|
|
|
664
668
|
// src/components/ui/Separator/Separator.tsx
|
|
665
669
|
import { cn as cn15 } from "@boostdev/design-system-foundation";
|
|
@@ -682,7 +686,7 @@ function Separator({ orientation = "horizontal", className }) {
|
|
|
682
686
|
import { cn as cn16 } from "@boostdev/design-system-foundation";
|
|
683
687
|
|
|
684
688
|
// src/components/ui/Skeleton/Skeleton.module.css
|
|
685
|
-
var Skeleton_default = {"skeleton":"
|
|
689
|
+
var Skeleton_default = {"skeleton":"bds015-skeleton"};
|
|
686
690
|
|
|
687
691
|
// src/components/ui/Skeleton/Skeleton.tsx
|
|
688
692
|
import { jsx as jsx16 } from "react/jsx-runtime";
|
|
@@ -691,7 +695,7 @@ function Skeleton({ className }) {
|
|
|
691
695
|
}
|
|
692
696
|
|
|
693
697
|
// src/components/ui/SkipLink/SkipLink.module.css
|
|
694
|
-
var SkipLink_default = {"skipLink":"
|
|
698
|
+
var SkipLink_default = {"skipLink":"bds015-skipLink"};
|
|
695
699
|
|
|
696
700
|
// src/components/ui/SkipLink/SkipLink.tsx
|
|
697
701
|
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
@@ -700,7 +704,7 @@ function SkipLink({ href = "#main", children = "Skip to main content" }) {
|
|
|
700
704
|
}
|
|
701
705
|
|
|
702
706
|
// src/components/ui/Table/Table.module.css
|
|
703
|
-
var Table_default = {"wrapper":"
|
|
707
|
+
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"};
|
|
704
708
|
|
|
705
709
|
// src/components/ui/Table/Table.tsx
|
|
706
710
|
import { cn as cn17 } from "@boostdev/design-system-foundation";
|
|
@@ -769,7 +773,7 @@ function Table({
|
|
|
769
773
|
import { useId as useId4, useRef as useRef2, useState as useState3 } from "react";
|
|
770
774
|
|
|
771
775
|
// src/components/ui/Tabs/Tabs.module.css
|
|
772
|
-
var Tabs_default = {"tabs":"
|
|
776
|
+
var Tabs_default = {"tabs":"bds015-tabs","tabList":"bds015-tabList","tab":"bds015-tab","--active":"bds015---active","panel":"bds015-panel"};
|
|
773
777
|
|
|
774
778
|
// src/components/ui/Tabs/Tabs.tsx
|
|
775
779
|
import { cn as cn18 } from "@boostdev/design-system-foundation";
|
|
@@ -850,7 +854,7 @@ function Tabs({ tabs, defaultTab, className }) {
|
|
|
850
854
|
import { cloneElement, isValidElement, useId as useId5 } from "react";
|
|
851
855
|
|
|
852
856
|
// src/components/ui/Tooltip/Tooltip.module.css
|
|
853
|
-
var Tooltip_default = {"wrapper":"
|
|
857
|
+
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"};
|
|
854
858
|
|
|
855
859
|
// src/components/ui/Tooltip/Tooltip.tsx
|
|
856
860
|
import { cn as cn19 } from "@boostdev/design-system-foundation";
|
|
@@ -880,7 +884,7 @@ function Tooltip({
|
|
|
880
884
|
}
|
|
881
885
|
|
|
882
886
|
// src/components/ui/Typography/Typography.module.css
|
|
883
|
-
var Typography_default = {"typography":"
|
|
887
|
+
var Typography_default = {"typography":"bds015-typography","--h1":"bds015---h1","--h2":"bds015---h2","--h3":"bds015---h3","--body":"bds015---body","--body_s":"bds015---body_s"};
|
|
884
888
|
|
|
885
889
|
// src/components/ui/Typography/Typography.tsx
|
|
886
890
|
import { cn as cn20 } from "@boostdev/design-system-foundation";
|
|
@@ -898,14 +902,14 @@ function Typography({ variant = "body", component, children, className }) {
|
|
|
898
902
|
}
|
|
899
903
|
|
|
900
904
|
// src/components/interaction/Button/Button.module.css
|
|
901
|
-
var Button_default = {"button":"
|
|
905
|
+
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"};
|
|
902
906
|
|
|
903
907
|
// src/components/interaction/Button/Button.tsx
|
|
904
908
|
import { cn as cn21 } from "@boostdev/design-system-foundation";
|
|
905
909
|
import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
906
910
|
function Button({
|
|
907
911
|
children,
|
|
908
|
-
className
|
|
912
|
+
className,
|
|
909
913
|
variant = "primary",
|
|
910
914
|
type = "button",
|
|
911
915
|
iconStart,
|
|
@@ -926,22 +930,55 @@ function Button({
|
|
|
926
930
|
hasPulse && Button_default["--hasPulse"],
|
|
927
931
|
className
|
|
928
932
|
);
|
|
929
|
-
const
|
|
930
|
-
|
|
933
|
+
const handleAnchorClick = (e) => {
|
|
934
|
+
if (disabled) {
|
|
935
|
+
e.preventDefault();
|
|
936
|
+
return;
|
|
937
|
+
}
|
|
938
|
+
onClick?.(e);
|
|
939
|
+
};
|
|
940
|
+
const handleButtonClick = (e) => {
|
|
941
|
+
onClick?.(e);
|
|
942
|
+
};
|
|
943
|
+
const content = /* @__PURE__ */ jsxs15(Fragment2, { children: [
|
|
944
|
+
Boolean(iconStart) && /* @__PURE__ */ jsx22("span", { className: Button_default.prefix, children: iconStart }),
|
|
931
945
|
children,
|
|
932
|
-
|
|
946
|
+
Boolean(iconEnd) && /* @__PURE__ */ jsx22("span", { className: Button_default.suffix, children: iconEnd })
|
|
933
947
|
] });
|
|
934
948
|
if (href) {
|
|
935
|
-
return /* @__PURE__ */ jsx22(
|
|
949
|
+
return /* @__PURE__ */ jsx22(
|
|
950
|
+
"a",
|
|
951
|
+
{
|
|
952
|
+
className: classNames,
|
|
953
|
+
href: disabled ? void 0 : href,
|
|
954
|
+
target,
|
|
955
|
+
rel,
|
|
956
|
+
"aria-disabled": disabled,
|
|
957
|
+
tabIndex: disabled ? -1 : void 0,
|
|
958
|
+
onClick: handleAnchorClick,
|
|
959
|
+
...rest,
|
|
960
|
+
children: content
|
|
961
|
+
}
|
|
962
|
+
);
|
|
936
963
|
}
|
|
937
|
-
return /* @__PURE__ */ jsx22(
|
|
964
|
+
return /* @__PURE__ */ jsx22(
|
|
965
|
+
"button",
|
|
966
|
+
{
|
|
967
|
+
type,
|
|
968
|
+
className: classNames,
|
|
969
|
+
disabled,
|
|
970
|
+
onClick: handleButtonClick,
|
|
971
|
+
...rest,
|
|
972
|
+
children: content
|
|
973
|
+
}
|
|
974
|
+
);
|
|
938
975
|
}
|
|
939
976
|
|
|
940
977
|
// src/components/interaction/Command/Command.tsx
|
|
941
978
|
import { useState as useState4, useEffect, useRef as useRef3, useId as useId6, useMemo } from "react";
|
|
942
979
|
|
|
943
980
|
// src/components/interaction/Command/Command.module.css
|
|
944
|
-
var Command_default = {"dialog":"
|
|
981
|
+
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"};
|
|
945
982
|
|
|
946
983
|
// src/components/interaction/Command/Command.tsx
|
|
947
984
|
import { cn as cn22 } from "@boostdev/design-system-foundation";
|
|
@@ -1080,42 +1117,58 @@ function Command({
|
|
|
1080
1117
|
import { useEffect as useEffect2, useRef as useRef4 } from "react";
|
|
1081
1118
|
|
|
1082
1119
|
// src/components/interaction/Dialog/Dialog.module.css
|
|
1083
|
-
var Dialog_default = {"dialog":"
|
|
1120
|
+
var Dialog_default = {"dialog":"bds015-dialog","closeForm":"bds015-closeForm","closeButton":"bds015-closeButton"};
|
|
1084
1121
|
|
|
1085
1122
|
// src/components/interaction/Dialog/Dialog.tsx
|
|
1086
1123
|
import { cn as cn23 } from "@boostdev/design-system-foundation";
|
|
1087
1124
|
import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1088
|
-
function Dialog({ children,
|
|
1125
|
+
function Dialog({ children, isOpen = false, className, onClose }) {
|
|
1089
1126
|
const dialogRef = useRef4(null);
|
|
1090
1127
|
useEffect2(() => {
|
|
1091
1128
|
const dialog = dialogRef.current;
|
|
1092
1129
|
if (!dialog) return;
|
|
1093
|
-
if (
|
|
1130
|
+
if (isOpen) {
|
|
1094
1131
|
dialog.showModal();
|
|
1095
1132
|
} else if (dialog.open) {
|
|
1096
1133
|
dialog.close();
|
|
1097
1134
|
}
|
|
1098
|
-
}, [
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1135
|
+
}, [isOpen]);
|
|
1136
|
+
const handleBackdropClick = (e) => {
|
|
1137
|
+
if (e.target === dialogRef.current) onClose?.();
|
|
1138
|
+
};
|
|
1139
|
+
const handleCancel = (e) => {
|
|
1140
|
+
e.preventDefault();
|
|
1141
|
+
onClose?.();
|
|
1142
|
+
};
|
|
1143
|
+
return /* @__PURE__ */ jsxs17(
|
|
1144
|
+
"dialog",
|
|
1145
|
+
{
|
|
1146
|
+
ref: dialogRef,
|
|
1147
|
+
className: cn23(className, Dialog_default.dialog),
|
|
1148
|
+
onClick: handleBackdropClick,
|
|
1149
|
+
onCancel: handleCancel,
|
|
1150
|
+
children: [
|
|
1151
|
+
/* @__PURE__ */ jsx24("form", { method: "dialog", className: Dialog_default.closeForm, children: /* @__PURE__ */ jsx24(
|
|
1152
|
+
"button",
|
|
1153
|
+
{
|
|
1154
|
+
type: "submit",
|
|
1155
|
+
className: Dialog_default.closeButton,
|
|
1156
|
+
onClick: onClose,
|
|
1157
|
+
"aria-label": "Close dialog",
|
|
1158
|
+
children: /* @__PURE__ */ jsx24("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
|
|
1159
|
+
}
|
|
1160
|
+
) }),
|
|
1161
|
+
children
|
|
1162
|
+
]
|
|
1163
|
+
}
|
|
1164
|
+
);
|
|
1112
1165
|
}
|
|
1113
1166
|
|
|
1114
1167
|
// src/components/interaction/Drawer/Drawer.tsx
|
|
1115
1168
|
import { useEffect as useEffect3, useRef as useRef5 } from "react";
|
|
1116
1169
|
|
|
1117
1170
|
// src/components/interaction/Drawer/Drawer.module.css
|
|
1118
|
-
var Drawer_default = {"drawer":"
|
|
1171
|
+
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"};
|
|
1119
1172
|
|
|
1120
1173
|
// src/components/interaction/Drawer/Drawer.tsx
|
|
1121
1174
|
import { cn as cn24 } from "@boostdev/design-system-foundation";
|
|
@@ -1184,7 +1237,7 @@ import {
|
|
|
1184
1237
|
} from "react";
|
|
1185
1238
|
|
|
1186
1239
|
// src/components/interaction/DropdownMenu/DropdownMenu.module.css
|
|
1187
|
-
var DropdownMenu_default = {"wrapper":"
|
|
1240
|
+
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"};
|
|
1188
1241
|
|
|
1189
1242
|
// src/components/interaction/DropdownMenu/DropdownMenu.tsx
|
|
1190
1243
|
import { cn as cn25 } from "@boostdev/design-system-foundation";
|
|
@@ -1304,7 +1357,7 @@ import {
|
|
|
1304
1357
|
} from "react";
|
|
1305
1358
|
|
|
1306
1359
|
// src/components/interaction/Popover/Popover.module.css
|
|
1307
|
-
var Popover_default = {"wrapper":"
|
|
1360
|
+
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"};
|
|
1308
1361
|
|
|
1309
1362
|
// src/components/interaction/Popover/Popover.tsx
|
|
1310
1363
|
import { cn as cn26 } from "@boostdev/design-system-foundation";
|
|
@@ -1360,7 +1413,7 @@ function Popover({
|
|
|
1360
1413
|
}
|
|
1361
1414
|
|
|
1362
1415
|
// src/components/interaction/Rating/Rating.module.css
|
|
1363
|
-
var Rating_default = {"rating":"
|
|
1416
|
+
var Rating_default = {"rating":"bds015-rating","star":"bds015-star","--filled":"bds015---filled"};
|
|
1364
1417
|
|
|
1365
1418
|
// src/components/interaction/Rating/Rating.tsx
|
|
1366
1419
|
import { cn as cn27 } from "@boostdev/design-system-foundation";
|
|
@@ -1391,7 +1444,7 @@ function Rating({ value, max = 5, className }) {
|
|
|
1391
1444
|
import { useState as useState7, useEffect as useEffect6, createContext, useContext, useCallback, useMemo as useMemo2 } from "react";
|
|
1392
1445
|
|
|
1393
1446
|
// src/components/interaction/Toast/Toast.module.css
|
|
1394
|
-
var Toast_default = {"toastContainer":"
|
|
1447
|
+
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"};
|
|
1395
1448
|
|
|
1396
1449
|
// src/components/interaction/Toast/Toast.tsx
|
|
1397
1450
|
import { cn as cn28 } from "@boostdev/design-system-foundation";
|
|
@@ -1424,7 +1477,10 @@ function ToastItem({ toast, onRemove }) {
|
|
|
1424
1477
|
const timer = setTimeout(onRemove, 5e3);
|
|
1425
1478
|
return () => clearTimeout(timer);
|
|
1426
1479
|
}, [onRemove]);
|
|
1427
|
-
return /* @__PURE__ */
|
|
1480
|
+
return /* @__PURE__ */ jsxs21("div", { className: cn28(Toast_default.toast, Toast_default[`--variant_${toast.variant}`]), role: "status", children: [
|
|
1481
|
+
/* @__PURE__ */ jsx29("span", { className: Toast_default.message, children: toast.message }),
|
|
1482
|
+
/* @__PURE__ */ jsx29("button", { type: "button", className: Toast_default.closeButton, onClick: onRemove, "aria-label": "Dismiss", children: /* @__PURE__ */ jsx29("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx29("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) }) })
|
|
1483
|
+
] });
|
|
1428
1484
|
}
|
|
1429
1485
|
function useToast() {
|
|
1430
1486
|
const context = useContext(ToastContext);
|
|
@@ -1438,20 +1494,20 @@ function useToast() {
|
|
|
1438
1494
|
import { useId as useId9 } from "react";
|
|
1439
1495
|
|
|
1440
1496
|
// src/components/interaction/form/Checkbox/Checkbox.module.css
|
|
1441
|
-
var Checkbox_default = {"checkboxGroup":"
|
|
1497
|
+
var Checkbox_default = {"checkboxGroup":"bds015-checkboxGroup","inputWrapper":"bds015-inputWrapper","checkbox":"bds015-checkbox","checkboxError":"bds015-checkboxError"};
|
|
1442
1498
|
|
|
1443
1499
|
// src/components/interaction/form/atoms/Message.module.css
|
|
1444
|
-
var Message_default = {"error":"
|
|
1500
|
+
var Message_default = {"error":"bds015-error","hint":"bds015-hint"};
|
|
1445
1501
|
|
|
1446
1502
|
// src/components/interaction/form/atoms/Message.tsx
|
|
1447
1503
|
import { jsx as jsx30 } from "react/jsx-runtime";
|
|
1448
1504
|
var Message = ({ message, type, inputId }) => {
|
|
1449
1505
|
if (!message) return null;
|
|
1450
|
-
return /* @__PURE__ */ jsx30("
|
|
1506
|
+
return /* @__PURE__ */ jsx30("p", { id: inputId + type, className: Message_default[type], children: message });
|
|
1451
1507
|
};
|
|
1452
1508
|
|
|
1453
1509
|
// src/components/interaction/form/atoms/Label.module.css
|
|
1454
|
-
var Label_default = {"label":"
|
|
1510
|
+
var Label_default = {"label":"bds015-label"};
|
|
1455
1511
|
|
|
1456
1512
|
// src/components/interaction/form/atoms/Label.tsx
|
|
1457
1513
|
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
@@ -1463,7 +1519,7 @@ var Label = ({ label, id }) => {
|
|
|
1463
1519
|
import { cn as cn30 } from "@boostdev/design-system-foundation";
|
|
1464
1520
|
|
|
1465
1521
|
// src/components/interaction/form/atoms/InputContainer.module.css
|
|
1466
|
-
var InputContainer_default = {"container":"
|
|
1522
|
+
var InputContainer_default = {"container":"bds015-container"};
|
|
1467
1523
|
|
|
1468
1524
|
// src/components/interaction/form/atoms/InputContainer.tsx
|
|
1469
1525
|
import { cn as cn29 } from "@boostdev/design-system-foundation";
|
|
@@ -1478,13 +1534,14 @@ function Checkbox({ label, name, error, hint, className, ...props }) {
|
|
|
1478
1534
|
const id = name + useId9();
|
|
1479
1535
|
const hintId = id + "hint";
|
|
1480
1536
|
const errorId = id + "error";
|
|
1481
|
-
const describedBy =
|
|
1537
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1482
1538
|
return /* @__PURE__ */ jsxs22(InputContainer, { className: cn30(Checkbox_default.checkboxGroup, className), children: [
|
|
1483
1539
|
/* @__PURE__ */ jsxs22("div", { className: Checkbox_default.inputWrapper, children: [
|
|
1484
1540
|
/* @__PURE__ */ jsx33(
|
|
1485
1541
|
"input",
|
|
1486
1542
|
{
|
|
1487
1543
|
"aria-describedby": describedBy,
|
|
1544
|
+
"aria-invalid": !!error,
|
|
1488
1545
|
type: "checkbox",
|
|
1489
1546
|
id,
|
|
1490
1547
|
name,
|
|
@@ -1504,11 +1561,12 @@ import {
|
|
|
1504
1561
|
useEffect as useEffect7,
|
|
1505
1562
|
useId as useId10,
|
|
1506
1563
|
useRef as useRef8,
|
|
1507
|
-
useState as useState8
|
|
1564
|
+
useState as useState8,
|
|
1565
|
+
useMemo as useMemo3
|
|
1508
1566
|
} from "react";
|
|
1509
1567
|
|
|
1510
1568
|
// src/components/interaction/form/Combobox/Combobox.module.css
|
|
1511
|
-
var Combobox_default = {"formGroup":"
|
|
1569
|
+
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"};
|
|
1512
1570
|
|
|
1513
1571
|
// src/components/interaction/form/Combobox/Combobox.tsx
|
|
1514
1572
|
import { cn as cn31 } from "@boostdev/design-system-foundation";
|
|
@@ -1520,6 +1578,7 @@ function Combobox({
|
|
|
1520
1578
|
placeholder,
|
|
1521
1579
|
value,
|
|
1522
1580
|
onChange,
|
|
1581
|
+
disabled = false,
|
|
1523
1582
|
error,
|
|
1524
1583
|
hint,
|
|
1525
1584
|
className
|
|
@@ -1528,9 +1587,12 @@ function Combobox({
|
|
|
1528
1587
|
const listboxId = id + "listbox";
|
|
1529
1588
|
const hintId = id + "hint";
|
|
1530
1589
|
const errorId = id + "error";
|
|
1531
|
-
const describedBy = error
|
|
1532
|
-
const selectedOption = options.find((o) => o.value === value);
|
|
1590
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1591
|
+
const selectedOption = useMemo3(() => options.find((o) => o.value === value), [options, value]);
|
|
1533
1592
|
const [inputValue, setInputValue] = useState8(selectedOption?.label ?? "");
|
|
1593
|
+
useEffect7(() => {
|
|
1594
|
+
setInputValue(selectedOption?.label ?? "");
|
|
1595
|
+
}, [selectedOption]);
|
|
1534
1596
|
const [isOpen, setIsOpen] = useState8(false);
|
|
1535
1597
|
const [highlightedIndex, setHighlightedIndex] = useState8(-1);
|
|
1536
1598
|
const containerRef = useRef8(null);
|
|
@@ -1607,6 +1669,7 @@ function Combobox({
|
|
|
1607
1669
|
autoComplete: "off",
|
|
1608
1670
|
placeholder,
|
|
1609
1671
|
value: inputValue,
|
|
1672
|
+
disabled,
|
|
1610
1673
|
className: cn31(Combobox_default.input, error ? Combobox_default.inputError : void 0),
|
|
1611
1674
|
onChange: handleInputChange,
|
|
1612
1675
|
onKeyDown: handleKeyDown,
|
|
@@ -1654,7 +1717,7 @@ function Combobox({
|
|
|
1654
1717
|
import { useId as useId11, useRef as useRef9, useState as useState9 } from "react";
|
|
1655
1718
|
|
|
1656
1719
|
// src/components/interaction/form/FileInput/FileInput.module.css
|
|
1657
|
-
var FileInput_default = {"formGroup":"
|
|
1720
|
+
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"};
|
|
1658
1721
|
|
|
1659
1722
|
// src/components/interaction/form/FileInput/FileInput.tsx
|
|
1660
1723
|
import { cn as cn32 } from "@boostdev/design-system-foundation";
|
|
@@ -1673,10 +1736,19 @@ function FileInput({
|
|
|
1673
1736
|
const uid = name + useId11();
|
|
1674
1737
|
const hintId = uid + "hint";
|
|
1675
1738
|
const errorId = uid + "error";
|
|
1676
|
-
const describedBy = error
|
|
1739
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1677
1740
|
const inputRef = useRef9(null);
|
|
1678
1741
|
const [isDragging, setIsDragging] = useState9(false);
|
|
1679
1742
|
const [fileNames, setFileNames] = useState9([]);
|
|
1743
|
+
const isFileAccepted = (file) => {
|
|
1744
|
+
if (!accept) return true;
|
|
1745
|
+
return accept.split(",").some((token) => {
|
|
1746
|
+
const t = token.trim();
|
|
1747
|
+
if (t.startsWith(".")) return file.name.toLowerCase().endsWith(t.toLowerCase());
|
|
1748
|
+
if (t.endsWith("/*")) return file.type.startsWith(t.slice(0, -1));
|
|
1749
|
+
return file.type === t;
|
|
1750
|
+
});
|
|
1751
|
+
};
|
|
1680
1752
|
const handleFiles = (files) => {
|
|
1681
1753
|
if (!files) return;
|
|
1682
1754
|
setFileNames(Array.from(files).map((f) => f.name));
|
|
@@ -1687,7 +1759,10 @@ function FileInput({
|
|
|
1687
1759
|
e.preventDefault();
|
|
1688
1760
|
setIsDragging(false);
|
|
1689
1761
|
if (disabled) return;
|
|
1690
|
-
|
|
1762
|
+
const dt = new DataTransfer();
|
|
1763
|
+
Array.from(e.dataTransfer.files).filter(isFileAccepted).forEach((f) => dt.items.add(f));
|
|
1764
|
+
if (inputRef.current) inputRef.current.files = dt.files;
|
|
1765
|
+
handleFiles(dt.files.length > 0 ? dt.files : null);
|
|
1691
1766
|
};
|
|
1692
1767
|
const handleDragOver = (e) => {
|
|
1693
1768
|
e.preventDefault();
|
|
@@ -1739,7 +1814,7 @@ function FileInput({
|
|
|
1739
1814
|
import { useId as useId12 } from "react";
|
|
1740
1815
|
|
|
1741
1816
|
// src/components/interaction/form/FormInput/FormInput.module.css
|
|
1742
|
-
var FormInput_default = {"formGroup":"
|
|
1817
|
+
var FormInput_default = {"formGroup":"bds015-formGroup","input":"bds015-input","inputError":"bds015-inputError"};
|
|
1743
1818
|
|
|
1744
1819
|
// src/components/interaction/form/FormInput/FormInput.tsx
|
|
1745
1820
|
import { cn as cn33 } from "@boostdev/design-system-foundation";
|
|
@@ -1756,7 +1831,7 @@ function FormInput({
|
|
|
1756
1831
|
const id = name + useId12();
|
|
1757
1832
|
const hintId = id + "hint";
|
|
1758
1833
|
const errorId = id + "error";
|
|
1759
|
-
const describedBy =
|
|
1834
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1760
1835
|
return /* @__PURE__ */ jsxs25(InputContainer, { className: cn33(FormInput_default.formGroup, className), children: [
|
|
1761
1836
|
/* @__PURE__ */ jsx36(Label, { id, label }),
|
|
1762
1837
|
/* @__PURE__ */ jsx36(
|
|
@@ -1777,10 +1852,10 @@ function FormInput({
|
|
|
1777
1852
|
}
|
|
1778
1853
|
|
|
1779
1854
|
// src/components/interaction/form/NumberInput/NumberInput.tsx
|
|
1780
|
-
import { useId as useId13, useRef as useRef10 } from "react";
|
|
1855
|
+
import { useId as useId13, useRef as useRef10, useState as useState10 } from "react";
|
|
1781
1856
|
|
|
1782
1857
|
// src/components/interaction/form/NumberInput/NumberInput.module.css
|
|
1783
|
-
var NumberInput_default = {"formGroup":"
|
|
1858
|
+
var NumberInput_default = {"formGroup":"bds015-formGroup","inputRow":"bds015-inputRow","input":"bds015-input","inputError":"bds015-inputError","stepper":"bds015-stepper"};
|
|
1784
1859
|
|
|
1785
1860
|
// src/components/interaction/form/NumberInput/NumberInput.tsx
|
|
1786
1861
|
import { cn as cn34 } from "@boostdev/design-system-foundation";
|
|
@@ -1802,18 +1877,18 @@ function NumberInput({
|
|
|
1802
1877
|
const uid = name + useId13();
|
|
1803
1878
|
const hintId = uid + "hint";
|
|
1804
1879
|
const errorId = uid + "error";
|
|
1805
|
-
const describedBy = error
|
|
1880
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1806
1881
|
const inputRef = useRef10(null);
|
|
1882
|
+
const isControlled = value !== void 0;
|
|
1883
|
+
const [internalValue, setInternalValue] = useState10(defaultValue ?? 0);
|
|
1884
|
+
const currentValue = isControlled ? value : internalValue;
|
|
1807
1885
|
const clamp = (v) => {
|
|
1808
1886
|
const withMin = min !== void 0 ? Math.max(min, v) : v;
|
|
1809
|
-
|
|
1810
|
-
return withMax;
|
|
1887
|
+
return max !== void 0 ? Math.min(max, withMin) : withMin;
|
|
1811
1888
|
};
|
|
1812
1889
|
const adjust = (delta) => {
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
const next = clamp(current + delta);
|
|
1816
|
-
inputRef.current.value = String(next);
|
|
1890
|
+
const next = clamp(currentValue + delta);
|
|
1891
|
+
if (!isControlled) setInternalValue(next);
|
|
1817
1892
|
onChange?.(next);
|
|
1818
1893
|
};
|
|
1819
1894
|
return /* @__PURE__ */ jsxs26(InputContainer, { className: cn34(NumberInput_default.formGroup, className), children: [
|
|
@@ -1825,7 +1900,7 @@ function NumberInput({
|
|
|
1825
1900
|
type: "button",
|
|
1826
1901
|
className: NumberInput_default.stepper,
|
|
1827
1902
|
"aria-label": "Decrease",
|
|
1828
|
-
disabled: disabled || min !== void 0 &&
|
|
1903
|
+
disabled: disabled || min !== void 0 && currentValue <= min,
|
|
1829
1904
|
onClick: () => adjust(-step),
|
|
1830
1905
|
tabIndex: -1,
|
|
1831
1906
|
children: /* @__PURE__ */ jsx37("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx37("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12h14" }) })
|
|
@@ -1838,8 +1913,7 @@ function NumberInput({
|
|
|
1838
1913
|
id: uid,
|
|
1839
1914
|
type: "number",
|
|
1840
1915
|
name,
|
|
1841
|
-
defaultValue,
|
|
1842
|
-
value,
|
|
1916
|
+
...isControlled ? { value } : { defaultValue },
|
|
1843
1917
|
min,
|
|
1844
1918
|
max,
|
|
1845
1919
|
step,
|
|
@@ -1847,7 +1921,11 @@ function NumberInput({
|
|
|
1847
1921
|
"aria-invalid": !!error,
|
|
1848
1922
|
"aria-describedby": describedBy,
|
|
1849
1923
|
className: cn34(NumberInput_default.input, error ? NumberInput_default.inputError : void 0),
|
|
1850
|
-
onChange: (e) =>
|
|
1924
|
+
onChange: (e) => {
|
|
1925
|
+
const v = parseFloat(e.target.value);
|
|
1926
|
+
if (!isControlled) setInternalValue(isNaN(v) ? 0 : v);
|
|
1927
|
+
onChange?.(v);
|
|
1928
|
+
}
|
|
1851
1929
|
}
|
|
1852
1930
|
),
|
|
1853
1931
|
/* @__PURE__ */ jsx37(
|
|
@@ -1856,7 +1934,7 @@ function NumberInput({
|
|
|
1856
1934
|
type: "button",
|
|
1857
1935
|
className: NumberInput_default.stepper,
|
|
1858
1936
|
"aria-label": "Increase",
|
|
1859
|
-
disabled: disabled || max !== void 0 &&
|
|
1937
|
+
disabled: disabled || max !== void 0 && currentValue >= max,
|
|
1860
1938
|
onClick: () => adjust(step),
|
|
1861
1939
|
tabIndex: -1,
|
|
1862
1940
|
children: /* @__PURE__ */ jsx37("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx37("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 5v14M5 12h14" }) })
|
|
@@ -1872,7 +1950,7 @@ function NumberInput({
|
|
|
1872
1950
|
import { useId as useId14 } from "react";
|
|
1873
1951
|
|
|
1874
1952
|
// src/components/interaction/form/Radio/Radio.module.css
|
|
1875
|
-
var Radio_default = {"radioGroup":"
|
|
1953
|
+
var Radio_default = {"radioGroup":"bds015-radioGroup","inputWrapper":"bds015-inputWrapper","radio":"bds015-radio","radioError":"bds015-radioError"};
|
|
1876
1954
|
|
|
1877
1955
|
// src/components/interaction/form/Radio/Radio.tsx
|
|
1878
1956
|
import { cn as cn35 } from "@boostdev/design-system-foundation";
|
|
@@ -1881,13 +1959,14 @@ function Radio({ label, name, error, hint, className, ...props }) {
|
|
|
1881
1959
|
const id = name + useId14();
|
|
1882
1960
|
const hintId = id + "hint";
|
|
1883
1961
|
const errorId = id + "error";
|
|
1884
|
-
const describedBy =
|
|
1962
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1885
1963
|
return /* @__PURE__ */ jsxs27(InputContainer, { className: cn35(Radio_default.radioGroup, className), children: [
|
|
1886
1964
|
/* @__PURE__ */ jsxs27("div", { className: Radio_default.inputWrapper, children: [
|
|
1887
1965
|
/* @__PURE__ */ jsx38(
|
|
1888
1966
|
"input",
|
|
1889
1967
|
{
|
|
1890
1968
|
"aria-describedby": describedBy,
|
|
1969
|
+
"aria-invalid": !!error,
|
|
1891
1970
|
type: "radio",
|
|
1892
1971
|
id,
|
|
1893
1972
|
name,
|
|
@@ -1906,7 +1985,7 @@ function Radio({ label, name, error, hint, className, ...props }) {
|
|
|
1906
1985
|
import { useId as useId15 } from "react";
|
|
1907
1986
|
|
|
1908
1987
|
// src/components/interaction/form/Select/Select.module.css
|
|
1909
|
-
var Select_default = {"formGroup":"
|
|
1988
|
+
var Select_default = {"formGroup":"bds015-formGroup","selectWrapper":"bds015-selectWrapper","select":"bds015-select","selectError":"bds015-selectError","chevron":"bds015-chevron"};
|
|
1910
1989
|
|
|
1911
1990
|
// src/components/interaction/form/Select/Select.tsx
|
|
1912
1991
|
import { cn as cn36 } from "@boostdev/design-system-foundation";
|
|
@@ -1924,7 +2003,7 @@ function Select({
|
|
|
1924
2003
|
const id = name + useId15();
|
|
1925
2004
|
const hintId = id + "hint";
|
|
1926
2005
|
const errorId = id + "error";
|
|
1927
|
-
const describedBy = error
|
|
2006
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1928
2007
|
return /* @__PURE__ */ jsxs28(InputContainer, { className: cn36(Select_default.formGroup, className), children: [
|
|
1929
2008
|
/* @__PURE__ */ jsx39(Label, { id, label }),
|
|
1930
2009
|
/* @__PURE__ */ jsxs28("div", { className: Select_default.selectWrapper, children: [
|
|
@@ -1938,7 +2017,7 @@ function Select({
|
|
|
1938
2017
|
className: cn36(Select_default.select, error ? Select_default.selectError : void 0),
|
|
1939
2018
|
...props,
|
|
1940
2019
|
children: [
|
|
1941
|
-
placeholder && /* @__PURE__ */ jsx39("option", { value: "", disabled: true, children: placeholder }),
|
|
2020
|
+
placeholder && /* @__PURE__ */ jsx39("option", { value: "", disabled: true, hidden: true, children: placeholder }),
|
|
1942
2021
|
options.map(({ value, label: optLabel, disabled }) => /* @__PURE__ */ jsx39("option", { value, disabled, children: optLabel }, value))
|
|
1943
2022
|
]
|
|
1944
2023
|
}
|
|
@@ -1951,10 +2030,10 @@ function Select({
|
|
|
1951
2030
|
}
|
|
1952
2031
|
|
|
1953
2032
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
1954
|
-
import { useId as useId16, useState as
|
|
2033
|
+
import { useId as useId16, useState as useState11 } from "react";
|
|
1955
2034
|
|
|
1956
2035
|
// src/components/interaction/form/Slider/Slider.module.css
|
|
1957
|
-
var Slider_default = {"formGroup":"
|
|
2036
|
+
var Slider_default = {"formGroup":"bds015-formGroup","labelRow":"bds015-labelRow","value":"bds015-value","slider":"bds015-slider","sliderError":"bds015-sliderError"};
|
|
1958
2037
|
|
|
1959
2038
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
1960
2039
|
import { cn as cn37 } from "@boostdev/design-system-foundation";
|
|
@@ -1974,12 +2053,13 @@ function Slider({
|
|
|
1974
2053
|
const id = name + useId16();
|
|
1975
2054
|
const hintId = id + "hint";
|
|
1976
2055
|
const errorId = id + "error";
|
|
1977
|
-
const describedBy = error
|
|
1978
|
-
const
|
|
1979
|
-
const [
|
|
2056
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2057
|
+
const isControlled = props.value !== void 0;
|
|
2058
|
+
const [internalValue, setInternalValue] = useState11(Number(props.defaultValue ?? min));
|
|
2059
|
+
const currentValue = isControlled ? Number(props.value) : internalValue;
|
|
1980
2060
|
const fillPct = (currentValue - min) / (max - min) * 100;
|
|
1981
2061
|
const handleChange = (e) => {
|
|
1982
|
-
|
|
2062
|
+
if (!isControlled) setInternalValue(Number(e.target.value));
|
|
1983
2063
|
onChange?.(e);
|
|
1984
2064
|
};
|
|
1985
2065
|
return /* @__PURE__ */ jsxs29(InputContainer, { className: cn37(Slider_default.formGroup, className), children: [
|
|
@@ -2014,7 +2094,7 @@ function Slider({
|
|
|
2014
2094
|
import { useId as useId17 } from "react";
|
|
2015
2095
|
|
|
2016
2096
|
// src/components/interaction/form/Switch/Switch.module.css
|
|
2017
|
-
var Switch_default = {"switchGroup":"
|
|
2097
|
+
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"};
|
|
2018
2098
|
|
|
2019
2099
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2020
2100
|
import { cn as cn38 } from "@boostdev/design-system-foundation";
|
|
@@ -2031,7 +2111,7 @@ function Switch({
|
|
|
2031
2111
|
const id = name + useId17();
|
|
2032
2112
|
const hintId = id + "hint";
|
|
2033
2113
|
const errorId = id + "error";
|
|
2034
|
-
const describedBy = error
|
|
2114
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2035
2115
|
return /* @__PURE__ */ jsxs30(InputContainer, { className: cn38(Switch_default.switchGroup, Switch_default[`--size_${size}`], className), children: [
|
|
2036
2116
|
/* @__PURE__ */ jsxs30("div", { className: Switch_default.inputWrapper, children: [
|
|
2037
2117
|
/* @__PURE__ */ jsxs30("div", { className: Switch_default.trackWrapper, children: [
|
|
@@ -2060,7 +2140,7 @@ function Switch({
|
|
|
2060
2140
|
import { useId as useId18 } from "react";
|
|
2061
2141
|
|
|
2062
2142
|
// src/components/interaction/form/Textarea/Textarea.module.css
|
|
2063
|
-
var Textarea_default = {"formGroup":"
|
|
2143
|
+
var Textarea_default = {"formGroup":"bds015-formGroup","textarea":"bds015-textarea","textareaError":"bds015-textareaError"};
|
|
2064
2144
|
|
|
2065
2145
|
// src/components/interaction/form/Textarea/Textarea.tsx
|
|
2066
2146
|
import { cn as cn39 } from "@boostdev/design-system-foundation";
|
|
@@ -2076,7 +2156,7 @@ function Textarea({
|
|
|
2076
2156
|
const id = name + useId18();
|
|
2077
2157
|
const hintId = id + "hint";
|
|
2078
2158
|
const errorId = id + "error";
|
|
2079
|
-
const describedBy = error
|
|
2159
|
+
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2080
2160
|
return /* @__PURE__ */ jsxs31(InputContainer, { className: cn39(Textarea_default.formGroup, className), children: [
|
|
2081
2161
|
/* @__PURE__ */ jsx42(Label, { id, label }),
|
|
2082
2162
|
/* @__PURE__ */ jsx42(
|
|
@@ -2096,17 +2176,17 @@ function Textarea({
|
|
|
2096
2176
|
}
|
|
2097
2177
|
|
|
2098
2178
|
// src/components/layout/ButtonGroup/ButtonGroup.module.css
|
|
2099
|
-
var ButtonGroup_default = {"buttonGroup":"
|
|
2179
|
+
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"};
|
|
2100
2180
|
|
|
2101
2181
|
// src/components/layout/ButtonGroup/ButtonGroup.tsx
|
|
2102
2182
|
import { cn as cn40 } from "@boostdev/design-system-foundation";
|
|
2103
2183
|
import { jsx as jsx43 } from "react/jsx-runtime";
|
|
2104
2184
|
function ButtonGroup({ children, className, variant }) {
|
|
2105
|
-
return /* @__PURE__ */ jsx43("div", { className: cn40(ButtonGroup_default.buttonGroup, className, variant && ButtonGroup_default[`--
|
|
2185
|
+
return /* @__PURE__ */ jsx43("div", { className: cn40(ButtonGroup_default.buttonGroup, className, variant && ButtonGroup_default[`--variant_${variant}`]), children: /* @__PURE__ */ jsx43("div", { className: ButtonGroup_default.container, children }) });
|
|
2106
2186
|
}
|
|
2107
2187
|
|
|
2108
2188
|
// src/components/layout/Card/Card.module.css
|
|
2109
|
-
var Card_default = {"card":"
|
|
2189
|
+
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"};
|
|
2110
2190
|
|
|
2111
2191
|
// src/components/layout/Card/Card.tsx
|
|
2112
2192
|
import { cn as cn41 } from "@boostdev/design-system-foundation";
|
|
@@ -2118,7 +2198,8 @@ function Card({
|
|
|
2118
2198
|
padding = "medium",
|
|
2119
2199
|
textAlign = "start",
|
|
2120
2200
|
style,
|
|
2121
|
-
onClick
|
|
2201
|
+
onClick,
|
|
2202
|
+
"aria-label": ariaLabel
|
|
2122
2203
|
}) {
|
|
2123
2204
|
const classNames = cn41(
|
|
2124
2205
|
Card_default.card,
|
|
@@ -2135,6 +2216,7 @@ function Card({
|
|
|
2135
2216
|
className: classNames,
|
|
2136
2217
|
onClick,
|
|
2137
2218
|
style,
|
|
2219
|
+
"aria-label": ariaLabel,
|
|
2138
2220
|
...onClick && { type: "button" },
|
|
2139
2221
|
children
|
|
2140
2222
|
}
|
|
@@ -2142,7 +2224,7 @@ function Card({
|
|
|
2142
2224
|
}
|
|
2143
2225
|
|
|
2144
2226
|
// src/components/layout/SectionHeader/SectionHeader.module.css
|
|
2145
|
-
var SectionHeader_default = {"sectionHeader":"
|
|
2227
|
+
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"};
|
|
2146
2228
|
|
|
2147
2229
|
// src/components/layout/SectionHeader/SectionHeader.tsx
|
|
2148
2230
|
import { cn as cn42 } from "@boostdev/design-system-foundation";
|
|
@@ -2163,7 +2245,7 @@ function SectionHeader({
|
|
|
2163
2245
|
}
|
|
2164
2246
|
|
|
2165
2247
|
// src/components/layout/IconWrapper/IconWrapper.module.css
|
|
2166
|
-
var IconWrapper_default = {"wrapper":"
|
|
2248
|
+
var IconWrapper_default = {"wrapper":"bds015-wrapper"};
|
|
2167
2249
|
|
|
2168
2250
|
// src/components/layout/IconWrapper/IconWrapper.tsx
|
|
2169
2251
|
import { cn as cn43 } from "@boostdev/design-system-foundation";
|