@boostdev/design-system-components 1.2.0 → 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 +46 -4
- package/README.md +15 -15
- package/dist/client.cjs +149 -124
- package/dist/client.css +503 -525
- package/dist/client.d.cts +71 -96
- package/dist/client.d.ts +71 -96
- package/dist/client.js +149 -124
- package/dist/index.cjs +149 -124
- package/dist/index.css +503 -525
- package/dist/index.d.cts +71 -96
- package/dist/index.d.ts +71 -96
- package/dist/index.js +149 -124
- package/dist/web-components/{chunk-6MH5UWUD.js → chunk-2FGATTGT.js} +5 -0
- package/dist/web-components/{chunk-5IPHEONG.js → chunk-6I2DBFQ7.js} +1 -0
- package/dist/web-components/{chunk-DI46Q2EA.js → chunk-OCODKRVZ.js} +57 -82
- package/dist/web-components/index.d.ts +571 -1
- package/dist/web-components/index.js +1501 -4
- package/dist/web-components/interaction/bds-collapsible.js +1 -1
- package/dist/web-components/interaction/bds-drawer.js +1 -1
- package/dist/web-components/interaction/form/bds-segmented-control.js +1 -1
- 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.module.css +37 -62
- package/src/components/interaction/Drawer/Drawer.spec.tsx +3 -3
- package/src/components/interaction/Drawer/Drawer.tsx +25 -24
- 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.mdx +8 -4
- package/src/components/interaction/form/SegmentedControl/SegmentedControl.module.css +13 -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/src/stories/Introduction.mdx +2 -1
- package/src/web-components/index.ts +12 -0
- package/src/web-components/interaction/BdsAccordion.mdx +80 -28
- package/src/web-components/interaction/BdsAccordion.stories.tsx +67 -58
- package/src/web-components/interaction/BdsCollapsible.mdx +93 -23
- package/src/web-components/interaction/BdsCollapsible.stories.tsx +29 -48
- package/src/web-components/interaction/BdsDialog.mdx +88 -27
- package/src/web-components/interaction/BdsDialog.stories.tsx +129 -47
- package/src/web-components/interaction/BdsDrawer.mdx +85 -27
- package/src/web-components/interaction/BdsDrawer.stories.tsx +161 -31
- package/src/web-components/interaction/BdsDropdownMenu.mdx +108 -0
- package/src/web-components/interaction/BdsDropdownMenu.stories.tsx +91 -0
- package/src/web-components/interaction/BdsSkipLink.mdx +72 -16
- package/src/web-components/interaction/BdsSkipLink.stories.tsx +47 -34
- package/src/web-components/interaction/BdsTabs.mdx +97 -27
- package/src/web-components/interaction/BdsTabs.stories.tsx +69 -55
- package/src/web-components/interaction/BdsTooltip.mdx +84 -18
- package/src/web-components/interaction/BdsTooltip.stories.tsx +49 -30
- package/src/web-components/interaction/bds-collapsible.ts +1 -0
- package/src/web-components/interaction/bds-drawer.ts +59 -82
- package/src/web-components/interaction/bds-dropdown-menu-item.ts +124 -0
- package/src/web-components/interaction/bds-dropdown-menu.spec.ts +102 -0
- package/src/web-components/interaction/bds-dropdown-menu.ts +200 -0
- package/src/web-components/interaction/form/BdsCheckbox.mdx +57 -20
- package/src/web-components/interaction/form/BdsCheckbox.stories.tsx +35 -36
- package/src/web-components/interaction/form/BdsCheckboxGroup.mdx +70 -0
- package/src/web-components/interaction/form/BdsCheckboxGroup.stories.tsx +81 -0
- package/src/web-components/interaction/form/BdsCombobox.mdx +52 -33
- package/src/web-components/interaction/form/BdsCombobox.stories.tsx +55 -53
- package/src/web-components/interaction/form/BdsFileInput.mdx +59 -24
- package/src/web-components/interaction/form/BdsFileInput.stories.tsx +38 -53
- package/src/web-components/interaction/form/BdsFormInput.mdx +98 -0
- package/src/web-components/interaction/form/BdsFormInput.stories.tsx +139 -0
- package/src/web-components/interaction/form/BdsNumberInput.mdx +51 -22
- package/src/web-components/interaction/form/BdsNumberInput.stories.tsx +24 -46
- package/src/web-components/interaction/form/BdsRadio.mdx +53 -22
- package/src/web-components/interaction/form/BdsRadio.stories.tsx +19 -51
- package/src/web-components/interaction/form/BdsRadioGroup.mdx +73 -0
- package/src/web-components/interaction/form/BdsRadioGroup.stories.tsx +88 -0
- package/src/web-components/interaction/form/BdsSegmentedControl.mdx +76 -23
- package/src/web-components/interaction/form/BdsSegmentedControl.stories.tsx +64 -54
- package/src/web-components/interaction/form/BdsSelect.mdx +59 -21
- package/src/web-components/interaction/form/BdsSelect.stories.tsx +47 -56
- package/src/web-components/interaction/form/BdsSlider.mdx +55 -27
- package/src/web-components/interaction/form/BdsSlider.stories.tsx +23 -44
- package/src/web-components/interaction/form/BdsSwitch.mdx +53 -20
- package/src/web-components/interaction/form/BdsSwitch.stories.tsx +22 -37
- package/src/web-components/interaction/form/BdsTextarea.mdx +54 -22
- package/src/web-components/interaction/form/BdsTextarea.stories.tsx +35 -44
- package/src/web-components/interaction/form/bds-checkbox-group.spec.ts +55 -0
- package/src/web-components/interaction/form/bds-checkbox-group.ts +117 -0
- package/src/web-components/interaction/form/bds-form-input.spec.ts +83 -0
- package/src/web-components/interaction/form/bds-form-input.ts +268 -0
- package/src/web-components/interaction/form/bds-radio-group.spec.ts +62 -0
- package/src/web-components/interaction/form/bds-radio-group.ts +142 -0
- package/src/web-components/interaction/form/bds-segmented-control.ts +5 -0
- package/src/web-components/ui/BdsAvatar.mdx +29 -20
- package/src/web-components/ui/BdsAvatar.stories.tsx +14 -28
- package/src/web-components/ui/BdsBreadcrumb.mdx +22 -19
- package/src/web-components/ui/BdsBreadcrumb.stories.tsx +11 -21
- package/src/web-components/ui/BdsButtonGroup.mdx +69 -0
- package/src/web-components/ui/BdsButtonGroup.stories.tsx +66 -0
- package/src/web-components/ui/BdsCalendar.mdx +93 -0
- package/src/web-components/ui/BdsCalendar.stories.tsx +63 -0
- package/src/web-components/ui/BdsCard.mdx +30 -25
- package/src/web-components/ui/BdsCard.stories.tsx +19 -42
- package/src/web-components/ui/BdsCarousel.mdx +83 -0
- package/src/web-components/ui/BdsCarousel.stories.tsx +96 -0
- package/src/web-components/ui/BdsDescriptionList.mdx +13 -16
- package/src/web-components/ui/BdsDescriptionList.stories.tsx +34 -49
- package/src/web-components/ui/BdsIconWrapper.mdx +20 -20
- package/src/web-components/ui/BdsIconWrapper.stories.tsx +46 -41
- package/src/web-components/ui/BdsLink.mdx +21 -17
- package/src/web-components/ui/BdsLink.stories.tsx +19 -20
- package/src/web-components/ui/BdsLoading.mdx +9 -13
- package/src/web-components/ui/BdsLoading.stories.tsx +8 -10
- package/src/web-components/ui/BdsNotificationBanner.mdx +32 -37
- package/src/web-components/ui/BdsNotificationBanner.stories.tsx +38 -47
- package/src/web-components/ui/BdsPagination.mdx +74 -0
- package/src/web-components/ui/BdsPagination.stories.tsx +36 -0
- package/src/web-components/ui/BdsProgress.mdx +24 -17
- package/src/web-components/ui/BdsProgress.stories.tsx +55 -29
- package/src/web-components/ui/BdsProgressCircle.mdx +24 -18
- package/src/web-components/ui/BdsProgressCircle.stories.tsx +17 -29
- package/src/web-components/ui/BdsRating.mdx +22 -22
- package/src/web-components/ui/BdsRating.stories.tsx +19 -13
- package/src/web-components/ui/BdsSectionHeader.mdx +31 -28
- package/src/web-components/ui/BdsSectionHeader.stories.tsx +21 -23
- package/src/web-components/ui/BdsSeparator.mdx +22 -8
- package/src/web-components/ui/BdsSeparator.stories.tsx +27 -19
- package/src/web-components/ui/BdsSkeleton.mdx +20 -26
- package/src/web-components/ui/BdsSkeleton.stories.tsx +23 -23
- package/src/web-components/ui/BdsTable.mdx +81 -0
- package/src/web-components/ui/BdsTable.stories.tsx +83 -0
- package/src/web-components/ui/BdsTypography.mdx +20 -29
- package/src/web-components/ui/BdsTypography.stories.tsx +19 -18
- package/src/web-components/ui/bds-button-group.spec.ts +40 -0
- package/src/web-components/ui/bds-button-group.ts +78 -0
- package/src/web-components/ui/bds-calendar.spec.ts +91 -0
- package/src/web-components/ui/bds-calendar.ts +427 -0
- package/src/web-components/ui/bds-carousel.spec.ts +64 -0
- package/src/web-components/ui/bds-carousel.ts +296 -0
- package/src/web-components/ui/bds-pagination.spec.ts +67 -0
- package/src/web-components/ui/bds-pagination.ts +197 -0
- package/src/web-components/ui/bds-table.spec.ts +45 -0
- package/src/web-components/ui/bds-table.ts +96 -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;
|
|
@@ -1495,23 +1511,27 @@ function Drawer({
|
|
|
1495
1511
|
return () => dialog.removeEventListener("command", handleCommand);
|
|
1496
1512
|
}, [onOpen, onClose]);
|
|
1497
1513
|
const handleClick = (e) => {
|
|
1498
|
-
|
|
1514
|
+
const dialog = dialogRef.current;
|
|
1515
|
+
if (!dialog) return;
|
|
1516
|
+
const rect = dialog.getBoundingClientRect();
|
|
1517
|
+
const outside = e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom;
|
|
1518
|
+
if (outside) onClose();
|
|
1499
1519
|
};
|
|
1500
1520
|
const handleCancel = (e) => {
|
|
1501
1521
|
e.preventDefault();
|
|
1502
1522
|
onClose();
|
|
1503
1523
|
};
|
|
1504
|
-
return /* @__PURE__ */ (0, import_jsx_runtime26.
|
|
1524
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1505
1525
|
"dialog",
|
|
1506
1526
|
{
|
|
1527
|
+
...rest,
|
|
1507
1528
|
ref: dialogRef,
|
|
1508
1529
|
id,
|
|
1509
1530
|
className: (0, import_design_system_foundation26.cn)(Drawer_default.drawer, Drawer_default[`--side_${side}`], className),
|
|
1510
|
-
"aria-label": ariaLabel,
|
|
1511
1531
|
"aria-modal": "true",
|
|
1512
1532
|
onClick: handleClick,
|
|
1513
1533
|
onCancel: handleCancel,
|
|
1514
|
-
children:
|
|
1534
|
+
children: [
|
|
1515
1535
|
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: Drawer_default.header, children: [
|
|
1516
1536
|
!!title && title,
|
|
1517
1537
|
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
@@ -1527,7 +1547,7 @@ function Drawer({
|
|
|
1527
1547
|
)
|
|
1528
1548
|
] }),
|
|
1529
1549
|
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: Drawer_default.body, children })
|
|
1530
|
-
]
|
|
1550
|
+
]
|
|
1531
1551
|
}
|
|
1532
1552
|
);
|
|
1533
1553
|
}
|
|
@@ -1536,7 +1556,7 @@ function Drawer({
|
|
|
1536
1556
|
var import_react9 = require("react");
|
|
1537
1557
|
|
|
1538
1558
|
// src/components/interaction/DropdownMenu/DropdownMenu.module.css
|
|
1539
|
-
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"};
|
|
1540
1560
|
|
|
1541
1561
|
// src/components/interaction/DropdownMenu/DropdownMenu.tsx
|
|
1542
1562
|
var import_design_system_foundation27 = require("@boostdev/design-system-foundation");
|
|
@@ -1545,7 +1565,8 @@ function DropdownMenu({
|
|
|
1545
1565
|
trigger,
|
|
1546
1566
|
items,
|
|
1547
1567
|
placement = "bottom-start",
|
|
1548
|
-
className
|
|
1568
|
+
className,
|
|
1569
|
+
...rest
|
|
1549
1570
|
}) {
|
|
1550
1571
|
const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
|
|
1551
1572
|
const containerRef = (0, import_react9.useRef)(null);
|
|
@@ -1608,7 +1629,7 @@ function DropdownMenu({
|
|
|
1608
1629
|
if (typeof existingOnClick === "function") existingOnClick(e);
|
|
1609
1630
|
}
|
|
1610
1631
|
}) : trigger;
|
|
1611
|
-
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: [
|
|
1612
1633
|
triggerEl,
|
|
1613
1634
|
isOpen && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1614
1635
|
"ul",
|
|
@@ -1649,7 +1670,7 @@ function DropdownMenu({
|
|
|
1649
1670
|
var import_react10 = require("react");
|
|
1650
1671
|
|
|
1651
1672
|
// src/components/interaction/Popover/Popover.module.css
|
|
1652
|
-
var Popover_default = {"wrapper":"
|
|
1673
|
+
var Popover_default = {"wrapper":"bds122Popover-wrapper","panel":"bds122Popover-panel","g":"bds122Popover-g"};
|
|
1653
1674
|
|
|
1654
1675
|
// src/components/interaction/Popover/Popover.tsx
|
|
1655
1676
|
var import_design_system_foundation28 = require("@boostdev/design-system-foundation");
|
|
@@ -1664,7 +1685,8 @@ function Popover({
|
|
|
1664
1685
|
content,
|
|
1665
1686
|
placement = "bottom",
|
|
1666
1687
|
className,
|
|
1667
|
-
"aria-label": ariaLabel
|
|
1688
|
+
"aria-label": ariaLabel,
|
|
1689
|
+
...rest
|
|
1668
1690
|
}) {
|
|
1669
1691
|
const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
|
|
1670
1692
|
const containerRef = (0, import_react10.useRef)(null);
|
|
@@ -1713,7 +1735,7 @@ function Popover({
|
|
|
1713
1735
|
// avoid a double-toggle when both onClick and invoker fire.
|
|
1714
1736
|
onClick: children.props.onClick
|
|
1715
1737
|
}) : children;
|
|
1716
|
-
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: [
|
|
1717
1739
|
trigger,
|
|
1718
1740
|
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1719
1741
|
"div",
|
|
@@ -1733,15 +1755,16 @@ function Popover({
|
|
|
1733
1755
|
}
|
|
1734
1756
|
|
|
1735
1757
|
// src/components/interaction/Rating/Rating.module.css
|
|
1736
|
-
var Rating_default = {"rating":"
|
|
1758
|
+
var Rating_default = {"rating":"bds122Rating-rating","star":"bds122Rating-star","--filled":"bds122Rating---filled"};
|
|
1737
1759
|
|
|
1738
1760
|
// src/components/interaction/Rating/Rating.tsx
|
|
1739
1761
|
var import_design_system_foundation29 = require("@boostdev/design-system-foundation");
|
|
1740
1762
|
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1741
|
-
function Rating({ value, max = 5, className }) {
|
|
1763
|
+
function Rating({ value, max = 5, className, ...rest }) {
|
|
1742
1764
|
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1743
1765
|
"div",
|
|
1744
1766
|
{
|
|
1767
|
+
...rest,
|
|
1745
1768
|
className: (0, import_design_system_foundation29.cn)(Rating_default.rating, className),
|
|
1746
1769
|
role: "img",
|
|
1747
1770
|
"aria-label": `${value} out of ${max} stars`,
|
|
@@ -1764,7 +1787,7 @@ function Rating({ value, max = 5, className }) {
|
|
|
1764
1787
|
var import_react11 = require("react");
|
|
1765
1788
|
|
|
1766
1789
|
// src/components/interaction/Toast/Toast.module.css
|
|
1767
|
-
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"};
|
|
1768
1791
|
|
|
1769
1792
|
// src/components/interaction/Toast/Toast.tsx
|
|
1770
1793
|
var import_design_system_foundation30 = require("@boostdev/design-system-foundation");
|
|
@@ -1837,10 +1860,10 @@ function useToast() {
|
|
|
1837
1860
|
var import_react12 = require("react");
|
|
1838
1861
|
|
|
1839
1862
|
// src/components/interaction/form/Checkbox/Checkbox.module.css
|
|
1840
|
-
var Checkbox_default = {"checkboxGroup":"
|
|
1863
|
+
var Checkbox_default = {"checkboxGroup":"bds122Checkbox-checkboxGroup","inputWrapper":"bds122Checkbox-inputWrapper","checkbox":"bds122Checkbox-checkbox","checkboxError":"bds122Checkbox-checkboxError"};
|
|
1841
1864
|
|
|
1842
1865
|
// src/components/interaction/form/atoms/Message.module.css
|
|
1843
|
-
var Message_default = {"error":"
|
|
1866
|
+
var Message_default = {"error":"bds122Message-error","hint":"bds122Message-hint"};
|
|
1844
1867
|
|
|
1845
1868
|
// src/components/interaction/form/atoms/Message.tsx
|
|
1846
1869
|
var import_design_system_foundation31 = require("@boostdev/design-system-foundation");
|
|
@@ -1851,7 +1874,7 @@ var Message = ({ message, type, inputId, className }) => {
|
|
|
1851
1874
|
};
|
|
1852
1875
|
|
|
1853
1876
|
// src/components/interaction/form/atoms/Label.module.css
|
|
1854
|
-
var Label_default = {"label":"
|
|
1877
|
+
var Label_default = {"label":"bds122Label-label"};
|
|
1855
1878
|
|
|
1856
1879
|
// src/components/interaction/form/atoms/Label.tsx
|
|
1857
1880
|
var import_design_system_foundation32 = require("@boostdev/design-system-foundation");
|
|
@@ -1864,13 +1887,13 @@ var Label = ({ label, id, className }) => {
|
|
|
1864
1887
|
var import_design_system_foundation34 = require("@boostdev/design-system-foundation");
|
|
1865
1888
|
|
|
1866
1889
|
// src/components/interaction/form/atoms/InputContainer.module.css
|
|
1867
|
-
var InputContainer_default = {"container":"
|
|
1890
|
+
var InputContainer_default = {"container":"bds122InputContainer-container"};
|
|
1868
1891
|
|
|
1869
1892
|
// src/components/interaction/form/atoms/InputContainer.tsx
|
|
1870
1893
|
var import_design_system_foundation33 = require("@boostdev/design-system-foundation");
|
|
1871
1894
|
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1872
|
-
var InputContainer = ({ children, className }) => {
|
|
1873
|
-
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 });
|
|
1874
1897
|
};
|
|
1875
1898
|
|
|
1876
1899
|
// src/components/interaction/form/Checkbox/Checkbox.tsx
|
|
@@ -1905,7 +1928,7 @@ function Checkbox({ label, name, error, hint, className, ...props }) {
|
|
|
1905
1928
|
var import_react13 = require("react");
|
|
1906
1929
|
|
|
1907
1930
|
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css
|
|
1908
|
-
var CheckboxGroup_default = {"group":"
|
|
1931
|
+
var CheckboxGroup_default = {"group":"bds122CheckboxGroup-group","legend":"bds122CheckboxGroup-legend","required":"bds122CheckboxGroup-required","items":"bds122CheckboxGroup-items"};
|
|
1909
1932
|
|
|
1910
1933
|
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
|
|
1911
1934
|
var import_design_system_foundation35 = require("@boostdev/design-system-foundation");
|
|
@@ -1916,8 +1939,8 @@ function CheckboxGroup({
|
|
|
1916
1939
|
error,
|
|
1917
1940
|
hint,
|
|
1918
1941
|
required,
|
|
1919
|
-
|
|
1920
|
-
|
|
1942
|
+
className,
|
|
1943
|
+
...rest
|
|
1921
1944
|
}) {
|
|
1922
1945
|
const id = (0, import_react13.useId)();
|
|
1923
1946
|
const hintId = id + "hint";
|
|
@@ -1926,8 +1949,8 @@ function CheckboxGroup({
|
|
|
1926
1949
|
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
1927
1950
|
"fieldset",
|
|
1928
1951
|
{
|
|
1952
|
+
...rest,
|
|
1929
1953
|
className: (0, import_design_system_foundation35.cn)(CheckboxGroup_default.group, className),
|
|
1930
|
-
disabled,
|
|
1931
1954
|
"aria-required": required || void 0,
|
|
1932
1955
|
"aria-describedby": describedBy,
|
|
1933
1956
|
children: [
|
|
@@ -1947,7 +1970,7 @@ function CheckboxGroup({
|
|
|
1947
1970
|
var import_react14 = require("react");
|
|
1948
1971
|
|
|
1949
1972
|
// src/components/interaction/form/Combobox/Combobox.module.css
|
|
1950
|
-
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"};
|
|
1951
1974
|
|
|
1952
1975
|
// src/components/interaction/form/Combobox/Combobox.tsx
|
|
1953
1976
|
var import_design_system_foundation36 = require("@boostdev/design-system-foundation");
|
|
@@ -1962,7 +1985,8 @@ function Combobox({
|
|
|
1962
1985
|
disabled = false,
|
|
1963
1986
|
error,
|
|
1964
1987
|
hint,
|
|
1965
|
-
className
|
|
1988
|
+
className,
|
|
1989
|
+
...rest
|
|
1966
1990
|
}) {
|
|
1967
1991
|
const id = name + (0, import_react14.useId)();
|
|
1968
1992
|
const listboxId = id + "listbox";
|
|
@@ -2029,7 +2053,7 @@ function Combobox({
|
|
|
2029
2053
|
setIsOpen(false);
|
|
2030
2054
|
}
|
|
2031
2055
|
};
|
|
2032
|
-
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: [
|
|
2033
2057
|
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Label, { id, label }),
|
|
2034
2058
|
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ref: containerRef, className: Combobox_default.inputWrapper, children: [
|
|
2035
2059
|
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
@@ -2097,7 +2121,7 @@ function Combobox({
|
|
|
2097
2121
|
var import_react15 = require("react");
|
|
2098
2122
|
|
|
2099
2123
|
// src/components/interaction/form/FileInput/FileInput.module.css
|
|
2100
|
-
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"};
|
|
2101
2125
|
|
|
2102
2126
|
// src/components/interaction/form/FileInput/FileInput.tsx
|
|
2103
2127
|
var import_design_system_foundation37 = require("@boostdev/design-system-foundation");
|
|
@@ -2112,7 +2136,8 @@ function FileInput({
|
|
|
2112
2136
|
error,
|
|
2113
2137
|
hint,
|
|
2114
2138
|
onChange,
|
|
2115
|
-
className
|
|
2139
|
+
className,
|
|
2140
|
+
...rest
|
|
2116
2141
|
}) {
|
|
2117
2142
|
const uid = name + (0, import_react15.useId)();
|
|
2118
2143
|
const hintId = uid + "hint";
|
|
@@ -2150,7 +2175,7 @@ function FileInput({
|
|
|
2150
2175
|
if (!disabled) setIsDragging(true);
|
|
2151
2176
|
};
|
|
2152
2177
|
const handleDragLeave = () => setIsDragging(false);
|
|
2153
|
-
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: [
|
|
2154
2179
|
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
2155
2180
|
"label",
|
|
2156
2181
|
{
|
|
@@ -2197,7 +2222,7 @@ function FileInput({
|
|
|
2197
2222
|
var import_react16 = require("react");
|
|
2198
2223
|
|
|
2199
2224
|
// src/components/interaction/form/FormInput/FormInput.module.css
|
|
2200
|
-
var FormInput_default = {"formGroup":"
|
|
2225
|
+
var FormInput_default = {"formGroup":"bds122FormInput-formGroup","input":"bds122FormInput-input","inputError":"bds122FormInput-inputError"};
|
|
2201
2226
|
|
|
2202
2227
|
// src/components/interaction/form/FormInput/FormInput.tsx
|
|
2203
2228
|
var import_design_system_foundation38 = require("@boostdev/design-system-foundation");
|
|
@@ -2241,7 +2266,7 @@ function FormInput({
|
|
|
2241
2266
|
var import_react17 = require("react");
|
|
2242
2267
|
|
|
2243
2268
|
// src/components/interaction/form/NumberInput/NumberInput.module.css
|
|
2244
|
-
var NumberInput_default = {"formGroup":"
|
|
2269
|
+
var NumberInput_default = {"formGroup":"bds122NumberInput-formGroup","inputRow":"bds122NumberInput-inputRow","input":"bds122NumberInput-input","inputError":"bds122NumberInput-inputError","stepper":"bds122NumberInput-stepper"};
|
|
2245
2270
|
|
|
2246
2271
|
// src/components/interaction/form/NumberInput/NumberInput.tsx
|
|
2247
2272
|
var import_design_system_foundation39 = require("@boostdev/design-system-foundation");
|
|
@@ -2258,7 +2283,8 @@ function NumberInput({
|
|
|
2258
2283
|
error,
|
|
2259
2284
|
hint,
|
|
2260
2285
|
onChange,
|
|
2261
|
-
className
|
|
2286
|
+
className,
|
|
2287
|
+
...rest
|
|
2262
2288
|
}) {
|
|
2263
2289
|
const uid = name + (0, import_react17.useId)();
|
|
2264
2290
|
const hintId = uid + "hint";
|
|
@@ -2283,7 +2309,7 @@ function NumberInput({
|
|
|
2283
2309
|
}
|
|
2284
2310
|
onChange?.(next);
|
|
2285
2311
|
};
|
|
2286
|
-
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: [
|
|
2287
2313
|
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Label, { id: uid, label }),
|
|
2288
2314
|
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: NumberInput_default.inputRow, children: [
|
|
2289
2315
|
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
@@ -2345,7 +2371,7 @@ function NumberInput({
|
|
|
2345
2371
|
var import_react18 = require("react");
|
|
2346
2372
|
|
|
2347
2373
|
// src/components/interaction/form/Radio/Radio.module.css
|
|
2348
|
-
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"};
|
|
2349
2375
|
|
|
2350
2376
|
// src/components/interaction/form/Radio/Radio.tsx
|
|
2351
2377
|
var import_design_system_foundation40 = require("@boostdev/design-system-foundation");
|
|
@@ -2383,7 +2409,7 @@ function Radio({ label, name, description, error, hint, className, ...props }) {
|
|
|
2383
2409
|
var import_react19 = require("react");
|
|
2384
2410
|
|
|
2385
2411
|
// src/components/interaction/form/RadioGroup/RadioGroup.module.css
|
|
2386
|
-
var RadioGroup_default = {"group":"
|
|
2412
|
+
var RadioGroup_default = {"group":"bds122RadioGroup-group","legend":"bds122RadioGroup-legend","required":"bds122RadioGroup-required","items":"bds122RadioGroup-items"};
|
|
2387
2413
|
|
|
2388
2414
|
// src/components/interaction/form/RadioGroup/RadioGroup.tsx
|
|
2389
2415
|
var import_design_system_foundation41 = require("@boostdev/design-system-foundation");
|
|
@@ -2394,8 +2420,8 @@ function RadioGroup({
|
|
|
2394
2420
|
error,
|
|
2395
2421
|
hint,
|
|
2396
2422
|
required,
|
|
2397
|
-
|
|
2398
|
-
|
|
2423
|
+
className,
|
|
2424
|
+
...rest
|
|
2399
2425
|
}) {
|
|
2400
2426
|
const id = (0, import_react19.useId)();
|
|
2401
2427
|
const hintId = id + "hint";
|
|
@@ -2404,8 +2430,8 @@ function RadioGroup({
|
|
|
2404
2430
|
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
2405
2431
|
"fieldset",
|
|
2406
2432
|
{
|
|
2433
|
+
...rest,
|
|
2407
2434
|
className: (0, import_design_system_foundation41.cn)(RadioGroup_default.group, className),
|
|
2408
|
-
disabled,
|
|
2409
2435
|
"aria-required": required || void 0,
|
|
2410
2436
|
"aria-describedby": describedBy,
|
|
2411
2437
|
children: [
|
|
@@ -2425,7 +2451,7 @@ function RadioGroup({
|
|
|
2425
2451
|
var import_react20 = require("react");
|
|
2426
2452
|
|
|
2427
2453
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.module.css
|
|
2428
|
-
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"};
|
|
2429
2455
|
|
|
2430
2456
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
|
|
2431
2457
|
var import_design_system_foundation42 = require("@boostdev/design-system-foundation");
|
|
@@ -2437,7 +2463,7 @@ function SegmentedControl({
|
|
|
2437
2463
|
size = "medium",
|
|
2438
2464
|
variant = "outline",
|
|
2439
2465
|
className,
|
|
2440
|
-
|
|
2466
|
+
...rest
|
|
2441
2467
|
}) {
|
|
2442
2468
|
const validChildren = import_react20.Children.toArray(children).filter(import_react20.isValidElement);
|
|
2443
2469
|
const autoIndex = selectedIndexProp === void 0 ? validChildren.findIndex((child) => {
|
|
@@ -2448,8 +2474,8 @@ function SegmentedControl({
|
|
|
2448
2474
|
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
2449
2475
|
"div",
|
|
2450
2476
|
{
|
|
2477
|
+
...rest,
|
|
2451
2478
|
role: "group",
|
|
2452
|
-
"aria-label": ariaLabel,
|
|
2453
2479
|
className: (0, import_design_system_foundation42.cn)(SegmentedControl_default.control, SegmentedControl_default[`--size_${size}`], SegmentedControl_default[`--variant_${variant}`], className),
|
|
2454
2480
|
style: {
|
|
2455
2481
|
"--control_count": validChildren.length,
|
|
@@ -2481,7 +2507,7 @@ function SegmentedControl({
|
|
|
2481
2507
|
var import_react21 = require("react");
|
|
2482
2508
|
|
|
2483
2509
|
// src/components/interaction/form/Select/Select.module.css
|
|
2484
|
-
var Select_default = {"formGroup":"
|
|
2510
|
+
var Select_default = {"formGroup":"bds122Select-formGroup","selectWrapper":"bds122Select-selectWrapper","select":"bds122Select-select","selectError":"bds122Select-selectError","chevron":"bds122Select-chevron"};
|
|
2485
2511
|
|
|
2486
2512
|
// src/components/interaction/form/Select/Select.tsx
|
|
2487
2513
|
var import_design_system_foundation43 = require("@boostdev/design-system-foundation");
|
|
@@ -2532,7 +2558,7 @@ function Select({
|
|
|
2532
2558
|
var import_react22 = require("react");
|
|
2533
2559
|
|
|
2534
2560
|
// src/components/interaction/form/Slider/Slider.module.css
|
|
2535
|
-
var Slider_default = {"formGroup":"
|
|
2561
|
+
var Slider_default = {"formGroup":"bds122Slider-formGroup","labelRow":"bds122Slider-labelRow","value":"bds122Slider-value","slider":"bds122Slider-slider","sliderError":"bds122Slider-sliderError"};
|
|
2536
2562
|
|
|
2537
2563
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
2538
2564
|
var import_design_system_foundation44 = require("@boostdev/design-system-foundation");
|
|
@@ -2594,7 +2620,7 @@ function Slider({
|
|
|
2594
2620
|
var import_react23 = require("react");
|
|
2595
2621
|
|
|
2596
2622
|
// src/components/interaction/form/Switch/Switch.module.css
|
|
2597
|
-
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"};
|
|
2598
2624
|
|
|
2599
2625
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2600
2626
|
var import_design_system_foundation45 = require("@boostdev/design-system-foundation");
|
|
@@ -2642,7 +2668,7 @@ function Switch({
|
|
|
2642
2668
|
var import_react24 = require("react");
|
|
2643
2669
|
|
|
2644
2670
|
// src/components/interaction/form/Textarea/Textarea.module.css
|
|
2645
|
-
var Textarea_default = {"formGroup":"
|
|
2671
|
+
var Textarea_default = {"formGroup":"bds122Textarea-formGroup","textarea":"bds122Textarea-textarea","textareaError":"bds122Textarea-textareaError"};
|
|
2646
2672
|
|
|
2647
2673
|
// src/components/interaction/form/Textarea/Textarea.tsx
|
|
2648
2674
|
var import_design_system_foundation46 = require("@boostdev/design-system-foundation");
|
|
@@ -2681,17 +2707,17 @@ function Textarea({
|
|
|
2681
2707
|
}
|
|
2682
2708
|
|
|
2683
2709
|
// src/components/layout/ButtonGroup/ButtonGroup.module.css
|
|
2684
|
-
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"};
|
|
2685
2711
|
|
|
2686
2712
|
// src/components/layout/ButtonGroup/ButtonGroup.tsx
|
|
2687
2713
|
var import_design_system_foundation47 = require("@boostdev/design-system-foundation");
|
|
2688
2714
|
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
2689
|
-
function ButtonGroup({ children, className, variant,
|
|
2715
|
+
function ButtonGroup({ children, className, variant, ...rest }) {
|
|
2690
2716
|
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
2691
2717
|
"div",
|
|
2692
2718
|
{
|
|
2719
|
+
...rest,
|
|
2693
2720
|
role: "group",
|
|
2694
|
-
"aria-label": ariaLabel,
|
|
2695
2721
|
className: (0, import_design_system_foundation47.cn)(ButtonGroup_default.buttonGroup, className, variant && ButtonGroup_default[`--variant_${variant}`]),
|
|
2696
2722
|
children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: ButtonGroup_default.container, children })
|
|
2697
2723
|
}
|
|
@@ -2699,7 +2725,7 @@ function ButtonGroup({ children, className, variant, "aria-label": ariaLabel })
|
|
|
2699
2725
|
}
|
|
2700
2726
|
|
|
2701
2727
|
// src/components/layout/Card/Card.module.css
|
|
2702
|
-
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"};
|
|
2703
2729
|
|
|
2704
2730
|
// src/components/layout/Card/Card.tsx
|
|
2705
2731
|
var import_design_system_foundation48 = require("@boostdev/design-system-foundation");
|
|
@@ -2710,9 +2736,8 @@ function Card({
|
|
|
2710
2736
|
variant = "default",
|
|
2711
2737
|
padding = "medium",
|
|
2712
2738
|
textAlign = "start",
|
|
2713
|
-
style,
|
|
2714
2739
|
onClick,
|
|
2715
|
-
|
|
2740
|
+
...rest
|
|
2716
2741
|
}) {
|
|
2717
2742
|
const classNames = (0, import_design_system_foundation48.cn)(
|
|
2718
2743
|
Card_default.card,
|
|
@@ -2726,10 +2751,9 @@ function Card({
|
|
|
2726
2751
|
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
2727
2752
|
Component,
|
|
2728
2753
|
{
|
|
2754
|
+
...rest,
|
|
2729
2755
|
className: classNames,
|
|
2730
2756
|
onClick,
|
|
2731
|
-
style,
|
|
2732
|
-
"aria-label": ariaLabel,
|
|
2733
2757
|
...onClick && { type: "button" },
|
|
2734
2758
|
children
|
|
2735
2759
|
}
|
|
@@ -2737,7 +2761,7 @@ function Card({
|
|
|
2737
2761
|
}
|
|
2738
2762
|
|
|
2739
2763
|
// src/components/layout/SectionHeader/SectionHeader.module.css
|
|
2740
|
-
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"};
|
|
2741
2765
|
|
|
2742
2766
|
// src/components/layout/SectionHeader/SectionHeader.tsx
|
|
2743
2767
|
var import_design_system_foundation49 = require("@boostdev/design-system-foundation");
|
|
@@ -2748,23 +2772,24 @@ function SectionHeader({
|
|
|
2748
2772
|
className,
|
|
2749
2773
|
alignment = "start",
|
|
2750
2774
|
size = "medium",
|
|
2751
|
-
titleAs = "h2"
|
|
2775
|
+
titleAs = "h2",
|
|
2776
|
+
...rest
|
|
2752
2777
|
}) {
|
|
2753
2778
|
const Title = titleAs;
|
|
2754
|
-
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: [
|
|
2755
2780
|
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Title, { className: SectionHeader_default.title, children: title }),
|
|
2756
2781
|
subtitle && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: SectionHeader_default.subtitle, children: subtitle })
|
|
2757
2782
|
] });
|
|
2758
2783
|
}
|
|
2759
2784
|
|
|
2760
2785
|
// src/components/layout/IconWrapper/IconWrapper.module.css
|
|
2761
|
-
var IconWrapper_default = {"wrapper":"
|
|
2786
|
+
var IconWrapper_default = {"wrapper":"bds122IconWrapper-wrapper"};
|
|
2762
2787
|
|
|
2763
2788
|
// src/components/layout/IconWrapper/IconWrapper.tsx
|
|
2764
2789
|
var import_design_system_foundation50 = require("@boostdev/design-system-foundation");
|
|
2765
2790
|
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
2766
|
-
function IconWrapper({ children, className,
|
|
2767
|
-
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 });
|
|
2768
2793
|
}
|
|
2769
2794
|
|
|
2770
2795
|
// src/index.ts
|