@boostdev/design-system-components 1.2.1 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +21 -0
- package/README.md +15 -15
- package/dist/client.cjs +141 -120
- package/dist/client.css +468 -468
- package/dist/client.d.cts +71 -96
- package/dist/client.d.ts +71 -96
- package/dist/client.js +141 -120
- package/dist/index.cjs +141 -120
- package/dist/index.css +468 -468
- package/dist/index.d.cts +71 -96
- package/dist/index.d.ts +71 -96
- package/dist/index.js +141 -120
- package/package.json +1 -1
- package/src/components/interaction/Command/Command.tsx +4 -3
- package/src/components/interaction/Dialog/Dialog.tsx +4 -5
- package/src/components/interaction/Drawer/Drawer.spec.tsx +3 -3
- package/src/components/interaction/Drawer/Drawer.tsx +4 -7
- package/src/components/interaction/DropdownMenu/DropdownMenu.tsx +4 -2
- package/src/components/interaction/Popover/Popover.tsx +4 -3
- package/src/components/interaction/Rating/Rating.tsx +4 -2
- package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx +4 -6
- package/src/components/interaction/form/Combobox/Combobox.tsx +4 -2
- package/src/components/interaction/form/FileInput/FileInput.tsx +4 -3
- package/src/components/interaction/form/NumberInput/NumberInput.tsx +4 -3
- package/src/components/interaction/form/RadioGroup/RadioGroup.tsx +4 -6
- package/src/components/interaction/form/SegmentedControl/SegmentedControl.tsx +4 -6
- package/src/components/interaction/form/atoms/InputContainer.tsx +2 -2
- package/src/components/layout/ButtonGroup/ButtonGroup.tsx +4 -6
- package/src/components/layout/Card/Card.tsx +4 -10
- package/src/components/layout/IconWrapper/IconWrapper.tsx +4 -5
- package/src/components/layout/SectionHeader/SectionHeader.tsx +5 -4
- package/src/components/ui/Accordion/Accordion.tsx +4 -3
- package/src/components/ui/Alert/Alert.tsx +4 -3
- package/src/components/ui/Avatar/Avatar.tsx +5 -3
- package/src/components/ui/Badge/Badge.tsx +4 -5
- package/src/components/ui/Breadcrumb/Breadcrumb.tsx +4 -3
- package/src/components/ui/Calendar/Calendar.tsx +4 -4
- package/src/components/ui/Carousel/Carousel.tsx +4 -4
- package/src/components/ui/DescriptionList/DescriptionList.tsx +4 -4
- package/src/components/ui/Loading/Loading.tsx +4 -3
- package/src/components/ui/NotificationBanner/NotificationBanner.tsx +4 -2
- package/src/components/ui/Pagination/Pagination.tsx +4 -2
- package/src/components/ui/Progress/Progress.tsx +4 -2
- package/src/components/ui/ProgressCircle/ProgressCircle.tsx +4 -1
- package/src/components/ui/Separator/Separator.tsx +5 -3
- package/src/components/ui/Skeleton/Skeleton.tsx +4 -3
- package/src/components/ui/SkipLink/SkipLink.tsx +4 -5
- package/src/components/ui/Tabs/Tabs.tsx +4 -4
- package/src/components/ui/Tooltip/Tooltip.tsx +4 -2
- package/src/components/ui/Typography/Typography.tsx +4 -5
- package/src/stories/DesignSystem/Grid.mdx +2 -0
package/dist/index.cjs
CHANGED
|
@@ -86,7 +86,7 @@ module.exports = __toCommonJS(index_exports);
|
|
|
86
86
|
var import_react = require("react");
|
|
87
87
|
|
|
88
88
|
// src/components/ui/Accordion/Accordion.module.css
|
|
89
|
-
var Accordion_default = {"accordion":"
|
|
89
|
+
var Accordion_default = {"accordion":"bds122Accordion-accordion","item":"bds122Accordion-item","heading":"bds122Accordion-heading","trigger":"bds122Accordion-trigger","triggerLabel":"bds122Accordion-triggerLabel","chevron":"bds122Accordion-chevron","--open":"bds122Accordion---open","panel":"bds122Accordion-panel","panelContent":"bds122Accordion-panelContent"};
|
|
90
90
|
|
|
91
91
|
// src/components/ui/Accordion/Accordion.tsx
|
|
92
92
|
var import_design_system_foundation = require("@boostdev/design-system-foundation");
|
|
@@ -95,7 +95,8 @@ function Accordion({
|
|
|
95
95
|
items,
|
|
96
96
|
allowMultiple = false,
|
|
97
97
|
defaultOpen = [],
|
|
98
|
-
className
|
|
98
|
+
className,
|
|
99
|
+
...rest
|
|
99
100
|
}) {
|
|
100
101
|
const baseId = (0, import_react.useId)();
|
|
101
102
|
const [openIds, setOpenIds] = (0, import_react.useState)(defaultOpen);
|
|
@@ -106,7 +107,7 @@ function Accordion({
|
|
|
106
107
|
return allowMultiple ? [...prev, id] : [id];
|
|
107
108
|
});
|
|
108
109
|
};
|
|
109
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_design_system_foundation.cn)(Accordion_default.accordion, className), children: items.map((item) => {
|
|
110
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...rest, className: (0, import_design_system_foundation.cn)(Accordion_default.accordion, className), children: items.map((item) => {
|
|
110
111
|
const isOpen = openIds.includes(item.id);
|
|
111
112
|
const triggerId = `${baseId}-trigger-${item.id}`;
|
|
112
113
|
const panelId = `${baseId}-panel-${item.id}`;
|
|
@@ -154,7 +155,7 @@ function Accordion({
|
|
|
154
155
|
}
|
|
155
156
|
|
|
156
157
|
// src/components/ui/Alert/Alert.module.css
|
|
157
|
-
var Alert_default = {"alert":"
|
|
158
|
+
var Alert_default = {"alert":"bds122Alert-alert","--variant_info":"bds122Alert---variant_info","--variant_success":"bds122Alert---variant_success","--variant_warning":"bds122Alert---variant_warning","--variant_error":"bds122Alert---variant_error","icon":"bds122Alert-icon","content":"bds122Alert-content","title":"bds122Alert-title","dismiss":"bds122Alert-dismiss"};
|
|
158
159
|
|
|
159
160
|
// src/components/ui/Alert/Alert.tsx
|
|
160
161
|
var import_design_system_foundation2 = require("@boostdev/design-system-foundation");
|
|
@@ -165,12 +166,14 @@ function Alert({
|
|
|
165
166
|
title,
|
|
166
167
|
children,
|
|
167
168
|
onDismiss,
|
|
168
|
-
className
|
|
169
|
+
className,
|
|
170
|
+
...rest
|
|
169
171
|
}) {
|
|
170
172
|
const isUrgent = variant === "error" || variant === "warning";
|
|
171
173
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
172
174
|
"div",
|
|
173
175
|
{
|
|
176
|
+
...rest,
|
|
174
177
|
role: isUrgent ? "alert" : "status",
|
|
175
178
|
"aria-live": isUrgent ? "assertive" : "polite",
|
|
176
179
|
"aria-atomic": "true",
|
|
@@ -197,7 +200,7 @@ function Alert({
|
|
|
197
200
|
}
|
|
198
201
|
|
|
199
202
|
// src/components/ui/Avatar/Avatar.module.css
|
|
200
|
-
var Avatar_default = {"avatar":"
|
|
203
|
+
var Avatar_default = {"avatar":"bds122Avatar-avatar","--fallback":"bds122Avatar---fallback","--size_small":"bds122Avatar---size_small","--size_medium":"bds122Avatar---size_medium","--size_large":"bds122Avatar---size_large","image":"bds122Avatar-image","initials":"bds122Avatar-initials"};
|
|
201
204
|
|
|
202
205
|
// src/components/ui/Avatar/Avatar.tsx
|
|
203
206
|
var import_design_system_foundation3 = require("@boostdev/design-system-foundation");
|
|
@@ -205,15 +208,16 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
|
205
208
|
function getInitials(name) {
|
|
206
209
|
return name.split(" ").filter(Boolean).slice(0, 2).map((word) => word[0].toUpperCase()).join("");
|
|
207
210
|
}
|
|
208
|
-
function Avatar({ src, alt, name, size = "medium", className }) {
|
|
211
|
+
function Avatar({ src, alt, name, size = "medium", className, ...rest }) {
|
|
209
212
|
const sizeClass = Avatar_default[`--size_${size}`];
|
|
210
213
|
if (src) {
|
|
211
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: (0, import_design_system_foundation3.cn)(Avatar_default.avatar, sizeClass, className), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { src, alt: alt ?? name ?? "User avatar", className: Avatar_default.image }) });
|
|
214
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { ...rest, className: (0, import_design_system_foundation3.cn)(Avatar_default.avatar, sizeClass, className), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { src, alt: alt ?? name ?? "User avatar", className: Avatar_default.image }) });
|
|
212
215
|
}
|
|
213
216
|
const initials = name ? getInitials(name) : "";
|
|
214
217
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
215
218
|
"span",
|
|
216
219
|
{
|
|
220
|
+
...rest,
|
|
217
221
|
role: "img",
|
|
218
222
|
"aria-label": name ?? "User avatar",
|
|
219
223
|
className: (0, import_design_system_foundation3.cn)(Avatar_default.avatar, Avatar_default["--fallback"], sizeClass, className),
|
|
@@ -223,23 +227,23 @@ function Avatar({ src, alt, name, size = "medium", className }) {
|
|
|
223
227
|
}
|
|
224
228
|
|
|
225
229
|
// src/components/ui/Badge/Badge.module.css
|
|
226
|
-
var Badge_default = {"badge":"
|
|
230
|
+
var Badge_default = {"badge":"bds122Badge-badge","--variant_primary":"bds122Badge---variant_primary","--variant_secondary":"bds122Badge---variant_secondary","--variant_success":"bds122Badge---variant_success","--variant_error":"bds122Badge---variant_error","--variant_warning":"bds122Badge---variant_warning"};
|
|
227
231
|
|
|
228
232
|
// src/components/ui/Badge/Badge.tsx
|
|
229
233
|
var import_design_system_foundation4 = require("@boostdev/design-system-foundation");
|
|
230
234
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
231
|
-
function Badge({ children, variant = "primary", className }) {
|
|
232
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: (0, import_design_system_foundation4.cn)(Badge_default.badge, Badge_default[`--variant_${variant}`], className), children });
|
|
235
|
+
function Badge({ children, variant = "primary", className, ...rest }) {
|
|
236
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { ...rest, className: (0, import_design_system_foundation4.cn)(Badge_default.badge, Badge_default[`--variant_${variant}`], className), children });
|
|
233
237
|
}
|
|
234
238
|
|
|
235
239
|
// src/components/ui/Breadcrumb/Breadcrumb.module.css
|
|
236
|
-
var Breadcrumb_default = {"breadcrumb":"
|
|
240
|
+
var Breadcrumb_default = {"breadcrumb":"bds122Breadcrumb-breadcrumb","list":"bds122Breadcrumb-list","item":"bds122Breadcrumb-item","link":"bds122Breadcrumb-link","separator":"bds122Breadcrumb-separator","current":"bds122Breadcrumb-current"};
|
|
237
241
|
|
|
238
242
|
// src/components/ui/Breadcrumb/Breadcrumb.tsx
|
|
239
243
|
var import_design_system_foundation5 = require("@boostdev/design-system-foundation");
|
|
240
244
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
241
|
-
function Breadcrumb({ items, className }) {
|
|
242
|
-
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("nav", { "aria-label": "Breadcrumb", className: (0, import_design_system_foundation5.cn)(Breadcrumb_default.breadcrumb, className), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ol", { className: Breadcrumb_default.list, children: items.map((item, index) => {
|
|
245
|
+
function Breadcrumb({ items, className, ...rest }) {
|
|
246
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("nav", { ...rest, "aria-label": "Breadcrumb", className: (0, import_design_system_foundation5.cn)(Breadcrumb_default.breadcrumb, className), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ol", { className: Breadcrumb_default.list, children: items.map((item, index) => {
|
|
243
247
|
const isLast = index === items.length - 1;
|
|
244
248
|
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: [
|
|
245
249
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: item.href, className: Breadcrumb_default.link, children: item.label }),
|
|
@@ -249,7 +253,7 @@ function Breadcrumb({ items, className }) {
|
|
|
249
253
|
}
|
|
250
254
|
|
|
251
255
|
// src/components/ui/Collapsible/Collapsible.module.css
|
|
252
|
-
var Collapsible_default = {"collapsible":"
|
|
256
|
+
var Collapsible_default = {"collapsible":"bds122Collapsible-collapsible","summary":"bds122Collapsible-summary","summaryContent":"bds122Collapsible-summaryContent","icon":"bds122Collapsible-icon","content":"bds122Collapsible-content"};
|
|
253
257
|
|
|
254
258
|
// src/components/ui/Collapsible/Collapsible.tsx
|
|
255
259
|
var import_design_system_foundation6 = require("@boostdev/design-system-foundation");
|
|
@@ -290,7 +294,7 @@ function Collapsible({
|
|
|
290
294
|
var import_react2 = require("react");
|
|
291
295
|
|
|
292
296
|
// src/components/ui/Calendar/Calendar.module.css
|
|
293
|
-
var Calendar_default = {"calendar":"
|
|
297
|
+
var Calendar_default = {"calendar":"bds122Calendar-calendar","header":"bds122Calendar-header","monthYear":"bds122Calendar-monthYear","navBtn":"bds122Calendar-navBtn","grid":"bds122Calendar-grid","weekday":"bds122Calendar-weekday","empty":"bds122Calendar-empty","day":"bds122Calendar-day","disabled":"bds122Calendar-disabled","selected":"bds122Calendar-selected","today":"bds122Calendar-today"};
|
|
294
298
|
|
|
295
299
|
// src/components/ui/Calendar/Calendar.tsx
|
|
296
300
|
var import_design_system_foundation7 = require("@boostdev/design-system-foundation");
|
|
@@ -336,7 +340,7 @@ function getDaysInMonth(year, month) {
|
|
|
336
340
|
function getFirstDayOfMonth(year, month) {
|
|
337
341
|
return new Date(year, month, 1).getDay();
|
|
338
342
|
}
|
|
339
|
-
function Calendar({ value, defaultValue, min, max, onChange, className }) {
|
|
343
|
+
function Calendar({ value, defaultValue, min, max, onChange, className, ...rest }) {
|
|
340
344
|
const today = /* @__PURE__ */ new Date();
|
|
341
345
|
const controlled = value !== void 0;
|
|
342
346
|
const [internal, setInternal] = (0, import_react2.useState)(defaultValue);
|
|
@@ -390,7 +394,7 @@ function Calendar({ value, defaultValue, min, max, onChange, className }) {
|
|
|
390
394
|
...Array.from({ length: daysInMonth }, (_, i) => ({ day: i + 1 }))
|
|
391
395
|
];
|
|
392
396
|
while (cells.length % 7 !== 0) cells.push(null);
|
|
393
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: (0, import_design_system_foundation7.cn)(Calendar_default.calendar, className), role: "group", "aria-labelledby": titleId, children: [
|
|
397
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ...rest, className: (0, import_design_system_foundation7.cn)(Calendar_default.calendar, className), role: "group", "aria-labelledby": titleId, children: [
|
|
394
398
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: Calendar_default.header, children: [
|
|
395
399
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
396
400
|
"button",
|
|
@@ -465,12 +469,12 @@ function Calendar({ value, defaultValue, min, max, onChange, className }) {
|
|
|
465
469
|
var import_react3 = require("react");
|
|
466
470
|
|
|
467
471
|
// src/components/ui/Carousel/Carousel.module.css
|
|
468
|
-
var Carousel_default = {"carousel":"
|
|
472
|
+
var Carousel_default = {"carousel":"bds122Carousel-carousel","track":"bds122Carousel-track","slide":"bds122Carousel-slide","navBtn":"bds122Carousel-navBtn"};
|
|
469
473
|
|
|
470
474
|
// src/components/ui/Carousel/Carousel.tsx
|
|
471
475
|
var import_design_system_foundation8 = require("@boostdev/design-system-foundation");
|
|
472
476
|
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
473
|
-
function Carousel({ items, label, className }) {
|
|
477
|
+
function Carousel({ items, label, className, ...rest }) {
|
|
474
478
|
const trackRef = (0, import_react3.useRef)(null);
|
|
475
479
|
const listId = (0, import_react3.useId)();
|
|
476
480
|
const scroll = (direction) => {
|
|
@@ -481,7 +485,7 @@ function Carousel({ items, label, className }) {
|
|
|
481
485
|
behavior: "smooth"
|
|
482
486
|
});
|
|
483
487
|
};
|
|
484
|
-
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { "aria-label": label, className: (0, import_design_system_foundation8.cn)(Carousel_default.carousel, className), children: [
|
|
488
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { ...rest, "aria-label": label, className: (0, import_design_system_foundation8.cn)(Carousel_default.carousel, className), children: [
|
|
485
489
|
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
486
490
|
"button",
|
|
487
491
|
{
|
|
@@ -518,20 +522,20 @@ function Carousel({ items, label, className }) {
|
|
|
518
522
|
}
|
|
519
523
|
|
|
520
524
|
// src/components/ui/DescriptionList/DescriptionList.module.css
|
|
521
|
-
var DescriptionList_default = {"list":"
|
|
525
|
+
var DescriptionList_default = {"list":"bds122DescriptionList-list","group":"bds122DescriptionList-group","term":"bds122DescriptionList-term","details":"bds122DescriptionList-details","--layout_inline":"bds122DescriptionList---layout_inline"};
|
|
522
526
|
|
|
523
527
|
// src/components/ui/DescriptionList/DescriptionList.tsx
|
|
524
528
|
var import_design_system_foundation9 = require("@boostdev/design-system-foundation");
|
|
525
529
|
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
526
|
-
function DescriptionList({ items, layout = "stacked", className }) {
|
|
527
|
-
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("dl", { className: (0, import_design_system_foundation9.cn)(DescriptionList_default.list, DescriptionList_default[`--layout_${layout}`], className), children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: DescriptionList_default.group, children: [
|
|
530
|
+
function DescriptionList({ items, layout = "stacked", className, ...rest }) {
|
|
531
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("dl", { ...rest, className: (0, import_design_system_foundation9.cn)(DescriptionList_default.list, DescriptionList_default[`--layout_${layout}`], className), children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: DescriptionList_default.group, children: [
|
|
528
532
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("dt", { className: DescriptionList_default.term, children: item.term }),
|
|
529
533
|
Array.isArray(item.details) ? item.details.map((d, j) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("dd", { className: DescriptionList_default.details, children: d }, j)) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("dd", { className: DescriptionList_default.details, children: item.details })
|
|
530
534
|
] }, i)) });
|
|
531
535
|
}
|
|
532
536
|
|
|
533
537
|
// src/components/ui/Link/Link.module.css
|
|
534
|
-
var Link_default = {"link":"
|
|
538
|
+
var Link_default = {"link":"bds122Link-link","--variant_default":"bds122Link---variant_default","--variant_subtle":"bds122Link---variant_subtle","--variant_standalone":"bds122Link---variant_standalone","externalLabel":"bds122Link-externalLabel"};
|
|
535
539
|
|
|
536
540
|
// src/components/ui/Link/Link.tsx
|
|
537
541
|
var import_design_system_foundation10 = require("@boostdev/design-system-foundation");
|
|
@@ -562,17 +566,17 @@ function Link({
|
|
|
562
566
|
}
|
|
563
567
|
|
|
564
568
|
// src/components/ui/Loading/Loading.module.css
|
|
565
|
-
var Loading_default = {"loading":"
|
|
569
|
+
var Loading_default = {"loading":"bds122Loading-loading","spinner":"bds122Loading-spinner","--size_small":"bds122Loading---size_small","--size_large":"bds122Loading---size_large"};
|
|
566
570
|
|
|
567
571
|
// src/components/ui/Loading/Loading.tsx
|
|
568
572
|
var import_design_system_foundation11 = require("@boostdev/design-system-foundation");
|
|
569
573
|
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
570
|
-
function Loading({ size = "medium", className }) {
|
|
571
|
-
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_design_system_foundation11.cn)(Loading_default.loading, Loading_default[`--size_${size}`], className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: Loading_default.spinner, role: "status", "aria-label": "Loading" }) });
|
|
574
|
+
function Loading({ size = "medium", className, ...rest }) {
|
|
575
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ...rest, className: (0, import_design_system_foundation11.cn)(Loading_default.loading, Loading_default[`--size_${size}`], className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: Loading_default.spinner, role: "status", "aria-label": "Loading" }) });
|
|
572
576
|
}
|
|
573
577
|
|
|
574
578
|
// src/components/ui/NotificationBanner/NotificationBanner.module.css
|
|
575
|
-
var NotificationBanner_default = {"banner":"
|
|
579
|
+
var NotificationBanner_default = {"banner":"bds122NotificationBanner-banner","--variant_info":"bds122NotificationBanner---variant_info","--variant_success":"bds122NotificationBanner---variant_success","--variant_warning":"bds122NotificationBanner---variant_warning","--variant_error":"bds122NotificationBanner---variant_error","content":"bds122NotificationBanner-content","action":"bds122NotificationBanner-action","dismiss":"bds122NotificationBanner-dismiss"};
|
|
576
580
|
|
|
577
581
|
// src/components/ui/NotificationBanner/NotificationBanner.tsx
|
|
578
582
|
var import_design_system_foundation12 = require("@boostdev/design-system-foundation");
|
|
@@ -582,12 +586,14 @@ function NotificationBanner({
|
|
|
582
586
|
children,
|
|
583
587
|
action,
|
|
584
588
|
onDismiss,
|
|
585
|
-
className
|
|
589
|
+
className,
|
|
590
|
+
...rest
|
|
586
591
|
}) {
|
|
587
592
|
const isUrgent = variant === "error" || variant === "warning";
|
|
588
593
|
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
589
594
|
"div",
|
|
590
595
|
{
|
|
596
|
+
...rest,
|
|
591
597
|
role: isUrgent ? "alert" : "status",
|
|
592
598
|
"aria-live": isUrgent ? "assertive" : "polite",
|
|
593
599
|
"aria-atomic": "true",
|
|
@@ -611,7 +617,7 @@ function NotificationBanner({
|
|
|
611
617
|
}
|
|
612
618
|
|
|
613
619
|
// src/components/ui/Pagination/Pagination.module.css
|
|
614
|
-
var Pagination_default = {"pagination":"
|
|
620
|
+
var Pagination_default = {"pagination":"bds122Pagination-pagination","list":"bds122Pagination-list","button":"bds122Pagination-button","--active":"bds122Pagination---active","--nav":"bds122Pagination---nav","ellipsis":"bds122Pagination-ellipsis"};
|
|
615
621
|
|
|
616
622
|
// src/components/ui/Pagination/Pagination.tsx
|
|
617
623
|
var import_design_system_foundation13 = require("@boostdev/design-system-foundation");
|
|
@@ -632,10 +638,11 @@ function Pagination({
|
|
|
632
638
|
currentPage,
|
|
633
639
|
totalPages,
|
|
634
640
|
onPageChange,
|
|
635
|
-
className
|
|
641
|
+
className,
|
|
642
|
+
...rest
|
|
636
643
|
}) {
|
|
637
644
|
const pages = getPageRange(currentPage, totalPages);
|
|
638
|
-
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("nav", { "aria-label": "Pagination", className: (0, import_design_system_foundation13.cn)(Pagination_default.pagination, className), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("ul", { className: Pagination_default.list, children: [
|
|
645
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("nav", { ...rest, "aria-label": "Pagination", className: (0, import_design_system_foundation13.cn)(Pagination_default.pagination, className), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("ul", { className: Pagination_default.list, children: [
|
|
639
646
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
640
647
|
"button",
|
|
641
648
|
{
|
|
@@ -675,7 +682,7 @@ function Pagination({
|
|
|
675
682
|
}
|
|
676
683
|
|
|
677
684
|
// src/components/ui/Progress/Progress.module.css
|
|
678
|
-
var Progress_default = {"container":"
|
|
685
|
+
var Progress_default = {"container":"bds122Progress-container","labelRow":"bds122Progress-labelRow","value":"bds122Progress-value","track":"bds122Progress-track","--size_small":"bds122Progress---size_small","--size_medium":"bds122Progress---size_medium","--size_large":"bds122Progress---size_large","fill":"bds122Progress-fill"};
|
|
679
686
|
|
|
680
687
|
// src/components/ui/Progress/Progress.tsx
|
|
681
688
|
var import_design_system_foundation14 = require("@boostdev/design-system-foundation");
|
|
@@ -686,10 +693,11 @@ function Progress({
|
|
|
686
693
|
label,
|
|
687
694
|
showLabel = false,
|
|
688
695
|
size = "medium",
|
|
689
|
-
className
|
|
696
|
+
className,
|
|
697
|
+
...rest
|
|
690
698
|
}) {
|
|
691
699
|
const percentage = Math.min(100, Math.max(0, value / max * 100));
|
|
692
|
-
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: (0, import_design_system_foundation14.cn)(Progress_default.container, className), children: [
|
|
700
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ...rest, className: (0, import_design_system_foundation14.cn)(Progress_default.container, className), children: [
|
|
693
701
|
showLabel && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: Progress_default.labelRow, children: [
|
|
694
702
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: Progress_default.label, children: label }),
|
|
695
703
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: Progress_default.value, children: [
|
|
@@ -713,7 +721,7 @@ function Progress({
|
|
|
713
721
|
}
|
|
714
722
|
|
|
715
723
|
// src/components/ui/ProgressCircle/ProgressCircle.module.css
|
|
716
|
-
var ProgressCircle_default = {"wrapper":"
|
|
724
|
+
var ProgressCircle_default = {"wrapper":"bds122ProgressCircle-wrapper","svg":"bds122ProgressCircle-svg","track":"bds122ProgressCircle-track","fill":"bds122ProgressCircle-fill","value":"bds122ProgressCircle-value","--size_small":"bds122ProgressCircle---size_small","--size_medium":"bds122ProgressCircle---size_medium","--size_large":"bds122ProgressCircle---size_large"};
|
|
717
725
|
|
|
718
726
|
// src/components/ui/ProgressCircle/ProgressCircle.tsx
|
|
719
727
|
var import_design_system_foundation15 = require("@boostdev/design-system-foundation");
|
|
@@ -726,7 +734,8 @@ function ProgressCircle({
|
|
|
726
734
|
label,
|
|
727
735
|
showValue = false,
|
|
728
736
|
size = "medium",
|
|
729
|
-
className
|
|
737
|
+
className,
|
|
738
|
+
...rest
|
|
730
739
|
}) {
|
|
731
740
|
const percentage = Math.min(100, Math.max(0, value / max * 100));
|
|
732
741
|
const px = SIZE_PX[size];
|
|
@@ -737,6 +746,7 @@ function ProgressCircle({
|
|
|
737
746
|
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
738
747
|
"div",
|
|
739
748
|
{
|
|
749
|
+
...rest,
|
|
740
750
|
role: "progressbar",
|
|
741
751
|
"aria-label": label,
|
|
742
752
|
"aria-valuenow": value,
|
|
@@ -792,49 +802,50 @@ function ProgressCircle({
|
|
|
792
802
|
}
|
|
793
803
|
|
|
794
804
|
// src/components/ui/Separator/Separator.module.css
|
|
795
|
-
var Separator_default = {"separator":"
|
|
805
|
+
var Separator_default = {"separator":"bds122Separator-separator","--horizontal":"bds122Separator---horizontal","--vertical":"bds122Separator---vertical"};
|
|
796
806
|
|
|
797
807
|
// src/components/ui/Separator/Separator.tsx
|
|
798
808
|
var import_design_system_foundation16 = require("@boostdev/design-system-foundation");
|
|
799
809
|
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
800
|
-
function Separator({ orientation = "horizontal", className }) {
|
|
810
|
+
function Separator({ orientation = "horizontal", className, ...rest }) {
|
|
801
811
|
if (orientation === "vertical") {
|
|
802
812
|
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
803
813
|
"div",
|
|
804
814
|
{
|
|
815
|
+
...rest,
|
|
805
816
|
role: "separator",
|
|
806
817
|
"aria-orientation": "vertical",
|
|
807
818
|
className: (0, import_design_system_foundation16.cn)(Separator_default.separator, Separator_default["--vertical"], className)
|
|
808
819
|
}
|
|
809
820
|
);
|
|
810
821
|
}
|
|
811
|
-
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("hr", { "aria-orientation": "horizontal", className: (0, import_design_system_foundation16.cn)(Separator_default.separator, Separator_default["--horizontal"], className) });
|
|
822
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("hr", { ...rest, "aria-orientation": "horizontal", className: (0, import_design_system_foundation16.cn)(Separator_default.separator, Separator_default["--horizontal"], className) });
|
|
812
823
|
}
|
|
813
824
|
|
|
814
825
|
// src/components/ui/Skeleton/Skeleton.tsx
|
|
815
826
|
var import_design_system_foundation17 = require("@boostdev/design-system-foundation");
|
|
816
827
|
|
|
817
828
|
// src/components/ui/Skeleton/Skeleton.module.css
|
|
818
|
-
var Skeleton_default = {"skeleton":"
|
|
829
|
+
var Skeleton_default = {"skeleton":"bds122Skeleton-skeleton"};
|
|
819
830
|
|
|
820
831
|
// src/components/ui/Skeleton/Skeleton.tsx
|
|
821
832
|
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
822
|
-
function Skeleton({ className }) {
|
|
823
|
-
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { "aria-hidden": "true", className: (0, import_design_system_foundation17.cn)(Skeleton_default.skeleton, className) });
|
|
833
|
+
function Skeleton({ className, ...rest }) {
|
|
834
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { ...rest, "aria-hidden": "true", className: (0, import_design_system_foundation17.cn)(Skeleton_default.skeleton, className) });
|
|
824
835
|
}
|
|
825
836
|
|
|
826
837
|
// src/components/ui/SkipLink/SkipLink.module.css
|
|
827
|
-
var SkipLink_default = {"skipLink":"
|
|
838
|
+
var SkipLink_default = {"skipLink":"bds122SkipLink-skipLink"};
|
|
828
839
|
|
|
829
840
|
// src/components/ui/SkipLink/SkipLink.tsx
|
|
830
841
|
var import_design_system_foundation18 = require("@boostdev/design-system-foundation");
|
|
831
842
|
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
832
|
-
function SkipLink({ href = "#main", children = "Skip to main content", className }) {
|
|
833
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { href, className: (0, import_design_system_foundation18.cn)(SkipLink_default.skipLink, className), children });
|
|
843
|
+
function SkipLink({ href = "#main", children = "Skip to main content", className, ...rest }) {
|
|
844
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { ...rest, href, className: (0, import_design_system_foundation18.cn)(SkipLink_default.skipLink, className), children });
|
|
834
845
|
}
|
|
835
846
|
|
|
836
847
|
// src/components/ui/Table/Table.module.css
|
|
837
|
-
var Table_default = {"wrapper":"
|
|
848
|
+
var Table_default = {"wrapper":"bds122Table-wrapper","table":"bds122Table-table","caption":"bds122Table-caption","thead":"bds122Table-thead","th":"bds122Table-th","--sortable":"bds122Table---sortable","sortButton":"bds122Table-sortButton","sortIcon":"bds122Table-sortIcon","--sort-active":"bds122Table---sort-active","--sort-desc":"bds122Table---sort-desc","tbody":"bds122Table-tbody","tr":"bds122Table-tr","td":"bds122Table-td"};
|
|
838
849
|
|
|
839
850
|
// src/components/ui/Table/Table.tsx
|
|
840
851
|
var import_design_system_foundation19 = require("@boostdev/design-system-foundation");
|
|
@@ -904,12 +915,12 @@ function Table({
|
|
|
904
915
|
var import_react4 = require("react");
|
|
905
916
|
|
|
906
917
|
// src/components/ui/Tabs/Tabs.module.css
|
|
907
|
-
var Tabs_default = {"tabs":"
|
|
918
|
+
var Tabs_default = {"tabs":"bds122Tabs-tabs","tabList":"bds122Tabs-tabList","tab":"bds122Tabs-tab","--active":"bds122Tabs---active","panel":"bds122Tabs-panel"};
|
|
908
919
|
|
|
909
920
|
// src/components/ui/Tabs/Tabs.tsx
|
|
910
921
|
var import_design_system_foundation20 = require("@boostdev/design-system-foundation");
|
|
911
922
|
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
912
|
-
function Tabs({ tabs, defaultTab, className }) {
|
|
923
|
+
function Tabs({ tabs, defaultTab, className, ...rest }) {
|
|
913
924
|
const baseId = (0, import_react4.useId)();
|
|
914
925
|
const [activeTab, setActiveTab] = (0, import_react4.useState)(defaultTab ?? tabs[0]?.id);
|
|
915
926
|
const tabRefs = (0, import_react4.useRef)([]);
|
|
@@ -934,7 +945,7 @@ function Tabs({ tabs, defaultTab, className }) {
|
|
|
934
945
|
focusAt(enabledIndexes[enabledIndexes.length - 1]);
|
|
935
946
|
}
|
|
936
947
|
};
|
|
937
|
-
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: (0, import_design_system_foundation20.cn)(Tabs_default.tabs, className), children: [
|
|
948
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ...rest, className: (0, import_design_system_foundation20.cn)(Tabs_default.tabs, className), children: [
|
|
938
949
|
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { role: "tablist", className: Tabs_default.tabList, children: tabs.map((tab, i) => {
|
|
939
950
|
const tabId = `${baseId}-tab-${tab.id}`;
|
|
940
951
|
const panelId = `${baseId}-panel-${tab.id}`;
|
|
@@ -984,7 +995,7 @@ function Tabs({ tabs, defaultTab, className }) {
|
|
|
984
995
|
var import_react5 = require("react");
|
|
985
996
|
|
|
986
997
|
// src/components/ui/Tooltip/Tooltip.module.css
|
|
987
|
-
var Tooltip_default = {"wrapper":"
|
|
998
|
+
var Tooltip_default = {"wrapper":"bds122Tooltip-wrapper","tooltip":"bds122Tooltip-tooltip","--placement_top":"bds122Tooltip---placement_top","--placement_bottom":"bds122Tooltip---placement_bottom","--placement_left":"bds122Tooltip---placement_left","--placement_right":"bds122Tooltip---placement_right"};
|
|
988
999
|
|
|
989
1000
|
// src/components/ui/Tooltip/Tooltip.tsx
|
|
990
1001
|
var import_design_system_foundation21 = require("@boostdev/design-system-foundation");
|
|
@@ -993,7 +1004,8 @@ function Tooltip({
|
|
|
993
1004
|
content,
|
|
994
1005
|
placement = "top",
|
|
995
1006
|
children,
|
|
996
|
-
className
|
|
1007
|
+
className,
|
|
1008
|
+
...rest
|
|
997
1009
|
}) {
|
|
998
1010
|
const tooltipId = (0, import_react5.useId)();
|
|
999
1011
|
const [isVisible, setIsVisible] = (0, import_react5.useState)(false);
|
|
@@ -1003,6 +1015,7 @@ function Tooltip({
|
|
|
1003
1015
|
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1004
1016
|
"span",
|
|
1005
1017
|
{
|
|
1018
|
+
...rest,
|
|
1006
1019
|
className: (0, import_design_system_foundation21.cn)(Tooltip_default.wrapper, className),
|
|
1007
1020
|
onMouseEnter: () => setIsVisible(true),
|
|
1008
1021
|
onMouseLeave: () => setIsVisible(false),
|
|
@@ -1026,7 +1039,7 @@ function Tooltip({
|
|
|
1026
1039
|
}
|
|
1027
1040
|
|
|
1028
1041
|
// src/components/ui/Typography/Typography.module.css
|
|
1029
|
-
var Typography_default = {"typography":"
|
|
1042
|
+
var Typography_default = {"typography":"bds122Typography-typography","--h1":"bds122Typography---h1","--h2":"bds122Typography---h2","--h3":"bds122Typography---h3","--body":"bds122Typography---body","--body_s":"bds122Typography---body_s"};
|
|
1030
1043
|
|
|
1031
1044
|
// src/components/ui/Typography/Typography.tsx
|
|
1032
1045
|
var import_design_system_foundation22 = require("@boostdev/design-system-foundation");
|
|
@@ -1038,13 +1051,13 @@ var variantToElement = {
|
|
|
1038
1051
|
body: "p",
|
|
1039
1052
|
body_s: "p"
|
|
1040
1053
|
};
|
|
1041
|
-
function Typography({ variant = "body", component, children, className }) {
|
|
1054
|
+
function Typography({ variant = "body", component, children, className, ...rest }) {
|
|
1042
1055
|
const Component = component || variantToElement[variant];
|
|
1043
|
-
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Component, { className: (0, import_design_system_foundation22.cn)(Typography_default.typography, Typography_default[`--${variant}`], className), children });
|
|
1056
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Component, { ...rest, className: (0, import_design_system_foundation22.cn)(Typography_default.typography, Typography_default[`--${variant}`], className), children });
|
|
1044
1057
|
}
|
|
1045
1058
|
|
|
1046
1059
|
// src/components/interaction/Button/Button.module.css
|
|
1047
|
-
var Button_default = {"button":"
|
|
1060
|
+
var Button_default = {"button":"bds122Button-button","--default":"bds122Button---default","--outline":"bds122Button---outline","--ghost":"bds122Button---ghost","--size_small":"bds122Button---size_small","--size_medium":"bds122Button---size_medium","--size_large":"bds122Button---size_large","--hasPulse":"bds122Button---hasPulse","iconStart":"bds122Button-iconStart","iconEnd":"bds122Button-iconEnd"};
|
|
1048
1061
|
|
|
1049
1062
|
// src/components/interaction/Button/Button.tsx
|
|
1050
1063
|
var import_design_system_foundation23 = require("@boostdev/design-system-foundation");
|
|
@@ -1159,7 +1172,7 @@ function installInvokerCommandsPolyfill() {
|
|
|
1159
1172
|
}
|
|
1160
1173
|
|
|
1161
1174
|
// src/components/interaction/Command/Command.module.css
|
|
1162
|
-
var Command_default = {"dialog":"
|
|
1175
|
+
var Command_default = {"dialog":"bds122Command-dialog","palette":"bds122Command-palette","searchRow":"bds122Command-searchRow","searchIcon":"bds122Command-searchIcon","search":"bds122Command-search","escHint":"bds122Command-escHint","list":"bds122Command-list","groupList":"bds122Command-groupList","group":"bds122Command-group","item":"bds122Command-item","itemActive":"bds122Command-itemActive","itemLabel":"bds122Command-itemLabel","itemDesc":"bds122Command-itemDesc","shortcut":"bds122Command-shortcut","empty":"bds122Command-empty"};
|
|
1163
1176
|
|
|
1164
1177
|
// src/components/interaction/Command/Command.tsx
|
|
1165
1178
|
var import_design_system_foundation24 = require("@boostdev/design-system-foundation");
|
|
@@ -1172,7 +1185,8 @@ function Command({
|
|
|
1172
1185
|
onClose,
|
|
1173
1186
|
items,
|
|
1174
1187
|
placeholder = "Search commands\u2026",
|
|
1175
|
-
className
|
|
1188
|
+
className,
|
|
1189
|
+
...rest
|
|
1176
1190
|
}) {
|
|
1177
1191
|
const [query, setQuery] = (0, import_react6.useState)("");
|
|
1178
1192
|
const [activeIndex, setActiveIndex] = (0, import_react6.useState)(0);
|
|
@@ -1267,6 +1281,7 @@ function Command({
|
|
|
1267
1281
|
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1268
1282
|
"dialog",
|
|
1269
1283
|
{
|
|
1284
|
+
...rest,
|
|
1270
1285
|
ref: dialogRef,
|
|
1271
1286
|
id: dialogId,
|
|
1272
1287
|
className: (0, import_design_system_foundation24.cn)(Command_default.dialog, className),
|
|
@@ -1334,14 +1349,14 @@ function Command({
|
|
|
1334
1349
|
var import_react7 = require("react");
|
|
1335
1350
|
|
|
1336
1351
|
// src/components/interaction/Dialog/Dialog.module.css
|
|
1337
|
-
var Dialog_default = {"dialog":"
|
|
1352
|
+
var Dialog_default = {"dialog":"bds122Dialog-dialog","dialogContent":"bds122Dialog-dialogContent","closeButton":"bds122Dialog-closeButton"};
|
|
1338
1353
|
|
|
1339
1354
|
// src/components/interaction/Dialog/Dialog.tsx
|
|
1340
1355
|
var import_design_system_foundation25 = require("@boostdev/design-system-foundation");
|
|
1341
1356
|
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1342
1357
|
installInvokerCommandsPolyfill();
|
|
1343
1358
|
var FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
|
|
1344
|
-
function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClose }) {
|
|
1359
|
+
function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClose, ...rest }) {
|
|
1345
1360
|
const generatedId = (0, import_react7.useId)();
|
|
1346
1361
|
const id = idProp ?? generatedId;
|
|
1347
1362
|
const dialogRef = (0, import_react7.useRef)(null);
|
|
@@ -1410,6 +1425,7 @@ function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClo
|
|
|
1410
1425
|
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
1411
1426
|
"dialog",
|
|
1412
1427
|
{
|
|
1428
|
+
...rest,
|
|
1413
1429
|
ref: dialogRef,
|
|
1414
1430
|
id,
|
|
1415
1431
|
className: (0, import_design_system_foundation25.cn)(className, Dialog_default.dialog),
|
|
@@ -1439,7 +1455,7 @@ function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClo
|
|
|
1439
1455
|
var import_react8 = require("react");
|
|
1440
1456
|
|
|
1441
1457
|
// src/components/interaction/Drawer/Drawer.module.css
|
|
1442
|
-
var Drawer_default = {"drawer":"
|
|
1458
|
+
var Drawer_default = {"drawer":"bds122Drawer-drawer","--side_left":"bds122Drawer---side_left","header":"bds122Drawer-header","closeButton":"bds122Drawer-closeButton","body":"bds122Drawer-body"};
|
|
1443
1459
|
|
|
1444
1460
|
// src/components/interaction/Drawer/Drawer.tsx
|
|
1445
1461
|
var import_design_system_foundation26 = require("@boostdev/design-system-foundation");
|
|
@@ -1453,8 +1469,8 @@ function Drawer({
|
|
|
1453
1469
|
title,
|
|
1454
1470
|
children,
|
|
1455
1471
|
side = "right",
|
|
1456
|
-
|
|
1457
|
-
|
|
1472
|
+
className,
|
|
1473
|
+
...rest
|
|
1458
1474
|
}) {
|
|
1459
1475
|
const generatedId = (0, import_react8.useId)();
|
|
1460
1476
|
const id = idProp ?? generatedId;
|
|
@@ -1508,10 +1524,10 @@ function Drawer({
|
|
|
1508
1524
|
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1509
1525
|
"dialog",
|
|
1510
1526
|
{
|
|
1527
|
+
...rest,
|
|
1511
1528
|
ref: dialogRef,
|
|
1512
1529
|
id,
|
|
1513
1530
|
className: (0, import_design_system_foundation26.cn)(Drawer_default.drawer, Drawer_default[`--side_${side}`], className),
|
|
1514
|
-
"aria-label": ariaLabel,
|
|
1515
1531
|
"aria-modal": "true",
|
|
1516
1532
|
onClick: handleClick,
|
|
1517
1533
|
onCancel: handleCancel,
|
|
@@ -1540,7 +1556,7 @@ function Drawer({
|
|
|
1540
1556
|
var import_react9 = require("react");
|
|
1541
1557
|
|
|
1542
1558
|
// src/components/interaction/DropdownMenu/DropdownMenu.module.css
|
|
1543
|
-
var DropdownMenu_default = {"wrapper":"
|
|
1559
|
+
var DropdownMenu_default = {"wrapper":"bds122DropdownMenu-wrapper","menu":"bds122DropdownMenu-menu","--placement_bottom-start":"bds122DropdownMenu---placement_bottom-start","--placement_bottom-end":"bds122DropdownMenu---placement_bottom-end","separator":"bds122DropdownMenu-separator","item":"bds122DropdownMenu-item","icon":"bds122DropdownMenu-icon"};
|
|
1544
1560
|
|
|
1545
1561
|
// src/components/interaction/DropdownMenu/DropdownMenu.tsx
|
|
1546
1562
|
var import_design_system_foundation27 = require("@boostdev/design-system-foundation");
|
|
@@ -1549,7 +1565,8 @@ function DropdownMenu({
|
|
|
1549
1565
|
trigger,
|
|
1550
1566
|
items,
|
|
1551
1567
|
placement = "bottom-start",
|
|
1552
|
-
className
|
|
1568
|
+
className,
|
|
1569
|
+
...rest
|
|
1553
1570
|
}) {
|
|
1554
1571
|
const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
|
|
1555
1572
|
const containerRef = (0, import_react9.useRef)(null);
|
|
@@ -1612,7 +1629,7 @@ function DropdownMenu({
|
|
|
1612
1629
|
if (typeof existingOnClick === "function") existingOnClick(e);
|
|
1613
1630
|
}
|
|
1614
1631
|
}) : trigger;
|
|
1615
|
-
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ref: containerRef, className: (0, import_design_system_foundation27.cn)(DropdownMenu_default.wrapper, className), children: [
|
|
1632
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ...rest, ref: containerRef, className: (0, import_design_system_foundation27.cn)(DropdownMenu_default.wrapper, className), children: [
|
|
1616
1633
|
triggerEl,
|
|
1617
1634
|
isOpen && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1618
1635
|
"ul",
|
|
@@ -1653,7 +1670,7 @@ function DropdownMenu({
|
|
|
1653
1670
|
var import_react10 = require("react");
|
|
1654
1671
|
|
|
1655
1672
|
// src/components/interaction/Popover/Popover.module.css
|
|
1656
|
-
var Popover_default = {"wrapper":"
|
|
1673
|
+
var Popover_default = {"wrapper":"bds122Popover-wrapper","panel":"bds122Popover-panel","g":"bds122Popover-g"};
|
|
1657
1674
|
|
|
1658
1675
|
// src/components/interaction/Popover/Popover.tsx
|
|
1659
1676
|
var import_design_system_foundation28 = require("@boostdev/design-system-foundation");
|
|
@@ -1668,7 +1685,8 @@ function Popover({
|
|
|
1668
1685
|
content,
|
|
1669
1686
|
placement = "bottom",
|
|
1670
1687
|
className,
|
|
1671
|
-
"aria-label": ariaLabel
|
|
1688
|
+
"aria-label": ariaLabel,
|
|
1689
|
+
...rest
|
|
1672
1690
|
}) {
|
|
1673
1691
|
const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
|
|
1674
1692
|
const containerRef = (0, import_react10.useRef)(null);
|
|
@@ -1717,7 +1735,7 @@ function Popover({
|
|
|
1717
1735
|
// avoid a double-toggle when both onClick and invoker fire.
|
|
1718
1736
|
onClick: children.props.onClick
|
|
1719
1737
|
}) : children;
|
|
1720
|
-
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { ref: containerRef, className: (0, import_design_system_foundation28.cn)(Popover_default.wrapper, className), children: [
|
|
1738
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { ...rest, ref: containerRef, className: (0, import_design_system_foundation28.cn)(Popover_default.wrapper, className), children: [
|
|
1721
1739
|
trigger,
|
|
1722
1740
|
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1723
1741
|
"div",
|
|
@@ -1737,15 +1755,16 @@ function Popover({
|
|
|
1737
1755
|
}
|
|
1738
1756
|
|
|
1739
1757
|
// src/components/interaction/Rating/Rating.module.css
|
|
1740
|
-
var Rating_default = {"rating":"
|
|
1758
|
+
var Rating_default = {"rating":"bds122Rating-rating","star":"bds122Rating-star","--filled":"bds122Rating---filled"};
|
|
1741
1759
|
|
|
1742
1760
|
// src/components/interaction/Rating/Rating.tsx
|
|
1743
1761
|
var import_design_system_foundation29 = require("@boostdev/design-system-foundation");
|
|
1744
1762
|
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1745
|
-
function Rating({ value, max = 5, className }) {
|
|
1763
|
+
function Rating({ value, max = 5, className, ...rest }) {
|
|
1746
1764
|
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1747
1765
|
"div",
|
|
1748
1766
|
{
|
|
1767
|
+
...rest,
|
|
1749
1768
|
className: (0, import_design_system_foundation29.cn)(Rating_default.rating, className),
|
|
1750
1769
|
role: "img",
|
|
1751
1770
|
"aria-label": `${value} out of ${max} stars`,
|
|
@@ -1768,7 +1787,7 @@ function Rating({ value, max = 5, className }) {
|
|
|
1768
1787
|
var import_react11 = require("react");
|
|
1769
1788
|
|
|
1770
1789
|
// src/components/interaction/Toast/Toast.module.css
|
|
1771
|
-
var Toast_default = {"toastContainer":"
|
|
1790
|
+
var Toast_default = {"toastContainer":"bds122Toast-toastContainer","toast":"bds122Toast-toast","--variant_success":"bds122Toast---variant_success","--variant_warning":"bds122Toast---variant_warning","--variant_info":"bds122Toast---variant_info","--variant_error":"bds122Toast---variant_error","message":"bds122Toast-message","closeButton":"bds122Toast-closeButton"};
|
|
1772
1791
|
|
|
1773
1792
|
// src/components/interaction/Toast/Toast.tsx
|
|
1774
1793
|
var import_design_system_foundation30 = require("@boostdev/design-system-foundation");
|
|
@@ -1841,10 +1860,10 @@ function useToast() {
|
|
|
1841
1860
|
var import_react12 = require("react");
|
|
1842
1861
|
|
|
1843
1862
|
// src/components/interaction/form/Checkbox/Checkbox.module.css
|
|
1844
|
-
var Checkbox_default = {"checkboxGroup":"
|
|
1863
|
+
var Checkbox_default = {"checkboxGroup":"bds122Checkbox-checkboxGroup","inputWrapper":"bds122Checkbox-inputWrapper","checkbox":"bds122Checkbox-checkbox","checkboxError":"bds122Checkbox-checkboxError"};
|
|
1845
1864
|
|
|
1846
1865
|
// src/components/interaction/form/atoms/Message.module.css
|
|
1847
|
-
var Message_default = {"error":"
|
|
1866
|
+
var Message_default = {"error":"bds122Message-error","hint":"bds122Message-hint"};
|
|
1848
1867
|
|
|
1849
1868
|
// src/components/interaction/form/atoms/Message.tsx
|
|
1850
1869
|
var import_design_system_foundation31 = require("@boostdev/design-system-foundation");
|
|
@@ -1855,7 +1874,7 @@ var Message = ({ message, type, inputId, className }) => {
|
|
|
1855
1874
|
};
|
|
1856
1875
|
|
|
1857
1876
|
// src/components/interaction/form/atoms/Label.module.css
|
|
1858
|
-
var Label_default = {"label":"
|
|
1877
|
+
var Label_default = {"label":"bds122Label-label"};
|
|
1859
1878
|
|
|
1860
1879
|
// src/components/interaction/form/atoms/Label.tsx
|
|
1861
1880
|
var import_design_system_foundation32 = require("@boostdev/design-system-foundation");
|
|
@@ -1868,13 +1887,13 @@ var Label = ({ label, id, className }) => {
|
|
|
1868
1887
|
var import_design_system_foundation34 = require("@boostdev/design-system-foundation");
|
|
1869
1888
|
|
|
1870
1889
|
// src/components/interaction/form/atoms/InputContainer.module.css
|
|
1871
|
-
var InputContainer_default = {"container":"
|
|
1890
|
+
var InputContainer_default = {"container":"bds122InputContainer-container"};
|
|
1872
1891
|
|
|
1873
1892
|
// src/components/interaction/form/atoms/InputContainer.tsx
|
|
1874
1893
|
var import_design_system_foundation33 = require("@boostdev/design-system-foundation");
|
|
1875
1894
|
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1876
|
-
var InputContainer = ({ children, className }) => {
|
|
1877
|
-
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: (0, import_design_system_foundation33.cn)(InputContainer_default.container, className), children });
|
|
1895
|
+
var InputContainer = ({ children, className, ...rest }) => {
|
|
1896
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ...rest, className: (0, import_design_system_foundation33.cn)(InputContainer_default.container, className), children });
|
|
1878
1897
|
};
|
|
1879
1898
|
|
|
1880
1899
|
// src/components/interaction/form/Checkbox/Checkbox.tsx
|
|
@@ -1909,7 +1928,7 @@ function Checkbox({ label, name, error, hint, className, ...props }) {
|
|
|
1909
1928
|
var import_react13 = require("react");
|
|
1910
1929
|
|
|
1911
1930
|
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css
|
|
1912
|
-
var CheckboxGroup_default = {"group":"
|
|
1931
|
+
var CheckboxGroup_default = {"group":"bds122CheckboxGroup-group","legend":"bds122CheckboxGroup-legend","required":"bds122CheckboxGroup-required","items":"bds122CheckboxGroup-items"};
|
|
1913
1932
|
|
|
1914
1933
|
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
|
|
1915
1934
|
var import_design_system_foundation35 = require("@boostdev/design-system-foundation");
|
|
@@ -1920,8 +1939,8 @@ function CheckboxGroup({
|
|
|
1920
1939
|
error,
|
|
1921
1940
|
hint,
|
|
1922
1941
|
required,
|
|
1923
|
-
|
|
1924
|
-
|
|
1942
|
+
className,
|
|
1943
|
+
...rest
|
|
1925
1944
|
}) {
|
|
1926
1945
|
const id = (0, import_react13.useId)();
|
|
1927
1946
|
const hintId = id + "hint";
|
|
@@ -1930,8 +1949,8 @@ function CheckboxGroup({
|
|
|
1930
1949
|
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
1931
1950
|
"fieldset",
|
|
1932
1951
|
{
|
|
1952
|
+
...rest,
|
|
1933
1953
|
className: (0, import_design_system_foundation35.cn)(CheckboxGroup_default.group, className),
|
|
1934
|
-
disabled,
|
|
1935
1954
|
"aria-required": required || void 0,
|
|
1936
1955
|
"aria-describedby": describedBy,
|
|
1937
1956
|
children: [
|
|
@@ -1951,7 +1970,7 @@ function CheckboxGroup({
|
|
|
1951
1970
|
var import_react14 = require("react");
|
|
1952
1971
|
|
|
1953
1972
|
// src/components/interaction/form/Combobox/Combobox.module.css
|
|
1954
|
-
var Combobox_default = {"formGroup":"
|
|
1973
|
+
var Combobox_default = {"formGroup":"bds122Combobox-formGroup","inputWrapper":"bds122Combobox-inputWrapper","input":"bds122Combobox-input","inputError":"bds122Combobox-inputError","chevron":"bds122Combobox-chevron","listbox":"bds122Combobox-listbox","option":"bds122Combobox-option","--highlighted":"bds122Combobox---highlighted","--selected":"bds122Combobox---selected","--disabled":"bds122Combobox---disabled"};
|
|
1955
1974
|
|
|
1956
1975
|
// src/components/interaction/form/Combobox/Combobox.tsx
|
|
1957
1976
|
var import_design_system_foundation36 = require("@boostdev/design-system-foundation");
|
|
@@ -1966,7 +1985,8 @@ function Combobox({
|
|
|
1966
1985
|
disabled = false,
|
|
1967
1986
|
error,
|
|
1968
1987
|
hint,
|
|
1969
|
-
className
|
|
1988
|
+
className,
|
|
1989
|
+
...rest
|
|
1970
1990
|
}) {
|
|
1971
1991
|
const id = name + (0, import_react14.useId)();
|
|
1972
1992
|
const listboxId = id + "listbox";
|
|
@@ -2033,7 +2053,7 @@ function Combobox({
|
|
|
2033
2053
|
setIsOpen(false);
|
|
2034
2054
|
}
|
|
2035
2055
|
};
|
|
2036
|
-
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(InputContainer, { className: (0, import_design_system_foundation36.cn)(Combobox_default.formGroup, className), children: [
|
|
2056
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(InputContainer, { ...rest, className: (0, import_design_system_foundation36.cn)(Combobox_default.formGroup, className), children: [
|
|
2037
2057
|
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Label, { id, label }),
|
|
2038
2058
|
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ref: containerRef, className: Combobox_default.inputWrapper, children: [
|
|
2039
2059
|
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
@@ -2101,7 +2121,7 @@ function Combobox({
|
|
|
2101
2121
|
var import_react15 = require("react");
|
|
2102
2122
|
|
|
2103
2123
|
// src/components/interaction/form/FileInput/FileInput.module.css
|
|
2104
|
-
var FileInput_default = {"formGroup":"
|
|
2124
|
+
var FileInput_default = {"formGroup":"bds122FileInput-formGroup","fieldLabel":"bds122FileInput-fieldLabel","dropZone":"bds122FileInput-dropZone","isDragging":"bds122FileInput-isDragging","hasError":"bds122FileInput-hasError","isDisabled":"bds122FileInput-isDisabled","icon":"bds122FileInput-icon","prompt":"bds122FileInput-prompt","acceptHint":"bds122FileInput-acceptHint","hiddenInput":"bds122FileInput-hiddenInput"};
|
|
2105
2125
|
|
|
2106
2126
|
// src/components/interaction/form/FileInput/FileInput.tsx
|
|
2107
2127
|
var import_design_system_foundation37 = require("@boostdev/design-system-foundation");
|
|
@@ -2116,7 +2136,8 @@ function FileInput({
|
|
|
2116
2136
|
error,
|
|
2117
2137
|
hint,
|
|
2118
2138
|
onChange,
|
|
2119
|
-
className
|
|
2139
|
+
className,
|
|
2140
|
+
...rest
|
|
2120
2141
|
}) {
|
|
2121
2142
|
const uid = name + (0, import_react15.useId)();
|
|
2122
2143
|
const hintId = uid + "hint";
|
|
@@ -2154,7 +2175,7 @@ function FileInput({
|
|
|
2154
2175
|
if (!disabled) setIsDragging(true);
|
|
2155
2176
|
};
|
|
2156
2177
|
const handleDragLeave = () => setIsDragging(false);
|
|
2157
|
-
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(InputContainer, { className: (0, import_design_system_foundation37.cn)(FileInput_default.formGroup, className), children: [
|
|
2178
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(InputContainer, { ...rest, className: (0, import_design_system_foundation37.cn)(FileInput_default.formGroup, className), children: [
|
|
2158
2179
|
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
2159
2180
|
"label",
|
|
2160
2181
|
{
|
|
@@ -2201,7 +2222,7 @@ function FileInput({
|
|
|
2201
2222
|
var import_react16 = require("react");
|
|
2202
2223
|
|
|
2203
2224
|
// src/components/interaction/form/FormInput/FormInput.module.css
|
|
2204
|
-
var FormInput_default = {"formGroup":"
|
|
2225
|
+
var FormInput_default = {"formGroup":"bds122FormInput-formGroup","input":"bds122FormInput-input","inputError":"bds122FormInput-inputError"};
|
|
2205
2226
|
|
|
2206
2227
|
// src/components/interaction/form/FormInput/FormInput.tsx
|
|
2207
2228
|
var import_design_system_foundation38 = require("@boostdev/design-system-foundation");
|
|
@@ -2245,7 +2266,7 @@ function FormInput({
|
|
|
2245
2266
|
var import_react17 = require("react");
|
|
2246
2267
|
|
|
2247
2268
|
// src/components/interaction/form/NumberInput/NumberInput.module.css
|
|
2248
|
-
var NumberInput_default = {"formGroup":"
|
|
2269
|
+
var NumberInput_default = {"formGroup":"bds122NumberInput-formGroup","inputRow":"bds122NumberInput-inputRow","input":"bds122NumberInput-input","inputError":"bds122NumberInput-inputError","stepper":"bds122NumberInput-stepper"};
|
|
2249
2270
|
|
|
2250
2271
|
// src/components/interaction/form/NumberInput/NumberInput.tsx
|
|
2251
2272
|
var import_design_system_foundation39 = require("@boostdev/design-system-foundation");
|
|
@@ -2262,7 +2283,8 @@ function NumberInput({
|
|
|
2262
2283
|
error,
|
|
2263
2284
|
hint,
|
|
2264
2285
|
onChange,
|
|
2265
|
-
className
|
|
2286
|
+
className,
|
|
2287
|
+
...rest
|
|
2266
2288
|
}) {
|
|
2267
2289
|
const uid = name + (0, import_react17.useId)();
|
|
2268
2290
|
const hintId = uid + "hint";
|
|
@@ -2287,7 +2309,7 @@ function NumberInput({
|
|
|
2287
2309
|
}
|
|
2288
2310
|
onChange?.(next);
|
|
2289
2311
|
};
|
|
2290
|
-
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(InputContainer, { className: (0, import_design_system_foundation39.cn)(NumberInput_default.formGroup, className), children: [
|
|
2312
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(InputContainer, { ...rest, className: (0, import_design_system_foundation39.cn)(NumberInput_default.formGroup, className), children: [
|
|
2291
2313
|
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Label, { id: uid, label }),
|
|
2292
2314
|
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: NumberInput_default.inputRow, children: [
|
|
2293
2315
|
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
@@ -2349,7 +2371,7 @@ function NumberInput({
|
|
|
2349
2371
|
var import_react18 = require("react");
|
|
2350
2372
|
|
|
2351
2373
|
// src/components/interaction/form/Radio/Radio.module.css
|
|
2352
|
-
var Radio_default = {"radioGroup":"
|
|
2374
|
+
var Radio_default = {"radioGroup":"bds122Radio-radioGroup","inputWrapper":"bds122Radio-inputWrapper","textWrapper":"bds122Radio-textWrapper","description":"bds122Radio-description","radio":"bds122Radio-radio","radioError":"bds122Radio-radioError"};
|
|
2353
2375
|
|
|
2354
2376
|
// src/components/interaction/form/Radio/Radio.tsx
|
|
2355
2377
|
var import_design_system_foundation40 = require("@boostdev/design-system-foundation");
|
|
@@ -2387,7 +2409,7 @@ function Radio({ label, name, description, error, hint, className, ...props }) {
|
|
|
2387
2409
|
var import_react19 = require("react");
|
|
2388
2410
|
|
|
2389
2411
|
// src/components/interaction/form/RadioGroup/RadioGroup.module.css
|
|
2390
|
-
var RadioGroup_default = {"group":"
|
|
2412
|
+
var RadioGroup_default = {"group":"bds122RadioGroup-group","legend":"bds122RadioGroup-legend","required":"bds122RadioGroup-required","items":"bds122RadioGroup-items"};
|
|
2391
2413
|
|
|
2392
2414
|
// src/components/interaction/form/RadioGroup/RadioGroup.tsx
|
|
2393
2415
|
var import_design_system_foundation41 = require("@boostdev/design-system-foundation");
|
|
@@ -2398,8 +2420,8 @@ function RadioGroup({
|
|
|
2398
2420
|
error,
|
|
2399
2421
|
hint,
|
|
2400
2422
|
required,
|
|
2401
|
-
|
|
2402
|
-
|
|
2423
|
+
className,
|
|
2424
|
+
...rest
|
|
2403
2425
|
}) {
|
|
2404
2426
|
const id = (0, import_react19.useId)();
|
|
2405
2427
|
const hintId = id + "hint";
|
|
@@ -2408,8 +2430,8 @@ function RadioGroup({
|
|
|
2408
2430
|
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
2409
2431
|
"fieldset",
|
|
2410
2432
|
{
|
|
2433
|
+
...rest,
|
|
2411
2434
|
className: (0, import_design_system_foundation41.cn)(RadioGroup_default.group, className),
|
|
2412
|
-
disabled,
|
|
2413
2435
|
"aria-required": required || void 0,
|
|
2414
2436
|
"aria-describedby": describedBy,
|
|
2415
2437
|
children: [
|
|
@@ -2429,7 +2451,7 @@ function RadioGroup({
|
|
|
2429
2451
|
var import_react20 = require("react");
|
|
2430
2452
|
|
|
2431
2453
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.module.css
|
|
2432
|
-
var SegmentedControl_default = {"control":"
|
|
2454
|
+
var SegmentedControl_default = {"control":"bds122SegmentedControl-control","thumb":"bds122SegmentedControl-thumb","indicator":"bds122SegmentedControl-indicator","item":"bds122SegmentedControl-item","--active":"bds122SegmentedControl---active","--disabled":"bds122SegmentedControl---disabled","--size_small":"bds122SegmentedControl---size_small","--size_large":"bds122SegmentedControl---size_large","--variant_outline":"bds122SegmentedControl---variant_outline"};
|
|
2433
2455
|
|
|
2434
2456
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
|
|
2435
2457
|
var import_design_system_foundation42 = require("@boostdev/design-system-foundation");
|
|
@@ -2441,7 +2463,7 @@ function SegmentedControl({
|
|
|
2441
2463
|
size = "medium",
|
|
2442
2464
|
variant = "outline",
|
|
2443
2465
|
className,
|
|
2444
|
-
|
|
2466
|
+
...rest
|
|
2445
2467
|
}) {
|
|
2446
2468
|
const validChildren = import_react20.Children.toArray(children).filter(import_react20.isValidElement);
|
|
2447
2469
|
const autoIndex = selectedIndexProp === void 0 ? validChildren.findIndex((child) => {
|
|
@@ -2452,8 +2474,8 @@ function SegmentedControl({
|
|
|
2452
2474
|
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
2453
2475
|
"div",
|
|
2454
2476
|
{
|
|
2477
|
+
...rest,
|
|
2455
2478
|
role: "group",
|
|
2456
|
-
"aria-label": ariaLabel,
|
|
2457
2479
|
className: (0, import_design_system_foundation42.cn)(SegmentedControl_default.control, SegmentedControl_default[`--size_${size}`], SegmentedControl_default[`--variant_${variant}`], className),
|
|
2458
2480
|
style: {
|
|
2459
2481
|
"--control_count": validChildren.length,
|
|
@@ -2485,7 +2507,7 @@ function SegmentedControl({
|
|
|
2485
2507
|
var import_react21 = require("react");
|
|
2486
2508
|
|
|
2487
2509
|
// src/components/interaction/form/Select/Select.module.css
|
|
2488
|
-
var Select_default = {"formGroup":"
|
|
2510
|
+
var Select_default = {"formGroup":"bds122Select-formGroup","selectWrapper":"bds122Select-selectWrapper","select":"bds122Select-select","selectError":"bds122Select-selectError","chevron":"bds122Select-chevron"};
|
|
2489
2511
|
|
|
2490
2512
|
// src/components/interaction/form/Select/Select.tsx
|
|
2491
2513
|
var import_design_system_foundation43 = require("@boostdev/design-system-foundation");
|
|
@@ -2536,7 +2558,7 @@ function Select({
|
|
|
2536
2558
|
var import_react22 = require("react");
|
|
2537
2559
|
|
|
2538
2560
|
// src/components/interaction/form/Slider/Slider.module.css
|
|
2539
|
-
var Slider_default = {"formGroup":"
|
|
2561
|
+
var Slider_default = {"formGroup":"bds122Slider-formGroup","labelRow":"bds122Slider-labelRow","value":"bds122Slider-value","slider":"bds122Slider-slider","sliderError":"bds122Slider-sliderError"};
|
|
2540
2562
|
|
|
2541
2563
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
2542
2564
|
var import_design_system_foundation44 = require("@boostdev/design-system-foundation");
|
|
@@ -2598,7 +2620,7 @@ function Slider({
|
|
|
2598
2620
|
var import_react23 = require("react");
|
|
2599
2621
|
|
|
2600
2622
|
// src/components/interaction/form/Switch/Switch.module.css
|
|
2601
|
-
var Switch_default = {"switchGroup":"
|
|
2623
|
+
var Switch_default = {"switchGroup":"bds122Switch-switchGroup","--size_small":"bds122Switch---size_small","--size_medium":"bds122Switch---size_medium","--size_large":"bds122Switch---size_large","inputWrapper":"bds122Switch-inputWrapper","trackWrapper":"bds122Switch-trackWrapper","switch":"bds122Switch-switch","track":"bds122Switch-track","thumb":"bds122Switch-thumb","switchError":"bds122Switch-switchError"};
|
|
2602
2624
|
|
|
2603
2625
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2604
2626
|
var import_design_system_foundation45 = require("@boostdev/design-system-foundation");
|
|
@@ -2646,7 +2668,7 @@ function Switch({
|
|
|
2646
2668
|
var import_react24 = require("react");
|
|
2647
2669
|
|
|
2648
2670
|
// src/components/interaction/form/Textarea/Textarea.module.css
|
|
2649
|
-
var Textarea_default = {"formGroup":"
|
|
2671
|
+
var Textarea_default = {"formGroup":"bds122Textarea-formGroup","textarea":"bds122Textarea-textarea","textareaError":"bds122Textarea-textareaError"};
|
|
2650
2672
|
|
|
2651
2673
|
// src/components/interaction/form/Textarea/Textarea.tsx
|
|
2652
2674
|
var import_design_system_foundation46 = require("@boostdev/design-system-foundation");
|
|
@@ -2685,17 +2707,17 @@ function Textarea({
|
|
|
2685
2707
|
}
|
|
2686
2708
|
|
|
2687
2709
|
// src/components/layout/ButtonGroup/ButtonGroup.module.css
|
|
2688
|
-
var ButtonGroup_default = {"buttonGroup":"
|
|
2710
|
+
var ButtonGroup_default = {"buttonGroup":"bds122ButtonGroup-buttonGroup","container":"bds122ButtonGroup-container","--variant_card":"bds122ButtonGroup---variant_card","--variant_flow":"bds122ButtonGroup---variant_flow","--variant_modal":"bds122ButtonGroup---variant_modal","--variant_content":"bds122ButtonGroup---variant_content","--variant_grid":"bds122ButtonGroup---variant_grid"};
|
|
2689
2711
|
|
|
2690
2712
|
// src/components/layout/ButtonGroup/ButtonGroup.tsx
|
|
2691
2713
|
var import_design_system_foundation47 = require("@boostdev/design-system-foundation");
|
|
2692
2714
|
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
2693
|
-
function ButtonGroup({ children, className, variant,
|
|
2715
|
+
function ButtonGroup({ children, className, variant, ...rest }) {
|
|
2694
2716
|
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
2695
2717
|
"div",
|
|
2696
2718
|
{
|
|
2719
|
+
...rest,
|
|
2697
2720
|
role: "group",
|
|
2698
|
-
"aria-label": ariaLabel,
|
|
2699
2721
|
className: (0, import_design_system_foundation47.cn)(ButtonGroup_default.buttonGroup, className, variant && ButtonGroup_default[`--variant_${variant}`]),
|
|
2700
2722
|
children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: ButtonGroup_default.container, children })
|
|
2701
2723
|
}
|
|
@@ -2703,7 +2725,7 @@ function ButtonGroup({ children, className, variant, "aria-label": ariaLabel })
|
|
|
2703
2725
|
}
|
|
2704
2726
|
|
|
2705
2727
|
// src/components/layout/Card/Card.module.css
|
|
2706
|
-
var Card_default = {"card":"
|
|
2728
|
+
var Card_default = {"card":"bds122Card-card","--default":"bds122Card---default","--elevated":"bds122Card---elevated","--outlined":"bds122Card---outlined","--clickable":"bds122Card---clickable","--padding-none":"bds122Card---padding-none","--padding-small":"bds122Card---padding-small","--padding-medium":"bds122Card---padding-medium","--padding-large":"bds122Card---padding-large","--text-start":"bds122Card---text-start","--text-center":"bds122Card---text-center","--text-end":"bds122Card---text-end"};
|
|
2707
2729
|
|
|
2708
2730
|
// src/components/layout/Card/Card.tsx
|
|
2709
2731
|
var import_design_system_foundation48 = require("@boostdev/design-system-foundation");
|
|
@@ -2714,9 +2736,8 @@ function Card({
|
|
|
2714
2736
|
variant = "default",
|
|
2715
2737
|
padding = "medium",
|
|
2716
2738
|
textAlign = "start",
|
|
2717
|
-
style,
|
|
2718
2739
|
onClick,
|
|
2719
|
-
|
|
2740
|
+
...rest
|
|
2720
2741
|
}) {
|
|
2721
2742
|
const classNames = (0, import_design_system_foundation48.cn)(
|
|
2722
2743
|
Card_default.card,
|
|
@@ -2730,10 +2751,9 @@ function Card({
|
|
|
2730
2751
|
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
2731
2752
|
Component,
|
|
2732
2753
|
{
|
|
2754
|
+
...rest,
|
|
2733
2755
|
className: classNames,
|
|
2734
2756
|
onClick,
|
|
2735
|
-
style,
|
|
2736
|
-
"aria-label": ariaLabel,
|
|
2737
2757
|
...onClick && { type: "button" },
|
|
2738
2758
|
children
|
|
2739
2759
|
}
|
|
@@ -2741,7 +2761,7 @@ function Card({
|
|
|
2741
2761
|
}
|
|
2742
2762
|
|
|
2743
2763
|
// src/components/layout/SectionHeader/SectionHeader.module.css
|
|
2744
|
-
var SectionHeader_default = {"sectionHeader":"
|
|
2764
|
+
var SectionHeader_default = {"sectionHeader":"bds122SectionHeader-sectionHeader","title":"bds122SectionHeader-title","subtitle":"bds122SectionHeader-subtitle","--start":"bds122SectionHeader---start","--center":"bds122SectionHeader---center","--end":"bds122SectionHeader---end","--small":"bds122SectionHeader---small","--medium":"bds122SectionHeader---medium","--large":"bds122SectionHeader---large"};
|
|
2745
2765
|
|
|
2746
2766
|
// src/components/layout/SectionHeader/SectionHeader.tsx
|
|
2747
2767
|
var import_design_system_foundation49 = require("@boostdev/design-system-foundation");
|
|
@@ -2752,23 +2772,24 @@ function SectionHeader({
|
|
|
2752
2772
|
className,
|
|
2753
2773
|
alignment = "start",
|
|
2754
2774
|
size = "medium",
|
|
2755
|
-
titleAs = "h2"
|
|
2775
|
+
titleAs = "h2",
|
|
2776
|
+
...rest
|
|
2756
2777
|
}) {
|
|
2757
2778
|
const Title = titleAs;
|
|
2758
|
-
return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: (0, import_design_system_foundation49.cn)(SectionHeader_default.sectionHeader, SectionHeader_default[`--${alignment}`], SectionHeader_default[`--${size}`], className), children: [
|
|
2779
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { ...rest, className: (0, import_design_system_foundation49.cn)(SectionHeader_default.sectionHeader, SectionHeader_default[`--${alignment}`], SectionHeader_default[`--${size}`], className), children: [
|
|
2759
2780
|
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Title, { className: SectionHeader_default.title, children: title }),
|
|
2760
2781
|
subtitle && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: SectionHeader_default.subtitle, children: subtitle })
|
|
2761
2782
|
] });
|
|
2762
2783
|
}
|
|
2763
2784
|
|
|
2764
2785
|
// src/components/layout/IconWrapper/IconWrapper.module.css
|
|
2765
|
-
var IconWrapper_default = {"wrapper":"
|
|
2786
|
+
var IconWrapper_default = {"wrapper":"bds122IconWrapper-wrapper"};
|
|
2766
2787
|
|
|
2767
2788
|
// src/components/layout/IconWrapper/IconWrapper.tsx
|
|
2768
2789
|
var import_design_system_foundation50 = require("@boostdev/design-system-foundation");
|
|
2769
2790
|
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
2770
|
-
function IconWrapper({ children, className,
|
|
2771
|
-
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: (0, import_design_system_foundation50.cn)(className, IconWrapper_default.wrapper),
|
|
2791
|
+
function IconWrapper({ children, className, ...rest }) {
|
|
2792
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { ...rest, className: (0, import_design_system_foundation50.cn)(className, IconWrapper_default.wrapper), children });
|
|
2772
2793
|
}
|
|
2773
2794
|
|
|
2774
2795
|
// src/index.ts
|