@boostdev/design-system-components 2.1.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 +40 -0
- package/dist/client.cjs +303 -60
- package/dist/client.css +568 -527
- package/dist/client.d.cts +39 -1
- package/dist/client.d.ts +39 -1
- package/dist/client.js +309 -60
- package/dist/index.cjs +303 -60
- package/dist/index.css +568 -527
- package/dist/index.d.cts +39 -1
- package/dist/index.d.ts +39 -1
- package/dist/index.js +309 -60
- package/dist/web-components/index.d.ts +129 -1
- package/dist/web-components/index.js +311 -0
- package/package.json +1 -1
- 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/index.ts +2 -0
- package/src/web-components/index.ts +4 -0
- 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";
|
|
@@ -1090,7 +1090,7 @@ function installInvokerCommandsPolyfill() {
|
|
|
1090
1090
|
}
|
|
1091
1091
|
|
|
1092
1092
|
// src/components/interaction/Command/Command.module.css
|
|
1093
|
-
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"};
|
|
1094
1094
|
|
|
1095
1095
|
// src/components/interaction/Command/Command.tsx
|
|
1096
1096
|
import { cn as cn24 } from "@boostdev/design-system-foundation";
|
|
@@ -1267,7 +1267,7 @@ function Command({
|
|
|
1267
1267
|
import { useEffect as useEffect2, useId as useId7, useRef as useRef4 } from "react";
|
|
1268
1268
|
|
|
1269
1269
|
// src/components/interaction/Dialog/Dialog.module.css
|
|
1270
|
-
var Dialog_default = {"component":"
|
|
1270
|
+
var Dialog_default = {"component":"bds220Dialog-component","dialog":"bds220Dialog-dialog","dialogContent":"bds220Dialog-dialogContent","closeButton":"bds220Dialog-closeButton"};
|
|
1271
1271
|
|
|
1272
1272
|
// src/components/interaction/Dialog/Dialog.tsx
|
|
1273
1273
|
import { cn as cn25 } from "@boostdev/design-system-foundation";
|
|
@@ -1373,7 +1373,7 @@ function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClo
|
|
|
1373
1373
|
import { useEffect as useEffect3, useId as useId8, useRef as useRef5 } from "react";
|
|
1374
1374
|
|
|
1375
1375
|
// src/components/interaction/Drawer/Drawer.module.css
|
|
1376
|
-
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"};
|
|
1377
1377
|
|
|
1378
1378
|
// src/components/interaction/Drawer/Drawer.tsx
|
|
1379
1379
|
import { cn as cn26 } from "@boostdev/design-system-foundation";
|
|
@@ -1481,7 +1481,7 @@ import {
|
|
|
1481
1481
|
} from "react";
|
|
1482
1482
|
|
|
1483
1483
|
// src/components/interaction/DropdownMenu/DropdownMenu.module.css
|
|
1484
|
-
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"};
|
|
1485
1485
|
|
|
1486
1486
|
// src/components/interaction/DropdownMenu/DropdownMenu.tsx
|
|
1487
1487
|
import { cn as cn27 } from "@boostdev/design-system-foundation";
|
|
@@ -1602,7 +1602,7 @@ import {
|
|
|
1602
1602
|
} from "react";
|
|
1603
1603
|
|
|
1604
1604
|
// src/components/interaction/Popover/Popover.module.css
|
|
1605
|
-
var Popover_default = {"component":"
|
|
1605
|
+
var Popover_default = {"component":"bds220Popover-component","wrapper":"bds220Popover-wrapper","panel":"bds220Popover-panel","g":"bds220Popover-g"};
|
|
1606
1606
|
|
|
1607
1607
|
// src/components/interaction/Popover/Popover.tsx
|
|
1608
1608
|
import { cn as cn28 } from "@boostdev/design-system-foundation";
|
|
@@ -1687,7 +1687,7 @@ function Popover({
|
|
|
1687
1687
|
}
|
|
1688
1688
|
|
|
1689
1689
|
// src/components/interaction/Rating/Rating.module.css
|
|
1690
|
-
var Rating_default = {"component":"
|
|
1690
|
+
var Rating_default = {"component":"bds220Rating-component","rating":"bds220Rating-rating","star":"bds220Rating-star","--filled":"bds220Rating---filled"};
|
|
1691
1691
|
|
|
1692
1692
|
// src/components/interaction/Rating/Rating.tsx
|
|
1693
1693
|
import { cn as cn29 } from "@boostdev/design-system-foundation";
|
|
@@ -1719,7 +1719,7 @@ function Rating({ value, max = 5, className, ...rest }) {
|
|
|
1719
1719
|
import { useState as useState8, useEffect as useEffect6, createContext, useContext, useCallback, useMemo as useMemo2, useRef as useRef8 } from "react";
|
|
1720
1720
|
|
|
1721
1721
|
// src/components/interaction/Toast/Toast.module.css
|
|
1722
|
-
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"};
|
|
1723
1723
|
|
|
1724
1724
|
// src/components/interaction/Toast/Toast.tsx
|
|
1725
1725
|
import { cn as cn30 } from "@boostdev/design-system-foundation";
|
|
@@ -1797,10 +1797,10 @@ function useToast() {
|
|
|
1797
1797
|
import { useId as useId11 } from "react";
|
|
1798
1798
|
|
|
1799
1799
|
// src/components/interaction/form/Checkbox/Checkbox.module.css
|
|
1800
|
-
var Checkbox_default = {"component":"
|
|
1800
|
+
var Checkbox_default = {"component":"bds220Checkbox-component","checkboxGroup":"bds220Checkbox-checkboxGroup","inputWrapper":"bds220Checkbox-inputWrapper","checkbox":"bds220Checkbox-checkbox","checkboxError":"bds220Checkbox-checkboxError"};
|
|
1801
1801
|
|
|
1802
1802
|
// src/components/interaction/form/atoms/Message.module.css
|
|
1803
|
-
var Message_default = {"component":"
|
|
1803
|
+
var Message_default = {"component":"bds220Message-component","error":"bds220Message-error","hint":"bds220Message-hint"};
|
|
1804
1804
|
|
|
1805
1805
|
// src/components/interaction/form/atoms/Message.tsx
|
|
1806
1806
|
import { cn as cn31 } from "@boostdev/design-system-foundation";
|
|
@@ -1811,7 +1811,7 @@ var Message = ({ message, type, inputId, className }) => {
|
|
|
1811
1811
|
};
|
|
1812
1812
|
|
|
1813
1813
|
// src/components/interaction/form/atoms/Label.module.css
|
|
1814
|
-
var Label_default = {"component":"
|
|
1814
|
+
var Label_default = {"component":"bds220Label-component","label":"bds220Label-label"};
|
|
1815
1815
|
|
|
1816
1816
|
// src/components/interaction/form/atoms/Label.tsx
|
|
1817
1817
|
import { cn as cn32 } from "@boostdev/design-system-foundation";
|
|
@@ -1824,7 +1824,7 @@ var Label = ({ label, id, className }) => {
|
|
|
1824
1824
|
import { cn as cn34 } from "@boostdev/design-system-foundation";
|
|
1825
1825
|
|
|
1826
1826
|
// src/components/interaction/form/atoms/InputContainer.module.css
|
|
1827
|
-
var InputContainer_default = {"component":"
|
|
1827
|
+
var InputContainer_default = {"component":"bds220InputContainer-component","container":"bds220InputContainer-container"};
|
|
1828
1828
|
|
|
1829
1829
|
// src/components/interaction/form/atoms/InputContainer.tsx
|
|
1830
1830
|
import { cn as cn33 } from "@boostdev/design-system-foundation";
|
|
@@ -1865,7 +1865,7 @@ function Checkbox({ label, name, error, hint, className, ...props }) {
|
|
|
1865
1865
|
import { useId as useId12 } from "react";
|
|
1866
1866
|
|
|
1867
1867
|
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css
|
|
1868
|
-
var CheckboxGroup_default = {"component":"
|
|
1868
|
+
var CheckboxGroup_default = {"component":"bds220CheckboxGroup-component","group":"bds220CheckboxGroup-group","legend":"bds220CheckboxGroup-legend","required":"bds220CheckboxGroup-required","items":"bds220CheckboxGroup-items"};
|
|
1869
1869
|
|
|
1870
1870
|
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
|
|
1871
1871
|
import { cn as cn35 } from "@boostdev/design-system-foundation";
|
|
@@ -1913,7 +1913,7 @@ import {
|
|
|
1913
1913
|
} from "react";
|
|
1914
1914
|
|
|
1915
1915
|
// src/components/interaction/form/Combobox/Combobox.module.css
|
|
1916
|
-
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"};
|
|
1917
1917
|
|
|
1918
1918
|
// src/components/interaction/form/Combobox/Combobox.tsx
|
|
1919
1919
|
import { cn as cn36 } from "@boostdev/design-system-foundation";
|
|
@@ -2064,7 +2064,7 @@ function Combobox({
|
|
|
2064
2064
|
import { useId as useId14, useRef as useRef10, useState as useState10 } from "react";
|
|
2065
2065
|
|
|
2066
2066
|
// src/components/interaction/form/FileInput/FileInput.module.css
|
|
2067
|
-
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"};
|
|
2068
2068
|
|
|
2069
2069
|
// src/components/interaction/form/FileInput/FileInput.tsx
|
|
2070
2070
|
import { cn as cn37 } from "@boostdev/design-system-foundation";
|
|
@@ -2165,7 +2165,7 @@ function FileInput({
|
|
|
2165
2165
|
import { useId as useId15 } from "react";
|
|
2166
2166
|
|
|
2167
2167
|
// src/components/interaction/form/FormInput/FormInput.module.css
|
|
2168
|
-
var FormInput_default = {"component":"
|
|
2168
|
+
var FormInput_default = {"component":"bds220FormInput-component","formGroup":"bds220FormInput-formGroup","input":"bds220FormInput-input","inputError":"bds220FormInput-inputError"};
|
|
2169
2169
|
|
|
2170
2170
|
// src/components/interaction/form/FormInput/FormInput.tsx
|
|
2171
2171
|
import { cn as cn38 } from "@boostdev/design-system-foundation";
|
|
@@ -2209,7 +2209,7 @@ function FormInput({
|
|
|
2209
2209
|
import { useId as useId16, useRef as useRef11, useState as useState11 } from "react";
|
|
2210
2210
|
|
|
2211
2211
|
// src/components/interaction/form/NumberInput/NumberInput.module.css
|
|
2212
|
-
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"};
|
|
2213
2213
|
|
|
2214
2214
|
// src/components/interaction/form/NumberInput/NumberInput.tsx
|
|
2215
2215
|
import { cn as cn39 } from "@boostdev/design-system-foundation";
|
|
@@ -2314,7 +2314,7 @@ function NumberInput({
|
|
|
2314
2314
|
import { useId as useId17 } from "react";
|
|
2315
2315
|
|
|
2316
2316
|
// src/components/interaction/form/Radio/Radio.module.css
|
|
2317
|
-
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"};
|
|
2318
2318
|
|
|
2319
2319
|
// src/components/interaction/form/Radio/Radio.tsx
|
|
2320
2320
|
import { cn as cn40 } from "@boostdev/design-system-foundation";
|
|
@@ -2352,7 +2352,7 @@ function Radio({ label, name, description, error, hint, className, ...props }) {
|
|
|
2352
2352
|
import { useId as useId18 } from "react";
|
|
2353
2353
|
|
|
2354
2354
|
// src/components/interaction/form/RadioGroup/RadioGroup.module.css
|
|
2355
|
-
var RadioGroup_default = {"component":"
|
|
2355
|
+
var RadioGroup_default = {"component":"bds220RadioGroup-component","group":"bds220RadioGroup-group","legend":"bds220RadioGroup-legend","required":"bds220RadioGroup-required","items":"bds220RadioGroup-items"};
|
|
2356
2356
|
|
|
2357
2357
|
// src/components/interaction/form/RadioGroup/RadioGroup.tsx
|
|
2358
2358
|
import { cn as cn41 } from "@boostdev/design-system-foundation";
|
|
@@ -2394,7 +2394,7 @@ function RadioGroup({
|
|
|
2394
2394
|
import { Children, cloneElement as cloneElement4, isValidElement as isValidElement4 } from "react";
|
|
2395
2395
|
|
|
2396
2396
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.module.css
|
|
2397
|
-
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"};
|
|
2398
2398
|
|
|
2399
2399
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
|
|
2400
2400
|
import { cn as cn42 } from "@boostdev/design-system-foundation";
|
|
@@ -2450,7 +2450,7 @@ function SegmentedControl({
|
|
|
2450
2450
|
import { useId as useId19 } from "react";
|
|
2451
2451
|
|
|
2452
2452
|
// src/components/interaction/form/Select/Select.module.css
|
|
2453
|
-
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"};
|
|
2454
2454
|
|
|
2455
2455
|
// src/components/interaction/form/Select/Select.tsx
|
|
2456
2456
|
import { cn as cn43 } from "@boostdev/design-system-foundation";
|
|
@@ -2501,7 +2501,7 @@ function Select({
|
|
|
2501
2501
|
import { useId as useId20, useState as useState12 } from "react";
|
|
2502
2502
|
|
|
2503
2503
|
// src/components/interaction/form/Slider/Slider.module.css
|
|
2504
|
-
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"};
|
|
2505
2505
|
|
|
2506
2506
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
2507
2507
|
import { cn as cn44 } from "@boostdev/design-system-foundation";
|
|
@@ -2563,7 +2563,7 @@ function Slider({
|
|
|
2563
2563
|
import { useId as useId21 } from "react";
|
|
2564
2564
|
|
|
2565
2565
|
// src/components/interaction/form/Switch/Switch.module.css
|
|
2566
|
-
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"};
|
|
2567
2567
|
|
|
2568
2568
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2569
2569
|
import { cn as cn45 } from "@boostdev/design-system-foundation";
|
|
@@ -2611,7 +2611,7 @@ function Switch({
|
|
|
2611
2611
|
import { useId as useId22 } from "react";
|
|
2612
2612
|
|
|
2613
2613
|
// src/components/interaction/form/Textarea/Textarea.module.css
|
|
2614
|
-
var Textarea_default = {"component":"
|
|
2614
|
+
var Textarea_default = {"component":"bds220Textarea-component","formGroup":"bds220Textarea-formGroup","textarea":"bds220Textarea-textarea","textareaError":"bds220Textarea-textareaError"};
|
|
2615
2615
|
|
|
2616
2616
|
// src/components/interaction/form/Textarea/Textarea.tsx
|
|
2617
2617
|
import { cn as cn46 } from "@boostdev/design-system-foundation";
|
|
@@ -2650,7 +2650,7 @@ function Textarea({
|
|
|
2650
2650
|
}
|
|
2651
2651
|
|
|
2652
2652
|
// src/components/layout/ButtonGroup/ButtonGroup.module.css
|
|
2653
|
-
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"};
|
|
2654
2654
|
|
|
2655
2655
|
// src/components/layout/ButtonGroup/ButtonGroup.tsx
|
|
2656
2656
|
import { cn as cn47 } from "@boostdev/design-system-foundation";
|
|
@@ -2669,7 +2669,7 @@ function ButtonContainer({ children, className, variant, ...rest }) {
|
|
|
2669
2669
|
var ButtonGroup = ButtonContainer;
|
|
2670
2670
|
|
|
2671
2671
|
// src/components/layout/Card/Card.module.css
|
|
2672
|
-
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"};
|
|
2673
2673
|
|
|
2674
2674
|
// src/components/layout/Card/Card.tsx
|
|
2675
2675
|
import { cn as cn48 } from "@boostdev/design-system-foundation";
|
|
@@ -2705,12 +2705,258 @@ function Card({
|
|
|
2705
2705
|
);
|
|
2706
2706
|
}
|
|
2707
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
|
+
|
|
2708
2954
|
// src/components/layout/SectionHeader/SectionHeader.module.css
|
|
2709
|
-
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"};
|
|
2710
2956
|
|
|
2711
2957
|
// src/components/layout/SectionHeader/SectionHeader.tsx
|
|
2712
|
-
import { cn as
|
|
2713
|
-
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";
|
|
2714
2960
|
function SectionHeader({
|
|
2715
2961
|
title,
|
|
2716
2962
|
subtitle,
|
|
@@ -2721,24 +2967,24 @@ function SectionHeader({
|
|
|
2721
2967
|
...rest
|
|
2722
2968
|
}) {
|
|
2723
2969
|
const Title = titleAs;
|
|
2724
|
-
return /* @__PURE__ */ jsxs36("div", { ...rest, className:
|
|
2725
|
-
/* @__PURE__ */
|
|
2726
|
-
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 })
|
|
2727
2973
|
] });
|
|
2728
2974
|
}
|
|
2729
2975
|
|
|
2730
2976
|
// src/components/layout/IconWrapper/IconWrapper.module.css
|
|
2731
|
-
var IconWrapper_default = {"component":"
|
|
2977
|
+
var IconWrapper_default = {"component":"bds220IconWrapper-component","wrapper":"bds220IconWrapper-wrapper"};
|
|
2732
2978
|
|
|
2733
2979
|
// src/components/layout/IconWrapper/IconWrapper.tsx
|
|
2734
|
-
import { cn as
|
|
2735
|
-
import { jsx as
|
|
2980
|
+
import { cn as cn52 } from "@boostdev/design-system-foundation";
|
|
2981
|
+
import { jsx as jsx52 } from "react/jsx-runtime";
|
|
2736
2982
|
function IconWrapper({ children, className, ...rest }) {
|
|
2737
|
-
return /* @__PURE__ */
|
|
2983
|
+
return /* @__PURE__ */ jsx52("div", { ...rest, className: cn52(className, IconWrapper_default.wrapper), children });
|
|
2738
2984
|
}
|
|
2739
2985
|
|
|
2740
2986
|
// src/index.ts
|
|
2741
|
-
import { cn as
|
|
2987
|
+
import { cn as cn53 } from "@boostdev/design-system-foundation";
|
|
2742
2988
|
export {
|
|
2743
2989
|
Accordion,
|
|
2744
2990
|
Alert,
|
|
@@ -2762,6 +3008,9 @@ export {
|
|
|
2762
3008
|
DropdownMenu,
|
|
2763
3009
|
FileInput,
|
|
2764
3010
|
FormInput,
|
|
3011
|
+
Grid,
|
|
3012
|
+
GridItem,
|
|
3013
|
+
GridItemSpan,
|
|
2765
3014
|
IconWrapper,
|
|
2766
3015
|
Link,
|
|
2767
3016
|
Loading,
|
|
@@ -2788,6 +3037,6 @@ export {
|
|
|
2788
3037
|
ToastProvider,
|
|
2789
3038
|
Tooltip,
|
|
2790
3039
|
Typography,
|
|
2791
|
-
|
|
3040
|
+
cn53 as cn,
|
|
2792
3041
|
useToast
|
|
2793
3042
|
};
|