@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
1 lines • 4.94 kB
Source Map (JSON)
{"version":3,"sources":["../src/layout/stack/stack.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { getSpacingVariable, type ResponsiveSpacingSizes, type SpacingSizes } from \"../spacing\";\nimport { getResponsiveProps, type ResponsiveProp } from \"../responsive\";\n\ntype CSSPropertiesWithVar = React.CSSProperties & {\n \"--hds-stack-gap\"?: string;\n \"--hds-stack-direction\"?: string;\n \"--hds-stack-wrap\"?: string;\n \"--hds-stack-align\"?: string;\n \"--hds-stack-justify\"?: string;\n};\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n\n /**\n * Space between items. Both horizontal and vertical.\n *\n * Use the responsive shorthand `12-16` to jump a level at the `large` breakpoint.\n *\n * Or use the responsive object `{ initial: 40, large: 64 }` to set different values at different breakpoints.\n *\n * Use `gapX` and `gapY` to set different values for horizontal and vertical spacing.\n */\n gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n /**\n * Space between items horizontally\n */\n gapX?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n /**\n * Space between items vertically\n */\n gapY?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n direction?: ResponsiveProp<React.CSSProperties[\"flexDirection\"]>;\n wrap?: ResponsiveProp<boolean>;\n align?: ResponsiveProp<React.CSSProperties[\"alignItems\"]>;\n justify?: ResponsiveProp<React.CSSProperties[\"justifyContent\"]>;\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/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const Stack = forwardRef<HTMLDivElement, StackProps>(\n (\n {\n children,\n asChild,\n className,\n style: _style,\n gap,\n gapX,\n gapY,\n direction,\n wrap,\n align,\n justify,\n ...rest\n },\n ref,\n ) => {\n const Component = asChild ? Slot : \"div\";\n const style: CSSPropertiesWithVar = {\n ..._style,\n ...getResponsiveProps(\"--hds-stack-gap\", gap, getSpacingVariable),\n ...getResponsiveProps(\"--hds-stack-gap-x\", gapX, getSpacingVariable),\n ...getResponsiveProps(\"--hds-stack-gap-y\", gapY, getSpacingVariable),\n ...getResponsiveProps(\"--hds-stack-direction\", direction),\n ...getResponsiveProps(\"--hds-stack-wrap\", wrap, (value) => (value ? \"wrap\" : \"nowrap\")),\n ...getResponsiveProps(\"--hds-stack-align\", align),\n ...getResponsiveProps(\"--hds-stack-justify\", justify),\n };\n return (\n <Component\n style={style}\n className={clsx(\"hds-stack\", className as undefined)}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nStack.displayName = \"Stack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const HStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n return <Stack ref={ref} {...props} direction=\"row\" />;\n});\nHStack.displayName = \"HStack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const VStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n return <Stack ref={ref} {...props} direction=\"column\" />;\n});\nVStack.displayName = \"VStack\";\n"],"mappings":";;;;;;;;;;;;;AAAA,OAAuB;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAuFf;AA9BC,IAAM,QAAQ;AAAA,EACnB,CACE,IAcA,QACG;AAfH,iBACE;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAzEN,IA8DI,IAYK,iBAZL,IAYK;AAAA,MAXH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,UAAU,OAAO;AACnC,UAAM,QAA8B,4HAC/B,SACA,mBAAmB,mBAAmB,KAAK,kBAAkB,IAC7D,mBAAmB,qBAAqB,MAAM,kBAAkB,IAChE,mBAAmB,qBAAqB,MAAM,kBAAkB,IAChE,mBAAmB,yBAAyB,SAAS,IACrD,mBAAmB,oBAAoB,MAAM,CAAC,UAAW,QAAQ,SAAS,QAAS,IACnF,mBAAmB,qBAAqB,KAAK,IAC7C,mBAAmB,uBAAuB,OAAO;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,aAAa,SAAsB;AAAA,QACnD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAUb,IAAM,SAAS,WAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,oBAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,QAAM;AACrD,CAAC;AACD,OAAO,cAAc;AAUd,IAAM,SAAS,WAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,oBAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,WAAS;AACxD,CAAC;AACD,OAAO,cAAc;","names":[]}