{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"container","type":"registry:component","title":"Container","description":"A container component to apply a consistent layout","dependencies":[],"devDependencies":[],"registryDependencies":[],"cssVars":{"theme":{"m":"--spacing(4)","g":"--spacing(4)","safe-area-left":"max(var(--m), env(safe-area-inset-left))","safe-area-right":"max(var(--m), env(safe-area-inset-right))"}},"css":{"@utility px-safe":{"padding-left":"var(--safe-area-left)","padding-right":"var(--safe-area-right)"}},"categories":[],"files":[{"path":"src/registry/zippystarter/components/container/index.tsx","type":"registry:component","target":"components/zippystarter/container.tsx","content":"import React, { PropsWithChildren } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport function ContainerInner({\n  children,\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div className={cn(className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport function ContainerOuter({\n  children,\n  className,\n  component: Component = \"div\",\n  ...props\n}: React.ComponentPropsWithoutRef<\"div\"> & {\n  component?: React.ElementType;\n}) {\n  return (\n    <Component className={className} {...props}>\n      {children}\n    </Component>\n  );\n}\n\ninterface ContainerProps extends PropsWithChildren {\n  className?: string;\n  component?: React.ElementType;\n  wrapperClassName?: string;\n}\n\nexport function Container({\n  className,\n  component,\n  children,\n  wrapperClassName,\n}: ContainerProps) {\n  return (\n    <ContainerOuter component={component} className={wrapperClassName}>\n      <ContainerInner className={cn(className, \"px-safe\")}>\n        {children}\n      </ContainerInner>\n    </ContainerOuter>\n  );\n}\n"}]}