{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"container","type":"registry:ui","title":"Container","description":"The width of a page's content: centred, as wide as its size and no wider, with room at the sides on a phone.","dependencies":["radix-ui"],"registryDependencies":["https://dashral.com/r/utils.json"],"files":[{"path":"registry/dashral/container.tsx","type":"registry:file","target":"components/dashral/container.tsx","content":"import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\n\nconst widths = {\n  sm: \"max-w-2xl\",\n  md: \"max-w-4xl\",\n  lg: \"max-w-6xl\",\n  xl: \"max-w-7xl\",\n  full: \"max-w-none\",\n}\n\n// Padded, the size is the content's width and the padding sits outside it, so a padded Container lines up with the\n// blocks, which pad their section and cap the content inside it (px-4 sm:px-6 around max-w-6xl).\nconst paddedWidths = {\n  sm: \"max-w-[calc(var(--container-2xl)+2rem)] sm:max-w-[calc(var(--container-2xl)+3rem)]\",\n  md: \"max-w-[calc(var(--container-4xl)+2rem)] sm:max-w-[calc(var(--container-4xl)+3rem)]\",\n  lg: \"max-w-[calc(var(--container-6xl)+2rem)] sm:max-w-[calc(var(--container-6xl)+3rem)]\",\n  xl: \"max-w-[calc(var(--container-7xl)+2rem)] sm:max-w-[calc(var(--container-7xl)+3rem)]\",\n  full: \"max-w-none\",\n}\n\ntype ContainerProps = React.ComponentProps<\"div\"> & {\n  /** How wide the content gets: sm (42rem) for reading, md (56rem), lg (72rem, the default) for most pages, xl (80rem), full. */\n  size?: keyof typeof widths\n  /** The room at its sides, outside the size, so content never touches the screen's edge on a phone: 16px, 24px from sm up. On by default. */\n  padded?: boolean\n  /** Its classes and width on your own element instead of a div, e.g. a <main> or an <article>. */\n  asChild?: boolean\n}\n\n/**\n * The width of a page's content, in one tag: `<Container size=\"md\">…</Container>`. Centred, as wide as the size and\n * no wider, with room at the sides on a phone. The frame of every page, and of a Section's content.\n */\nfunction Container({ size = \"lg\", padded = true, asChild = false, className, ...props }: ContainerProps) {\n  const Comp = asChild ? Slot.Root : \"div\"\n  return <Comp data-slot=\"container\" data-size={size} className={cn(\"mx-auto w-full\", padded ? [paddedWidths[size], \"px-4 sm:px-6\"] : widths[size], className)} {...props} />\n}\n\nexport { Container, type ContainerProps }\n"}]}