1d:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsPage"] 1e:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsTitle"] 1f:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsDescription"] 20:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsBody"] 21:I[26731,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"ComponentPreview"] 22:I[25325,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"CodeTabs"] 23:T992,import type { ComponentProps } from "react"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; import { ProductCardSkeleton } from "@/registry/tier-5-blocks/product-card"; /** * ProductGrid. * * Four across on desktop (the 3/12 span), two on mobile. The gutter is the * grid gutter from the layout system, not a number chosen per page. * * WHY THIS IS A COMPONENT AND NOT A `grid-cols-4` YOU WRITE EACH TIME * Because the answer at each breakpoint is a system decision, and the fifth * listing page to be written otherwise ends up 3-across at lg for no reason * anyone can reconstruct later. * * `

` so a screen reader announces "list, 24 items" before the first * one. A div of cards gives no sense of how much is there. */ export type ProductGridProps = Omit, "children"> & { children: React.ReactNode; /** Columns at the xl breakpoint. Steps down automatically below it. */ columns?: 2 | 3 | 4 | 5; /** Announced to screen readers as the list's name. */ label?: string; }; const COLUMN_CLASS = { 2: "grid-cols-1 xs:grid-cols-2", 3: "grid-cols-2 md:grid-cols-3", 4: "grid-cols-2 md:grid-cols-3 xl:grid-cols-4", 5: "grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5", } as const; export function ProductGrid({ children, columns = 4, label, className, ...props }: ProductGridProps) { return (

{child}
{children}

); } /** * The grid's loading state — the same shape, filled with skeletons. * * `aria-busy` on the region rather than a bare spinner, so assistive tech says * "busy" about the thing that is loading instead of announcing a decoration. */ export function ProductGridSkeleton({ count = 8, columns = 4, className, }: { count?: number; columns?: 2 | 3 | 4 | 5; className?: string; }) { return (

{Array.from({ length: count }, (_, index) => ( ))}

); } 24:T5274,

import type { ComponentProps } from "react";
import { cn } from "@/registry/tier-2-primitives/lib/cn";
import { ProductCardSkeleton } from "@/registry/tier-5-blocks/product-card";

/**
 * ProductGrid.
 *
 * Four across on desktop (the 3/12 span), two on mobile. The gutter is the
 * grid gutter from the layout system, not a number chosen per page.
 *
 * WHY THIS IS A COMPONENT AND NOT A `grid-cols-4` YOU WRITE EACH TIME
 *   Because the answer at each breakpoint is a system decision, and the fifth
 *   listing page to be written otherwise ends up 3-across at lg for no reason
 *   anyone can reconstruct later.
 *
 * `<ul>`/`<li>` so a screen reader announces "list, 24 items" before the first
 * one. A div of cards gives no sense of how much is there.
 */
export type ProductGridProps = Omit<ComponentProps<"ul">, "children"> & {
  children: React.ReactNode;
  /** Columns at the xl breakpoint. Steps down automatically below it. */
  columns?: 2 | 3 | 4 | 5;
  /** Announced to screen readers as the list's name. */
  label?: string;
};

const COLUMN_CLASS = {
  2: "grid-cols-1 xs:grid-cols-2",
  3: "grid-cols-2 md:grid-cols-3",
  4: "grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
  5: "grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
} as const;

export function ProductGrid({
  children,
  columns = 4,
  label,
  className,
  ...props
}: ProductGridProps) {
  return (
    <ul
      data-slot="product-grid"
      aria-label={label}
      className={cn("grid list-none gap-4 p-0 md:gap-6", COLUMN_CLASS[columns], className)}
      {...props}
    >
      {Array.isArray(children) ? (
        children.map((child, index) => <li key={index}>{child}</li>)
      ) : (
        <li>{children}</li>
      )}
    </ul>
  );
}

/**
 * The grid's loading state — the same shape, filled with skeletons.
 *
 * `aria-busy` on the region rather than a bare spinner, so assistive tech says
 * "busy" about the thing that is loading instead of announcing a decoration.
 */
export function ProductGridSkeleton({
  count = 8,
  columns = 4,
  className,
}: {
  count?: number;
  columns?: 2 | 3 | 4 | 5;
  className?: string;
}) {
  return (
    <div
      aria-busy="true"
      aria-live="polite"
      aria-label="Loading products"
      className={cn("grid gap-4 md:gap-6", COLUMN_CLASS[columns], className)}
    >
      {Array.from({ length: count }, (_, index) => (
        <ProductCardSkeleton key={index} />
      ))}
    </div>
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Blocks"}],["$","$L1e",null,{"children":"Product grid"}],["$","$L1f",null,{"children":"The responsive grid the cards sit in, with a matching skeleton."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"product-grid"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/product-grid","source":"$23","highlighted":"$24","npm":[],"registry":["@woohl/product-card","@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]