@boostdev/design-system-components 2.1.0 → 2.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +2 -1
- package/README.md +40 -0
- package/dist/client.cjs +308 -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 +314 -60
- package/dist/index.cjs +308 -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 +314 -60
- package/dist/web-components/index.d.ts +129 -1
- package/dist/web-components/index.js +313 -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 +415 -0
- package/src/components/layout/Grid/Grid.stories.tsx +160 -0
- package/src/components/layout/Grid/Grid.tsx +92 -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 +139 -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/client.d.cts
CHANGED
|
@@ -483,6 +483,44 @@ type CardOwnProps = WithClassName & {
|
|
|
483
483
|
type CardProps<C extends ElementType = 'div'> = CardOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof CardOwnProps>;
|
|
484
484
|
declare function Card<C extends ElementType = 'div'>({ children, className, variant, padding, textAlign, as, onClick, ...rest }: CardProps<C>): react_jsx_runtime.JSX.Element;
|
|
485
485
|
|
|
486
|
+
type GridVariant = 'main' | 'page' | 'funnel' | 'custom';
|
|
487
|
+
type GridOwnProps = WithClassName & {
|
|
488
|
+
variant?: GridVariant;
|
|
489
|
+
columns?: number;
|
|
490
|
+
isCentered?: boolean;
|
|
491
|
+
isMasonry?: boolean;
|
|
492
|
+
/**
|
|
493
|
+
* When true, any child `GridItem` without an explicit `columnSpan` resolves
|
|
494
|
+
* to `"auto"` — column span is derived from the intrinsic aspect ratio of
|
|
495
|
+
* the first `<img>`/`<video>` child. Items that set `columnSpan` explicitly
|
|
496
|
+
* are unaffected.
|
|
497
|
+
*/
|
|
498
|
+
autoSpanMedia?: boolean;
|
|
499
|
+
as?: ElementType;
|
|
500
|
+
};
|
|
501
|
+
type GridProps<C extends ElementType = 'div'> = GridOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof GridOwnProps>;
|
|
502
|
+
declare function Grid<C extends ElementType = 'div'>({ children, className, variant, columns, isCentered, isMasonry, autoSpanMedia, as, style, ...rest }: GridProps<C>): react_jsx_runtime.JSX.Element;
|
|
503
|
+
|
|
504
|
+
type GridItemSpanValue = 'full' | 'three-quarters' | 'two-thirds' | 'half' | 'one-third' | 'one-quarter' | 'auto' | number;
|
|
505
|
+
declare const GridItemSpan: {
|
|
506
|
+
readonly full: "full";
|
|
507
|
+
readonly threeQuarters: "three-quarters";
|
|
508
|
+
readonly twoThirds: "two-thirds";
|
|
509
|
+
readonly half: "half";
|
|
510
|
+
readonly oneThird: "one-third";
|
|
511
|
+
readonly oneQuarter: "one-quarter";
|
|
512
|
+
readonly auto: "auto";
|
|
513
|
+
};
|
|
514
|
+
type GridItemOwnProps = WithClassName & {
|
|
515
|
+
columnSpan?: GridItemSpanValue;
|
|
516
|
+
rowSpan?: number;
|
|
517
|
+
startColumn?: number;
|
|
518
|
+
endColumn?: number;
|
|
519
|
+
as?: ElementType;
|
|
520
|
+
};
|
|
521
|
+
type GridItemProps<C extends ElementType = 'div'> = GridItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof GridItemOwnProps>;
|
|
522
|
+
declare function GridItem<C extends ElementType = 'div'>({ children, className, columnSpan, rowSpan, startColumn, endColumn, as, style, ...rest }: GridItemProps<C>): react_jsx_runtime.JSX.Element;
|
|
523
|
+
|
|
486
524
|
type IntrinsicElement = keyof JSX.IntrinsicElements;
|
|
487
525
|
type SectionHeaderProps = WithClassName & Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
|
|
488
526
|
title: string;
|
|
@@ -498,4 +536,4 @@ interface IconWrapperProps extends WithClassName, HTMLAttributes<HTMLDivElement>
|
|
|
498
536
|
}
|
|
499
537
|
declare function IconWrapper({ children, className, ...rest }: IconWrapperProps): react_jsx_runtime.JSX.Element;
|
|
500
538
|
|
|
501
|
-
export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonContainer, type ButtonContainerProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, type CheckboxGroupProps, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, Command, type CommandItem, type DescriptionItem, DescriptionList, Dialog, Drawer, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, type IconWrapperProps, Link, Loading, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, type RadioGroupProps, Rating, SectionHeader, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, Separator, Skeleton, SkipLink, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ToastProvider, Tooltip, Typography, type WithClassName, useToast };
|
|
539
|
+
export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonContainer, type ButtonContainerProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, type CheckboxGroupProps, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, Command, type CommandItem, type DescriptionItem, DescriptionList, Dialog, Drawer, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, Grid, GridItem, GridItemSpan, type GridItemSpanValue, type GridVariant, IconWrapper, type IconWrapperProps, Link, Loading, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, type RadioGroupProps, Rating, SectionHeader, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, Separator, Skeleton, SkipLink, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ToastProvider, Tooltip, Typography, type WithClassName, useToast };
|
package/dist/client.d.ts
CHANGED
|
@@ -483,6 +483,44 @@ type CardOwnProps = WithClassName & {
|
|
|
483
483
|
type CardProps<C extends ElementType = 'div'> = CardOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof CardOwnProps>;
|
|
484
484
|
declare function Card<C extends ElementType = 'div'>({ children, className, variant, padding, textAlign, as, onClick, ...rest }: CardProps<C>): react_jsx_runtime.JSX.Element;
|
|
485
485
|
|
|
486
|
+
type GridVariant = 'main' | 'page' | 'funnel' | 'custom';
|
|
487
|
+
type GridOwnProps = WithClassName & {
|
|
488
|
+
variant?: GridVariant;
|
|
489
|
+
columns?: number;
|
|
490
|
+
isCentered?: boolean;
|
|
491
|
+
isMasonry?: boolean;
|
|
492
|
+
/**
|
|
493
|
+
* When true, any child `GridItem` without an explicit `columnSpan` resolves
|
|
494
|
+
* to `"auto"` — column span is derived from the intrinsic aspect ratio of
|
|
495
|
+
* the first `<img>`/`<video>` child. Items that set `columnSpan` explicitly
|
|
496
|
+
* are unaffected.
|
|
497
|
+
*/
|
|
498
|
+
autoSpanMedia?: boolean;
|
|
499
|
+
as?: ElementType;
|
|
500
|
+
};
|
|
501
|
+
type GridProps<C extends ElementType = 'div'> = GridOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof GridOwnProps>;
|
|
502
|
+
declare function Grid<C extends ElementType = 'div'>({ children, className, variant, columns, isCentered, isMasonry, autoSpanMedia, as, style, ...rest }: GridProps<C>): react_jsx_runtime.JSX.Element;
|
|
503
|
+
|
|
504
|
+
type GridItemSpanValue = 'full' | 'three-quarters' | 'two-thirds' | 'half' | 'one-third' | 'one-quarter' | 'auto' | number;
|
|
505
|
+
declare const GridItemSpan: {
|
|
506
|
+
readonly full: "full";
|
|
507
|
+
readonly threeQuarters: "three-quarters";
|
|
508
|
+
readonly twoThirds: "two-thirds";
|
|
509
|
+
readonly half: "half";
|
|
510
|
+
readonly oneThird: "one-third";
|
|
511
|
+
readonly oneQuarter: "one-quarter";
|
|
512
|
+
readonly auto: "auto";
|
|
513
|
+
};
|
|
514
|
+
type GridItemOwnProps = WithClassName & {
|
|
515
|
+
columnSpan?: GridItemSpanValue;
|
|
516
|
+
rowSpan?: number;
|
|
517
|
+
startColumn?: number;
|
|
518
|
+
endColumn?: number;
|
|
519
|
+
as?: ElementType;
|
|
520
|
+
};
|
|
521
|
+
type GridItemProps<C extends ElementType = 'div'> = GridItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof GridItemOwnProps>;
|
|
522
|
+
declare function GridItem<C extends ElementType = 'div'>({ children, className, columnSpan, rowSpan, startColumn, endColumn, as, style, ...rest }: GridItemProps<C>): react_jsx_runtime.JSX.Element;
|
|
523
|
+
|
|
486
524
|
type IntrinsicElement = keyof JSX.IntrinsicElements;
|
|
487
525
|
type SectionHeaderProps = WithClassName & Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
|
|
488
526
|
title: string;
|
|
@@ -498,4 +536,4 @@ interface IconWrapperProps extends WithClassName, HTMLAttributes<HTMLDivElement>
|
|
|
498
536
|
}
|
|
499
537
|
declare function IconWrapper({ children, className, ...rest }: IconWrapperProps): react_jsx_runtime.JSX.Element;
|
|
500
538
|
|
|
501
|
-
export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonContainer, type ButtonContainerProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, type CheckboxGroupProps, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, Command, type CommandItem, type DescriptionItem, DescriptionList, Dialog, Drawer, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, type IconWrapperProps, Link, Loading, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, type RadioGroupProps, Rating, SectionHeader, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, Separator, Skeleton, SkipLink, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ToastProvider, Tooltip, Typography, type WithClassName, useToast };
|
|
539
|
+
export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonContainer, type ButtonContainerProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, type CheckboxGroupProps, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, Command, type CommandItem, type DescriptionItem, DescriptionList, Dialog, Drawer, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, Grid, GridItem, GridItemSpan, type GridItemSpanValue, type GridVariant, IconWrapper, type IconWrapperProps, Link, Loading, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, type RadioGroupProps, Rating, SectionHeader, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, Separator, Skeleton, SkipLink, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ToastProvider, Tooltip, Typography, type WithClassName, useToast };
|