{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "layout",
  "type": "registry:ui",
  "title": "Layout",
  "description": "Foundational layout primitives (Container, Stack, Row, Grid) without hand-written CSS.",
  "registryDependencies": [
    "https://ui.arpitbhayani.me/r/aui.json"
  ],
  "files": [
    {
      "path": "ui/layout.tsx",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n// --- Container ---\nexport interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n  as?: React.ElementType;\n  size?: \"narrow\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n}\n\nconst CONTAINER_SIZES = {\n  narrow: \"max-w-3xl\",\n  sm: \"max-w-4xl\",\n  md: \"max-w-5xl\",\n  lg: \"max-w-6xl\",\n  xl: \"max-w-[1400px]\",\n  full: \"max-w-full\",\n};\n\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ as: Component = \"div\", size = \"xl\", className, children, ...props }, ref) => {\n    return (\n      <Component\n        ref={ref}\n        className={cn(\"mx-auto w-full px-4 sm:px-6\", CONTAINER_SIZES[size], className)}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\nContainer.displayName = \"Container\";\n\n// --- Stack ---\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  as?: React.ElementType;\n  gap?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  align?: \"start\" | \"center\" | \"end\" | \"stretch\";\n}\n\nconst STACK_GAPS = {\n  none: \"gap-0\",\n  xs: \"gap-1\",\n  sm: \"gap-2\",\n  md: \"gap-4\",\n  lg: \"gap-6\",\n  xl: \"gap-8\",\n};\n\nconst STACK_ALIGNS = {\n  start: \"items-start\",\n  center: \"items-center\",\n  end: \"items-end\",\n  stretch: \"items-stretch\",\n};\n\nexport const Stack = React.forwardRef<HTMLDivElement, StackProps>(\n  ({ as: Component = \"div\", gap = \"md\", align = \"stretch\", className, children, ...props }, ref) => {\n    return (\n      <Component\n        ref={ref}\n        className={cn(\"flex flex-col\", STACK_GAPS[gap], STACK_ALIGNS[align], className)}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\nStack.displayName = \"Stack\";\n\n// --- Row ---\nexport interface RowProps extends React.HTMLAttributes<HTMLDivElement> {\n  as?: React.ElementType;\n  gap?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  align?: \"start\" | \"center\" | \"end\" | \"baseline\" | \"stretch\";\n  justify?: \"start\" | \"center\" | \"end\" | \"between\" | \"around\";\n  wrap?: boolean;\n}\n\nconst ROW_GAPS = {\n  none: \"gap-0\",\n  xs: \"gap-1\",\n  sm: \"gap-2\",\n  md: \"gap-3\",\n  lg: \"gap-5\",\n  xl: \"gap-8\",\n};\n\nconst ROW_ALIGNS = {\n  start: \"items-start\",\n  center: \"items-center\",\n  end: \"items-end\",\n  baseline: \"items-baseline\",\n  stretch: \"items-stretch\",\n};\n\nconst ROW_JUSTIFIES = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  between: \"justify-between\",\n  around: \"justify-around\",\n};\n\nexport const Row = React.forwardRef<HTMLDivElement, RowProps>(\n  (\n    {\n      as: Component = \"div\",\n      gap = \"md\",\n      align = \"center\",\n      justify = \"start\",\n      wrap = false,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <Component\n        ref={ref}\n        className={cn(\n          \"flex flex-row\",\n          ROW_GAPS[gap],\n          ROW_ALIGNS[align],\n          ROW_JUSTIFIES[justify],\n          wrap && \"flex-wrap\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\nRow.displayName = \"Row\";\n\n// --- Grid ---\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  as?: React.ElementType;\n  cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12 | string;\n  gap?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n}\n\nconst GRID_COLS = {\n  1: \"grid-cols-1\",\n  2: \"grid-cols-1 sm:grid-cols-2\",\n  3: \"grid-cols-1 sm:grid-cols-2 md:grid-cols-3\",\n  4: \"grid-cols-1 sm:grid-cols-2 md:grid-cols-4\",\n  5: \"grid-cols-1 sm:grid-cols-2 md:grid-cols-5\",\n  6: \"grid-cols-2 sm:grid-cols-3 md:grid-cols-6\",\n  12: \"grid-cols-12\",\n};\n\nconst GRID_GAPS = {\n  none: \"gap-0\",\n  xs: \"gap-1\",\n  sm: \"gap-2\",\n  md: \"gap-4\",\n  lg: \"gap-6\",\n  xl: \"gap-8\",\n};\n\nexport const Grid = React.forwardRef<HTMLDivElement, GridProps>(\n  ({ as: Component = \"div\", cols = 2, gap = \"md\", className, children, ...props }, ref) => {\n    const colClass = typeof cols === \"number\" ? GRID_COLS[cols as keyof typeof GRID_COLS] || `grid-cols-${cols}` : cols;\n\n    return (\n      <Component\n        ref={ref}\n        className={cn(\"grid\", colClass, GRID_GAPS[gap], className)}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\nGrid.displayName = \"Grid\";\n",
      "type": "registry:ui"
    }
  ]
}