@boostdev/design-system-components 2.1.0 → 2.2.0

package/src/components/layout/Grid/Grid.spec.tsx

@@ -0,0 +1,401 @@
+import { render, screen } from '@testing-library/react';
+import { act } from 'react';
+import { Grid } from './Grid';
+import { GridItem, GridItemSpan } from './GridItem';
+import { applyMasonryLayout, clearMasonryLayout } from './masonry';
+import {
+  aspectToColumnSpan,
+  findMediaChild,
+  mediaReadyEvent,
+  readMediaAspect,
+} from './autoSpan';
+
+describe('Grid', () => {
+  it('renders children', () => {
+    render(<Grid>content</Grid>);
+    expect(screen.getByText('content')).toBeInTheDocument();
+  });
+
+  it('renders as a div by default', () => {
+    const { container } = render(<Grid>x</Grid>);
+    expect(container.firstChild?.nodeName).toBe('DIV');
+  });
+
+  it('applies the main variant class by default', () => {
+    const { container } = render(<Grid>x</Grid>);
+    expect(container.firstChild).toHaveClass('grid');
+    expect(container.firstChild).toHaveClass('--main');
+  });
+
+  it('applies the page variant class', () => {
+    const { container } = render(<Grid variant="page">x</Grid>);
+    expect(container.firstChild).toHaveClass('--page');
+  });
+
+  it('applies the funnel variant class', () => {
+    const { container } = render(<Grid variant="funnel">x</Grid>);
+    expect(container.firstChild).toHaveClass('--funnel');
+  });
+
+  it('applies the custom variant class and --grid_columns style', () => {
+    const { container } = render(<Grid variant="custom" columns={5}>x</Grid>);
+    const el = container.firstChild as HTMLElement;
+    expect(el).toHaveClass('--custom');
+    expect(el.style.getPropertyValue('--grid_columns')).toBe('5');
+  });
+
+  it('applies the centered class when isCentered is true', () => {
+    const { container } = render(<Grid isCentered>x</Grid>);
+    expect(container.firstChild).toHaveClass('--centered');
+  });
+
+  it('forwards HTML attributes', () => {
+    render(<Grid data-testid="g" aria-label="layout">x</Grid>);
+    const el = screen.getByTestId('g');
+    expect(el).toHaveAttribute('aria-label', 'layout');
+  });
+
+  it('renders as a custom element via the as prop', () => {
+    const { container } = render(<Grid as="section">x</Grid>);
+    expect(container.firstChild?.nodeName).toBe('SECTION');
+  });
+
+  it('accepts a custom className', () => {
+    const { container } = render(<Grid className="custom">x</Grid>);
+    expect(container.firstChild).toHaveClass('custom');
+  });
+
+  it('applies the masonry class when isMasonry is true', () => {
+    const { container } = render(<Grid isMasonry>x</Grid>);
+    expect(container.firstChild).toHaveClass('--masonry');
+  });
+});
+
+describe('applyMasonryLayout', () => {
+  // offsetHeight isn't computed in jsdom; stub it per-element to simulate measured heights.
+  function stubHeight(el: HTMLElement, height: number) {
+    Object.defineProperty(el, 'offsetHeight', { configurable: true, value: height });
+  }
+
+  function makeContainer(gap: number) {
+    const container = document.createElement('div');
+    container.style.display = 'grid';
+    // Polyfill reads column-gap as the target gap (see masonry.ts).
+    container.style.columnGap = `${gap}px`;
+    container.style.rowGap = `${gap}px`;
+    document.body.append(container);
+    return container;
+  }
+
+  function makeItem(height: number) {
+    const el = document.createElement('div');
+    stubHeight(el, height);
+    return el;
+  }
+
+  it('overrides container to grid-auto-rows: 1px + grid-auto-flow: dense + row-gap: 0', () => {
+    const container = makeContainer(10);
+    applyMasonryLayout(container, []);
+    expect(container.style.gridAutoRows).toBe('1px');
+    expect(container.style.gridAutoFlow).toBe('dense');
+    expect(container.style.rowGap).toBe('0px');
+  });
+
+  it('assigns grid-row-end: span ceil(height + targetGap) to each item', () => {
+    const container = makeContainer(10);
+    const a = makeItem(100);
+    const b = makeItem(201);
+    container.append(a, b);
+    applyMasonryLayout(container, [a, b]);
+
+    // ceil(100 + 10) = 110
+    expect(a.style.gridRowEnd).toBe('span 110');
+    // ceil(201 + 10) = 211
+    expect(b.style.gridRowEnd).toBe('span 211');
+  });
+
+  it('spans at least 1 row for zero-height items', () => {
+    const container = makeContainer(0);
+    const item = makeItem(0);
+    container.append(item);
+    applyMasonryLayout(container, [item]);
+    expect(item.style.gridRowEnd).toBe('span 1');
+  });
+
+  it('clears prior row-span before measuring', () => {
+    const container = makeContainer(10);
+    const item = makeItem(50);
+    item.style.gridRow = 'span 99';
+    container.append(item);
+    applyMasonryLayout(container, [item]);
+    // ceil(50 + 10) = 60
+    expect(item.style.gridRowEnd).toBe('span 60');
+  });
+
+  it('ignores children with display:none', () => {
+    const container = makeContainer(10);
+    const visible = makeItem(50);
+    const hidden = makeItem(50);
+    hidden.style.display = 'none';
+    container.append(visible, hidden);
+    applyMasonryLayout(container, [visible, hidden]);
+    expect(visible.style.gridRowEnd).toBe('span 60');
+    expect(hidden.style.gridRowEnd).toBe('');
+  });
+
+  it('clearMasonryLayout undoes container and child styles', () => {
+    const container = makeContainer(10);
+    const item = makeItem(50);
+    container.append(item);
+    applyMasonryLayout(container, [item]);
+    clearMasonryLayout(container, [item]);
+    expect(container.style.gridAutoRows).toBe('');
+    expect(container.style.gridAutoFlow).toBe('');
+    expect(container.style.rowGap).toBe('');
+    expect(item.style.gridRowEnd).toBe('');
+    expect(item.style.gridRowStart).toBe('');
+    expect(item.style.gridRow).toBe('');
+  });
+});
+
+describe('GridItem', () => {
+  it('defaults to full span', () => {
+    const { container } = render(<GridItem>x</GridItem>);
+    const el = container.firstChild as HTMLElement;
+    expect(el.style.gridColumn).toBe('var(--bds-grid_span-100)');
+  });
+
+  it('maps named spans to span tokens', () => {
+    const cases: Array<[string, string]> = [
+      ['three-quarters', 'span var(--bds-grid_columns-75)'],
+      ['two-thirds', 'span var(--bds-grid_columns-66)'],
+      ['half', 'span var(--bds-grid_columns-50)'],
+      ['one-third', 'span var(--bds-grid_columns-33)'],
+      ['one-quarter', 'span var(--bds-grid_columns-25)'],
+    ];
+    for (const [input, expected] of cases) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const { container } = render(<GridItem columnSpan={input as any}>x</GridItem>);
+      expect((container.firstChild as HTMLElement).style.gridColumn).toBe(expected);
+    }
+  });
+
+  it('accepts numeric column span', () => {
+    const { container } = render(<GridItem columnSpan={3}>x</GridItem>);
+    expect((container.firstChild as HTMLElement).style.gridColumn).toBe('span 3');
+  });
+
+  it('applies rowSpan', () => {
+    const { container } = render(<GridItem rowSpan={2}>x</GridItem>);
+    expect((container.firstChild as HTMLElement).style.gridRow).toBe('span 2');
+  });
+
+  it('startColumn and endColumn override columnSpan', () => {
+    const { container } = render(
+      <GridItem columnSpan="half" startColumn={2} endColumn={5}>x</GridItem>,
+    );
+    expect((container.firstChild as HTMLElement).style.gridColumn).toBe('2 / 5');
+  });
+
+  it('GridItemSpan constant exposes kebab-case values', () => {
+    expect(GridItemSpan.threeQuarters).toBe('three-quarters');
+    expect(GridItemSpan.oneQuarter).toBe('one-quarter');
+  });
+
+  it('renders as a custom element via the as prop', () => {
+    const { container } = render(<GridItem as="article">x</GridItem>);
+    expect(container.firstChild?.nodeName).toBe('ARTICLE');
+  });
+});
+
+describe('aspectToColumnSpan', () => {
+  it('returns one-quarter for portrait, square, or slightly landscape (r ≤ 1.5)', () => {
+    expect(aspectToColumnSpan(0.5)).toBe('one-quarter');
+    expect(aspectToColumnSpan(1)).toBe('one-quarter');
+    expect(aspectToColumnSpan(1.5)).toBe('one-quarter');
+  });
+
+  it('returns half for 3:2 / 16:9 landscape (1.5 < r ≤ 2.2)', () => {
+    expect(aspectToColumnSpan(3 / 2)).toBe('one-quarter');
+    expect(aspectToColumnSpan(16 / 9)).toBe('half');
+    expect(aspectToColumnSpan(2.2)).toBe('half');
+  });
+
+  it('returns three-quarters for 21:9 / cinematic (2.2 < r ≤ 3.5)', () => {
+    expect(aspectToColumnSpan(21 / 9)).toBe('three-quarters');
+    expect(aspectToColumnSpan(2.35)).toBe('three-quarters');
+    expect(aspectToColumnSpan(3.5)).toBe('three-quarters');
+  });
+
+  it('returns full for hard panoramic (r > 3.5)', () => {
+    expect(aspectToColumnSpan(32 / 9)).toBe('full');
+    expect(aspectToColumnSpan(5)).toBe('full');
+  });
+
+  it('returns one-quarter for invalid/non-positive ratios', () => {
+    expect(aspectToColumnSpan(0)).toBe('one-quarter');
+    expect(aspectToColumnSpan(-1)).toBe('one-quarter');
+    expect(aspectToColumnSpan(NaN)).toBe('one-quarter');
+    expect(aspectToColumnSpan(Infinity)).toBe('one-quarter');
+  });
+});
+
+describe('findMediaChild', () => {
+  it('returns the first <img> descendant', () => {
+    const root = document.createElement('div');
+    root.innerHTML = '<span><img src="a.jpg" /></span>';
+    expect(findMediaChild(root)?.tagName).toBe('IMG');
+  });
+
+  it('returns the first <video> descendant', () => {
+    const root = document.createElement('div');
+    root.innerHTML = '<video></video>';
+    expect(findMediaChild(root)?.tagName).toBe('VIDEO');
+  });
+
+  it('returns null when there is no media child', () => {
+    const root = document.createElement('div');
+    root.innerHTML = '<p>text only</p>';
+    expect(findMediaChild(root)).toBeNull();
+  });
+});
+
+describe('readMediaAspect', () => {
+  it('reads an image aspect from naturalWidth/naturalHeight', () => {
+    const img = document.createElement('img');
+    Object.defineProperty(img, 'naturalWidth', { value: 1600, configurable: true });
+    Object.defineProperty(img, 'naturalHeight', { value: 900, configurable: true });
+    expect(readMediaAspect(img)).toBeCloseTo(16 / 9);
+  });
+
+  it('returns null when image dimensions are not yet resolved', () => {
+    const img = document.createElement('img');
+    Object.defineProperty(img, 'naturalWidth', { value: 0, configurable: true });
+    Object.defineProperty(img, 'naturalHeight', { value: 0, configurable: true });
+    expect(readMediaAspect(img)).toBeNull();
+  });
+
+  it('reads a video aspect from videoWidth/videoHeight', () => {
+    const video = document.createElement('video');
+    Object.defineProperty(video, 'videoWidth', { value: 1920, configurable: true });
+    Object.defineProperty(video, 'videoHeight', { value: 1080, configurable: true });
+    expect(readMediaAspect(video)).toBeCloseTo(16 / 9);
+  });
+});
+
+describe('mediaReadyEvent', () => {
+  it('returns null for an image already complete', () => {
+    const img = document.createElement('img');
+    Object.defineProperty(img, 'complete', { value: true, configurable: true });
+    expect(mediaReadyEvent(img)).toBeNull();
+  });
+
+  it('returns "load" for an image that is not complete', () => {
+    const img = document.createElement('img');
+    Object.defineProperty(img, 'complete', { value: false, configurable: true });
+    expect(mediaReadyEvent(img)).toBe('load');
+  });
+
+  it('returns "loadedmetadata" for a video with readyState < 1', () => {
+    const video = document.createElement('video');
+    Object.defineProperty(video, 'readyState', { value: 0, configurable: true });
+    expect(mediaReadyEvent(video)).toBe('loadedmetadata');
+  });
+});
+
+describe('GridItem columnSpan="auto"', () => {
+  function stubImgAspect(img: HTMLImageElement, w: number, h: number, complete = true) {
+    Object.defineProperty(img, 'naturalWidth', { value: w, configurable: true });
+    Object.defineProperty(img, 'naturalHeight', { value: h, configurable: true });
+    Object.defineProperty(img, 'complete', { value: complete, configurable: true });
+  }
+
+  it('derives half span from a 16:9 image', () => {
+    const Media = () => {
+      const img = <img ref={(el) => el && stubImgAspect(el, 1600, 900)} alt="" /> ;
+      return img;
+    };
+    const { container } = render(
+      <GridItem columnSpan="auto"><Media /></GridItem>,
+    );
+    const el = container.firstChild as HTMLElement;
+    expect(el.style.gridColumn).toBe('span var(--bds-grid_columns-50)');
+  });
+
+  it('derives full span from a 32:9 panoramic image', () => {
+    const Media = () => <img ref={(el) => el && stubImgAspect(el, 3200, 900)} alt="" />;
+    const { container } = render(
+      <GridItem columnSpan="auto"><Media /></GridItem>,
+    );
+    const el = container.firstChild as HTMLElement;
+    expect(el.style.gridColumn).toBe('var(--bds-grid_span-100)');
+  });
+
+  it('falls back to one-quarter when no media child is present', () => {
+    const { container } = render(<GridItem columnSpan="auto"><span>text</span></GridItem>);
+    const el = container.firstChild as HTMLElement;
+    expect(el.style.gridColumn).toBe('span var(--bds-grid_columns-25)');
+  });
+
+  it('resolves after the load event when metadata is not yet available', () => {
+    const img = document.createElement('img');
+    stubImgAspect(img, 0, 0, false);
+    const { container } = render(
+      <GridItem columnSpan="auto">
+        <span ref={(el) => el && el.appendChild(img)} />
+      </GridItem>,
+    );
+    const el = container.firstChild as HTMLElement;
+    expect(el.style.gridColumn).toBe('span var(--bds-grid_columns-25)');
+
+    stubImgAspect(img, 1600, 900, true);
+    act(() => {
+      img.dispatchEvent(new Event('load'));
+    });
+    expect(el.style.gridColumn).toBe('span var(--bds-grid_columns-50)');
+  });
+});
+
+describe('Grid autoSpanMedia', () => {
+  function stubImgAspect(img: HTMLImageElement, w: number, h: number) {
+    Object.defineProperty(img, 'naturalWidth', { value: w, configurable: true });
+    Object.defineProperty(img, 'naturalHeight', { value: h, configurable: true });
+    Object.defineProperty(img, 'complete', { value: true, configurable: true });
+  }
+
+  it('applies auto span to items without an explicit columnSpan', () => {
+    const { container } = render(
+      <Grid autoSpanMedia>
+        <GridItem data-testid="a">
+          <img ref={(el) => el && stubImgAspect(el, 1600, 900)} alt="" />
+        </GridItem>
+      </Grid>,
+    );
+    const a = container.querySelector('[data-testid="a"]') as HTMLElement;
+    expect(a.style.gridColumn).toBe('span var(--bds-grid_columns-50)');
+  });
+
+  it('respects an explicit columnSpan when autoSpanMedia is set', () => {
+    const { container } = render(
+      <Grid autoSpanMedia>
+        <GridItem data-testid="a" columnSpan="one-third">
+          <img ref={(el) => el && stubImgAspect(el, 1600, 900)} alt="" />
+        </GridItem>
+      </Grid>,
+    );
+    const a = container.querySelector('[data-testid="a"]') as HTMLElement;
+    expect(a.style.gridColumn).toBe('span var(--bds-grid_columns-33)');
+  });
+
+  it('defaults to full span when autoSpanMedia is off', () => {
+    const { container } = render(
+      <Grid>
+        <GridItem data-testid="a">
+          <img ref={(el) => el && stubImgAspect(el, 1600, 900)} alt="" />
+        </GridItem>
+      </Grid>,
+    );
+    const a = container.querySelector('[data-testid="a"]') as HTMLElement;
+    expect(a.style.gridColumn).toBe('var(--bds-grid_span-100)');
+  });
+});

package/src/components/layout/Grid/Grid.stories.tsx

@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Grid } from './Grid';
+import { GridItem } from './GridItem';
+
+const meta = {
+  title: 'React/Layout/Grid',
+  component: Grid,
+  argTypes: {
+    variant: { control: 'select', options: ['main', 'page', 'funnel', 'custom'] },
+    columns: { control: 'number' },
+    isCentered: { control: 'boolean' },
+    isMasonry: { control: 'boolean' },
+  },
+} satisfies Meta<typeof Grid>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const demoStyle = {
+  background: 'var(--bds-color_bg-subtle, #eef)',
+  padding: 'var(--bds-space_m, 16px)',
+  borderRadius: 'var(--bds-border_radius--s, 8px)',
+  textAlign: 'center' as const,
+};
+
+export const Main: Story = {
+  args: { variant: 'main' },
+  render: (args) => (
+    <Grid {...args}>
+      <GridItem columnSpan="half" style={demoStyle}>half</GridItem>
+      <GridItem columnSpan="one-quarter" style={demoStyle}>¼</GridItem>
+      <GridItem columnSpan="one-quarter" style={demoStyle}>¼</GridItem>
+    </Grid>
+  ),
+};
+
+export const Page: Story = {
+  args: { variant: 'page' },
+  render: (args) => (
+    <Grid {...args}>
+      <GridItem style={demoStyle}>First</GridItem>
+      <GridItem style={demoStyle}>Second</GridItem>
+    </Grid>
+  ),
+};
+
+export const Funnel: Story = {
+  args: { variant: 'funnel' },
+  render: (args) => (
+    <Grid {...args}>
+      <GridItem style={demoStyle}>Funnel content</GridItem>
+      <GridItem columnSpan="half" style={demoStyle}>Half</GridItem>
+      <GridItem columnSpan="half" style={demoStyle}>Half</GridItem>
+    </Grid>
+  ),
+};
+
+export const Custom: Story = {
+  args: { variant: 'custom', columns: 5 },
+  render: (args) => (
+    <Grid {...args}>
+      {Array.from({ length: 5 }).map((_, i) => (
+        <GridItem key={i} columnSpan={1} style={demoStyle}>Col {i + 1}</GridItem>
+      ))}
+    </Grid>
+  ),
+};
+
+export const Centered: Story = {
+  args: { isCentered: true },
+  render: (args) => (
+    <Grid {...args}>
+      <GridItem style={demoStyle}>Centered grid</GridItem>
+      <GridItem columnSpan="half" style={demoStyle}>Half</GridItem>
+      <GridItem columnSpan="half" style={demoStyle}>Half</GridItem>
+    </Grid>
+  ),
+};
+
+export const Spans: Story = {
+  args: {},
+  render: () => (
+    <Grid>
+      <GridItem columnSpan="one-quarter" style={demoStyle}>one-quarter (25%)</GridItem>
+      <GridItem columnSpan="three-quarters" style={demoStyle}>three-quarters (75%)</GridItem>
+      <GridItem columnSpan="one-third" style={demoStyle}>one-third (33%)</GridItem>
+      <GridItem columnSpan="two-thirds" style={demoStyle}>two-thirds (66%)</GridItem>
+      <GridItem columnSpan="half" style={demoStyle}>half (50%)</GridItem>
+      <GridItem columnSpan="half" style={demoStyle}>half (50%)</GridItem>
+      <GridItem columnSpan="full" style={demoStyle}>full (100%)</GridItem>
+    </Grid>
+  ),
+};
+
+export const StartEnd: Story = {
+  args: { variant: 'custom', columns: 6 },
+  render: (args) => (
+    <Grid {...args}>
+      <GridItem startColumn={2} endColumn={6} style={demoStyle}>
+        startColumn=2, endColumn=6 (escape hatch — use with care)
+      </GridItem>
+    </Grid>
+  ),
+};
+
+// Pseudo-random but stable per-index heights so masonry demos don't shift every render.
+const masonryHeights = [120, 180, 90, 220, 150, 200, 110, 170, 240, 130, 160, 190];
+const masonryCellStyle = (index: number) => ({
+  ...demoStyle,
+  blockSize: `${masonryHeights[index % masonryHeights.length]}px`,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const Masonry: Story = {
+  args: { isMasonry: true },
+  render: (args) => (
+    <Grid {...args}>
+      {Array.from({ length: 12 }).map((_, i) => (
+        <GridItem key={i} columnSpan="one-quarter" style={masonryCellStyle(i)}>
+          Item {i + 1}
+        </GridItem>
+      ))}
+    </Grid>
+  ),
+};
+
+export const MasonryWithSpans: Story = {
+  args: { isMasonry: true },
+  render: (args) => (
+    <Grid {...args}>
+      <GridItem columnSpan="half" style={masonryCellStyle(0)}>Spans half</GridItem>
+      {Array.from({ length: 10 }).map((_, i) => (
+        <GridItem key={i} columnSpan="one-quarter" style={masonryCellStyle(i + 1)}>
+          Item {i + 1}
+        </GridItem>
+      ))}
+    </Grid>
+  ),
+};
+
+export const ComplexLayout: Story = {
+  args: {},
+  render: () => (
+    <Grid>
+      <GridItem columnSpan="one-quarter" style={demoStyle}>¼</GridItem>
+      <GridItem columnSpan="three-quarters" style={demoStyle}>¾</GridItem>
+      <GridItem columnSpan="one-third" style={demoStyle}>⅓</GridItem>
+      <GridItem columnSpan="two-thirds" style={demoStyle}>⅔</GridItem>
+      <GridItem columnSpan="half" style={demoStyle}>½</GridItem>
+      <GridItem columnSpan="half" style={demoStyle}>½</GridItem>
+      <GridItem columnSpan="full" style={demoStyle}>full row</GridItem>
+      <GridItem columnSpan="one-quarter" style={demoStyle}>¼</GridItem>
+      <GridItem columnSpan="one-quarter" style={demoStyle}>¼</GridItem>
+      <GridItem columnSpan="one-quarter" style={demoStyle}>¼</GridItem>
+      <GridItem columnSpan="one-quarter" style={demoStyle}>¼</GridItem>
+    </Grid>
+  ),
+};

package/src/components/layout/Grid/Grid.tsx

@@ -0,0 +1,85 @@
+import {
+  ElementType,
+  ComponentPropsWithoutRef,
+  CSSProperties,
+  createContext,
+  useMemo,
+  useRef,
+} from 'react';
+import css from './Grid.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
+import { useMasonry } from './masonry';
+
+export type GridVariant = 'main' | 'page' | 'funnel' | 'custom';
+
+/**
+ * Context used by `GridItem` to pick up Grid-level defaults such as
+ * `autoSpanMedia`. Exposed as a context (not a prop) so consumers can nest
+ * arbitrary wrappers between `<Grid>` and its `<GridItem>` children without
+ * losing the defaulting behavior.
+ */
+export type GridContextValue = {
+  autoSpanMedia: boolean;
+};
+
+export const GridContext = createContext<GridContextValue>({
+  autoSpanMedia: false,
+});
+
+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>;
+
+export function Grid<C extends ElementType = 'div'>({
+  children,
+  className,
+  variant = 'main',
+  columns,
+  isCentered = false,
+  isMasonry = false,
+  autoSpanMedia = false,
+  as,
+  style,
+  ...rest
+}: GridProps<C>) {
+  const ref = useRef<HTMLElement>(null);
+  useMasonry(ref, isMasonry);
+
+  const classNames = cn(
+    css.grid,
+    css[`--${variant}`],
+    isCentered && css['--centered'],
+    isMasonry && css['--masonry'],
+    className,
+  );
+
+  const composedStyle: CSSProperties =
+    variant === 'custom' && columns !== undefined
+      ? { ...(style as CSSProperties), ['--grid_columns' as string]: columns }
+      : (style as CSSProperties);
+
+  const Component = as ?? 'div';
+
+  const ctx = useMemo<GridContextValue>(() => ({ autoSpanMedia }), [autoSpanMedia]);
+
+  return (
+    <Component ref={ref} {...rest} className={classNames} style={composedStyle}>
+      <GridContext.Provider value={ctx}>{children}</GridContext.Provider>
+    </Component>
+  );
+}