{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "container",
  "type": "registry:ui",
  "title": "Container",
  "description": "Sets the maximum width and side padding that every section uses. Both come from the container tokens.",
  "categories": [
    "atom"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "src/ui/container.tsx",
      "type": "registry:ui",
      "target": "components/ui/container.tsx",
      "content": "/**\n * Container — the horizontal measure every section sits inside.\n *\n * Width comes from `--facade-container-max` and the gutter from\n * `--facade-container-gutter`, so retuning the whole site's measure is a\n * one-token change rather than a find-and-replace across sections.\n *\n * a11y: renders a plain wrapper by default. Pass `as` when the container *is*\n * the landmark (`header`, `footer`, `nav`, `main`) rather than nesting one\n * inside another element that already carries the role.\n *\n * Dependencies: react, @/lib/utils.\n */\n\nimport type { ComponentPropsWithoutRef, ElementType, ReactNode } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type ContainerElement = \"div\" | \"section\" | \"header\" | \"footer\" | \"nav\" | \"main\"\n\nexport interface ContainerProps extends Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> {\n  as?: ContainerElement\n  /** `lg` uses `--facade-container-max`. `sm` and `md` are narrower, for text. */\n  size?: \"sm\" | \"md\" | \"lg\" | \"full\"\n  /** Set `false` to remove the side padding, for example for a full-width child. */\n  gutter?: boolean\n  children?: ReactNode\n}\n\nconst sizes: Record<NonNullable<ContainerProps[\"size\"]>, string> = {\n  sm: \"max-w-3xl\",\n  md: \"max-w-5xl\",\n  lg: \"max-w-facade\",\n  full: \"max-w-none\",\n}\n\nexport function Container({\n  as = \"div\",\n  size = \"lg\",\n  gutter = true,\n  className,\n  children,\n  ...props\n}: ContainerProps) {\n  const Component = as as ElementType\n\n  return (\n    <Component\n      className={cn(\n        \"mx-auto w-full\",\n        sizes[size],\n        gutter && \"px-gutter sm:px-8\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Component>\n  )\n}\n"
    }
  ],
  "docs": "Import styles/facade-tokens.css in your global stylesheet, after @import \"tailwindcss\". Docs: https://facadeui.dev/components/container"
}