@boostdev/design-system-components 2.2.1 → 2.4.0

package/dist/client.d.cts

@@ -483,24 +483,6 @@ type CardOwnProps = WithClassName & {
 type CardProps<C extends ElementType = 'div'> = CardOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof CardOwnProps>;
 declare function Card<C extends ElementType = 'div'>({ children, className, variant, padding, textAlign, as, onClick, ...rest }: CardProps<C>): react_jsx_runtime.JSX.Element;
 
-type GridVariant = 'main' | 'page' | 'funnel' | 'custom';
-type GridOwnProps = WithClassName & {
-    variant?: GridVariant;
-    columns?: number;
-    isCentered?: boolean;
-    isMasonry?: boolean;
-    /**
-     * When true, any child `GridItem` without an explicit `columnSpan` resolves
-     * to `"auto"` — column span is derived from the intrinsic aspect ratio of
-     * the first `<img>`/`<video>` child. Items that set `columnSpan` explicitly
-     * are unaffected.
-     */
-    autoSpanMedia?: boolean;
-    as?: ElementType;
-};
-type GridProps<C extends ElementType = 'div'> = GridOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof GridOwnProps>;
-declare function Grid<C extends ElementType = 'div'>({ children, className, variant, columns, isCentered, isMasonry, autoSpanMedia, as, style, ...rest }: GridProps<C>): react_jsx_runtime.JSX.Element;
-
 type GridItemSpanValue = 'full' | 'three-quarters' | 'two-thirds' | 'half' | 'one-third' | 'one-quarter' | 'auto' | number;
 declare const GridItemSpan: {
     readonly full: "full";
@@ -521,6 +503,36 @@ type GridItemOwnProps = WithClassName & {
 type GridItemProps<C extends ElementType = 'div'> = GridItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof GridItemOwnProps>;
 declare function GridItem<C extends ElementType = 'div'>({ children, className, columnSpan, rowSpan, startColumn, endColumn, as, style, ...rest }: GridItemProps<C>): react_jsx_runtime.JSX.Element;
 
+type GridVariant = 'main' | 'page' | 'funnel' | 'custom';
+type GridOwnProps = WithClassName & {
+    variant?: GridVariant;
+    columns?: number;
+    isCentered?: boolean;
+    isMasonry?: boolean;
+    /**
+     * When true, any child `GridItem` without an explicit `columnSpan` resolves
+     * to `"auto"` — column span is derived from the intrinsic aspect ratio of
+     * the first `<img>`/`<video>` child. Items that set `columnSpan` explicitly
+     * are unaffected.
+     */
+    autoSpanMedia?: boolean;
+    /**
+     * Masonry only. When set, each `GridItem` without an explicit `columnSpan`
+     * tries to span this value; an item at the end of a row is demoted to fill
+     * just the remaining columns rather than wrapping and leaving a gap. Uses
+     * the same named span vocabulary as `columnSpan` on `GridItem`, so a value
+     * like `"half"` adapts across breakpoints via the foundation's responsive
+     * column tokens (4/8/12). A `number` is a literal column count and does
+     * **not** adapt — prefer named values unless you're using `variant="custom"`.
+     * Requires `isMasonry`; no-op otherwise. Items with an explicit `columnSpan`
+     * keep their span.
+     */
+    masonryPreferredColumnSpan?: Exclude<GridItemSpanValue, 'auto'>;
+    as?: ElementType;
+};
+type GridProps<C extends ElementType = 'div'> = GridOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof GridOwnProps>;
+declare function Grid<C extends ElementType = 'div'>({ children, className, variant, columns, isCentered, isMasonry, autoSpanMedia, masonryPreferredColumnSpan, as, style, ...rest }: GridProps<C>): react_jsx_runtime.JSX.Element;
+
 type IntrinsicElement = keyof JSX.IntrinsicElements;
 type SectionHeaderProps = WithClassName & Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
     title: string;

package/dist/client.d.ts

@@ -483,24 +483,6 @@ type CardOwnProps = WithClassName & {
 type CardProps<C extends ElementType = 'div'> = CardOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof CardOwnProps>;
 declare function Card<C extends ElementType = 'div'>({ children, className, variant, padding, textAlign, as, onClick, ...rest }: CardProps<C>): react_jsx_runtime.JSX.Element;
 
-type GridVariant = 'main' | 'page' | 'funnel' | 'custom';
-type GridOwnProps = WithClassName & {
-    variant?: GridVariant;
-    columns?: number;
-    isCentered?: boolean;
-    isMasonry?: boolean;
-    /**
-     * When true, any child `GridItem` without an explicit `columnSpan` resolves
-     * to `"auto"` — column span is derived from the intrinsic aspect ratio of
-     * the first `<img>`/`<video>` child. Items that set `columnSpan` explicitly
-     * are unaffected.
-     */
-    autoSpanMedia?: boolean;
-    as?: ElementType;
-};
-type GridProps<C extends ElementType = 'div'> = GridOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof GridOwnProps>;
-declare function Grid<C extends ElementType = 'div'>({ children, className, variant, columns, isCentered, isMasonry, autoSpanMedia, as, style, ...rest }: GridProps<C>): react_jsx_runtime.JSX.Element;
-
 type GridItemSpanValue = 'full' | 'three-quarters' | 'two-thirds' | 'half' | 'one-third' | 'one-quarter' | 'auto' | number;
 declare const GridItemSpan: {
     readonly full: "full";
@@ -521,6 +503,36 @@ type GridItemOwnProps = WithClassName & {
 type GridItemProps<C extends ElementType = 'div'> = GridItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof GridItemOwnProps>;
 declare function GridItem<C extends ElementType = 'div'>({ children, className, columnSpan, rowSpan, startColumn, endColumn, as, style, ...rest }: GridItemProps<C>): react_jsx_runtime.JSX.Element;
 
+type GridVariant = 'main' | 'page' | 'funnel' | 'custom';
+type GridOwnProps = WithClassName & {
+    variant?: GridVariant;
+    columns?: number;
+    isCentered?: boolean;
+    isMasonry?: boolean;
+    /**
+     * When true, any child `GridItem` without an explicit `columnSpan` resolves
+     * to `"auto"` — column span is derived from the intrinsic aspect ratio of
+     * the first `<img>`/`<video>` child. Items that set `columnSpan` explicitly
+     * are unaffected.
+     */
+    autoSpanMedia?: boolean;
+    /**
+     * Masonry only. When set, each `GridItem` without an explicit `columnSpan`
+     * tries to span this value; an item at the end of a row is demoted to fill
+     * just the remaining columns rather than wrapping and leaving a gap. Uses
+     * the same named span vocabulary as `columnSpan` on `GridItem`, so a value
+     * like `"half"` adapts across breakpoints via the foundation's responsive
+     * column tokens (4/8/12). A `number` is a literal column count and does
+     * **not** adapt — prefer named values unless you're using `variant="custom"`.
+     * Requires `isMasonry`; no-op otherwise. Items with an explicit `columnSpan`
+     * keep their span.
+     */
+    masonryPreferredColumnSpan?: Exclude<GridItemSpanValue, 'auto'>;
+    as?: ElementType;
+};
+type GridProps<C extends ElementType = 'div'> = GridOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof GridOwnProps>;
+declare function Grid<C extends ElementType = 'div'>({ children, className, variant, columns, isCentered, isMasonry, autoSpanMedia, masonryPreferredColumnSpan, as, style, ...rest }: GridProps<C>): react_jsx_runtime.JSX.Element;
+
 type IntrinsicElement = keyof JSX.IntrinsicElements;
 type SectionHeaderProps = WithClassName & Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
     title: string;