{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"container","type":"registry:ui","title":"Container","description":"Page shell with a max width and consistent gutters.","package":"react-fancy","dependencies":[],"registryDependencies":[],"files":[{"path":"components\/fancy\/container\/Container.tsx","content":"import { forwardRef } from \"react\";\nimport type * as React from \"react\";\nimport { cn } from \"..\/..\/utils\/cn\";\nimport type { ContainerProps } from \".\/Container.types\";\n\nconst SIZES = {\n  sm: \"max-w-3xl\",\n  md: \"max-w-5xl\",\n  lg: \"max-w-7xl\",\n  full: \"max-w-none\",\n} as const;\n\n\/**\n * The page's horizontal measure \u2014 centred, capped, with gutters.\n *\n * Every Swiss-family gallery style hand-rolled this. What they repeated was not\n * `mx-auto` but the DECISION about how wide the page reads, and twenty copies of\n * a decision drift. This owns the decision and leaves the styling replaceable.\n *\/\nexport const Container = forwardRef<HTMLElement, ContainerProps>(\n  ({ children, size = \"md\", as: Tag = \"div\", className, ...props }, ref) => {\n    \/\/ `as` makes the element dynamic, so the ref type cannot be known\n    \/\/ statically. Narrowed at the boundary rather than dragging a full\n    \/\/ polymorphic-component generic into a layout primitive.\n    const Component = Tag as \"div\";\n\n    return (\n      <Component\n        ref={ref as React.Ref<HTMLDivElement>}\n        {...props}\n        data-react-fancy-container=\"\"\n        data-size={size}\n        className={cn(\"mx-auto w-full px-4 sm:px-6\", SIZES[size], className)}\n      >\n        {children}\n      <\/Component>\n    );\n  },\n);\n\nContainer.displayName = \"Container\";\n","type":"registry:ui","target":"components\/fancy\/container\/Container.tsx"},{"path":"components\/fancy\/container\/Container.types.ts","content":"import type { ElementType, HTMLAttributes, ReactNode } from \"react\";\n\nexport interface ContainerProps extends HTMLAttributes<HTMLElement> {\n  children?: ReactNode;\n  \/** Reading measure. `md` (default) suits body text; `full` removes the cap. *\/\n  size?: \"sm\" | \"md\" | \"lg\" | \"full\";\n  \/** The element to render. A container is often a `<main>` or `<header>`. *\/\n  as?: ElementType;\n}\n","type":"registry:ui","target":"components\/fancy\/container\/Container.types.ts"},{"path":"components\/fancy\/container\/index.ts","content":"export { Container } from \".\/Container\";\nexport type { ContainerProps } from \".\/Container.types\";\n","type":"registry:ui","target":"components\/fancy\/container\/index.ts"}],"since":"0.5"}