{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sf-grid",
  "title": "SF Grid",
  "description": "Responsive grid with blessed column counts and gap tokens. FRAME layer.",
  "dependencies": [
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "components/sf/sf-grid.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport React from \"react\";\n\nconst sfGridVariants = cva(\"grid\", {\n  variants: {\n    cols: {\n      \"1\": \"grid-cols-1\",\n      \"2\": \"grid-cols-1 md:grid-cols-2\",\n      \"3\": \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3\",\n      \"4\": \"grid-cols-1 md:grid-cols-2 lg:grid-cols-4\",\n      auto: \"grid-cols-[repeat(auto-fill,minmax(280px,1fr))]\",\n    },\n    gap: {\n      \"4\": \"gap-4\",\n      \"6\": \"gap-6\",\n      \"8\": \"gap-8\",\n    },\n  },\n  defaultVariants: {\n    cols: \"3\",\n    gap: \"6\",\n  },\n});\n\ninterface SFGridProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof sfGridVariants> {}\n\n/**\n * Responsive column grid — FRAME layer layout primitive.\n *\n * CSS grid container with responsive breakpoint behavior built into\n * the cols variant. Each value encodes mobile-first column progression\n * (e.g., cols=\"3\" renders 1 col → 2 col → 3 col across breakpoints).\n *\n * @param cols - Column count with built-in responsive scaling. \"1\" | \"2\" | \"3\" | \"4\" | \"auto\"\n * @param gap - Grid gap from blessed stops. \"4\" | \"6\" | \"8\"\n * @param className - Merged via cn() after variant classes\n *\n * @example\n * <SFGrid cols=\"3\" gap=\"6\">\n *   <SFCard>Item 1</SFCard>\n *   <SFCard>Item 2</SFCard>\n *   <SFCard>Item 3</SFCard>\n * </SFGrid>\n */\nconst SFGrid = React.forwardRef<HTMLDivElement, SFGridProps>(\n  function SFGrid({ cols, gap, className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        className={cn(sfGridVariants({ cols, gap }), className)}\n        {...props}\n      />\n    );\n  }\n);\n\nSFGrid.displayName = \"SFGrid\";\n\nexport { SFGrid };\n",
      "type": "registry:ui"
    }
  ],
  "meta": {
    "layer": "frame",
    "pattern": "C"
  },
  "type": "registry:ui"
}