@boostdev/design-system-components 2.7.1 → 2.11.0
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 +54 -46
- package/README.md +34 -20
- package/dist/client.cjs +1317 -779
- package/dist/client.css +1029 -812
- package/dist/client.d.cts +88 -26
- package/dist/client.d.ts +88 -26
- package/dist/client.js +1278 -732
- package/dist/index.cjs +1317 -779
- package/dist/index.css +1029 -812
- package/dist/index.d.cts +88 -26
- package/dist/index.d.ts +88 -26
- package/dist/index.js +1278 -732
- package/dist/web-components/chunk-2OLVQUBU.js +193 -0
- package/dist/web-components/chunk-3AY2YKCM.js +223 -0
- package/dist/web-components/chunk-3WAV6MDN.js +212 -0
- package/dist/web-components/{chunk-CZBIVR4V.js → chunk-47AT5KZD.js} +88 -16
- package/dist/web-components/chunk-4A2YYTYN.js +93 -0
- package/dist/web-components/{chunk-Q4T5BJT6.js → chunk-62NK3ZSC.js} +18 -3
- package/dist/web-components/chunk-66M6ETWD.js +77 -0
- package/dist/web-components/{chunk-NCPQ7AF3.js → chunk-6G22I2CK.js} +18 -3
- package/dist/web-components/{chunk-QDST57JC.js → chunk-7ZOJ7N4E.js} +14 -4
- package/dist/web-components/{chunk-5R6IFELV.js → chunk-AIBOHNDU.js} +11 -1
- package/dist/web-components/{chunk-ITHLKR7Q.js → chunk-AP4RDUL2.js} +16 -5
- package/dist/web-components/{chunk-QWPACK5L.js → chunk-BPYKZVDK.js} +11 -1
- package/dist/web-components/{chunk-YLVTEY23.js → chunk-BTCMJQKB.js} +53 -21
- package/dist/web-components/chunk-CUKQ2L5B.js +245 -0
- package/dist/web-components/chunk-DIZDCL7Z.js +14 -0
- package/dist/web-components/{chunk-PC3IOQAH.js → chunk-DV5T43ZC.js} +27 -7
- package/dist/web-components/{chunk-2QA62WCQ.js → chunk-EF7IVYTY.js} +10 -0
- package/dist/web-components/{chunk-L3XHOMN6.js → chunk-F3ZDNHZZ.js} +26 -1
- package/dist/web-components/chunk-FEDABOR5.js +248 -0
- package/dist/web-components/{chunk-6I2DBFQ7.js → chunk-HGFCJXOQ.js} +36 -5
- package/dist/web-components/{chunk-SOQQ7RVJ.js → chunk-IPGHUCJT.js} +23 -8
- package/dist/web-components/chunk-ITD2MV5K.js +392 -0
- package/dist/web-components/{chunk-CM3KYZ6Z.js → chunk-JH6LQKLK.js} +78 -6
- package/dist/web-components/chunk-JMCXAAFK.js +120 -0
- package/dist/web-components/{chunk-KUI55GFB.js → chunk-JUPCZVVW.js} +50 -18
- package/dist/web-components/chunk-JV5QT2OU.js +146 -0
- package/dist/web-components/{chunk-3GFWLSLS.js → chunk-KA3VPKMY.js} +29 -6
- package/dist/web-components/{chunk-CR5PGUHV.js → chunk-KJGRFDFI.js} +26 -11
- package/dist/web-components/{chunk-PY62FTRW.js → chunk-KZPRFY5P.js} +68 -33
- package/dist/web-components/{chunk-X46KL5BK.js → chunk-LDIPCTRN.js} +18 -1
- package/dist/web-components/chunk-M3ECULRH.js +174 -0
- package/dist/web-components/chunk-NBN2ENWJ.js +90 -0
- package/dist/web-components/chunk-NIN3JO6Q.js +189 -0
- package/dist/web-components/{chunk-2FGATTGT.js → chunk-NTQ4TCUT.js} +76 -55
- package/dist/web-components/chunk-OY74D4X6.js +302 -0
- package/dist/web-components/{chunk-3S42DZ7W.js → chunk-P24JYC5V.js} +7 -0
- package/dist/web-components/{chunk-BKIHQYJR.js → chunk-PXPPKCLT.js} +17 -2
- package/dist/web-components/{chunk-TQ7IQ4GZ.js → chunk-QEF2IRID.js} +71 -29
- package/dist/web-components/chunk-QZAIRJ75.js +111 -0
- package/dist/web-components/{chunk-6I3CFC26.js → chunk-RSZ3BWBK.js} +20 -5
- package/dist/web-components/chunk-RVF7W653.js +101 -0
- package/dist/web-components/chunk-SEO2F5KJ.js +234 -0
- package/dist/web-components/{chunk-VMMVWLXL.js → chunk-SFZ6Q4BP.js} +10 -0
- package/dist/web-components/{chunk-LY62SAVN.js → chunk-SYNLFKD3.js} +12 -2
- package/dist/web-components/chunk-TMWXRHGF.js +192 -0
- package/dist/web-components/{chunk-65JXQOBA.js → chunk-U3YZE6R6.js} +51 -7
- package/dist/web-components/chunk-UO7ROSHD.js +424 -0
- package/dist/web-components/chunk-VANAKB6D.js +152 -0
- package/dist/web-components/{chunk-PXZWYO6Z.js → chunk-VED2DFJ6.js} +108 -29
- package/dist/web-components/chunk-W6H5ID2U.js +161 -0
- package/dist/web-components/{chunk-57TRNCWQ.js → chunk-WFVKU4GX.js} +22 -11
- package/dist/web-components/{chunk-OQTRTMAB.js → chunk-WIBAN7KP.js} +10 -0
- package/dist/web-components/chunk-XI7KRAH7.js +54 -0
- package/dist/web-components/{chunk-F5E3IT7G.js → chunk-XIZWAWMJ.js} +50 -11
- package/dist/web-components/{chunk-FXURM6D5.js → chunk-YFAXGRPR.js} +10 -0
- package/dist/web-components/globals.js +1 -1
- package/dist/web-components/index.d.ts +77 -707
- package/dist/web-components/index.js +339 -2066
- package/dist/web-components/interaction/bds-accordion-item.js +1 -1
- package/dist/web-components/interaction/bds-accordion.js +1 -1
- package/dist/web-components/interaction/bds-button.d.ts +10 -2
- package/dist/web-components/interaction/bds-button.js +1 -1
- package/dist/web-components/interaction/bds-collapsible.d.ts +7 -2
- package/dist/web-components/interaction/bds-collapsible.js +1 -1
- package/dist/web-components/interaction/bds-dialog.d.ts +11 -3
- package/dist/web-components/interaction/bds-dialog.js +1 -1
- package/dist/web-components/interaction/bds-drawer.d.ts +7 -1
- package/dist/web-components/interaction/bds-drawer.js +1 -1
- package/dist/web-components/interaction/bds-dropdown-menu-item.d.ts +51 -0
- package/dist/web-components/interaction/bds-dropdown-menu-item.js +7 -0
- package/dist/web-components/interaction/bds-dropdown-menu.d.ts +70 -0
- package/dist/web-components/interaction/bds-dropdown-menu.js +7 -0
- package/dist/web-components/interaction/bds-popover.d.ts +14 -3
- package/dist/web-components/interaction/bds-popover.js +1 -1
- package/dist/web-components/interaction/bds-skip-link.js +1 -1
- package/dist/web-components/interaction/bds-tab-panel.js +1 -1
- package/dist/web-components/interaction/bds-tab.js +1 -1
- package/dist/web-components/interaction/bds-tabs.d.ts +1 -0
- package/dist/web-components/interaction/bds-tabs.js +1 -1
- package/dist/web-components/interaction/bds-toast-provider.js +1 -1
- package/dist/web-components/interaction/bds-tooltip.d.ts +19 -3
- package/dist/web-components/interaction/bds-tooltip.js +1 -1
- package/dist/web-components/interaction/form/bds-checkbox-group.d.ts +83 -0
- package/dist/web-components/interaction/form/bds-checkbox-group.js +7 -0
- package/dist/web-components/interaction/form/bds-checkbox.d.ts +6 -0
- package/dist/web-components/interaction/form/bds-checkbox.js +1 -1
- package/dist/web-components/interaction/form/bds-combobox.d.ts +18 -0
- package/dist/web-components/interaction/form/bds-combobox.js +1 -1
- package/dist/web-components/interaction/form/bds-field-group.d.ts +89 -0
- package/dist/web-components/interaction/form/bds-field-group.js +7 -0
- package/dist/web-components/interaction/form/bds-file-input.d.ts +1 -1
- package/dist/web-components/interaction/form/bds-file-input.js +1 -1
- package/dist/web-components/interaction/form/bds-form-input.d.ts +92 -0
- package/dist/web-components/interaction/form/bds-form-input.js +7 -0
- package/dist/web-components/interaction/form/bds-number-input.d.ts +18 -1
- package/dist/web-components/interaction/form/bds-number-input.js +1 -1
- package/dist/web-components/interaction/form/bds-radio-group.d.ts +81 -0
- package/dist/web-components/interaction/form/bds-radio-group.js +7 -0
- package/dist/web-components/interaction/form/bds-radio.d.ts +34 -6
- package/dist/web-components/interaction/form/bds-radio.js +1 -1
- package/dist/web-components/interaction/form/bds-segmented-control.d.ts +4 -4
- package/dist/web-components/interaction/form/bds-segmented-control.js +1 -1
- package/dist/web-components/interaction/form/bds-select.d.ts +22 -1
- package/dist/web-components/interaction/form/bds-select.js +1 -1
- package/dist/web-components/interaction/form/bds-slider.d.ts +42 -10
- package/dist/web-components/interaction/form/bds-slider.js +1 -1
- package/dist/web-components/interaction/form/bds-switch.d.ts +20 -0
- package/dist/web-components/interaction/form/bds-switch.js +1 -1
- package/dist/web-components/interaction/form/bds-textarea.d.ts +23 -3
- package/dist/web-components/interaction/form/bds-textarea.js +1 -1
- package/dist/web-components/layout/bds-grid-item.d.ts +63 -0
- package/dist/web-components/layout/bds-grid-item.js +7 -0
- package/dist/web-components/layout/bds-grid.d.ts +108 -0
- package/dist/web-components/layout/bds-grid.js +7 -0
- package/dist/web-components/ui/bds-alert.d.ts +16 -2
- package/dist/web-components/ui/bds-alert.js +1 -1
- package/dist/web-components/ui/bds-avatar.d.ts +2 -1
- package/dist/web-components/ui/bds-avatar.js +1 -1
- package/dist/web-components/ui/bds-badge.js +1 -1
- package/dist/web-components/ui/bds-breadcrumb.d.ts +3 -1
- package/dist/web-components/ui/bds-breadcrumb.js +1 -1
- package/dist/web-components/ui/bds-button-container.d.ts +52 -0
- package/dist/web-components/ui/bds-button-container.js +7 -0
- package/dist/web-components/ui/bds-button-group.d.ts +21 -0
- package/dist/web-components/ui/bds-button-group.js +8 -0
- package/dist/web-components/ui/bds-calendar.d.ts +121 -0
- package/dist/web-components/ui/bds-calendar.js +7 -0
- package/dist/web-components/ui/bds-card.d.ts +12 -3
- package/dist/web-components/ui/bds-card.js +1 -1
- package/dist/web-components/ui/bds-carousel.d.ts +98 -0
- package/dist/web-components/ui/bds-carousel.js +7 -0
- package/dist/web-components/ui/bds-description-list.js +1 -1
- package/dist/web-components/ui/bds-icon-wrapper.d.ts +0 -9
- package/dist/web-components/ui/bds-icon-wrapper.js +1 -1
- package/dist/web-components/ui/bds-link.js +1 -1
- package/dist/web-components/ui/bds-loading.js +1 -1
- package/dist/web-components/ui/bds-notification-banner.js +1 -1
- package/dist/web-components/ui/bds-pagination.d.ts +47 -0
- package/dist/web-components/ui/bds-pagination.js +7 -0
- package/dist/web-components/ui/bds-progress-circle.d.ts +3 -1
- package/dist/web-components/ui/bds-progress-circle.js +1 -1
- package/dist/web-components/ui/bds-progress.d.ts +3 -1
- package/dist/web-components/ui/bds-progress.js +1 -1
- package/dist/web-components/ui/bds-rating.js +1 -1
- package/dist/web-components/ui/bds-section-header.d.ts +18 -4
- package/dist/web-components/ui/bds-section-header.js +1 -1
- package/dist/web-components/ui/bds-separator.js +1 -1
- package/dist/web-components/ui/bds-skeleton.js +1 -1
- package/dist/web-components/ui/bds-table.d.ts +52 -0
- package/dist/web-components/ui/bds-table.js +7 -0
- package/dist/web-components/ui/bds-typography.d.ts +1 -0
- package/dist/web-components/ui/bds-typography.js +1 -1
- package/package.json +60 -3
- package/src/components/interaction/Button/Button.module.css +23 -14
- package/src/components/interaction/Button/Button.spec.tsx +20 -0
- package/src/components/interaction/Button/Button.tsx +2 -2
- package/src/components/interaction/Command/Command.mdx +5 -2
- package/src/components/interaction/Command/Command.module.css +23 -7
- package/src/components/interaction/Command/Command.spec.tsx +35 -0
- package/src/components/interaction/Command/Command.tsx +15 -4
- package/src/components/interaction/Command/index.ts +1 -1
- package/src/components/interaction/Dialog/Dialog.mdx +4 -4
- package/src/components/interaction/Dialog/Dialog.module.css +20 -0
- package/src/components/interaction/Dialog/Dialog.spec.tsx +20 -0
- package/src/components/interaction/Dialog/Dialog.tsx +8 -3
- package/src/components/interaction/Dialog/index.ts +1 -0
- package/src/components/interaction/Drawer/Drawer.mdx +5 -2
- package/src/components/interaction/Drawer/Drawer.module.css +34 -3
- package/src/components/interaction/Drawer/Drawer.spec.tsx +67 -1
- package/src/components/interaction/Drawer/Drawer.tsx +30 -12
- package/src/components/interaction/Drawer/index.ts +1 -0
- package/src/components/interaction/DropdownMenu/DropdownMenu.mdx +2 -0
- package/src/components/interaction/DropdownMenu/DropdownMenu.spec.tsx +34 -0
- package/src/components/interaction/DropdownMenu/DropdownMenu.tsx +15 -5
- package/src/components/interaction/DropdownMenu/index.ts +1 -0
- package/src/components/interaction/Popover/Popover.mdx +6 -2
- package/src/components/interaction/Popover/Popover.module.css +26 -18
- package/src/components/interaction/Popover/Popover.spec.tsx +38 -0
- package/src/components/interaction/Popover/Popover.tsx +19 -5
- package/src/components/interaction/Popover/index.ts +1 -0
- package/src/components/interaction/Rating/Rating.mdx +1 -1
- package/src/components/interaction/Rating/Rating.module.css +2 -2
- package/src/components/interaction/Rating/Rating.tsx +1 -1
- package/src/components/interaction/Rating/index.ts +1 -0
- package/src/components/interaction/Toast/Toast.mdx +3 -0
- package/src/components/interaction/Toast/Toast.module.css +35 -5
- package/src/components/interaction/Toast/Toast.spec.tsx +69 -1
- package/src/components/interaction/Toast/Toast.tsx +15 -9
- package/src/components/interaction/form/Checkbox/Checkbox.mdx +3 -0
- package/src/components/interaction/form/Checkbox/Checkbox.module.css +13 -6
- package/src/components/interaction/form/Checkbox/Checkbox.spec.tsx +6 -0
- package/src/components/interaction/form/Checkbox/Checkbox.tsx +1 -1
- package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.mdx +16 -1
- package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css +24 -8
- package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.spec.tsx +32 -2
- package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx +14 -2
- package/src/components/interaction/form/Combobox/Combobox.mdx +11 -4
- package/src/components/interaction/form/Combobox/Combobox.module.css +6 -6
- package/src/components/interaction/form/Combobox/Combobox.spec.tsx +47 -0
- package/src/components/interaction/form/Combobox/Combobox.tsx +10 -5
- package/src/components/interaction/form/FieldGroup/FieldGroup.mdx +9 -10
- package/src/components/interaction/form/FieldGroup/FieldGroup.module.css +57 -23
- package/src/components/interaction/form/FieldGroup/FieldGroup.spec.tsx +129 -7
- package/src/components/interaction/form/FieldGroup/FieldGroup.tsx +72 -12
- package/src/components/interaction/form/FileInput/FileInput.mdx +9 -1
- package/src/components/interaction/form/FileInput/FileInput.module.css +8 -8
- package/src/components/interaction/form/FileInput/FileInput.spec.tsx +89 -1
- package/src/components/interaction/form/FileInput/FileInput.tsx +6 -2
- package/src/components/interaction/form/FormInput/FormInput.mdx +9 -5
- package/src/components/interaction/form/FormInput/FormInput.module.css +17 -8
- package/src/components/interaction/form/FormInput/FormInput.spec.tsx +20 -0
- package/src/components/interaction/form/FormInput/FormInput.tsx +7 -2
- package/src/components/interaction/form/NumberInput/NumberInput.mdx +5 -1
- package/src/components/interaction/form/NumberInput/NumberInput.module.css +6 -6
- package/src/components/interaction/form/NumberInput/NumberInput.spec.tsx +51 -0
- package/src/components/interaction/form/NumberInput/NumberInput.tsx +36 -8
- package/src/components/interaction/form/Radio/Radio.mdx +8 -1
- package/src/components/interaction/form/Radio/Radio.module.css +20 -7
- package/src/components/interaction/form/Radio/Radio.spec.tsx +15 -0
- package/src/components/interaction/form/Radio/Radio.tsx +10 -4
- package/src/components/interaction/form/RadioGroup/RadioGroup.mdx +16 -1
- package/src/components/interaction/form/RadioGroup/RadioGroup.module.css +24 -8
- package/src/components/interaction/form/RadioGroup/RadioGroup.spec.tsx +32 -2
- package/src/components/interaction/form/RadioGroup/RadioGroup.tsx +14 -2
- package/src/components/interaction/form/SegmentedControl/SegmentedControl.mdx +9 -3
- package/src/components/interaction/form/SegmentedControl/SegmentedControl.module.css +25 -12
- package/src/components/interaction/form/SegmentedControl/SegmentedControl.spec.tsx +86 -5
- package/src/components/interaction/form/SegmentedControl/SegmentedControl.tsx +44 -4
- package/src/components/interaction/form/Select/Select.mdx +10 -4
- package/src/components/interaction/form/Select/Select.module.css +4 -4
- package/src/components/interaction/form/Select/Select.spec.tsx +34 -0
- package/src/components/interaction/form/Select/Select.tsx +21 -9
- package/src/components/interaction/form/Slider/Slider.mdx +4 -1
- package/src/components/interaction/form/Slider/Slider.module.css +32 -8
- package/src/components/interaction/form/Slider/Slider.spec.tsx +29 -0
- package/src/components/interaction/form/Slider/Slider.tsx +9 -7
- package/src/components/interaction/form/Switch/Switch.mdx +2 -2
- package/src/components/interaction/form/Switch/Switch.module.css +12 -13
- package/src/components/interaction/form/Switch/Switch.spec.tsx +20 -0
- package/src/components/interaction/form/Switch/Switch.tsx +2 -1
- package/src/components/interaction/form/Textarea/Textarea.mdx +5 -0
- package/src/components/interaction/form/Textarea/Textarea.module.css +5 -5
- package/src/components/interaction/form/Textarea/Textarea.spec.tsx +13 -0
- package/src/components/interaction/form/Textarea/Textarea.tsx +3 -1
- package/src/components/interaction/form/atoms/Message.module.css +1 -1
- package/src/components/interaction/form/atoms/Message.spec.tsx +29 -0
- package/src/components/interaction/form/atoms/Message.tsx +1 -1
- package/src/components/layout/ButtonGroup/ButtonGroup.mdx +11 -0
- package/src/components/layout/ButtonGroup/ButtonGroup.module.css +1 -5
- package/src/components/layout/ButtonGroup/ButtonGroup.stories.tsx +14 -0
- package/src/components/layout/Card/Card.mdx +6 -1
- package/src/components/layout/Card/Card.module.css +26 -5
- package/src/components/layout/Card/Card.spec.tsx +7 -0
- package/src/components/layout/Card/Card.tsx +4 -3
- package/src/components/layout/Grid/Grid.spec.tsx +44 -0
- package/src/components/layout/Grid/Grid.tsx +5 -5
- package/src/components/layout/Grid/GridItem.tsx +6 -6
- package/src/components/layout/Grid/masonry.ts +31 -5
- package/src/components/layout/Grid/useIsomorphicLayoutEffect.ts +11 -0
- package/src/components/layout/IconWrapper/IconWrapper.mdx +8 -2
- package/src/components/layout/IconWrapper/IconWrapper.module.css +9 -6
- package/src/components/layout/SectionHeader/SectionHeader.mdx +4 -1
- package/src/components/layout/SectionHeader/SectionHeader.module.css +10 -9
- package/src/components/ui/Accordion/Accordion.mdx +4 -1
- package/src/components/ui/Accordion/Accordion.module.css +2 -1
- package/src/components/ui/Alert/Alert.mdx +21 -4
- package/src/components/ui/Alert/Alert.module.css +9 -4
- package/src/components/ui/Alert/Alert.spec.tsx +20 -0
- package/src/components/ui/Avatar/Avatar.mdx +8 -3
- package/src/components/ui/Avatar/Avatar.module.css +13 -8
- package/src/components/ui/Badge/Badge.mdx +3 -1
- package/src/components/ui/Breadcrumb/Breadcrumb.mdx +3 -0
- package/src/components/ui/Breadcrumb/Breadcrumb.module.css +4 -0
- package/src/components/ui/Breadcrumb/Breadcrumb.spec.tsx +12 -0
- package/src/components/ui/Breadcrumb/Breadcrumb.tsx +11 -3
- package/src/components/ui/Calendar/Calendar.mdx +6 -0
- package/src/components/ui/Calendar/Calendar.module.css +68 -19
- package/src/components/ui/Calendar/Calendar.spec.tsx +139 -24
- package/src/components/ui/Calendar/Calendar.stories.tsx +14 -0
- package/src/components/ui/Calendar/Calendar.tsx +143 -154
- package/src/components/ui/Calendar/CalendarRange.mdx +39 -0
- package/src/components/ui/Calendar/CalendarRange.spec.tsx +119 -0
- package/src/components/ui/Calendar/CalendarRange.stories.tsx +51 -0
- package/src/components/ui/Calendar/CalendarRange.tsx +213 -0
- package/src/components/ui/Calendar/MonthGrid.tsx +141 -0
- package/src/components/ui/Calendar/calendar-core.spec.ts +176 -0
- package/src/components/ui/Calendar/calendar-core.ts +164 -0
- package/src/components/ui/Calendar/index.ts +1 -0
- package/src/components/ui/Carousel/Carousel.mdx +8 -3
- package/src/components/ui/Carousel/Carousel.module.css +7 -5
- package/src/components/ui/Carousel/Carousel.spec.tsx +67 -0
- package/src/components/ui/Carousel/Carousel.tsx +19 -7
- package/src/components/ui/Collapsible/Collapsible.mdx +17 -6
- package/src/components/ui/Collapsible/Collapsible.module.css +7 -2
- package/src/components/ui/Collapsible/Collapsible.spec.tsx +40 -0
- package/src/components/ui/Collapsible/Collapsible.tsx +19 -2
- package/src/components/ui/DescriptionList/DescriptionList.mdx +2 -0
- package/src/components/ui/Link/Link.mdx +4 -2
- package/src/components/ui/Loading/Loading.mdx +6 -3
- package/src/components/ui/Loading/Loading.module.css +7 -7
- package/src/components/ui/Loading/Loading.spec.tsx +12 -0
- package/src/components/ui/Loading/Loading.tsx +8 -3
- package/src/components/ui/NotificationBanner/NotificationBanner.mdx +4 -0
- package/src/components/ui/NotificationBanner/NotificationBanner.module.css +5 -0
- package/src/components/ui/NotificationBanner/NotificationBanner.spec.tsx +20 -0
- package/src/components/ui/Pagination/Pagination.mdx +29 -7
- package/src/components/ui/Pagination/Pagination.module.css +15 -14
- package/src/components/ui/Progress/Progress.mdx +6 -2
- package/src/components/ui/Progress/Progress.module.css +1 -1
- package/src/components/ui/Progress/Progress.spec.tsx +17 -0
- package/src/components/ui/Progress/Progress.tsx +2 -2
- package/src/components/ui/ProgressCircle/ProgressCircle.mdx +8 -4
- package/src/components/ui/ProgressCircle/ProgressCircle.module.css +2 -2
- package/src/components/ui/ProgressCircle/ProgressCircle.spec.tsx +11 -1
- package/src/components/ui/ProgressCircle/ProgressCircle.tsx +1 -1
- package/src/components/ui/Separator/Separator.mdx +7 -0
- package/src/components/ui/Separator/Separator.module.css +1 -0
- package/src/components/ui/Skeleton/Skeleton.mdx +17 -0
- package/src/components/ui/Skeleton/Skeleton.module.css +12 -5
- package/src/components/ui/SkipLink/SkipLink.mdx +19 -0
- package/src/components/ui/SkipLink/SkipLink.module.css +8 -7
- package/src/components/ui/SkipLink/SkipLink.spec.tsx +28 -0
- package/src/components/ui/Table/Table.mdx +14 -0
- package/src/components/ui/Table/Table.module.css +13 -8
- package/src/components/ui/Table/Table.spec.tsx +56 -0
- package/src/components/ui/Table/Table.tsx +44 -6
- package/src/components/ui/Tabs/Tabs.mdx +16 -0
- package/src/components/ui/Tabs/Tabs.module.css +3 -3
- package/src/components/ui/Tabs/Tabs.spec.tsx +20 -0
- package/src/components/ui/Tabs/Tabs.tsx +5 -1
- package/src/components/ui/Tooltip/Tooltip.mdx +9 -0
- package/src/components/ui/Tooltip/Tooltip.module.css +32 -12
- package/src/components/ui/Tooltip/Tooltip.spec.tsx +56 -0
- package/src/components/ui/Tooltip/Tooltip.tsx +26 -7
- package/src/components/ui/Typography/Typography.mdx +7 -0
- package/src/components/ui/Typography/Typography.module.css +5 -5
- package/src/index.ts +7 -3
- package/src/stories/DesignSystem/Borders.mdx +14 -9
- package/src/stories/DesignSystem/Colors.mdx +43 -41
- package/src/stories/DesignSystem/Overview.mdx +4 -3
- package/src/stories/Introduction.mdx +5 -5
- package/src/web-components/globals.ts +7 -0
- package/src/web-components/index.ts +2 -0
- package/src/web-components/interaction/BdsAccordion.mdx +10 -1
- package/src/web-components/interaction/BdsButton.mdx +15 -4
- package/src/web-components/interaction/BdsButton.stories.tsx +1 -1
- package/src/web-components/interaction/BdsCollapsible.mdx +3 -3
- package/src/web-components/interaction/BdsDialog.mdx +12 -7
- package/src/web-components/interaction/BdsDialog.stories.tsx +2 -2
- package/src/web-components/interaction/BdsDrawer.mdx +9 -6
- package/src/web-components/interaction/BdsDropdownMenu.mdx +20 -1
- package/src/web-components/interaction/BdsPopover.mdx +7 -3
- package/src/web-components/interaction/BdsSkipLink.mdx +14 -1
- package/src/web-components/interaction/BdsTabs.mdx +18 -1
- package/src/web-components/interaction/BdsToastProvider.mdx +21 -3
- package/src/web-components/interaction/BdsTooltip.mdx +4 -4
- package/src/web-components/interaction/bds-accordion-item.ts +10 -0
- package/src/web-components/interaction/bds-accordion.spec.ts +41 -0
- package/src/web-components/interaction/bds-accordion.ts +28 -2
- package/src/web-components/interaction/bds-button.spec.ts +81 -0
- package/src/web-components/interaction/bds-button.ts +60 -13
- package/src/web-components/interaction/bds-collapsible.spec.ts +93 -2
- package/src/web-components/interaction/bds-collapsible.ts +49 -7
- package/src/web-components/interaction/bds-dialog.spec.ts +49 -0
- package/src/web-components/interaction/bds-dialog.ts +68 -11
- package/src/web-components/interaction/bds-drawer.spec.ts +93 -4
- package/src/web-components/interaction/bds-drawer.ts +54 -21
- package/src/web-components/interaction/bds-dropdown-menu-item.ts +12 -1
- package/src/web-components/interaction/bds-dropdown-menu.spec.ts +63 -0
- package/src/web-components/interaction/bds-dropdown-menu.ts +45 -7
- package/src/web-components/interaction/bds-popover.spec.ts +80 -6
- package/src/web-components/interaction/bds-popover.ts +83 -32
- package/src/web-components/interaction/bds-skip-link.spec.ts +18 -0
- package/src/web-components/interaction/bds-skip-link.ts +29 -8
- package/src/web-components/interaction/bds-tab-panel.ts +10 -0
- package/src/web-components/interaction/bds-tab.spec.ts +25 -0
- package/src/web-components/interaction/bds-tab.ts +20 -5
- package/src/web-components/interaction/bds-tabs.spec.ts +92 -5
- package/src/web-components/interaction/bds-tabs.ts +42 -1
- package/src/web-components/interaction/bds-toast-provider.spec.ts +43 -0
- package/src/web-components/interaction/bds-toast-provider.ts +50 -21
- package/src/web-components/interaction/bds-tooltip.spec.ts +71 -0
- package/src/web-components/interaction/bds-tooltip.ts +100 -5
- package/src/web-components/interaction/form/BdsCheckbox.mdx +20 -1
- package/src/web-components/interaction/form/BdsCheckbox.stories.tsx +8 -0
- package/src/web-components/interaction/form/BdsCheckboxGroup.mdx +4 -3
- package/src/web-components/interaction/form/BdsCombobox.mdx +39 -2
- package/src/web-components/interaction/form/BdsCombobox.stories.tsx +31 -0
- package/src/web-components/interaction/form/BdsFieldGroup.mdx +8 -3
- package/src/web-components/interaction/form/BdsFieldGroup.stories.tsx +1 -1
- package/src/web-components/interaction/form/BdsFileInput.mdx +26 -5
- package/src/web-components/interaction/form/BdsFormInput.mdx +16 -1
- package/src/web-components/interaction/form/BdsNumberInput.mdx +34 -2
- package/src/web-components/interaction/form/BdsNumberInput.stories.tsx +27 -3
- package/src/web-components/interaction/form/BdsRadio.mdx +39 -12
- package/src/web-components/interaction/form/BdsRadio.stories.tsx +26 -0
- package/src/web-components/interaction/form/BdsRadioGroup.mdx +9 -4
- package/src/web-components/interaction/form/BdsSegmentedControl.mdx +37 -11
- package/src/web-components/interaction/form/BdsSelect.mdx +22 -4
- package/src/web-components/interaction/form/BdsSelect.stories.tsx +33 -0
- package/src/web-components/interaction/form/BdsSlider.mdx +36 -19
- package/src/web-components/interaction/form/BdsSlider.stories.tsx +24 -0
- package/src/web-components/interaction/form/BdsSwitch.mdx +38 -11
- package/src/web-components/interaction/form/BdsSwitch.stories.tsx +16 -0
- package/src/web-components/interaction/form/BdsTextarea.mdx +42 -16
- package/src/web-components/interaction/form/BdsTextarea.stories.tsx +21 -0
- package/src/web-components/interaction/form/bds-checkbox-group.spec.ts +99 -0
- package/src/web-components/interaction/form/bds-checkbox-group.ts +95 -9
- package/src/web-components/interaction/form/bds-checkbox.spec.ts +55 -0
- package/src/web-components/interaction/form/bds-checkbox.ts +30 -5
- package/src/web-components/interaction/form/bds-combobox.spec.ts +79 -0
- package/src/web-components/interaction/form/bds-combobox.ts +102 -17
- package/src/web-components/interaction/form/bds-field-group.spec.ts +158 -0
- package/src/web-components/interaction/form/bds-field-group.ts +167 -23
- package/src/web-components/interaction/form/bds-file-input.spec.ts +73 -5
- package/src/web-components/interaction/form/bds-file-input.ts +71 -34
- package/src/web-components/interaction/form/bds-form-input.spec.ts +22 -0
- package/src/web-components/interaction/form/bds-form-input.ts +27 -16
- package/src/web-components/interaction/form/bds-number-input.spec.ts +49 -0
- package/src/web-components/interaction/form/bds-number-input.ts +118 -29
- package/src/web-components/interaction/form/bds-radio-group.spec.ts +57 -0
- package/src/web-components/interaction/form/bds-radio-group.ts +60 -12
- package/src/web-components/interaction/form/bds-radio.spec.ts +123 -0
- package/src/web-components/interaction/form/bds-radio.ts +136 -23
- package/src/web-components/interaction/form/bds-segmented-control.spec.ts +55 -0
- package/src/web-components/interaction/form/bds-segmented-control.ts +81 -59
- package/src/web-components/interaction/form/bds-select.spec.ts +57 -0
- package/src/web-components/interaction/form/bds-select.ts +96 -8
- package/src/web-components/interaction/form/bds-slider.spec.ts +83 -0
- package/src/web-components/interaction/form/bds-slider.ts +181 -33
- package/src/web-components/interaction/form/bds-switch.spec.ts +68 -0
- package/src/web-components/interaction/form/bds-switch.ts +142 -41
- package/src/web-components/interaction/form/bds-textarea.spec.ts +71 -0
- package/src/web-components/interaction/form/bds-textarea.ts +109 -8
- package/src/web-components/layout/BdsGrid.mdx +6 -2
- package/src/web-components/layout/BdsGrid.stories.tsx +4 -0
- package/src/web-components/layout/bds-grid-item.spec.ts +21 -0
- package/src/web-components/layout/bds-grid-item.ts +17 -3
- package/src/web-components/layout/bds-grid.spec.ts +98 -0
- package/src/web-components/layout/bds-grid.ts +139 -19
- package/src/web-components/ui/BdsAlert.mdx +6 -5
- package/src/web-components/ui/BdsAlert.stories.tsx +6 -6
- package/src/web-components/ui/BdsAvatar.mdx +4 -2
- package/src/web-components/ui/BdsBreadcrumb.mdx +3 -2
- package/src/web-components/ui/BdsButtonContainer.mdx +64 -0
- package/src/web-components/ui/BdsButtonContainer.stories.tsx +84 -0
- package/src/web-components/ui/BdsCalendar.mdx +29 -4
- package/src/web-components/ui/BdsCalendar.stories.tsx +16 -18
- package/src/web-components/ui/BdsCalendarRange.mdx +71 -0
- package/src/web-components/ui/BdsCalendarRange.stories.tsx +31 -0
- package/src/web-components/ui/BdsCard.mdx +7 -3
- package/src/web-components/ui/BdsCard.stories.tsx +17 -1
- package/src/web-components/ui/BdsCarousel.mdx +40 -12
- package/src/web-components/ui/BdsDescriptionList.mdx +6 -1
- package/src/web-components/ui/BdsIconWrapper.mdx +3 -2
- package/src/web-components/ui/BdsLink.mdx +14 -2
- package/src/web-components/ui/BdsNotificationBanner.mdx +18 -0
- package/src/web-components/ui/BdsPagination.mdx +40 -1
- package/src/web-components/ui/BdsProgress.mdx +8 -2
- package/src/web-components/ui/BdsProgressCircle.mdx +5 -2
- package/src/web-components/ui/BdsRating.mdx +7 -0
- package/src/web-components/ui/BdsSectionHeader.mdx +22 -3
- package/src/web-components/ui/BdsSectionHeader.stories.tsx +15 -13
- package/src/web-components/ui/BdsTable.mdx +23 -2
- package/src/web-components/ui/BdsTable.stories.tsx +8 -2
- package/src/web-components/ui/BdsTypography.mdx +17 -1
- package/src/web-components/ui/bds-alert.spec.ts +17 -2
- package/src/web-components/ui/bds-alert.ts +31 -5
- package/src/web-components/ui/bds-avatar.spec.ts +29 -0
- package/src/web-components/ui/bds-avatar.ts +30 -12
- package/src/web-components/ui/bds-badge.spec.ts +5 -0
- package/src/web-components/ui/bds-badge.ts +11 -1
- package/src/web-components/ui/bds-breadcrumb.spec.ts +30 -0
- package/src/web-components/ui/bds-breadcrumb.ts +26 -4
- package/src/web-components/ui/bds-button-container.spec.ts +39 -0
- package/src/web-components/ui/bds-button-container.ts +123 -0
- package/src/web-components/ui/bds-button-group.spec.ts +14 -20
- package/src/web-components/ui/bds-button-group.ts +13 -64
- package/src/web-components/ui/bds-calendar-range.spec.ts +123 -0
- package/src/web-components/ui/bds-calendar-range.ts +307 -0
- package/src/web-components/ui/bds-calendar.spec.ts +176 -0
- package/src/web-components/ui/bds-calendar.ts +186 -344
- package/src/web-components/ui/bds-card.spec.ts +32 -0
- package/src/web-components/ui/bds-card.ts +34 -9
- package/src/web-components/ui/bds-carousel.spec.ts +147 -0
- package/src/web-components/ui/bds-carousel.ts +113 -36
- package/src/web-components/ui/bds-description-list.spec.ts +15 -0
- package/src/web-components/ui/bds-description-list.ts +37 -3
- package/src/web-components/ui/bds-icon-wrapper.spec.ts +12 -0
- package/src/web-components/ui/bds-icon-wrapper.ts +16 -15
- package/src/web-components/ui/bds-link.spec.ts +17 -0
- package/src/web-components/ui/bds-link.ts +26 -11
- package/src/web-components/ui/bds-loading.ts +11 -1
- package/src/web-components/ui/bds-notification-banner.spec.ts +13 -0
- package/src/web-components/ui/bds-notification-banner.ts +18 -1
- package/src/web-components/ui/bds-pagination.spec.ts +44 -0
- package/src/web-components/ui/bds-pagination.ts +39 -19
- package/src/web-components/ui/bds-progress-circle.spec.ts +21 -0
- package/src/web-components/ui/bds-progress-circle.ts +17 -5
- package/src/web-components/ui/bds-progress.spec.ts +21 -0
- package/src/web-components/ui/bds-progress.ts +19 -6
- package/src/web-components/ui/bds-rating.spec.ts +6 -0
- package/src/web-components/ui/bds-rating.ts +12 -2
- package/src/web-components/ui/bds-section-header.spec.ts +39 -8
- package/src/web-components/ui/bds-section-header.ts +47 -13
- package/src/web-components/ui/bds-separator.ts +10 -0
- package/src/web-components/ui/bds-skeleton.ts +10 -0
- package/src/web-components/ui/bds-table.spec.ts +63 -0
- package/src/web-components/ui/bds-table.ts +88 -28
- package/src/web-components/ui/bds-typography.spec.ts +47 -0
- package/src/web-components/ui/bds-typography.ts +28 -10
- package/src/web-components/ui/calendar-styles.ts +94 -0
- package/dist/web-components/chunk-5TFWOPLH.js +0 -49
- package/dist/web-components/chunk-7FMR53BW.js +0 -127
- package/dist/web-components/chunk-AGKJTMJI.js +0 -56
- package/dist/web-components/chunk-BQLZ7I4G.js +0 -56
- package/dist/web-components/chunk-IYGF6CD5.js +0 -118
- package/dist/web-components/chunk-QBB6ZX4R.js +0 -107
- package/dist/web-components/chunk-Y3POAKGS.js +0 -133
- package/dist/web-components/chunk-Y4MAXTMA.js +0 -80
- package/dist/web-components/chunk-Y7V7LM6R.js +0 -98
- package/src/web-components/ui/BdsButtonGroup.mdx +0 -69
- package/src/web-components/ui/BdsButtonGroup.stories.tsx +0 -66
package/dist/client.cjs
CHANGED
|
@@ -40,6 +40,7 @@ __export(client_exports, {
|
|
|
40
40
|
ButtonContainer: () => ButtonContainer,
|
|
41
41
|
ButtonGroup: () => ButtonGroup,
|
|
42
42
|
Calendar: () => Calendar,
|
|
43
|
+
CalendarRange: () => CalendarRange,
|
|
43
44
|
Card: () => Card,
|
|
44
45
|
Carousel: () => Carousel,
|
|
45
46
|
Checkbox: () => Checkbox,
|
|
@@ -83,7 +84,7 @@ __export(client_exports, {
|
|
|
83
84
|
ToastProvider: () => ToastProvider,
|
|
84
85
|
Tooltip: () => Tooltip,
|
|
85
86
|
Typography: () => Typography,
|
|
86
|
-
cn: () =>
|
|
87
|
+
cn: () => import_design_system_foundation56.cn,
|
|
87
88
|
useToast: () => useToast
|
|
88
89
|
});
|
|
89
90
|
module.exports = __toCommonJS(client_exports);
|
|
@@ -92,7 +93,7 @@ module.exports = __toCommonJS(client_exports);
|
|
|
92
93
|
var import_react = require("react");
|
|
93
94
|
|
|
94
95
|
// src/components/ui/Accordion/Accordion.module.css
|
|
95
|
-
var Accordion_default = {"component":"
|
|
96
|
+
var Accordion_default = {"component":"bds2110Accordion-component","accordion":"bds2110Accordion-accordion","item":"bds2110Accordion-item","heading":"bds2110Accordion-heading","trigger":"bds2110Accordion-trigger","triggerLabel":"bds2110Accordion-triggerLabel","chevron":"bds2110Accordion-chevron","--open":"bds2110Accordion---open","panel":"bds2110Accordion-panel","panelContent":"bds2110Accordion-panelContent"};
|
|
96
97
|
|
|
97
98
|
// src/components/ui/Accordion/Accordion.tsx
|
|
98
99
|
var import_design_system_foundation = require("@boostdev/design-system-foundation");
|
|
@@ -161,7 +162,7 @@ function Accordion({
|
|
|
161
162
|
}
|
|
162
163
|
|
|
163
164
|
// src/components/ui/Alert/Alert.module.css
|
|
164
|
-
var Alert_default = {"component":"
|
|
165
|
+
var Alert_default = {"component":"bds2110Alert-component","alert":"bds2110Alert-alert","--variant_info":"bds2110Alert---variant_info","--variant_success":"bds2110Alert---variant_success","--variant_warning":"bds2110Alert---variant_warning","--variant_error":"bds2110Alert---variant_error","icon":"bds2110Alert-icon","content":"bds2110Alert-content","title":"bds2110Alert-title","dismiss":"bds2110Alert-dismiss"};
|
|
165
166
|
|
|
166
167
|
// src/components/ui/Alert/Alert.tsx
|
|
167
168
|
var import_design_system_foundation2 = require("@boostdev/design-system-foundation");
|
|
@@ -206,7 +207,7 @@ function Alert({
|
|
|
206
207
|
}
|
|
207
208
|
|
|
208
209
|
// src/components/ui/Avatar/Avatar.module.css
|
|
209
|
-
var Avatar_default = {"component":"
|
|
210
|
+
var Avatar_default = {"component":"bds2110Avatar-component","avatar":"bds2110Avatar-avatar","--fallback":"bds2110Avatar---fallback","--size_small":"bds2110Avatar---size_small","--size_medium":"bds2110Avatar---size_medium","--size_large":"bds2110Avatar---size_large","image":"bds2110Avatar-image","initials":"bds2110Avatar-initials"};
|
|
210
211
|
|
|
211
212
|
// src/components/ui/Avatar/Avatar.tsx
|
|
212
213
|
var import_design_system_foundation3 = require("@boostdev/design-system-foundation");
|
|
@@ -233,7 +234,7 @@ function Avatar({ src, alt, name, size = "medium", className, ...rest }) {
|
|
|
233
234
|
}
|
|
234
235
|
|
|
235
236
|
// src/components/ui/Badge/Badge.module.css
|
|
236
|
-
var Badge_default = {"component":"
|
|
237
|
+
var Badge_default = {"component":"bds2110Badge-component","badge":"bds2110Badge-badge","--variant_primary":"bds2110Badge---variant_primary","--variant_secondary":"bds2110Badge---variant_secondary","--variant_success":"bds2110Badge---variant_success","--variant_error":"bds2110Badge---variant_error","--variant_warning":"bds2110Badge---variant_warning"};
|
|
237
238
|
|
|
238
239
|
// src/components/ui/Badge/Badge.tsx
|
|
239
240
|
var import_design_system_foundation4 = require("@boostdev/design-system-foundation");
|
|
@@ -243,7 +244,7 @@ function Badge({ children, variant = "primary", className, ...rest }) {
|
|
|
243
244
|
}
|
|
244
245
|
|
|
245
246
|
// src/components/ui/Breadcrumb/Breadcrumb.module.css
|
|
246
|
-
var Breadcrumb_default = {"component":"
|
|
247
|
+
var Breadcrumb_default = {"component":"bds2110Breadcrumb-component","breadcrumb":"bds2110Breadcrumb-breadcrumb","list":"bds2110Breadcrumb-list","item":"bds2110Breadcrumb-item","link":"bds2110Breadcrumb-link","separator":"bds2110Breadcrumb-separator","text":"bds2110Breadcrumb-text","current":"bds2110Breadcrumb-current"};
|
|
247
248
|
|
|
248
249
|
// src/components/ui/Breadcrumb/Breadcrumb.tsx
|
|
249
250
|
var import_design_system_foundation5 = require("@boostdev/design-system-foundation");
|
|
@@ -252,14 +253,14 @@ function Breadcrumb({ items, className, ...rest }) {
|
|
|
252
253
|
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) => {
|
|
253
254
|
const isLast = index === items.length - 1;
|
|
254
255
|
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: [
|
|
255
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: item.href, className: Breadcrumb_default.link, children: item.label }),
|
|
256
|
+
item.href ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: item.href, className: Breadcrumb_default.link, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: Breadcrumb_default.text, children: item.label }),
|
|
256
257
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: Breadcrumb_default.separator, "aria-hidden": "true", children: "\u203A" })
|
|
257
258
|
] }) }, index);
|
|
258
259
|
}) }) });
|
|
259
260
|
}
|
|
260
261
|
|
|
261
262
|
// src/components/ui/Collapsible/Collapsible.module.css
|
|
262
|
-
var Collapsible_default = {"component":"
|
|
263
|
+
var Collapsible_default = {"component":"bds2110Collapsible-component","collapsible":"bds2110Collapsible-collapsible","summary":"bds2110Collapsible-summary","summaryContent":"bds2110Collapsible-summaryContent","icon":"bds2110Collapsible-icon","content":"bds2110Collapsible-content"};
|
|
263
264
|
|
|
264
265
|
// src/components/ui/Collapsible/Collapsible.tsx
|
|
265
266
|
var import_design_system_foundation6 = require("@boostdev/design-system-foundation");
|
|
@@ -274,9 +275,16 @@ function Collapsible({
|
|
|
274
275
|
className,
|
|
275
276
|
...rest
|
|
276
277
|
}) {
|
|
278
|
+
const isControlled = open !== void 0;
|
|
277
279
|
const handleToggle = (e) => {
|
|
280
|
+
if (isControlled) return;
|
|
278
281
|
onToggle?.(e.currentTarget.open);
|
|
279
282
|
};
|
|
283
|
+
const handleSummaryClick = (e) => {
|
|
284
|
+
if (!isControlled) return;
|
|
285
|
+
e.preventDefault();
|
|
286
|
+
onToggle?.(!open);
|
|
287
|
+
};
|
|
280
288
|
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
281
289
|
"details",
|
|
282
290
|
{
|
|
@@ -286,7 +294,7 @@ function Collapsible({
|
|
|
286
294
|
onToggle: handleToggle,
|
|
287
295
|
...rest,
|
|
288
296
|
children: [
|
|
289
|
-
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("summary", { className: Collapsible_default.summary, children: [
|
|
297
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("summary", { className: Collapsible_default.summary, onClick: handleSummaryClick, children: [
|
|
290
298
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: Collapsible_default.summaryContent, children: summary }),
|
|
291
299
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: Collapsible_default.icon, "aria-hidden": "true" })
|
|
292
300
|
] }),
|
|
@@ -298,254 +306,574 @@ function Collapsible({
|
|
|
298
306
|
|
|
299
307
|
// src/components/ui/Calendar/Calendar.tsx
|
|
300
308
|
var import_react2 = require("react");
|
|
309
|
+
var import_design_system_foundation8 = require("@boostdev/design-system-foundation");
|
|
301
310
|
|
|
302
311
|
// src/components/ui/Calendar/Calendar.module.css
|
|
303
|
-
var Calendar_default = {"component":"
|
|
312
|
+
var Calendar_default = {"component":"bds2110Calendar-component","calendar":"bds2110Calendar-calendar","months":"bds2110Calendar-months","month":"bds2110Calendar-month","monthHeader":"bds2110Calendar-monthHeader","navSlot":"bds2110Calendar-navSlot","monthYear":"bds2110Calendar-monthYear","navBtn":"bds2110Calendar-navBtn","grid":"bds2110Calendar-grid","row":"bds2110Calendar-row","weekday":"bds2110Calendar-weekday","cell":"bds2110Calendar-cell","day":"bds2110Calendar-day","disabled":"bds2110Calendar-disabled","selected":"bds2110Calendar-selected","rangeStart":"bds2110Calendar-rangeStart","rangeEnd":"bds2110Calendar-rangeEnd","outside":"bds2110Calendar-outside","today":"bds2110Calendar-today","inRange":"bds2110Calendar-inRange"};
|
|
304
313
|
|
|
305
|
-
// src/components/ui/Calendar/
|
|
314
|
+
// src/components/ui/Calendar/MonthGrid.tsx
|
|
306
315
|
var import_design_system_foundation7 = require("@boostdev/design-system-foundation");
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
316
|
+
|
|
317
|
+
// src/components/ui/Calendar/calendar-core.ts
|
|
318
|
+
function toISO(date) {
|
|
319
|
+
const y = date.getFullYear();
|
|
320
|
+
const m = String(date.getMonth() + 1).padStart(2, "0");
|
|
321
|
+
const d = String(date.getDate()).padStart(2, "0");
|
|
322
|
+
return `${y}-${m}-${d}`;
|
|
323
|
+
}
|
|
324
|
+
function parseISO(iso) {
|
|
325
|
+
const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
|
|
326
|
+
if (!m) return null;
|
|
327
|
+
const year = Number(m[1]);
|
|
328
|
+
const month = Number(m[2]) - 1;
|
|
329
|
+
const day = Number(m[3]);
|
|
330
|
+
const date = new Date(year, month, day);
|
|
331
|
+
date.setFullYear(year);
|
|
332
|
+
if (isNaN(date.getTime())) return null;
|
|
333
|
+
if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) return null;
|
|
334
|
+
return date;
|
|
335
|
+
}
|
|
336
|
+
function addDays(date, n) {
|
|
337
|
+
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + n);
|
|
338
|
+
}
|
|
339
|
+
function addMonths(date, n) {
|
|
340
|
+
const firstOfTarget = new Date(date.getFullYear(), date.getMonth() + n, 1);
|
|
341
|
+
const daysInTarget = new Date(firstOfTarget.getFullYear(), firstOfTarget.getMonth() + 1, 0).getDate();
|
|
342
|
+
return new Date(firstOfTarget.getFullYear(), firstOfTarget.getMonth(), Math.min(date.getDate(), daysInTarget));
|
|
343
|
+
}
|
|
332
344
|
function isSameDay(a, b) {
|
|
333
345
|
return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
|
|
334
346
|
}
|
|
335
|
-
function
|
|
336
|
-
|
|
347
|
+
function compareDay(a, b) {
|
|
348
|
+
const am = new Date(a.getFullYear(), a.getMonth(), a.getDate()).getTime();
|
|
349
|
+
const bm = new Date(b.getFullYear(), b.getMonth(), b.getDate()).getTime();
|
|
350
|
+
return am < bm ? -1 : am > bm ? 1 : 0;
|
|
351
|
+
}
|
|
352
|
+
function sortRange(a, b) {
|
|
353
|
+
return compareDay(a, b) <= 0 ? [a, b] : [b, a];
|
|
354
|
+
}
|
|
355
|
+
function isInRange(date, start, end) {
|
|
356
|
+
const [lo, hi] = sortRange(start, end);
|
|
357
|
+
return compareDay(date, lo) >= 0 && compareDay(date, hi) <= 0;
|
|
358
|
+
}
|
|
359
|
+
function isDisabled(date, opts) {
|
|
360
|
+
if (opts.min && compareDay(date, opts.min) < 0) return true;
|
|
361
|
+
if (opts.max && compareDay(date, opts.max) > 0) return true;
|
|
362
|
+
return !!opts.isDateDisallowed?.(date);
|
|
363
|
+
}
|
|
364
|
+
function buildMonthGrid(year, month, firstDayOfWeek) {
|
|
365
|
+
const firstOfMonth = new Date(year, month, 1);
|
|
366
|
+
const lead = (firstOfMonth.getDay() - firstDayOfWeek + 7) % 7;
|
|
367
|
+
const start = addDays(firstOfMonth, -lead);
|
|
368
|
+
return Array.from({ length: 42 }, (_, i) => {
|
|
369
|
+
const date = addDays(start, i);
|
|
370
|
+
return { iso: toISO(date), date, day: date.getDate(), outside: date.getMonth() !== month };
|
|
371
|
+
});
|
|
372
|
+
}
|
|
373
|
+
function getMonthLabel(year, month, locale) {
|
|
374
|
+
return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(new Date(year, month, 1));
|
|
375
|
+
}
|
|
376
|
+
function getDayLabel(date, locale) {
|
|
377
|
+
return new Intl.DateTimeFormat(locale, { year: "numeric", month: "long", day: "numeric" }).format(date);
|
|
378
|
+
}
|
|
379
|
+
function getWeekdayNames(locale, firstDayOfWeek) {
|
|
380
|
+
const fmt = new Intl.DateTimeFormat(locale, { weekday: "short" });
|
|
381
|
+
return Array.from({ length: 7 }, (_, i) => fmt.format(new Date(2023, 0, 1 + (firstDayOfWeek + i) % 7)));
|
|
382
|
+
}
|
|
383
|
+
function nextFocusDate(current, key, opts) {
|
|
384
|
+
const offsetInWeek = (current.getDay() - opts.firstDayOfWeek + 7) % 7;
|
|
385
|
+
switch (key) {
|
|
386
|
+
case "ArrowRight":
|
|
387
|
+
return addDays(current, 1);
|
|
388
|
+
case "ArrowLeft":
|
|
389
|
+
return addDays(current, -1);
|
|
390
|
+
case "ArrowDown":
|
|
391
|
+
return addDays(current, 7);
|
|
392
|
+
case "ArrowUp":
|
|
393
|
+
return addDays(current, -7);
|
|
394
|
+
case "Home":
|
|
395
|
+
return addDays(current, -offsetInWeek);
|
|
396
|
+
case "End":
|
|
397
|
+
return addDays(current, 6 - offsetInWeek);
|
|
398
|
+
case "PageUp":
|
|
399
|
+
return addMonths(current, opts.shiftKey ? -12 : -1);
|
|
400
|
+
case "PageDown":
|
|
401
|
+
return addMonths(current, opts.shiftKey ? 12 : 1);
|
|
402
|
+
default:
|
|
403
|
+
return null;
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
// src/components/ui/Calendar/MonthGrid.tsx
|
|
408
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
409
|
+
var ChevronLeft = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) });
|
|
410
|
+
var ChevronRight = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
|
|
411
|
+
function MonthGrid(props) {
|
|
412
|
+
const {
|
|
413
|
+
year,
|
|
414
|
+
month,
|
|
415
|
+
firstDayOfWeek,
|
|
416
|
+
weekdayNames,
|
|
417
|
+
monthLabel,
|
|
418
|
+
headingId,
|
|
419
|
+
showPrev,
|
|
420
|
+
showNext,
|
|
421
|
+
onPrev,
|
|
422
|
+
onNext,
|
|
423
|
+
prevLabel,
|
|
424
|
+
nextLabel,
|
|
425
|
+
classifyDay,
|
|
426
|
+
formatDay,
|
|
427
|
+
registerRef,
|
|
428
|
+
onSelect,
|
|
429
|
+
onKeyDown,
|
|
430
|
+
onDayPointerEnter
|
|
431
|
+
} = props;
|
|
432
|
+
const cells = buildMonthGrid(year, month, firstDayOfWeek);
|
|
433
|
+
const rows = Array.from({ length: 6 }, (_, r) => cells.slice(r * 7, r * 7 + 7));
|
|
434
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: Calendar_default.month, children: [
|
|
435
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: Calendar_default.monthHeader, children: [
|
|
436
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: Calendar_default.navSlot, children: showPrev && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: Calendar_default.navBtn, "aria-label": prevLabel, onClick: onPrev, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronLeft, {}) }) }),
|
|
437
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: headingId, className: Calendar_default.monthYear, "aria-live": "polite", children: monthLabel }),
|
|
438
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: Calendar_default.navSlot, children: showNext && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: Calendar_default.navBtn, "aria-label": nextLabel, onClick: onNext, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronRight, {}) }) })
|
|
439
|
+
] }),
|
|
440
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: Calendar_default.grid, role: "grid", "aria-labelledby": headingId, children: [
|
|
441
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: Calendar_default.row, role: "row", children: weekdayNames.map((name, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { role: "columnheader", className: Calendar_default.weekday, "aria-label": name, children: name }, i)) }),
|
|
442
|
+
rows.map((week, r) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: Calendar_default.row, role: "row", children: week.map((cell) => {
|
|
443
|
+
const s = cell.outside ? { today: false, selected: false, rangeStart: false, rangeEnd: false, inRange: false, disabled: true, tabbable: false } : classifyDay(cell.date);
|
|
444
|
+
const isEndpoint = s.selected || s.rangeStart || s.rangeEnd;
|
|
445
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
446
|
+
"span",
|
|
447
|
+
{
|
|
448
|
+
role: "gridcell",
|
|
449
|
+
"aria-selected": isEndpoint,
|
|
450
|
+
className: Calendar_default.cell,
|
|
451
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
452
|
+
"button",
|
|
453
|
+
{
|
|
454
|
+
ref: (el) => registerRef(cell.iso, el),
|
|
455
|
+
type: "button",
|
|
456
|
+
"data-date": cell.iso,
|
|
457
|
+
"data-outside": cell.outside || void 0,
|
|
458
|
+
"data-today": s.today || void 0,
|
|
459
|
+
"data-selected": s.selected || void 0,
|
|
460
|
+
"data-range-start": s.rangeStart || void 0,
|
|
461
|
+
"data-range-end": s.rangeEnd || void 0,
|
|
462
|
+
"data-in-range": s.inRange || void 0,
|
|
463
|
+
className: (0, import_design_system_foundation7.cn)(
|
|
464
|
+
Calendar_default.day,
|
|
465
|
+
cell.outside && Calendar_default.outside,
|
|
466
|
+
s.today && !isEndpoint && Calendar_default.today,
|
|
467
|
+
s.selected && Calendar_default.selected,
|
|
468
|
+
s.rangeStart && Calendar_default.rangeStart,
|
|
469
|
+
s.rangeEnd && Calendar_default.rangeEnd,
|
|
470
|
+
s.inRange && Calendar_default.inRange,
|
|
471
|
+
s.disabled && Calendar_default.disabled
|
|
472
|
+
),
|
|
473
|
+
"aria-label": formatDay(cell.date),
|
|
474
|
+
"aria-current": s.today ? "date" : void 0,
|
|
475
|
+
"aria-disabled": s.disabled || void 0,
|
|
476
|
+
disabled: s.disabled || cell.outside,
|
|
477
|
+
tabIndex: s.tabbable ? 0 : -1,
|
|
478
|
+
onClick: () => onSelect(cell.date),
|
|
479
|
+
onKeyDown: (e) => onKeyDown(e, cell.date),
|
|
480
|
+
onPointerEnter: onDayPointerEnter ? () => onDayPointerEnter(cell.date) : void 0,
|
|
481
|
+
children: cell.day
|
|
482
|
+
}
|
|
483
|
+
)
|
|
484
|
+
},
|
|
485
|
+
cell.iso
|
|
486
|
+
);
|
|
487
|
+
}) }, r))
|
|
488
|
+
] })
|
|
489
|
+
] });
|
|
337
490
|
}
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
491
|
+
|
|
492
|
+
// src/components/ui/Calendar/Calendar.tsx
|
|
493
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
494
|
+
function monthIndex(d) {
|
|
495
|
+
return d.getFullYear() * 12 + d.getMonth();
|
|
342
496
|
}
|
|
343
|
-
function
|
|
344
|
-
|
|
497
|
+
function isMonthVisible(date, viewYear, viewMonth, months) {
|
|
498
|
+
const start = viewYear * 12 + viewMonth;
|
|
499
|
+
const idx = monthIndex(date);
|
|
500
|
+
return idx >= start && idx < start + months;
|
|
345
501
|
}
|
|
346
|
-
function
|
|
347
|
-
return new Date(
|
|
502
|
+
function weekdayNamesFrom(fmt, firstDayOfWeek) {
|
|
503
|
+
return Array.from({ length: 7 }, (_, i) => fmt(new Date(2023, 0, 1 + (firstDayOfWeek + i) % 7)));
|
|
348
504
|
}
|
|
349
|
-
function Calendar({
|
|
505
|
+
function Calendar({
|
|
506
|
+
value,
|
|
507
|
+
defaultValue,
|
|
508
|
+
min,
|
|
509
|
+
max,
|
|
510
|
+
months = 1,
|
|
511
|
+
pageBy = "months",
|
|
512
|
+
firstDayOfWeek = 1,
|
|
513
|
+
locale,
|
|
514
|
+
isDateDisallowed,
|
|
515
|
+
formatWeekday,
|
|
516
|
+
formatMonth,
|
|
517
|
+
formatDay,
|
|
518
|
+
labels,
|
|
519
|
+
onChange,
|
|
520
|
+
className,
|
|
521
|
+
...rest
|
|
522
|
+
}) {
|
|
350
523
|
const today = /* @__PURE__ */ new Date();
|
|
351
524
|
const controlled = value !== void 0;
|
|
352
525
|
const [internal, setInternal] = (0, import_react2.useState)(defaultValue);
|
|
353
526
|
const selected = controlled ? value : internal;
|
|
354
|
-
const
|
|
355
|
-
const [
|
|
356
|
-
const [
|
|
357
|
-
const
|
|
358
|
-
const
|
|
359
|
-
const
|
|
360
|
-
const
|
|
361
|
-
|
|
527
|
+
const base = selected ?? today;
|
|
528
|
+
const [viewYear, setViewYear] = (0, import_react2.useState)(base.getFullYear());
|
|
529
|
+
const [viewMonth, setViewMonth] = (0, import_react2.useState)(base.getMonth());
|
|
530
|
+
const [focusedIso, setFocusedIso] = (0, import_react2.useState)();
|
|
531
|
+
const headingBaseId = (0, import_react2.useId)();
|
|
532
|
+
const dayRefs = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
|
|
533
|
+
const registerRef = (0, import_react2.useCallback)((iso, el) => {
|
|
534
|
+
if (el) dayRefs.current.set(iso, el);
|
|
535
|
+
else dayRefs.current.delete(iso);
|
|
536
|
+
}, []);
|
|
537
|
+
(0, import_react2.useEffect)(() => {
|
|
538
|
+
if (!controlled || !value) return;
|
|
539
|
+
if (!isMonthVisible(value, viewYear, viewMonth, months)) {
|
|
540
|
+
setViewYear(value.getFullYear());
|
|
541
|
+
setViewMonth(value.getMonth());
|
|
542
|
+
}
|
|
543
|
+
}, [controlled, value]);
|
|
544
|
+
(0, import_react2.useEffect)(() => {
|
|
545
|
+
if (focusedIso) dayRefs.current.get(focusedIso)?.focus();
|
|
546
|
+
}, [focusedIso, viewYear, viewMonth]);
|
|
547
|
+
const disabledFor = (date) => isDisabled(date, { min, max, isDateDisallowed });
|
|
548
|
+
const page = (dir) => {
|
|
549
|
+
const step = pageBy === "single" ? 1 : months;
|
|
550
|
+
const d = new Date(viewYear, viewMonth + dir * step, 1);
|
|
362
551
|
setViewYear(d.getFullYear());
|
|
363
552
|
setViewMonth(d.getMonth());
|
|
364
|
-
|
|
553
|
+
setFocusedIso(void 0);
|
|
365
554
|
};
|
|
366
|
-
const
|
|
367
|
-
|
|
368
|
-
if (isOutOfRange(date, min, max)) return;
|
|
555
|
+
const select = (date) => {
|
|
556
|
+
if (disabledFor(date)) return;
|
|
369
557
|
if (!controlled) setInternal(date);
|
|
370
558
|
onChange?.(date);
|
|
371
559
|
};
|
|
372
|
-
const
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
const current = new Date(viewYear, viewMonth, day);
|
|
382
|
-
const next = new Date(current);
|
|
383
|
-
next.setDate(next.getDate() + map[e.key]);
|
|
384
|
-
setViewYear(next.getFullYear());
|
|
385
|
-
setViewMonth(next.getMonth());
|
|
386
|
-
setFocusedDay(next.getDate());
|
|
387
|
-
} else if (e.key === "Home") {
|
|
388
|
-
e.preventDefault();
|
|
389
|
-
setFocusedDay(1);
|
|
390
|
-
} else if (e.key === "End") {
|
|
391
|
-
e.preventDefault();
|
|
392
|
-
setFocusedDay(daysInMonth);
|
|
393
|
-
} else if (e.key === "Enter" || e.key === " ") {
|
|
560
|
+
const moveFocus = (target) => {
|
|
561
|
+
setFocusedIso(toISO(target));
|
|
562
|
+
if (!isMonthVisible(target, viewYear, viewMonth, months)) {
|
|
563
|
+
setViewYear(target.getFullYear());
|
|
564
|
+
setViewMonth(target.getMonth());
|
|
565
|
+
}
|
|
566
|
+
};
|
|
567
|
+
const onKeyDown = (e, date) => {
|
|
568
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
394
569
|
e.preventDefault();
|
|
395
|
-
|
|
570
|
+
select(date);
|
|
571
|
+
return;
|
|
396
572
|
}
|
|
573
|
+
const next = nextFocusDate(date, e.key, { shiftKey: e.shiftKey, firstDayOfWeek });
|
|
574
|
+
if (!next) return;
|
|
575
|
+
e.preventDefault();
|
|
576
|
+
moveFocus(next);
|
|
397
577
|
};
|
|
398
|
-
const
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
className: Calendar_default.navBtn,
|
|
425
|
-
"aria-label": "Next month",
|
|
426
|
-
onClick: () => navigate(1),
|
|
427
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
|
|
428
|
-
}
|
|
429
|
-
)
|
|
430
|
-
] }),
|
|
431
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
432
|
-
"table",
|
|
578
|
+
const selectedVisible = selected && isMonthVisible(selected, viewYear, viewMonth, months) ? selected : void 0;
|
|
579
|
+
const todayVisible = isMonthVisible(today, viewYear, viewMonth, months) ? today : void 0;
|
|
580
|
+
const tabbableIso = focusedIso ?? (selectedVisible && toISO(selectedVisible)) ?? (todayVisible && toISO(todayVisible)) ?? toISO(new Date(viewYear, viewMonth, 1));
|
|
581
|
+
const classifyDay = (date) => ({
|
|
582
|
+
today: isSameDay(date, today),
|
|
583
|
+
selected: !!selected && isSameDay(date, selected),
|
|
584
|
+
rangeStart: false,
|
|
585
|
+
rangeEnd: false,
|
|
586
|
+
inRange: false,
|
|
587
|
+
disabled: disabledFor(date),
|
|
588
|
+
tabbable: toISO(date) === tabbableIso
|
|
589
|
+
});
|
|
590
|
+
const weekdayNames = formatWeekday ? weekdayNamesFrom(formatWeekday, firstDayOfWeek) : getWeekdayNames(locale, firstDayOfWeek);
|
|
591
|
+
const labelOfMonth = (y, m) => formatMonth ? formatMonth(new Date(y, m, 1)) : getMonthLabel(y, m, locale);
|
|
592
|
+
const labelOfDay = (d) => formatDay ? formatDay(d) : getDayLabel(d, locale);
|
|
593
|
+
const prevLabel = labels?.previousMonth ?? "Previous month";
|
|
594
|
+
const nextLabel = labels?.nextMonth ?? "Next month";
|
|
595
|
+
const count = Math.max(1, months);
|
|
596
|
+
const groupLabel = Array.from({ length: count }, (_, i) => {
|
|
597
|
+
const d = new Date(viewYear, viewMonth + i, 1);
|
|
598
|
+
return labelOfMonth(d.getFullYear(), d.getMonth());
|
|
599
|
+
}).join(", ");
|
|
600
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ...rest, className: (0, import_design_system_foundation8.cn)(Calendar_default.calendar, className), role: "group", "aria-label": groupLabel, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: Calendar_default.months, children: Array.from({ length: count }, (_, i) => {
|
|
601
|
+
const d = new Date(viewYear, viewMonth + i, 1);
|
|
602
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
603
|
+
MonthGrid,
|
|
433
604
|
{
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
605
|
+
year: d.getFullYear(),
|
|
606
|
+
month: d.getMonth(),
|
|
607
|
+
firstDayOfWeek,
|
|
608
|
+
weekdayNames,
|
|
609
|
+
monthLabel: labelOfMonth(d.getFullYear(), d.getMonth()),
|
|
610
|
+
headingId: `${headingBaseId}-${i}`,
|
|
611
|
+
showPrev: i === 0,
|
|
612
|
+
showNext: i === count - 1,
|
|
613
|
+
onPrev: () => page(-1),
|
|
614
|
+
onNext: () => page(1),
|
|
615
|
+
prevLabel,
|
|
616
|
+
nextLabel,
|
|
617
|
+
classifyDay,
|
|
618
|
+
formatDay: labelOfDay,
|
|
619
|
+
registerRef,
|
|
620
|
+
onSelect: select,
|
|
621
|
+
onKeyDown
|
|
622
|
+
},
|
|
623
|
+
i
|
|
624
|
+
);
|
|
625
|
+
}) }) });
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
// src/components/ui/Calendar/CalendarRange.tsx
|
|
629
|
+
var import_react3 = require("react");
|
|
630
|
+
var import_design_system_foundation9 = require("@boostdev/design-system-foundation");
|
|
631
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
632
|
+
function isMonthVisible2(date, viewYear, viewMonth, months) {
|
|
633
|
+
const start = viewYear * 12 + viewMonth;
|
|
634
|
+
const idx = date.getFullYear() * 12 + date.getMonth();
|
|
635
|
+
return idx >= start && idx < start + months;
|
|
636
|
+
}
|
|
637
|
+
function weekdayNamesFrom2(fmt, firstDayOfWeek) {
|
|
638
|
+
return Array.from({ length: 7 }, (_, i) => fmt(new Date(2023, 0, 1 + (firstDayOfWeek + i) % 7)));
|
|
639
|
+
}
|
|
640
|
+
function CalendarRange({
|
|
641
|
+
value,
|
|
642
|
+
defaultValue,
|
|
643
|
+
min,
|
|
644
|
+
max,
|
|
645
|
+
months = 1,
|
|
646
|
+
pageBy = "months",
|
|
647
|
+
firstDayOfWeek = 1,
|
|
648
|
+
locale,
|
|
649
|
+
isDateDisallowed,
|
|
650
|
+
formatWeekday,
|
|
651
|
+
formatMonth,
|
|
652
|
+
formatDay,
|
|
653
|
+
labels,
|
|
654
|
+
onChange,
|
|
655
|
+
onRangeStart,
|
|
656
|
+
className,
|
|
657
|
+
...rest
|
|
658
|
+
}) {
|
|
659
|
+
const today = /* @__PURE__ */ new Date();
|
|
660
|
+
const controlled = value !== void 0;
|
|
661
|
+
const [internal, setInternal] = (0, import_react3.useState)(defaultValue);
|
|
662
|
+
const committed = controlled ? value : internal;
|
|
663
|
+
const [anchor, setAnchor] = (0, import_react3.useState)();
|
|
664
|
+
const [hover, setHover] = (0, import_react3.useState)();
|
|
665
|
+
const base = committed ? committed[0] : today;
|
|
666
|
+
const [viewYear, setViewYear] = (0, import_react3.useState)(base.getFullYear());
|
|
667
|
+
const [viewMonth, setViewMonth] = (0, import_react3.useState)(base.getMonth());
|
|
668
|
+
const [focusedIso, setFocusedIso] = (0, import_react3.useState)();
|
|
669
|
+
const headingBaseId = (0, import_react3.useId)();
|
|
670
|
+
const dayRefs = (0, import_react3.useRef)(/* @__PURE__ */ new Map());
|
|
671
|
+
const registerRef = (0, import_react3.useCallback)((iso, el) => {
|
|
672
|
+
if (el) dayRefs.current.set(iso, el);
|
|
673
|
+
else dayRefs.current.delete(iso);
|
|
674
|
+
}, []);
|
|
675
|
+
(0, import_react3.useEffect)(() => {
|
|
676
|
+
if (!controlled || !value) return;
|
|
677
|
+
if (!isMonthVisible2(value[0], viewYear, viewMonth, months)) {
|
|
678
|
+
setViewYear(value[0].getFullYear());
|
|
679
|
+
setViewMonth(value[0].getMonth());
|
|
680
|
+
}
|
|
681
|
+
}, [controlled, value]);
|
|
682
|
+
(0, import_react3.useEffect)(() => {
|
|
683
|
+
if (focusedIso) dayRefs.current.get(focusedIso)?.focus();
|
|
684
|
+
}, [focusedIso, viewYear, viewMonth]);
|
|
685
|
+
const disabledFor = (date) => isDisabled(date, { min, max, isDateDisallowed });
|
|
686
|
+
const page = (dir) => {
|
|
687
|
+
const step = pageBy === "single" ? 1 : months;
|
|
688
|
+
const d = new Date(viewYear, viewMonth + dir * step, 1);
|
|
689
|
+
setViewYear(d.getFullYear());
|
|
690
|
+
setViewMonth(d.getMonth());
|
|
691
|
+
setFocusedIso(void 0);
|
|
692
|
+
};
|
|
693
|
+
const select = (date) => {
|
|
694
|
+
if (disabledFor(date)) return;
|
|
695
|
+
if (!anchor) {
|
|
696
|
+
setAnchor(date);
|
|
697
|
+
setHover(void 0);
|
|
698
|
+
onRangeStart?.(date);
|
|
699
|
+
} else {
|
|
700
|
+
const pair = sortRange(anchor, date);
|
|
701
|
+
if (!controlled) setInternal(pair);
|
|
702
|
+
onChange?.(pair);
|
|
703
|
+
setAnchor(void 0);
|
|
704
|
+
setHover(void 0);
|
|
705
|
+
}
|
|
706
|
+
};
|
|
707
|
+
const moveFocus = (target) => {
|
|
708
|
+
setFocusedIso(toISO(target));
|
|
709
|
+
if (!isMonthVisible2(target, viewYear, viewMonth, months)) {
|
|
710
|
+
setViewYear(target.getFullYear());
|
|
711
|
+
setViewMonth(target.getMonth());
|
|
712
|
+
}
|
|
713
|
+
};
|
|
714
|
+
const onKeyDown = (e, date) => {
|
|
715
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
716
|
+
e.preventDefault();
|
|
717
|
+
select(date);
|
|
718
|
+
return;
|
|
719
|
+
}
|
|
720
|
+
if (e.key === "Escape") {
|
|
721
|
+
if (anchor) {
|
|
722
|
+
setAnchor(void 0);
|
|
723
|
+
setHover(void 0);
|
|
469
724
|
}
|
|
470
|
-
|
|
471
|
-
|
|
725
|
+
return;
|
|
726
|
+
}
|
|
727
|
+
const next = nextFocusDate(date, e.key, { shiftKey: e.shiftKey, firstDayOfWeek });
|
|
728
|
+
if (!next) return;
|
|
729
|
+
e.preventDefault();
|
|
730
|
+
moveFocus(next);
|
|
731
|
+
};
|
|
732
|
+
let paintStart;
|
|
733
|
+
let paintEnd;
|
|
734
|
+
if (anchor) {
|
|
735
|
+
const previewEnd = hover ?? (focusedIso ? parseISO(focusedIso) ?? anchor : anchor);
|
|
736
|
+
[paintStart, paintEnd] = sortRange(anchor, previewEnd);
|
|
737
|
+
} else if (committed) {
|
|
738
|
+
[paintStart, paintEnd] = sortRange(committed[0], committed[1]);
|
|
739
|
+
}
|
|
740
|
+
const anchorVisible = anchor && isMonthVisible2(anchor, viewYear, viewMonth, months) ? anchor : void 0;
|
|
741
|
+
const committedStartVisible = committed && isMonthVisible2(committed[0], viewYear, viewMonth, months) ? committed[0] : void 0;
|
|
742
|
+
const todayVisible = isMonthVisible2(today, viewYear, viewMonth, months) ? today : void 0;
|
|
743
|
+
const tabbableIso = focusedIso ?? (anchorVisible && toISO(anchorVisible)) ?? (committedStartVisible && toISO(committedStartVisible)) ?? (todayVisible && toISO(todayVisible)) ?? toISO(new Date(viewYear, viewMonth, 1));
|
|
744
|
+
const classifyDay = (date) => {
|
|
745
|
+
const isStart = !!paintStart && isSameDay(date, paintStart);
|
|
746
|
+
const isEnd = !!paintEnd && isSameDay(date, paintEnd);
|
|
747
|
+
const inRange = !!paintStart && !!paintEnd && !isStart && !isEnd && isInRange(date, paintStart, paintEnd);
|
|
748
|
+
return {
|
|
749
|
+
today: isSameDay(date, today),
|
|
750
|
+
selected: false,
|
|
751
|
+
rangeStart: isStart,
|
|
752
|
+
rangeEnd: isEnd,
|
|
753
|
+
inRange,
|
|
754
|
+
disabled: disabledFor(date),
|
|
755
|
+
tabbable: toISO(date) === tabbableIso
|
|
756
|
+
};
|
|
757
|
+
};
|
|
758
|
+
const weekdayNames = formatWeekday ? weekdayNamesFrom2(formatWeekday, firstDayOfWeek) : getWeekdayNames(locale, firstDayOfWeek);
|
|
759
|
+
const labelOfMonth = (y, m) => formatMonth ? formatMonth(new Date(y, m, 1)) : getMonthLabel(y, m, locale);
|
|
760
|
+
const labelOfDay = (d) => formatDay ? formatDay(d) : getDayLabel(d, locale);
|
|
761
|
+
const prevLabel = labels?.previousMonth ?? "Previous month";
|
|
762
|
+
const nextLabel = labels?.nextMonth ?? "Next month";
|
|
763
|
+
const count = Math.max(1, months);
|
|
764
|
+
const groupLabel = Array.from({ length: count }, (_, i) => {
|
|
765
|
+
const d = new Date(viewYear, viewMonth + i, 1);
|
|
766
|
+
return labelOfMonth(d.getFullYear(), d.getMonth());
|
|
767
|
+
}).join(", ");
|
|
768
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ...rest, className: (0, import_design_system_foundation9.cn)(Calendar_default.calendar, className), role: "group", "aria-label": groupLabel, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: Calendar_default.months, children: Array.from({ length: count }, (_, i) => {
|
|
769
|
+
const d = new Date(viewYear, viewMonth + i, 1);
|
|
770
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
771
|
+
MonthGrid,
|
|
772
|
+
{
|
|
773
|
+
year: d.getFullYear(),
|
|
774
|
+
month: d.getMonth(),
|
|
775
|
+
firstDayOfWeek,
|
|
776
|
+
weekdayNames,
|
|
777
|
+
monthLabel: labelOfMonth(d.getFullYear(), d.getMonth()),
|
|
778
|
+
headingId: `${headingBaseId}-${i}`,
|
|
779
|
+
showPrev: i === 0,
|
|
780
|
+
showNext: i === count - 1,
|
|
781
|
+
onPrev: () => page(-1),
|
|
782
|
+
onNext: () => page(1),
|
|
783
|
+
prevLabel,
|
|
784
|
+
nextLabel,
|
|
785
|
+
classifyDay,
|
|
786
|
+
formatDay: labelOfDay,
|
|
787
|
+
registerRef,
|
|
788
|
+
onSelect: select,
|
|
789
|
+
onKeyDown,
|
|
790
|
+
onDayPointerEnter: anchor ? ((date) => setHover(date)) : void 0
|
|
791
|
+
},
|
|
792
|
+
i
|
|
793
|
+
);
|
|
794
|
+
}) }) });
|
|
472
795
|
}
|
|
473
796
|
|
|
474
797
|
// src/components/ui/Carousel/Carousel.tsx
|
|
475
|
-
var
|
|
798
|
+
var import_react4 = require("react");
|
|
476
799
|
|
|
477
800
|
// src/components/ui/Carousel/Carousel.module.css
|
|
478
|
-
var Carousel_default = {"component":"
|
|
801
|
+
var Carousel_default = {"component":"bds2110Carousel-component","carousel":"bds2110Carousel-carousel","track":"bds2110Carousel-track","slide":"bds2110Carousel-slide","navBtn":"bds2110Carousel-navBtn"};
|
|
479
802
|
|
|
480
803
|
// src/components/ui/Carousel/Carousel.tsx
|
|
481
|
-
var
|
|
482
|
-
var
|
|
804
|
+
var import_design_system_foundation10 = require("@boostdev/design-system-foundation");
|
|
805
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
806
|
+
function prefersReducedMotion() {
|
|
807
|
+
return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
808
|
+
}
|
|
483
809
|
function Carousel({ items, label, className, ...rest }) {
|
|
484
|
-
const trackRef = (0,
|
|
485
|
-
const listId = (0,
|
|
810
|
+
const trackRef = (0, import_react4.useRef)(null);
|
|
811
|
+
const listId = (0, import_react4.useId)();
|
|
486
812
|
const scroll = (direction) => {
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
813
|
+
const track = trackRef.current;
|
|
814
|
+
if (!track) return;
|
|
815
|
+
const isRtl = window.getComputedStyle(track).direction === "rtl";
|
|
816
|
+
const sign = direction === "next" ? 1 : -1;
|
|
817
|
+
track.scrollBy({
|
|
818
|
+
left: (isRtl ? -sign : sign) * track.clientWidth,
|
|
819
|
+
behavior: prefersReducedMotion() ? "auto" : "smooth"
|
|
492
820
|
});
|
|
493
821
|
};
|
|
494
|
-
return /* @__PURE__ */ (0,
|
|
495
|
-
/* @__PURE__ */ (0,
|
|
822
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { ...rest, "aria-label": label, className: (0, import_design_system_foundation10.cn)(Carousel_default.carousel, className), children: [
|
|
823
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
496
824
|
"button",
|
|
497
825
|
{
|
|
498
826
|
type: "button",
|
|
499
|
-
className:
|
|
827
|
+
className: Carousel_default.navBtn,
|
|
500
828
|
"aria-label": "Previous",
|
|
501
829
|
"aria-controls": listId,
|
|
502
830
|
onClick: () => scroll("prev"),
|
|
503
|
-
children: /* @__PURE__ */ (0,
|
|
831
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
|
|
504
832
|
}
|
|
505
833
|
),
|
|
506
|
-
/* @__PURE__ */ (0,
|
|
834
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
507
835
|
"div",
|
|
508
836
|
{
|
|
509
837
|
ref: trackRef,
|
|
510
838
|
id: listId,
|
|
511
839
|
role: "list",
|
|
512
840
|
className: Carousel_default.track,
|
|
513
|
-
children: items.map((item, i) => /* @__PURE__ */ (0,
|
|
841
|
+
children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { role: "listitem", className: Carousel_default.slide, children: item }, i))
|
|
514
842
|
}
|
|
515
843
|
),
|
|
516
|
-
/* @__PURE__ */ (0,
|
|
844
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
517
845
|
"button",
|
|
518
846
|
{
|
|
519
847
|
type: "button",
|
|
520
|
-
className:
|
|
848
|
+
className: Carousel_default.navBtn,
|
|
521
849
|
"aria-label": "Next",
|
|
522
850
|
"aria-controls": listId,
|
|
523
851
|
onClick: () => scroll("next"),
|
|
524
|
-
children: /* @__PURE__ */ (0,
|
|
852
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
|
|
525
853
|
}
|
|
526
854
|
)
|
|
527
855
|
] });
|
|
528
856
|
}
|
|
529
857
|
|
|
530
858
|
// src/components/ui/DescriptionList/DescriptionList.module.css
|
|
531
|
-
var DescriptionList_default = {"component":"
|
|
859
|
+
var DescriptionList_default = {"component":"bds2110DescriptionList-component","list":"bds2110DescriptionList-list","group":"bds2110DescriptionList-group","term":"bds2110DescriptionList-term","details":"bds2110DescriptionList-details","--layout_inline":"bds2110DescriptionList---layout_inline"};
|
|
532
860
|
|
|
533
861
|
// src/components/ui/DescriptionList/DescriptionList.tsx
|
|
534
|
-
var
|
|
535
|
-
var
|
|
862
|
+
var import_design_system_foundation11 = require("@boostdev/design-system-foundation");
|
|
863
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
536
864
|
function DescriptionList({ items, layout = "stacked", className, ...rest }) {
|
|
537
|
-
return /* @__PURE__ */ (0,
|
|
538
|
-
/* @__PURE__ */ (0,
|
|
539
|
-
Array.isArray(item.details) ? item.details.map((d, j) => /* @__PURE__ */ (0,
|
|
865
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("dl", { ...rest, className: (0, import_design_system_foundation11.cn)(DescriptionList_default.list, DescriptionList_default[`--layout_${layout}`], className), children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: DescriptionList_default.group, children: [
|
|
866
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("dt", { className: DescriptionList_default.term, children: item.term }),
|
|
867
|
+
Array.isArray(item.details) ? item.details.map((d, j) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("dd", { className: DescriptionList_default.details, children: d }, j)) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("dd", { className: DescriptionList_default.details, children: item.details })
|
|
540
868
|
] }, i)) });
|
|
541
869
|
}
|
|
542
870
|
|
|
543
871
|
// src/components/ui/Link/Link.module.css
|
|
544
|
-
var Link_default = {"component":"
|
|
872
|
+
var Link_default = {"component":"bds2110Link-component","link":"bds2110Link-link","--variant_default":"bds2110Link---variant_default","--variant_subtle":"bds2110Link---variant_subtle","--variant_standalone":"bds2110Link---variant_standalone","externalLabel":"bds2110Link-externalLabel"};
|
|
545
873
|
|
|
546
874
|
// src/components/ui/Link/Link.tsx
|
|
547
|
-
var
|
|
548
|
-
var
|
|
875
|
+
var import_design_system_foundation12 = require("@boostdev/design-system-foundation");
|
|
876
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
549
877
|
function Link({
|
|
550
878
|
as,
|
|
551
879
|
children,
|
|
@@ -557,36 +885,45 @@ function Link({
|
|
|
557
885
|
}) {
|
|
558
886
|
const Component = as ?? "a";
|
|
559
887
|
const externalProps = external ? { target: "_blank", rel: "noreferrer noopener" } : {};
|
|
560
|
-
return /* @__PURE__ */ (0,
|
|
888
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
561
889
|
Component,
|
|
562
890
|
{
|
|
563
|
-
className: (0,
|
|
891
|
+
className: (0, import_design_system_foundation12.cn)(Link_default.link, Link_default[`--variant_${variant}`], className),
|
|
564
892
|
...externalProps,
|
|
565
893
|
...props,
|
|
566
894
|
children: [
|
|
567
895
|
children,
|
|
568
|
-
external && /* @__PURE__ */ (0,
|
|
896
|
+
external && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: Link_default.externalLabel, children: externalLabel })
|
|
569
897
|
]
|
|
570
898
|
}
|
|
571
899
|
);
|
|
572
900
|
}
|
|
573
901
|
|
|
574
902
|
// src/components/ui/Loading/Loading.module.css
|
|
575
|
-
var Loading_default = {"component":"
|
|
903
|
+
var Loading_default = {"component":"bds2110Loading-component","loading":"bds2110Loading-loading","spinner":"bds2110Loading-spinner","--size_small":"bds2110Loading---size_small","--size_large":"bds2110Loading---size_large"};
|
|
576
904
|
|
|
577
905
|
// src/components/ui/Loading/Loading.tsx
|
|
578
|
-
var
|
|
579
|
-
var
|
|
580
|
-
function Loading({ size = "medium", className, ...rest }) {
|
|
581
|
-
return /* @__PURE__ */ (0,
|
|
906
|
+
var import_design_system_foundation13 = require("@boostdev/design-system-foundation");
|
|
907
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
908
|
+
function Loading({ size = "medium", className, "aria-label": ariaLabel, ...rest }) {
|
|
909
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
910
|
+
"div",
|
|
911
|
+
{
|
|
912
|
+
role: "status",
|
|
913
|
+
"aria-label": ariaLabel ?? "Loading",
|
|
914
|
+
...rest,
|
|
915
|
+
className: (0, import_design_system_foundation13.cn)(Loading_default.loading, Loading_default[`--size_${size}`], className),
|
|
916
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: Loading_default.spinner })
|
|
917
|
+
}
|
|
918
|
+
);
|
|
582
919
|
}
|
|
583
920
|
|
|
584
921
|
// src/components/ui/NotificationBanner/NotificationBanner.module.css
|
|
585
|
-
var NotificationBanner_default = {"component":"
|
|
922
|
+
var NotificationBanner_default = {"component":"bds2110NotificationBanner-component","banner":"bds2110NotificationBanner-banner","--variant_info":"bds2110NotificationBanner---variant_info","--variant_success":"bds2110NotificationBanner---variant_success","--variant_warning":"bds2110NotificationBanner---variant_warning","--variant_error":"bds2110NotificationBanner---variant_error","content":"bds2110NotificationBanner-content","action":"bds2110NotificationBanner-action","dismiss":"bds2110NotificationBanner-dismiss"};
|
|
586
923
|
|
|
587
924
|
// src/components/ui/NotificationBanner/NotificationBanner.tsx
|
|
588
|
-
var
|
|
589
|
-
var
|
|
925
|
+
var import_design_system_foundation14 = require("@boostdev/design-system-foundation");
|
|
926
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
590
927
|
function NotificationBanner({
|
|
591
928
|
variant = "info",
|
|
592
929
|
children,
|
|
@@ -596,25 +933,25 @@ function NotificationBanner({
|
|
|
596
933
|
...rest
|
|
597
934
|
}) {
|
|
598
935
|
const isUrgent = variant === "error" || variant === "warning";
|
|
599
|
-
return /* @__PURE__ */ (0,
|
|
936
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
600
937
|
"div",
|
|
601
938
|
{
|
|
602
939
|
...rest,
|
|
603
940
|
role: isUrgent ? "alert" : "status",
|
|
604
941
|
"aria-live": isUrgent ? "assertive" : "polite",
|
|
605
942
|
"aria-atomic": "true",
|
|
606
|
-
className: (0,
|
|
943
|
+
className: (0, import_design_system_foundation14.cn)(NotificationBanner_default.banner, NotificationBanner_default[`--variant_${variant}`], className),
|
|
607
944
|
children: [
|
|
608
|
-
/* @__PURE__ */ (0,
|
|
609
|
-
action && /* @__PURE__ */ (0,
|
|
610
|
-
onDismiss && /* @__PURE__ */ (0,
|
|
945
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: NotificationBanner_default.content, children }),
|
|
946
|
+
action && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: NotificationBanner_default.action, children: action }),
|
|
947
|
+
onDismiss && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
611
948
|
"button",
|
|
612
949
|
{
|
|
613
950
|
type: "button",
|
|
614
951
|
className: NotificationBanner_default.dismiss,
|
|
615
952
|
onClick: onDismiss,
|
|
616
953
|
"aria-label": "Dismiss notification",
|
|
617
|
-
children: /* @__PURE__ */ (0,
|
|
954
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
|
|
618
955
|
}
|
|
619
956
|
)
|
|
620
957
|
]
|
|
@@ -623,11 +960,11 @@ function NotificationBanner({
|
|
|
623
960
|
}
|
|
624
961
|
|
|
625
962
|
// src/components/ui/Pagination/Pagination.module.css
|
|
626
|
-
var Pagination_default = {"component":"
|
|
963
|
+
var Pagination_default = {"component":"bds2110Pagination-component","pagination":"bds2110Pagination-pagination","list":"bds2110Pagination-list","button":"bds2110Pagination-button","--active":"bds2110Pagination---active","--nav":"bds2110Pagination---nav","ellipsis":"bds2110Pagination-ellipsis"};
|
|
627
964
|
|
|
628
965
|
// src/components/ui/Pagination/Pagination.tsx
|
|
629
|
-
var
|
|
630
|
-
var
|
|
966
|
+
var import_design_system_foundation15 = require("@boostdev/design-system-foundation");
|
|
967
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
631
968
|
function getPageRange(current, total) {
|
|
632
969
|
const delta = 1;
|
|
633
970
|
const range = [];
|
|
@@ -648,24 +985,24 @@ function Pagination({
|
|
|
648
985
|
...rest
|
|
649
986
|
}) {
|
|
650
987
|
const pages = getPageRange(currentPage, totalPages);
|
|
651
|
-
return /* @__PURE__ */ (0,
|
|
652
|
-
/* @__PURE__ */ (0,
|
|
988
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("nav", { ...rest, "aria-label": "Pagination", className: (0, import_design_system_foundation15.cn)(Pagination_default.pagination, className), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("ul", { className: Pagination_default.list, children: [
|
|
989
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
653
990
|
"button",
|
|
654
991
|
{
|
|
655
992
|
type: "button",
|
|
656
|
-
className: (0,
|
|
993
|
+
className: (0, import_design_system_foundation15.cn)(Pagination_default.button, Pagination_default["--nav"]),
|
|
657
994
|
onClick: () => onPageChange(currentPage - 1),
|
|
658
995
|
disabled: currentPage <= 1,
|
|
659
996
|
"aria-label": "Previous page",
|
|
660
|
-
children: /* @__PURE__ */ (0,
|
|
997
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
|
|
661
998
|
}
|
|
662
999
|
) }),
|
|
663
1000
|
pages.map(
|
|
664
|
-
(page, index) => page === "..." ? /* @__PURE__ */ (0,
|
|
1001
|
+
(page, index) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: Pagination_default.ellipsis, "aria-hidden": "true", children: "\u2026" }) }, `ellipsis-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
665
1002
|
"button",
|
|
666
1003
|
{
|
|
667
1004
|
type: "button",
|
|
668
|
-
className: (0,
|
|
1005
|
+
className: (0, import_design_system_foundation15.cn)(Pagination_default.button, currentPage === page ? Pagination_default["--active"] : void 0),
|
|
669
1006
|
onClick: () => onPageChange(page),
|
|
670
1007
|
"aria-label": `Page ${page}`,
|
|
671
1008
|
"aria-current": currentPage === page ? "page" : void 0,
|
|
@@ -673,26 +1010,26 @@ function Pagination({
|
|
|
673
1010
|
}
|
|
674
1011
|
) }, page)
|
|
675
1012
|
),
|
|
676
|
-
/* @__PURE__ */ (0,
|
|
1013
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
677
1014
|
"button",
|
|
678
1015
|
{
|
|
679
1016
|
type: "button",
|
|
680
|
-
className: (0,
|
|
1017
|
+
className: (0, import_design_system_foundation15.cn)(Pagination_default.button, Pagination_default["--nav"]),
|
|
681
1018
|
onClick: () => onPageChange(currentPage + 1),
|
|
682
1019
|
disabled: currentPage >= totalPages,
|
|
683
1020
|
"aria-label": "Next page",
|
|
684
|
-
children: /* @__PURE__ */ (0,
|
|
1021
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
|
|
685
1022
|
}
|
|
686
1023
|
) })
|
|
687
1024
|
] }) });
|
|
688
1025
|
}
|
|
689
1026
|
|
|
690
1027
|
// src/components/ui/Progress/Progress.module.css
|
|
691
|
-
var Progress_default = {"component":"
|
|
1028
|
+
var Progress_default = {"component":"bds2110Progress-component","container":"bds2110Progress-container","labelRow":"bds2110Progress-labelRow","value":"bds2110Progress-value","track":"bds2110Progress-track","--size_small":"bds2110Progress---size_small","--size_medium":"bds2110Progress---size_medium","--size_large":"bds2110Progress---size_large","fill":"bds2110Progress-fill"};
|
|
692
1029
|
|
|
693
1030
|
// src/components/ui/Progress/Progress.tsx
|
|
694
|
-
var
|
|
695
|
-
var
|
|
1031
|
+
var import_design_system_foundation16 = require("@boostdev/design-system-foundation");
|
|
1032
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
696
1033
|
function Progress({
|
|
697
1034
|
value,
|
|
698
1035
|
max = 100,
|
|
@@ -703,35 +1040,35 @@ function Progress({
|
|
|
703
1040
|
...rest
|
|
704
1041
|
}) {
|
|
705
1042
|
const percentage = Math.min(100, Math.max(0, value / max * 100));
|
|
706
|
-
return /* @__PURE__ */ (0,
|
|
707
|
-
showLabel && /* @__PURE__ */ (0,
|
|
708
|
-
/* @__PURE__ */ (0,
|
|
709
|
-
/* @__PURE__ */ (0,
|
|
1043
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { ...rest, className: (0, import_design_system_foundation16.cn)(Progress_default.container, className), children: [
|
|
1044
|
+
showLabel && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: Progress_default.labelRow, children: [
|
|
1045
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: Progress_default.label, children: label }),
|
|
1046
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: Progress_default.value, children: [
|
|
710
1047
|
Math.round(percentage),
|
|
711
1048
|
"%"
|
|
712
1049
|
] })
|
|
713
1050
|
] }),
|
|
714
|
-
/* @__PURE__ */ (0,
|
|
1051
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
715
1052
|
"div",
|
|
716
1053
|
{
|
|
717
1054
|
role: "progressbar",
|
|
718
1055
|
"aria-label": label,
|
|
719
|
-
"aria-valuenow": value,
|
|
1056
|
+
"aria-valuenow": Math.min(max, Math.max(0, value)),
|
|
720
1057
|
"aria-valuemin": 0,
|
|
721
1058
|
"aria-valuemax": max,
|
|
722
|
-
className: (0,
|
|
723
|
-
children: /* @__PURE__ */ (0,
|
|
1059
|
+
className: (0, import_design_system_foundation16.cn)(Progress_default.track, Progress_default[`--size_${size}`]),
|
|
1060
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: Progress_default.fill, style: { inlineSize: `${percentage}%` } })
|
|
724
1061
|
}
|
|
725
1062
|
)
|
|
726
1063
|
] });
|
|
727
1064
|
}
|
|
728
1065
|
|
|
729
1066
|
// src/components/ui/ProgressCircle/ProgressCircle.module.css
|
|
730
|
-
var ProgressCircle_default = {"component":"
|
|
1067
|
+
var ProgressCircle_default = {"component":"bds2110ProgressCircle-component","wrapper":"bds2110ProgressCircle-wrapper","svg":"bds2110ProgressCircle-svg","track":"bds2110ProgressCircle-track","fill":"bds2110ProgressCircle-fill","value":"bds2110ProgressCircle-value","--size_small":"bds2110ProgressCircle---size_small","--size_medium":"bds2110ProgressCircle---size_medium","--size_large":"bds2110ProgressCircle---size_large"};
|
|
731
1068
|
|
|
732
1069
|
// src/components/ui/ProgressCircle/ProgressCircle.tsx
|
|
733
|
-
var
|
|
734
|
-
var
|
|
1070
|
+
var import_design_system_foundation17 = require("@boostdev/design-system-foundation");
|
|
1071
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
735
1072
|
var SIZE_PX = { small: 40, medium: 64, large: 96 };
|
|
736
1073
|
var STROKE_WIDTH = 4;
|
|
737
1074
|
function ProgressCircle({
|
|
@@ -749,18 +1086,18 @@ function ProgressCircle({
|
|
|
749
1086
|
const circumference = 2 * Math.PI * radius;
|
|
750
1087
|
const offset = circumference - percentage / 100 * circumference;
|
|
751
1088
|
const cx = px / 2;
|
|
752
|
-
return /* @__PURE__ */ (0,
|
|
1089
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
753
1090
|
"div",
|
|
754
1091
|
{
|
|
755
1092
|
...rest,
|
|
756
1093
|
role: "progressbar",
|
|
757
1094
|
"aria-label": label,
|
|
758
|
-
"aria-valuenow": value,
|
|
1095
|
+
"aria-valuenow": Math.min(max, Math.max(0, value)),
|
|
759
1096
|
"aria-valuemin": 0,
|
|
760
1097
|
"aria-valuemax": max,
|
|
761
|
-
className: (0,
|
|
1098
|
+
className: (0, import_design_system_foundation17.cn)(ProgressCircle_default.wrapper, ProgressCircle_default[`--size_${size}`], className),
|
|
762
1099
|
children: [
|
|
763
|
-
/* @__PURE__ */ (0,
|
|
1100
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
764
1101
|
"svg",
|
|
765
1102
|
{
|
|
766
1103
|
width: px,
|
|
@@ -769,7 +1106,7 @@ function ProgressCircle({
|
|
|
769
1106
|
"aria-hidden": "true",
|
|
770
1107
|
className: ProgressCircle_default.svg,
|
|
771
1108
|
children: [
|
|
772
|
-
/* @__PURE__ */ (0,
|
|
1109
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
773
1110
|
"circle",
|
|
774
1111
|
{
|
|
775
1112
|
className: ProgressCircle_default.track,
|
|
@@ -780,7 +1117,7 @@ function ProgressCircle({
|
|
|
780
1117
|
fill: "none"
|
|
781
1118
|
}
|
|
782
1119
|
),
|
|
783
|
-
/* @__PURE__ */ (0,
|
|
1120
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
784
1121
|
"circle",
|
|
785
1122
|
{
|
|
786
1123
|
className: ProgressCircle_default.fill,
|
|
@@ -798,7 +1135,7 @@ function ProgressCircle({
|
|
|
798
1135
|
]
|
|
799
1136
|
}
|
|
800
1137
|
),
|
|
801
|
-
showValue && /* @__PURE__ */ (0,
|
|
1138
|
+
showValue && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: ProgressCircle_default.value, "aria-hidden": "true", children: [
|
|
802
1139
|
Math.round(percentage),
|
|
803
1140
|
"%"
|
|
804
1141
|
] })
|
|
@@ -808,54 +1145,57 @@ function ProgressCircle({
|
|
|
808
1145
|
}
|
|
809
1146
|
|
|
810
1147
|
// src/components/ui/Separator/Separator.module.css
|
|
811
|
-
var Separator_default = {"component":"
|
|
1148
|
+
var Separator_default = {"component":"bds2110Separator-component","separator":"bds2110Separator-separator","--horizontal":"bds2110Separator---horizontal","--vertical":"bds2110Separator---vertical"};
|
|
812
1149
|
|
|
813
1150
|
// src/components/ui/Separator/Separator.tsx
|
|
814
|
-
var
|
|
815
|
-
var
|
|
1151
|
+
var import_design_system_foundation18 = require("@boostdev/design-system-foundation");
|
|
1152
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
816
1153
|
function Separator({ orientation = "horizontal", className, ...rest }) {
|
|
817
1154
|
if (orientation === "vertical") {
|
|
818
|
-
return /* @__PURE__ */ (0,
|
|
1155
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
819
1156
|
"div",
|
|
820
1157
|
{
|
|
821
1158
|
...rest,
|
|
822
1159
|
role: "separator",
|
|
823
1160
|
"aria-orientation": "vertical",
|
|
824
|
-
className: (0,
|
|
1161
|
+
className: (0, import_design_system_foundation18.cn)(Separator_default.separator, Separator_default["--vertical"], className)
|
|
825
1162
|
}
|
|
826
1163
|
);
|
|
827
1164
|
}
|
|
828
|
-
return /* @__PURE__ */ (0,
|
|
1165
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("hr", { ...rest, "aria-orientation": "horizontal", className: (0, import_design_system_foundation18.cn)(Separator_default.separator, Separator_default["--horizontal"], className) });
|
|
829
1166
|
}
|
|
830
1167
|
|
|
831
1168
|
// src/components/ui/Skeleton/Skeleton.tsx
|
|
832
|
-
var
|
|
1169
|
+
var import_design_system_foundation19 = require("@boostdev/design-system-foundation");
|
|
833
1170
|
|
|
834
1171
|
// src/components/ui/Skeleton/Skeleton.module.css
|
|
835
|
-
var Skeleton_default = {"component":"
|
|
1172
|
+
var Skeleton_default = {"component":"bds2110Skeleton-component","skeleton":"bds2110Skeleton-skeleton"};
|
|
836
1173
|
|
|
837
1174
|
// src/components/ui/Skeleton/Skeleton.tsx
|
|
838
|
-
var
|
|
1175
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
839
1176
|
function Skeleton({ className, ...rest }) {
|
|
840
|
-
return /* @__PURE__ */ (0,
|
|
1177
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ...rest, "aria-hidden": "true", className: (0, import_design_system_foundation19.cn)(Skeleton_default.skeleton, className) });
|
|
841
1178
|
}
|
|
842
1179
|
|
|
843
1180
|
// src/components/ui/SkipLink/SkipLink.module.css
|
|
844
|
-
var SkipLink_default = {"component":"
|
|
1181
|
+
var SkipLink_default = {"component":"bds2110SkipLink-component","skipLink":"bds2110SkipLink-skipLink"};
|
|
845
1182
|
|
|
846
1183
|
// src/components/ui/SkipLink/SkipLink.tsx
|
|
847
|
-
var
|
|
848
|
-
var
|
|
1184
|
+
var import_design_system_foundation20 = require("@boostdev/design-system-foundation");
|
|
1185
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
849
1186
|
function SkipLink({ href = "#main", children = "Skip to main content", className, ...rest }) {
|
|
850
|
-
return /* @__PURE__ */ (0,
|
|
1187
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("a", { ...rest, href, className: (0, import_design_system_foundation20.cn)(SkipLink_default.skipLink, className), children });
|
|
851
1188
|
}
|
|
852
1189
|
|
|
1190
|
+
// src/components/ui/Table/Table.tsx
|
|
1191
|
+
var import_react5 = require("react");
|
|
1192
|
+
|
|
853
1193
|
// src/components/ui/Table/Table.module.css
|
|
854
|
-
var Table_default = {"component":"
|
|
1194
|
+
var Table_default = {"component":"bds2110Table-component","wrapper":"bds2110Table-wrapper","table":"bds2110Table-table","caption":"bds2110Table-caption","thead":"bds2110Table-thead","th":"bds2110Table-th","--sortable":"bds2110Table---sortable","sortButton":"bds2110Table-sortButton","sortIcon":"bds2110Table-sortIcon","--sort-active":"bds2110Table---sort-active","--sort-desc":"bds2110Table---sort-desc","tbody":"bds2110Table-tbody","tr":"bds2110Table-tr","td":"bds2110Table-td"};
|
|
855
1195
|
|
|
856
1196
|
// src/components/ui/Table/Table.tsx
|
|
857
|
-
var
|
|
858
|
-
var
|
|
1197
|
+
var import_design_system_foundation21 = require("@boostdev/design-system-foundation");
|
|
1198
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
859
1199
|
function Table({
|
|
860
1200
|
columns,
|
|
861
1201
|
rows,
|
|
@@ -863,8 +1203,14 @@ function Table({
|
|
|
863
1203
|
sortKey,
|
|
864
1204
|
sortDirection,
|
|
865
1205
|
onSort,
|
|
866
|
-
|
|
1206
|
+
rowKey,
|
|
1207
|
+
className,
|
|
1208
|
+
...rest
|
|
867
1209
|
}) {
|
|
1210
|
+
const generatedId = (0, import_react5.useId)();
|
|
1211
|
+
const captionId = caption ? `${generatedId}-caption` : void 0;
|
|
1212
|
+
const hasCustomLabel = "aria-label" in rest || "aria-labelledby" in rest;
|
|
1213
|
+
const hasAccessibleName = Boolean(caption) || hasCustomLabel;
|
|
868
1214
|
const handleSort = (key) => {
|
|
869
1215
|
if (!onSort) return;
|
|
870
1216
|
const nextDirection = sortKey === key && sortDirection === "asc" ? "desc" : "asc";
|
|
@@ -874,62 +1220,81 @@ function Table({
|
|
|
874
1220
|
if (sortKey !== key) return "none";
|
|
875
1221
|
return sortDirection === "asc" ? "ascending" : "descending";
|
|
876
1222
|
};
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
1223
|
+
const getSortAriaLabel = (col) => {
|
|
1224
|
+
const label = col.sortLabel ?? (typeof col.header === "string" ? col.header : void 0);
|
|
1225
|
+
if (!label) return void 0;
|
|
1226
|
+
const stateSuffix = sortKey === col.key ? `, currently ${sortDirection === "asc" ? "ascending" : "descending"}` : "";
|
|
1227
|
+
return `Sort by ${label}${stateSuffix}`;
|
|
1228
|
+
};
|
|
1229
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1230
|
+
"div",
|
|
1231
|
+
{
|
|
1232
|
+
...rest,
|
|
1233
|
+
className: (0, import_design_system_foundation21.cn)(Table_default.wrapper, className),
|
|
1234
|
+
tabIndex: rest.tabIndex ?? 0,
|
|
1235
|
+
role: hasAccessibleName ? "region" : void 0,
|
|
1236
|
+
"aria-labelledby": hasCustomLabel ? rest["aria-labelledby"] : captionId,
|
|
1237
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("table", { className: Table_default.table, children: [
|
|
1238
|
+
caption && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("caption", { id: captionId, className: Table_default.caption, children: caption }),
|
|
1239
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("thead", { className: Table_default.thead, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1240
|
+
"th",
|
|
887
1241
|
{
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
1242
|
+
scope: "col",
|
|
1243
|
+
"aria-sort": col.sortable ? getAriaSort(col.key) : void 0,
|
|
1244
|
+
className: (0, import_design_system_foundation21.cn)(Table_default.th, col.sortable ? Table_default["--sortable"] : void 0),
|
|
1245
|
+
children: col.sortable ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1246
|
+
"button",
|
|
1247
|
+
{
|
|
1248
|
+
type: "button",
|
|
1249
|
+
className: Table_default.sortButton,
|
|
1250
|
+
onClick: () => handleSort(col.key),
|
|
1251
|
+
"aria-label": getSortAriaLabel(col),
|
|
1252
|
+
children: [
|
|
1253
|
+
col.header,
|
|
1254
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1255
|
+
"svg",
|
|
1256
|
+
{
|
|
1257
|
+
"aria-hidden": "true",
|
|
1258
|
+
className: (0, import_design_system_foundation21.cn)(
|
|
1259
|
+
Table_default.sortIcon,
|
|
1260
|
+
sortKey === col.key ? Table_default["--sort-active"] : void 0,
|
|
1261
|
+
sortKey === col.key && sortDirection === "desc" ? Table_default["--sort-desc"] : void 0
|
|
1262
|
+
),
|
|
1263
|
+
viewBox: "0 0 24 24",
|
|
1264
|
+
fill: "none",
|
|
1265
|
+
stroke: "currentColor",
|
|
1266
|
+
strokeWidth: "2",
|
|
1267
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" })
|
|
1268
|
+
}
|
|
1269
|
+
)
|
|
1270
|
+
]
|
|
1271
|
+
}
|
|
1272
|
+
) : col.header
|
|
1273
|
+
},
|
|
1274
|
+
col.key
|
|
1275
|
+
)) }) }),
|
|
1276
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tbody", { className: Table_default.tbody, children: rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { className: Table_default.tr, children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { className: Table_default.td, children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key)) }, rowKey?.(row, rowIndex) ?? rowIndex)) })
|
|
1277
|
+
] })
|
|
1278
|
+
}
|
|
1279
|
+
);
|
|
918
1280
|
}
|
|
919
1281
|
|
|
920
1282
|
// src/components/ui/Tabs/Tabs.tsx
|
|
921
|
-
var
|
|
1283
|
+
var import_react6 = require("react");
|
|
922
1284
|
|
|
923
1285
|
// src/components/ui/Tabs/Tabs.module.css
|
|
924
|
-
var Tabs_default = {"component":"
|
|
1286
|
+
var Tabs_default = {"component":"bds2110Tabs-component","tabs":"bds2110Tabs-tabs","tabList":"bds2110Tabs-tabList","tab":"bds2110Tabs-tab","--active":"bds2110Tabs---active","panel":"bds2110Tabs-panel"};
|
|
925
1287
|
|
|
926
1288
|
// src/components/ui/Tabs/Tabs.tsx
|
|
927
|
-
var
|
|
928
|
-
var
|
|
1289
|
+
var import_design_system_foundation22 = require("@boostdev/design-system-foundation");
|
|
1290
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
929
1291
|
function Tabs({ tabs, defaultTab, className, ...rest }) {
|
|
930
|
-
const baseId = (0,
|
|
931
|
-
const [activeTab, setActiveTab] = (0,
|
|
932
|
-
|
|
1292
|
+
const baseId = (0, import_react6.useId)();
|
|
1293
|
+
const [activeTab, setActiveTab] = (0, import_react6.useState)(() => {
|
|
1294
|
+
const initialTab = tabs.find((tab) => tab.id === defaultTab && !tab.disabled) ?? tabs.find((tab) => !tab.disabled);
|
|
1295
|
+
return initialTab?.id;
|
|
1296
|
+
});
|
|
1297
|
+
const tabRefs = (0, import_react6.useRef)([]);
|
|
933
1298
|
const enabledIndexes = tabs.map((tab, i) => ({ tab, i })).filter(({ tab }) => !tab.disabled).map(({ i }) => i);
|
|
934
1299
|
const handleKeyDown = (e, index) => {
|
|
935
1300
|
const pos = enabledIndexes.indexOf(index);
|
|
@@ -951,12 +1316,12 @@ function Tabs({ tabs, defaultTab, className, ...rest }) {
|
|
|
951
1316
|
focusAt(enabledIndexes[enabledIndexes.length - 1]);
|
|
952
1317
|
}
|
|
953
1318
|
};
|
|
954
|
-
return /* @__PURE__ */ (0,
|
|
955
|
-
/* @__PURE__ */ (0,
|
|
1319
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ...rest, className: (0, import_design_system_foundation22.cn)(Tabs_default.tabs, className), children: [
|
|
1320
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { role: "tablist", className: Tabs_default.tabList, children: tabs.map((tab, i) => {
|
|
956
1321
|
const tabId = `${baseId}-tab-${tab.id}`;
|
|
957
1322
|
const panelId = `${baseId}-panel-${tab.id}`;
|
|
958
1323
|
const isActive = activeTab === tab.id;
|
|
959
|
-
return /* @__PURE__ */ (0,
|
|
1324
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
960
1325
|
"button",
|
|
961
1326
|
{
|
|
962
1327
|
ref: (el) => {
|
|
@@ -969,7 +1334,7 @@ function Tabs({ tabs, defaultTab, className, ...rest }) {
|
|
|
969
1334
|
"aria-controls": panelId,
|
|
970
1335
|
tabIndex: isActive ? 0 : -1,
|
|
971
1336
|
disabled: tab.disabled,
|
|
972
|
-
className: (0,
|
|
1337
|
+
className: (0, import_design_system_foundation22.cn)(Tabs_default.tab, isActive ? Tabs_default["--active"] : void 0),
|
|
973
1338
|
onClick: () => setActiveTab(tab.id),
|
|
974
1339
|
onKeyDown: (e) => handleKeyDown(e, i),
|
|
975
1340
|
children: tab.label
|
|
@@ -981,13 +1346,14 @@ function Tabs({ tabs, defaultTab, className, ...rest }) {
|
|
|
981
1346
|
const tabId = `${baseId}-tab-${tab.id}`;
|
|
982
1347
|
const panelId = `${baseId}-panel-${tab.id}`;
|
|
983
1348
|
const isActive = activeTab === tab.id;
|
|
984
|
-
return /* @__PURE__ */ (0,
|
|
1349
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
985
1350
|
"div",
|
|
986
1351
|
{
|
|
987
1352
|
id: panelId,
|
|
988
1353
|
role: "tabpanel",
|
|
989
1354
|
"aria-labelledby": tabId,
|
|
990
1355
|
hidden: !isActive,
|
|
1356
|
+
tabIndex: 0,
|
|
991
1357
|
className: Tabs_default.panel,
|
|
992
1358
|
children: tab.content
|
|
993
1359
|
},
|
|
@@ -998,14 +1364,14 @@ function Tabs({ tabs, defaultTab, className, ...rest }) {
|
|
|
998
1364
|
}
|
|
999
1365
|
|
|
1000
1366
|
// src/components/ui/Tooltip/Tooltip.tsx
|
|
1001
|
-
var
|
|
1367
|
+
var import_react7 = require("react");
|
|
1002
1368
|
|
|
1003
1369
|
// src/components/ui/Tooltip/Tooltip.module.css
|
|
1004
|
-
var Tooltip_default = {"component":"
|
|
1370
|
+
var Tooltip_default = {"component":"bds2110Tooltip-component","wrapper":"bds2110Tooltip-wrapper","tooltip":"bds2110Tooltip-tooltip","--visible":"bds2110Tooltip---visible","--placement_top":"bds2110Tooltip---placement_top","--placement_bottom":"bds2110Tooltip---placement_bottom","--placement_left":"bds2110Tooltip---placement_left","--placement_right":"bds2110Tooltip---placement_right"};
|
|
1005
1371
|
|
|
1006
1372
|
// src/components/ui/Tooltip/Tooltip.tsx
|
|
1007
|
-
var
|
|
1008
|
-
var
|
|
1373
|
+
var import_design_system_foundation23 = require("@boostdev/design-system-foundation");
|
|
1374
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1009
1375
|
function Tooltip({
|
|
1010
1376
|
content,
|
|
1011
1377
|
placement = "top",
|
|
@@ -1013,29 +1379,37 @@ function Tooltip({
|
|
|
1013
1379
|
className,
|
|
1014
1380
|
...rest
|
|
1015
1381
|
}) {
|
|
1016
|
-
const tooltipId = (0,
|
|
1017
|
-
const [isVisible, setIsVisible] = (0,
|
|
1018
|
-
const
|
|
1382
|
+
const tooltipId = (0, import_react7.useId)();
|
|
1383
|
+
const [isVisible, setIsVisible] = (0, import_react7.useState)(false);
|
|
1384
|
+
const show = () => setIsVisible(true);
|
|
1385
|
+
const hide = () => setIsVisible(false);
|
|
1386
|
+
const handleKeyDown = (event) => {
|
|
1387
|
+
if (event.key === "Escape" && isVisible) {
|
|
1388
|
+
hide();
|
|
1389
|
+
}
|
|
1390
|
+
};
|
|
1391
|
+
const trigger = (0, import_react7.isValidElement)(children) ? (0, import_react7.cloneElement)(children, {
|
|
1019
1392
|
"aria-describedby": tooltipId
|
|
1020
1393
|
}) : children;
|
|
1021
|
-
return /* @__PURE__ */ (0,
|
|
1394
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1022
1395
|
"span",
|
|
1023
1396
|
{
|
|
1024
1397
|
...rest,
|
|
1025
|
-
className: (0,
|
|
1026
|
-
onMouseEnter:
|
|
1027
|
-
onMouseLeave:
|
|
1028
|
-
onFocus:
|
|
1029
|
-
onBlur:
|
|
1398
|
+
className: (0, import_design_system_foundation23.cn)(Tooltip_default.wrapper, className),
|
|
1399
|
+
onMouseEnter: show,
|
|
1400
|
+
onMouseLeave: hide,
|
|
1401
|
+
onFocus: show,
|
|
1402
|
+
onBlur: hide,
|
|
1403
|
+
onKeyDown: handleKeyDown,
|
|
1030
1404
|
children: [
|
|
1031
1405
|
trigger,
|
|
1032
|
-
/* @__PURE__ */ (0,
|
|
1406
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1033
1407
|
"span",
|
|
1034
1408
|
{
|
|
1035
1409
|
id: tooltipId,
|
|
1036
1410
|
role: "tooltip",
|
|
1037
|
-
|
|
1038
|
-
className: (0,
|
|
1411
|
+
hidden: !isVisible,
|
|
1412
|
+
className: (0, import_design_system_foundation23.cn)(Tooltip_default.tooltip, Tooltip_default[`--placement_${placement}`], isVisible && Tooltip_default["--visible"]),
|
|
1039
1413
|
children: content
|
|
1040
1414
|
}
|
|
1041
1415
|
)
|
|
@@ -1045,11 +1419,11 @@ function Tooltip({
|
|
|
1045
1419
|
}
|
|
1046
1420
|
|
|
1047
1421
|
// src/components/ui/Typography/Typography.module.css
|
|
1048
|
-
var Typography_default = {"component":"
|
|
1422
|
+
var Typography_default = {"component":"bds2110Typography-component","typography":"bds2110Typography-typography","--h1":"bds2110Typography---h1","--h2":"bds2110Typography---h2","--h3":"bds2110Typography---h3","--body":"bds2110Typography---body","--body_s":"bds2110Typography---body_s"};
|
|
1049
1423
|
|
|
1050
1424
|
// src/components/ui/Typography/Typography.tsx
|
|
1051
|
-
var
|
|
1052
|
-
var
|
|
1425
|
+
var import_design_system_foundation24 = require("@boostdev/design-system-foundation");
|
|
1426
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1053
1427
|
var variantToElement = {
|
|
1054
1428
|
h1: "h1",
|
|
1055
1429
|
h2: "h2",
|
|
@@ -1059,15 +1433,15 @@ var variantToElement = {
|
|
|
1059
1433
|
};
|
|
1060
1434
|
function Typography({ variant = "body", component, children, className, ...rest }) {
|
|
1061
1435
|
const Component = component || variantToElement[variant];
|
|
1062
|
-
return /* @__PURE__ */ (0,
|
|
1436
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Component, { ...rest, className: (0, import_design_system_foundation24.cn)(Typography_default.typography, Typography_default[`--${variant}`], className), children });
|
|
1063
1437
|
}
|
|
1064
1438
|
|
|
1065
1439
|
// src/components/interaction/Button/Button.module.css
|
|
1066
|
-
var Button_default = {"component":"
|
|
1440
|
+
var Button_default = {"component":"bds2110Button-component","button":"bds2110Button-button","--default":"bds2110Button---default","--outline":"bds2110Button---outline","--ghost":"bds2110Button---ghost","--size_small":"bds2110Button---size_small","--size_medium":"bds2110Button---size_medium","--size_large":"bds2110Button---size_large","--hasPulse":"bds2110Button---hasPulse","iconStart":"bds2110Button-iconStart","iconEnd":"bds2110Button-iconEnd","--iconOnly":"bds2110Button---iconOnly"};
|
|
1067
1441
|
|
|
1068
1442
|
// src/components/interaction/Button/Button.tsx
|
|
1069
|
-
var
|
|
1070
|
-
var
|
|
1443
|
+
var import_design_system_foundation25 = require("@boostdev/design-system-foundation");
|
|
1444
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1071
1445
|
function Button({
|
|
1072
1446
|
children,
|
|
1073
1447
|
className,
|
|
@@ -1085,7 +1459,7 @@ function Button({
|
|
|
1085
1459
|
onClick,
|
|
1086
1460
|
...rest
|
|
1087
1461
|
}) {
|
|
1088
|
-
const classNames = (0,
|
|
1462
|
+
const classNames = (0, import_design_system_foundation25.cn)(
|
|
1089
1463
|
Button_default.button,
|
|
1090
1464
|
Button_default[`--${variant}`],
|
|
1091
1465
|
Button_default[`--size_${size}`],
|
|
@@ -1103,15 +1477,16 @@ function Button({
|
|
|
1103
1477
|
const handleButtonClick = (e) => {
|
|
1104
1478
|
onClick?.(e);
|
|
1105
1479
|
};
|
|
1106
|
-
const content = /* @__PURE__ */ (0,
|
|
1107
|
-
Boolean(iconStart) && /* @__PURE__ */ (0,
|
|
1480
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
|
|
1481
|
+
Boolean(iconStart) && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: Button_default.iconStart, children: iconStart }),
|
|
1108
1482
|
children,
|
|
1109
|
-
Boolean(iconEnd) && /* @__PURE__ */ (0,
|
|
1483
|
+
Boolean(iconEnd) && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: Button_default.iconEnd, children: iconEnd })
|
|
1110
1484
|
] });
|
|
1111
1485
|
if (href) {
|
|
1112
|
-
return /* @__PURE__ */ (0,
|
|
1486
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1113
1487
|
"a",
|
|
1114
1488
|
{
|
|
1489
|
+
...rest,
|
|
1115
1490
|
className: classNames,
|
|
1116
1491
|
href: disabled ? void 0 : href,
|
|
1117
1492
|
target,
|
|
@@ -1119,26 +1494,25 @@ function Button({
|
|
|
1119
1494
|
"aria-disabled": disabled,
|
|
1120
1495
|
tabIndex: disabled ? -1 : void 0,
|
|
1121
1496
|
onClick: handleAnchorClick,
|
|
1122
|
-
...rest,
|
|
1123
1497
|
children: content
|
|
1124
1498
|
}
|
|
1125
1499
|
);
|
|
1126
1500
|
}
|
|
1127
|
-
return /* @__PURE__ */ (0,
|
|
1501
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1128
1502
|
"button",
|
|
1129
1503
|
{
|
|
1504
|
+
...rest,
|
|
1130
1505
|
type,
|
|
1131
1506
|
className: classNames,
|
|
1132
1507
|
disabled,
|
|
1133
1508
|
onClick: handleButtonClick,
|
|
1134
|
-
...rest,
|
|
1135
1509
|
children: content
|
|
1136
1510
|
}
|
|
1137
1511
|
);
|
|
1138
1512
|
}
|
|
1139
1513
|
|
|
1140
1514
|
// src/components/interaction/Command/Command.tsx
|
|
1141
|
-
var
|
|
1515
|
+
var import_react8 = require("react");
|
|
1142
1516
|
|
|
1143
1517
|
// src/polyfill-invoker-commands.ts
|
|
1144
1518
|
var installed = false;
|
|
@@ -1180,11 +1554,11 @@ function installInvokerCommandsPolyfill() {
|
|
|
1180
1554
|
}
|
|
1181
1555
|
|
|
1182
1556
|
// src/components/interaction/Command/Command.module.css
|
|
1183
|
-
var Command_default = {"component":"
|
|
1557
|
+
var Command_default = {"component":"bds2110Command-component","dialog":"bds2110Command-dialog","palette":"bds2110Command-palette","searchRow":"bds2110Command-searchRow","searchIcon":"bds2110Command-searchIcon","search":"bds2110Command-search","escHint":"bds2110Command-escHint","list":"bds2110Command-list","groupList":"bds2110Command-groupList","group":"bds2110Command-group","item":"bds2110Command-item","itemActive":"bds2110Command-itemActive","itemLabel":"bds2110Command-itemLabel","itemDesc":"bds2110Command-itemDesc","shortcut":"bds2110Command-shortcut","empty":"bds2110Command-empty","srOnly":"bds2110Command-srOnly"};
|
|
1184
1558
|
|
|
1185
1559
|
// src/components/interaction/Command/Command.tsx
|
|
1186
|
-
var
|
|
1187
|
-
var
|
|
1560
|
+
var import_design_system_foundation26 = require("@boostdev/design-system-foundation");
|
|
1561
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1188
1562
|
installInvokerCommandsPolyfill();
|
|
1189
1563
|
function Command({
|
|
1190
1564
|
id: idProp,
|
|
@@ -1196,20 +1570,20 @@ function Command({
|
|
|
1196
1570
|
className,
|
|
1197
1571
|
...rest
|
|
1198
1572
|
}) {
|
|
1199
|
-
const [query, setQuery] = (0,
|
|
1200
|
-
const [activeIndex, setActiveIndex] = (0,
|
|
1201
|
-
const generatedId = (0,
|
|
1573
|
+
const [query, setQuery] = (0, import_react8.useState)("");
|
|
1574
|
+
const [activeIndex, setActiveIndex] = (0, import_react8.useState)(0);
|
|
1575
|
+
const generatedId = (0, import_react8.useId)();
|
|
1202
1576
|
const dialogId = idProp ?? generatedId;
|
|
1203
|
-
const dialogRef = (0,
|
|
1204
|
-
const inputRef = (0,
|
|
1205
|
-
const listboxId = (0,
|
|
1206
|
-
const filtered = (0,
|
|
1577
|
+
const dialogRef = (0, import_react8.useRef)(null);
|
|
1578
|
+
const inputRef = (0, import_react8.useRef)(null);
|
|
1579
|
+
const listboxId = (0, import_react8.useId)();
|
|
1580
|
+
const filtered = (0, import_react8.useMemo)(() => {
|
|
1207
1581
|
const q = query.toLowerCase().trim();
|
|
1208
1582
|
return q ? items.filter(
|
|
1209
1583
|
(item) => item.label.toLowerCase().includes(q) || item.description?.toLowerCase().includes(q)
|
|
1210
1584
|
) : items;
|
|
1211
1585
|
}, [query, items]);
|
|
1212
|
-
const groups = (0,
|
|
1586
|
+
const groups = (0, import_react8.useMemo)(() => {
|
|
1213
1587
|
const map = /* @__PURE__ */ new Map();
|
|
1214
1588
|
filtered.forEach((item) => {
|
|
1215
1589
|
const g = item.group ?? "";
|
|
@@ -1219,8 +1593,8 @@ function Command({
|
|
|
1219
1593
|
});
|
|
1220
1594
|
return map;
|
|
1221
1595
|
}, [filtered]);
|
|
1222
|
-
const triggerRef = (0,
|
|
1223
|
-
(0,
|
|
1596
|
+
const triggerRef = (0, import_react8.useRef)(null);
|
|
1597
|
+
(0, import_react8.useEffect)(() => {
|
|
1224
1598
|
const dialog = dialogRef.current;
|
|
1225
1599
|
if (!dialog) return;
|
|
1226
1600
|
if (isOpen && !dialog.open) {
|
|
@@ -1239,10 +1613,10 @@ function Command({
|
|
|
1239
1613
|
document.body.style.overflow = "";
|
|
1240
1614
|
};
|
|
1241
1615
|
}, [isOpen]);
|
|
1242
|
-
(0,
|
|
1616
|
+
(0, import_react8.useEffect)(() => {
|
|
1243
1617
|
setActiveIndex(0);
|
|
1244
1618
|
}, [query]);
|
|
1245
|
-
(0,
|
|
1619
|
+
(0, import_react8.useEffect)(() => {
|
|
1246
1620
|
const dialog = dialogRef.current;
|
|
1247
1621
|
if (!dialog) return;
|
|
1248
1622
|
const handleCommand = (e) => {
|
|
@@ -1276,8 +1650,11 @@ function Command({
|
|
|
1276
1650
|
setActiveIndex((i) => Math.max(i - 1, 0));
|
|
1277
1651
|
} else if (e.key === "Enter") {
|
|
1278
1652
|
e.preventDefault();
|
|
1279
|
-
filtered[activeIndex]
|
|
1280
|
-
|
|
1653
|
+
const item = filtered[activeIndex];
|
|
1654
|
+
if (item) {
|
|
1655
|
+
item.onSelect();
|
|
1656
|
+
onClose();
|
|
1657
|
+
}
|
|
1281
1658
|
} else if (e.key === "Escape") {
|
|
1282
1659
|
onClose();
|
|
1283
1660
|
}
|
|
@@ -1286,28 +1663,29 @@ function Command({
|
|
|
1286
1663
|
item.onSelect();
|
|
1287
1664
|
onClose();
|
|
1288
1665
|
};
|
|
1289
|
-
return /* @__PURE__ */ (0,
|
|
1666
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1290
1667
|
"dialog",
|
|
1291
1668
|
{
|
|
1292
1669
|
...rest,
|
|
1293
1670
|
ref: dialogRef,
|
|
1294
1671
|
id: dialogId,
|
|
1295
|
-
className: (0,
|
|
1672
|
+
className: (0, import_design_system_foundation26.cn)(Command_default.dialog, className),
|
|
1296
1673
|
"aria-label": "Command palette",
|
|
1297
1674
|
"aria-modal": "true",
|
|
1298
1675
|
onCancel: handleCancel,
|
|
1299
|
-
children: /* @__PURE__ */ (0,
|
|
1300
|
-
/* @__PURE__ */ (0,
|
|
1301
|
-
/* @__PURE__ */ (0,
|
|
1302
|
-
/* @__PURE__ */ (0,
|
|
1303
|
-
/* @__PURE__ */ (0,
|
|
1676
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: Command_default.palette, onKeyDown: handleKeyDown, children: [
|
|
1677
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: Command_default.searchRow, children: [
|
|
1678
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("svg", { "aria-hidden": "true", className: Command_default.searchIcon, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
|
|
1679
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
|
|
1680
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { strokeLinecap: "round", d: "M21 21l-4.35-4.35" })
|
|
1304
1681
|
] }),
|
|
1305
|
-
/* @__PURE__ */ (0,
|
|
1682
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1306
1683
|
"input",
|
|
1307
1684
|
{
|
|
1308
1685
|
ref: inputRef,
|
|
1309
1686
|
type: "search",
|
|
1310
1687
|
role: "combobox",
|
|
1688
|
+
"aria-label": "Search commands",
|
|
1311
1689
|
"aria-expanded": filtered.length > 0,
|
|
1312
1690
|
"aria-controls": listboxId,
|
|
1313
1691
|
"aria-autocomplete": "list",
|
|
@@ -1318,32 +1696,33 @@ function Command({
|
|
|
1318
1696
|
onChange: (e) => setQuery(e.target.value)
|
|
1319
1697
|
}
|
|
1320
1698
|
),
|
|
1321
|
-
/* @__PURE__ */ (0,
|
|
1699
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("kbd", { className: Command_default.escHint, children: "Esc" })
|
|
1322
1700
|
] }),
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
/* @__PURE__ */ (0,
|
|
1701
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: Command_default.srOnly, "aria-live": "polite", children: filtered.length === 0 ? `Nothing matches \u201C${query}\u201D` : "" }),
|
|
1702
|
+
filtered.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { id: listboxId, role: "listbox", className: Command_default.list, "aria-label": "Commands", children: Array.from(groups.entries()).map(([group, groupItems]) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("li", { role: "presentation", children: [
|
|
1703
|
+
group && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: Command_default.group, role: "presentation", children: group }),
|
|
1704
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { role: "group", "aria-label": group || void 0, className: Command_default.groupList, children: groupItems.map((item) => {
|
|
1326
1705
|
const flatIndex = filtered.indexOf(item);
|
|
1327
1706
|
const isActive = flatIndex === activeIndex;
|
|
1328
|
-
return /* @__PURE__ */ (0,
|
|
1707
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1329
1708
|
"li",
|
|
1330
1709
|
{
|
|
1331
1710
|
id: `cmd-${item.id}`,
|
|
1332
1711
|
role: "option",
|
|
1333
1712
|
"aria-selected": isActive,
|
|
1334
|
-
className: (0,
|
|
1713
|
+
className: (0, import_design_system_foundation26.cn)(Command_default.item, isActive && Command_default.itemActive),
|
|
1335
1714
|
onPointerDown: (e) => e.preventDefault(),
|
|
1336
1715
|
onClick: () => selectItem(item),
|
|
1337
1716
|
children: [
|
|
1338
|
-
/* @__PURE__ */ (0,
|
|
1339
|
-
item.description && /* @__PURE__ */ (0,
|
|
1340
|
-
item.shortcut && /* @__PURE__ */ (0,
|
|
1717
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: Command_default.itemLabel, children: item.label }),
|
|
1718
|
+
item.description && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: Command_default.itemDesc, children: item.description }),
|
|
1719
|
+
item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("kbd", { className: Command_default.shortcut, children: item.shortcut })
|
|
1341
1720
|
]
|
|
1342
1721
|
},
|
|
1343
1722
|
item.id
|
|
1344
1723
|
);
|
|
1345
1724
|
}) })
|
|
1346
|
-
] }, group)) }) : /* @__PURE__ */ (0,
|
|
1725
|
+
] }, group)) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: Command_default.empty, children: [
|
|
1347
1726
|
"No results for \u201C",
|
|
1348
1727
|
query,
|
|
1349
1728
|
"\u201D"
|
|
@@ -1354,22 +1733,22 @@ function Command({
|
|
|
1354
1733
|
}
|
|
1355
1734
|
|
|
1356
1735
|
// src/components/interaction/Dialog/Dialog.tsx
|
|
1357
|
-
var
|
|
1736
|
+
var import_react9 = require("react");
|
|
1358
1737
|
|
|
1359
1738
|
// src/components/interaction/Dialog/Dialog.module.css
|
|
1360
|
-
var Dialog_default = {"component":"
|
|
1739
|
+
var Dialog_default = {"component":"bds2110Dialog-component","dialog":"bds2110Dialog-dialog","dialogContent":"bds2110Dialog-dialogContent","closeButton":"bds2110Dialog-closeButton"};
|
|
1361
1740
|
|
|
1362
1741
|
// src/components/interaction/Dialog/Dialog.tsx
|
|
1363
|
-
var
|
|
1364
|
-
var
|
|
1742
|
+
var import_design_system_foundation27 = require("@boostdev/design-system-foundation");
|
|
1743
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1365
1744
|
installInvokerCommandsPolyfill();
|
|
1366
1745
|
var FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
|
|
1367
1746
|
function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClose, ...rest }) {
|
|
1368
|
-
const generatedId = (0,
|
|
1747
|
+
const generatedId = (0, import_react9.useId)();
|
|
1369
1748
|
const id = idProp ?? generatedId;
|
|
1370
|
-
const dialogRef = (0,
|
|
1371
|
-
const triggerRef = (0,
|
|
1372
|
-
(0,
|
|
1749
|
+
const dialogRef = (0, import_react9.useRef)(null);
|
|
1750
|
+
const triggerRef = (0, import_react9.useRef)(null);
|
|
1751
|
+
(0, import_react9.useEffect)(() => {
|
|
1373
1752
|
const dialog = dialogRef.current;
|
|
1374
1753
|
if (!dialog) return;
|
|
1375
1754
|
if (isOpen && !dialog.open) {
|
|
@@ -1385,7 +1764,7 @@ function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClo
|
|
|
1385
1764
|
document.body.style.overflow = "";
|
|
1386
1765
|
};
|
|
1387
1766
|
}, [isOpen]);
|
|
1388
|
-
(0,
|
|
1767
|
+
(0, import_react9.useEffect)(() => {
|
|
1389
1768
|
const dialog = dialogRef.current;
|
|
1390
1769
|
if (!dialog) return;
|
|
1391
1770
|
const handleCommand = (e) => {
|
|
@@ -1407,8 +1786,10 @@ function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClo
|
|
|
1407
1786
|
if (e.target === dialogRef.current) onClose?.();
|
|
1408
1787
|
};
|
|
1409
1788
|
const handleCancel = (e) => {
|
|
1410
|
-
|
|
1411
|
-
|
|
1789
|
+
if (onClose) {
|
|
1790
|
+
e.preventDefault();
|
|
1791
|
+
onClose();
|
|
1792
|
+
}
|
|
1412
1793
|
};
|
|
1413
1794
|
const handleKeyDown = (e) => {
|
|
1414
1795
|
if (e.key !== "Tab") return;
|
|
@@ -1430,19 +1811,19 @@ function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClo
|
|
|
1430
1811
|
}
|
|
1431
1812
|
}
|
|
1432
1813
|
};
|
|
1433
|
-
return /* @__PURE__ */ (0,
|
|
1814
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
1434
1815
|
"dialog",
|
|
1435
1816
|
{
|
|
1436
1817
|
...rest,
|
|
1437
1818
|
ref: dialogRef,
|
|
1438
1819
|
id,
|
|
1439
|
-
className: (0,
|
|
1820
|
+
className: (0, import_design_system_foundation27.cn)(className, Dialog_default.dialog),
|
|
1440
1821
|
"aria-modal": "true",
|
|
1441
1822
|
onClick: handleBackdropClick,
|
|
1442
1823
|
onCancel: handleCancel,
|
|
1443
1824
|
onKeyDown: handleKeyDown,
|
|
1444
1825
|
children: [
|
|
1445
|
-
/* @__PURE__ */ (0,
|
|
1826
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1446
1827
|
"button",
|
|
1447
1828
|
{
|
|
1448
1829
|
type: "button",
|
|
@@ -1450,25 +1831,26 @@ function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClo
|
|
|
1450
1831
|
commandfor: id,
|
|
1451
1832
|
command: "close",
|
|
1452
1833
|
"aria-label": "Close dialog",
|
|
1453
|
-
children: /* @__PURE__ */ (0,
|
|
1834
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
|
|
1454
1835
|
}
|
|
1455
1836
|
),
|
|
1456
|
-
/* @__PURE__ */ (0,
|
|
1837
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: Dialog_default.dialogContent, children })
|
|
1457
1838
|
]
|
|
1458
1839
|
}
|
|
1459
1840
|
);
|
|
1460
1841
|
}
|
|
1461
1842
|
|
|
1462
1843
|
// src/components/interaction/Drawer/Drawer.tsx
|
|
1463
|
-
var
|
|
1844
|
+
var import_react10 = require("react");
|
|
1464
1845
|
|
|
1465
1846
|
// src/components/interaction/Drawer/Drawer.module.css
|
|
1466
|
-
var Drawer_default = {"component":"
|
|
1847
|
+
var Drawer_default = {"component":"bds2110Drawer-component","drawer":"bds2110Drawer-drawer","--side_left":"bds2110Drawer---side_left","header":"bds2110Drawer-header","closeButton":"bds2110Drawer-closeButton","body":"bds2110Drawer-body"};
|
|
1467
1848
|
|
|
1468
1849
|
// src/components/interaction/Drawer/Drawer.tsx
|
|
1469
|
-
var
|
|
1470
|
-
var
|
|
1850
|
+
var import_design_system_foundation28 = require("@boostdev/design-system-foundation");
|
|
1851
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1471
1852
|
installInvokerCommandsPolyfill();
|
|
1853
|
+
var FOCUSABLE_SELECTOR2 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
|
|
1472
1854
|
function Drawer({
|
|
1473
1855
|
id: idProp,
|
|
1474
1856
|
isOpen,
|
|
@@ -1480,11 +1862,13 @@ function Drawer({
|
|
|
1480
1862
|
className,
|
|
1481
1863
|
...rest
|
|
1482
1864
|
}) {
|
|
1483
|
-
const generatedId = (0,
|
|
1865
|
+
const generatedId = (0, import_react10.useId)();
|
|
1484
1866
|
const id = idProp ?? generatedId;
|
|
1485
|
-
const
|
|
1486
|
-
const
|
|
1487
|
-
(0,
|
|
1867
|
+
const titleId = (0, import_react10.useId)();
|
|
1868
|
+
const hasCustomLabel = "aria-label" in rest || "aria-labelledby" in rest;
|
|
1869
|
+
const dialogRef = (0, import_react10.useRef)(null);
|
|
1870
|
+
const triggerRef = (0, import_react10.useRef)(null);
|
|
1871
|
+
(0, import_react10.useEffect)(() => {
|
|
1488
1872
|
const dialog = dialogRef.current;
|
|
1489
1873
|
if (!dialog) return;
|
|
1490
1874
|
if (isOpen && !dialog.open) {
|
|
@@ -1500,7 +1884,7 @@ function Drawer({
|
|
|
1500
1884
|
document.body.style.overflow = "";
|
|
1501
1885
|
};
|
|
1502
1886
|
}, [isOpen]);
|
|
1503
|
-
(0,
|
|
1887
|
+
(0, import_react10.useEffect)(() => {
|
|
1504
1888
|
const dialog = dialogRef.current;
|
|
1505
1889
|
if (!dialog) return;
|
|
1506
1890
|
const handleCommand = (e) => {
|
|
@@ -1514,35 +1898,53 @@ function Drawer({
|
|
|
1514
1898
|
setTimeout(() => trigger?.focus(), 0);
|
|
1515
1899
|
onClose();
|
|
1516
1900
|
}
|
|
1517
|
-
};
|
|
1518
|
-
dialog.addEventListener("command", handleCommand);
|
|
1519
|
-
return () => dialog.removeEventListener("command", handleCommand);
|
|
1520
|
-
}, [onOpen, onClose]);
|
|
1521
|
-
const
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
};
|
|
1528
|
-
const
|
|
1529
|
-
e.
|
|
1530
|
-
|
|
1901
|
+
};
|
|
1902
|
+
dialog.addEventListener("command", handleCommand);
|
|
1903
|
+
return () => dialog.removeEventListener("command", handleCommand);
|
|
1904
|
+
}, [onOpen, onClose]);
|
|
1905
|
+
const handleBackdropClick = (e) => {
|
|
1906
|
+
if (e.target === dialogRef.current) onClose();
|
|
1907
|
+
};
|
|
1908
|
+
const handleCancel = (e) => {
|
|
1909
|
+
e.preventDefault();
|
|
1910
|
+
onClose();
|
|
1911
|
+
};
|
|
1912
|
+
const handleKeyDown = (e) => {
|
|
1913
|
+
if (e.key !== "Tab") return;
|
|
1914
|
+
const dialog = dialogRef.current;
|
|
1915
|
+
if (!dialog) return;
|
|
1916
|
+
const focusable = Array.from(dialog.querySelectorAll(FOCUSABLE_SELECTOR2));
|
|
1917
|
+
if (focusable.length === 0) return;
|
|
1918
|
+
const first = focusable[0];
|
|
1919
|
+
const last = focusable[focusable.length - 1];
|
|
1920
|
+
if (e.shiftKey) {
|
|
1921
|
+
if (document.activeElement === first) {
|
|
1922
|
+
e.preventDefault();
|
|
1923
|
+
last.focus();
|
|
1924
|
+
}
|
|
1925
|
+
} else {
|
|
1926
|
+
if (document.activeElement === last) {
|
|
1927
|
+
e.preventDefault();
|
|
1928
|
+
first.focus();
|
|
1929
|
+
}
|
|
1930
|
+
}
|
|
1531
1931
|
};
|
|
1532
|
-
return /* @__PURE__ */ (0,
|
|
1932
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
1533
1933
|
"dialog",
|
|
1534
1934
|
{
|
|
1535
1935
|
...rest,
|
|
1536
1936
|
ref: dialogRef,
|
|
1537
1937
|
id,
|
|
1538
|
-
className: (0,
|
|
1938
|
+
className: (0, import_design_system_foundation28.cn)(Drawer_default.drawer, Drawer_default[`--side_${side}`], className),
|
|
1539
1939
|
"aria-modal": "true",
|
|
1540
|
-
|
|
1940
|
+
"aria-labelledby": hasCustomLabel ? rest["aria-labelledby"] : title ? titleId : void 0,
|
|
1941
|
+
onClick: handleBackdropClick,
|
|
1541
1942
|
onCancel: handleCancel,
|
|
1943
|
+
onKeyDown: handleKeyDown,
|
|
1542
1944
|
children: [
|
|
1543
|
-
/* @__PURE__ */ (0,
|
|
1544
|
-
!!title && title,
|
|
1545
|
-
/* @__PURE__ */ (0,
|
|
1945
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: Drawer_default.header, children: [
|
|
1946
|
+
!!title && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { id: titleId, children: title }),
|
|
1947
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1546
1948
|
"button",
|
|
1547
1949
|
{
|
|
1548
1950
|
type: "button",
|
|
@@ -1550,25 +1952,25 @@ function Drawer({
|
|
|
1550
1952
|
commandfor: id,
|
|
1551
1953
|
command: "close",
|
|
1552
1954
|
"aria-label": "Close drawer",
|
|
1553
|
-
children: /* @__PURE__ */ (0,
|
|
1955
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
|
|
1554
1956
|
}
|
|
1555
1957
|
)
|
|
1556
1958
|
] }),
|
|
1557
|
-
/* @__PURE__ */ (0,
|
|
1959
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: Drawer_default.body, children })
|
|
1558
1960
|
]
|
|
1559
1961
|
}
|
|
1560
1962
|
);
|
|
1561
1963
|
}
|
|
1562
1964
|
|
|
1563
1965
|
// src/components/interaction/DropdownMenu/DropdownMenu.tsx
|
|
1564
|
-
var
|
|
1966
|
+
var import_react11 = require("react");
|
|
1565
1967
|
|
|
1566
1968
|
// src/components/interaction/DropdownMenu/DropdownMenu.module.css
|
|
1567
|
-
var DropdownMenu_default = {"component":"
|
|
1969
|
+
var DropdownMenu_default = {"component":"bds2110DropdownMenu-component","wrapper":"bds2110DropdownMenu-wrapper","menu":"bds2110DropdownMenu-menu","--placement_bottom-start":"bds2110DropdownMenu---placement_bottom-start","--placement_bottom-end":"bds2110DropdownMenu---placement_bottom-end","separator":"bds2110DropdownMenu-separator","item":"bds2110DropdownMenu-item","icon":"bds2110DropdownMenu-icon"};
|
|
1568
1970
|
|
|
1569
1971
|
// src/components/interaction/DropdownMenu/DropdownMenu.tsx
|
|
1570
|
-
var
|
|
1571
|
-
var
|
|
1972
|
+
var import_design_system_foundation29 = require("@boostdev/design-system-foundation");
|
|
1973
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1572
1974
|
function DropdownMenu({
|
|
1573
1975
|
trigger,
|
|
1574
1976
|
items,
|
|
@@ -1576,26 +1978,36 @@ function DropdownMenu({
|
|
|
1576
1978
|
className,
|
|
1577
1979
|
...rest
|
|
1578
1980
|
}) {
|
|
1579
|
-
const [isOpen, setIsOpen] = (0,
|
|
1580
|
-
const containerRef = (0,
|
|
1581
|
-
const menuId = (0,
|
|
1582
|
-
const itemRefs = (0,
|
|
1981
|
+
const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
|
|
1982
|
+
const containerRef = (0, import_react11.useRef)(null);
|
|
1983
|
+
const menuId = (0, import_react11.useId)();
|
|
1984
|
+
const itemRefs = (0, import_react11.useRef)([]);
|
|
1985
|
+
const triggerRef = (0, import_react11.useRef)(null);
|
|
1583
1986
|
const open = () => {
|
|
1987
|
+
triggerRef.current = document.activeElement;
|
|
1584
1988
|
setIsOpen(true);
|
|
1585
1989
|
};
|
|
1586
|
-
const close = () =>
|
|
1587
|
-
|
|
1990
|
+
const close = (restoreFocus = false) => {
|
|
1991
|
+
setIsOpen(false);
|
|
1992
|
+
if (restoreFocus) {
|
|
1993
|
+
triggerRef.current?.focus();
|
|
1994
|
+
}
|
|
1995
|
+
};
|
|
1996
|
+
(0, import_react11.useEffect)(() => {
|
|
1588
1997
|
if (isOpen) {
|
|
1589
|
-
|
|
1998
|
+
const firstEnabledIndex = items.findIndex((item) => !item.disabled);
|
|
1999
|
+
if (firstEnabledIndex !== -1) {
|
|
2000
|
+
itemRefs.current[firstEnabledIndex]?.focus();
|
|
2001
|
+
}
|
|
1590
2002
|
}
|
|
1591
2003
|
}, [isOpen]);
|
|
1592
|
-
(0,
|
|
2004
|
+
(0, import_react11.useEffect)(() => {
|
|
1593
2005
|
if (!isOpen) return;
|
|
1594
2006
|
const handlePointerDown = (e) => {
|
|
1595
2007
|
if (!containerRef.current?.contains(e.target)) close();
|
|
1596
2008
|
};
|
|
1597
2009
|
const handleKeyDown = (e) => {
|
|
1598
|
-
if (e.key === "Escape") close();
|
|
2010
|
+
if (e.key === "Escape") close(true);
|
|
1599
2011
|
};
|
|
1600
2012
|
document.addEventListener("pointerdown", handlePointerDown);
|
|
1601
2013
|
document.addEventListener("keydown", handleKeyDown);
|
|
@@ -1623,7 +2035,7 @@ function DropdownMenu({
|
|
|
1623
2035
|
close();
|
|
1624
2036
|
}
|
|
1625
2037
|
};
|
|
1626
|
-
const triggerEl = (0,
|
|
2038
|
+
const triggerEl = (0, import_react11.isValidElement)(trigger) ? (0, import_react11.cloneElement)(trigger, {
|
|
1627
2039
|
"aria-haspopup": "menu",
|
|
1628
2040
|
"aria-expanded": isOpen,
|
|
1629
2041
|
"aria-controls": menuId,
|
|
@@ -1637,17 +2049,17 @@ function DropdownMenu({
|
|
|
1637
2049
|
if (typeof existingOnClick === "function") existingOnClick(e);
|
|
1638
2050
|
}
|
|
1639
2051
|
}) : trigger;
|
|
1640
|
-
return /* @__PURE__ */ (0,
|
|
2052
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ...rest, ref: containerRef, className: (0, import_design_system_foundation29.cn)(DropdownMenu_default.wrapper, className), children: [
|
|
1641
2053
|
triggerEl,
|
|
1642
|
-
isOpen && /* @__PURE__ */ (0,
|
|
2054
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1643
2055
|
"ul",
|
|
1644
2056
|
{
|
|
1645
2057
|
id: menuId,
|
|
1646
2058
|
role: "menu",
|
|
1647
|
-
className: (0,
|
|
1648
|
-
children: items.map((item, index) => /* @__PURE__ */ (0,
|
|
1649
|
-
item.separator && /* @__PURE__ */ (0,
|
|
1650
|
-
/* @__PURE__ */ (0,
|
|
2059
|
+
className: (0, import_design_system_foundation29.cn)(DropdownMenu_default.menu, DropdownMenu_default[`--placement_${placement}`]),
|
|
2060
|
+
children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("li", { role: "presentation", children: [
|
|
2061
|
+
item.separator && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("hr", { className: DropdownMenu_default.separator, role: "separator" }),
|
|
2062
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
1651
2063
|
"button",
|
|
1652
2064
|
{
|
|
1653
2065
|
ref: (el) => {
|
|
@@ -1659,11 +2071,11 @@ function DropdownMenu({
|
|
|
1659
2071
|
className: DropdownMenu_default.item,
|
|
1660
2072
|
onClick: () => {
|
|
1661
2073
|
item.onClick?.();
|
|
1662
|
-
close();
|
|
2074
|
+
close(true);
|
|
1663
2075
|
},
|
|
1664
2076
|
onKeyDown: (e) => handleItemKeyDown(e, index),
|
|
1665
2077
|
children: [
|
|
1666
|
-
item.icon && /* @__PURE__ */ (0,
|
|
2078
|
+
item.icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: DropdownMenu_default.icon, "aria-hidden": "true", children: item.icon }),
|
|
1667
2079
|
item.label
|
|
1668
2080
|
]
|
|
1669
2081
|
}
|
|
@@ -1675,14 +2087,14 @@ function DropdownMenu({
|
|
|
1675
2087
|
}
|
|
1676
2088
|
|
|
1677
2089
|
// src/components/interaction/Popover/Popover.tsx
|
|
1678
|
-
var
|
|
2090
|
+
var import_react12 = require("react");
|
|
1679
2091
|
|
|
1680
2092
|
// src/components/interaction/Popover/Popover.module.css
|
|
1681
|
-
var Popover_default = {"component":"
|
|
2093
|
+
var Popover_default = {"component":"bds2110Popover-component","wrapper":"bds2110Popover-wrapper","panel":"bds2110Popover-panel","g":"bds2110Popover-g"};
|
|
1682
2094
|
|
|
1683
2095
|
// src/components/interaction/Popover/Popover.tsx
|
|
1684
|
-
var
|
|
1685
|
-
var
|
|
2096
|
+
var import_design_system_foundation30 = require("@boostdev/design-system-foundation");
|
|
2097
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1686
2098
|
installInvokerCommandsPolyfill();
|
|
1687
2099
|
if (typeof window !== "undefined" && !(typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("anchor-name: --a"))) {
|
|
1688
2100
|
import("@oddbird/css-anchor-positioning").catch(() => {
|
|
@@ -1696,13 +2108,13 @@ function Popover({
|
|
|
1696
2108
|
"aria-label": ariaLabel,
|
|
1697
2109
|
...rest
|
|
1698
2110
|
}) {
|
|
1699
|
-
const [isOpen, setIsOpen] = (0,
|
|
1700
|
-
const containerRef = (0,
|
|
1701
|
-
const panelRef = (0,
|
|
1702
|
-
const rawId = (0,
|
|
2111
|
+
const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
|
|
2112
|
+
const containerRef = (0, import_react12.useRef)(null);
|
|
2113
|
+
const panelRef = (0, import_react12.useRef)(null);
|
|
2114
|
+
const rawId = (0, import_react12.useId)();
|
|
1703
2115
|
const anchorName = `--popover-${rawId.replace(/\W/g, "") || "a"}`;
|
|
1704
2116
|
const panelId = rawId;
|
|
1705
|
-
(0,
|
|
2117
|
+
(0, import_react12.useEffect)(() => {
|
|
1706
2118
|
const panel = panelRef.current;
|
|
1707
2119
|
if (!panel) return;
|
|
1708
2120
|
const handleToggle = (e) => {
|
|
@@ -1711,7 +2123,7 @@ function Popover({
|
|
|
1711
2123
|
panel.addEventListener("toggle", handleToggle);
|
|
1712
2124
|
return () => panel.removeEventListener("toggle", handleToggle);
|
|
1713
2125
|
}, []);
|
|
1714
|
-
(0,
|
|
2126
|
+
(0, import_react12.useEffect)(() => {
|
|
1715
2127
|
if (!isOpen) return;
|
|
1716
2128
|
const handleScroll = () => {
|
|
1717
2129
|
const rect = containerRef.current?.getBoundingClientRect();
|
|
@@ -1728,10 +2140,9 @@ function Popover({
|
|
|
1728
2140
|
window.removeEventListener("resize", handleScroll);
|
|
1729
2141
|
};
|
|
1730
2142
|
}, [isOpen]);
|
|
1731
|
-
const trigger = (0,
|
|
2143
|
+
const trigger = (0, import_react12.isValidElement)(children) ? (0, import_react12.cloneElement)(children, {
|
|
1732
2144
|
"aria-expanded": isOpen,
|
|
1733
2145
|
"aria-controls": panelId,
|
|
1734
|
-
"aria-haspopup": true,
|
|
1735
2146
|
commandfor: panelId,
|
|
1736
2147
|
command: "toggle-popover",
|
|
1737
2148
|
style: {
|
|
@@ -1739,13 +2150,25 @@ function Popover({
|
|
|
1739
2150
|
anchorName
|
|
1740
2151
|
},
|
|
1741
2152
|
// Forward any existing onClick on the child (for custom side-effects).
|
|
1742
|
-
//
|
|
1743
|
-
//
|
|
1744
|
-
|
|
2153
|
+
// commandfor/command handles the toggle when the trigger renders a
|
|
2154
|
+
// native <button> — don't also toggle there (avoids a double-toggle).
|
|
2155
|
+
// Invoker commands are spec-limited to <button>, so when the actual
|
|
2156
|
+
// rendered element isn't one (e.g. a plain <a> or a custom non-button
|
|
2157
|
+
// Link), fall back to an explicit togglePopover() call instead of
|
|
2158
|
+
// silently going dead. Checked on the DOM node (event.currentTarget),
|
|
2159
|
+
// not the React element type, so wrapper components that forward
|
|
2160
|
+
// props onto an inner <button> (e.g. this library's Button) still
|
|
2161
|
+
// take the native path.
|
|
2162
|
+
onClick: (event) => {
|
|
2163
|
+
children.props.onClick?.(event);
|
|
2164
|
+
if (!(event.currentTarget instanceof HTMLButtonElement)) {
|
|
2165
|
+
panelRef.current?.togglePopover();
|
|
2166
|
+
}
|
|
2167
|
+
}
|
|
1745
2168
|
}) : children;
|
|
1746
|
-
return /* @__PURE__ */ (0,
|
|
2169
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { ...rest, ref: containerRef, className: (0, import_design_system_foundation30.cn)(Popover_default.wrapper, className), children: [
|
|
1747
2170
|
trigger,
|
|
1748
|
-
/* @__PURE__ */ (0,
|
|
2171
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
1749
2172
|
"div",
|
|
1750
2173
|
{
|
|
1751
2174
|
ref: panelRef,
|
|
@@ -1763,27 +2186,27 @@ function Popover({
|
|
|
1763
2186
|
}
|
|
1764
2187
|
|
|
1765
2188
|
// src/components/interaction/Rating/Rating.module.css
|
|
1766
|
-
var Rating_default = {"component":"
|
|
2189
|
+
var Rating_default = {"component":"bds2110Rating-component","rating":"bds2110Rating-rating","star":"bds2110Rating-star","--filled":"bds2110Rating---filled"};
|
|
1767
2190
|
|
|
1768
2191
|
// src/components/interaction/Rating/Rating.tsx
|
|
1769
|
-
var
|
|
1770
|
-
var
|
|
2192
|
+
var import_design_system_foundation31 = require("@boostdev/design-system-foundation");
|
|
2193
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1771
2194
|
function Rating({ value, max = 5, className, ...rest }) {
|
|
1772
|
-
return /* @__PURE__ */ (0,
|
|
2195
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
1773
2196
|
"div",
|
|
1774
2197
|
{
|
|
1775
2198
|
...rest,
|
|
1776
|
-
className: (0,
|
|
2199
|
+
className: (0, import_design_system_foundation31.cn)(Rating_default.rating, className),
|
|
1777
2200
|
role: "img",
|
|
1778
2201
|
"aria-label": `${value} out of ${max} stars`,
|
|
1779
|
-
children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ (0,
|
|
2202
|
+
children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
1780
2203
|
"svg",
|
|
1781
2204
|
{
|
|
1782
2205
|
"aria-hidden": "true",
|
|
1783
|
-
className: (0,
|
|
2206
|
+
className: (0, import_design_system_foundation31.cn)(Rating_default.star, i < value && Rating_default["--filled"]),
|
|
1784
2207
|
fill: "currentColor",
|
|
1785
2208
|
viewBox: "0 0 24 24",
|
|
1786
|
-
children: /* @__PURE__ */ (0,
|
|
2209
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" })
|
|
1787
2210
|
},
|
|
1788
2211
|
i
|
|
1789
2212
|
))
|
|
@@ -1792,35 +2215,38 @@ function Rating({ value, max = 5, className, ...rest }) {
|
|
|
1792
2215
|
}
|
|
1793
2216
|
|
|
1794
2217
|
// src/components/interaction/Toast/Toast.tsx
|
|
1795
|
-
var
|
|
2218
|
+
var import_react13 = require("react");
|
|
1796
2219
|
|
|
1797
2220
|
// src/components/interaction/Toast/Toast.module.css
|
|
1798
|
-
var Toast_default = {"component":"
|
|
2221
|
+
var Toast_default = {"component":"bds2110Toast-component","toastContainer":"bds2110Toast-toastContainer","toast":"bds2110Toast-toast","md":"bds2110Toast-md","--variant_success":"bds2110Toast---variant_success","--variant_warning":"bds2110Toast---variant_warning","--variant_info":"bds2110Toast---variant_info","--variant_error":"bds2110Toast---variant_error","message":"bds2110Toast-message","closeButton":"bds2110Toast-closeButton"};
|
|
1799
2222
|
|
|
1800
2223
|
// src/components/interaction/Toast/Toast.tsx
|
|
1801
|
-
var
|
|
1802
|
-
var
|
|
2224
|
+
var import_design_system_foundation32 = require("@boostdev/design-system-foundation");
|
|
2225
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1803
2226
|
var _ToastContext;
|
|
1804
2227
|
function getToastContext() {
|
|
1805
|
-
_ToastContext ??= (0,
|
|
2228
|
+
_ToastContext ??= (0, import_react13.createContext)(void 0);
|
|
1806
2229
|
return _ToastContext;
|
|
1807
2230
|
}
|
|
1808
2231
|
function ToastProvider({ children }) {
|
|
1809
2232
|
const ToastContext = getToastContext();
|
|
1810
|
-
const [toasts, setToasts] = (0,
|
|
1811
|
-
const containerRef = (0,
|
|
1812
|
-
const showToast = (0,
|
|
2233
|
+
const [toasts, setToasts] = (0, import_react13.useState)([]);
|
|
2234
|
+
const containerRef = (0, import_react13.useRef)(null);
|
|
2235
|
+
const showToast = (0, import_react13.useCallback)((message, variant) => {
|
|
1813
2236
|
const id = Math.random().toString(36).substring(2, 9);
|
|
1814
2237
|
setToasts((prev) => [...prev, { id, message, variant }]);
|
|
1815
2238
|
}, []);
|
|
1816
|
-
const removeToast = (0,
|
|
2239
|
+
const removeToast = (0, import_react13.useCallback)((id) => {
|
|
1817
2240
|
setToasts((prev) => prev.filter((toast) => toast.id !== id));
|
|
1818
2241
|
}, []);
|
|
1819
|
-
(0,
|
|
2242
|
+
(0, import_react13.useEffect)(() => {
|
|
1820
2243
|
const container = containerRef.current;
|
|
1821
2244
|
if (!container) return;
|
|
1822
2245
|
if (toasts.length > 0) {
|
|
1823
|
-
|
|
2246
|
+
try {
|
|
2247
|
+
container.showPopover?.();
|
|
2248
|
+
} catch {
|
|
2249
|
+
}
|
|
1824
2250
|
} else {
|
|
1825
2251
|
try {
|
|
1826
2252
|
container.hidePopover?.();
|
|
@@ -1828,10 +2254,10 @@ function ToastProvider({ children }) {
|
|
|
1828
2254
|
}
|
|
1829
2255
|
}
|
|
1830
2256
|
}, [toasts.length]);
|
|
1831
|
-
const value = (0,
|
|
1832
|
-
return /* @__PURE__ */ (0,
|
|
2257
|
+
const value = (0, import_react13.useMemo)(() => ({ showToast }), [showToast]);
|
|
2258
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ToastContext.Provider, { value, children: [
|
|
1833
2259
|
children,
|
|
1834
|
-
/* @__PURE__ */ (0,
|
|
2260
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
1835
2261
|
"div",
|
|
1836
2262
|
{
|
|
1837
2263
|
ref: containerRef,
|
|
@@ -1839,11 +2265,11 @@ function ToastProvider({ children }) {
|
|
|
1839
2265
|
role: "region",
|
|
1840
2266
|
"aria-label": "Notifications",
|
|
1841
2267
|
className: Toast_default.toastContainer,
|
|
1842
|
-
children: toasts.map((toast) => /* @__PURE__ */ (0,
|
|
2268
|
+
children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
1843
2269
|
ToastItem,
|
|
1844
2270
|
{
|
|
1845
2271
|
toast,
|
|
1846
|
-
onRemove:
|
|
2272
|
+
onRemove: removeToast
|
|
1847
2273
|
},
|
|
1848
2274
|
toast.id
|
|
1849
2275
|
))
|
|
@@ -1852,17 +2278,17 @@ function ToastProvider({ children }) {
|
|
|
1852
2278
|
] });
|
|
1853
2279
|
}
|
|
1854
2280
|
function ToastItem({ toast, onRemove }) {
|
|
1855
|
-
(0,
|
|
1856
|
-
const timer = setTimeout(onRemove, 5e3);
|
|
2281
|
+
(0, import_react13.useEffect)(() => {
|
|
2282
|
+
const timer = setTimeout(() => onRemove(toast.id), 5e3);
|
|
1857
2283
|
return () => clearTimeout(timer);
|
|
1858
|
-
}, [onRemove]);
|
|
1859
|
-
return /* @__PURE__ */ (0,
|
|
1860
|
-
/* @__PURE__ */ (0,
|
|
1861
|
-
/* @__PURE__ */ (0,
|
|
2284
|
+
}, [onRemove, toast.id]);
|
|
2285
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: (0, import_design_system_foundation32.cn)(Toast_default.toast, Toast_default[`--variant_${toast.variant}`]), role: "status", "aria-live": "polite", "aria-atomic": "true", children: [
|
|
2286
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: Toast_default.message, children: toast.message }),
|
|
2287
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { type: "button", className: Toast_default.closeButton, onClick: () => onRemove(toast.id), "aria-label": "Dismiss", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) }) })
|
|
1862
2288
|
] });
|
|
1863
2289
|
}
|
|
1864
2290
|
function useToast() {
|
|
1865
|
-
const context = (0,
|
|
2291
|
+
const context = (0, import_react13.useContext)(getToastContext());
|
|
1866
2292
|
if (!context) {
|
|
1867
2293
|
throw new Error("useToast must be used within a ToastProvider");
|
|
1868
2294
|
}
|
|
@@ -1870,82 +2296,82 @@ function useToast() {
|
|
|
1870
2296
|
}
|
|
1871
2297
|
|
|
1872
2298
|
// src/components/interaction/form/Checkbox/Checkbox.tsx
|
|
1873
|
-
var
|
|
2299
|
+
var import_react14 = require("react");
|
|
1874
2300
|
|
|
1875
2301
|
// src/components/interaction/form/Checkbox/Checkbox.module.css
|
|
1876
|
-
var Checkbox_default = {"component":"
|
|
2302
|
+
var Checkbox_default = {"component":"bds2110Checkbox-component","checkboxGroup":"bds2110Checkbox-checkboxGroup","inputWrapper":"bds2110Checkbox-inputWrapper","checkbox":"bds2110Checkbox-checkbox","checkboxError":"bds2110Checkbox-checkboxError"};
|
|
1877
2303
|
|
|
1878
2304
|
// src/components/interaction/form/atoms/Message.module.css
|
|
1879
|
-
var Message_default = {"component":"
|
|
2305
|
+
var Message_default = {"component":"bds2110Message-component","error":"bds2110Message-error","hint":"bds2110Message-hint"};
|
|
1880
2306
|
|
|
1881
2307
|
// src/components/interaction/form/atoms/Message.tsx
|
|
1882
|
-
var
|
|
1883
|
-
var
|
|
2308
|
+
var import_design_system_foundation33 = require("@boostdev/design-system-foundation");
|
|
2309
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1884
2310
|
var Message = ({ message, type, inputId, className }) => {
|
|
1885
2311
|
if (!message) return null;
|
|
1886
|
-
return /* @__PURE__ */ (0,
|
|
2312
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { id: inputId + type, role: type === "error" ? "alert" : void 0, className: (0, import_design_system_foundation33.cn)(Message_default[type], className), children: message });
|
|
1887
2313
|
};
|
|
1888
2314
|
|
|
1889
2315
|
// src/components/interaction/form/atoms/Label.module.css
|
|
1890
|
-
var Label_default = {"component":"
|
|
2316
|
+
var Label_default = {"component":"bds2110Label-component","label":"bds2110Label-label"};
|
|
1891
2317
|
|
|
1892
2318
|
// src/components/interaction/form/atoms/Label.tsx
|
|
1893
|
-
var
|
|
1894
|
-
var
|
|
2319
|
+
var import_design_system_foundation34 = require("@boostdev/design-system-foundation");
|
|
2320
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1895
2321
|
var Label = ({ label, id, className }) => {
|
|
1896
|
-
return /* @__PURE__ */ (0,
|
|
2322
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("label", { htmlFor: id, className: (0, import_design_system_foundation34.cn)(Label_default.label, className), children: label });
|
|
1897
2323
|
};
|
|
1898
2324
|
|
|
1899
2325
|
// src/components/interaction/form/Checkbox/Checkbox.tsx
|
|
1900
|
-
var
|
|
2326
|
+
var import_design_system_foundation36 = require("@boostdev/design-system-foundation");
|
|
1901
2327
|
|
|
1902
2328
|
// src/components/interaction/form/atoms/InputContainer.module.css
|
|
1903
|
-
var InputContainer_default = {"component":"
|
|
2329
|
+
var InputContainer_default = {"component":"bds2110InputContainer-component","container":"bds2110InputContainer-container"};
|
|
1904
2330
|
|
|
1905
2331
|
// src/components/interaction/form/atoms/InputContainer.tsx
|
|
1906
|
-
var
|
|
1907
|
-
var
|
|
2332
|
+
var import_design_system_foundation35 = require("@boostdev/design-system-foundation");
|
|
2333
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1908
2334
|
var InputContainer = ({ children, className, ...rest }) => {
|
|
1909
|
-
return /* @__PURE__ */ (0,
|
|
2335
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ...rest, className: (0, import_design_system_foundation35.cn)(InputContainer_default.container, className), children });
|
|
1910
2336
|
};
|
|
1911
2337
|
|
|
1912
2338
|
// src/components/interaction/form/Checkbox/Checkbox.tsx
|
|
1913
|
-
var
|
|
2339
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
1914
2340
|
function Checkbox({ label, name, error, hint, className, ...props }) {
|
|
1915
|
-
const id = name + (0,
|
|
2341
|
+
const id = name + (0, import_react14.useId)();
|
|
1916
2342
|
const hintId = id + "hint";
|
|
1917
2343
|
const errorId = id + "error";
|
|
1918
2344
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1919
|
-
return /* @__PURE__ */ (0,
|
|
1920
|
-
/* @__PURE__ */ (0,
|
|
1921
|
-
/* @__PURE__ */ (0,
|
|
2345
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(InputContainer, { className: (0, import_design_system_foundation36.cn)(Checkbox_default.checkboxGroup, className), children: [
|
|
2346
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: Checkbox_default.inputWrapper, children: [
|
|
2347
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
1922
2348
|
"input",
|
|
1923
2349
|
{
|
|
2350
|
+
...props,
|
|
1924
2351
|
"aria-describedby": describedBy,
|
|
1925
2352
|
"aria-invalid": !!error,
|
|
1926
2353
|
type: "checkbox",
|
|
1927
2354
|
id,
|
|
1928
2355
|
name,
|
|
1929
|
-
className: (0,
|
|
1930
|
-
...props
|
|
2356
|
+
className: (0, import_design_system_foundation36.cn)(Checkbox_default.checkbox, error && Checkbox_default.checkboxError)
|
|
1931
2357
|
}
|
|
1932
2358
|
),
|
|
1933
|
-
/* @__PURE__ */ (0,
|
|
2359
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Label, { id, label })
|
|
1934
2360
|
] }),
|
|
1935
|
-
/* @__PURE__ */ (0,
|
|
1936
|
-
/* @__PURE__ */ (0,
|
|
2361
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
2362
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
1937
2363
|
] });
|
|
1938
2364
|
}
|
|
1939
2365
|
|
|
1940
2366
|
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
|
|
1941
|
-
var
|
|
2367
|
+
var import_react15 = require("react");
|
|
1942
2368
|
|
|
1943
2369
|
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css
|
|
1944
|
-
var CheckboxGroup_default = {"component":"
|
|
2370
|
+
var CheckboxGroup_default = {"component":"bds2110CheckboxGroup-component","group":"bds2110CheckboxGroup-group","legend":"bds2110CheckboxGroup-legend","required":"bds2110CheckboxGroup-required","requiredLabel":"bds2110CheckboxGroup-requiredLabel","items":"bds2110CheckboxGroup-items"};
|
|
1945
2371
|
|
|
1946
2372
|
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
|
|
1947
|
-
var
|
|
1948
|
-
var
|
|
2373
|
+
var import_design_system_foundation37 = require("@boostdev/design-system-foundation");
|
|
2374
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
1949
2375
|
function CheckboxGroup({
|
|
1950
2376
|
legend,
|
|
1951
2377
|
children,
|
|
@@ -1955,39 +2381,42 @@ function CheckboxGroup({
|
|
|
1955
2381
|
className,
|
|
1956
2382
|
...rest
|
|
1957
2383
|
}) {
|
|
1958
|
-
const id = (0,
|
|
2384
|
+
const id = (0, import_react15.useId)();
|
|
1959
2385
|
const hintId = id + "hint";
|
|
1960
2386
|
const errorId = id + "error";
|
|
1961
2387
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
1962
|
-
return /* @__PURE__ */ (0,
|
|
2388
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
1963
2389
|
"fieldset",
|
|
1964
2390
|
{
|
|
1965
2391
|
...rest,
|
|
1966
|
-
className: (0,
|
|
1967
|
-
"aria-required": required || void 0,
|
|
2392
|
+
className: (0, import_design_system_foundation37.cn)(CheckboxGroup_default.group, className),
|
|
1968
2393
|
"aria-describedby": describedBy,
|
|
1969
2394
|
children: [
|
|
1970
|
-
/* @__PURE__ */ (0,
|
|
2395
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("legend", { className: CheckboxGroup_default.legend, children: [
|
|
1971
2396
|
legend,
|
|
1972
|
-
required && /* @__PURE__ */ (0,
|
|
2397
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
2398
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: CheckboxGroup_default.required, "aria-hidden": "true", children: " *" }),
|
|
2399
|
+
" ",
|
|
2400
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: CheckboxGroup_default.requiredLabel, children: "(required)" })
|
|
2401
|
+
] })
|
|
1973
2402
|
] }),
|
|
1974
|
-
/* @__PURE__ */ (0,
|
|
1975
|
-
/* @__PURE__ */ (0,
|
|
1976
|
-
/* @__PURE__ */ (0,
|
|
2403
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: CheckboxGroup_default.items, children }),
|
|
2404
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
2405
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
1977
2406
|
]
|
|
1978
2407
|
}
|
|
1979
2408
|
);
|
|
1980
2409
|
}
|
|
1981
2410
|
|
|
1982
2411
|
// src/components/interaction/form/Combobox/Combobox.tsx
|
|
1983
|
-
var
|
|
2412
|
+
var import_react16 = require("react");
|
|
1984
2413
|
|
|
1985
2414
|
// src/components/interaction/form/Combobox/Combobox.module.css
|
|
1986
|
-
var Combobox_default = {"component":"
|
|
2415
|
+
var Combobox_default = {"component":"bds2110Combobox-component","formGroup":"bds2110Combobox-formGroup","inputWrapper":"bds2110Combobox-inputWrapper","input":"bds2110Combobox-input","inputError":"bds2110Combobox-inputError","chevron":"bds2110Combobox-chevron","listbox":"bds2110Combobox-listbox","option":"bds2110Combobox-option","--highlighted":"bds2110Combobox---highlighted","--selected":"bds2110Combobox---selected","--disabled":"bds2110Combobox---disabled"};
|
|
1987
2416
|
|
|
1988
2417
|
// src/components/interaction/form/Combobox/Combobox.tsx
|
|
1989
|
-
var
|
|
1990
|
-
var
|
|
2418
|
+
var import_design_system_foundation38 = require("@boostdev/design-system-foundation");
|
|
2419
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
1991
2420
|
function Combobox({
|
|
1992
2421
|
label,
|
|
1993
2422
|
name,
|
|
@@ -2001,25 +2430,25 @@ function Combobox({
|
|
|
2001
2430
|
className,
|
|
2002
2431
|
...rest
|
|
2003
2432
|
}) {
|
|
2004
|
-
const id = name + (0,
|
|
2433
|
+
const id = name + (0, import_react16.useId)();
|
|
2005
2434
|
const listboxId = id + "listbox";
|
|
2006
2435
|
const hintId = id + "hint";
|
|
2007
2436
|
const errorId = id + "error";
|
|
2008
2437
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2009
|
-
const selectedOption = (0,
|
|
2010
|
-
const [inputValue, setInputValue] = (0,
|
|
2011
|
-
(0,
|
|
2438
|
+
const selectedOption = (0, import_react16.useMemo)(() => options.find((o) => o.value === value), [options, value]);
|
|
2439
|
+
const [inputValue, setInputValue] = (0, import_react16.useState)(selectedOption?.label ?? "");
|
|
2440
|
+
(0, import_react16.useEffect)(() => {
|
|
2012
2441
|
setInputValue(selectedOption?.label ?? "");
|
|
2013
2442
|
}, [selectedOption]);
|
|
2014
|
-
const [isOpen, setIsOpen] = (0,
|
|
2015
|
-
const [highlightedIndex, setHighlightedIndex] = (0,
|
|
2016
|
-
const containerRef = (0,
|
|
2017
|
-
const inputRef = (0,
|
|
2443
|
+
const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
|
|
2444
|
+
const [highlightedIndex, setHighlightedIndex] = (0, import_react16.useState)(-1);
|
|
2445
|
+
const containerRef = (0, import_react16.useRef)(null);
|
|
2446
|
+
const inputRef = (0, import_react16.useRef)(null);
|
|
2018
2447
|
const filtered = options.filter(
|
|
2019
2448
|
(o) => o.label.toLowerCase().includes(inputValue.toLowerCase())
|
|
2020
2449
|
);
|
|
2021
2450
|
const getOptionId = (index) => `${id}-option-${index}`;
|
|
2022
|
-
(0,
|
|
2451
|
+
(0, import_react16.useEffect)(() => {
|
|
2023
2452
|
if (!isOpen) return;
|
|
2024
2453
|
const handlePointerDown = (e) => {
|
|
2025
2454
|
if (!containerRef.current?.contains(e.target)) setIsOpen(false);
|
|
@@ -2046,18 +2475,31 @@ function Combobox({
|
|
|
2046
2475
|
setIsOpen(true);
|
|
2047
2476
|
return;
|
|
2048
2477
|
}
|
|
2478
|
+
if (enabledIndexes.length === 0) {
|
|
2479
|
+
setHighlightedIndex(-1);
|
|
2480
|
+
return;
|
|
2481
|
+
}
|
|
2049
2482
|
const pos = enabledIndexes.indexOf(highlightedIndex);
|
|
2050
|
-
setHighlightedIndex(enabledIndexes[(pos + 1) % enabledIndexes.length]
|
|
2483
|
+
setHighlightedIndex(enabledIndexes[(pos + 1) % enabledIndexes.length]);
|
|
2051
2484
|
} else if (e.key === "ArrowUp") {
|
|
2052
2485
|
e.preventDefault();
|
|
2486
|
+
if (!isOpen) {
|
|
2487
|
+
setIsOpen(true);
|
|
2488
|
+
return;
|
|
2489
|
+
}
|
|
2490
|
+
if (enabledIndexes.length === 0) {
|
|
2491
|
+
setHighlightedIndex(-1);
|
|
2492
|
+
return;
|
|
2493
|
+
}
|
|
2053
2494
|
const pos = enabledIndexes.indexOf(highlightedIndex);
|
|
2054
2495
|
setHighlightedIndex(
|
|
2055
|
-
enabledIndexes[(pos - 1 + enabledIndexes.length) % enabledIndexes.length]
|
|
2496
|
+
enabledIndexes[(pos - 1 + enabledIndexes.length) % enabledIndexes.length]
|
|
2056
2497
|
);
|
|
2057
2498
|
} else if (e.key === "Enter") {
|
|
2058
2499
|
e.preventDefault();
|
|
2059
|
-
|
|
2060
|
-
|
|
2500
|
+
const option = filtered[highlightedIndex];
|
|
2501
|
+
if (highlightedIndex >= 0 && option && !option.disabled) {
|
|
2502
|
+
selectOption(option);
|
|
2061
2503
|
}
|
|
2062
2504
|
} else if (e.key === "Escape") {
|
|
2063
2505
|
setIsOpen(false);
|
|
@@ -2066,10 +2508,10 @@ function Combobox({
|
|
|
2066
2508
|
setIsOpen(false);
|
|
2067
2509
|
}
|
|
2068
2510
|
};
|
|
2069
|
-
return /* @__PURE__ */ (0,
|
|
2070
|
-
/* @__PURE__ */ (0,
|
|
2071
|
-
/* @__PURE__ */ (0,
|
|
2072
|
-
/* @__PURE__ */ (0,
|
|
2511
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(InputContainer, { ...rest, className: (0, import_design_system_foundation38.cn)(Combobox_default.formGroup, className), children: [
|
|
2512
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Label, { id, label }),
|
|
2513
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { ref: containerRef, className: Combobox_default.inputWrapper, children: [
|
|
2514
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
2073
2515
|
"input",
|
|
2074
2516
|
{
|
|
2075
2517
|
ref: inputRef,
|
|
@@ -2081,34 +2523,35 @@ function Combobox({
|
|
|
2081
2523
|
"aria-haspopup": "listbox",
|
|
2082
2524
|
"aria-autocomplete": "list",
|
|
2083
2525
|
"aria-controls": listboxId,
|
|
2084
|
-
"aria-activedescendant": highlightedIndex >= 0 ? getOptionId(highlightedIndex) : void 0,
|
|
2526
|
+
"aria-activedescendant": isOpen && highlightedIndex >= 0 ? getOptionId(highlightedIndex) : void 0,
|
|
2085
2527
|
"aria-invalid": !!error,
|
|
2086
2528
|
"aria-describedby": describedBy,
|
|
2087
2529
|
autoComplete: "off",
|
|
2088
2530
|
placeholder,
|
|
2089
2531
|
value: inputValue,
|
|
2090
2532
|
disabled,
|
|
2091
|
-
className: (0,
|
|
2533
|
+
className: (0, import_design_system_foundation38.cn)(Combobox_default.input, error ? Combobox_default.inputError : void 0),
|
|
2092
2534
|
onChange: handleInputChange,
|
|
2093
2535
|
onKeyDown: handleKeyDown,
|
|
2094
2536
|
onFocus: () => setIsOpen(true)
|
|
2095
2537
|
}
|
|
2096
2538
|
),
|
|
2097
|
-
/* @__PURE__ */ (0,
|
|
2098
|
-
isOpen && filtered.length > 0 && /* @__PURE__ */ (0,
|
|
2539
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: Combobox_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" }) }) }),
|
|
2540
|
+
isOpen && filtered.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
2099
2541
|
"ul",
|
|
2100
2542
|
{
|
|
2101
2543
|
id: listboxId,
|
|
2102
2544
|
role: "listbox",
|
|
2545
|
+
"aria-label": typeof label === "string" ? label : void 0,
|
|
2103
2546
|
className: Combobox_default.listbox,
|
|
2104
|
-
children: filtered.map((option, index) => /* @__PURE__ */ (0,
|
|
2547
|
+
children: filtered.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
2105
2548
|
"li",
|
|
2106
2549
|
{
|
|
2107
2550
|
id: getOptionId(index),
|
|
2108
2551
|
role: "option",
|
|
2109
2552
|
"aria-selected": option.value === value,
|
|
2110
2553
|
"aria-disabled": option.disabled,
|
|
2111
|
-
className: (0,
|
|
2554
|
+
className: (0, import_design_system_foundation38.cn)(
|
|
2112
2555
|
Combobox_default.option,
|
|
2113
2556
|
index === highlightedIndex ? Combobox_default["--highlighted"] : void 0,
|
|
2114
2557
|
option.value === value ? Combobox_default["--selected"] : void 0,
|
|
@@ -2125,20 +2568,21 @@ function Combobox({
|
|
|
2125
2568
|
}
|
|
2126
2569
|
)
|
|
2127
2570
|
] }),
|
|
2128
|
-
/* @__PURE__ */ (0,
|
|
2129
|
-
/* @__PURE__ */ (0,
|
|
2571
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
2572
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
2130
2573
|
] });
|
|
2131
2574
|
}
|
|
2132
2575
|
|
|
2133
2576
|
// src/components/interaction/form/FieldGroup/FieldGroup.tsx
|
|
2134
|
-
var
|
|
2135
|
-
var
|
|
2577
|
+
var import_react17 = require("react");
|
|
2578
|
+
var import_design_system_foundation39 = require("@boostdev/design-system-foundation");
|
|
2136
2579
|
|
|
2137
2580
|
// src/components/interaction/form/FieldGroup/FieldGroup.module.css
|
|
2138
|
-
var FieldGroup_default = {"component":"
|
|
2581
|
+
var FieldGroup_default = {"component":"bds2110FieldGroup-component","fieldGroup":"bds2110FieldGroup-fieldGroup","legend":"bds2110FieldGroup-legend","fields":"bds2110FieldGroup-fields","--variant_horizontal":"bds2110FieldGroup---variant_horizontal","probe":"bds2110FieldGroup-probe","tsx":"bds2110FieldGroup-tsx","probeContainer":"bds2110FieldGroup-probeContainer"};
|
|
2139
2582
|
|
|
2140
2583
|
// src/components/interaction/form/FieldGroup/FieldGroup.tsx
|
|
2141
|
-
var
|
|
2584
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
2585
|
+
var getInlineSize = (entry) => entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
|
|
2142
2586
|
function FieldGroup({
|
|
2143
2587
|
variant = "horizontal",
|
|
2144
2588
|
legend,
|
|
@@ -2147,34 +2591,61 @@ function FieldGroup({
|
|
|
2147
2591
|
style,
|
|
2148
2592
|
...rest
|
|
2149
2593
|
}) {
|
|
2150
|
-
const fieldCount =
|
|
2594
|
+
const fieldCount = import_react17.Children.toArray(children).length;
|
|
2151
2595
|
const styleWithCount = {
|
|
2152
2596
|
...style,
|
|
2153
2597
|
"--fieldGroup_field-count": fieldCount
|
|
2154
2598
|
};
|
|
2155
|
-
|
|
2599
|
+
const fieldsetRef = (0, import_react17.useRef)(null);
|
|
2600
|
+
const probeRef = (0, import_react17.useRef)(null);
|
|
2601
|
+
const [isCollapsed, setIsCollapsed] = (0, import_react17.useState)(false);
|
|
2602
|
+
(0, import_react17.useEffect)(() => {
|
|
2603
|
+
const fieldsetEl = fieldsetRef.current;
|
|
2604
|
+
const probeEl = probeRef.current;
|
|
2605
|
+
if (variant !== "horizontal" || !fieldsetEl || !probeEl || typeof ResizeObserver === "undefined") {
|
|
2606
|
+
setIsCollapsed(false);
|
|
2607
|
+
return;
|
|
2608
|
+
}
|
|
2609
|
+
let fieldsetSize = 0;
|
|
2610
|
+
let thresholdSize = 0;
|
|
2611
|
+
const observer = new ResizeObserver((entries) => {
|
|
2612
|
+
for (const entry of entries) {
|
|
2613
|
+
const size = getInlineSize(entry);
|
|
2614
|
+
if (entry.target === fieldsetEl) fieldsetSize = size;
|
|
2615
|
+
else if (entry.target === probeEl) thresholdSize = size;
|
|
2616
|
+
}
|
|
2617
|
+
setIsCollapsed(fieldsetSize < thresholdSize);
|
|
2618
|
+
});
|
|
2619
|
+
observer.observe(fieldsetEl);
|
|
2620
|
+
observer.observe(probeEl);
|
|
2621
|
+
return () => observer.disconnect();
|
|
2622
|
+
}, [variant]);
|
|
2623
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
2156
2624
|
"fieldset",
|
|
2157
2625
|
{
|
|
2158
2626
|
...rest,
|
|
2627
|
+
ref: fieldsetRef,
|
|
2159
2628
|
style: styleWithCount,
|
|
2160
|
-
className: (0,
|
|
2629
|
+
className: (0, import_design_system_foundation39.cn)(FieldGroup_default.fieldGroup, FieldGroup_default[`--variant_${variant}`], className),
|
|
2630
|
+
"data-collapsed": variant === "horizontal" && isCollapsed ? "true" : void 0,
|
|
2161
2631
|
children: [
|
|
2162
|
-
legend !== void 0 && /* @__PURE__ */ (0,
|
|
2163
|
-
/* @__PURE__ */ (0,
|
|
2632
|
+
legend !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("legend", { className: FieldGroup_default.legend, children: legend }),
|
|
2633
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: FieldGroup_default.fields, children }),
|
|
2634
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: FieldGroup_default.probeContainer, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ref: probeRef, className: FieldGroup_default.probe }) })
|
|
2164
2635
|
]
|
|
2165
2636
|
}
|
|
2166
2637
|
);
|
|
2167
2638
|
}
|
|
2168
2639
|
|
|
2169
2640
|
// src/components/interaction/form/FileInput/FileInput.tsx
|
|
2170
|
-
var
|
|
2641
|
+
var import_react18 = require("react");
|
|
2171
2642
|
|
|
2172
2643
|
// src/components/interaction/form/FileInput/FileInput.module.css
|
|
2173
|
-
var FileInput_default = {"component":"
|
|
2644
|
+
var FileInput_default = {"component":"bds2110FileInput-component","formGroup":"bds2110FileInput-formGroup","fieldLabel":"bds2110FileInput-fieldLabel","dropZone":"bds2110FileInput-dropZone","isDragging":"bds2110FileInput-isDragging","hasError":"bds2110FileInput-hasError","isDisabled":"bds2110FileInput-isDisabled","icon":"bds2110FileInput-icon","prompt":"bds2110FileInput-prompt","acceptHint":"bds2110FileInput-acceptHint","hiddenInput":"bds2110FileInput-hiddenInput"};
|
|
2174
2645
|
|
|
2175
2646
|
// src/components/interaction/form/FileInput/FileInput.tsx
|
|
2176
|
-
var
|
|
2177
|
-
var
|
|
2647
|
+
var import_design_system_foundation40 = require("@boostdev/design-system-foundation");
|
|
2648
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2178
2649
|
function FileInput({
|
|
2179
2650
|
label,
|
|
2180
2651
|
name,
|
|
@@ -2188,13 +2659,13 @@ function FileInput({
|
|
|
2188
2659
|
className,
|
|
2189
2660
|
...rest
|
|
2190
2661
|
}) {
|
|
2191
|
-
const uid = name + (0,
|
|
2662
|
+
const uid = name + (0, import_react18.useId)();
|
|
2192
2663
|
const hintId = uid + "hint";
|
|
2193
2664
|
const errorId = uid + "error";
|
|
2194
2665
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2195
|
-
const inputRef = (0,
|
|
2196
|
-
const [isDragging, setIsDragging] = (0,
|
|
2197
|
-
const [fileNames, setFileNames] = (0,
|
|
2666
|
+
const inputRef = (0, import_react18.useRef)(null);
|
|
2667
|
+
const [isDragging, setIsDragging] = (0, import_react18.useState)(false);
|
|
2668
|
+
const [fileNames, setFileNames] = (0, import_react18.useState)([]);
|
|
2198
2669
|
const isFileAccepted = (file) => {
|
|
2199
2670
|
if (!accept) return true;
|
|
2200
2671
|
return accept.split(",").some((token) => {
|
|
@@ -2215,7 +2686,9 @@ function FileInput({
|
|
|
2215
2686
|
setIsDragging(false);
|
|
2216
2687
|
if (disabled) return;
|
|
2217
2688
|
const dt = new DataTransfer();
|
|
2218
|
-
Array.from(e.dataTransfer.files).filter(isFileAccepted)
|
|
2689
|
+
const accepted = Array.from(e.dataTransfer.files).filter(isFileAccepted);
|
|
2690
|
+
const filesToAdd = multiple ? accepted : accepted.slice(0, 1);
|
|
2691
|
+
filesToAdd.forEach((f) => dt.items.add(f));
|
|
2219
2692
|
if (inputRef.current) inputRef.current.files = dt.files;
|
|
2220
2693
|
handleFiles(dt.files.length > 0 ? dt.files : null);
|
|
2221
2694
|
};
|
|
@@ -2223,25 +2696,27 @@ function FileInput({
|
|
|
2223
2696
|
e.preventDefault();
|
|
2224
2697
|
if (!disabled) setIsDragging(true);
|
|
2225
2698
|
};
|
|
2226
|
-
const handleDragLeave = () =>
|
|
2227
|
-
|
|
2228
|
-
|
|
2699
|
+
const handleDragLeave = (e) => {
|
|
2700
|
+
if (!e.currentTarget.contains(e.relatedTarget)) setIsDragging(false);
|
|
2701
|
+
};
|
|
2702
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(InputContainer, { ...rest, className: (0, import_design_system_foundation40.cn)(FileInput_default.formGroup, className), children: [
|
|
2703
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
2229
2704
|
"label",
|
|
2230
2705
|
{
|
|
2231
2706
|
htmlFor: uid,
|
|
2232
|
-
className: (0,
|
|
2707
|
+
className: (0, import_design_system_foundation40.cn)(FileInput_default.dropZone, isDragging && FileInput_default.isDragging, error && FileInput_default.hasError, disabled && FileInput_default.isDisabled),
|
|
2233
2708
|
onDrop: handleDrop,
|
|
2234
2709
|
onDragOver: handleDragOver,
|
|
2235
2710
|
onDragLeave: handleDragLeave,
|
|
2236
2711
|
children: [
|
|
2237
|
-
/* @__PURE__ */ (0,
|
|
2238
|
-
/* @__PURE__ */ (0,
|
|
2239
|
-
/* @__PURE__ */ (0,
|
|
2240
|
-
/* @__PURE__ */ (0,
|
|
2712
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: FileInput_default.fieldLabel, children: label }),
|
|
2713
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { "aria-hidden": "true", className: FileInput_default.icon, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" }) }),
|
|
2714
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: FileInput_default.prompt, children: fileNames.length > 0 ? fileNames.join(", ") : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
2715
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("strong", { children: "Click to upload" }),
|
|
2241
2716
|
" or drag and drop"
|
|
2242
2717
|
] }) }),
|
|
2243
|
-
accept && /* @__PURE__ */ (0,
|
|
2244
|
-
/* @__PURE__ */ (0,
|
|
2718
|
+
accept && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: FileInput_default.acceptHint, children: accept }),
|
|
2719
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
2245
2720
|
"input",
|
|
2246
2721
|
{
|
|
2247
2722
|
ref: inputRef,
|
|
@@ -2262,20 +2737,20 @@ function FileInput({
|
|
|
2262
2737
|
]
|
|
2263
2738
|
}
|
|
2264
2739
|
),
|
|
2265
|
-
/* @__PURE__ */ (0,
|
|
2266
|
-
/* @__PURE__ */ (0,
|
|
2740
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Message, { inputId: uid, type: "error", message: error }),
|
|
2741
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Message, { inputId: uid, type: "hint", message: hint })
|
|
2267
2742
|
] });
|
|
2268
2743
|
}
|
|
2269
2744
|
|
|
2270
2745
|
// src/components/interaction/form/FormInput/FormInput.tsx
|
|
2271
|
-
var
|
|
2746
|
+
var import_react19 = require("react");
|
|
2272
2747
|
|
|
2273
2748
|
// src/components/interaction/form/FormInput/FormInput.module.css
|
|
2274
|
-
var FormInput_default = {"component":"
|
|
2749
|
+
var FormInput_default = {"component":"bds2110FormInput-component","formGroup":"bds2110FormInput-formGroup","input":"bds2110FormInput-input","g":"bds2110FormInput-g","inputError":"bds2110FormInput-inputError"};
|
|
2275
2750
|
|
|
2276
2751
|
// src/components/interaction/form/FormInput/FormInput.tsx
|
|
2277
|
-
var
|
|
2278
|
-
var
|
|
2752
|
+
var import_design_system_foundation41 = require("@boostdev/design-system-foundation");
|
|
2753
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
2279
2754
|
function FormInput({
|
|
2280
2755
|
label,
|
|
2281
2756
|
name,
|
|
@@ -2284,42 +2759,43 @@ function FormInput({
|
|
|
2284
2759
|
hint,
|
|
2285
2760
|
className,
|
|
2286
2761
|
required,
|
|
2762
|
+
"aria-label": nativeAriaLabel,
|
|
2287
2763
|
...props
|
|
2288
2764
|
}) {
|
|
2289
|
-
const id = name + (0,
|
|
2765
|
+
const id = name + (0, import_react19.useId)();
|
|
2290
2766
|
const hintId = id + "hint";
|
|
2291
2767
|
const errorId = id + "error";
|
|
2292
2768
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2293
|
-
return /* @__PURE__ */ (0,
|
|
2294
|
-
/* @__PURE__ */ (0,
|
|
2295
|
-
/* @__PURE__ */ (0,
|
|
2769
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(InputContainer, { className: (0, import_design_system_foundation41.cn)(FormInput_default.formGroup, className), children: [
|
|
2770
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Label, { id, label }),
|
|
2771
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
2296
2772
|
"input",
|
|
2297
2773
|
{
|
|
2774
|
+
...props,
|
|
2298
2775
|
"aria-invalid": !!error,
|
|
2299
2776
|
"aria-describedby": describedBy,
|
|
2300
|
-
"aria-label": ariaLabel,
|
|
2777
|
+
"aria-label": ariaLabel ?? nativeAriaLabel,
|
|
2301
2778
|
"aria-required": required || void 0,
|
|
2302
2779
|
id,
|
|
2303
2780
|
name,
|
|
2304
2781
|
required,
|
|
2305
|
-
className: (0,
|
|
2306
|
-
...props
|
|
2782
|
+
className: (0, import_design_system_foundation41.cn)(FormInput_default.input, error && FormInput_default.inputError)
|
|
2307
2783
|
}
|
|
2308
2784
|
),
|
|
2309
|
-
/* @__PURE__ */ (0,
|
|
2310
|
-
/* @__PURE__ */ (0,
|
|
2785
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
2786
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
2311
2787
|
] });
|
|
2312
2788
|
}
|
|
2313
2789
|
|
|
2314
2790
|
// src/components/interaction/form/NumberInput/NumberInput.tsx
|
|
2315
|
-
var
|
|
2791
|
+
var import_react20 = require("react");
|
|
2316
2792
|
|
|
2317
2793
|
// src/components/interaction/form/NumberInput/NumberInput.module.css
|
|
2318
|
-
var NumberInput_default = {"component":"
|
|
2794
|
+
var NumberInput_default = {"component":"bds2110NumberInput-component","formGroup":"bds2110NumberInput-formGroup","inputRow":"bds2110NumberInput-inputRow","input":"bds2110NumberInput-input","inputError":"bds2110NumberInput-inputError","stepper":"bds2110NumberInput-stepper"};
|
|
2319
2795
|
|
|
2320
2796
|
// src/components/interaction/form/NumberInput/NumberInput.tsx
|
|
2321
|
-
var
|
|
2322
|
-
var
|
|
2797
|
+
var import_design_system_foundation42 = require("@boostdev/design-system-foundation");
|
|
2798
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
2323
2799
|
function NumberInput({
|
|
2324
2800
|
label,
|
|
2325
2801
|
name,
|
|
@@ -2333,16 +2809,23 @@ function NumberInput({
|
|
|
2333
2809
|
hint,
|
|
2334
2810
|
onChange,
|
|
2335
2811
|
className,
|
|
2812
|
+
decreaseLabel = "Decrease",
|
|
2813
|
+
increaseLabel = "Increase",
|
|
2336
2814
|
...rest
|
|
2337
2815
|
}) {
|
|
2338
|
-
const uid = name + (0,
|
|
2816
|
+
const uid = name + (0, import_react20.useId)();
|
|
2339
2817
|
const hintId = uid + "hint";
|
|
2340
2818
|
const errorId = uid + "error";
|
|
2341
2819
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2342
|
-
const inputRef = (0,
|
|
2820
|
+
const inputRef = (0, import_react20.useRef)(null);
|
|
2343
2821
|
const isControlled = value !== void 0;
|
|
2344
|
-
const [internalValue, setInternalValue] = (0,
|
|
2822
|
+
const [internalValue, setInternalValue] = (0, import_react20.useState)(defaultValue ?? 0);
|
|
2345
2823
|
const currentValue = isControlled ? value : internalValue;
|
|
2824
|
+
const [controlledDraft, setControlledDraft] = (0, import_react20.useState)(() => isControlled ? String(value) : "");
|
|
2825
|
+
(0, import_react20.useEffect)(() => {
|
|
2826
|
+
if (!isControlled) return;
|
|
2827
|
+
setControlledDraft((prev) => parseFloat(prev) === value ? prev : String(value));
|
|
2828
|
+
}, [isControlled, value]);
|
|
2346
2829
|
const clamp = (v) => {
|
|
2347
2830
|
const withMin = min !== void 0 ? Math.max(min, v) : v;
|
|
2348
2831
|
return max !== void 0 ? Math.min(max, withMin) : withMin;
|
|
@@ -2355,84 +2838,91 @@ function NumberInput({
|
|
|
2355
2838
|
inputRef.current.value = String(next);
|
|
2356
2839
|
inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
|
|
2357
2840
|
}
|
|
2841
|
+
} else {
|
|
2842
|
+
setControlledDraft(String(next));
|
|
2358
2843
|
}
|
|
2359
2844
|
onChange?.(next);
|
|
2360
2845
|
};
|
|
2361
|
-
return /* @__PURE__ */ (0,
|
|
2362
|
-
/* @__PURE__ */ (0,
|
|
2363
|
-
/* @__PURE__ */ (0,
|
|
2364
|
-
/* @__PURE__ */ (0,
|
|
2846
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(InputContainer, { ...rest, className: (0, import_design_system_foundation42.cn)(NumberInput_default.formGroup, className), children: [
|
|
2847
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Label, { id: uid, label }),
|
|
2848
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: NumberInput_default.inputRow, children: [
|
|
2849
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2365
2850
|
"button",
|
|
2366
2851
|
{
|
|
2367
2852
|
type: "button",
|
|
2368
2853
|
className: NumberInput_default.stepper,
|
|
2369
|
-
"aria-label":
|
|
2854
|
+
"aria-label": decreaseLabel,
|
|
2370
2855
|
"aria-controls": uid,
|
|
2371
2856
|
disabled: disabled || min !== void 0 && currentValue <= min,
|
|
2372
2857
|
onClick: () => adjust(-step),
|
|
2373
2858
|
tabIndex: -1,
|
|
2374
|
-
children: /* @__PURE__ */ (0,
|
|
2859
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12h14" }) })
|
|
2375
2860
|
}
|
|
2376
2861
|
),
|
|
2377
|
-
/* @__PURE__ */ (0,
|
|
2862
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2378
2863
|
"input",
|
|
2379
2864
|
{
|
|
2380
2865
|
ref: inputRef,
|
|
2381
2866
|
id: uid,
|
|
2382
2867
|
type: "number",
|
|
2383
2868
|
name,
|
|
2384
|
-
...isControlled ? { value } : { defaultValue },
|
|
2869
|
+
...isControlled ? { value: controlledDraft } : { defaultValue },
|
|
2385
2870
|
min,
|
|
2386
2871
|
max,
|
|
2387
2872
|
step,
|
|
2388
2873
|
disabled,
|
|
2389
2874
|
"aria-invalid": !!error,
|
|
2390
2875
|
"aria-describedby": describedBy,
|
|
2391
|
-
className: (0,
|
|
2876
|
+
className: (0, import_design_system_foundation42.cn)(NumberInput_default.input, error ? NumberInput_default.inputError : void 0),
|
|
2392
2877
|
onChange: (e) => {
|
|
2393
|
-
|
|
2394
|
-
const
|
|
2395
|
-
if (
|
|
2396
|
-
|
|
2878
|
+
if (e.target.validity.badInput) return;
|
|
2879
|
+
const raw = e.target.value;
|
|
2880
|
+
if (isControlled) setControlledDraft(raw);
|
|
2881
|
+
if (raw === "") return;
|
|
2882
|
+
const parsed = parseFloat(raw);
|
|
2883
|
+
if (Number.isNaN(parsed)) return;
|
|
2884
|
+
if (!isControlled) setInternalValue(parsed);
|
|
2885
|
+
onChange?.(parsed);
|
|
2397
2886
|
}
|
|
2398
2887
|
}
|
|
2399
2888
|
),
|
|
2400
|
-
/* @__PURE__ */ (0,
|
|
2889
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2401
2890
|
"button",
|
|
2402
2891
|
{
|
|
2403
2892
|
type: "button",
|
|
2404
2893
|
className: NumberInput_default.stepper,
|
|
2405
|
-
"aria-label":
|
|
2894
|
+
"aria-label": increaseLabel,
|
|
2406
2895
|
"aria-controls": uid,
|
|
2407
2896
|
disabled: disabled || max !== void 0 && currentValue >= max,
|
|
2408
2897
|
onClick: () => adjust(step),
|
|
2409
2898
|
tabIndex: -1,
|
|
2410
|
-
children: /* @__PURE__ */ (0,
|
|
2899
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 5v14M5 12h14" }) })
|
|
2411
2900
|
}
|
|
2412
2901
|
)
|
|
2413
2902
|
] }),
|
|
2414
|
-
/* @__PURE__ */ (0,
|
|
2415
|
-
/* @__PURE__ */ (0,
|
|
2903
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Message, { inputId: uid, type: "error", message: error }),
|
|
2904
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Message, { inputId: uid, type: "hint", message: hint })
|
|
2416
2905
|
] });
|
|
2417
2906
|
}
|
|
2418
2907
|
|
|
2419
2908
|
// src/components/interaction/form/Radio/Radio.tsx
|
|
2420
|
-
var
|
|
2909
|
+
var import_react21 = require("react");
|
|
2421
2910
|
|
|
2422
2911
|
// src/components/interaction/form/Radio/Radio.module.css
|
|
2423
|
-
var Radio_default = {"component":"
|
|
2912
|
+
var Radio_default = {"component":"bds2110Radio-component","radioGroup":"bds2110Radio-radioGroup","inputWrapper":"bds2110Radio-inputWrapper","textWrapper":"bds2110Radio-textWrapper","description":"bds2110Radio-description","radio":"bds2110Radio-radio","g":"bds2110Radio-g","radioError":"bds2110Radio-radioError"};
|
|
2424
2913
|
|
|
2425
2914
|
// src/components/interaction/form/Radio/Radio.tsx
|
|
2426
|
-
var
|
|
2427
|
-
var
|
|
2428
|
-
function Radio({ label, name, description, error, hint, className, ...props }) {
|
|
2429
|
-
const id = name + (0,
|
|
2915
|
+
var import_design_system_foundation43 = require("@boostdev/design-system-foundation");
|
|
2916
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
2917
|
+
function Radio({ label, name, description, error, hint, className, id: consumerId, ...props }) {
|
|
2918
|
+
const id = consumerId ?? name + (0, import_react21.useId)();
|
|
2919
|
+
const descriptionId = id + "description";
|
|
2430
2920
|
const hintId = id + "hint";
|
|
2431
2921
|
const errorId = id + "error";
|
|
2432
|
-
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2433
|
-
return /* @__PURE__ */ (0,
|
|
2434
|
-
/* @__PURE__ */ (0,
|
|
2435
|
-
/* @__PURE__ */ (0,
|
|
2922
|
+
const describedBy = [description && descriptionId, error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2923
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(InputContainer, { className: (0, import_design_system_foundation43.cn)(Radio_default.radioGroup, className), children: [
|
|
2924
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: Radio_default.inputWrapper, children: [
|
|
2925
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
2436
2926
|
"input",
|
|
2437
2927
|
{
|
|
2438
2928
|
"aria-describedby": describedBy,
|
|
@@ -2440,29 +2930,29 @@ function Radio({ label, name, description, error, hint, className, ...props }) {
|
|
|
2440
2930
|
type: "radio",
|
|
2441
2931
|
id,
|
|
2442
2932
|
name,
|
|
2443
|
-
className: (0,
|
|
2933
|
+
className: (0, import_design_system_foundation43.cn)(Radio_default.radio, error && Radio_default.radioError),
|
|
2444
2934
|
...props
|
|
2445
2935
|
}
|
|
2446
2936
|
),
|
|
2447
|
-
/* @__PURE__ */ (0,
|
|
2448
|
-
/* @__PURE__ */ (0,
|
|
2449
|
-
description && /* @__PURE__ */ (0,
|
|
2937
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: Radio_default.textWrapper, children: [
|
|
2938
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Label, { id, label }),
|
|
2939
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { id: descriptionId, className: Radio_default.description, children: description })
|
|
2450
2940
|
] })
|
|
2451
2941
|
] }),
|
|
2452
|
-
/* @__PURE__ */ (0,
|
|
2453
|
-
/* @__PURE__ */ (0,
|
|
2942
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
2943
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
2454
2944
|
] });
|
|
2455
2945
|
}
|
|
2456
2946
|
|
|
2457
2947
|
// src/components/interaction/form/RadioGroup/RadioGroup.tsx
|
|
2458
|
-
var
|
|
2948
|
+
var import_react22 = require("react");
|
|
2459
2949
|
|
|
2460
2950
|
// src/components/interaction/form/RadioGroup/RadioGroup.module.css
|
|
2461
|
-
var RadioGroup_default = {"component":"
|
|
2951
|
+
var RadioGroup_default = {"component":"bds2110RadioGroup-component","group":"bds2110RadioGroup-group","legend":"bds2110RadioGroup-legend","required":"bds2110RadioGroup-required","requiredLabel":"bds2110RadioGroup-requiredLabel","items":"bds2110RadioGroup-items"};
|
|
2462
2952
|
|
|
2463
2953
|
// src/components/interaction/form/RadioGroup/RadioGroup.tsx
|
|
2464
|
-
var
|
|
2465
|
-
var
|
|
2954
|
+
var import_design_system_foundation44 = require("@boostdev/design-system-foundation");
|
|
2955
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
2466
2956
|
function RadioGroup({
|
|
2467
2957
|
legend,
|
|
2468
2958
|
children,
|
|
@@ -2472,39 +2962,45 @@ function RadioGroup({
|
|
|
2472
2962
|
className,
|
|
2473
2963
|
...rest
|
|
2474
2964
|
}) {
|
|
2475
|
-
const id = (0,
|
|
2965
|
+
const id = (0, import_react22.useId)();
|
|
2476
2966
|
const hintId = id + "hint";
|
|
2477
2967
|
const errorId = id + "error";
|
|
2478
2968
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2479
|
-
return /* @__PURE__ */ (0,
|
|
2969
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
2480
2970
|
"fieldset",
|
|
2481
2971
|
{
|
|
2482
2972
|
...rest,
|
|
2483
|
-
className: (0,
|
|
2484
|
-
"aria-required": required || void 0,
|
|
2973
|
+
className: (0, import_design_system_foundation44.cn)(RadioGroup_default.group, className),
|
|
2485
2974
|
"aria-describedby": describedBy,
|
|
2486
2975
|
children: [
|
|
2487
|
-
/* @__PURE__ */ (0,
|
|
2976
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("legend", { className: RadioGroup_default.legend, children: [
|
|
2488
2977
|
legend,
|
|
2489
|
-
required && /* @__PURE__ */ (0,
|
|
2978
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
|
|
2979
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: RadioGroup_default.required, "aria-hidden": "true", children: " *" }),
|
|
2980
|
+
" ",
|
|
2981
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: RadioGroup_default.requiredLabel, children: "(required)" })
|
|
2982
|
+
] })
|
|
2490
2983
|
] }),
|
|
2491
|
-
/* @__PURE__ */ (0,
|
|
2492
|
-
/* @__PURE__ */ (0,
|
|
2493
|
-
/* @__PURE__ */ (0,
|
|
2984
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: RadioGroup_default.items, children }),
|
|
2985
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
2986
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
2494
2987
|
]
|
|
2495
2988
|
}
|
|
2496
2989
|
);
|
|
2497
2990
|
}
|
|
2498
2991
|
|
|
2499
2992
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
|
|
2500
|
-
var
|
|
2993
|
+
var import_react23 = require("react");
|
|
2501
2994
|
|
|
2502
2995
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.module.css
|
|
2503
|
-
var SegmentedControl_default = {"component":"
|
|
2996
|
+
var SegmentedControl_default = {"component":"bds2110SegmentedControl-component","control":"bds2110SegmentedControl-control","thumb":"bds2110SegmentedControl-thumb","indicator":"bds2110SegmentedControl-indicator","item":"bds2110SegmentedControl-item","--active":"bds2110SegmentedControl---active","--disabled":"bds2110SegmentedControl---disabled","--size_small":"bds2110SegmentedControl---size_small","--size_large":"bds2110SegmentedControl---size_large","--variant_outline":"bds2110SegmentedControl---variant_outline","--no-selection":"bds2110SegmentedControl---no-selection"};
|
|
2504
2997
|
|
|
2505
2998
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
|
|
2506
|
-
var
|
|
2507
|
-
var
|
|
2999
|
+
var import_design_system_foundation45 = require("@boostdev/design-system-foundation");
|
|
3000
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
3001
|
+
var preventDisabledActivation = (event) => {
|
|
3002
|
+
event.preventDefault();
|
|
3003
|
+
};
|
|
2508
3004
|
function SegmentedControl({
|
|
2509
3005
|
children,
|
|
2510
3006
|
selectedIndex: selectedIndexProp,
|
|
@@ -2514,35 +3010,55 @@ function SegmentedControl({
|
|
|
2514
3010
|
className,
|
|
2515
3011
|
...rest
|
|
2516
3012
|
}) {
|
|
2517
|
-
const validChildren =
|
|
3013
|
+
const validChildren = import_react23.Children.toArray(children).filter(import_react23.isValidElement);
|
|
2518
3014
|
const autoIndex = selectedIndexProp === void 0 ? validChildren.findIndex((child) => {
|
|
2519
3015
|
const p = child.props;
|
|
2520
3016
|
return p["aria-current"] === "page" || p["aria-pressed"] === true || p["aria-selected"] === true;
|
|
2521
3017
|
}) : -1;
|
|
2522
|
-
const activeIndex = Math.max(0,
|
|
2523
|
-
return /* @__PURE__ */ (0,
|
|
3018
|
+
const activeIndex = validChildren.length === 0 ? void 0 : selectedIndexProp !== void 0 ? Math.min(Math.max(selectedIndexProp, 0), validChildren.length - 1) : autoIndex >= 0 ? autoIndex : void 0;
|
|
3019
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
|
|
2524
3020
|
"div",
|
|
2525
3021
|
{
|
|
2526
3022
|
...rest,
|
|
2527
3023
|
role: "group",
|
|
2528
|
-
className: (0,
|
|
3024
|
+
className: (0, import_design_system_foundation45.cn)(
|
|
3025
|
+
SegmentedControl_default.control,
|
|
3026
|
+
SegmentedControl_default[`--size_${size}`],
|
|
3027
|
+
SegmentedControl_default[`--variant_${variant}`],
|
|
3028
|
+
activeIndex === void 0 && SegmentedControl_default["--no-selection"],
|
|
3029
|
+
className
|
|
3030
|
+
),
|
|
2529
3031
|
style: {
|
|
2530
3032
|
"--control_count": validChildren.length,
|
|
2531
|
-
"--control_selected-index": activeIndex
|
|
3033
|
+
...activeIndex !== void 0 ? { "--control_selected-index": activeIndex } : {}
|
|
2532
3034
|
},
|
|
2533
3035
|
children: [
|
|
2534
|
-
/* @__PURE__ */ (0,
|
|
2535
|
-
/* @__PURE__ */ (0,
|
|
3036
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: SegmentedControl_default.thumb, "aria-hidden": "true" }),
|
|
3037
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: SegmentedControl_default.indicator, "aria-hidden": "true" }),
|
|
2536
3038
|
validChildren.map((child, index) => {
|
|
2537
3039
|
const isActive = index === activeIndex;
|
|
2538
3040
|
const p = child.props;
|
|
2539
|
-
const
|
|
2540
|
-
|
|
3041
|
+
const isDisabled2 = disabled || !!p.disabled || p["aria-disabled"] === true;
|
|
3042
|
+
const hasAriaState = p["aria-current"] !== void 0 || p["aria-pressed"] !== void 0 || p["aria-selected"] !== void 0;
|
|
3043
|
+
const stateProps = {};
|
|
3044
|
+
if (isDisabled2) {
|
|
3045
|
+
stateProps["aria-disabled"] = true;
|
|
3046
|
+
if (child.type === "button") {
|
|
3047
|
+
stateProps.disabled = true;
|
|
3048
|
+
} else {
|
|
3049
|
+
stateProps.tabIndex = -1;
|
|
3050
|
+
stateProps.onClick = preventDisabledActivation;
|
|
3051
|
+
}
|
|
3052
|
+
} else if (isActive && selectedIndexProp !== void 0 && !hasAriaState) {
|
|
3053
|
+
stateProps[child.type === "a" ? "aria-current" : "aria-pressed"] = child.type === "a" ? "page" : true;
|
|
3054
|
+
}
|
|
3055
|
+
return (0, import_react23.cloneElement)(child, {
|
|
2541
3056
|
key: child.key ?? index,
|
|
2542
|
-
|
|
3057
|
+
...stateProps,
|
|
3058
|
+
className: (0, import_design_system_foundation45.cn)(
|
|
2543
3059
|
SegmentedControl_default.item,
|
|
2544
3060
|
isActive && SegmentedControl_default["--active"],
|
|
2545
|
-
|
|
3061
|
+
isDisabled2 && SegmentedControl_default["--disabled"],
|
|
2546
3062
|
p.className
|
|
2547
3063
|
)
|
|
2548
3064
|
});
|
|
@@ -2553,14 +3069,14 @@ function SegmentedControl({
|
|
|
2553
3069
|
}
|
|
2554
3070
|
|
|
2555
3071
|
// src/components/interaction/form/Select/Select.tsx
|
|
2556
|
-
var
|
|
3072
|
+
var import_react24 = require("react");
|
|
2557
3073
|
|
|
2558
3074
|
// src/components/interaction/form/Select/Select.module.css
|
|
2559
|
-
var Select_default = {"component":"
|
|
3075
|
+
var Select_default = {"component":"bds2110Select-component","formGroup":"bds2110Select-formGroup","selectWrapper":"bds2110Select-selectWrapper","select":"bds2110Select-select","selectError":"bds2110Select-selectError","chevron":"bds2110Select-chevron"};
|
|
2560
3076
|
|
|
2561
3077
|
// src/components/interaction/form/Select/Select.tsx
|
|
2562
|
-
var
|
|
2563
|
-
var
|
|
3078
|
+
var import_design_system_foundation46 = require("@boostdev/design-system-foundation");
|
|
3079
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
2564
3080
|
function Select({
|
|
2565
3081
|
label,
|
|
2566
3082
|
name,
|
|
@@ -2570,48 +3086,55 @@ function Select({
|
|
|
2570
3086
|
hint,
|
|
2571
3087
|
className,
|
|
2572
3088
|
required,
|
|
2573
|
-
|
|
3089
|
+
id,
|
|
3090
|
+
value,
|
|
3091
|
+
defaultValue,
|
|
3092
|
+
...rest
|
|
2574
3093
|
}) {
|
|
2575
|
-
const
|
|
2576
|
-
const
|
|
2577
|
-
const
|
|
3094
|
+
const generatedId = name + (0, import_react24.useId)();
|
|
3095
|
+
const selectId = id ?? generatedId;
|
|
3096
|
+
const hintId = selectId + "hint";
|
|
3097
|
+
const errorId = selectId + "error";
|
|
2578
3098
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2579
|
-
|
|
2580
|
-
|
|
2581
|
-
|
|
2582
|
-
|
|
3099
|
+
const isControlled = value !== void 0;
|
|
3100
|
+
const initialValueProps = isControlled ? { value } : { defaultValue: defaultValue ?? (placeholder ? "" : void 0) };
|
|
3101
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(InputContainer, { className: (0, import_design_system_foundation46.cn)(Select_default.formGroup, className), children: [
|
|
3102
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Label, { id: selectId, label }),
|
|
3103
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: Select_default.selectWrapper, children: [
|
|
3104
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
2583
3105
|
"select",
|
|
2584
3106
|
{
|
|
2585
|
-
|
|
3107
|
+
...rest,
|
|
3108
|
+
id: selectId,
|
|
2586
3109
|
name,
|
|
2587
3110
|
"aria-invalid": !!error,
|
|
2588
3111
|
"aria-required": required || void 0,
|
|
2589
3112
|
"aria-describedby": describedBy,
|
|
2590
3113
|
required,
|
|
2591
|
-
className: (0,
|
|
2592
|
-
...
|
|
3114
|
+
className: (0, import_design_system_foundation46.cn)(Select_default.select, error ? Select_default.selectError : void 0),
|
|
3115
|
+
...initialValueProps,
|
|
2593
3116
|
children: [
|
|
2594
|
-
placeholder && /* @__PURE__ */ (0,
|
|
2595
|
-
options.map(({ value, label: optLabel, disabled }) => /* @__PURE__ */ (0,
|
|
3117
|
+
placeholder && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("option", { value: "", disabled: true, hidden: true, children: placeholder }),
|
|
3118
|
+
options.map(({ value: value2, label: optLabel, disabled }) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("option", { value: value2, disabled, children: optLabel }, value2))
|
|
2596
3119
|
]
|
|
2597
3120
|
}
|
|
2598
3121
|
),
|
|
2599
|
-
/* @__PURE__ */ (0,
|
|
3122
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: Select_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" }) }) })
|
|
2600
3123
|
] }),
|
|
2601
|
-
/* @__PURE__ */ (0,
|
|
2602
|
-
/* @__PURE__ */ (0,
|
|
3124
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Message, { inputId: selectId, type: "error", message: error }),
|
|
3125
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Message, { inputId: selectId, type: "hint", message: hint })
|
|
2603
3126
|
] });
|
|
2604
3127
|
}
|
|
2605
3128
|
|
|
2606
3129
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
2607
|
-
var
|
|
3130
|
+
var import_react25 = require("react");
|
|
2608
3131
|
|
|
2609
3132
|
// src/components/interaction/form/Slider/Slider.module.css
|
|
2610
|
-
var Slider_default = {"component":"
|
|
3133
|
+
var Slider_default = {"component":"bds2110Slider-component","formGroup":"bds2110Slider-formGroup","labelRow":"bds2110Slider-labelRow","value":"bds2110Slider-value","slider":"bds2110Slider-slider","sliderError":"bds2110Slider-sliderError"};
|
|
2611
3134
|
|
|
2612
3135
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
2613
|
-
var
|
|
2614
|
-
var
|
|
3136
|
+
var import_design_system_foundation47 = require("@boostdev/design-system-foundation");
|
|
3137
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
2615
3138
|
function Slider({
|
|
2616
3139
|
label,
|
|
2617
3140
|
name,
|
|
@@ -2624,56 +3147,55 @@ function Slider({
|
|
|
2624
3147
|
onChange,
|
|
2625
3148
|
...props
|
|
2626
3149
|
}) {
|
|
2627
|
-
const id = name + (0,
|
|
3150
|
+
const id = name + (0, import_react25.useId)();
|
|
2628
3151
|
const hintId = id + "hint";
|
|
2629
3152
|
const errorId = id + "error";
|
|
2630
3153
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2631
3154
|
const isControlled = props.value !== void 0;
|
|
2632
|
-
const [internalValue, setInternalValue] = (0,
|
|
3155
|
+
const [internalValue, setInternalValue] = (0, import_react25.useState)(
|
|
3156
|
+
Number(props.defaultValue ?? min + (max - min) / 2)
|
|
3157
|
+
);
|
|
2633
3158
|
const currentValue = isControlled ? Number(props.value) : internalValue;
|
|
2634
3159
|
const fillPct = (currentValue - min) / (max - min) * 100;
|
|
2635
3160
|
const handleChange = (e) => {
|
|
2636
3161
|
if (!isControlled) setInternalValue(Number(e.target.value));
|
|
2637
3162
|
onChange?.(e);
|
|
2638
3163
|
};
|
|
2639
|
-
return /* @__PURE__ */ (0,
|
|
2640
|
-
/* @__PURE__ */ (0,
|
|
2641
|
-
/* @__PURE__ */ (0,
|
|
2642
|
-
showValue && /* @__PURE__ */ (0,
|
|
3164
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(InputContainer, { className: (0, import_design_system_foundation47.cn)(Slider_default.formGroup, className), children: [
|
|
3165
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: Slider_default.labelRow, children: [
|
|
3166
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Label, { id, label }),
|
|
3167
|
+
showValue && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: Slider_default.value, children: currentValue })
|
|
2643
3168
|
] }),
|
|
2644
|
-
/* @__PURE__ */ (0,
|
|
3169
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
2645
3170
|
"input",
|
|
2646
3171
|
{
|
|
3172
|
+
...props,
|
|
2647
3173
|
type: "range",
|
|
2648
3174
|
id,
|
|
2649
3175
|
name,
|
|
2650
3176
|
min,
|
|
2651
3177
|
max,
|
|
3178
|
+
"aria-invalid": !!error,
|
|
2652
3179
|
"aria-describedby": describedBy,
|
|
2653
|
-
|
|
2654
|
-
"
|
|
2655
|
-
|
|
2656
|
-
"aria-valuetext": String(currentValue),
|
|
2657
|
-
className: (0, import_design_system_foundation45.cn)(Slider_default.slider, error ? Slider_default.sliderError : void 0),
|
|
2658
|
-
style: { "--slider_fill": `${fillPct}%` },
|
|
2659
|
-
onChange: handleChange,
|
|
2660
|
-
...props
|
|
3180
|
+
className: (0, import_design_system_foundation47.cn)(Slider_default.slider, error ? Slider_default.sliderError : void 0),
|
|
3181
|
+
style: { ...props.style, "--slider_fill": `${fillPct}%` },
|
|
3182
|
+
onChange: handleChange
|
|
2661
3183
|
}
|
|
2662
3184
|
),
|
|
2663
|
-
/* @__PURE__ */ (0,
|
|
2664
|
-
/* @__PURE__ */ (0,
|
|
3185
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
3186
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
2665
3187
|
] });
|
|
2666
3188
|
}
|
|
2667
3189
|
|
|
2668
3190
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2669
|
-
var
|
|
3191
|
+
var import_react26 = require("react");
|
|
2670
3192
|
|
|
2671
3193
|
// src/components/interaction/form/Switch/Switch.module.css
|
|
2672
|
-
var Switch_default = {"component":"
|
|
3194
|
+
var Switch_default = {"component":"bds2110Switch-component","switchGroup":"bds2110Switch-switchGroup","--size_small":"bds2110Switch---size_small","--size_medium":"bds2110Switch---size_medium","--size_large":"bds2110Switch---size_large","inputWrapper":"bds2110Switch-inputWrapper","trackWrapper":"bds2110Switch-trackWrapper","switch":"bds2110Switch-switch","track":"bds2110Switch-track","thumb":"bds2110Switch-thumb","switchError":"bds2110Switch-switchError"};
|
|
2673
3195
|
|
|
2674
3196
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2675
|
-
var
|
|
2676
|
-
var
|
|
3197
|
+
var import_design_system_foundation48 = require("@boostdev/design-system-foundation");
|
|
3198
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
2677
3199
|
function Switch({
|
|
2678
3200
|
label,
|
|
2679
3201
|
name,
|
|
@@ -2684,44 +3206,45 @@ function Switch({
|
|
|
2684
3206
|
prefix,
|
|
2685
3207
|
...props
|
|
2686
3208
|
}) {
|
|
2687
|
-
const id = name + (0,
|
|
3209
|
+
const id = name + (0, import_react26.useId)();
|
|
2688
3210
|
const hintId = id + "hint";
|
|
2689
3211
|
const errorId = id + "error";
|
|
2690
3212
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2691
|
-
return /* @__PURE__ */ (0,
|
|
2692
|
-
/* @__PURE__ */ (0,
|
|
2693
|
-
prefix && /* @__PURE__ */ (0,
|
|
2694
|
-
/* @__PURE__ */ (0,
|
|
2695
|
-
/* @__PURE__ */ (0,
|
|
3213
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(InputContainer, { className: (0, import_design_system_foundation48.cn)(Switch_default.switchGroup, Switch_default[`--size_${size}`], className), children: [
|
|
3214
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: Switch_default.inputWrapper, children: [
|
|
3215
|
+
prefix && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { children: prefix }),
|
|
3216
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: Switch_default.trackWrapper, children: [
|
|
3217
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
2696
3218
|
"input",
|
|
2697
3219
|
{
|
|
3220
|
+
...props,
|
|
2698
3221
|
type: "checkbox",
|
|
2699
3222
|
role: "switch",
|
|
2700
3223
|
id,
|
|
2701
3224
|
name,
|
|
2702
3225
|
"aria-describedby": describedBy,
|
|
2703
|
-
|
|
2704
|
-
|
|
3226
|
+
"aria-invalid": !!error,
|
|
3227
|
+
className: (0, import_design_system_foundation48.cn)(Switch_default.switch, error ? Switch_default.switchError : void 0)
|
|
2705
3228
|
}
|
|
2706
3229
|
),
|
|
2707
|
-
/* @__PURE__ */ (0,
|
|
3230
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: Switch_default.track, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: Switch_default.thumb }) })
|
|
2708
3231
|
] }),
|
|
2709
|
-
/* @__PURE__ */ (0,
|
|
3232
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Label, { id, label })
|
|
2710
3233
|
] }),
|
|
2711
|
-
/* @__PURE__ */ (0,
|
|
2712
|
-
/* @__PURE__ */ (0,
|
|
3234
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
3235
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
2713
3236
|
] });
|
|
2714
3237
|
}
|
|
2715
3238
|
|
|
2716
3239
|
// src/components/interaction/form/Textarea/Textarea.tsx
|
|
2717
|
-
var
|
|
3240
|
+
var import_react27 = require("react");
|
|
2718
3241
|
|
|
2719
3242
|
// src/components/interaction/form/Textarea/Textarea.module.css
|
|
2720
|
-
var Textarea_default = {"component":"
|
|
3243
|
+
var Textarea_default = {"component":"bds2110Textarea-component","formGroup":"bds2110Textarea-formGroup","textarea":"bds2110Textarea-textarea","textareaError":"bds2110Textarea-textareaError"};
|
|
2721
3244
|
|
|
2722
3245
|
// src/components/interaction/form/Textarea/Textarea.tsx
|
|
2723
|
-
var
|
|
2724
|
-
var
|
|
3246
|
+
var import_design_system_foundation49 = require("@boostdev/design-system-foundation");
|
|
3247
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
2725
3248
|
function Textarea({
|
|
2726
3249
|
label,
|
|
2727
3250
|
name,
|
|
@@ -2729,15 +3252,17 @@ function Textarea({
|
|
|
2729
3252
|
hint,
|
|
2730
3253
|
className,
|
|
2731
3254
|
required,
|
|
3255
|
+
id: idProp,
|
|
2732
3256
|
...props
|
|
2733
3257
|
}) {
|
|
2734
|
-
const
|
|
3258
|
+
const generatedId = (0, import_react27.useId)();
|
|
3259
|
+
const id = idProp ?? name + generatedId;
|
|
2735
3260
|
const hintId = id + "hint";
|
|
2736
3261
|
const errorId = id + "error";
|
|
2737
3262
|
const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
|
|
2738
|
-
return /* @__PURE__ */ (0,
|
|
2739
|
-
/* @__PURE__ */ (0,
|
|
2740
|
-
/* @__PURE__ */ (0,
|
|
3263
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(InputContainer, { className: (0, import_design_system_foundation49.cn)(Textarea_default.formGroup, className), children: [
|
|
3264
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Label, { id, label }),
|
|
3265
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
2741
3266
|
"textarea",
|
|
2742
3267
|
{
|
|
2743
3268
|
id,
|
|
@@ -2746,40 +3271,40 @@ function Textarea({
|
|
|
2746
3271
|
"aria-describedby": describedBy,
|
|
2747
3272
|
"aria-required": required || void 0,
|
|
2748
3273
|
required,
|
|
2749
|
-
className: (0,
|
|
3274
|
+
className: (0, import_design_system_foundation49.cn)(Textarea_default.textarea, error ? Textarea_default.textareaError : void 0),
|
|
2750
3275
|
...props
|
|
2751
3276
|
}
|
|
2752
3277
|
),
|
|
2753
|
-
/* @__PURE__ */ (0,
|
|
2754
|
-
/* @__PURE__ */ (0,
|
|
3278
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Message, { inputId: id, type: "error", message: error }),
|
|
3279
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Message, { inputId: id, type: "hint", message: hint })
|
|
2755
3280
|
] });
|
|
2756
3281
|
}
|
|
2757
3282
|
|
|
2758
3283
|
// src/components/layout/ButtonGroup/ButtonGroup.module.css
|
|
2759
|
-
var ButtonGroup_default = {"component":"
|
|
3284
|
+
var ButtonGroup_default = {"component":"bds2110ButtonGroup-component","buttonGroup":"bds2110ButtonGroup-buttonGroup","container":"bds2110ButtonGroup-container","--variant_card":"bds2110ButtonGroup---variant_card","--variant_flow":"bds2110ButtonGroup---variant_flow","--variant_modal":"bds2110ButtonGroup---variant_modal","--variant_content":"bds2110ButtonGroup---variant_content"};
|
|
2760
3285
|
|
|
2761
3286
|
// src/components/layout/ButtonGroup/ButtonGroup.tsx
|
|
2762
|
-
var
|
|
2763
|
-
var
|
|
3287
|
+
var import_design_system_foundation50 = require("@boostdev/design-system-foundation");
|
|
3288
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
2764
3289
|
function ButtonContainer({ children, className, variant, ...rest }) {
|
|
2765
|
-
return /* @__PURE__ */ (0,
|
|
3290
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
2766
3291
|
"div",
|
|
2767
3292
|
{
|
|
2768
3293
|
...rest,
|
|
2769
3294
|
role: "group",
|
|
2770
|
-
className: (0,
|
|
2771
|
-
children: /* @__PURE__ */ (0,
|
|
3295
|
+
className: (0, import_design_system_foundation50.cn)(ButtonGroup_default.buttonGroup, className, variant && ButtonGroup_default[`--variant_${variant}`]),
|
|
3296
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: ButtonGroup_default.container, children })
|
|
2772
3297
|
}
|
|
2773
3298
|
);
|
|
2774
3299
|
}
|
|
2775
3300
|
var ButtonGroup = ButtonContainer;
|
|
2776
3301
|
|
|
2777
3302
|
// src/components/layout/Card/Card.module.css
|
|
2778
|
-
var Card_default = {"component":"
|
|
3303
|
+
var Card_default = {"component":"bds2110Card-component","card":"bds2110Card-card","--default":"bds2110Card---default","--elevated":"bds2110Card---elevated","--outlined":"bds2110Card---outlined","--clickable":"bds2110Card---clickable","--padding-none":"bds2110Card---padding-none","--padding-small":"bds2110Card---padding-small","--padding-medium":"bds2110Card---padding-medium","--padding-large":"bds2110Card---padding-large","--padding-extra-large":"bds2110Card---padding-extra-large","--text-start":"bds2110Card---text-start","--text-center":"bds2110Card---text-center","--text-end":"bds2110Card---text-end"};
|
|
2779
3304
|
|
|
2780
3305
|
// src/components/layout/Card/Card.tsx
|
|
2781
|
-
var
|
|
2782
|
-
var
|
|
3306
|
+
var import_design_system_foundation51 = require("@boostdev/design-system-foundation");
|
|
3307
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
2783
3308
|
function Card({
|
|
2784
3309
|
children,
|
|
2785
3310
|
className,
|
|
@@ -2790,7 +3315,7 @@ function Card({
|
|
|
2790
3315
|
onClick,
|
|
2791
3316
|
...rest
|
|
2792
3317
|
}) {
|
|
2793
|
-
const classNames = (0,
|
|
3318
|
+
const classNames = (0, import_design_system_foundation51.cn)(
|
|
2794
3319
|
Card_default.card,
|
|
2795
3320
|
Card_default[`--${variant}`],
|
|
2796
3321
|
Card_default[`--padding-${padding}`],
|
|
@@ -2799,7 +3324,7 @@ function Card({
|
|
|
2799
3324
|
className
|
|
2800
3325
|
);
|
|
2801
3326
|
const Component = as ?? (onClick ? "button" : "div");
|
|
2802
|
-
return /* @__PURE__ */ (0,
|
|
3327
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
2803
3328
|
Component,
|
|
2804
3329
|
{
|
|
2805
3330
|
...rest,
|
|
@@ -2812,16 +3337,19 @@ function Card({
|
|
|
2812
3337
|
}
|
|
2813
3338
|
|
|
2814
3339
|
// src/components/layout/Grid/Grid.tsx
|
|
2815
|
-
var
|
|
3340
|
+
var import_react29 = require("react");
|
|
2816
3341
|
|
|
2817
3342
|
// src/components/layout/Grid/Grid.module.css
|
|
2818
|
-
var Grid_default = {"component":"
|
|
3343
|
+
var Grid_default = {"component":"bds2110Grid-component","grid":"bds2110Grid-grid","--main":"bds2110Grid---main","--page":"bds2110Grid---page","--funnel":"bds2110Grid---funnel","--custom":"bds2110Grid---custom","--centered":"bds2110Grid---centered","item":"bds2110Grid-item","w3":"bds2110Grid-w3","org":"bds2110Grid-org","ts":"bds2110Grid-ts","--masonry":"bds2110Grid---masonry"};
|
|
2819
3344
|
|
|
2820
3345
|
// src/components/layout/Grid/Grid.tsx
|
|
2821
|
-
var
|
|
3346
|
+
var import_design_system_foundation52 = require("@boostdev/design-system-foundation");
|
|
3347
|
+
|
|
3348
|
+
// src/components/layout/Grid/useIsomorphicLayoutEffect.ts
|
|
3349
|
+
var import_react28 = require("react");
|
|
3350
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react28.useLayoutEffect : import_react28.useEffect;
|
|
2822
3351
|
|
|
2823
3352
|
// src/components/layout/Grid/masonry.ts
|
|
2824
|
-
var import_react26 = require("react");
|
|
2825
3353
|
var NAMED_SPAN_VAR = {
|
|
2826
3354
|
"three-quarters": "--bds-grid_columns-75",
|
|
2827
3355
|
"two-thirds": "--bds-grid_columns-66",
|
|
@@ -2851,6 +3379,7 @@ function supportsNativeMasonry() {
|
|
|
2851
3379
|
return CSS.supports("display", "grid-lanes") || CSS.supports("grid-template-rows", "masonry");
|
|
2852
3380
|
}
|
|
2853
3381
|
var ORIGINAL_COL_ATTR = "data-bds-masonry-original-column";
|
|
3382
|
+
var LAST_COL_ATTR = "data-bds-masonry-col";
|
|
2854
3383
|
var LAST_SPAN_ATTR = "data-bds-masonry-span";
|
|
2855
3384
|
var UNIT_ATTR = "data-bds-masonry-unit";
|
|
2856
3385
|
function applyMasonryLayout(container, rawChildren, options = {}) {
|
|
@@ -2874,16 +3403,23 @@ function applyMasonryLayout(container, rawChildren, options = {}) {
|
|
|
2874
3403
|
let col = 0;
|
|
2875
3404
|
for (const child of children) {
|
|
2876
3405
|
if (child.hasAttribute("data-column-span-auto")) {
|
|
2877
|
-
|
|
2878
|
-
|
|
3406
|
+
const currentInline = child.style.gridColumn;
|
|
3407
|
+
const lastWritten = child.getAttribute(LAST_COL_ATTR);
|
|
3408
|
+
if (!child.hasAttribute(ORIGINAL_COL_ATTR) || currentInline !== lastWritten) {
|
|
3409
|
+
child.setAttribute(ORIGINAL_COL_ATTR, currentInline);
|
|
2879
3410
|
}
|
|
2880
3411
|
const remaining = totalCols - col;
|
|
2881
3412
|
const span = Math.max(1, Math.min(preferredCols, remaining));
|
|
2882
3413
|
child.style.gridColumn = `span ${span}`;
|
|
3414
|
+
child.setAttribute(LAST_COL_ATTR, child.style.gridColumn);
|
|
2883
3415
|
col = (col + span) % totalCols;
|
|
2884
3416
|
} else {
|
|
2885
3417
|
const consumed = Math.min(totalCols, readExplicitSpan(child, totalCols));
|
|
2886
|
-
|
|
3418
|
+
if (consumed > totalCols - col) {
|
|
3419
|
+
col = consumed % totalCols;
|
|
3420
|
+
} else {
|
|
3421
|
+
col = (col + consumed) % totalCols;
|
|
3422
|
+
}
|
|
2887
3423
|
}
|
|
2888
3424
|
}
|
|
2889
3425
|
}
|
|
@@ -2967,10 +3503,11 @@ function restoreOriginalColumn(el) {
|
|
|
2967
3503
|
if (!el.hasAttribute(ORIGINAL_COL_ATTR)) return;
|
|
2968
3504
|
el.style.gridColumn = el.getAttribute(ORIGINAL_COL_ATTR) ?? "";
|
|
2969
3505
|
el.removeAttribute(ORIGINAL_COL_ATTR);
|
|
3506
|
+
el.removeAttribute(LAST_COL_ATTR);
|
|
2970
3507
|
}
|
|
2971
3508
|
function useMasonry(ref, enabled, options = {}) {
|
|
2972
3509
|
const { preferredColumnSpan, rowUnitPx } = options;
|
|
2973
|
-
(
|
|
3510
|
+
useIsomorphicLayoutEffect(() => {
|
|
2974
3511
|
const container = ref.current;
|
|
2975
3512
|
if (!container || !enabled) return;
|
|
2976
3513
|
if (supportsNativeMasonry()) return;
|
|
@@ -3042,10 +3579,10 @@ function useMasonry(ref, enabled, options = {}) {
|
|
|
3042
3579
|
}
|
|
3043
3580
|
|
|
3044
3581
|
// src/components/layout/Grid/Grid.tsx
|
|
3045
|
-
var
|
|
3582
|
+
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
3046
3583
|
var _GridContext;
|
|
3047
3584
|
function getGridContext() {
|
|
3048
|
-
_GridContext ??= (0,
|
|
3585
|
+
_GridContext ??= (0, import_react29.createContext)({ autoSpanMedia: false });
|
|
3049
3586
|
return _GridContext;
|
|
3050
3587
|
}
|
|
3051
3588
|
function Grid({
|
|
@@ -3062,12 +3599,12 @@ function Grid({
|
|
|
3062
3599
|
style,
|
|
3063
3600
|
...rest
|
|
3064
3601
|
}) {
|
|
3065
|
-
const ref = (0,
|
|
3602
|
+
const ref = (0, import_react29.useRef)(null);
|
|
3066
3603
|
useMasonry(ref, isMasonry, {
|
|
3067
3604
|
preferredColumnSpan: masonryPreferredColumnSpan,
|
|
3068
3605
|
rowUnitPx: masonryRowUnitPx
|
|
3069
3606
|
});
|
|
3070
|
-
const classNames = (0,
|
|
3607
|
+
const classNames = (0, import_design_system_foundation52.cn)(
|
|
3071
3608
|
Grid_default.grid,
|
|
3072
3609
|
Grid_default[`--${variant}`],
|
|
3073
3610
|
isCentered && Grid_default["--centered"],
|
|
@@ -3077,13 +3614,13 @@ function Grid({
|
|
|
3077
3614
|
const composedStyle = variant === "custom" && columns !== void 0 ? { ...style, ["--grid_columns"]: columns } : style;
|
|
3078
3615
|
const Component = as ?? "div";
|
|
3079
3616
|
const GridContext = getGridContext();
|
|
3080
|
-
const ctx = (0,
|
|
3081
|
-
return /* @__PURE__ */ (0,
|
|
3617
|
+
const ctx = (0, import_react29.useMemo)(() => ({ autoSpanMedia }), [autoSpanMedia]);
|
|
3618
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Component, { ref, ...rest, className: classNames, style: composedStyle, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(GridContext.Provider, { value: ctx, children }) });
|
|
3082
3619
|
}
|
|
3083
3620
|
|
|
3084
3621
|
// src/components/layout/Grid/GridItem.tsx
|
|
3085
|
-
var
|
|
3086
|
-
var
|
|
3622
|
+
var import_react30 = require("react");
|
|
3623
|
+
var import_design_system_foundation53 = require("@boostdev/design-system-foundation");
|
|
3087
3624
|
|
|
3088
3625
|
// src/components/layout/Grid/autoSpan.ts
|
|
3089
3626
|
function aspectToColumnSpan(ratio) {
|
|
@@ -3115,7 +3652,7 @@ function mediaReadyEvent(media) {
|
|
|
3115
3652
|
}
|
|
3116
3653
|
|
|
3117
3654
|
// src/components/layout/Grid/GridItem.tsx
|
|
3118
|
-
var
|
|
3655
|
+
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
3119
3656
|
var GridItemSpan = {
|
|
3120
3657
|
full: "full",
|
|
3121
3658
|
threeQuarters: "three-quarters",
|
|
@@ -3148,11 +3685,11 @@ function GridItem({
|
|
|
3148
3685
|
style,
|
|
3149
3686
|
...rest
|
|
3150
3687
|
}) {
|
|
3151
|
-
const { autoSpanMedia } = (0,
|
|
3688
|
+
const { autoSpanMedia } = (0, import_react30.useContext)(getGridContext());
|
|
3152
3689
|
const effectiveSpan = columnSpan ?? (autoSpanMedia ? "auto" : "full");
|
|
3153
|
-
const ref = (0,
|
|
3154
|
-
const [autoSpan, setAutoSpan] = (0,
|
|
3155
|
-
(
|
|
3690
|
+
const ref = (0, import_react30.useRef)(null);
|
|
3691
|
+
const [autoSpan, setAutoSpan] = (0, import_react30.useState)("one-quarter");
|
|
3692
|
+
useIsomorphicLayoutEffect(() => {
|
|
3156
3693
|
if (effectiveSpan !== "auto") return;
|
|
3157
3694
|
const el = ref.current;
|
|
3158
3695
|
if (!el) return;
|
|
@@ -3197,13 +3734,13 @@ function GridItem({
|
|
|
3197
3734
|
};
|
|
3198
3735
|
const Component = as ?? "div";
|
|
3199
3736
|
const isColumnSpanAuto = columnSpan === void 0 && !hasExplicitRange;
|
|
3200
|
-
return /* @__PURE__ */ (0,
|
|
3737
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
3201
3738
|
Component,
|
|
3202
3739
|
{
|
|
3203
3740
|
ref,
|
|
3204
3741
|
...rest,
|
|
3205
3742
|
"data-column-span-auto": isColumnSpanAuto ? "" : void 0,
|
|
3206
|
-
className: (0,
|
|
3743
|
+
className: (0, import_design_system_foundation53.cn)(Grid_default.item, className),
|
|
3207
3744
|
style: composedStyle,
|
|
3208
3745
|
children
|
|
3209
3746
|
}
|
|
@@ -3211,11 +3748,11 @@ function GridItem({
|
|
|
3211
3748
|
}
|
|
3212
3749
|
|
|
3213
3750
|
// src/components/layout/SectionHeader/SectionHeader.module.css
|
|
3214
|
-
var SectionHeader_default = {"component":"
|
|
3751
|
+
var SectionHeader_default = {"component":"bds2110SectionHeader-component","sectionHeader":"bds2110SectionHeader-sectionHeader","title":"bds2110SectionHeader-title","subtitle":"bds2110SectionHeader-subtitle","--start":"bds2110SectionHeader---start","--center":"bds2110SectionHeader---center","--end":"bds2110SectionHeader---end","--medium":"bds2110SectionHeader---medium","--xs":"bds2110SectionHeader---xs","--small":"bds2110SectionHeader---small","--large":"bds2110SectionHeader---large"};
|
|
3215
3752
|
|
|
3216
3753
|
// src/components/layout/SectionHeader/SectionHeader.tsx
|
|
3217
|
-
var
|
|
3218
|
-
var
|
|
3754
|
+
var import_design_system_foundation54 = require("@boostdev/design-system-foundation");
|
|
3755
|
+
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
3219
3756
|
function SectionHeader({
|
|
3220
3757
|
title,
|
|
3221
3758
|
subtitle,
|
|
@@ -3226,24 +3763,24 @@ function SectionHeader({
|
|
|
3226
3763
|
...rest
|
|
3227
3764
|
}) {
|
|
3228
3765
|
const Title = titleAs;
|
|
3229
|
-
return /* @__PURE__ */ (0,
|
|
3230
|
-
/* @__PURE__ */ (0,
|
|
3231
|
-
subtitle && /* @__PURE__ */ (0,
|
|
3766
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { ...rest, className: (0, import_design_system_foundation54.cn)(SectionHeader_default.sectionHeader, SectionHeader_default[`--${alignment}`], SectionHeader_default[`--${size}`], className), children: [
|
|
3767
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Title, { className: SectionHeader_default.title, children: title }),
|
|
3768
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: SectionHeader_default.subtitle, children: subtitle })
|
|
3232
3769
|
] });
|
|
3233
3770
|
}
|
|
3234
3771
|
|
|
3235
3772
|
// src/components/layout/IconWrapper/IconWrapper.module.css
|
|
3236
|
-
var IconWrapper_default = {"component":"
|
|
3773
|
+
var IconWrapper_default = {"component":"bds2110IconWrapper-component","wrapper":"bds2110IconWrapper-wrapper"};
|
|
3237
3774
|
|
|
3238
3775
|
// src/components/layout/IconWrapper/IconWrapper.tsx
|
|
3239
|
-
var
|
|
3240
|
-
var
|
|
3776
|
+
var import_design_system_foundation55 = require("@boostdev/design-system-foundation");
|
|
3777
|
+
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
3241
3778
|
function IconWrapper({ children, className, ...rest }) {
|
|
3242
|
-
return /* @__PURE__ */ (0,
|
|
3779
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { ...rest, className: (0, import_design_system_foundation55.cn)(className, IconWrapper_default.wrapper), children });
|
|
3243
3780
|
}
|
|
3244
3781
|
|
|
3245
3782
|
// src/index.ts
|
|
3246
|
-
var
|
|
3783
|
+
var import_design_system_foundation56 = require("@boostdev/design-system-foundation");
|
|
3247
3784
|
// Annotate the CommonJS export names for ESM import in node:
|
|
3248
3785
|
0 && (module.exports = {
|
|
3249
3786
|
Accordion,
|
|
@@ -3255,6 +3792,7 @@ var import_design_system_foundation54 = require("@boostdev/design-system-foundat
|
|
|
3255
3792
|
ButtonContainer,
|
|
3256
3793
|
ButtonGroup,
|
|
3257
3794
|
Calendar,
|
|
3795
|
+
CalendarRange,
|
|
3258
3796
|
Card,
|
|
3259
3797
|
Carousel,
|
|
3260
3798
|
Checkbox,
|