{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "container", "type": "registry:ui", "title": "Container", "description": "Token-backed responsive max-width wrapper for centered page content, gutters, safe-area padding, and asChild composition.", "dependencies": [], "devDependencies": [], "registryDependencies": [ "https://components.dethink.co.uk/r/dethink-base.json" ], "files": [ { "path": "packages/components/src/components/container/container.tsx", "type": "registry:file", "target": "~/components/dethink/components/container/container.tsx", "content": "import {\n Children,\n cloneElement,\n createElement,\n forwardRef,\n isValidElement,\n type ForwardedRef,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type ContainerElement =\n | \"div\"\n | \"main\"\n | \"section\"\n | \"article\"\n | \"header\"\n | \"footer\"\n | \"aside\"\n | \"nav\";\n\nexport type ContainerSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"full\";\nexport type ContainerGutter = \"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type ContainerAlign = \"start\" | \"center\" | \"end\";\n\ntype ContainerBaseProps = {\n align?: ContainerAlign;\n as?: ContainerElement;\n asChild?: boolean;\n fluid?: boolean;\n gutter?: ContainerGutter;\n safeArea?: boolean;\n size?: ContainerSize;\n};\n\ntype NativeContainerProps = HTMLAttributes &\n ContainerBaseProps & {\n asChild?: false;\n children?: ReactNode;\n };\n\ntype ChildContainerProps = Omit, \"children\"> &\n ContainerBaseProps & {\n asChild: true;\n children: ReactElement;\n };\n\nexport type ContainerProps = NativeContainerProps | ChildContainerProps;\n\ntype ContainerSlotProps = Record & {\n children?: ReactNode;\n className?: string;\n ref?: Ref;\n};\n\ntype EventHandler = (...args: unknown[]) => void;\n\nconst containerBaseClasses = \"box-border w-full min-w-0\";\n\nconst containerSizeClasses: Record = {\n sm: \"max-w-[40rem]\",\n md: \"max-w-[48rem]\",\n lg: \"max-w-[64rem]\",\n xl: \"max-w-[80rem]\",\n \"2xl\": \"max-w-[96rem]\",\n full: \"max-w-none\",\n};\n\nconst containerGutterVariableClasses: Record = {\n none: \"[--container-gutter:var(--dt-space-0)]\",\n sm: \"[--container-gutter:var(--dt-space-3)] sm:[--container-gutter:var(--dt-space-4)]\",\n md: \"[--container-gutter:var(--dt-space-4)] sm:[--container-gutter:var(--dt-space-6)]\",\n lg: \"[--container-gutter:var(--dt-space-5)] sm:[--container-gutter:var(--dt-space-8)]\",\n xl: \"[--container-gutter:var(--dt-space-6)] sm:[--container-gutter:var(--dt-space-10)]\",\n};\n\nconst containerGutterPaddingClasses: Record = {\n none: \"px-[var(--dt-space-0)]\",\n sm: \"px-[var(--container-gutter)]\",\n md: \"px-[var(--container-gutter)]\",\n lg: \"px-[var(--container-gutter)]\",\n xl: \"px-[var(--container-gutter)]\",\n};\n\nconst containerSafeAreaPaddingClasses =\n \"pl-[max(var(--container-gutter),env(safe-area-inset-left))] pr-[max(var(--container-gutter),env(safe-area-inset-right))]\";\n\nconst containerAlignClasses: Record = {\n start: \"me-auto\",\n center: \"mx-auto\",\n end: \"ms-auto\",\n};\n\nexport function containerClassNames({\n align = \"center\",\n className,\n fluid = false,\n gutter = \"md\",\n safeArea = false,\n size = \"xl\",\n}: Pick<\n ContainerProps,\n \"align\" | \"className\" | \"fluid\" | \"gutter\" | \"safeArea\" | \"size\"\n> = {}) {\n return cn(\n containerBaseClasses,\n fluid ? containerSizeClasses.full : containerSizeClasses[size],\n containerAlignClasses[align],\n containerGutterVariableClasses[gutter],\n safeArea\n ? containerSafeAreaPaddingClasses\n : containerGutterPaddingClasses[gutter],\n className,\n );\n}\n\nfunction setRef(ref: Ref | undefined, node: T | null) {\n if (typeof ref === \"function\") {\n ref(node);\n return;\n }\n\n if (ref) {\n ref.current = node;\n }\n}\n\nfunction composeRefs(...refs: Array | undefined>) {\n return (node: T | null) => {\n for (const ref of refs) {\n setRef(ref, node);\n }\n };\n}\n\nfunction getChildRef(child: ReactElement) {\n if (child.props.ref !== undefined) {\n return child.props.ref;\n }\n\n const descriptor = Object.getOwnPropertyDescriptor(child, \"ref\");\n\n return descriptor && \"value\" in descriptor\n ? (descriptor.value as Ref | undefined)\n : undefined;\n}\n\nfunction isEventHandler(key: string, value: unknown): value is EventHandler {\n return /^on[A-Z]/.test(key) && typeof value === \"function\";\n}\n\nfunction isDefaultPreventedEvent(\n event: unknown,\n): event is { defaultPrevented: boolean } {\n return (\n typeof event === \"object\" &&\n event !== null &&\n \"defaultPrevented\" in event &&\n event.defaultPrevented === true\n );\n}\n\nfunction composeEventHandlers(\n componentHandler: EventHandler,\n childHandler: EventHandler,\n): EventHandler {\n return (...args) => {\n componentHandler(...args);\n\n if (!isDefaultPreventedEvent(args[0])) {\n childHandler(...args);\n }\n };\n}\n\nfunction composeSlotProps(\n componentProps: Record,\n childProps: ContainerSlotProps,\n) {\n const composedProps: ContainerSlotProps = {\n ...componentProps,\n ...childProps,\n };\n\n for (const [key, componentValue] of Object.entries(componentProps)) {\n const childValue = childProps[key];\n\n if (\n isEventHandler(key, componentValue) &&\n isEventHandler(key, childValue)\n ) {\n composedProps[key] = composeEventHandlers(componentValue, childValue);\n }\n }\n\n return composedProps;\n}\n\nfunction getContainerDataAttributes({\n align,\n as,\n asChild,\n fluid,\n gutter,\n safeArea,\n size,\n}: Required<\n Pick\n> &\n Pick) {\n return {\n \"data-slot\": \"container\",\n \"data-as-child\": asChild ? \"true\" : undefined,\n \"data-element\": asChild ? undefined : as,\n \"data-size\": size,\n \"data-gutter\": gutter,\n \"data-fluid\": fluid ? \"true\" : \"false\",\n \"data-align\": align,\n \"data-safe-area\": safeArea ? \"true\" : \"false\",\n };\n}\n\nexport const Container = forwardRef(\n (\n {\n align = \"center\",\n as = \"div\",\n asChild = false,\n children,\n className,\n fluid = false,\n gutter = \"md\",\n safeArea = false,\n size = \"xl\",\n ...props\n },\n ref,\n ) => {\n const classes = containerClassNames({\n align,\n className,\n fluid,\n gutter,\n safeArea,\n size,\n });\n const dataAttributes = getContainerDataAttributes({\n align,\n as,\n asChild,\n fluid,\n gutter,\n safeArea,\n size,\n });\n\n if (asChild) {\n const child = Children.only(children);\n\n if (!isValidElement(child)) {\n throw new Error(\n \"Container with asChild expects a single React element child.\",\n );\n }\n\n const childRef = getChildRef(child);\n const composedProps = composeSlotProps(props, child.props);\n\n return cloneElement(child, {\n ...composedProps,\n ...dataAttributes,\n ref: composeRefs(ref as Ref, childRef),\n className: cn(classes, child.props.className),\n });\n }\n\n return createElement(\n as,\n {\n ...props,\n ...dataAttributes,\n ref: ref as ForwardedRef,\n className: classes,\n },\n children,\n );\n },\n);\n\nContainer.displayName = \"Container\";\n" }, { "path": "packages/components/src/components/container/index.ts", "type": "registry:file", "target": "~/components/dethink/components/container/index.ts", "content": "export {\n Container,\n containerClassNames,\n type ContainerAlign,\n type ContainerElement,\n type ContainerGutter,\n type ContainerProps,\n type ContainerSize,\n} from \"./container\";\n" }, { "path": "packages/components/src/utils/cn.ts", "type": "registry:file", "target": "~/components/dethink/utils/cn.ts", "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n" } ] }