@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
1 lines • 1.99 kB
Source Map (JSON)
{"version":3,"sources":["../src/layout/container/container.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nexport interface ContainerProps extends HTMLAttributes<HTMLDivElement> {\n variant?: \"default\" | \"slim\";\n children: ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n\n /**\n * Convienence prop to change the rendered element.\n *\n * Use {@link ContainerProps.asChild} if you need more control of the rendered element.\n */\n as?: \"div\" | \"section\" | \"aside\" | \"main\" | \"article\" | \"header\" | \"footer\";\n}\n\n/**\n * Container is a layout component that is used to wrap content.\n * It ensures a max-width and minimum spacing on the sides.\n */\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(\n ({ as: Tag = \"div\", asChild, className, children, variant, ...rest }, ref) => {\n const Component = asChild ? Slot : Tag;\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-container\",\n { \"hds-container--slim\": variant === \"slim\" },\n className as undefined,\n )}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nContainer.displayName = \"Container\";\n"],"mappings":";;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,YAAY;AAErB,SAAS,kBAAkB;AA6BrB;AAJC,IAAM,YAAY;AAAA,EACvB,CAAC,IAAqE,QAAQ;AAA7E,iBAAE,MAAI,MAAM,OAAO,SAAS,WAAW,UAAU,QA7BpD,IA6BG,IAA6D,iBAA7D,IAA6D,CAA3D,MAAiB,WAAS,aAAW,YAAU;AAChD,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA,uCACK,OADL;AAAA,QAEC,WAAW;AAAA,UACT;AAAA,UACA,EAAE,uBAAuB,YAAY,OAAO;AAAA,UAC5C;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,UAAU,cAAc;","names":[]}