@boostdev/design-system-components 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +46 -5
- package/dist/client.cjs +206 -113
- package/dist/client.css +664 -624
- package/dist/client.d.cts +9 -3
- package/dist/client.d.ts +9 -3
- package/dist/client.js +241 -149
- package/dist/index.cjs +206 -113
- package/dist/index.css +664 -624
- package/dist/index.d.cts +9 -3
- package/dist/index.d.ts +9 -3
- package/dist/index.js +241 -149
- package/dist/web-components.d.ts +1 -0
- package/dist/web-components.js +10 -0
- package/package.json +1 -1
- package/src/components/interaction/Button/Button.module.css +1 -1
- package/src/components/interaction/Button/Button.native.mdx +72 -0
- package/src/components/interaction/Command/Command.module.css +7 -7
- package/src/components/interaction/Command/Command.spec.tsx +37 -0
- package/src/components/interaction/Command/Command.tsx +37 -2
- package/src/components/interaction/Dialog/Dialog.module.css +10 -13
- package/src/components/interaction/Dialog/Dialog.spec.tsx +53 -1
- package/src/components/interaction/Dialog/Dialog.stories.tsx +17 -0
- package/src/components/interaction/Dialog/Dialog.tsx +50 -16
- package/src/components/interaction/Drawer/Drawer.module.css +11 -11
- package/src/components/interaction/Drawer/Drawer.spec.tsx +48 -1
- package/src/components/interaction/Drawer/Drawer.tsx +38 -4
- package/src/components/interaction/DropdownMenu/DropdownMenu.module.css +6 -6
- package/src/components/interaction/Popover/Popover.module.css +74 -15
- package/src/components/interaction/Popover/Popover.spec.tsx +94 -59
- package/src/components/interaction/Popover/Popover.tsx +44 -60
- package/src/components/interaction/Toast/Toast.module.css +7 -7
- package/src/components/interaction/form/Checkbox/Checkbox.module.css +6 -6
- package/src/components/interaction/form/Checkbox/Checkbox.native.mdx +74 -0
- package/src/components/interaction/form/Combobox/Combobox.module.css +7 -8
- package/src/components/interaction/form/FileInput/FileInput.module.css +4 -4
- package/src/components/interaction/form/NumberInput/NumberInput.module.css +1 -1
- package/src/components/interaction/form/Radio/Radio.module.css +6 -6
- package/src/components/interaction/form/SegmentedControl/SegmentedControl.module.css +5 -6
- package/src/components/interaction/form/Select/Select.module.css +3 -3
- package/src/components/interaction/form/Slider/Slider.module.css +6 -6
- package/src/components/interaction/form/Switch/Switch.module.css +8 -8
- package/src/components/interaction/form/Textarea/Textarea.module.css +1 -1
- package/src/components/layout/IconWrapper/IconWrapper.module.css +2 -2
- package/src/components/ui/Accordion/Accordion.module.css +5 -5
- package/src/components/ui/Alert/Alert.native.mdx +62 -0
- package/src/components/ui/Avatar/Avatar.native.mdx +50 -0
- package/src/components/ui/Badge/Badge.native.mdx +54 -0
- package/src/components/ui/Calendar/Calendar.module.css +7 -7
- package/src/components/ui/Carousel/Carousel.module.css +5 -5
- package/src/components/ui/Collapsible/Collapsible.module.css +4 -4
- package/src/components/ui/Link/Link.module.css +2 -2
- package/src/components/ui/Loading/Loading.module.css +7 -7
- package/src/components/ui/NotificationBanner/NotificationBanner.module.css +3 -3
- package/src/components/ui/Pagination/Pagination.module.css +6 -6
- package/src/components/ui/Progress/Progress.module.css +5 -5
- package/src/components/ui/Separator/Separator.module.css +3 -3
- package/src/components/ui/Skeleton/Skeleton.module.css +1 -1
- package/src/components/ui/Table/Table.module.css +9 -9
- package/src/components/ui/Tabs/Tabs.module.css +3 -3
- package/src/components/ui/Tooltip/Tooltip.module.css +8 -8
- package/src/components/ui/Typography/Typography.native.mdx +56 -0
- package/src/polyfill-invoker-commands.ts +68 -0
- package/src/react-augment.d.ts +19 -0
- package/src/stories/ReactNative.mdx +121 -0
- package/src/web-components/interaction/BdsButton.mdx +106 -0
- package/src/web-components/interaction/BdsPopover.mdx +120 -0
- package/src/web-components/interaction/BdsToastProvider.mdx +94 -0
- package/src/web-components/interaction/bds-popover.spec.ts +49 -1
- package/src/web-components/interaction/bds-popover.ts +12 -0
- package/src/web-components/test/helpers.ts +8 -0
- package/src/web-components/ui/BdsAlert.mdx +90 -0
- package/src/web-components/ui/BdsBadge.mdx +74 -0
package/dist/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { useId, useState } from "react";
|
|
3
3
|
|
|
4
4
|
// src/components/ui/Accordion/Accordion.module.css
|
|
5
|
-
var Accordion_default = {"accordion":"
|
|
5
|
+
var Accordion_default = {"accordion":"bds111Accordion-accordion","item":"bds111Accordion-item","heading":"bds111Accordion-heading","trigger":"bds111Accordion-trigger","triggerLabel":"bds111Accordion-triggerLabel","chevron":"bds111Accordion-chevron","--open":"bds111Accordion---open","panel":"bds111Accordion-panel","panelContent":"bds111Accordion-panelContent"};
|
|
6
6
|
|
|
7
7
|
// src/components/ui/Accordion/Accordion.tsx
|
|
8
8
|
import { cn } from "@boostdev/design-system-foundation";
|
|
@@ -70,7 +70,7 @@ function Accordion({
|
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
// src/components/ui/Alert/Alert.module.css
|
|
73
|
-
var Alert_default = {"alert":"
|
|
73
|
+
var Alert_default = {"alert":"bds111Alert-alert","--variant_info":"bds111Alert---variant_info","--variant_success":"bds111Alert---variant_success","--variant_warning":"bds111Alert---variant_warning","--variant_error":"bds111Alert---variant_error","icon":"bds111Alert-icon","content":"bds111Alert-content","title":"bds111Alert-title","dismiss":"bds111Alert-dismiss"};
|
|
74
74
|
|
|
75
75
|
// src/components/ui/Alert/Alert.tsx
|
|
76
76
|
import { cn as cn2 } from "@boostdev/design-system-foundation";
|
|
@@ -113,7 +113,7 @@ function Alert({
|
|
|
113
113
|
}
|
|
114
114
|
|
|
115
115
|
// src/components/ui/Avatar/Avatar.module.css
|
|
116
|
-
var Avatar_default = {"avatar":"
|
|
116
|
+
var Avatar_default = {"avatar":"bds111Avatar-avatar","--fallback":"bds111Avatar---fallback","--size_small":"bds111Avatar---size_small","--size_medium":"bds111Avatar---size_medium","--size_large":"bds111Avatar---size_large","image":"bds111Avatar-image","initials":"bds111Avatar-initials"};
|
|
117
117
|
|
|
118
118
|
// src/components/ui/Avatar/Avatar.tsx
|
|
119
119
|
import { cn as cn3 } from "@boostdev/design-system-foundation";
|
|
@@ -139,7 +139,7 @@ function Avatar({ src, alt, name, size = "medium", className }) {
|
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
// src/components/ui/Badge/Badge.module.css
|
|
142
|
-
var Badge_default = {"badge":"
|
|
142
|
+
var Badge_default = {"badge":"bds111Badge-badge","--variant_primary":"bds111Badge---variant_primary","--variant_secondary":"bds111Badge---variant_secondary","--variant_success":"bds111Badge---variant_success","--variant_error":"bds111Badge---variant_error","--variant_warning":"bds111Badge---variant_warning"};
|
|
143
143
|
|
|
144
144
|
// src/components/ui/Badge/Badge.tsx
|
|
145
145
|
import { cn as cn4 } from "@boostdev/design-system-foundation";
|
|
@@ -149,7 +149,7 @@ function Badge({ children, variant = "primary", className }) {
|
|
|
149
149
|
}
|
|
150
150
|
|
|
151
151
|
// src/components/ui/Breadcrumb/Breadcrumb.module.css
|
|
152
|
-
var Breadcrumb_default = {"breadcrumb":"
|
|
152
|
+
var Breadcrumb_default = {"breadcrumb":"bds111Breadcrumb-breadcrumb","list":"bds111Breadcrumb-list","item":"bds111Breadcrumb-item","link":"bds111Breadcrumb-link","separator":"bds111Breadcrumb-separator","current":"bds111Breadcrumb-current"};
|
|
153
153
|
|
|
154
154
|
// src/components/ui/Breadcrumb/Breadcrumb.tsx
|
|
155
155
|
import { cn as cn5 } from "@boostdev/design-system-foundation";
|
|
@@ -165,7 +165,7 @@ function Breadcrumb({ items, className }) {
|
|
|
165
165
|
}
|
|
166
166
|
|
|
167
167
|
// src/components/ui/Collapsible/Collapsible.module.css
|
|
168
|
-
var Collapsible_default = {"collapsible":"
|
|
168
|
+
var Collapsible_default = {"collapsible":"bds111Collapsible-collapsible","summary":"bds111Collapsible-summary","summaryContent":"bds111Collapsible-summaryContent","icon":"bds111Collapsible-icon","content":"bds111Collapsible-content"};
|
|
169
169
|
|
|
170
170
|
// src/components/ui/Collapsible/Collapsible.tsx
|
|
171
171
|
import { cn as cn6 } from "@boostdev/design-system-foundation";
|
|
@@ -206,7 +206,7 @@ function Collapsible({
|
|
|
206
206
|
import { useState as useState2, useId as useId2 } from "react";
|
|
207
207
|
|
|
208
208
|
// src/components/ui/Calendar/Calendar.module.css
|
|
209
|
-
var Calendar_default = {"calendar":"
|
|
209
|
+
var Calendar_default = {"calendar":"bds111Calendar-calendar","header":"bds111Calendar-header","monthYear":"bds111Calendar-monthYear","navBtn":"bds111Calendar-navBtn","grid":"bds111Calendar-grid","weekday":"bds111Calendar-weekday","empty":"bds111Calendar-empty","day":"bds111Calendar-day","disabled":"bds111Calendar-disabled","selected":"bds111Calendar-selected","today":"bds111Calendar-today"};
|
|
210
210
|
|
|
211
211
|
// src/components/ui/Calendar/Calendar.tsx
|
|
212
212
|
import { cn as cn7 } from "@boostdev/design-system-foundation";
|
|
@@ -381,7 +381,7 @@ function Calendar({ value, defaultValue, min, max, onChange, className }) {
|
|
|
381
381
|
import { useRef, useId as useId3 } from "react";
|
|
382
382
|
|
|
383
383
|
// src/components/ui/Carousel/Carousel.module.css
|
|
384
|
-
var Carousel_default = {"carousel":"
|
|
384
|
+
var Carousel_default = {"carousel":"bds111Carousel-carousel","track":"bds111Carousel-track","slide":"bds111Carousel-slide","navBtn":"bds111Carousel-navBtn"};
|
|
385
385
|
|
|
386
386
|
// src/components/ui/Carousel/Carousel.tsx
|
|
387
387
|
import { cn as cn8 } from "@boostdev/design-system-foundation";
|
|
@@ -434,7 +434,7 @@ function Carousel({ items, label, className }) {
|
|
|
434
434
|
}
|
|
435
435
|
|
|
436
436
|
// src/components/ui/DescriptionList/DescriptionList.module.css
|
|
437
|
-
var DescriptionList_default = {"list":"
|
|
437
|
+
var DescriptionList_default = {"list":"bds111DescriptionList-list","group":"bds111DescriptionList-group","term":"bds111DescriptionList-term","details":"bds111DescriptionList-details","--layout_inline":"bds111DescriptionList---layout_inline"};
|
|
438
438
|
|
|
439
439
|
// src/components/ui/DescriptionList/DescriptionList.tsx
|
|
440
440
|
import { cn as cn9 } from "@boostdev/design-system-foundation";
|
|
@@ -447,7 +447,7 @@ function DescriptionList({ items, layout = "stacked", className }) {
|
|
|
447
447
|
}
|
|
448
448
|
|
|
449
449
|
// src/components/ui/Link/Link.module.css
|
|
450
|
-
var Link_default = {"link":"
|
|
450
|
+
var Link_default = {"link":"bds111Link-link","--variant_default":"bds111Link---variant_default","--variant_subtle":"bds111Link---variant_subtle","--variant_standalone":"bds111Link---variant_standalone","externalLabel":"bds111Link-externalLabel"};
|
|
451
451
|
|
|
452
452
|
// src/components/ui/Link/Link.tsx
|
|
453
453
|
import { cn as cn10 } from "@boostdev/design-system-foundation";
|
|
@@ -478,7 +478,7 @@ function Link({
|
|
|
478
478
|
}
|
|
479
479
|
|
|
480
480
|
// src/components/ui/Loading/Loading.module.css
|
|
481
|
-
var Loading_default = {"loading":"
|
|
481
|
+
var Loading_default = {"loading":"bds111Loading-loading","spinner":"bds111Loading-spinner","--size_small":"bds111Loading---size_small","--size_large":"bds111Loading---size_large"};
|
|
482
482
|
|
|
483
483
|
// src/components/ui/Loading/Loading.tsx
|
|
484
484
|
import { cn as cn11 } from "@boostdev/design-system-foundation";
|
|
@@ -488,7 +488,7 @@ function Loading({ size = "medium", className }) {
|
|
|
488
488
|
}
|
|
489
489
|
|
|
490
490
|
// src/components/ui/NotificationBanner/NotificationBanner.module.css
|
|
491
|
-
var NotificationBanner_default = {"banner":"
|
|
491
|
+
var NotificationBanner_default = {"banner":"bds111NotificationBanner-banner","--variant_info":"bds111NotificationBanner---variant_info","--variant_success":"bds111NotificationBanner---variant_success","--variant_warning":"bds111NotificationBanner---variant_warning","--variant_error":"bds111NotificationBanner---variant_error","content":"bds111NotificationBanner-content","action":"bds111NotificationBanner-action","dismiss":"bds111NotificationBanner-dismiss"};
|
|
492
492
|
|
|
493
493
|
// src/components/ui/NotificationBanner/NotificationBanner.tsx
|
|
494
494
|
import { cn as cn12 } from "@boostdev/design-system-foundation";
|
|
@@ -527,7 +527,7 @@ function NotificationBanner({
|
|
|
527
527
|
}
|
|
528
528
|
|
|
529
529
|
// src/components/ui/Pagination/Pagination.module.css
|
|
530
|
-
var Pagination_default = {"pagination":"
|
|
530
|
+
var Pagination_default = {"pagination":"bds111Pagination-pagination","list":"bds111Pagination-list","button":"bds111Pagination-button","--active":"bds111Pagination---active","--nav":"bds111Pagination---nav","ellipsis":"bds111Pagination-ellipsis"};
|
|
531
531
|
|
|
532
532
|
// src/components/ui/Pagination/Pagination.tsx
|
|
533
533
|
import { cn as cn13 } from "@boostdev/design-system-foundation";
|
|
@@ -591,7 +591,7 @@ function Pagination({
|
|
|
591
591
|
}
|
|
592
592
|
|
|
593
593
|
// src/components/ui/Progress/Progress.module.css
|
|
594
|
-
var Progress_default = {"container":"
|
|
594
|
+
var Progress_default = {"container":"bds111Progress-container","labelRow":"bds111Progress-labelRow","value":"bds111Progress-value","track":"bds111Progress-track","--size_small":"bds111Progress---size_small","--size_medium":"bds111Progress---size_medium","--size_large":"bds111Progress---size_large","fill":"bds111Progress-fill"};
|
|
595
595
|
|
|
596
596
|
// src/components/ui/Progress/Progress.tsx
|
|
597
597
|
import { cn as cn14 } from "@boostdev/design-system-foundation";
|
|
@@ -629,7 +629,7 @@ function Progress({
|
|
|
629
629
|
}
|
|
630
630
|
|
|
631
631
|
// src/components/ui/ProgressCircle/ProgressCircle.module.css
|
|
632
|
-
var ProgressCircle_default = {"wrapper":"
|
|
632
|
+
var ProgressCircle_default = {"wrapper":"bds111ProgressCircle-wrapper","svg":"bds111ProgressCircle-svg","track":"bds111ProgressCircle-track","fill":"bds111ProgressCircle-fill","value":"bds111ProgressCircle-value","--size_small":"bds111ProgressCircle---size_small","--size_medium":"bds111ProgressCircle---size_medium","--size_large":"bds111ProgressCircle---size_large"};
|
|
633
633
|
|
|
634
634
|
// src/components/ui/ProgressCircle/ProgressCircle.tsx
|
|
635
635
|
import { cn as cn15 } from "@boostdev/design-system-foundation";
|
|
@@ -708,7 +708,7 @@ function ProgressCircle({
|
|
|
708
708
|
}
|
|
709
709
|
|
|
710
710
|
// src/components/ui/Separator/Separator.module.css
|
|
711
|
-
var Separator_default = {"separator":"
|
|
711
|
+
var Separator_default = {"separator":"bds111Separator-separator","--horizontal":"bds111Separator---horizontal","--vertical":"bds111Separator---vertical"};
|
|
712
712
|
|
|
713
713
|
// src/components/ui/Separator/Separator.tsx
|
|
714
714
|
import { cn as cn16 } from "@boostdev/design-system-foundation";
|
|
@@ -731,7 +731,7 @@ function Separator({ orientation = "horizontal", className }) {
|
|
|
731
731
|
import { cn as cn17 } from "@boostdev/design-system-foundation";
|
|
732
732
|
|
|
733
733
|
// src/components/ui/Skeleton/Skeleton.module.css
|
|
734
|
-
var Skeleton_default = {"skeleton":"
|
|
734
|
+
var Skeleton_default = {"skeleton":"bds111Skeleton-skeleton"};
|
|
735
735
|
|
|
736
736
|
// src/components/ui/Skeleton/Skeleton.tsx
|
|
737
737
|
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
@@ -740,7 +740,7 @@ function Skeleton({ className }) {
|
|
|
740
740
|
}
|
|
741
741
|
|
|
742
742
|
// src/components/ui/SkipLink/SkipLink.module.css
|
|
743
|
-
var SkipLink_default = {"skipLink":"
|
|
743
|
+
var SkipLink_default = {"skipLink":"bds111SkipLink-skipLink"};
|
|
744
744
|
|
|
745
745
|
// src/components/ui/SkipLink/SkipLink.tsx
|
|
746
746
|
import { cn as cn18 } from "@boostdev/design-system-foundation";
|
|
@@ -750,7 +750,7 @@ function SkipLink({ href = "#main", children = "Skip to main content", className
|
|
|
750
750
|
}
|
|
751
751
|
|
|
752
752
|
// src/components/ui/Table/Table.module.css
|
|
753
|
-
var Table_default = {"wrapper":"
|
|
753
|
+
var Table_default = {"wrapper":"bds111Table-wrapper","table":"bds111Table-table","caption":"bds111Table-caption","thead":"bds111Table-thead","th":"bds111Table-th","--sortable":"bds111Table---sortable","sortButton":"bds111Table-sortButton","sortIcon":"bds111Table-sortIcon","--sort-active":"bds111Table---sort-active","--sort-desc":"bds111Table---sort-desc","tbody":"bds111Table-tbody","tr":"bds111Table-tr","td":"bds111Table-td"};
|
|
754
754
|
|
|
755
755
|
// src/components/ui/Table/Table.tsx
|
|
756
756
|
import { cn as cn19 } from "@boostdev/design-system-foundation";
|
|
@@ -820,7 +820,7 @@ function Table({
|
|
|
820
820
|
import { useId as useId4, useRef as useRef2, useState as useState3 } from "react";
|
|
821
821
|
|
|
822
822
|
// src/components/ui/Tabs/Tabs.module.css
|
|
823
|
-
var Tabs_default = {"tabs":"
|
|
823
|
+
var Tabs_default = {"tabs":"bds111Tabs-tabs","tabList":"bds111Tabs-tabList","tab":"bds111Tabs-tab","--active":"bds111Tabs---active","panel":"bds111Tabs-panel"};
|
|
824
824
|
|
|
825
825
|
// src/components/ui/Tabs/Tabs.tsx
|
|
826
826
|
import { cn as cn20 } from "@boostdev/design-system-foundation";
|
|
@@ -900,7 +900,7 @@ function Tabs({ tabs, defaultTab, className }) {
|
|
|
900
900
|
import { cloneElement, isValidElement, useId as useId5, useState as useState4 } from "react";
|
|
901
901
|
|
|
902
902
|
// src/components/ui/Tooltip/Tooltip.module.css
|
|
903
|
-
var Tooltip_default = {"wrapper":"
|
|
903
|
+
var Tooltip_default = {"wrapper":"bds111Tooltip-wrapper","tooltip":"bds111Tooltip-tooltip","--placement_top":"bds111Tooltip---placement_top","--placement_bottom":"bds111Tooltip---placement_bottom","--placement_left":"bds111Tooltip---placement_left","--placement_right":"bds111Tooltip---placement_right"};
|
|
904
904
|
|
|
905
905
|
// src/components/ui/Tooltip/Tooltip.tsx
|
|
906
906
|
import { cn as cn21 } from "@boostdev/design-system-foundation";
|
|
@@ -942,7 +942,7 @@ function Tooltip({
|
|
|
942
942
|
}
|
|
943
943
|
|
|
944
944
|
// src/components/ui/Typography/Typography.module.css
|
|
945
|
-
var Typography_default = {"typography":"
|
|
945
|
+
var Typography_default = {"typography":"bds111Typography-typography","--h1":"bds111Typography---h1","--h2":"bds111Typography---h2","--h3":"bds111Typography---h3","--body":"bds111Typography---body","--body_s":"bds111Typography---body_s"};
|
|
946
946
|
|
|
947
947
|
// src/components/ui/Typography/Typography.tsx
|
|
948
948
|
import { cn as cn22 } from "@boostdev/design-system-foundation";
|
|
@@ -960,7 +960,7 @@ function Typography({ variant = "body", component, children, className }) {
|
|
|
960
960
|
}
|
|
961
961
|
|
|
962
962
|
// src/components/interaction/Button/Button.module.css
|
|
963
|
-
var Button_default = {"button":"
|
|
963
|
+
var Button_default = {"button":"bds111Button-button","--default":"bds111Button---default","--ghost":"bds111Button---ghost","--size_small":"bds111Button---size_small","--size_medium":"bds111Button---size_medium","--size_large":"bds111Button---size_large","--hasPulse":"bds111Button---hasPulse","iconStart":"bds111Button-iconStart","iconEnd":"bds111Button-iconEnd"};
|
|
964
964
|
|
|
965
965
|
// src/components/interaction/Button/Button.tsx
|
|
966
966
|
import { cn as cn23 } from "@boostdev/design-system-foundation";
|
|
@@ -1035,14 +1035,56 @@ function Button({
|
|
|
1035
1035
|
// src/components/interaction/Command/Command.tsx
|
|
1036
1036
|
import { useState as useState5, useEffect, useRef as useRef3, useId as useId6, useMemo } from "react";
|
|
1037
1037
|
|
|
1038
|
+
// src/polyfill-invoker-commands.ts
|
|
1039
|
+
var installed = false;
|
|
1040
|
+
function installInvokerCommandsPolyfill() {
|
|
1041
|
+
if (installed) return;
|
|
1042
|
+
if (typeof window === "undefined") return;
|
|
1043
|
+
if ("command" in HTMLButtonElement.prototype) return;
|
|
1044
|
+
installed = true;
|
|
1045
|
+
document.addEventListener("click", (e) => {
|
|
1046
|
+
const button = e.target?.closest("button[commandfor]");
|
|
1047
|
+
if (!button) return;
|
|
1048
|
+
const targetId = button.getAttribute("commandfor");
|
|
1049
|
+
const command = button.getAttribute("command");
|
|
1050
|
+
if (!targetId || !command) return;
|
|
1051
|
+
const target = document.getElementById(targetId);
|
|
1052
|
+
if (!target) return;
|
|
1053
|
+
const commandEvent = new Event("command", { cancelable: true, bubbles: false });
|
|
1054
|
+
Object.defineProperty(commandEvent, "command", { value: command, configurable: true });
|
|
1055
|
+
Object.defineProperty(commandEvent, "source", { value: button, configurable: true });
|
|
1056
|
+
const notCancelled = target.dispatchEvent(commandEvent);
|
|
1057
|
+
if (!notCancelled) return;
|
|
1058
|
+
if (target instanceof HTMLDialogElement) {
|
|
1059
|
+
if (command === "show-modal" && !target.open) {
|
|
1060
|
+
target.showModal();
|
|
1061
|
+
} else if (command === "close" && target.open) {
|
|
1062
|
+
target.close();
|
|
1063
|
+
}
|
|
1064
|
+
} else if (target.hasAttribute("popover") && "showPopover" in target) {
|
|
1065
|
+
const popover = target;
|
|
1066
|
+
if (command === "toggle-popover") {
|
|
1067
|
+
popover.togglePopover();
|
|
1068
|
+
} else if (command === "show-popover") {
|
|
1069
|
+
popover.showPopover();
|
|
1070
|
+
} else if (command === "hide-popover") {
|
|
1071
|
+
popover.hidePopover();
|
|
1072
|
+
}
|
|
1073
|
+
}
|
|
1074
|
+
});
|
|
1075
|
+
}
|
|
1076
|
+
|
|
1038
1077
|
// src/components/interaction/Command/Command.module.css
|
|
1039
|
-
var Command_default = {"dialog":"
|
|
1078
|
+
var Command_default = {"dialog":"bds111Command-dialog","palette":"bds111Command-palette","searchRow":"bds111Command-searchRow","searchIcon":"bds111Command-searchIcon","search":"bds111Command-search","escHint":"bds111Command-escHint","list":"bds111Command-list","groupList":"bds111Command-groupList","group":"bds111Command-group","item":"bds111Command-item","itemActive":"bds111Command-itemActive","itemLabel":"bds111Command-itemLabel","itemDesc":"bds111Command-itemDesc","shortcut":"bds111Command-shortcut","empty":"bds111Command-empty"};
|
|
1040
1079
|
|
|
1041
1080
|
// src/components/interaction/Command/Command.tsx
|
|
1042
1081
|
import { cn as cn24 } from "@boostdev/design-system-foundation";
|
|
1043
1082
|
import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1083
|
+
installInvokerCommandsPolyfill();
|
|
1044
1084
|
function Command({
|
|
1085
|
+
id: idProp,
|
|
1045
1086
|
isOpen,
|
|
1087
|
+
onOpen,
|
|
1046
1088
|
onClose,
|
|
1047
1089
|
items,
|
|
1048
1090
|
placeholder = "Search commands\u2026",
|
|
@@ -1050,6 +1092,8 @@ function Command({
|
|
|
1050
1092
|
}) {
|
|
1051
1093
|
const [query, setQuery] = useState5("");
|
|
1052
1094
|
const [activeIndex, setActiveIndex] = useState5(0);
|
|
1095
|
+
const generatedId = useId6();
|
|
1096
|
+
const dialogId = idProp ?? generatedId;
|
|
1053
1097
|
const dialogRef = useRef3(null);
|
|
1054
1098
|
const inputRef = useRef3(null);
|
|
1055
1099
|
const listboxId = useId6();
|
|
@@ -1073,14 +1117,14 @@ function Command({
|
|
|
1073
1117
|
useEffect(() => {
|
|
1074
1118
|
const dialog = dialogRef.current;
|
|
1075
1119
|
if (!dialog) return;
|
|
1076
|
-
if (isOpen) {
|
|
1120
|
+
if (isOpen && !dialog.open) {
|
|
1077
1121
|
triggerRef.current = document.activeElement;
|
|
1078
1122
|
dialog.showModal();
|
|
1079
1123
|
document.body.style.overflow = "hidden";
|
|
1080
1124
|
setQuery("");
|
|
1081
1125
|
setActiveIndex(0);
|
|
1082
1126
|
setTimeout(() => inputRef.current?.focus(), 0);
|
|
1083
|
-
} else if (dialog.open) {
|
|
1127
|
+
} else if (!isOpen && dialog.open) {
|
|
1084
1128
|
dialog.close();
|
|
1085
1129
|
document.body.style.overflow = "";
|
|
1086
1130
|
triggerRef.current?.focus();
|
|
@@ -1092,6 +1136,27 @@ function Command({
|
|
|
1092
1136
|
useEffect(() => {
|
|
1093
1137
|
setActiveIndex(0);
|
|
1094
1138
|
}, [query]);
|
|
1139
|
+
useEffect(() => {
|
|
1140
|
+
const dialog = dialogRef.current;
|
|
1141
|
+
if (!dialog) return;
|
|
1142
|
+
const handleCommand = (e) => {
|
|
1143
|
+
if (e.command === "show-modal") {
|
|
1144
|
+
triggerRef.current = document.activeElement;
|
|
1145
|
+
document.body.style.overflow = "hidden";
|
|
1146
|
+
setQuery("");
|
|
1147
|
+
setActiveIndex(0);
|
|
1148
|
+
setTimeout(() => inputRef.current?.focus(), 0);
|
|
1149
|
+
onOpen?.();
|
|
1150
|
+
} else if (e.command === "close") {
|
|
1151
|
+
document.body.style.overflow = "";
|
|
1152
|
+
const trigger = triggerRef.current;
|
|
1153
|
+
setTimeout(() => trigger?.focus(), 0);
|
|
1154
|
+
onClose();
|
|
1155
|
+
}
|
|
1156
|
+
};
|
|
1157
|
+
dialog.addEventListener("command", handleCommand);
|
|
1158
|
+
return () => dialog.removeEventListener("command", handleCommand);
|
|
1159
|
+
}, [onOpen, onClose]);
|
|
1095
1160
|
const handleCancel = (e) => {
|
|
1096
1161
|
e.preventDefault();
|
|
1097
1162
|
onClose();
|
|
@@ -1119,6 +1184,7 @@ function Command({
|
|
|
1119
1184
|
"dialog",
|
|
1120
1185
|
{
|
|
1121
1186
|
ref: dialogRef,
|
|
1187
|
+
id: dialogId,
|
|
1122
1188
|
className: cn24(Command_default.dialog, className),
|
|
1123
1189
|
"aria-label": "Command palette",
|
|
1124
1190
|
"aria-modal": "true",
|
|
@@ -1181,26 +1247,29 @@ function Command({
|
|
|
1181
1247
|
}
|
|
1182
1248
|
|
|
1183
1249
|
// src/components/interaction/Dialog/Dialog.tsx
|
|
1184
|
-
import { useEffect as useEffect2, useRef as useRef4 } from "react";
|
|
1250
|
+
import { useEffect as useEffect2, useId as useId7, useRef as useRef4 } from "react";
|
|
1185
1251
|
|
|
1186
1252
|
// src/components/interaction/Dialog/Dialog.module.css
|
|
1187
|
-
var Dialog_default = {"dialog":"
|
|
1253
|
+
var Dialog_default = {"dialog":"bds111Dialog-dialog","dialogContent":"bds111Dialog-dialogContent","closeButton":"bds111Dialog-closeButton"};
|
|
1188
1254
|
|
|
1189
1255
|
// src/components/interaction/Dialog/Dialog.tsx
|
|
1190
1256
|
import { cn as cn25 } from "@boostdev/design-system-foundation";
|
|
1191
1257
|
import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1258
|
+
installInvokerCommandsPolyfill();
|
|
1192
1259
|
var FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
|
|
1193
|
-
function Dialog({ children, isOpen = false, className, onClose }) {
|
|
1260
|
+
function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClose }) {
|
|
1261
|
+
const generatedId = useId7();
|
|
1262
|
+
const id = idProp ?? generatedId;
|
|
1194
1263
|
const dialogRef = useRef4(null);
|
|
1195
1264
|
const triggerRef = useRef4(null);
|
|
1196
1265
|
useEffect2(() => {
|
|
1197
1266
|
const dialog = dialogRef.current;
|
|
1198
1267
|
if (!dialog) return;
|
|
1199
|
-
if (isOpen) {
|
|
1268
|
+
if (isOpen && !dialog.open) {
|
|
1200
1269
|
triggerRef.current = document.activeElement;
|
|
1201
1270
|
dialog.showModal();
|
|
1202
1271
|
document.body.style.overflow = "hidden";
|
|
1203
|
-
} else if (dialog.open) {
|
|
1272
|
+
} else if (!isOpen && dialog.open) {
|
|
1204
1273
|
dialog.close();
|
|
1205
1274
|
document.body.style.overflow = "";
|
|
1206
1275
|
triggerRef.current?.focus();
|
|
@@ -1209,6 +1278,24 @@ function Dialog({ children, isOpen = false, className, onClose }) {
|
|
|
1209
1278
|
document.body.style.overflow = "";
|
|
1210
1279
|
};
|
|
1211
1280
|
}, [isOpen]);
|
|
1281
|
+
useEffect2(() => {
|
|
1282
|
+
const dialog = dialogRef.current;
|
|
1283
|
+
if (!dialog) return;
|
|
1284
|
+
const handleCommand = (e) => {
|
|
1285
|
+
if (e.command === "show-modal") {
|
|
1286
|
+
triggerRef.current = document.activeElement;
|
|
1287
|
+
document.body.style.overflow = "hidden";
|
|
1288
|
+
onOpen?.();
|
|
1289
|
+
} else if (e.command === "close") {
|
|
1290
|
+
document.body.style.overflow = "";
|
|
1291
|
+
const trigger = triggerRef.current;
|
|
1292
|
+
setTimeout(() => trigger?.focus(), 0);
|
|
1293
|
+
onClose?.();
|
|
1294
|
+
}
|
|
1295
|
+
};
|
|
1296
|
+
dialog.addEventListener("command", handleCommand);
|
|
1297
|
+
return () => dialog.removeEventListener("command", handleCommand);
|
|
1298
|
+
}, [onOpen, onClose]);
|
|
1212
1299
|
const handleBackdropClick = (e) => {
|
|
1213
1300
|
if (e.target === dialogRef.current) onClose?.();
|
|
1214
1301
|
};
|
|
@@ -1240,22 +1327,24 @@ function Dialog({ children, isOpen = false, className, onClose }) {
|
|
|
1240
1327
|
"dialog",
|
|
1241
1328
|
{
|
|
1242
1329
|
ref: dialogRef,
|
|
1330
|
+
id,
|
|
1243
1331
|
className: cn25(className, Dialog_default.dialog),
|
|
1244
1332
|
"aria-modal": "true",
|
|
1245
1333
|
onClick: handleBackdropClick,
|
|
1246
1334
|
onCancel: handleCancel,
|
|
1247
1335
|
onKeyDown: handleKeyDown,
|
|
1248
1336
|
children: [
|
|
1249
|
-
/* @__PURE__ */ jsx25(
|
|
1337
|
+
/* @__PURE__ */ jsx25(
|
|
1250
1338
|
"button",
|
|
1251
1339
|
{
|
|
1252
|
-
type: "
|
|
1340
|
+
type: "button",
|
|
1253
1341
|
className: Dialog_default.closeButton,
|
|
1254
|
-
|
|
1342
|
+
commandfor: id,
|
|
1343
|
+
command: "close",
|
|
1255
1344
|
"aria-label": "Close dialog",
|
|
1256
1345
|
children: /* @__PURE__ */ jsx25("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx25("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
|
|
1257
1346
|
}
|
|
1258
|
-
)
|
|
1347
|
+
),
|
|
1259
1348
|
/* @__PURE__ */ jsx25("div", { className: Dialog_default.dialogContent, children })
|
|
1260
1349
|
]
|
|
1261
1350
|
}
|
|
@@ -1263,16 +1352,19 @@ function Dialog({ children, isOpen = false, className, onClose }) {
|
|
|
1263
1352
|
}
|
|
1264
1353
|
|
|
1265
1354
|
// src/components/interaction/Drawer/Drawer.tsx
|
|
1266
|
-
import { useEffect as useEffect3, useRef as useRef5 } from "react";
|
|
1355
|
+
import { useEffect as useEffect3, useId as useId8, useRef as useRef5 } from "react";
|
|
1267
1356
|
|
|
1268
1357
|
// src/components/interaction/Drawer/Drawer.module.css
|
|
1269
|
-
var Drawer_default = {"drawer":"
|
|
1358
|
+
var Drawer_default = {"drawer":"bds111Drawer-drawer","panel":"bds111Drawer-panel","--side_right":"bds111Drawer---side_right","--side_left":"bds111Drawer---side_left","header":"bds111Drawer-header","closeButton":"bds111Drawer-closeButton","body":"bds111Drawer-body"};
|
|
1270
1359
|
|
|
1271
1360
|
// src/components/interaction/Drawer/Drawer.tsx
|
|
1272
1361
|
import { cn as cn26 } from "@boostdev/design-system-foundation";
|
|
1273
1362
|
import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1363
|
+
installInvokerCommandsPolyfill();
|
|
1274
1364
|
function Drawer({
|
|
1365
|
+
id: idProp,
|
|
1275
1366
|
isOpen,
|
|
1367
|
+
onOpen,
|
|
1276
1368
|
onClose,
|
|
1277
1369
|
title,
|
|
1278
1370
|
children,
|
|
@@ -1280,16 +1372,18 @@ function Drawer({
|
|
|
1280
1372
|
ariaLabel,
|
|
1281
1373
|
className
|
|
1282
1374
|
}) {
|
|
1375
|
+
const generatedId = useId8();
|
|
1376
|
+
const id = idProp ?? generatedId;
|
|
1283
1377
|
const dialogRef = useRef5(null);
|
|
1284
1378
|
const triggerRef = useRef5(null);
|
|
1285
1379
|
useEffect3(() => {
|
|
1286
1380
|
const dialog = dialogRef.current;
|
|
1287
1381
|
if (!dialog) return;
|
|
1288
|
-
if (isOpen) {
|
|
1382
|
+
if (isOpen && !dialog.open) {
|
|
1289
1383
|
triggerRef.current = document.activeElement;
|
|
1290
1384
|
dialog.showModal();
|
|
1291
1385
|
document.body.style.overflow = "hidden";
|
|
1292
|
-
} else if (dialog.open) {
|
|
1386
|
+
} else if (!isOpen && dialog.open) {
|
|
1293
1387
|
dialog.close();
|
|
1294
1388
|
document.body.style.overflow = "";
|
|
1295
1389
|
triggerRef.current?.focus();
|
|
@@ -1298,6 +1392,24 @@ function Drawer({
|
|
|
1298
1392
|
document.body.style.overflow = "";
|
|
1299
1393
|
};
|
|
1300
1394
|
}, [isOpen]);
|
|
1395
|
+
useEffect3(() => {
|
|
1396
|
+
const dialog = dialogRef.current;
|
|
1397
|
+
if (!dialog) return;
|
|
1398
|
+
const handleCommand = (e) => {
|
|
1399
|
+
if (e.command === "show-modal") {
|
|
1400
|
+
triggerRef.current = document.activeElement;
|
|
1401
|
+
document.body.style.overflow = "hidden";
|
|
1402
|
+
onOpen?.();
|
|
1403
|
+
} else if (e.command === "close") {
|
|
1404
|
+
document.body.style.overflow = "";
|
|
1405
|
+
const trigger = triggerRef.current;
|
|
1406
|
+
setTimeout(() => trigger?.focus(), 0);
|
|
1407
|
+
onClose();
|
|
1408
|
+
}
|
|
1409
|
+
};
|
|
1410
|
+
dialog.addEventListener("command", handleCommand);
|
|
1411
|
+
return () => dialog.removeEventListener("command", handleCommand);
|
|
1412
|
+
}, [onOpen, onClose]);
|
|
1301
1413
|
const handleClick = (e) => {
|
|
1302
1414
|
if (e.target === dialogRef.current) onClose();
|
|
1303
1415
|
};
|
|
@@ -1309,6 +1421,7 @@ function Drawer({
|
|
|
1309
1421
|
"dialog",
|
|
1310
1422
|
{
|
|
1311
1423
|
ref: dialogRef,
|
|
1424
|
+
id,
|
|
1312
1425
|
className: cn26(Drawer_default.drawer, Drawer_default[`--side_${side}`], className),
|
|
1313
1426
|
"aria-label": ariaLabel,
|
|
1314
1427
|
"aria-modal": "true",
|
|
@@ -1322,7 +1435,8 @@ function Drawer({
|
|
|
1322
1435
|
{
|
|
1323
1436
|
type: "button",
|
|
1324
1437
|
className: Drawer_default.closeButton,
|
|
1325
|
-
|
|
1438
|
+
commandfor: id,
|
|
1439
|
+
command: "close",
|
|
1326
1440
|
"aria-label": "Close drawer",
|
|
1327
1441
|
children: /* @__PURE__ */ jsx26("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx26("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
|
|
1328
1442
|
}
|
|
@@ -1339,13 +1453,13 @@ import {
|
|
|
1339
1453
|
cloneElement as cloneElement2,
|
|
1340
1454
|
isValidElement as isValidElement2,
|
|
1341
1455
|
useEffect as useEffect4,
|
|
1342
|
-
useId as
|
|
1456
|
+
useId as useId9,
|
|
1343
1457
|
useRef as useRef6,
|
|
1344
1458
|
useState as useState6
|
|
1345
1459
|
} from "react";
|
|
1346
1460
|
|
|
1347
1461
|
// src/components/interaction/DropdownMenu/DropdownMenu.module.css
|
|
1348
|
-
var DropdownMenu_default = {"wrapper":"
|
|
1462
|
+
var DropdownMenu_default = {"wrapper":"bds111DropdownMenu-wrapper","menu":"bds111DropdownMenu-menu","--placement_bottom-start":"bds111DropdownMenu---placement_bottom-start","--placement_bottom-end":"bds111DropdownMenu---placement_bottom-end","separator":"bds111DropdownMenu-separator","item":"bds111DropdownMenu-item","icon":"bds111DropdownMenu-icon"};
|
|
1349
1463
|
|
|
1350
1464
|
// src/components/interaction/DropdownMenu/DropdownMenu.tsx
|
|
1351
1465
|
import { cn as cn27 } from "@boostdev/design-system-foundation";
|
|
@@ -1358,7 +1472,7 @@ function DropdownMenu({
|
|
|
1358
1472
|
}) {
|
|
1359
1473
|
const [isOpen, setIsOpen] = useState6(false);
|
|
1360
1474
|
const containerRef = useRef6(null);
|
|
1361
|
-
const menuId =
|
|
1475
|
+
const menuId = useId9();
|
|
1362
1476
|
const itemRefs = useRef6([]);
|
|
1363
1477
|
const open = () => {
|
|
1364
1478
|
setIsOpen(true);
|
|
@@ -1458,20 +1572,19 @@ function DropdownMenu({
|
|
|
1458
1572
|
import {
|
|
1459
1573
|
cloneElement as cloneElement3,
|
|
1460
1574
|
isValidElement as isValidElement3,
|
|
1461
|
-
useCallback,
|
|
1462
1575
|
useEffect as useEffect5,
|
|
1463
|
-
useId as
|
|
1576
|
+
useId as useId10,
|
|
1464
1577
|
useRef as useRef7,
|
|
1465
1578
|
useState as useState7
|
|
1466
1579
|
} from "react";
|
|
1467
1580
|
|
|
1468
1581
|
// src/components/interaction/Popover/Popover.module.css
|
|
1469
|
-
var Popover_default = {"wrapper":"
|
|
1582
|
+
var Popover_default = {"wrapper":"bds111Popover-wrapper","panel":"bds111Popover-panel","g":"bds111Popover-g"};
|
|
1470
1583
|
|
|
1471
1584
|
// src/components/interaction/Popover/Popover.tsx
|
|
1472
1585
|
import { cn as cn28 } from "@boostdev/design-system-foundation";
|
|
1473
1586
|
import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1474
|
-
|
|
1587
|
+
installInvokerCommandsPolyfill();
|
|
1475
1588
|
if (typeof window !== "undefined" && !(typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("anchor-name: --a"))) {
|
|
1476
1589
|
import("@oddbird/css-anchor-positioning").catch(() => {
|
|
1477
1590
|
});
|
|
@@ -1485,80 +1598,59 @@ function Popover({
|
|
|
1485
1598
|
}) {
|
|
1486
1599
|
const [isOpen, setIsOpen] = useState7(false);
|
|
1487
1600
|
const containerRef = useRef7(null);
|
|
1488
|
-
const
|
|
1489
|
-
const rawId =
|
|
1601
|
+
const panelRef = useRef7(null);
|
|
1602
|
+
const rawId = useId10();
|
|
1490
1603
|
const anchorName = `--popover-${rawId.replace(/\W/g, "") || "a"}`;
|
|
1491
1604
|
const panelId = rawId;
|
|
1605
|
+
useEffect5(() => {
|
|
1606
|
+
const panel = panelRef.current;
|
|
1607
|
+
if (!panel) return;
|
|
1608
|
+
const handleToggle = (e) => {
|
|
1609
|
+
setIsOpen(e.newState === "open");
|
|
1610
|
+
};
|
|
1611
|
+
panel.addEventListener("toggle", handleToggle);
|
|
1612
|
+
return () => panel.removeEventListener("toggle", handleToggle);
|
|
1613
|
+
}, []);
|
|
1492
1614
|
useEffect5(() => {
|
|
1493
1615
|
if (!isOpen) return;
|
|
1494
|
-
const
|
|
1495
|
-
|
|
1496
|
-
|
|
1616
|
+
const handleScroll = () => {
|
|
1617
|
+
const rect = containerRef.current?.getBoundingClientRect();
|
|
1618
|
+
if (!rect) return;
|
|
1619
|
+
const { innerWidth: vw, innerHeight: vh } = window;
|
|
1620
|
+
if (rect.bottom < 0 || rect.top > vh || rect.right < 0 || rect.left > vw) {
|
|
1621
|
+
panelRef.current?.hidePopover();
|
|
1497
1622
|
}
|
|
1498
1623
|
};
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
};
|
|
1502
|
-
document.addEventListener("mousedown", handleMouseDown);
|
|
1503
|
-
document.addEventListener("keydown", handleKeyDown);
|
|
1624
|
+
window.addEventListener("scroll", handleScroll, { capture: true, passive: true });
|
|
1625
|
+
window.addEventListener("resize", handleScroll, { passive: true });
|
|
1504
1626
|
return () => {
|
|
1505
|
-
|
|
1506
|
-
|
|
1627
|
+
window.removeEventListener("scroll", handleScroll, { capture: true });
|
|
1628
|
+
window.removeEventListener("resize", handleScroll);
|
|
1507
1629
|
};
|
|
1508
1630
|
}, [isOpen]);
|
|
1509
|
-
const constrainPanel = useCallback(() => {
|
|
1510
|
-
const dialog = dialogRef.current;
|
|
1511
|
-
const container = containerRef.current;
|
|
1512
|
-
if (!dialog || !container) return;
|
|
1513
|
-
const rect = container.getBoundingClientRect();
|
|
1514
|
-
const vw = window.innerWidth;
|
|
1515
|
-
const vh = window.innerHeight;
|
|
1516
|
-
dialog.style.maxHeight = "";
|
|
1517
|
-
dialog.style.maxWidth = "";
|
|
1518
|
-
if (placement === "bottom") {
|
|
1519
|
-
dialog.style.maxHeight = `${Math.max(0, vh - rect.bottom - GAP * 2)}px`;
|
|
1520
|
-
dialog.style.maxWidth = `${Math.max(0, vw - rect.left - GAP)}px`;
|
|
1521
|
-
} else if (placement === "top") {
|
|
1522
|
-
dialog.style.maxHeight = `${Math.max(0, rect.top - GAP * 2)}px`;
|
|
1523
|
-
dialog.style.maxWidth = `${Math.max(0, vw - rect.left - GAP)}px`;
|
|
1524
|
-
} else if (placement === "right") {
|
|
1525
|
-
dialog.style.maxHeight = `${Math.max(0, vh - rect.top - GAP)}px`;
|
|
1526
|
-
dialog.style.maxWidth = `${Math.max(0, vw - rect.right - GAP * 2)}px`;
|
|
1527
|
-
} else {
|
|
1528
|
-
dialog.style.maxHeight = `${Math.max(0, vh - rect.top - GAP)}px`;
|
|
1529
|
-
dialog.style.maxWidth = `${Math.max(0, rect.left - GAP * 2)}px`;
|
|
1530
|
-
}
|
|
1531
|
-
}, [placement]);
|
|
1532
|
-
const toggle = useCallback(() => {
|
|
1533
|
-
if (isOpen) {
|
|
1534
|
-
setIsOpen(false);
|
|
1535
|
-
} else {
|
|
1536
|
-
constrainPanel();
|
|
1537
|
-
setIsOpen(true);
|
|
1538
|
-
}
|
|
1539
|
-
}, [isOpen, constrainPanel]);
|
|
1540
1631
|
const trigger = isValidElement3(children) ? cloneElement3(children, {
|
|
1541
1632
|
"aria-expanded": isOpen,
|
|
1542
1633
|
"aria-controls": panelId,
|
|
1543
1634
|
"aria-haspopup": true,
|
|
1635
|
+
commandfor: panelId,
|
|
1636
|
+
command: "toggle-popover",
|
|
1544
1637
|
style: {
|
|
1545
1638
|
...children.props.style,
|
|
1546
1639
|
anchorName
|
|
1547
1640
|
},
|
|
1548
|
-
onClick
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
}
|
|
1641
|
+
// Forward any existing onClick on the child (for custom side-effects).
|
|
1642
|
+
// Do NOT add our own toggle here — commandfor/command handles it to
|
|
1643
|
+
// avoid a double-toggle when both onClick and invoker fire.
|
|
1644
|
+
onClick: children.props.onClick
|
|
1553
1645
|
}) : children;
|
|
1554
1646
|
return /* @__PURE__ */ jsxs21("span", { ref: containerRef, className: cn28(Popover_default.wrapper, className), children: [
|
|
1555
1647
|
trigger,
|
|
1556
1648
|
/* @__PURE__ */ jsx28(
|
|
1557
|
-
"
|
|
1649
|
+
"div",
|
|
1558
1650
|
{
|
|
1559
|
-
ref:
|
|
1651
|
+
ref: panelRef,
|
|
1560
1652
|
id: panelId,
|
|
1561
|
-
|
|
1653
|
+
popover: "auto",
|
|
1562
1654
|
"data-placement": placement,
|
|
1563
1655
|
role: ariaLabel ? "region" : void 0,
|
|
1564
1656
|
"aria-label": ariaLabel,
|
|
@@ -1571,7 +1663,7 @@ function Popover({
|
|
|
1571
1663
|
}
|
|
1572
1664
|
|
|
1573
1665
|
// src/components/interaction/Rating/Rating.module.css
|
|
1574
|
-
var Rating_default = {"rating":"
|
|
1666
|
+
var Rating_default = {"rating":"bds111Rating-rating","star":"bds111Rating-star","--filled":"bds111Rating---filled"};
|
|
1575
1667
|
|
|
1576
1668
|
// src/components/interaction/Rating/Rating.tsx
|
|
1577
1669
|
import { cn as cn29 } from "@boostdev/design-system-foundation";
|
|
@@ -1599,10 +1691,10 @@ function Rating({ value, max = 5, className }) {
|
|
|
1599
1691
|
}
|
|
1600
1692
|
|
|
1601
1693
|
// src/components/interaction/Toast/Toast.tsx
|
|
1602
|
-
import { useState as useState8, useEffect as useEffect6, createContext, useContext, useCallback
|
|
1694
|
+
import { useState as useState8, useEffect as useEffect6, createContext, useContext, useCallback, useMemo as useMemo2, useRef as useRef8 } from "react";
|
|
1603
1695
|
|
|
1604
1696
|
// src/components/interaction/Toast/Toast.module.css
|
|
1605
|
-
var Toast_default = {"toastContainer":"
|
|
1697
|
+
var Toast_default = {"toastContainer":"bds111Toast-toastContainer","toast":"bds111Toast-toast","--variant_success":"bds111Toast---variant_success","--variant_warning":"bds111Toast---variant_warning","--variant_info":"bds111Toast---variant_info","--variant_error":"bds111Toast---variant_error","message":"bds111Toast-message","closeButton":"bds111Toast-closeButton"};
|
|
1606
1698
|
|
|
1607
1699
|
// src/components/interaction/Toast/Toast.tsx
|
|
1608
1700
|
import { cn as cn30 } from "@boostdev/design-system-foundation";
|
|
@@ -1611,11 +1703,11 @@ var ToastContext = createContext(void 0);
|
|
|
1611
1703
|
function ToastProvider({ children }) {
|
|
1612
1704
|
const [toasts, setToasts] = useState8([]);
|
|
1613
1705
|
const containerRef = useRef8(null);
|
|
1614
|
-
const showToast =
|
|
1706
|
+
const showToast = useCallback((message, variant) => {
|
|
1615
1707
|
const id = Math.random().toString(36).substring(2, 9);
|
|
1616
1708
|
setToasts((prev) => [...prev, { id, message, variant }]);
|
|
1617
1709
|
}, []);
|
|
1618
|
-
const removeToast =
|
|
1710
|
+
const removeToast = useCallback((id) => {
|
|
1619
1711
|
setToasts((prev) => prev.filter((toast) => toast.id !== id));
|
|
1620
1712
|
}, []);
|
|
1621
1713
|
useEffect6(() => {
|
|
@@ -1672,13 +1764,13 @@ function useToast() {
|
|
|
1672
1764
|
}
|
|
1673
1765
|
|
|
1674
1766
|
// src/components/interaction/form/Checkbox/Checkbox.tsx
|
|
1675
|
-
import { useId as
|
|
1767
|
+
import { useId as useId11 } from "react";
|
|
1676
1768
|
|
|
1677
1769
|
// src/components/interaction/form/Checkbox/Checkbox.module.css
|
|
1678
|
-
var Checkbox_default = {"checkboxGroup":"
|
|
1770
|
+
var Checkbox_default = {"checkboxGroup":"bds111Checkbox-checkboxGroup","inputWrapper":"bds111Checkbox-inputWrapper","checkbox":"bds111Checkbox-checkbox","checkboxError":"bds111Checkbox-checkboxError"};
|
|
1679
1771
|
|
|
1680
1772
|
// src/components/interaction/form/atoms/Message.module.css
|
|
1681
|
-
var Message_default = {"error":"
|
|
1773
|
+
var Message_default = {"error":"bds111Message-error","hint":"bds111Message-hint"};
|
|
1682
1774
|
|
|
1683
1775
|
// src/components/interaction/form/atoms/Message.tsx
|
|
1684
1776
|
import { cn as cn31 } from "@boostdev/design-system-foundation";
|
|
@@ -1689,7 +1781,7 @@ var Message = ({ message, type, inputId, className }) => {
|
|
|
1689
1781
|
};
|
|
1690
1782
|
|
|
1691
1783
|
// src/components/interaction/form/atoms/Label.module.css
|
|
1692
|
-
var Label_default = {"label":"
|
|
1784
|
+
var Label_default = {"label":"bds111Label-label"};
|
|
1693
1785
|
|
|
1694
1786
|
// src/components/interaction/form/atoms/Label.tsx
|
|
1695
1787
|
import { cn as cn32 } from "@boostdev/design-system-foundation";
|
|
@@ -1702,7 +1794,7 @@ var Label = ({ label, id, className }) => {
|
|
|
1702
1794
|
import { cn as cn34 } from "@boostdev/design-system-foundation";
|
|
1703
1795
|
|
|
1704
1796
|
// src/components/interaction/form/atoms/InputContainer.module.css
|
|
1705
|
-
var InputContainer_default = {"container":"
|
|
1797
|
+
var InputContainer_default = {"container":"bds111InputContainer-container"};
|
|
1706
1798
|
|
|
1707
1799
|
// src/components/interaction/form/atoms/InputContainer.tsx
|
|
1708
1800
|
import { cn as cn33 } from "@boostdev/design-system-foundation";
|
|
@@ -1714,7 +1806,7 @@ var InputContainer = ({ children, className }) => {
|
|
|
1714
1806
|
// src/components/interaction/form/Checkbox/Checkbox.tsx
|
|
1715
1807
|
import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
1716
1808
|
function Checkbox({ label, name, error, hint, className, ...props }) {
|
|
1717
|
-
const id = name +
|
|
1809
|
+
const id = name + useId11();
|
|
1718
1810
|
const hintId = id + "hint";
|
|
1719
1811
|
const errorId = id + "error";
|
|
1720
1812
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
@@ -1740,10 +1832,10 @@ function Checkbox({ label, name, error, hint, className, ...props }) {
|
|
|
1740
1832
|
}
|
|
1741
1833
|
|
|
1742
1834
|
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
|
|
1743
|
-
import { useId as
|
|
1835
|
+
import { useId as useId12 } from "react";
|
|
1744
1836
|
|
|
1745
1837
|
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css
|
|
1746
|
-
var CheckboxGroup_default = {"group":"
|
|
1838
|
+
var CheckboxGroup_default = {"group":"bds111CheckboxGroup-group","legend":"bds111CheckboxGroup-legend","required":"bds111CheckboxGroup-required","items":"bds111CheckboxGroup-items"};
|
|
1747
1839
|
|
|
1748
1840
|
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
|
|
1749
1841
|
import { cn as cn35 } from "@boostdev/design-system-foundation";
|
|
@@ -1757,7 +1849,7 @@ function CheckboxGroup({
|
|
|
1757
1849
|
disabled,
|
|
1758
1850
|
className
|
|
1759
1851
|
}) {
|
|
1760
|
-
const id =
|
|
1852
|
+
const id = useId12();
|
|
1761
1853
|
const hintId = id + "hint";
|
|
1762
1854
|
const errorId = id + "error";
|
|
1763
1855
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
@@ -1784,14 +1876,14 @@ function CheckboxGroup({
|
|
|
1784
1876
|
// src/components/interaction/form/Combobox/Combobox.tsx
|
|
1785
1877
|
import {
|
|
1786
1878
|
useEffect as useEffect7,
|
|
1787
|
-
useId as
|
|
1879
|
+
useId as useId13,
|
|
1788
1880
|
useRef as useRef9,
|
|
1789
1881
|
useState as useState9,
|
|
1790
1882
|
useMemo as useMemo3
|
|
1791
1883
|
} from "react";
|
|
1792
1884
|
|
|
1793
1885
|
// src/components/interaction/form/Combobox/Combobox.module.css
|
|
1794
|
-
var Combobox_default = {"formGroup":"
|
|
1886
|
+
var Combobox_default = {"formGroup":"bds111Combobox-formGroup","inputWrapper":"bds111Combobox-inputWrapper","input":"bds111Combobox-input","inputError":"bds111Combobox-inputError","chevron":"bds111Combobox-chevron","listbox":"bds111Combobox-listbox","option":"bds111Combobox-option","--highlighted":"bds111Combobox---highlighted","--selected":"bds111Combobox---selected","--disabled":"bds111Combobox---disabled"};
|
|
1795
1887
|
|
|
1796
1888
|
// src/components/interaction/form/Combobox/Combobox.tsx
|
|
1797
1889
|
import { cn as cn36 } from "@boostdev/design-system-foundation";
|
|
@@ -1808,7 +1900,7 @@ function Combobox({
|
|
|
1808
1900
|
hint,
|
|
1809
1901
|
className
|
|
1810
1902
|
}) {
|
|
1811
|
-
const id = name +
|
|
1903
|
+
const id = name + useId13();
|
|
1812
1904
|
const listboxId = id + "listbox";
|
|
1813
1905
|
const hintId = id + "hint";
|
|
1814
1906
|
const errorId = id + "error";
|
|
@@ -1938,10 +2030,10 @@ function Combobox({
|
|
|
1938
2030
|
}
|
|
1939
2031
|
|
|
1940
2032
|
// src/components/interaction/form/FileInput/FileInput.tsx
|
|
1941
|
-
import { useId as
|
|
2033
|
+
import { useId as useId14, useRef as useRef10, useState as useState10 } from "react";
|
|
1942
2034
|
|
|
1943
2035
|
// src/components/interaction/form/FileInput/FileInput.module.css
|
|
1944
|
-
var FileInput_default = {"formGroup":"
|
|
2036
|
+
var FileInput_default = {"formGroup":"bds111FileInput-formGroup","fieldLabel":"bds111FileInput-fieldLabel","dropZone":"bds111FileInput-dropZone","isDragging":"bds111FileInput-isDragging","hasError":"bds111FileInput-hasError","isDisabled":"bds111FileInput-isDisabled","icon":"bds111FileInput-icon","prompt":"bds111FileInput-prompt","acceptHint":"bds111FileInput-acceptHint","hiddenInput":"bds111FileInput-hiddenInput"};
|
|
1945
2037
|
|
|
1946
2038
|
// src/components/interaction/form/FileInput/FileInput.tsx
|
|
1947
2039
|
import { cn as cn37 } from "@boostdev/design-system-foundation";
|
|
@@ -1958,7 +2050,7 @@ function FileInput({
|
|
|
1958
2050
|
onChange,
|
|
1959
2051
|
className
|
|
1960
2052
|
}) {
|
|
1961
|
-
const uid = name +
|
|
2053
|
+
const uid = name + useId14();
|
|
1962
2054
|
const hintId = uid + "hint";
|
|
1963
2055
|
const errorId = uid + "error";
|
|
1964
2056
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
@@ -2038,10 +2130,10 @@ function FileInput({
|
|
|
2038
2130
|
}
|
|
2039
2131
|
|
|
2040
2132
|
// src/components/interaction/form/FormInput/FormInput.tsx
|
|
2041
|
-
import { useId as
|
|
2133
|
+
import { useId as useId15 } from "react";
|
|
2042
2134
|
|
|
2043
2135
|
// src/components/interaction/form/FormInput/FormInput.module.css
|
|
2044
|
-
var FormInput_default = {"formGroup":"
|
|
2136
|
+
var FormInput_default = {"formGroup":"bds111FormInput-formGroup","input":"bds111FormInput-input","inputError":"bds111FormInput-inputError"};
|
|
2045
2137
|
|
|
2046
2138
|
// src/components/interaction/form/FormInput/FormInput.tsx
|
|
2047
2139
|
import { cn as cn38 } from "@boostdev/design-system-foundation";
|
|
@@ -2056,7 +2148,7 @@ function FormInput({
|
|
|
2056
2148
|
required,
|
|
2057
2149
|
...props
|
|
2058
2150
|
}) {
|
|
2059
|
-
const id = name +
|
|
2151
|
+
const id = name + useId15();
|
|
2060
2152
|
const hintId = id + "hint";
|
|
2061
2153
|
const errorId = id + "error";
|
|
2062
2154
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
@@ -2082,10 +2174,10 @@ function FormInput({
|
|
|
2082
2174
|
}
|
|
2083
2175
|
|
|
2084
2176
|
// src/components/interaction/form/NumberInput/NumberInput.tsx
|
|
2085
|
-
import { useId as
|
|
2177
|
+
import { useId as useId16, useRef as useRef11, useState as useState11 } from "react";
|
|
2086
2178
|
|
|
2087
2179
|
// src/components/interaction/form/NumberInput/NumberInput.module.css
|
|
2088
|
-
var NumberInput_default = {"formGroup":"
|
|
2180
|
+
var NumberInput_default = {"formGroup":"bds111NumberInput-formGroup","inputRow":"bds111NumberInput-inputRow","input":"bds111NumberInput-input","inputError":"bds111NumberInput-inputError","stepper":"bds111NumberInput-stepper"};
|
|
2089
2181
|
|
|
2090
2182
|
// src/components/interaction/form/NumberInput/NumberInput.tsx
|
|
2091
2183
|
import { cn as cn39 } from "@boostdev/design-system-foundation";
|
|
@@ -2104,7 +2196,7 @@ function NumberInput({
|
|
|
2104
2196
|
onChange,
|
|
2105
2197
|
className
|
|
2106
2198
|
}) {
|
|
2107
|
-
const uid = name +
|
|
2199
|
+
const uid = name + useId16();
|
|
2108
2200
|
const hintId = uid + "hint";
|
|
2109
2201
|
const errorId = uid + "error";
|
|
2110
2202
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
@@ -2186,16 +2278,16 @@ function NumberInput({
|
|
|
2186
2278
|
}
|
|
2187
2279
|
|
|
2188
2280
|
// src/components/interaction/form/Radio/Radio.tsx
|
|
2189
|
-
import { useId as
|
|
2281
|
+
import { useId as useId17 } from "react";
|
|
2190
2282
|
|
|
2191
2283
|
// src/components/interaction/form/Radio/Radio.module.css
|
|
2192
|
-
var Radio_default = {"radioGroup":"
|
|
2284
|
+
var Radio_default = {"radioGroup":"bds111Radio-radioGroup","inputWrapper":"bds111Radio-inputWrapper","textWrapper":"bds111Radio-textWrapper","description":"bds111Radio-description","radio":"bds111Radio-radio","radioError":"bds111Radio-radioError"};
|
|
2193
2285
|
|
|
2194
2286
|
// src/components/interaction/form/Radio/Radio.tsx
|
|
2195
2287
|
import { cn as cn40 } from "@boostdev/design-system-foundation";
|
|
2196
2288
|
import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
2197
2289
|
function Radio({ label, name, description, error, hint, className, ...props }) {
|
|
2198
|
-
const id = name +
|
|
2290
|
+
const id = name + useId17();
|
|
2199
2291
|
const hintId = id + "hint";
|
|
2200
2292
|
const errorId = id + "error";
|
|
2201
2293
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
@@ -2224,10 +2316,10 @@ function Radio({ label, name, description, error, hint, className, ...props }) {
|
|
|
2224
2316
|
}
|
|
2225
2317
|
|
|
2226
2318
|
// src/components/interaction/form/RadioGroup/RadioGroup.tsx
|
|
2227
|
-
import { useId as
|
|
2319
|
+
import { useId as useId18 } from "react";
|
|
2228
2320
|
|
|
2229
2321
|
// src/components/interaction/form/RadioGroup/RadioGroup.module.css
|
|
2230
|
-
var RadioGroup_default = {"group":"
|
|
2322
|
+
var RadioGroup_default = {"group":"bds111RadioGroup-group","legend":"bds111RadioGroup-legend","required":"bds111RadioGroup-required","items":"bds111RadioGroup-items"};
|
|
2231
2323
|
|
|
2232
2324
|
// src/components/interaction/form/RadioGroup/RadioGroup.tsx
|
|
2233
2325
|
import { cn as cn41 } from "@boostdev/design-system-foundation";
|
|
@@ -2241,7 +2333,7 @@ function RadioGroup({
|
|
|
2241
2333
|
disabled,
|
|
2242
2334
|
className
|
|
2243
2335
|
}) {
|
|
2244
|
-
const id =
|
|
2336
|
+
const id = useId18();
|
|
2245
2337
|
const hintId = id + "hint";
|
|
2246
2338
|
const errorId = id + "error";
|
|
2247
2339
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
@@ -2266,10 +2358,10 @@ function RadioGroup({
|
|
|
2266
2358
|
}
|
|
2267
2359
|
|
|
2268
2360
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
|
|
2269
|
-
import { useId as
|
|
2361
|
+
import { useId as useId19, useState as useState12 } from "react";
|
|
2270
2362
|
|
|
2271
2363
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.module.css
|
|
2272
|
-
var SegmentedControl_default = {"control":"
|
|
2364
|
+
var SegmentedControl_default = {"control":"bds111SegmentedControl-control","thumb":"bds111SegmentedControl-thumb","item":"bds111SegmentedControl-item","--disabled":"bds111SegmentedControl---disabled","radio":"bds111SegmentedControl-radio","label":"bds111SegmentedControl-label","--size_small":"bds111SegmentedControl---size_small","--size_large":"bds111SegmentedControl---size_large","--active":"bds111SegmentedControl---active"};
|
|
2273
2365
|
|
|
2274
2366
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
|
|
2275
2367
|
import { cn as cn42 } from "@boostdev/design-system-foundation";
|
|
@@ -2286,7 +2378,7 @@ function SegmentedControl({
|
|
|
2286
2378
|
"aria-label": ariaLabel,
|
|
2287
2379
|
...rest
|
|
2288
2380
|
}) {
|
|
2289
|
-
const baseId = name +
|
|
2381
|
+
const baseId = name + useId19();
|
|
2290
2382
|
const [internalValue, setInternalValue] = useState12(
|
|
2291
2383
|
defaultValue ?? options[0]?.value ?? ""
|
|
2292
2384
|
);
|
|
@@ -2344,10 +2436,10 @@ function SegmentedControl({
|
|
|
2344
2436
|
}
|
|
2345
2437
|
|
|
2346
2438
|
// src/components/interaction/form/Select/Select.tsx
|
|
2347
|
-
import { useId as
|
|
2439
|
+
import { useId as useId20 } from "react";
|
|
2348
2440
|
|
|
2349
2441
|
// src/components/interaction/form/Select/Select.module.css
|
|
2350
|
-
var Select_default = {"formGroup":"
|
|
2442
|
+
var Select_default = {"formGroup":"bds111Select-formGroup","selectWrapper":"bds111Select-selectWrapper","select":"bds111Select-select","selectError":"bds111Select-selectError","chevron":"bds111Select-chevron"};
|
|
2351
2443
|
|
|
2352
2444
|
// src/components/interaction/form/Select/Select.tsx
|
|
2353
2445
|
import { cn as cn43 } from "@boostdev/design-system-foundation";
|
|
@@ -2363,7 +2455,7 @@ function Select({
|
|
|
2363
2455
|
required,
|
|
2364
2456
|
...props
|
|
2365
2457
|
}) {
|
|
2366
|
-
const id = name +
|
|
2458
|
+
const id = name + useId20();
|
|
2367
2459
|
const hintId = id + "hint";
|
|
2368
2460
|
const errorId = id + "error";
|
|
2369
2461
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
@@ -2395,10 +2487,10 @@ function Select({
|
|
|
2395
2487
|
}
|
|
2396
2488
|
|
|
2397
2489
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
2398
|
-
import { useId as
|
|
2490
|
+
import { useId as useId21, useState as useState13 } from "react";
|
|
2399
2491
|
|
|
2400
2492
|
// src/components/interaction/form/Slider/Slider.module.css
|
|
2401
|
-
var Slider_default = {"formGroup":"
|
|
2493
|
+
var Slider_default = {"formGroup":"bds111Slider-formGroup","labelRow":"bds111Slider-labelRow","value":"bds111Slider-value","slider":"bds111Slider-slider","sliderError":"bds111Slider-sliderError"};
|
|
2402
2494
|
|
|
2403
2495
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
2404
2496
|
import { cn as cn44 } from "@boostdev/design-system-foundation";
|
|
@@ -2415,7 +2507,7 @@ function Slider({
|
|
|
2415
2507
|
onChange,
|
|
2416
2508
|
...props
|
|
2417
2509
|
}) {
|
|
2418
|
-
const id = name +
|
|
2510
|
+
const id = name + useId21();
|
|
2419
2511
|
const hintId = id + "hint";
|
|
2420
2512
|
const errorId = id + "error";
|
|
2421
2513
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
@@ -2457,10 +2549,10 @@ function Slider({
|
|
|
2457
2549
|
}
|
|
2458
2550
|
|
|
2459
2551
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2460
|
-
import { useId as
|
|
2552
|
+
import { useId as useId22 } from "react";
|
|
2461
2553
|
|
|
2462
2554
|
// src/components/interaction/form/Switch/Switch.module.css
|
|
2463
|
-
var Switch_default = {"switchGroup":"
|
|
2555
|
+
var Switch_default = {"switchGroup":"bds111Switch-switchGroup","--size_small":"bds111Switch---size_small","--size_medium":"bds111Switch---size_medium","--size_large":"bds111Switch---size_large","inputWrapper":"bds111Switch-inputWrapper","trackWrapper":"bds111Switch-trackWrapper","switch":"bds111Switch-switch","track":"bds111Switch-track","thumb":"bds111Switch-thumb","switchError":"bds111Switch-switchError"};
|
|
2464
2556
|
|
|
2465
2557
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2466
2558
|
import { cn as cn45 } from "@boostdev/design-system-foundation";
|
|
@@ -2475,7 +2567,7 @@ function Switch({
|
|
|
2475
2567
|
prefix,
|
|
2476
2568
|
...props
|
|
2477
2569
|
}) {
|
|
2478
|
-
const id = name +
|
|
2570
|
+
const id = name + useId22();
|
|
2479
2571
|
const hintId = id + "hint";
|
|
2480
2572
|
const errorId = id + "error";
|
|
2481
2573
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
@@ -2505,10 +2597,10 @@ function Switch({
|
|
|
2505
2597
|
}
|
|
2506
2598
|
|
|
2507
2599
|
// src/components/interaction/form/Textarea/Textarea.tsx
|
|
2508
|
-
import { useId as
|
|
2600
|
+
import { useId as useId23 } from "react";
|
|
2509
2601
|
|
|
2510
2602
|
// src/components/interaction/form/Textarea/Textarea.module.css
|
|
2511
|
-
var Textarea_default = {"formGroup":"
|
|
2603
|
+
var Textarea_default = {"formGroup":"bds111Textarea-formGroup","textarea":"bds111Textarea-textarea","textareaError":"bds111Textarea-textareaError"};
|
|
2512
2604
|
|
|
2513
2605
|
// src/components/interaction/form/Textarea/Textarea.tsx
|
|
2514
2606
|
import { cn as cn46 } from "@boostdev/design-system-foundation";
|
|
@@ -2522,7 +2614,7 @@ function Textarea({
|
|
|
2522
2614
|
required,
|
|
2523
2615
|
...props
|
|
2524
2616
|
}) {
|
|
2525
|
-
const id = name +
|
|
2617
|
+
const id = name + useId23();
|
|
2526
2618
|
const hintId = id + "hint";
|
|
2527
2619
|
const errorId = id + "error";
|
|
2528
2620
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
@@ -2547,7 +2639,7 @@ function Textarea({
|
|
|
2547
2639
|
}
|
|
2548
2640
|
|
|
2549
2641
|
// src/components/layout/ButtonGroup/ButtonGroup.module.css
|
|
2550
|
-
var ButtonGroup_default = {"buttonGroup":"
|
|
2642
|
+
var ButtonGroup_default = {"buttonGroup":"bds111ButtonGroup-buttonGroup","container":"bds111ButtonGroup-container","--variant_card":"bds111ButtonGroup---variant_card","--variant_flow":"bds111ButtonGroup---variant_flow","--variant_modal":"bds111ButtonGroup---variant_modal","--variant_content":"bds111ButtonGroup---variant_content","--variant_grid":"bds111ButtonGroup---variant_grid"};
|
|
2551
2643
|
|
|
2552
2644
|
// src/components/layout/ButtonGroup/ButtonGroup.tsx
|
|
2553
2645
|
import { cn as cn47 } from "@boostdev/design-system-foundation";
|
|
@@ -2565,7 +2657,7 @@ function ButtonGroup({ children, className, variant, "aria-label": ariaLabel })
|
|
|
2565
2657
|
}
|
|
2566
2658
|
|
|
2567
2659
|
// src/components/layout/Card/Card.module.css
|
|
2568
|
-
var Card_default = {"card":"
|
|
2660
|
+
var Card_default = {"card":"bds111Card-card","--default":"bds111Card---default","--elevated":"bds111Card---elevated","--outlined":"bds111Card---outlined","--clickable":"bds111Card---clickable","--padding-none":"bds111Card---padding-none","--padding-small":"bds111Card---padding-small","--padding-medium":"bds111Card---padding-medium","--padding-large":"bds111Card---padding-large","--text-start":"bds111Card---text-start","--text-center":"bds111Card---text-center","--text-end":"bds111Card---text-end"};
|
|
2569
2661
|
|
|
2570
2662
|
// src/components/layout/Card/Card.tsx
|
|
2571
2663
|
import { cn as cn48 } from "@boostdev/design-system-foundation";
|
|
@@ -2603,7 +2695,7 @@ function Card({
|
|
|
2603
2695
|
}
|
|
2604
2696
|
|
|
2605
2697
|
// src/components/layout/SectionHeader/SectionHeader.module.css
|
|
2606
|
-
var SectionHeader_default = {"sectionHeader":"
|
|
2698
|
+
var SectionHeader_default = {"sectionHeader":"bds111SectionHeader-sectionHeader","title":"bds111SectionHeader-title","subtitle":"bds111SectionHeader-subtitle","--start":"bds111SectionHeader---start","--center":"bds111SectionHeader---center","--end":"bds111SectionHeader---end","--small":"bds111SectionHeader---small","--medium":"bds111SectionHeader---medium","--large":"bds111SectionHeader---large"};
|
|
2607
2699
|
|
|
2608
2700
|
// src/components/layout/SectionHeader/SectionHeader.tsx
|
|
2609
2701
|
import { cn as cn49 } from "@boostdev/design-system-foundation";
|
|
@@ -2624,7 +2716,7 @@ function SectionHeader({
|
|
|
2624
2716
|
}
|
|
2625
2717
|
|
|
2626
2718
|
// src/components/layout/IconWrapper/IconWrapper.module.css
|
|
2627
|
-
var IconWrapper_default = {"wrapper":"
|
|
2719
|
+
var IconWrapper_default = {"wrapper":"bds111IconWrapper-wrapper"};
|
|
2628
2720
|
|
|
2629
2721
|
// src/components/layout/IconWrapper/IconWrapper.tsx
|
|
2630
2722
|
import { cn as cn50 } from "@boostdev/design-system-foundation";
|