@boostdev/design-system-components 2.0.0 → 2.2.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 +2 -1
- package/README.md +42 -1
- package/dist/client.cjs +305 -60
- package/dist/client.css +577 -523
- package/dist/client.d.cts +42 -2
- package/dist/client.d.ts +42 -2
- package/dist/client.js +311 -60
- package/dist/index.cjs +305 -60
- package/dist/index.css +577 -523
- package/dist/index.d.cts +42 -2
- package/dist/index.d.ts +42 -2
- package/dist/index.js +311 -60
- package/dist/native/index.cjs +5 -2
- package/dist/native/index.d.cts +3 -1
- package/dist/native/index.d.ts +3 -1
- package/dist/native/index.js +5 -2
- package/dist/web-components/{chunk-3REOIRDW.js → chunk-N3TN6WCH.js} +26 -1
- package/dist/web-components/index.d.ts +129 -1
- package/dist/web-components/index.js +312 -1
- package/dist/web-components/interaction/bds-button.d.ts +7 -0
- package/dist/web-components/interaction/bds-button.js +1 -1
- package/package.json +1 -1
- package/src/components/interaction/Button/Button.mdx +81 -36
- package/src/components/interaction/Button/Button.module.css +24 -0
- package/src/components/interaction/Button/Button.native.mdx +31 -12
- package/src/components/interaction/Button/Button.native.spec.tsx +20 -0
- package/src/components/interaction/Button/Button.native.stories.tsx +110 -9
- package/src/components/interaction/Button/Button.native.tsx +13 -4
- package/src/components/interaction/Button/Button.spec.tsx +16 -0
- package/src/components/interaction/Button/Button.stories.tsx +134 -16
- package/src/components/interaction/Button/Button.tsx +4 -0
- package/src/components/layout/Grid/Grid.mdx +244 -0
- package/src/components/layout/Grid/Grid.module.css +59 -0
- package/src/components/layout/Grid/Grid.spec.tsx +401 -0
- package/src/components/layout/Grid/Grid.stories.tsx +160 -0
- package/src/components/layout/Grid/Grid.tsx +85 -0
- package/src/components/layout/Grid/GridItem.tsx +150 -0
- package/src/components/layout/Grid/autoSpan.ts +77 -0
- package/src/components/layout/Grid/index.ts +4 -0
- package/src/components/layout/Grid/masonry.ts +134 -0
- package/src/components/layout/IconWrapper/IconWrapper.stories.tsx +46 -14
- package/src/index.ts +2 -0
- package/src/web-components/index.ts +4 -0
- package/src/web-components/interaction/BdsButton.mdx +46 -14
- package/src/web-components/interaction/BdsButton.stories.tsx +171 -19
- package/src/web-components/interaction/bds-button.spec.ts +35 -0
- package/src/web-components/interaction/bds-button.ts +28 -1
- package/src/web-components/layout/BdsGrid.mdx +210 -0
- package/src/web-components/layout/BdsGrid.stories.tsx +209 -0
- package/src/web-components/layout/BdsGridItem.mdx +52 -0
- package/src/web-components/layout/BdsGridItem.stories.tsx +72 -0
- package/src/web-components/layout/bds-grid-item.spec.ts +102 -0
- package/src/web-components/layout/bds-grid-item.ts +177 -0
- package/src/web-components/layout/bds-grid.spec.ts +62 -0
- package/src/web-components/layout/bds-grid.ts +184 -0
package/dist/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { useId, useState } from "react";
|
|
3
3
|
|
|
4
4
|
// src/components/ui/Accordion/Accordion.module.css
|
|
5
|
-
var Accordion_default = {"component":"
|
|
5
|
+
var Accordion_default = {"component":"bds220Accordion-component","accordion":"bds220Accordion-accordion","item":"bds220Accordion-item","heading":"bds220Accordion-heading","trigger":"bds220Accordion-trigger","triggerLabel":"bds220Accordion-triggerLabel","chevron":"bds220Accordion-chevron","--open":"bds220Accordion---open","panel":"bds220Accordion-panel","panelContent":"bds220Accordion-panelContent"};
|
|
6
6
|
|
|
7
7
|
// src/components/ui/Accordion/Accordion.tsx
|
|
8
8
|
import { cn } from "@boostdev/design-system-foundation";
|
|
@@ -71,7 +71,7 @@ function Accordion({
|
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
// src/components/ui/Alert/Alert.module.css
|
|
74
|
-
var Alert_default = {"component":"
|
|
74
|
+
var Alert_default = {"component":"bds220Alert-component","alert":"bds220Alert-alert","--variant_info":"bds220Alert---variant_info","--variant_success":"bds220Alert---variant_success","--variant_warning":"bds220Alert---variant_warning","--variant_error":"bds220Alert---variant_error","icon":"bds220Alert-icon","content":"bds220Alert-content","title":"bds220Alert-title","dismiss":"bds220Alert-dismiss"};
|
|
75
75
|
|
|
76
76
|
// src/components/ui/Alert/Alert.tsx
|
|
77
77
|
import { cn as cn2 } from "@boostdev/design-system-foundation";
|
|
@@ -116,7 +116,7 @@ function Alert({
|
|
|
116
116
|
}
|
|
117
117
|
|
|
118
118
|
// src/components/ui/Avatar/Avatar.module.css
|
|
119
|
-
var Avatar_default = {"component":"
|
|
119
|
+
var Avatar_default = {"component":"bds220Avatar-component","avatar":"bds220Avatar-avatar","--fallback":"bds220Avatar---fallback","--size_small":"bds220Avatar---size_small","--size_medium":"bds220Avatar---size_medium","--size_large":"bds220Avatar---size_large","image":"bds220Avatar-image","initials":"bds220Avatar-initials"};
|
|
120
120
|
|
|
121
121
|
// src/components/ui/Avatar/Avatar.tsx
|
|
122
122
|
import { cn as cn3 } from "@boostdev/design-system-foundation";
|
|
@@ -143,7 +143,7 @@ function Avatar({ src, alt, name, size = "medium", className, ...rest }) {
|
|
|
143
143
|
}
|
|
144
144
|
|
|
145
145
|
// src/components/ui/Badge/Badge.module.css
|
|
146
|
-
var Badge_default = {"component":"
|
|
146
|
+
var Badge_default = {"component":"bds220Badge-component","badge":"bds220Badge-badge","--variant_primary":"bds220Badge---variant_primary","--variant_secondary":"bds220Badge---variant_secondary","--variant_success":"bds220Badge---variant_success","--variant_error":"bds220Badge---variant_error","--variant_warning":"bds220Badge---variant_warning"};
|
|
147
147
|
|
|
148
148
|
// src/components/ui/Badge/Badge.tsx
|
|
149
149
|
import { cn as cn4 } from "@boostdev/design-system-foundation";
|
|
@@ -153,7 +153,7 @@ function Badge({ children, variant = "primary", className, ...rest }) {
|
|
|
153
153
|
}
|
|
154
154
|
|
|
155
155
|
// src/components/ui/Breadcrumb/Breadcrumb.module.css
|
|
156
|
-
var Breadcrumb_default = {"component":"
|
|
156
|
+
var Breadcrumb_default = {"component":"bds220Breadcrumb-component","breadcrumb":"bds220Breadcrumb-breadcrumb","list":"bds220Breadcrumb-list","item":"bds220Breadcrumb-item","link":"bds220Breadcrumb-link","separator":"bds220Breadcrumb-separator","current":"bds220Breadcrumb-current"};
|
|
157
157
|
|
|
158
158
|
// src/components/ui/Breadcrumb/Breadcrumb.tsx
|
|
159
159
|
import { cn as cn5 } from "@boostdev/design-system-foundation";
|
|
@@ -169,7 +169,7 @@ function Breadcrumb({ items, className, ...rest }) {
|
|
|
169
169
|
}
|
|
170
170
|
|
|
171
171
|
// src/components/ui/Collapsible/Collapsible.module.css
|
|
172
|
-
var Collapsible_default = {"component":"
|
|
172
|
+
var Collapsible_default = {"component":"bds220Collapsible-component","collapsible":"bds220Collapsible-collapsible","summary":"bds220Collapsible-summary","summaryContent":"bds220Collapsible-summaryContent","icon":"bds220Collapsible-icon","content":"bds220Collapsible-content"};
|
|
173
173
|
|
|
174
174
|
// src/components/ui/Collapsible/Collapsible.tsx
|
|
175
175
|
import { cn as cn6 } from "@boostdev/design-system-foundation";
|
|
@@ -210,7 +210,7 @@ function Collapsible({
|
|
|
210
210
|
import { useState as useState2, useId as useId2 } from "react";
|
|
211
211
|
|
|
212
212
|
// src/components/ui/Calendar/Calendar.module.css
|
|
213
|
-
var Calendar_default = {"component":"
|
|
213
|
+
var Calendar_default = {"component":"bds220Calendar-component","calendar":"bds220Calendar-calendar","header":"bds220Calendar-header","monthYear":"bds220Calendar-monthYear","navBtn":"bds220Calendar-navBtn","grid":"bds220Calendar-grid","weekday":"bds220Calendar-weekday","empty":"bds220Calendar-empty","day":"bds220Calendar-day","disabled":"bds220Calendar-disabled","selected":"bds220Calendar-selected","today":"bds220Calendar-today"};
|
|
214
214
|
|
|
215
215
|
// src/components/ui/Calendar/Calendar.tsx
|
|
216
216
|
import { cn as cn7 } from "@boostdev/design-system-foundation";
|
|
@@ -385,7 +385,7 @@ function Calendar({ value, defaultValue, min, max, onChange, className, ...rest
|
|
|
385
385
|
import { useRef, useId as useId3 } from "react";
|
|
386
386
|
|
|
387
387
|
// src/components/ui/Carousel/Carousel.module.css
|
|
388
|
-
var Carousel_default = {"component":"
|
|
388
|
+
var Carousel_default = {"component":"bds220Carousel-component","carousel":"bds220Carousel-carousel","track":"bds220Carousel-track","slide":"bds220Carousel-slide","navBtn":"bds220Carousel-navBtn"};
|
|
389
389
|
|
|
390
390
|
// src/components/ui/Carousel/Carousel.tsx
|
|
391
391
|
import { cn as cn8 } from "@boostdev/design-system-foundation";
|
|
@@ -438,7 +438,7 @@ function Carousel({ items, label, className, ...rest }) {
|
|
|
438
438
|
}
|
|
439
439
|
|
|
440
440
|
// src/components/ui/DescriptionList/DescriptionList.module.css
|
|
441
|
-
var DescriptionList_default = {"component":"
|
|
441
|
+
var DescriptionList_default = {"component":"bds220DescriptionList-component","list":"bds220DescriptionList-list","group":"bds220DescriptionList-group","term":"bds220DescriptionList-term","details":"bds220DescriptionList-details","--layout_inline":"bds220DescriptionList---layout_inline"};
|
|
442
442
|
|
|
443
443
|
// src/components/ui/DescriptionList/DescriptionList.tsx
|
|
444
444
|
import { cn as cn9 } from "@boostdev/design-system-foundation";
|
|
@@ -451,7 +451,7 @@ function DescriptionList({ items, layout = "stacked", className, ...rest }) {
|
|
|
451
451
|
}
|
|
452
452
|
|
|
453
453
|
// src/components/ui/Link/Link.module.css
|
|
454
|
-
var Link_default = {"component":"
|
|
454
|
+
var Link_default = {"component":"bds220Link-component","link":"bds220Link-link","--variant_default":"bds220Link---variant_default","--variant_subtle":"bds220Link---variant_subtle","--variant_standalone":"bds220Link---variant_standalone","externalLabel":"bds220Link-externalLabel"};
|
|
455
455
|
|
|
456
456
|
// src/components/ui/Link/Link.tsx
|
|
457
457
|
import { cn as cn10 } from "@boostdev/design-system-foundation";
|
|
@@ -482,7 +482,7 @@ function Link({
|
|
|
482
482
|
}
|
|
483
483
|
|
|
484
484
|
// src/components/ui/Loading/Loading.module.css
|
|
485
|
-
var Loading_default = {"component":"
|
|
485
|
+
var Loading_default = {"component":"bds220Loading-component","loading":"bds220Loading-loading","spinner":"bds220Loading-spinner","--size_small":"bds220Loading---size_small","--size_large":"bds220Loading---size_large"};
|
|
486
486
|
|
|
487
487
|
// src/components/ui/Loading/Loading.tsx
|
|
488
488
|
import { cn as cn11 } from "@boostdev/design-system-foundation";
|
|
@@ -492,7 +492,7 @@ function Loading({ size = "medium", className, ...rest }) {
|
|
|
492
492
|
}
|
|
493
493
|
|
|
494
494
|
// src/components/ui/NotificationBanner/NotificationBanner.module.css
|
|
495
|
-
var NotificationBanner_default = {"component":"
|
|
495
|
+
var NotificationBanner_default = {"component":"bds220NotificationBanner-component","banner":"bds220NotificationBanner-banner","--variant_info":"bds220NotificationBanner---variant_info","--variant_success":"bds220NotificationBanner---variant_success","--variant_warning":"bds220NotificationBanner---variant_warning","--variant_error":"bds220NotificationBanner---variant_error","content":"bds220NotificationBanner-content","action":"bds220NotificationBanner-action","dismiss":"bds220NotificationBanner-dismiss"};
|
|
496
496
|
|
|
497
497
|
// src/components/ui/NotificationBanner/NotificationBanner.tsx
|
|
498
498
|
import { cn as cn12 } from "@boostdev/design-system-foundation";
|
|
@@ -533,7 +533,7 @@ function NotificationBanner({
|
|
|
533
533
|
}
|
|
534
534
|
|
|
535
535
|
// src/components/ui/Pagination/Pagination.module.css
|
|
536
|
-
var Pagination_default = {"component":"
|
|
536
|
+
var Pagination_default = {"component":"bds220Pagination-component","pagination":"bds220Pagination-pagination","list":"bds220Pagination-list","button":"bds220Pagination-button","--active":"bds220Pagination---active","--nav":"bds220Pagination---nav","ellipsis":"bds220Pagination-ellipsis"};
|
|
537
537
|
|
|
538
538
|
// src/components/ui/Pagination/Pagination.tsx
|
|
539
539
|
import { cn as cn13 } from "@boostdev/design-system-foundation";
|
|
@@ -598,7 +598,7 @@ function Pagination({
|
|
|
598
598
|
}
|
|
599
599
|
|
|
600
600
|
// src/components/ui/Progress/Progress.module.css
|
|
601
|
-
var Progress_default = {"component":"
|
|
601
|
+
var Progress_default = {"component":"bds220Progress-component","container":"bds220Progress-container","labelRow":"bds220Progress-labelRow","value":"bds220Progress-value","track":"bds220Progress-track","--size_small":"bds220Progress---size_small","--size_medium":"bds220Progress---size_medium","--size_large":"bds220Progress---size_large","fill":"bds220Progress-fill"};
|
|
602
602
|
|
|
603
603
|
// src/components/ui/Progress/Progress.tsx
|
|
604
604
|
import { cn as cn14 } from "@boostdev/design-system-foundation";
|
|
@@ -637,7 +637,7 @@ function Progress({
|
|
|
637
637
|
}
|
|
638
638
|
|
|
639
639
|
// src/components/ui/ProgressCircle/ProgressCircle.module.css
|
|
640
|
-
var ProgressCircle_default = {"component":"
|
|
640
|
+
var ProgressCircle_default = {"component":"bds220ProgressCircle-component","wrapper":"bds220ProgressCircle-wrapper","svg":"bds220ProgressCircle-svg","track":"bds220ProgressCircle-track","fill":"bds220ProgressCircle-fill","value":"bds220ProgressCircle-value","--size_small":"bds220ProgressCircle---size_small","--size_medium":"bds220ProgressCircle---size_medium","--size_large":"bds220ProgressCircle---size_large"};
|
|
641
641
|
|
|
642
642
|
// src/components/ui/ProgressCircle/ProgressCircle.tsx
|
|
643
643
|
import { cn as cn15 } from "@boostdev/design-system-foundation";
|
|
@@ -718,7 +718,7 @@ function ProgressCircle({
|
|
|
718
718
|
}
|
|
719
719
|
|
|
720
720
|
// src/components/ui/Separator/Separator.module.css
|
|
721
|
-
var Separator_default = {"component":"
|
|
721
|
+
var Separator_default = {"component":"bds220Separator-component","separator":"bds220Separator-separator","--horizontal":"bds220Separator---horizontal","--vertical":"bds220Separator---vertical"};
|
|
722
722
|
|
|
723
723
|
// src/components/ui/Separator/Separator.tsx
|
|
724
724
|
import { cn as cn16 } from "@boostdev/design-system-foundation";
|
|
@@ -742,7 +742,7 @@ function Separator({ orientation = "horizontal", className, ...rest }) {
|
|
|
742
742
|
import { cn as cn17 } from "@boostdev/design-system-foundation";
|
|
743
743
|
|
|
744
744
|
// src/components/ui/Skeleton/Skeleton.module.css
|
|
745
|
-
var Skeleton_default = {"component":"
|
|
745
|
+
var Skeleton_default = {"component":"bds220Skeleton-component","skeleton":"bds220Skeleton-skeleton"};
|
|
746
746
|
|
|
747
747
|
// src/components/ui/Skeleton/Skeleton.tsx
|
|
748
748
|
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
@@ -751,7 +751,7 @@ function Skeleton({ className, ...rest }) {
|
|
|
751
751
|
}
|
|
752
752
|
|
|
753
753
|
// src/components/ui/SkipLink/SkipLink.module.css
|
|
754
|
-
var SkipLink_default = {"component":"
|
|
754
|
+
var SkipLink_default = {"component":"bds220SkipLink-component","skipLink":"bds220SkipLink-skipLink"};
|
|
755
755
|
|
|
756
756
|
// src/components/ui/SkipLink/SkipLink.tsx
|
|
757
757
|
import { cn as cn18 } from "@boostdev/design-system-foundation";
|
|
@@ -761,7 +761,7 @@ function SkipLink({ href = "#main", children = "Skip to main content", className
|
|
|
761
761
|
}
|
|
762
762
|
|
|
763
763
|
// src/components/ui/Table/Table.module.css
|
|
764
|
-
var Table_default = {"component":"
|
|
764
|
+
var Table_default = {"component":"bds220Table-component","wrapper":"bds220Table-wrapper","table":"bds220Table-table","caption":"bds220Table-caption","thead":"bds220Table-thead","th":"bds220Table-th","--sortable":"bds220Table---sortable","sortButton":"bds220Table-sortButton","sortIcon":"bds220Table-sortIcon","--sort-active":"bds220Table---sort-active","--sort-desc":"bds220Table---sort-desc","tbody":"bds220Table-tbody","tr":"bds220Table-tr","td":"bds220Table-td"};
|
|
765
765
|
|
|
766
766
|
// src/components/ui/Table/Table.tsx
|
|
767
767
|
import { cn as cn19 } from "@boostdev/design-system-foundation";
|
|
@@ -831,7 +831,7 @@ function Table({
|
|
|
831
831
|
import { useId as useId4, useRef as useRef2, useState as useState3 } from "react";
|
|
832
832
|
|
|
833
833
|
// src/components/ui/Tabs/Tabs.module.css
|
|
834
|
-
var Tabs_default = {"component":"
|
|
834
|
+
var Tabs_default = {"component":"bds220Tabs-component","tabs":"bds220Tabs-tabs","tabList":"bds220Tabs-tabList","tab":"bds220Tabs-tab","--active":"bds220Tabs---active","panel":"bds220Tabs-panel"};
|
|
835
835
|
|
|
836
836
|
// src/components/ui/Tabs/Tabs.tsx
|
|
837
837
|
import { cn as cn20 } from "@boostdev/design-system-foundation";
|
|
@@ -911,7 +911,7 @@ function Tabs({ tabs, defaultTab, className, ...rest }) {
|
|
|
911
911
|
import { cloneElement, isValidElement, useId as useId5, useState as useState4 } from "react";
|
|
912
912
|
|
|
913
913
|
// src/components/ui/Tooltip/Tooltip.module.css
|
|
914
|
-
var Tooltip_default = {"component":"
|
|
914
|
+
var Tooltip_default = {"component":"bds220Tooltip-component","wrapper":"bds220Tooltip-wrapper","tooltip":"bds220Tooltip-tooltip","--placement_top":"bds220Tooltip---placement_top","--placement_bottom":"bds220Tooltip---placement_bottom","--placement_left":"bds220Tooltip---placement_left","--placement_right":"bds220Tooltip---placement_right"};
|
|
915
915
|
|
|
916
916
|
// src/components/ui/Tooltip/Tooltip.tsx
|
|
917
917
|
import { cn as cn21 } from "@boostdev/design-system-foundation";
|
|
@@ -955,7 +955,7 @@ function Tooltip({
|
|
|
955
955
|
}
|
|
956
956
|
|
|
957
957
|
// src/components/ui/Typography/Typography.module.css
|
|
958
|
-
var Typography_default = {"component":"
|
|
958
|
+
var Typography_default = {"component":"bds220Typography-component","typography":"bds220Typography-typography","--h1":"bds220Typography---h1","--h2":"bds220Typography---h2","--h3":"bds220Typography---h3","--body":"bds220Typography---body","--body_s":"bds220Typography---body_s"};
|
|
959
959
|
|
|
960
960
|
// src/components/ui/Typography/Typography.tsx
|
|
961
961
|
import { cn as cn22 } from "@boostdev/design-system-foundation";
|
|
@@ -973,7 +973,7 @@ function Typography({ variant = "body", component, children, className, ...rest
|
|
|
973
973
|
}
|
|
974
974
|
|
|
975
975
|
// src/components/interaction/Button/Button.module.css
|
|
976
|
-
var Button_default = {"component":"
|
|
976
|
+
var Button_default = {"component":"bds220Button-component","button":"bds220Button-button","--default":"bds220Button---default","--outline":"bds220Button---outline","--ghost":"bds220Button---ghost","--size_small":"bds220Button---size_small","--size_medium":"bds220Button---size_medium","--size_large":"bds220Button---size_large","--hasPulse":"bds220Button---hasPulse","iconStart":"bds220Button-iconStart","iconEnd":"bds220Button-iconEnd","--iconOnly":"bds220Button---iconOnly"};
|
|
977
977
|
|
|
978
978
|
// src/components/interaction/Button/Button.tsx
|
|
979
979
|
import { cn as cn23 } from "@boostdev/design-system-foundation";
|
|
@@ -987,6 +987,7 @@ function Button({
|
|
|
987
987
|
iconEnd,
|
|
988
988
|
size = "medium",
|
|
989
989
|
hasPulse = false,
|
|
990
|
+
isIconOnly = false,
|
|
990
991
|
href,
|
|
991
992
|
target,
|
|
992
993
|
rel,
|
|
@@ -999,6 +1000,7 @@ function Button({
|
|
|
999
1000
|
Button_default[`--${variant}`],
|
|
1000
1001
|
Button_default[`--size_${size}`],
|
|
1001
1002
|
hasPulse && Button_default["--hasPulse"],
|
|
1003
|
+
isIconOnly && Button_default["--iconOnly"],
|
|
1002
1004
|
className
|
|
1003
1005
|
);
|
|
1004
1006
|
const handleAnchorClick = (e) => {
|
|
@@ -1088,7 +1090,7 @@ function installInvokerCommandsPolyfill() {
|
|
|
1088
1090
|
}
|
|
1089
1091
|
|
|
1090
1092
|
// src/components/interaction/Command/Command.module.css
|
|
1091
|
-
var Command_default = {"component":"
|
|
1093
|
+
var Command_default = {"component":"bds220Command-component","dialog":"bds220Command-dialog","palette":"bds220Command-palette","searchRow":"bds220Command-searchRow","searchIcon":"bds220Command-searchIcon","search":"bds220Command-search","escHint":"bds220Command-escHint","list":"bds220Command-list","groupList":"bds220Command-groupList","group":"bds220Command-group","item":"bds220Command-item","itemActive":"bds220Command-itemActive","itemLabel":"bds220Command-itemLabel","itemDesc":"bds220Command-itemDesc","shortcut":"bds220Command-shortcut","empty":"bds220Command-empty"};
|
|
1092
1094
|
|
|
1093
1095
|
// src/components/interaction/Command/Command.tsx
|
|
1094
1096
|
import { cn as cn24 } from "@boostdev/design-system-foundation";
|
|
@@ -1265,7 +1267,7 @@ function Command({
|
|
|
1265
1267
|
import { useEffect as useEffect2, useId as useId7, useRef as useRef4 } from "react";
|
|
1266
1268
|
|
|
1267
1269
|
// src/components/interaction/Dialog/Dialog.module.css
|
|
1268
|
-
var Dialog_default = {"component":"
|
|
1270
|
+
var Dialog_default = {"component":"bds220Dialog-component","dialog":"bds220Dialog-dialog","dialogContent":"bds220Dialog-dialogContent","closeButton":"bds220Dialog-closeButton"};
|
|
1269
1271
|
|
|
1270
1272
|
// src/components/interaction/Dialog/Dialog.tsx
|
|
1271
1273
|
import { cn as cn25 } from "@boostdev/design-system-foundation";
|
|
@@ -1371,7 +1373,7 @@ function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClo
|
|
|
1371
1373
|
import { useEffect as useEffect3, useId as useId8, useRef as useRef5 } from "react";
|
|
1372
1374
|
|
|
1373
1375
|
// src/components/interaction/Drawer/Drawer.module.css
|
|
1374
|
-
var Drawer_default = {"component":"
|
|
1376
|
+
var Drawer_default = {"component":"bds220Drawer-component","drawer":"bds220Drawer-drawer","--side_left":"bds220Drawer---side_left","header":"bds220Drawer-header","closeButton":"bds220Drawer-closeButton","body":"bds220Drawer-body"};
|
|
1375
1377
|
|
|
1376
1378
|
// src/components/interaction/Drawer/Drawer.tsx
|
|
1377
1379
|
import { cn as cn26 } from "@boostdev/design-system-foundation";
|
|
@@ -1479,7 +1481,7 @@ import {
|
|
|
1479
1481
|
} from "react";
|
|
1480
1482
|
|
|
1481
1483
|
// src/components/interaction/DropdownMenu/DropdownMenu.module.css
|
|
1482
|
-
var DropdownMenu_default = {"component":"
|
|
1484
|
+
var DropdownMenu_default = {"component":"bds220DropdownMenu-component","wrapper":"bds220DropdownMenu-wrapper","menu":"bds220DropdownMenu-menu","--placement_bottom-start":"bds220DropdownMenu---placement_bottom-start","--placement_bottom-end":"bds220DropdownMenu---placement_bottom-end","separator":"bds220DropdownMenu-separator","item":"bds220DropdownMenu-item","icon":"bds220DropdownMenu-icon"};
|
|
1483
1485
|
|
|
1484
1486
|
// src/components/interaction/DropdownMenu/DropdownMenu.tsx
|
|
1485
1487
|
import { cn as cn27 } from "@boostdev/design-system-foundation";
|
|
@@ -1600,7 +1602,7 @@ import {
|
|
|
1600
1602
|
} from "react";
|
|
1601
1603
|
|
|
1602
1604
|
// src/components/interaction/Popover/Popover.module.css
|
|
1603
|
-
var Popover_default = {"component":"
|
|
1605
|
+
var Popover_default = {"component":"bds220Popover-component","wrapper":"bds220Popover-wrapper","panel":"bds220Popover-panel","g":"bds220Popover-g"};
|
|
1604
1606
|
|
|
1605
1607
|
// src/components/interaction/Popover/Popover.tsx
|
|
1606
1608
|
import { cn as cn28 } from "@boostdev/design-system-foundation";
|
|
@@ -1685,7 +1687,7 @@ function Popover({
|
|
|
1685
1687
|
}
|
|
1686
1688
|
|
|
1687
1689
|
// src/components/interaction/Rating/Rating.module.css
|
|
1688
|
-
var Rating_default = {"component":"
|
|
1690
|
+
var Rating_default = {"component":"bds220Rating-component","rating":"bds220Rating-rating","star":"bds220Rating-star","--filled":"bds220Rating---filled"};
|
|
1689
1691
|
|
|
1690
1692
|
// src/components/interaction/Rating/Rating.tsx
|
|
1691
1693
|
import { cn as cn29 } from "@boostdev/design-system-foundation";
|
|
@@ -1717,7 +1719,7 @@ function Rating({ value, max = 5, className, ...rest }) {
|
|
|
1717
1719
|
import { useState as useState8, useEffect as useEffect6, createContext, useContext, useCallback, useMemo as useMemo2, useRef as useRef8 } from "react";
|
|
1718
1720
|
|
|
1719
1721
|
// src/components/interaction/Toast/Toast.module.css
|
|
1720
|
-
var Toast_default = {"component":"
|
|
1722
|
+
var Toast_default = {"component":"bds220Toast-component","toastContainer":"bds220Toast-toastContainer","toast":"bds220Toast-toast","--variant_success":"bds220Toast---variant_success","--variant_warning":"bds220Toast---variant_warning","--variant_info":"bds220Toast---variant_info","--variant_error":"bds220Toast---variant_error","message":"bds220Toast-message","closeButton":"bds220Toast-closeButton"};
|
|
1721
1723
|
|
|
1722
1724
|
// src/components/interaction/Toast/Toast.tsx
|
|
1723
1725
|
import { cn as cn30 } from "@boostdev/design-system-foundation";
|
|
@@ -1795,10 +1797,10 @@ function useToast() {
|
|
|
1795
1797
|
import { useId as useId11 } from "react";
|
|
1796
1798
|
|
|
1797
1799
|
// src/components/interaction/form/Checkbox/Checkbox.module.css
|
|
1798
|
-
var Checkbox_default = {"component":"
|
|
1800
|
+
var Checkbox_default = {"component":"bds220Checkbox-component","checkboxGroup":"bds220Checkbox-checkboxGroup","inputWrapper":"bds220Checkbox-inputWrapper","checkbox":"bds220Checkbox-checkbox","checkboxError":"bds220Checkbox-checkboxError"};
|
|
1799
1801
|
|
|
1800
1802
|
// src/components/interaction/form/atoms/Message.module.css
|
|
1801
|
-
var Message_default = {"component":"
|
|
1803
|
+
var Message_default = {"component":"bds220Message-component","error":"bds220Message-error","hint":"bds220Message-hint"};
|
|
1802
1804
|
|
|
1803
1805
|
// src/components/interaction/form/atoms/Message.tsx
|
|
1804
1806
|
import { cn as cn31 } from "@boostdev/design-system-foundation";
|
|
@@ -1809,7 +1811,7 @@ var Message = ({ message, type, inputId, className }) => {
|
|
|
1809
1811
|
};
|
|
1810
1812
|
|
|
1811
1813
|
// src/components/interaction/form/atoms/Label.module.css
|
|
1812
|
-
var Label_default = {"component":"
|
|
1814
|
+
var Label_default = {"component":"bds220Label-component","label":"bds220Label-label"};
|
|
1813
1815
|
|
|
1814
1816
|
// src/components/interaction/form/atoms/Label.tsx
|
|
1815
1817
|
import { cn as cn32 } from "@boostdev/design-system-foundation";
|
|
@@ -1822,7 +1824,7 @@ var Label = ({ label, id, className }) => {
|
|
|
1822
1824
|
import { cn as cn34 } from "@boostdev/design-system-foundation";
|
|
1823
1825
|
|
|
1824
1826
|
// src/components/interaction/form/atoms/InputContainer.module.css
|
|
1825
|
-
var InputContainer_default = {"component":"
|
|
1827
|
+
var InputContainer_default = {"component":"bds220InputContainer-component","container":"bds220InputContainer-container"};
|
|
1826
1828
|
|
|
1827
1829
|
// src/components/interaction/form/atoms/InputContainer.tsx
|
|
1828
1830
|
import { cn as cn33 } from "@boostdev/design-system-foundation";
|
|
@@ -1863,7 +1865,7 @@ function Checkbox({ label, name, error, hint, className, ...props }) {
|
|
|
1863
1865
|
import { useId as useId12 } from "react";
|
|
1864
1866
|
|
|
1865
1867
|
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css
|
|
1866
|
-
var CheckboxGroup_default = {"component":"
|
|
1868
|
+
var CheckboxGroup_default = {"component":"bds220CheckboxGroup-component","group":"bds220CheckboxGroup-group","legend":"bds220CheckboxGroup-legend","required":"bds220CheckboxGroup-required","items":"bds220CheckboxGroup-items"};
|
|
1867
1869
|
|
|
1868
1870
|
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
|
|
1869
1871
|
import { cn as cn35 } from "@boostdev/design-system-foundation";
|
|
@@ -1911,7 +1913,7 @@ import {
|
|
|
1911
1913
|
} from "react";
|
|
1912
1914
|
|
|
1913
1915
|
// src/components/interaction/form/Combobox/Combobox.module.css
|
|
1914
|
-
var Combobox_default = {"component":"
|
|
1916
|
+
var Combobox_default = {"component":"bds220Combobox-component","formGroup":"bds220Combobox-formGroup","inputWrapper":"bds220Combobox-inputWrapper","input":"bds220Combobox-input","inputError":"bds220Combobox-inputError","chevron":"bds220Combobox-chevron","listbox":"bds220Combobox-listbox","option":"bds220Combobox-option","--highlighted":"bds220Combobox---highlighted","--selected":"bds220Combobox---selected","--disabled":"bds220Combobox---disabled"};
|
|
1915
1917
|
|
|
1916
1918
|
// src/components/interaction/form/Combobox/Combobox.tsx
|
|
1917
1919
|
import { cn as cn36 } from "@boostdev/design-system-foundation";
|
|
@@ -2062,7 +2064,7 @@ function Combobox({
|
|
|
2062
2064
|
import { useId as useId14, useRef as useRef10, useState as useState10 } from "react";
|
|
2063
2065
|
|
|
2064
2066
|
// src/components/interaction/form/FileInput/FileInput.module.css
|
|
2065
|
-
var FileInput_default = {"component":"
|
|
2067
|
+
var FileInput_default = {"component":"bds220FileInput-component","formGroup":"bds220FileInput-formGroup","fieldLabel":"bds220FileInput-fieldLabel","dropZone":"bds220FileInput-dropZone","isDragging":"bds220FileInput-isDragging","hasError":"bds220FileInput-hasError","isDisabled":"bds220FileInput-isDisabled","icon":"bds220FileInput-icon","prompt":"bds220FileInput-prompt","acceptHint":"bds220FileInput-acceptHint","hiddenInput":"bds220FileInput-hiddenInput"};
|
|
2066
2068
|
|
|
2067
2069
|
// src/components/interaction/form/FileInput/FileInput.tsx
|
|
2068
2070
|
import { cn as cn37 } from "@boostdev/design-system-foundation";
|
|
@@ -2163,7 +2165,7 @@ function FileInput({
|
|
|
2163
2165
|
import { useId as useId15 } from "react";
|
|
2164
2166
|
|
|
2165
2167
|
// src/components/interaction/form/FormInput/FormInput.module.css
|
|
2166
|
-
var FormInput_default = {"component":"
|
|
2168
|
+
var FormInput_default = {"component":"bds220FormInput-component","formGroup":"bds220FormInput-formGroup","input":"bds220FormInput-input","inputError":"bds220FormInput-inputError"};
|
|
2167
2169
|
|
|
2168
2170
|
// src/components/interaction/form/FormInput/FormInput.tsx
|
|
2169
2171
|
import { cn as cn38 } from "@boostdev/design-system-foundation";
|
|
@@ -2207,7 +2209,7 @@ function FormInput({
|
|
|
2207
2209
|
import { useId as useId16, useRef as useRef11, useState as useState11 } from "react";
|
|
2208
2210
|
|
|
2209
2211
|
// src/components/interaction/form/NumberInput/NumberInput.module.css
|
|
2210
|
-
var NumberInput_default = {"component":"
|
|
2212
|
+
var NumberInput_default = {"component":"bds220NumberInput-component","formGroup":"bds220NumberInput-formGroup","inputRow":"bds220NumberInput-inputRow","input":"bds220NumberInput-input","inputError":"bds220NumberInput-inputError","stepper":"bds220NumberInput-stepper"};
|
|
2211
2213
|
|
|
2212
2214
|
// src/components/interaction/form/NumberInput/NumberInput.tsx
|
|
2213
2215
|
import { cn as cn39 } from "@boostdev/design-system-foundation";
|
|
@@ -2312,7 +2314,7 @@ function NumberInput({
|
|
|
2312
2314
|
import { useId as useId17 } from "react";
|
|
2313
2315
|
|
|
2314
2316
|
// src/components/interaction/form/Radio/Radio.module.css
|
|
2315
|
-
var Radio_default = {"component":"
|
|
2317
|
+
var Radio_default = {"component":"bds220Radio-component","radioGroup":"bds220Radio-radioGroup","inputWrapper":"bds220Radio-inputWrapper","textWrapper":"bds220Radio-textWrapper","description":"bds220Radio-description","radio":"bds220Radio-radio","radioError":"bds220Radio-radioError"};
|
|
2316
2318
|
|
|
2317
2319
|
// src/components/interaction/form/Radio/Radio.tsx
|
|
2318
2320
|
import { cn as cn40 } from "@boostdev/design-system-foundation";
|
|
@@ -2350,7 +2352,7 @@ function Radio({ label, name, description, error, hint, className, ...props }) {
|
|
|
2350
2352
|
import { useId as useId18 } from "react";
|
|
2351
2353
|
|
|
2352
2354
|
// src/components/interaction/form/RadioGroup/RadioGroup.module.css
|
|
2353
|
-
var RadioGroup_default = {"component":"
|
|
2355
|
+
var RadioGroup_default = {"component":"bds220RadioGroup-component","group":"bds220RadioGroup-group","legend":"bds220RadioGroup-legend","required":"bds220RadioGroup-required","items":"bds220RadioGroup-items"};
|
|
2354
2356
|
|
|
2355
2357
|
// src/components/interaction/form/RadioGroup/RadioGroup.tsx
|
|
2356
2358
|
import { cn as cn41 } from "@boostdev/design-system-foundation";
|
|
@@ -2392,7 +2394,7 @@ function RadioGroup({
|
|
|
2392
2394
|
import { Children, cloneElement as cloneElement4, isValidElement as isValidElement4 } from "react";
|
|
2393
2395
|
|
|
2394
2396
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.module.css
|
|
2395
|
-
var SegmentedControl_default = {"component":"
|
|
2397
|
+
var SegmentedControl_default = {"component":"bds220SegmentedControl-component","control":"bds220SegmentedControl-control","thumb":"bds220SegmentedControl-thumb","indicator":"bds220SegmentedControl-indicator","item":"bds220SegmentedControl-item","--active":"bds220SegmentedControl---active","--disabled":"bds220SegmentedControl---disabled","--size_small":"bds220SegmentedControl---size_small","--size_large":"bds220SegmentedControl---size_large","--variant_outline":"bds220SegmentedControl---variant_outline"};
|
|
2396
2398
|
|
|
2397
2399
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
|
|
2398
2400
|
import { cn as cn42 } from "@boostdev/design-system-foundation";
|
|
@@ -2448,7 +2450,7 @@ function SegmentedControl({
|
|
|
2448
2450
|
import { useId as useId19 } from "react";
|
|
2449
2451
|
|
|
2450
2452
|
// src/components/interaction/form/Select/Select.module.css
|
|
2451
|
-
var Select_default = {"component":"
|
|
2453
|
+
var Select_default = {"component":"bds220Select-component","formGroup":"bds220Select-formGroup","selectWrapper":"bds220Select-selectWrapper","select":"bds220Select-select","selectError":"bds220Select-selectError","chevron":"bds220Select-chevron"};
|
|
2452
2454
|
|
|
2453
2455
|
// src/components/interaction/form/Select/Select.tsx
|
|
2454
2456
|
import { cn as cn43 } from "@boostdev/design-system-foundation";
|
|
@@ -2499,7 +2501,7 @@ function Select({
|
|
|
2499
2501
|
import { useId as useId20, useState as useState12 } from "react";
|
|
2500
2502
|
|
|
2501
2503
|
// src/components/interaction/form/Slider/Slider.module.css
|
|
2502
|
-
var Slider_default = {"component":"
|
|
2504
|
+
var Slider_default = {"component":"bds220Slider-component","formGroup":"bds220Slider-formGroup","labelRow":"bds220Slider-labelRow","value":"bds220Slider-value","slider":"bds220Slider-slider","sliderError":"bds220Slider-sliderError"};
|
|
2503
2505
|
|
|
2504
2506
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
2505
2507
|
import { cn as cn44 } from "@boostdev/design-system-foundation";
|
|
@@ -2561,7 +2563,7 @@ function Slider({
|
|
|
2561
2563
|
import { useId as useId21 } from "react";
|
|
2562
2564
|
|
|
2563
2565
|
// src/components/interaction/form/Switch/Switch.module.css
|
|
2564
|
-
var Switch_default = {"component":"
|
|
2566
|
+
var Switch_default = {"component":"bds220Switch-component","switchGroup":"bds220Switch-switchGroup","--size_small":"bds220Switch---size_small","--size_medium":"bds220Switch---size_medium","--size_large":"bds220Switch---size_large","inputWrapper":"bds220Switch-inputWrapper","trackWrapper":"bds220Switch-trackWrapper","switch":"bds220Switch-switch","track":"bds220Switch-track","thumb":"bds220Switch-thumb","switchError":"bds220Switch-switchError"};
|
|
2565
2567
|
|
|
2566
2568
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2567
2569
|
import { cn as cn45 } from "@boostdev/design-system-foundation";
|
|
@@ -2609,7 +2611,7 @@ function Switch({
|
|
|
2609
2611
|
import { useId as useId22 } from "react";
|
|
2610
2612
|
|
|
2611
2613
|
// src/components/interaction/form/Textarea/Textarea.module.css
|
|
2612
|
-
var Textarea_default = {"component":"
|
|
2614
|
+
var Textarea_default = {"component":"bds220Textarea-component","formGroup":"bds220Textarea-formGroup","textarea":"bds220Textarea-textarea","textareaError":"bds220Textarea-textareaError"};
|
|
2613
2615
|
|
|
2614
2616
|
// src/components/interaction/form/Textarea/Textarea.tsx
|
|
2615
2617
|
import { cn as cn46 } from "@boostdev/design-system-foundation";
|
|
@@ -2648,7 +2650,7 @@ function Textarea({
|
|
|
2648
2650
|
}
|
|
2649
2651
|
|
|
2650
2652
|
// src/components/layout/ButtonGroup/ButtonGroup.module.css
|
|
2651
|
-
var ButtonGroup_default = {"component":"
|
|
2653
|
+
var ButtonGroup_default = {"component":"bds220ButtonGroup-component","buttonGroup":"bds220ButtonGroup-buttonGroup","container":"bds220ButtonGroup-container","--variant_card":"bds220ButtonGroup---variant_card","--variant_flow":"bds220ButtonGroup---variant_flow","--variant_modal":"bds220ButtonGroup---variant_modal","--variant_content":"bds220ButtonGroup---variant_content","--variant_grid":"bds220ButtonGroup---variant_grid"};
|
|
2652
2654
|
|
|
2653
2655
|
// src/components/layout/ButtonGroup/ButtonGroup.tsx
|
|
2654
2656
|
import { cn as cn47 } from "@boostdev/design-system-foundation";
|
|
@@ -2667,7 +2669,7 @@ function ButtonContainer({ children, className, variant, ...rest }) {
|
|
|
2667
2669
|
var ButtonGroup = ButtonContainer;
|
|
2668
2670
|
|
|
2669
2671
|
// src/components/layout/Card/Card.module.css
|
|
2670
|
-
var Card_default = {"component":"
|
|
2672
|
+
var Card_default = {"component":"bds220Card-component","card":"bds220Card-card","--default":"bds220Card---default","--elevated":"bds220Card---elevated","--outlined":"bds220Card---outlined","--clickable":"bds220Card---clickable","--padding-none":"bds220Card---padding-none","--padding-small":"bds220Card---padding-small","--padding-medium":"bds220Card---padding-medium","--padding-large":"bds220Card---padding-large","--padding-extra-large":"bds220Card---padding-extra-large","--text-start":"bds220Card---text-start","--text-center":"bds220Card---text-center","--text-end":"bds220Card---text-end"};
|
|
2671
2673
|
|
|
2672
2674
|
// src/components/layout/Card/Card.tsx
|
|
2673
2675
|
import { cn as cn48 } from "@boostdev/design-system-foundation";
|
|
@@ -2703,12 +2705,258 @@ function Card({
|
|
|
2703
2705
|
);
|
|
2704
2706
|
}
|
|
2705
2707
|
|
|
2708
|
+
// src/components/layout/Grid/Grid.tsx
|
|
2709
|
+
import {
|
|
2710
|
+
createContext as createContext2,
|
|
2711
|
+
useMemo as useMemo4,
|
|
2712
|
+
useRef as useRef12
|
|
2713
|
+
} from "react";
|
|
2714
|
+
|
|
2715
|
+
// src/components/layout/Grid/Grid.module.css
|
|
2716
|
+
var Grid_default = {"component":"bds220Grid-component","grid":"bds220Grid-grid","--main":"bds220Grid---main","--page":"bds220Grid---page","--funnel":"bds220Grid---funnel","--custom":"bds220Grid---custom","--centered":"bds220Grid---centered","item":"bds220Grid-item","w3":"bds220Grid-w3","org":"bds220Grid-org","ts":"bds220Grid-ts","--masonry":"bds220Grid---masonry"};
|
|
2717
|
+
|
|
2718
|
+
// src/components/layout/Grid/Grid.tsx
|
|
2719
|
+
import { cn as cn49 } from "@boostdev/design-system-foundation";
|
|
2720
|
+
|
|
2721
|
+
// src/components/layout/Grid/masonry.ts
|
|
2722
|
+
import { useLayoutEffect } from "react";
|
|
2723
|
+
var ROW_UNIT_PX = 1;
|
|
2724
|
+
function supportsNativeMasonry() {
|
|
2725
|
+
if (typeof CSS === "undefined" || typeof CSS.supports !== "function") return false;
|
|
2726
|
+
return CSS.supports("display", "grid-lanes") || CSS.supports("grid-template-rows", "masonry");
|
|
2727
|
+
}
|
|
2728
|
+
function applyMasonryLayout(container, rawChildren) {
|
|
2729
|
+
const cs = window.getComputedStyle(container);
|
|
2730
|
+
const targetGap = parseFloat(cs.columnGap) || 0;
|
|
2731
|
+
container.style.gridAutoRows = `${ROW_UNIT_PX}px`;
|
|
2732
|
+
container.style.rowGap = "0px";
|
|
2733
|
+
container.style.gridAutoFlow = "dense";
|
|
2734
|
+
const children = rawChildren.filter(
|
|
2735
|
+
(el) => el.nodeType === 1 && window.getComputedStyle(el).display !== "none"
|
|
2736
|
+
);
|
|
2737
|
+
for (const child of children) {
|
|
2738
|
+
child.style.gridRow = "";
|
|
2739
|
+
child.style.gridRowStart = "";
|
|
2740
|
+
child.style.gridRowEnd = "";
|
|
2741
|
+
}
|
|
2742
|
+
const heights = children.map((child) => child.offsetHeight);
|
|
2743
|
+
for (let i = 0; i < children.length; i++) {
|
|
2744
|
+
const span = Math.max(1, Math.ceil(heights[i] + targetGap));
|
|
2745
|
+
children[i].style.gridRowEnd = `span ${span}`;
|
|
2746
|
+
}
|
|
2747
|
+
}
|
|
2748
|
+
function clearMasonryLayout(container, rawChildren) {
|
|
2749
|
+
container.style.gridAutoRows = "";
|
|
2750
|
+
container.style.gridAutoFlow = "";
|
|
2751
|
+
container.style.rowGap = "";
|
|
2752
|
+
for (const child of rawChildren) {
|
|
2753
|
+
if (child.nodeType !== 1) continue;
|
|
2754
|
+
child.style.gridRow = "";
|
|
2755
|
+
child.style.gridRowStart = "";
|
|
2756
|
+
child.style.gridRowEnd = "";
|
|
2757
|
+
}
|
|
2758
|
+
}
|
|
2759
|
+
function useMasonry(ref, enabled) {
|
|
2760
|
+
useLayoutEffect(() => {
|
|
2761
|
+
const container = ref.current;
|
|
2762
|
+
if (!container || !enabled) return;
|
|
2763
|
+
if (supportsNativeMasonry()) return;
|
|
2764
|
+
let frame = 0;
|
|
2765
|
+
const schedule = () => {
|
|
2766
|
+
cancelAnimationFrame(frame);
|
|
2767
|
+
frame = requestAnimationFrame(() => {
|
|
2768
|
+
applyMasonryLayout(container, Array.from(container.children));
|
|
2769
|
+
});
|
|
2770
|
+
};
|
|
2771
|
+
schedule();
|
|
2772
|
+
const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(schedule) : null;
|
|
2773
|
+
if (ro) {
|
|
2774
|
+
for (const child of Array.from(container.children)) ro.observe(child);
|
|
2775
|
+
}
|
|
2776
|
+
const mo = typeof MutationObserver !== "undefined" ? new MutationObserver(() => {
|
|
2777
|
+
if (ro) for (const child of Array.from(container.children)) ro.observe(child);
|
|
2778
|
+
schedule();
|
|
2779
|
+
}) : null;
|
|
2780
|
+
mo?.observe(container, { childList: true });
|
|
2781
|
+
return () => {
|
|
2782
|
+
cancelAnimationFrame(frame);
|
|
2783
|
+
ro?.disconnect();
|
|
2784
|
+
mo?.disconnect();
|
|
2785
|
+
clearMasonryLayout(container, Array.from(container.children));
|
|
2786
|
+
};
|
|
2787
|
+
}, [ref, enabled]);
|
|
2788
|
+
}
|
|
2789
|
+
|
|
2790
|
+
// src/components/layout/Grid/Grid.tsx
|
|
2791
|
+
import { jsx as jsx49 } from "react/jsx-runtime";
|
|
2792
|
+
var GridContext = createContext2({
|
|
2793
|
+
autoSpanMedia: false
|
|
2794
|
+
});
|
|
2795
|
+
function Grid({
|
|
2796
|
+
children,
|
|
2797
|
+
className,
|
|
2798
|
+
variant = "main",
|
|
2799
|
+
columns,
|
|
2800
|
+
isCentered = false,
|
|
2801
|
+
isMasonry = false,
|
|
2802
|
+
autoSpanMedia = false,
|
|
2803
|
+
as,
|
|
2804
|
+
style,
|
|
2805
|
+
...rest
|
|
2806
|
+
}) {
|
|
2807
|
+
const ref = useRef12(null);
|
|
2808
|
+
useMasonry(ref, isMasonry);
|
|
2809
|
+
const classNames = cn49(
|
|
2810
|
+
Grid_default.grid,
|
|
2811
|
+
Grid_default[`--${variant}`],
|
|
2812
|
+
isCentered && Grid_default["--centered"],
|
|
2813
|
+
isMasonry && Grid_default["--masonry"],
|
|
2814
|
+
className
|
|
2815
|
+
);
|
|
2816
|
+
const composedStyle = variant === "custom" && columns !== void 0 ? { ...style, ["--grid_columns"]: columns } : style;
|
|
2817
|
+
const Component = as ?? "div";
|
|
2818
|
+
const ctx = useMemo4(() => ({ autoSpanMedia }), [autoSpanMedia]);
|
|
2819
|
+
return /* @__PURE__ */ jsx49(Component, { ref, ...rest, className: classNames, style: composedStyle, children: /* @__PURE__ */ jsx49(GridContext.Provider, { value: ctx, children }) });
|
|
2820
|
+
}
|
|
2821
|
+
|
|
2822
|
+
// src/components/layout/Grid/GridItem.tsx
|
|
2823
|
+
import {
|
|
2824
|
+
useContext as useContext2,
|
|
2825
|
+
useLayoutEffect as useLayoutEffect2,
|
|
2826
|
+
useRef as useRef13,
|
|
2827
|
+
useState as useState13
|
|
2828
|
+
} from "react";
|
|
2829
|
+
import { cn as cn50 } from "@boostdev/design-system-foundation";
|
|
2830
|
+
|
|
2831
|
+
// src/components/layout/Grid/autoSpan.ts
|
|
2832
|
+
function aspectToColumnSpan(ratio) {
|
|
2833
|
+
if (!Number.isFinite(ratio) || ratio <= 0) return "one-quarter";
|
|
2834
|
+
if (ratio > 3.5) return "full";
|
|
2835
|
+
if (ratio > 2.2) return "three-quarters";
|
|
2836
|
+
if (ratio > 1.5) return "half";
|
|
2837
|
+
return "one-quarter";
|
|
2838
|
+
}
|
|
2839
|
+
function findMediaChild(root) {
|
|
2840
|
+
return root.querySelector("img, video");
|
|
2841
|
+
}
|
|
2842
|
+
function readMediaAspect(media) {
|
|
2843
|
+
if (media instanceof HTMLImageElement) {
|
|
2844
|
+
if (media.naturalWidth > 0 && media.naturalHeight > 0) {
|
|
2845
|
+
return media.naturalWidth / media.naturalHeight;
|
|
2846
|
+
}
|
|
2847
|
+
return null;
|
|
2848
|
+
}
|
|
2849
|
+
if (media.videoWidth > 0 && media.videoHeight > 0) {
|
|
2850
|
+
return media.videoWidth / media.videoHeight;
|
|
2851
|
+
}
|
|
2852
|
+
return null;
|
|
2853
|
+
}
|
|
2854
|
+
function mediaReadyEvent(media) {
|
|
2855
|
+
if (media instanceof HTMLImageElement) return media.complete ? null : "load";
|
|
2856
|
+
if (media.readyState < 1) return "loadedmetadata";
|
|
2857
|
+
return null;
|
|
2858
|
+
}
|
|
2859
|
+
|
|
2860
|
+
// src/components/layout/Grid/GridItem.tsx
|
|
2861
|
+
import { jsx as jsx50 } from "react/jsx-runtime";
|
|
2862
|
+
var GridItemSpan = {
|
|
2863
|
+
full: "full",
|
|
2864
|
+
threeQuarters: "three-quarters",
|
|
2865
|
+
twoThirds: "two-thirds",
|
|
2866
|
+
half: "half",
|
|
2867
|
+
oneThird: "one-third",
|
|
2868
|
+
oneQuarter: "one-quarter",
|
|
2869
|
+
auto: "auto"
|
|
2870
|
+
};
|
|
2871
|
+
var SPAN_VAR = {
|
|
2872
|
+
full: "var(--bds-grid_span-100)",
|
|
2873
|
+
"three-quarters": "span var(--bds-grid_columns-75)",
|
|
2874
|
+
"two-thirds": "span var(--bds-grid_columns-66)",
|
|
2875
|
+
half: "span var(--bds-grid_columns-50)",
|
|
2876
|
+
"one-third": "span var(--bds-grid_columns-33)",
|
|
2877
|
+
"one-quarter": "span var(--bds-grid_columns-25)"
|
|
2878
|
+
};
|
|
2879
|
+
function resolveSpan(value) {
|
|
2880
|
+
if (typeof value === "number") return `span ${value}`;
|
|
2881
|
+
return SPAN_VAR[value];
|
|
2882
|
+
}
|
|
2883
|
+
function GridItem({
|
|
2884
|
+
children,
|
|
2885
|
+
className,
|
|
2886
|
+
columnSpan,
|
|
2887
|
+
rowSpan,
|
|
2888
|
+
startColumn,
|
|
2889
|
+
endColumn,
|
|
2890
|
+
as,
|
|
2891
|
+
style,
|
|
2892
|
+
...rest
|
|
2893
|
+
}) {
|
|
2894
|
+
const { autoSpanMedia } = useContext2(GridContext);
|
|
2895
|
+
const effectiveSpan = columnSpan ?? (autoSpanMedia ? "auto" : "full");
|
|
2896
|
+
const ref = useRef13(null);
|
|
2897
|
+
const [autoSpan, setAutoSpan] = useState13("one-quarter");
|
|
2898
|
+
useLayoutEffect2(() => {
|
|
2899
|
+
if (effectiveSpan !== "auto") return;
|
|
2900
|
+
const el = ref.current;
|
|
2901
|
+
if (!el) return;
|
|
2902
|
+
let cancelled = false;
|
|
2903
|
+
let cleanup;
|
|
2904
|
+
const resolve = () => {
|
|
2905
|
+
if (cancelled) return;
|
|
2906
|
+
const media = findMediaChild(el);
|
|
2907
|
+
if (!media) {
|
|
2908
|
+
setAutoSpan("one-quarter");
|
|
2909
|
+
return;
|
|
2910
|
+
}
|
|
2911
|
+
const aspect = readMediaAspect(media);
|
|
2912
|
+
if (aspect !== null) {
|
|
2913
|
+
setAutoSpan(aspectToColumnSpan(aspect));
|
|
2914
|
+
return;
|
|
2915
|
+
}
|
|
2916
|
+
const event = mediaReadyEvent(media);
|
|
2917
|
+
if (!event) {
|
|
2918
|
+
setAutoSpan("one-quarter");
|
|
2919
|
+
return;
|
|
2920
|
+
}
|
|
2921
|
+
const handler = () => {
|
|
2922
|
+
const a = readMediaAspect(media);
|
|
2923
|
+
if (a !== null) setAutoSpan(aspectToColumnSpan(a));
|
|
2924
|
+
};
|
|
2925
|
+
media.addEventListener(event, handler, { once: true });
|
|
2926
|
+
cleanup = () => media.removeEventListener(event, handler);
|
|
2927
|
+
};
|
|
2928
|
+
resolve();
|
|
2929
|
+
return () => {
|
|
2930
|
+
cancelled = true;
|
|
2931
|
+
cleanup?.();
|
|
2932
|
+
};
|
|
2933
|
+
}, [effectiveSpan, children]);
|
|
2934
|
+
const hasExplicitRange = startColumn !== void 0 || endColumn !== void 0;
|
|
2935
|
+
const gridColumn = hasExplicitRange ? `${startColumn ?? "auto"} / ${endColumn ?? "auto"}` : resolveSpan(effectiveSpan === "auto" ? autoSpan : effectiveSpan);
|
|
2936
|
+
const composedStyle = {
|
|
2937
|
+
...style,
|
|
2938
|
+
gridColumn,
|
|
2939
|
+
...rowSpan !== void 0 ? { gridRow: `span ${rowSpan}` } : {}
|
|
2940
|
+
};
|
|
2941
|
+
const Component = as ?? "div";
|
|
2942
|
+
return /* @__PURE__ */ jsx50(
|
|
2943
|
+
Component,
|
|
2944
|
+
{
|
|
2945
|
+
ref,
|
|
2946
|
+
...rest,
|
|
2947
|
+
className: cn50(Grid_default.item, className),
|
|
2948
|
+
style: composedStyle,
|
|
2949
|
+
children
|
|
2950
|
+
}
|
|
2951
|
+
);
|
|
2952
|
+
}
|
|
2953
|
+
|
|
2706
2954
|
// src/components/layout/SectionHeader/SectionHeader.module.css
|
|
2707
|
-
var SectionHeader_default = {"component":"
|
|
2955
|
+
var SectionHeader_default = {"component":"bds220SectionHeader-component","sectionHeader":"bds220SectionHeader-sectionHeader","title":"bds220SectionHeader-title","subtitle":"bds220SectionHeader-subtitle","--start":"bds220SectionHeader---start","--center":"bds220SectionHeader---center","--end":"bds220SectionHeader---end","--medium":"bds220SectionHeader---medium","--xs":"bds220SectionHeader---xs","--small":"bds220SectionHeader---small","--large":"bds220SectionHeader---large"};
|
|
2708
2956
|
|
|
2709
2957
|
// src/components/layout/SectionHeader/SectionHeader.tsx
|
|
2710
|
-
import { cn as
|
|
2711
|
-
import { jsx as
|
|
2958
|
+
import { cn as cn51 } from "@boostdev/design-system-foundation";
|
|
2959
|
+
import { jsx as jsx51, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
2712
2960
|
function SectionHeader({
|
|
2713
2961
|
title,
|
|
2714
2962
|
subtitle,
|
|
@@ -2719,24 +2967,24 @@ function SectionHeader({
|
|
|
2719
2967
|
...rest
|
|
2720
2968
|
}) {
|
|
2721
2969
|
const Title = titleAs;
|
|
2722
|
-
return /* @__PURE__ */ jsxs36("div", { ...rest, className:
|
|
2723
|
-
/* @__PURE__ */
|
|
2724
|
-
subtitle && /* @__PURE__ */
|
|
2970
|
+
return /* @__PURE__ */ jsxs36("div", { ...rest, className: cn51(SectionHeader_default.sectionHeader, SectionHeader_default[`--${alignment}`], SectionHeader_default[`--${size}`], className), children: [
|
|
2971
|
+
/* @__PURE__ */ jsx51(Title, { className: SectionHeader_default.title, children: title }),
|
|
2972
|
+
subtitle && /* @__PURE__ */ jsx51("p", { className: SectionHeader_default.subtitle, children: subtitle })
|
|
2725
2973
|
] });
|
|
2726
2974
|
}
|
|
2727
2975
|
|
|
2728
2976
|
// src/components/layout/IconWrapper/IconWrapper.module.css
|
|
2729
|
-
var IconWrapper_default = {"component":"
|
|
2977
|
+
var IconWrapper_default = {"component":"bds220IconWrapper-component","wrapper":"bds220IconWrapper-wrapper"};
|
|
2730
2978
|
|
|
2731
2979
|
// src/components/layout/IconWrapper/IconWrapper.tsx
|
|
2732
|
-
import { cn as
|
|
2733
|
-
import { jsx as
|
|
2980
|
+
import { cn as cn52 } from "@boostdev/design-system-foundation";
|
|
2981
|
+
import { jsx as jsx52 } from "react/jsx-runtime";
|
|
2734
2982
|
function IconWrapper({ children, className, ...rest }) {
|
|
2735
|
-
return /* @__PURE__ */
|
|
2983
|
+
return /* @__PURE__ */ jsx52("div", { ...rest, className: cn52(className, IconWrapper_default.wrapper), children });
|
|
2736
2984
|
}
|
|
2737
2985
|
|
|
2738
2986
|
// src/index.ts
|
|
2739
|
-
import { cn as
|
|
2987
|
+
import { cn as cn53 } from "@boostdev/design-system-foundation";
|
|
2740
2988
|
export {
|
|
2741
2989
|
Accordion,
|
|
2742
2990
|
Alert,
|
|
@@ -2760,6 +3008,9 @@ export {
|
|
|
2760
3008
|
DropdownMenu,
|
|
2761
3009
|
FileInput,
|
|
2762
3010
|
FormInput,
|
|
3011
|
+
Grid,
|
|
3012
|
+
GridItem,
|
|
3013
|
+
GridItemSpan,
|
|
2763
3014
|
IconWrapper,
|
|
2764
3015
|
Link,
|
|
2765
3016
|
Loading,
|
|
@@ -2786,6 +3037,6 @@ export {
|
|
|
2786
3037
|
ToastProvider,
|
|
2787
3038
|
Tooltip,
|
|
2788
3039
|
Typography,
|
|
2789
|
-
|
|
3040
|
+
cn53 as cn,
|
|
2790
3041
|
useToast
|
|
2791
3042
|
};
|