@traefik-labs/faency 12.3.3 → 12.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Accordion/Accordion.themes.cjs.map +1 -1
- package/dist/components/Accordion/Accordion.themes.js.map +1 -1
- package/dist/components/AriaTable/AriaTable.cjs.map +1 -1
- package/dist/components/AriaTable/AriaTable.js.map +1 -1
- package/dist/components/Avatar/Avatar.cjs.map +1 -1
- package/dist/components/Avatar/Avatar.js.map +1 -1
- package/dist/components/Avatar/Avatar.vanilla.cjs.map +1 -1
- package/dist/components/Avatar/Avatar.vanilla.js.map +1 -1
- package/dist/components/Badge/Badge.cjs.map +1 -1
- package/dist/components/Badge/Badge.js.map +1 -1
- package/dist/components/Badge/Badge.themes.cjs.map +1 -1
- package/dist/components/Badge/Badge.themes.js.map +1 -1
- package/dist/components/Badge/Badge.vanilla.cjs.map +1 -1
- package/dist/components/Badge/Badge.vanilla.js.map +1 -1
- package/dist/components/Blockquote/Blockquote.vanilla.cjs.map +1 -1
- package/dist/components/Blockquote/Blockquote.vanilla.css.cjs +1 -0
- package/dist/components/Blockquote/Blockquote.vanilla.css.js +1 -0
- package/dist/components/Blockquote/Blockquote.vanilla.js.map +1 -1
- package/dist/components/Box/Box.vanilla.cjs.map +1 -1
- package/dist/components/Box/Box.vanilla.js.map +1 -1
- package/dist/components/Bubble/Bubble.vanilla.cjs.map +1 -1
- package/dist/components/Bubble/Bubble.vanilla.js.map +1 -1
- package/dist/components/Button/Button.cjs.map +1 -1
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Button/Button.themes.cjs.map +1 -1
- package/dist/components/Button/Button.themes.js.map +1 -1
- package/dist/components/Button/Button.vanilla.cjs.map +1 -1
- package/dist/components/Button/Button.vanilla.js.map +1 -1
- package/dist/components/ButtonSwitch/ButtonSwitch.themes.cjs.map +1 -1
- package/dist/components/ButtonSwitch/ButtonSwitch.themes.js.map +1 -1
- package/dist/components/ButtonSwitch/ButtonSwitch.vanilla.cjs.map +1 -1
- package/dist/components/ButtonSwitch/ButtonSwitch.vanilla.js.map +1 -1
- package/dist/components/Card/Card.cjs.map +1 -1
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/Card/Card.themes.cjs.map +1 -1
- package/dist/components/Card/Card.themes.js.map +1 -1
- package/dist/components/Card/Card.vanilla.cjs.map +1 -1
- package/dist/components/Card/Card.vanilla.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.cjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.themes.cjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.themes.js.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.cjs.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.js.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.themes.cjs.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.themes.js.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.vanilla.cjs.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.vanilla.js.map +1 -1
- package/dist/components/CodeBlock/prism-extend.cjs.map +1 -1
- package/dist/components/CodeBlock/prism-extend.js.map +1 -1
- package/dist/components/Container/Container.vanilla.cjs.map +1 -1
- package/dist/components/Container/Container.vanilla.js.map +1 -1
- package/dist/components/DateTimePicker/DateTimePicker.cjs.map +1 -1
- package/dist/components/DateTimePicker/DateTimePicker.js.map +1 -1
- package/dist/components/DateTimePickerInput/DateTimePickerInput.cjs.map +1 -1
- package/dist/components/DateTimePickerInput/DateTimePickerInput.js.map +1 -1
- package/dist/components/Dialog/Dialog.cjs.map +1 -1
- package/dist/components/Dialog/Dialog.js.map +1 -1
- package/dist/components/Dialog/Dialog.themes.cjs.map +1 -1
- package/dist/components/Dialog/Dialog.themes.js.map +1 -1
- package/dist/components/Elevation/Elevation.vanilla.cjs.map +1 -1
- package/dist/components/Elevation/Elevation.vanilla.js.map +1 -1
- package/dist/components/Flex/Flex.vanilla.cjs.map +1 -1
- package/dist/components/Flex/Flex.vanilla.js.map +1 -1
- package/dist/components/Grid/Grid.vanilla.cjs.map +1 -1
- package/dist/components/Grid/Grid.vanilla.js.map +1 -1
- package/dist/components/Heading/Heading.themes.cjs.map +1 -1
- package/dist/components/Heading/Heading.themes.js.map +1 -1
- package/dist/components/IconButton/IconButton.themes.cjs.map +1 -1
- package/dist/components/IconButton/IconButton.themes.js.map +1 -1
- package/dist/components/IconButton/IconButton.vanilla.cjs.map +1 -1
- package/dist/components/IconButton/IconButton.vanilla.js.map +1 -1
- package/dist/components/Image/Image.vanilla.cjs.map +1 -1
- package/dist/components/Image/Image.vanilla.js.map +1 -1
- package/dist/components/Input/Input.cjs.map +1 -1
- package/dist/components/Input/Input.js.map +1 -1
- package/dist/components/Input/Input.themes.cjs.map +1 -1
- package/dist/components/Input/Input.themes.js.map +1 -1
- package/dist/components/Input/Input.vanilla.cjs.map +1 -1
- package/dist/components/Input/Input.vanilla.js.map +1 -1
- package/dist/components/Label/Label.vanilla.cjs.map +1 -1
- package/dist/components/Label/Label.vanilla.css.cjs +0 -1
- package/dist/components/Label/Label.vanilla.css.js +0 -1
- package/dist/components/Label/Label.vanilla.js.map +1 -1
- package/dist/components/Link/Link.themes.cjs.map +1 -1
- package/dist/components/Link/Link.themes.js.map +1 -1
- package/dist/components/List/List.cjs.map +1 -1
- package/dist/components/List/List.js.map +1 -1
- package/dist/components/List/List.themes.cjs.map +1 -1
- package/dist/components/List/List.themes.js.map +1 -1
- package/dist/components/Navigation/Navigation.cjs.map +1 -1
- package/dist/components/Navigation/Navigation.js.map +1 -1
- package/dist/components/Navigation/Navigation.themes.cjs.map +1 -1
- package/dist/components/Navigation/Navigation.themes.js.map +1 -1
- package/dist/components/NavigationTree/NavigationTreeContainer.cjs.map +1 -1
- package/dist/components/NavigationTree/NavigationTreeContainer.js.map +1 -1
- package/dist/components/NavigationTree/NavigationTreeDrawer.cjs.map +1 -1
- package/dist/components/NavigationTree/NavigationTreeDrawer.js.map +1 -1
- package/dist/components/NavigationTree/NavigationTreeItem.cjs.map +1 -1
- package/dist/components/NavigationTree/NavigationTreeItem.js.map +1 -1
- package/dist/components/Panel/Panel.vanilla.cjs.map +1 -1
- package/dist/components/Panel/Panel.vanilla.js.map +1 -1
- package/dist/components/Paragraph/Paragraph.cjs.map +1 -1
- package/dist/components/Paragraph/Paragraph.js.map +1 -1
- package/dist/components/Paragraph/Paragraph.vanilla.cjs.map +1 -1
- package/dist/components/Paragraph/Paragraph.vanilla.js.map +1 -1
- package/dist/components/Popover/Popover.cjs.map +1 -1
- package/dist/components/Popover/Popover.js.map +1 -1
- package/dist/components/Radio/Radio.themes.cjs.map +1 -1
- package/dist/components/Radio/Radio.themes.js.map +1 -1
- package/dist/components/RadioAccordion/RadioAccordion.cjs.map +1 -1
- package/dist/components/RadioAccordion/RadioAccordion.js.map +1 -1
- package/dist/components/Select/Select.cjs.map +1 -1
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Select/Select.themes.cjs.map +1 -1
- package/dist/components/Select/Select.themes.js.map +1 -1
- package/dist/components/SidePanel/SidePanel.themes.cjs.map +1 -1
- package/dist/components/SidePanel/SidePanel.themes.js.map +1 -1
- package/dist/components/Skeleton/Skeleton.themes.cjs.map +1 -1
- package/dist/components/Skeleton/Skeleton.themes.js.map +1 -1
- package/dist/components/Skeleton/Skeleton.vanilla.cjs.map +1 -1
- package/dist/components/Skeleton/Skeleton.vanilla.js.map +1 -1
- package/dist/components/Switch/Switch.themes.cjs.map +1 -1
- package/dist/components/Switch/Switch.themes.js.map +1 -1
- package/dist/components/Table/Table.cjs.map +1 -1
- package/dist/components/Table/Table.js.map +1 -1
- package/dist/components/Table/Table.themes.cjs.map +1 -1
- package/dist/components/Table/Table.themes.js.map +1 -1
- package/dist/components/Text/Text.themes.cjs.map +1 -1
- package/dist/components/Text/Text.themes.js.map +1 -1
- package/dist/components/TextField/TextField.cjs.map +1 -1
- package/dist/components/TextField/TextField.js.map +1 -1
- package/dist/components/TextField/TextField.vanilla.cjs.map +1 -1
- package/dist/components/TextField/TextField.vanilla.js.map +1 -1
- package/dist/components/Textarea/Textarea.cjs.map +1 -1
- package/dist/components/Textarea/Textarea.js.map +1 -1
- package/dist/components/Textarea/Textarea.themes.cjs.map +1 -1
- package/dist/components/Textarea/Textarea.themes.js.map +1 -1
- package/dist/components/Textarea/Textarea.vanilla.cjs.map +1 -1
- package/dist/components/Textarea/Textarea.vanilla.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.cjs.map +1 -1
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.themes.cjs.map +1 -1
- package/dist/components/Tooltip/Tooltip.themes.js.map +1 -1
- package/dist/components/colorSchemeContext.cjs.map +1 -1
- package/dist/components/colorSchemeContext.js.map +1 -1
- package/dist/stitches.config.cjs.map +1 -1
- package/dist/stitches.config.js.map +1 -1
- package/dist/styles/cssProps.cjs.map +1 -1
- package/dist/styles/cssProps.js.map +1 -1
- package/dist/styles/themeContext.cjs.map +1 -1
- package/dist/styles/themeContext.js.map +1 -1
- package/dist/utils/deepMerge.cjs.map +1 -1
- package/dist/utils/deepMerge.js.map +1 -1
- package/package.json +22 -22
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.themes.cjs","names":[],"sources":["../../../components/Accordion/Accordion.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n accordionBackground: Property.Color;\n accordionHoverShadow: Property.Color;\n accordionActiveShadow: Property.Color;\n accordionText: Property.Color;\n accordionLabel: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n accordionBackground: 'white',\n accordionHoverShadow: tinycolor('black').setAlpha(0.05).toHslString(),\n accordionActiveShadow: tinycolor('black').setAlpha(0.2).toHslString(),\n accordionText: tinycolor('black').setAlpha(0.74).toHslString(),\n accordionLabel: tinycolor('black').setAlpha(0.51).toHslString(),\n });\n\n export const getDark: Factory = () => ({\n accordionBackground: '$deepBlue2',\n accordionHoverShadow: tinycolor('white').setAlpha(0.05).toHslString(),\n accordionActiveShadow: tinycolor('white').setAlpha(0.2).toHslString(),\n accordionText: tinycolor('white').setAlpha(0.74).toHslString(),\n accordionLabel: tinycolor('white').setAlpha(0.51).toHslString(),\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;
|
|
1
|
+
{"version":3,"file":"Accordion.themes.cjs","names":[],"sources":["../../../components/Accordion/Accordion.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n accordionBackground: Property.Color;\n accordionHoverShadow: Property.Color;\n accordionActiveShadow: Property.Color;\n accordionText: Property.Color;\n accordionLabel: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n accordionBackground: 'white',\n accordionHoverShadow: tinycolor('black').setAlpha(0.05).toHslString(),\n accordionActiveShadow: tinycolor('black').setAlpha(0.2).toHslString(),\n accordionText: tinycolor('black').setAlpha(0.74).toHslString(),\n accordionLabel: tinycolor('black').setAlpha(0.51).toHslString(),\n });\n\n export const getDark: Factory = () => ({\n accordionBackground: '$deepBlue2',\n accordionHoverShadow: tinycolor('white').setAlpha(0.05).toHslString(),\n accordionActiveShadow: tinycolor('white').setAlpha(0.2).toHslString(),\n accordionText: tinycolor('white').setAlpha(0.74).toHslString(),\n accordionLabel: tinycolor('white').setAlpha(0.51).toHslString(),\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAWQ,OAAA,kBAA2B;EACtC,qBAAqB;EACrB,uBAAA,GAAA,WAAA,SAAgC,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACrE,wBAAA,GAAA,WAAA,SAAiC,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EACrE,gBAAA,GAAA,WAAA,SAAyB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC9D,iBAAA,GAAA,WAAA,SAA0B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE;CAEY,OAAA,iBAA0B;EACrC,qBAAqB;EACrB,uBAAA,GAAA,WAAA,SAAgC,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACrE,wBAAA,GAAA,WAAA,SAAiC,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EACrE,gBAAA,GAAA,WAAA,SAAyB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC9D,iBAAA,GAAA,WAAA,SAA0B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE;yBACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.themes.js","names":[],"sources":["../../../components/Accordion/Accordion.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n accordionBackground: Property.Color;\n accordionHoverShadow: Property.Color;\n accordionActiveShadow: Property.Color;\n accordionText: Property.Color;\n accordionLabel: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n accordionBackground: 'white',\n accordionHoverShadow: tinycolor('black').setAlpha(0.05).toHslString(),\n accordionActiveShadow: tinycolor('black').setAlpha(0.2).toHslString(),\n accordionText: tinycolor('black').setAlpha(0.74).toHslString(),\n accordionLabel: tinycolor('black').setAlpha(0.51).toHslString(),\n });\n\n export const getDark: Factory = () => ({\n accordionBackground: '$deepBlue2',\n accordionHoverShadow: tinycolor('white').setAlpha(0.05).toHslString(),\n accordionActiveShadow: tinycolor('white').setAlpha(0.2).toHslString(),\n accordionText: tinycolor('white').setAlpha(0.74).toHslString(),\n accordionLabel: tinycolor('white').setAlpha(0.51).toHslString(),\n });\n}\n"],"mappings":";;AAKO,IAAA;;
|
|
1
|
+
{"version":3,"file":"Accordion.themes.js","names":[],"sources":["../../../components/Accordion/Accordion.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n accordionBackground: Property.Color;\n accordionHoverShadow: Property.Color;\n accordionActiveShadow: Property.Color;\n accordionText: Property.Color;\n accordionLabel: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n accordionBackground: 'white',\n accordionHoverShadow: tinycolor('black').setAlpha(0.05).toHslString(),\n accordionActiveShadow: tinycolor('black').setAlpha(0.2).toHslString(),\n accordionText: tinycolor('black').setAlpha(0.74).toHslString(),\n accordionLabel: tinycolor('black').setAlpha(0.51).toHslString(),\n });\n\n export const getDark: Factory = () => ({\n accordionBackground: '$deepBlue2',\n accordionHoverShadow: tinycolor('white').setAlpha(0.05).toHslString(),\n accordionActiveShadow: tinycolor('white').setAlpha(0.2).toHslString(),\n accordionText: tinycolor('white').setAlpha(0.74).toHslString(),\n accordionLabel: tinycolor('white').setAlpha(0.51).toHslString(),\n });\n}\n"],"mappings":";;AAKO,IAAA;;CAWQ,OAAA,kBAA2B;EACtC,qBAAqB;EACrB,sBAAsB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACrE,uBAAuB,UAAU,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EACrE,eAAe,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC9D,gBAAgB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE;CAEY,OAAA,iBAA0B;EACrC,qBAAqB;EACrB,sBAAsB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACrE,uBAAuB,UAAU,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EACrE,eAAe,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC9D,gBAAgB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAChE;yBACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AriaTable.cjs","names":[],"sources":["../../../components/AriaTable/AriaTable.tsx"],"sourcesContent":["import { ChevronRightIcon } from '@radix-ui/react-icons';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, {\n Children,\n cloneElement,\n ComponentProps,\n ElementRef,\n forwardRef,\n isValidElement,\n ReactNode,\n useMemo,\n useState,\n} from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { deepMerge } from '../../utils/deepMerge';\nimport { Box } from '../Box';\nimport type { TableVariants } from '../Table';\nimport {\n Caption as TableCaption,\n StyledTr as TableTr,\n Table as TableTable,\n Tbody as TableTbody,\n Td as TableTd,\n Tfoot as TableTfoot,\n Th as TableTh,\n Thead as TableThead,\n} from '../Table';\n\nexport const Caption = styled('div', TableCaption, {\n display: 'table-caption',\n});\n\nconst StyledTbody = styled('div', TableTbody, {\n display: 'table-row-group',\n});\nexport const Tbody = forwardRef<\n ElementRef<typeof StyledTbody>,\n ComponentProps<typeof StyledTbody> & VariantProps<typeof StyledTbody>\n>((props, ref) => <StyledTbody ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTfoot = styled('div', TableTfoot, {\n display: 'table-footer-group',\n});\nexport const Tfoot = forwardRef<\n ElementRef<typeof StyledTfoot>,\n ComponentProps<typeof StyledTfoot> & VariantProps<typeof StyledTfoot>\n>((props, ref) => <StyledTfoot ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTr = styled('div', TableTr, {\n display: 'table-row',\n});\nconst StyledTrSlot = styled(Slot, StyledTr);\n\nconst AnimatedContainer = ({ isOpen, children }: { isOpen: boolean; children: ReactNode }) => {\n const appliedStyle = useMemo(\n () =>\n isOpen\n ? {\n transition: 'all 0.2s ease-out',\n paddingBottom: 0,\n paddingTop: 0,\n border: 'none',\n }\n : {\n transition: 'all 0.2s ease-out',\n padding: '0px 16px',\n pointerEvents: 'none',\n border: 'none',\n },\n [isOpen],\n );\n\n const containerStyle = useMemo(\n () =>\n isOpen\n ? {\n transition: 'all 0.2s ease-out',\n padding: '16px',\n paddingBottom: 0,\n }\n : {\n transition: 'all 0.2s ease-out',\n height: 0,\n overflow: 'hidden',\n padding: '0px 16px',\n },\n [isOpen],\n );\n\n return (\n <StyledTr\n css={isOpen ? { '&:not(:last-child)': { borderBottom: '1px solid $tableRowBorder' } } : {}}\n >\n <Td css={appliedStyle} fullColSpan>\n <Box css={containerStyle}>{children}</Box>\n </Td>\n </StyledTr>\n );\n};\n\nexport type AriaTrProps = ComponentProps<typeof StyledTr> &\n VariantProps<typeof StyledTr> & {\n asChild?: boolean;\n collapsedContent?: React.ReactNode;\n emptyFirstColumn?: boolean;\n tableHead?: boolean;\n children?: React.ReactNode;\n };\n\nexport const Tr = forwardRef<ElementRef<typeof StyledTr>, AriaTrProps>(\n ({ asChild, children, collapsedContent, emptyFirstColumn, tableHead, css, ...props }, ref) => {\n const Component = asChild ? StyledTrSlot : StyledTr;\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n if (!asChild) {\n const arrayChildren = Children.toArray(children);\n const hasColSpanChildren = arrayChildren.some((child) => {\n if (!isValidElement(child)) {\n return false;\n }\n const { fullColSpan } = child.props as TdProps;\n return !!fullColSpan;\n });\n if (hasColSpanChildren && arrayChildren.length > 1) {\n throw new Error('Using fullColSpan is allowed only for a single full width Td.');\n }\n }\n\n const TdEl = useMemo(\n () =>\n emptyFirstColumn ? (\n tableHead ? (\n <Th css={{ width: 24 }} />\n ) : (\n <Td key=\"empty-td\" />\n )\n ) : collapsedContent ? (\n <Td key=\"chevron-td\">\n <Box\n onClick={(e) => {\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <ChevronRightIcon\n onClick={() => setIsCollapsed(!isCollapsed)}\n style={{\n cursor: 'pointer',\n transition: 'transform 0.2s ease-out',\n transform: isCollapsed ? 'rotate(90deg)' : 'initial',\n }}\n />\n </Box>\n </Td>\n ) : null,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [isCollapsed],\n );\n\n const renderedChildren = useMemo(() => {\n if (asChild) {\n return cloneElement(\n children as any,\n {\n // @ts-ignore: Object is possibly 'null'.\n ...children?.props,\n },\n // @ts-ignore: Object is possibly 'null'.\n [TdEl, ...(children?.props?.children || [])],\n );\n }\n\n return (\n <>\n {TdEl}\n {children}\n </>\n );\n }, [asChild, TdEl, children]);\n\n return (\n <>\n <Component\n ref={ref}\n role=\"row\"\n css={\n !!collapsedContent && !isCollapsed\n ? {\n ...css,\n [`&:nth-last-child(2) > span`]: {\n borderBottom: 'none',\n },\n }\n : { ...css }\n }\n {...props}\n >\n {renderedChildren}\n </Component>\n {!!collapsedContent && (\n <AnimatedContainer isOpen={isCollapsed}>{collapsedContent}</AnimatedContainer>\n )}\n </>\n );\n },\n);\n\nconst StyledTh = styled('span', TableTh, {\n display: 'table-cell',\n});\n\nexport interface ThProps extends ComponentProps<typeof StyledTh>, VariantProps<typeof StyledTh> {}\n\nexport const Th = forwardRef<ElementRef<typeof StyledTh>, ComponentProps<typeof StyledTh>>(\n (props, ref) => <StyledTh ref={ref} role=\"columnheader\" {...props} />,\n);\n\nconst StyledTd = styled('span', TableTd, {\n display: 'table-cell',\n});\n\nconst FillerTd = styled(StyledTd, {\n visibility: 'hidden',\n});\nexport type TdProps = ComponentProps<typeof StyledTd> &\n VariantProps<typeof StyledTd> &\n VariantProps<typeof TableTd> & {\n fullColSpan?: boolean;\n };\n\nexport const Td = forwardRef<ElementRef<typeof StyledTd>, TdProps>(\n ({ fullColSpan, css, ...props }, ref) => {\n const fullColSpanCss = useMemo(\n () =>\n fullColSpan\n ? {\n position: 'absolute',\n left: 0,\n width: '100%',\n height: '100%',\n }\n : {},\n [fullColSpan],\n );\n if (fullColSpan) {\n return (\n <>\n <FillerTd css={css} {...props} />\n <StyledTd ref={ref} role=\"cell\" css={deepMerge(fullColSpanCss, css)} {...props} />\n </>\n );\n }\n return <StyledTd ref={ref} role=\"cell\" css={css} {...props} />;\n },\n);\n\nconst StyledThead = styled('div', TableThead, {\n display: 'table-header-group',\n});\nexport const Thead = forwardRef<\n ElementRef<typeof StyledThead>,\n ComponentProps<typeof StyledThead> & VariantProps<typeof StyledThead> & NonNullable<unknown>\n>((props, ref) => <StyledThead ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTable = styled('div', TableTable, {\n display: 'table',\n});\nexport const Table = forwardRef<\n ElementRef<typeof StyledTable>,\n ComponentProps<typeof StyledTable> &\n VariantProps<typeof StyledTable> & { hasCollapsibleChildren?: boolean }\n>(({ hasCollapsibleChildren, css, ...props }, ref) => (\n <StyledTable\n ref={ref}\n role=\"table\"\n css={hasCollapsibleChildren ? { borderCollapse: 'collapse', ...css } : css}\n {...props}\n />\n));\n\nexport type AriaTableVariants = VariantProps<typeof Table>;\nexport type AriaTableProps = TableVariants & { children?: React.ReactNode; css?: CSS };\n"],"mappings":";;;;;;;;;;;AA6BA,IAAa,UAAU,wBAAA,OAAO,OAAO,cAAA,SAAc,EACjD,SAAS,iBACV,CAAC;AAEF,IAAM,cAAc,wBAAA,OAAO,OAAO,cAAA,OAAY,EAC5C,SAAS,mBACV,CAAC;AACF,IAAa,SAAA,GAAA,MAAA,aAGV,OAAO,QAAQ,iBAAA,GAAA,kBAAA,KAAC,aAAD;CAAkB;CAAK,MAAK;CAAW,GAAI;CAAS,CAAA,CAAC;AAEvE,IAAM,cAAc,wBAAA,OAAO,OAAO,cAAA,OAAY,EAC5C,SAAS,sBACV,CAAC;AACF,IAAa,SAAA,GAAA,MAAA,aAGV,OAAO,QAAQ,iBAAA,GAAA,kBAAA,KAAC,aAAD;CAAkB;CAAK,MAAK;CAAW,GAAI;CAAS,CAAA,CAAC;AAEvE,IAAM,WAAW,wBAAA,OAAO,OAAO,cAAA,UAAS,EACtC,SAAS,aACV,CAAC;AACF,IAAM,eAAe,wBAAA,OAAO,qBAAA,MAAM,SAAS;AAE3C,IAAM,qBAAqB,EAAE,QAAQ,eAAyD;CAC5F,MAAM,gBAAA,GAAA,MAAA,eAEF,SACI;EACE,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,QAAQ;EACT,GACD;EACE,YAAY;EACZ,SAAS;EACT,eAAe;EACf,QAAQ;EACT,EACP,CAAC,OAAO,CACT;CAED,MAAM,kBAAA,GAAA,MAAA,eAEF,SACI;EACE,YAAY;EACZ,SAAS;EACT,eAAe;EAChB,GACD;EACE,YAAY;EACZ,QAAQ;EACR,UAAU;EACV,SAAS;EACV,EACP,CAAC,OAAO,CACT;AAED,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACE,KAAK,SAAS,EAAE,sBAAsB,EAAE,cAAc,6BAA6B,EAAE,GAAG,EAAE;YAE1F,iBAAA,GAAA,kBAAA,KAAC,IAAD;GAAI,KAAK;GAAc,aAAA;aACrB,iBAAA,GAAA,kBAAA,KAAC,YAAA,KAAD;IAAK,KAAK;IAAiB;IAAe,CAAA;GACvC,CAAA;EACI,CAAA;;AAaf,IAAa,MAAA,GAAA,MAAA,aACV,EAAE,SAAS,UAAU,kBAAkB,kBAAkB,WAAW,KAAK,GAAG,SAAS,QAAQ;CAC5F,MAAM,YAAY,UAAU,eAAe;CAC3C,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,UAA2B,MAAM;AAErD,KAAI,CAAC,SAAS;EACZ,MAAM,gBAAgB,MAAA,SAAS,QAAQ,SAAS;AAQhD,MAP2B,cAAc,MAAM,UAAU;AACvD,OAAI,EAAA,GAAA,MAAA,gBAAgB,MAAM,CACxB,QAAO;GAET,MAAM,EAAE,gBAAgB,MAAM;AAC9B,UAAO,CAAC,CAAC;IAEP,IAAsB,cAAc,SAAS,EAC/C,OAAM,IAAI,MAAM,gEAAgE;;CAIpF,MAAM,QAAA,GAAA,MAAA,eAEF,mBACE,YACE,iBAAA,GAAA,kBAAA,KAAC,IAAD,EAAI,KAAK,EAAE,OAAO,IAAI,EAAI,CAAA,GAE1B,iBAAA,GAAA,kBAAA,KAAC,IAAD,EAAqB,EAAb,WAAa,GAErB,mBACF,iBAAA,GAAA,kBAAA,KAAC,IAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,YAAA,KAAD;EACE,UAAU,MAAM;AACd,KAAE,iBAAiB;AACnB,KAAE,gBAAgB;;YAGpB,iBAAA,GAAA,kBAAA,KAAC,sBAAA,kBAAD;GACE,eAAe,eAAe,CAAC,YAAY;GAC3C,OAAO;IACL,QAAQ;IACR,YAAY;IACZ,WAAW,cAAc,kBAAkB;IAC5C;GACD,CAAA;EACE,CAAA,EACH,EAhBG,aAgBH,GACH,MAEN,CAAC,YAAY,CACd;CAED,MAAM,oBAAA,GAAA,MAAA,eAAiC;AACrC,MAAI,QACF,SAAA,GAAA,MAAA,cACE,UACA,EAEE,GAAG,UAAU,OACd,EAED,CAAC,MAAM,GAAI,UAAU,OAAO,YAAY,EAAE,CAAE,CAC7C;AAGH,SACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,MACA,SACA,EAAA,CAAA;IAEJ;EAAC;EAAS;EAAM;EAAS,CAAC;AAE7B,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,MAAK;EACL,KACE,CAAC,CAAC,oBAAoB,CAAC,cACnB;GACE,GAAG;IACF,+BAA+B,EAC9B,cAAc,QACf;GACF,GACD,EAAE,GAAG,KAAK;EAEhB,GAAI;YAEH;EACS,CAAA,EACX,CAAC,CAAC,oBACD,iBAAA,GAAA,kBAAA,KAAC,mBAAD;EAAmB,QAAQ;YAAc;EAAqC,CAAA,CAE/E,EAAA,CAAA;EAGR;AAED,IAAM,WAAW,wBAAA,OAAO,QAAQ,cAAA,IAAS,EACvC,SAAS,cACV,CAAC;AAIF,IAAa,MAAA,GAAA,MAAA,aACV,OAAO,QAAQ,iBAAA,GAAA,kBAAA,KAAC,UAAD;CAAe;CAAK,MAAK;CAAe,GAAI;CAAS,CAAA,CACtE;AAED,IAAM,WAAW,wBAAA,OAAO,QAAQ,cAAA,IAAS,EACvC,SAAS,cACV,CAAC;AAEF,IAAM,WAAW,wBAAA,OAAO,UAAU,EAChC,YAAY,UACb,CAAC;AAOF,IAAa,MAAA,GAAA,MAAA,aACV,EAAE,aAAa,KAAK,GAAG,SAAS,QAAQ;CACvC,MAAM,kBAAA,GAAA,MAAA,eAEF,cACI;EACE,UAAU;EACV,MAAM;EACN,OAAO;EACP,QAAQ;EACT,GACD,EAAE,EACR,CAAC,YAAY,CACd;AACD,KAAI,YACF,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EAAe;EAAK,GAAI;EAAS,CAAA,EACjC,iBAAA,GAAA,kBAAA,KAAC,UAAD;EAAe;EAAK,MAAK;EAAO,KAAK,kBAAA,UAAU,gBAAgB,IAAI;EAAE,GAAI;EAAS,CAAA,CACjF,EAAA,CAAA;AAGP,QAAO,iBAAA,GAAA,kBAAA,KAAC,UAAD;EAAe;EAAK,MAAK;EAAY;EAAK,GAAI;EAAS,CAAA;EAEjE;AAED,IAAM,cAAc,wBAAA,OAAO,OAAO,cAAA,OAAY,EAC5C,SAAS,sBACV,CAAC;AACF,IAAa,SAAA,GAAA,MAAA,aAGV,OAAO,QAAQ,iBAAA,GAAA,kBAAA,KAAC,aAAD;CAAkB;CAAK,MAAK;CAAW,GAAI;CAAS,CAAA,CAAC;AAEvE,IAAM,cAAc,wBAAA,OAAO,OAAO,cAAA,OAAY,EAC5C,SAAS,SACV,CAAC;AACF,IAAa,SAAA,GAAA,MAAA,aAIV,EAAE,wBAAwB,KAAK,GAAG,SAAS,QAC5C,iBAAA,GAAA,kBAAA,KAAC,aAAD;CACO;CACL,MAAK;CACL,KAAK,yBAAyB;EAAE,gBAAgB;EAAY,GAAG;EAAK,GAAG;CACvE,GAAI;CACJ,CAAA,CACF"}
|
|
1
|
+
{"version":3,"file":"AriaTable.cjs","names":[],"sources":["../../../components/AriaTable/AriaTable.tsx"],"sourcesContent":["import { ChevronRightIcon } from '@radix-ui/react-icons';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, {\n Children,\n cloneElement,\n ComponentProps,\n ElementRef,\n forwardRef,\n isValidElement,\n ReactNode,\n useMemo,\n useState,\n} from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { deepMerge } from '../../utils/deepMerge';\nimport { Box } from '../Box';\nimport type { TableVariants } from '../Table';\nimport {\n Caption as TableCaption,\n StyledTr as TableTr,\n Table as TableTable,\n Tbody as TableTbody,\n Td as TableTd,\n Tfoot as TableTfoot,\n Th as TableTh,\n Thead as TableThead,\n} from '../Table';\n\nexport const Caption = styled('div', TableCaption, {\n display: 'table-caption',\n});\n\nconst StyledTbody = styled('div', TableTbody, {\n display: 'table-row-group',\n});\nexport const Tbody = forwardRef<\n ElementRef<typeof StyledTbody>,\n ComponentProps<typeof StyledTbody> & VariantProps<typeof StyledTbody>\n>((props, ref) => <StyledTbody ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTfoot = styled('div', TableTfoot, {\n display: 'table-footer-group',\n});\nexport const Tfoot = forwardRef<\n ElementRef<typeof StyledTfoot>,\n ComponentProps<typeof StyledTfoot> & VariantProps<typeof StyledTfoot>\n>((props, ref) => <StyledTfoot ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTr = styled('div', TableTr, {\n display: 'table-row',\n});\nconst StyledTrSlot = styled(Slot, StyledTr);\n\nconst AnimatedContainer = ({ isOpen, children }: { isOpen: boolean; children: ReactNode }) => {\n const appliedStyle = useMemo(\n () =>\n isOpen\n ? {\n transition: 'all 0.2s ease-out',\n paddingBottom: 0,\n paddingTop: 0,\n border: 'none',\n }\n : {\n transition: 'all 0.2s ease-out',\n padding: '0px 16px',\n pointerEvents: 'none',\n border: 'none',\n },\n [isOpen],\n );\n\n const containerStyle = useMemo(\n () =>\n isOpen\n ? {\n transition: 'all 0.2s ease-out',\n padding: '16px',\n paddingBottom: 0,\n }\n : {\n transition: 'all 0.2s ease-out',\n height: 0,\n overflow: 'hidden',\n padding: '0px 16px',\n },\n [isOpen],\n );\n\n return (\n <StyledTr\n css={isOpen ? { '&:not(:last-child)': { borderBottom: '1px solid $tableRowBorder' } } : {}}\n >\n <Td css={appliedStyle} fullColSpan>\n <Box css={containerStyle}>{children}</Box>\n </Td>\n </StyledTr>\n );\n};\n\nexport type AriaTrProps = ComponentProps<typeof StyledTr> &\n VariantProps<typeof StyledTr> & {\n asChild?: boolean;\n collapsedContent?: React.ReactNode;\n emptyFirstColumn?: boolean;\n tableHead?: boolean;\n children?: React.ReactNode;\n };\n\nexport const Tr = forwardRef<ElementRef<typeof StyledTr>, AriaTrProps>(\n ({ asChild, children, collapsedContent, emptyFirstColumn, tableHead, css, ...props }, ref) => {\n const Component = asChild ? StyledTrSlot : StyledTr;\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n if (!asChild) {\n const arrayChildren = Children.toArray(children);\n const hasColSpanChildren = arrayChildren.some((child) => {\n if (!isValidElement(child)) {\n return false;\n }\n const { fullColSpan } = child.props as TdProps;\n return !!fullColSpan;\n });\n if (hasColSpanChildren && arrayChildren.length > 1) {\n throw new Error('Using fullColSpan is allowed only for a single full width Td.');\n }\n }\n\n const TdEl = useMemo(\n () =>\n emptyFirstColumn ? (\n tableHead ? (\n <Th css={{ width: 24 }} />\n ) : (\n <Td key=\"empty-td\" />\n )\n ) : collapsedContent ? (\n <Td key=\"chevron-td\">\n <Box\n onClick={(e) => {\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <ChevronRightIcon\n onClick={() => setIsCollapsed(!isCollapsed)}\n style={{\n cursor: 'pointer',\n transition: 'transform 0.2s ease-out',\n transform: isCollapsed ? 'rotate(90deg)' : 'initial',\n }}\n />\n </Box>\n </Td>\n ) : null,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [isCollapsed],\n );\n\n const renderedChildren = useMemo(() => {\n if (asChild) {\n return cloneElement(\n children as any,\n {\n // @ts-ignore: Object is possibly 'null'.\n ...children?.props,\n },\n // @ts-ignore: Object is possibly 'null'.\n [TdEl, ...(children?.props?.children || [])],\n );\n }\n\n return (\n <>\n {TdEl}\n {children}\n </>\n );\n }, [asChild, TdEl, children]);\n\n return (\n <>\n <Component\n ref={ref}\n role=\"row\"\n css={\n !!collapsedContent && !isCollapsed\n ? {\n ...css,\n [`&:nth-last-child(2) > span`]: {\n borderBottom: 'none',\n },\n }\n : { ...css }\n }\n {...props}\n >\n {renderedChildren}\n </Component>\n {!!collapsedContent && (\n <AnimatedContainer isOpen={isCollapsed}>{collapsedContent}</AnimatedContainer>\n )}\n </>\n );\n },\n);\n\nconst StyledTh = styled('span', TableTh, {\n display: 'table-cell',\n});\n\nexport interface ThProps extends ComponentProps<typeof StyledTh>, VariantProps<typeof StyledTh> {}\n\nexport const Th = forwardRef<ElementRef<typeof StyledTh>, ComponentProps<typeof StyledTh>>(\n (props, ref) => <StyledTh ref={ref} role=\"columnheader\" {...props} />,\n);\n\nconst StyledTd = styled('span', TableTd, {\n display: 'table-cell',\n});\n\nconst FillerTd = styled(StyledTd, {\n visibility: 'hidden',\n});\nexport type TdProps = ComponentProps<typeof StyledTd> &\n VariantProps<typeof StyledTd> &\n VariantProps<typeof TableTd> & {\n fullColSpan?: boolean;\n };\n\nexport const Td = forwardRef<ElementRef<typeof StyledTd>, TdProps>(\n ({ fullColSpan, css, ...props }, ref) => {\n const fullColSpanCss = useMemo(\n () =>\n fullColSpan\n ? {\n position: 'absolute',\n left: 0,\n width: '100%',\n height: '100%',\n }\n : {},\n [fullColSpan],\n );\n if (fullColSpan) {\n return (\n <>\n <FillerTd css={css} {...props} />\n <StyledTd ref={ref} role=\"cell\" css={deepMerge(fullColSpanCss, css)} {...props} />\n </>\n );\n }\n return <StyledTd ref={ref} role=\"cell\" css={css} {...props} />;\n },\n);\n\nconst StyledThead = styled('div', TableThead, {\n display: 'table-header-group',\n});\nexport const Thead = forwardRef<\n ElementRef<typeof StyledThead>,\n ComponentProps<typeof StyledThead> & VariantProps<typeof StyledThead> & NonNullable<unknown>\n>((props, ref) => <StyledThead ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTable = styled('div', TableTable, {\n display: 'table',\n});\nexport const Table = forwardRef<\n ElementRef<typeof StyledTable>,\n ComponentProps<typeof StyledTable> &\n VariantProps<typeof StyledTable> & { hasCollapsibleChildren?: boolean }\n>(({ hasCollapsibleChildren, css, ...props }, ref) => (\n <StyledTable\n ref={ref}\n role=\"table\"\n css={hasCollapsibleChildren ? { borderCollapse: 'collapse', ...css } : css}\n {...props}\n />\n));\n\nexport type AriaTableVariants = VariantProps<typeof Table>;\nexport type AriaTableProps = TableVariants & { children?: React.ReactNode; css?: CSS };\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AriaTable.js","names":[],"sources":["../../../components/AriaTable/AriaTable.tsx"],"sourcesContent":["import { ChevronRightIcon } from '@radix-ui/react-icons';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, {\n Children,\n cloneElement,\n ComponentProps,\n ElementRef,\n forwardRef,\n isValidElement,\n ReactNode,\n useMemo,\n useState,\n} from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { deepMerge } from '../../utils/deepMerge';\nimport { Box } from '../Box';\nimport type { TableVariants } from '../Table';\nimport {\n Caption as TableCaption,\n StyledTr as TableTr,\n Table as TableTable,\n Tbody as TableTbody,\n Td as TableTd,\n Tfoot as TableTfoot,\n Th as TableTh,\n Thead as TableThead,\n} from '../Table';\n\nexport const Caption = styled('div', TableCaption, {\n display: 'table-caption',\n});\n\nconst StyledTbody = styled('div', TableTbody, {\n display: 'table-row-group',\n});\nexport const Tbody = forwardRef<\n ElementRef<typeof StyledTbody>,\n ComponentProps<typeof StyledTbody> & VariantProps<typeof StyledTbody>\n>((props, ref) => <StyledTbody ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTfoot = styled('div', TableTfoot, {\n display: 'table-footer-group',\n});\nexport const Tfoot = forwardRef<\n ElementRef<typeof StyledTfoot>,\n ComponentProps<typeof StyledTfoot> & VariantProps<typeof StyledTfoot>\n>((props, ref) => <StyledTfoot ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTr = styled('div', TableTr, {\n display: 'table-row',\n});\nconst StyledTrSlot = styled(Slot, StyledTr);\n\nconst AnimatedContainer = ({ isOpen, children }: { isOpen: boolean; children: ReactNode }) => {\n const appliedStyle = useMemo(\n () =>\n isOpen\n ? {\n transition: 'all 0.2s ease-out',\n paddingBottom: 0,\n paddingTop: 0,\n border: 'none',\n }\n : {\n transition: 'all 0.2s ease-out',\n padding: '0px 16px',\n pointerEvents: 'none',\n border: 'none',\n },\n [isOpen],\n );\n\n const containerStyle = useMemo(\n () =>\n isOpen\n ? {\n transition: 'all 0.2s ease-out',\n padding: '16px',\n paddingBottom: 0,\n }\n : {\n transition: 'all 0.2s ease-out',\n height: 0,\n overflow: 'hidden',\n padding: '0px 16px',\n },\n [isOpen],\n );\n\n return (\n <StyledTr\n css={isOpen ? { '&:not(:last-child)': { borderBottom: '1px solid $tableRowBorder' } } : {}}\n >\n <Td css={appliedStyle} fullColSpan>\n <Box css={containerStyle}>{children}</Box>\n </Td>\n </StyledTr>\n );\n};\n\nexport type AriaTrProps = ComponentProps<typeof StyledTr> &\n VariantProps<typeof StyledTr> & {\n asChild?: boolean;\n collapsedContent?: React.ReactNode;\n emptyFirstColumn?: boolean;\n tableHead?: boolean;\n children?: React.ReactNode;\n };\n\nexport const Tr = forwardRef<ElementRef<typeof StyledTr>, AriaTrProps>(\n ({ asChild, children, collapsedContent, emptyFirstColumn, tableHead, css, ...props }, ref) => {\n const Component = asChild ? StyledTrSlot : StyledTr;\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n if (!asChild) {\n const arrayChildren = Children.toArray(children);\n const hasColSpanChildren = arrayChildren.some((child) => {\n if (!isValidElement(child)) {\n return false;\n }\n const { fullColSpan } = child.props as TdProps;\n return !!fullColSpan;\n });\n if (hasColSpanChildren && arrayChildren.length > 1) {\n throw new Error('Using fullColSpan is allowed only for a single full width Td.');\n }\n }\n\n const TdEl = useMemo(\n () =>\n emptyFirstColumn ? (\n tableHead ? (\n <Th css={{ width: 24 }} />\n ) : (\n <Td key=\"empty-td\" />\n )\n ) : collapsedContent ? (\n <Td key=\"chevron-td\">\n <Box\n onClick={(e) => {\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <ChevronRightIcon\n onClick={() => setIsCollapsed(!isCollapsed)}\n style={{\n cursor: 'pointer',\n transition: 'transform 0.2s ease-out',\n transform: isCollapsed ? 'rotate(90deg)' : 'initial',\n }}\n />\n </Box>\n </Td>\n ) : null,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [isCollapsed],\n );\n\n const renderedChildren = useMemo(() => {\n if (asChild) {\n return cloneElement(\n children as any,\n {\n // @ts-ignore: Object is possibly 'null'.\n ...children?.props,\n },\n // @ts-ignore: Object is possibly 'null'.\n [TdEl, ...(children?.props?.children || [])],\n );\n }\n\n return (\n <>\n {TdEl}\n {children}\n </>\n );\n }, [asChild, TdEl, children]);\n\n return (\n <>\n <Component\n ref={ref}\n role=\"row\"\n css={\n !!collapsedContent && !isCollapsed\n ? {\n ...css,\n [`&:nth-last-child(2) > span`]: {\n borderBottom: 'none',\n },\n }\n : { ...css }\n }\n {...props}\n >\n {renderedChildren}\n </Component>\n {!!collapsedContent && (\n <AnimatedContainer isOpen={isCollapsed}>{collapsedContent}</AnimatedContainer>\n )}\n </>\n );\n },\n);\n\nconst StyledTh = styled('span', TableTh, {\n display: 'table-cell',\n});\n\nexport interface ThProps extends ComponentProps<typeof StyledTh>, VariantProps<typeof StyledTh> {}\n\nexport const Th = forwardRef<ElementRef<typeof StyledTh>, ComponentProps<typeof StyledTh>>(\n (props, ref) => <StyledTh ref={ref} role=\"columnheader\" {...props} />,\n);\n\nconst StyledTd = styled('span', TableTd, {\n display: 'table-cell',\n});\n\nconst FillerTd = styled(StyledTd, {\n visibility: 'hidden',\n});\nexport type TdProps = ComponentProps<typeof StyledTd> &\n VariantProps<typeof StyledTd> &\n VariantProps<typeof TableTd> & {\n fullColSpan?: boolean;\n };\n\nexport const Td = forwardRef<ElementRef<typeof StyledTd>, TdProps>(\n ({ fullColSpan, css, ...props }, ref) => {\n const fullColSpanCss = useMemo(\n () =>\n fullColSpan\n ? {\n position: 'absolute',\n left: 0,\n width: '100%',\n height: '100%',\n }\n : {},\n [fullColSpan],\n );\n if (fullColSpan) {\n return (\n <>\n <FillerTd css={css} {...props} />\n <StyledTd ref={ref} role=\"cell\" css={deepMerge(fullColSpanCss, css)} {...props} />\n </>\n );\n }\n return <StyledTd ref={ref} role=\"cell\" css={css} {...props} />;\n },\n);\n\nconst StyledThead = styled('div', TableThead, {\n display: 'table-header-group',\n});\nexport const Thead = forwardRef<\n ElementRef<typeof StyledThead>,\n ComponentProps<typeof StyledThead> & VariantProps<typeof StyledThead> & NonNullable<unknown>\n>((props, ref) => <StyledThead ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTable = styled('div', TableTable, {\n display: 'table',\n});\nexport const Table = forwardRef<\n ElementRef<typeof StyledTable>,\n ComponentProps<typeof StyledTable> &\n VariantProps<typeof StyledTable> & { hasCollapsibleChildren?: boolean }\n>(({ hasCollapsibleChildren, css, ...props }, ref) => (\n <StyledTable\n ref={ref}\n role=\"table\"\n css={hasCollapsibleChildren ? { borderCollapse: 'collapse', ...css } : css}\n {...props}\n />\n));\n\nexport type AriaTableVariants = VariantProps<typeof Table>;\nexport type AriaTableProps = TableVariants & { children?: React.ReactNode; css?: CSS };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AriaTable.js","names":[],"sources":["../../../components/AriaTable/AriaTable.tsx"],"sourcesContent":["import { ChevronRightIcon } from '@radix-ui/react-icons';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, {\n Children,\n cloneElement,\n ComponentProps,\n ElementRef,\n forwardRef,\n isValidElement,\n ReactNode,\n useMemo,\n useState,\n} from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { deepMerge } from '../../utils/deepMerge';\nimport { Box } from '../Box';\nimport type { TableVariants } from '../Table';\nimport {\n Caption as TableCaption,\n StyledTr as TableTr,\n Table as TableTable,\n Tbody as TableTbody,\n Td as TableTd,\n Tfoot as TableTfoot,\n Th as TableTh,\n Thead as TableThead,\n} from '../Table';\n\nexport const Caption = styled('div', TableCaption, {\n display: 'table-caption',\n});\n\nconst StyledTbody = styled('div', TableTbody, {\n display: 'table-row-group',\n});\nexport const Tbody = forwardRef<\n ElementRef<typeof StyledTbody>,\n ComponentProps<typeof StyledTbody> & VariantProps<typeof StyledTbody>\n>((props, ref) => <StyledTbody ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTfoot = styled('div', TableTfoot, {\n display: 'table-footer-group',\n});\nexport const Tfoot = forwardRef<\n ElementRef<typeof StyledTfoot>,\n ComponentProps<typeof StyledTfoot> & VariantProps<typeof StyledTfoot>\n>((props, ref) => <StyledTfoot ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTr = styled('div', TableTr, {\n display: 'table-row',\n});\nconst StyledTrSlot = styled(Slot, StyledTr);\n\nconst AnimatedContainer = ({ isOpen, children }: { isOpen: boolean; children: ReactNode }) => {\n const appliedStyle = useMemo(\n () =>\n isOpen\n ? {\n transition: 'all 0.2s ease-out',\n paddingBottom: 0,\n paddingTop: 0,\n border: 'none',\n }\n : {\n transition: 'all 0.2s ease-out',\n padding: '0px 16px',\n pointerEvents: 'none',\n border: 'none',\n },\n [isOpen],\n );\n\n const containerStyle = useMemo(\n () =>\n isOpen\n ? {\n transition: 'all 0.2s ease-out',\n padding: '16px',\n paddingBottom: 0,\n }\n : {\n transition: 'all 0.2s ease-out',\n height: 0,\n overflow: 'hidden',\n padding: '0px 16px',\n },\n [isOpen],\n );\n\n return (\n <StyledTr\n css={isOpen ? { '&:not(:last-child)': { borderBottom: '1px solid $tableRowBorder' } } : {}}\n >\n <Td css={appliedStyle} fullColSpan>\n <Box css={containerStyle}>{children}</Box>\n </Td>\n </StyledTr>\n );\n};\n\nexport type AriaTrProps = ComponentProps<typeof StyledTr> &\n VariantProps<typeof StyledTr> & {\n asChild?: boolean;\n collapsedContent?: React.ReactNode;\n emptyFirstColumn?: boolean;\n tableHead?: boolean;\n children?: React.ReactNode;\n };\n\nexport const Tr = forwardRef<ElementRef<typeof StyledTr>, AriaTrProps>(\n ({ asChild, children, collapsedContent, emptyFirstColumn, tableHead, css, ...props }, ref) => {\n const Component = asChild ? StyledTrSlot : StyledTr;\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n if (!asChild) {\n const arrayChildren = Children.toArray(children);\n const hasColSpanChildren = arrayChildren.some((child) => {\n if (!isValidElement(child)) {\n return false;\n }\n const { fullColSpan } = child.props as TdProps;\n return !!fullColSpan;\n });\n if (hasColSpanChildren && arrayChildren.length > 1) {\n throw new Error('Using fullColSpan is allowed only for a single full width Td.');\n }\n }\n\n const TdEl = useMemo(\n () =>\n emptyFirstColumn ? (\n tableHead ? (\n <Th css={{ width: 24 }} />\n ) : (\n <Td key=\"empty-td\" />\n )\n ) : collapsedContent ? (\n <Td key=\"chevron-td\">\n <Box\n onClick={(e) => {\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <ChevronRightIcon\n onClick={() => setIsCollapsed(!isCollapsed)}\n style={{\n cursor: 'pointer',\n transition: 'transform 0.2s ease-out',\n transform: isCollapsed ? 'rotate(90deg)' : 'initial',\n }}\n />\n </Box>\n </Td>\n ) : null,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [isCollapsed],\n );\n\n const renderedChildren = useMemo(() => {\n if (asChild) {\n return cloneElement(\n children as any,\n {\n // @ts-ignore: Object is possibly 'null'.\n ...children?.props,\n },\n // @ts-ignore: Object is possibly 'null'.\n [TdEl, ...(children?.props?.children || [])],\n );\n }\n\n return (\n <>\n {TdEl}\n {children}\n </>\n );\n }, [asChild, TdEl, children]);\n\n return (\n <>\n <Component\n ref={ref}\n role=\"row\"\n css={\n !!collapsedContent && !isCollapsed\n ? {\n ...css,\n [`&:nth-last-child(2) > span`]: {\n borderBottom: 'none',\n },\n }\n : { ...css }\n }\n {...props}\n >\n {renderedChildren}\n </Component>\n {!!collapsedContent && (\n <AnimatedContainer isOpen={isCollapsed}>{collapsedContent}</AnimatedContainer>\n )}\n </>\n );\n },\n);\n\nconst StyledTh = styled('span', TableTh, {\n display: 'table-cell',\n});\n\nexport interface ThProps extends ComponentProps<typeof StyledTh>, VariantProps<typeof StyledTh> {}\n\nexport const Th = forwardRef<ElementRef<typeof StyledTh>, ComponentProps<typeof StyledTh>>(\n (props, ref) => <StyledTh ref={ref} role=\"columnheader\" {...props} />,\n);\n\nconst StyledTd = styled('span', TableTd, {\n display: 'table-cell',\n});\n\nconst FillerTd = styled(StyledTd, {\n visibility: 'hidden',\n});\nexport type TdProps = ComponentProps<typeof StyledTd> &\n VariantProps<typeof StyledTd> &\n VariantProps<typeof TableTd> & {\n fullColSpan?: boolean;\n };\n\nexport const Td = forwardRef<ElementRef<typeof StyledTd>, TdProps>(\n ({ fullColSpan, css, ...props }, ref) => {\n const fullColSpanCss = useMemo(\n () =>\n fullColSpan\n ? {\n position: 'absolute',\n left: 0,\n width: '100%',\n height: '100%',\n }\n : {},\n [fullColSpan],\n );\n if (fullColSpan) {\n return (\n <>\n <FillerTd css={css} {...props} />\n <StyledTd ref={ref} role=\"cell\" css={deepMerge(fullColSpanCss, css)} {...props} />\n </>\n );\n }\n return <StyledTd ref={ref} role=\"cell\" css={css} {...props} />;\n },\n);\n\nconst StyledThead = styled('div', TableThead, {\n display: 'table-header-group',\n});\nexport const Thead = forwardRef<\n ElementRef<typeof StyledThead>,\n ComponentProps<typeof StyledThead> & VariantProps<typeof StyledThead> & NonNullable<unknown>\n>((props, ref) => <StyledThead ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTable = styled('div', TableTable, {\n display: 'table',\n});\nexport const Table = forwardRef<\n ElementRef<typeof StyledTable>,\n ComponentProps<typeof StyledTable> &\n VariantProps<typeof StyledTable> & { hasCollapsibleChildren?: boolean }\n>(({ hasCollapsibleChildren, css, ...props }, ref) => (\n <StyledTable\n ref={ref}\n role=\"table\"\n css={hasCollapsibleChildren ? { borderCollapse: 'collapse', ...css } : css}\n {...props}\n />\n));\n\nexport type AriaTableVariants = VariantProps<typeof Table>;\nexport type AriaTableProps = TableVariants & { children?: React.ReactNode; css?: CSS };\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.cjs","names":[],"sources":["../../../components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\n\nconst StyledAvatar = styled(AvatarPrimitive.Root, {\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign: 'middle',\n overflow: 'hidden',\n userSelect: 'none',\n boxSizing: 'border-box',\n display: 'flex',\n flexShrink: 0,\n position: 'relative',\n border: 'none',\n fontFamily: 'inherit',\n lineHeight: '1',\n margin: '0',\n outline: 'none',\n padding: '0',\n fontWeight: '$medium',\n color: '$hiContrast',\n\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: 'inherit',\n boxShadow: 'inset 0px 0px 1px rgba(0, 0, 0, 0.12)',\n },\n\n variants: {\n size: {\n '1': {\n width: '$3',\n height: '$3',\n },\n '2': {\n width: '$5',\n height: '$5',\n },\n '3': {\n width: '$6',\n height: '$6',\n },\n '4': {\n width: '$7',\n height: '$7',\n },\n '5': {\n width: '$8',\n height: '$8',\n },\n '6': {\n width: '$9',\n height: '$9',\n },\n },\n variant: {\n gray: {\n backgroundColor: '$slate5',\n },\n red: {\n backgroundColor: '$red5',\n },\n purple: {\n backgroundColor: '$purple5',\n },\n blue: {\n backgroundColor: '$blue5',\n },\n green: {\n backgroundColor: '$green5',\n },\n orange: {\n backgroundColor: '$orange5',\n },\n },\n shape: {\n square: {\n borderRadius: '$2',\n },\n circle: {\n borderRadius: '50%',\n },\n },\n },\n defaultVariants: {\n size: '2',\n variant: 'gray',\n shape: 'circle',\n },\n});\n\nconst StyledAvatarImage = styled(AvatarPrimitive.Image, {\n display: 'flex',\n objectFit: 'cover',\n boxSizing: 'border-box',\n height: '100%',\n verticalAlign: 'middle',\n width: '100%',\n});\n\nconst StyledAvatarFallback = styled(AvatarPrimitive.Fallback, {\n textTransform: 'uppercase',\n fontFamily: '$rubik',\n color: '$deepBlue10',\n\n variants: {\n size: {\n '1': {\n fontSize: '10px',\n lineHeight: '15px',\n },\n '2': {\n fontSize: '$3',\n },\n '3': {\n fontSize: '$6',\n },\n '4': {\n fontSize: '$7',\n },\n '5': {\n fontSize: '$8',\n },\n '6': {\n fontSize: '$9',\n },\n },\n },\n defaultVariants: {\n size: '2',\n },\n});\n\ntype AvatarVariants = VariantProps<typeof StyledAvatar>;\ntype AvatarPrimitiveProps = Omit<React.ComponentProps<typeof AvatarPrimitive.Root>, 'as'>;\ntype AvatarOwnProps = AvatarPrimitiveProps &\n AvatarVariants & {\n css?: CSS;\n alt?: string;\n src?: string;\n fallback?: React.ReactNode;\n // status?: StatusColors['variant'];\n };\n\nexport const Avatar = React.forwardRef<React.ElementRef<typeof StyledAvatar>, AvatarOwnProps>(\n ({ alt, src, fallback, size, variant, shape, css, ...props }, forwardedRef) => {\n return (\n <Box\n css={{\n ...css,\n position: 'relative',\n height: 'fit-content',\n width: 'fit-content',\n }}\n >\n <StyledAvatar {...props} ref={forwardedRef} size={size} variant={variant} shape={shape}>\n <StyledAvatarImage alt={alt} src={src} />\n <StyledAvatarFallback size={size}>{fallback}</StyledAvatarFallback>\n </StyledAvatar>\n </Box>\n );\n }\n);\n"],"mappings":";;;;;;;;;AAMA,IAAM,eAAe,wBAAA,OAAO,uBAAgB,MAAM;CAChD,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,UAAU;CACV,YAAY;CACZ,WAAW;CACX,SAAS;CACT,YAAY;CACZ,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,YAAY;CACZ,OAAO;CAEP,aAAa;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;EACd,WAAW;EACZ;CAED,UAAU;EACR,MAAM;GACJ,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACD,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACD,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACD,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACD,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACD,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACF;EACD,SAAS;GACP,MAAM,EACJ,iBAAiB,WAClB;GACD,KAAK,EACH,iBAAiB,SAClB;GACD,QAAQ,EACN,iBAAiB,YAClB;GACD,MAAM,EACJ,iBAAiB,UAClB;GACD,OAAO,EACL,iBAAiB,WAClB;GACD,QAAQ,EACN,iBAAiB,YAClB;GACF;EACD,OAAO;GACL,QAAQ,EACN,cAAc,MACf;GACD,QAAQ,EACN,cAAc,OACf;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,SAAS;EACT,OAAO;EACR;CACF,CAAC;AAEF,IAAM,oBAAoB,wBAAA,OAAO,uBAAgB,OAAO;CACtD,SAAS;CACT,WAAW;CACX,WAAW;CACX,QAAQ;CACR,eAAe;CACf,OAAO;CACR,CAAC;AAEF,IAAM,uBAAuB,wBAAA,OAAO,uBAAgB,UAAU;CAC5D,eAAe;CACf,YAAY;CACZ,OAAO;CAEP,UAAU,EACR,MAAM;EACJ,KAAK;GACH,UAAU;GACV,YAAY;GACb;EACD,KAAK,EACH,UAAU,MACX;EACD,KAAK,EACH,UAAU,MACX;EACD,KAAK,EACH,UAAU,MACX;EACD,KAAK,EACH,UAAU,MACX;EACD,KAAK,EACH,UAAU,MACX;EACF,EACF;CACD,iBAAiB,EACf,MAAM,KACP;CACF,CAAC;AAaF,IAAa,SAAS,MAAA,QAAM,YACzB,EAAE,KAAK,KAAK,UAAU,MAAM,SAAS,OAAO,KAAK,GAAG,SAAS,iBAAiB;
|
|
1
|
+
{"version":3,"file":"Avatar.cjs","names":[],"sources":["../../../components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\n\nconst StyledAvatar = styled(AvatarPrimitive.Root, {\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign: 'middle',\n overflow: 'hidden',\n userSelect: 'none',\n boxSizing: 'border-box',\n display: 'flex',\n flexShrink: 0,\n position: 'relative',\n border: 'none',\n fontFamily: 'inherit',\n lineHeight: '1',\n margin: '0',\n outline: 'none',\n padding: '0',\n fontWeight: '$medium',\n color: '$hiContrast',\n\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: 'inherit',\n boxShadow: 'inset 0px 0px 1px rgba(0, 0, 0, 0.12)',\n },\n\n variants: {\n size: {\n '1': {\n width: '$3',\n height: '$3',\n },\n '2': {\n width: '$5',\n height: '$5',\n },\n '3': {\n width: '$6',\n height: '$6',\n },\n '4': {\n width: '$7',\n height: '$7',\n },\n '5': {\n width: '$8',\n height: '$8',\n },\n '6': {\n width: '$9',\n height: '$9',\n },\n },\n variant: {\n gray: {\n backgroundColor: '$slate5',\n },\n red: {\n backgroundColor: '$red5',\n },\n purple: {\n backgroundColor: '$purple5',\n },\n blue: {\n backgroundColor: '$blue5',\n },\n green: {\n backgroundColor: '$green5',\n },\n orange: {\n backgroundColor: '$orange5',\n },\n },\n shape: {\n square: {\n borderRadius: '$2',\n },\n circle: {\n borderRadius: '50%',\n },\n },\n },\n defaultVariants: {\n size: '2',\n variant: 'gray',\n shape: 'circle',\n },\n});\n\nconst StyledAvatarImage = styled(AvatarPrimitive.Image, {\n display: 'flex',\n objectFit: 'cover',\n boxSizing: 'border-box',\n height: '100%',\n verticalAlign: 'middle',\n width: '100%',\n});\n\nconst StyledAvatarFallback = styled(AvatarPrimitive.Fallback, {\n textTransform: 'uppercase',\n fontFamily: '$rubik',\n color: '$deepBlue10',\n\n variants: {\n size: {\n '1': {\n fontSize: '10px',\n lineHeight: '15px',\n },\n '2': {\n fontSize: '$3',\n },\n '3': {\n fontSize: '$6',\n },\n '4': {\n fontSize: '$7',\n },\n '5': {\n fontSize: '$8',\n },\n '6': {\n fontSize: '$9',\n },\n },\n },\n defaultVariants: {\n size: '2',\n },\n});\n\ntype AvatarVariants = VariantProps<typeof StyledAvatar>;\ntype AvatarPrimitiveProps = Omit<React.ComponentProps<typeof AvatarPrimitive.Root>, 'as'>;\ntype AvatarOwnProps = AvatarPrimitiveProps &\n AvatarVariants & {\n css?: CSS;\n alt?: string;\n src?: string;\n fallback?: React.ReactNode;\n // status?: StatusColors['variant'];\n };\n\nexport const Avatar = React.forwardRef<React.ElementRef<typeof StyledAvatar>, AvatarOwnProps>(\n ({ alt, src, fallback, size, variant, shape, css, ...props }, forwardedRef) => {\n return (\n <Box\n css={{\n ...css,\n position: 'relative',\n height: 'fit-content',\n width: 'fit-content',\n }}\n >\n <StyledAvatar {...props} ref={forwardedRef} size={size} variant={variant} shape={shape}>\n <StyledAvatarImage alt={alt} src={src} />\n <StyledAvatarFallback size={size}>{fallback}</StyledAvatarFallback>\n </StyledAvatar>\n </Box>\n );\n }\n);\n"],"mappings":";;;;;;;;;AAMA,IAAM,eAAe,wBAAA,OAAO,uBAAgB,MAAM;CAChD,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,UAAU;CACV,YAAY;CACZ,WAAW;CACX,SAAS;CACT,YAAY;CACZ,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,YAAY;CACZ,OAAO;CAEP,aAAa;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;EACd,WAAW;EACZ;CAED,UAAU;EACR,MAAM;GACJ,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACD,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACD,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACD,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACD,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACD,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACF;EACD,SAAS;GACP,MAAM,EACJ,iBAAiB,WAClB;GACD,KAAK,EACH,iBAAiB,SAClB;GACD,QAAQ,EACN,iBAAiB,YAClB;GACD,MAAM,EACJ,iBAAiB,UAClB;GACD,OAAO,EACL,iBAAiB,WAClB;GACD,QAAQ,EACN,iBAAiB,YAClB;GACF;EACD,OAAO;GACL,QAAQ,EACN,cAAc,MACf;GACD,QAAQ,EACN,cAAc,OACf;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,SAAS;EACT,OAAO;EACR;CACF,CAAC;AAEF,IAAM,oBAAoB,wBAAA,OAAO,uBAAgB,OAAO;CACtD,SAAS;CACT,WAAW;CACX,WAAW;CACX,QAAQ;CACR,eAAe;CACf,OAAO;CACR,CAAC;AAEF,IAAM,uBAAuB,wBAAA,OAAO,uBAAgB,UAAU;CAC5D,eAAe;CACf,YAAY;CACZ,OAAO;CAEP,UAAU,EACR,MAAM;EACJ,KAAK;GACH,UAAU;GACV,YAAY;GACb;EACD,KAAK,EACH,UAAU,MACX;EACD,KAAK,EACH,UAAU,MACX;EACD,KAAK,EACH,UAAU,MACX;EACD,KAAK,EACH,UAAU,MACX;EACD,KAAK,EACH,UAAU,MACX;EACF,EACF;CACD,iBAAiB,EACf,MAAM,KACP;CACF,CAAC;AAaF,IAAa,SAAS,MAAA,QAAM,YACzB,EAAE,KAAK,KAAK,UAAU,MAAM,SAAS,OAAO,KAAK,GAAG,SAAS,iBAAiB;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,YAAA,KAAD;EACE,KAAK;GACH,GAAG;GACH,UAAU;GACV,QAAQ;GACR,OAAO;GACR;YAED,iBAAA,GAAA,kBAAA,MAAC,cAAD;GAAc,GAAI;GAAO,KAAK;GAAoB;GAAe;GAAgB;aAAjF,CACE,iBAAA,GAAA,kBAAA,KAAC,mBAAD;IAAwB;IAAU;IAAO,CAAA,EACzC,iBAAA,GAAA,kBAAA,KAAC,sBAAD;IAA4B;cAAO;IAAgC,CAAA,CACtD;;EACX,CAAA;EAGX"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","names":[],"sources":["../../../components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\n\nconst StyledAvatar = styled(AvatarPrimitive.Root, {\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign: 'middle',\n overflow: 'hidden',\n userSelect: 'none',\n boxSizing: 'border-box',\n display: 'flex',\n flexShrink: 0,\n position: 'relative',\n border: 'none',\n fontFamily: 'inherit',\n lineHeight: '1',\n margin: '0',\n outline: 'none',\n padding: '0',\n fontWeight: '$medium',\n color: '$hiContrast',\n\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: 'inherit',\n boxShadow: 'inset 0px 0px 1px rgba(0, 0, 0, 0.12)',\n },\n\n variants: {\n size: {\n '1': {\n width: '$3',\n height: '$3',\n },\n '2': {\n width: '$5',\n height: '$5',\n },\n '3': {\n width: '$6',\n height: '$6',\n },\n '4': {\n width: '$7',\n height: '$7',\n },\n '5': {\n width: '$8',\n height: '$8',\n },\n '6': {\n width: '$9',\n height: '$9',\n },\n },\n variant: {\n gray: {\n backgroundColor: '$slate5',\n },\n red: {\n backgroundColor: '$red5',\n },\n purple: {\n backgroundColor: '$purple5',\n },\n blue: {\n backgroundColor: '$blue5',\n },\n green: {\n backgroundColor: '$green5',\n },\n orange: {\n backgroundColor: '$orange5',\n },\n },\n shape: {\n square: {\n borderRadius: '$2',\n },\n circle: {\n borderRadius: '50%',\n },\n },\n },\n defaultVariants: {\n size: '2',\n variant: 'gray',\n shape: 'circle',\n },\n});\n\nconst StyledAvatarImage = styled(AvatarPrimitive.Image, {\n display: 'flex',\n objectFit: 'cover',\n boxSizing: 'border-box',\n height: '100%',\n verticalAlign: 'middle',\n width: '100%',\n});\n\nconst StyledAvatarFallback = styled(AvatarPrimitive.Fallback, {\n textTransform: 'uppercase',\n fontFamily: '$rubik',\n color: '$deepBlue10',\n\n variants: {\n size: {\n '1': {\n fontSize: '10px',\n lineHeight: '15px',\n },\n '2': {\n fontSize: '$3',\n },\n '3': {\n fontSize: '$6',\n },\n '4': {\n fontSize: '$7',\n },\n '5': {\n fontSize: '$8',\n },\n '6': {\n fontSize: '$9',\n },\n },\n },\n defaultVariants: {\n size: '2',\n },\n});\n\ntype AvatarVariants = VariantProps<typeof StyledAvatar>;\ntype AvatarPrimitiveProps = Omit<React.ComponentProps<typeof AvatarPrimitive.Root>, 'as'>;\ntype AvatarOwnProps = AvatarPrimitiveProps &\n AvatarVariants & {\n css?: CSS;\n alt?: string;\n src?: string;\n fallback?: React.ReactNode;\n // status?: StatusColors['variant'];\n };\n\nexport const Avatar = React.forwardRef<React.ElementRef<typeof StyledAvatar>, AvatarOwnProps>(\n ({ alt, src, fallback, size, variant, shape, css, ...props }, forwardedRef) => {\n return (\n <Box\n css={{\n ...css,\n position: 'relative',\n height: 'fit-content',\n width: 'fit-content',\n }}\n >\n <StyledAvatar {...props} ref={forwardedRef} size={size} variant={variant} shape={shape}>\n <StyledAvatarImage alt={alt} src={src} />\n <StyledAvatarFallback size={size}>{fallback}</StyledAvatarFallback>\n </StyledAvatar>\n </Box>\n );\n }\n);\n"],"mappings":";;;;;;AAMA,IAAM,eAAe,OAAO,gBAAgB,MAAM;CAChD,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,UAAU;CACV,YAAY;CACZ,WAAW;CACX,SAAS;CACT,YAAY;CACZ,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,YAAY;CACZ,OAAO;CAEP,aAAa;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;EACd,WAAW;EACZ;CAED,UAAU;EACR,MAAM;GACJ,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACD,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACD,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACD,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACD,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACD,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACF;EACD,SAAS;GACP,MAAM,EACJ,iBAAiB,WAClB;GACD,KAAK,EACH,iBAAiB,SAClB;GACD,QAAQ,EACN,iBAAiB,YAClB;GACD,MAAM,EACJ,iBAAiB,UAClB;GACD,OAAO,EACL,iBAAiB,WAClB;GACD,QAAQ,EACN,iBAAiB,YAClB;GACF;EACD,OAAO;GACL,QAAQ,EACN,cAAc,MACf;GACD,QAAQ,EACN,cAAc,OACf;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,SAAS;EACT,OAAO;EACR;CACF,CAAC;AAEF,IAAM,oBAAoB,OAAO,gBAAgB,OAAO;CACtD,SAAS;CACT,WAAW;CACX,WAAW;CACX,QAAQ;CACR,eAAe;CACf,OAAO;CACR,CAAC;AAEF,IAAM,uBAAuB,OAAO,gBAAgB,UAAU;CAC5D,eAAe;CACf,YAAY;CACZ,OAAO;CAEP,UAAU,EACR,MAAM;EACJ,KAAK;GACH,UAAU;GACV,YAAY;GACb;EACD,KAAK,EACH,UAAU,MACX;EACD,KAAK,EACH,UAAU,MACX;EACD,KAAK,EACH,UAAU,MACX;EACD,KAAK,EACH,UAAU,MACX;EACD,KAAK,EACH,UAAU,MACX;EACF,EACF;CACD,iBAAiB,EACf,MAAM,KACP;CACF,CAAC;AAaF,IAAa,SAAS,MAAM,YACzB,EAAE,KAAK,KAAK,UAAU,MAAM,SAAS,OAAO,KAAK,GAAG,SAAS,iBAAiB;
|
|
1
|
+
{"version":3,"file":"Avatar.js","names":[],"sources":["../../../components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\n\nconst StyledAvatar = styled(AvatarPrimitive.Root, {\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign: 'middle',\n overflow: 'hidden',\n userSelect: 'none',\n boxSizing: 'border-box',\n display: 'flex',\n flexShrink: 0,\n position: 'relative',\n border: 'none',\n fontFamily: 'inherit',\n lineHeight: '1',\n margin: '0',\n outline: 'none',\n padding: '0',\n fontWeight: '$medium',\n color: '$hiContrast',\n\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: 'inherit',\n boxShadow: 'inset 0px 0px 1px rgba(0, 0, 0, 0.12)',\n },\n\n variants: {\n size: {\n '1': {\n width: '$3',\n height: '$3',\n },\n '2': {\n width: '$5',\n height: '$5',\n },\n '3': {\n width: '$6',\n height: '$6',\n },\n '4': {\n width: '$7',\n height: '$7',\n },\n '5': {\n width: '$8',\n height: '$8',\n },\n '6': {\n width: '$9',\n height: '$9',\n },\n },\n variant: {\n gray: {\n backgroundColor: '$slate5',\n },\n red: {\n backgroundColor: '$red5',\n },\n purple: {\n backgroundColor: '$purple5',\n },\n blue: {\n backgroundColor: '$blue5',\n },\n green: {\n backgroundColor: '$green5',\n },\n orange: {\n backgroundColor: '$orange5',\n },\n },\n shape: {\n square: {\n borderRadius: '$2',\n },\n circle: {\n borderRadius: '50%',\n },\n },\n },\n defaultVariants: {\n size: '2',\n variant: 'gray',\n shape: 'circle',\n },\n});\n\nconst StyledAvatarImage = styled(AvatarPrimitive.Image, {\n display: 'flex',\n objectFit: 'cover',\n boxSizing: 'border-box',\n height: '100%',\n verticalAlign: 'middle',\n width: '100%',\n});\n\nconst StyledAvatarFallback = styled(AvatarPrimitive.Fallback, {\n textTransform: 'uppercase',\n fontFamily: '$rubik',\n color: '$deepBlue10',\n\n variants: {\n size: {\n '1': {\n fontSize: '10px',\n lineHeight: '15px',\n },\n '2': {\n fontSize: '$3',\n },\n '3': {\n fontSize: '$6',\n },\n '4': {\n fontSize: '$7',\n },\n '5': {\n fontSize: '$8',\n },\n '6': {\n fontSize: '$9',\n },\n },\n },\n defaultVariants: {\n size: '2',\n },\n});\n\ntype AvatarVariants = VariantProps<typeof StyledAvatar>;\ntype AvatarPrimitiveProps = Omit<React.ComponentProps<typeof AvatarPrimitive.Root>, 'as'>;\ntype AvatarOwnProps = AvatarPrimitiveProps &\n AvatarVariants & {\n css?: CSS;\n alt?: string;\n src?: string;\n fallback?: React.ReactNode;\n // status?: StatusColors['variant'];\n };\n\nexport const Avatar = React.forwardRef<React.ElementRef<typeof StyledAvatar>, AvatarOwnProps>(\n ({ alt, src, fallback, size, variant, shape, css, ...props }, forwardedRef) => {\n return (\n <Box\n css={{\n ...css,\n position: 'relative',\n height: 'fit-content',\n width: 'fit-content',\n }}\n >\n <StyledAvatar {...props} ref={forwardedRef} size={size} variant={variant} shape={shape}>\n <StyledAvatarImage alt={alt} src={src} />\n <StyledAvatarFallback size={size}>{fallback}</StyledAvatarFallback>\n </StyledAvatar>\n </Box>\n );\n }\n);\n"],"mappings":";;;;;;AAMA,IAAM,eAAe,OAAO,gBAAgB,MAAM;CAChD,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,UAAU;CACV,YAAY;CACZ,WAAW;CACX,SAAS;CACT,YAAY;CACZ,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,YAAY;CACZ,OAAO;CAEP,aAAa;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;EACd,WAAW;EACZ;CAED,UAAU;EACR,MAAM;GACJ,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACD,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACD,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACD,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACD,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACD,KAAK;IACH,OAAO;IACP,QAAQ;IACT;GACF;EACD,SAAS;GACP,MAAM,EACJ,iBAAiB,WAClB;GACD,KAAK,EACH,iBAAiB,SAClB;GACD,QAAQ,EACN,iBAAiB,YAClB;GACD,MAAM,EACJ,iBAAiB,UAClB;GACD,OAAO,EACL,iBAAiB,WAClB;GACD,QAAQ,EACN,iBAAiB,YAClB;GACF;EACD,OAAO;GACL,QAAQ,EACN,cAAc,MACf;GACD,QAAQ,EACN,cAAc,OACf;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,SAAS;EACT,OAAO;EACR;CACF,CAAC;AAEF,IAAM,oBAAoB,OAAO,gBAAgB,OAAO;CACtD,SAAS;CACT,WAAW;CACX,WAAW;CACX,QAAQ;CACR,eAAe;CACf,OAAO;CACR,CAAC;AAEF,IAAM,uBAAuB,OAAO,gBAAgB,UAAU;CAC5D,eAAe;CACf,YAAY;CACZ,OAAO;CAEP,UAAU,EACR,MAAM;EACJ,KAAK;GACH,UAAU;GACV,YAAY;GACb;EACD,KAAK,EACH,UAAU,MACX;EACD,KAAK,EACH,UAAU,MACX;EACD,KAAK,EACH,UAAU,MACX;EACD,KAAK,EACH,UAAU,MACX;EACD,KAAK,EACH,UAAU,MACX;EACF,EACF;CACD,iBAAiB,EACf,MAAM,KACP;CACF,CAAC;AAaF,IAAa,SAAS,MAAM,YACzB,EAAE,KAAK,KAAK,UAAU,MAAM,SAAS,OAAO,KAAK,GAAG,SAAS,iBAAiB;CAC7E,OACE,oBAAC,KAAD;EACE,KAAK;GACH,GAAG;GACH,UAAU;GACV,QAAQ;GACR,OAAO;GACR;YAED,qBAAC,cAAD;GAAc,GAAI;GAAO,KAAK;GAAoB;GAAe;GAAgB;aAAjF,CACE,oBAAC,mBAAD;IAAwB;IAAU;IAAO,CAAA,EACzC,oBAAC,sBAAD;IAA4B;cAAO;IAAgC,CAAA,CACtD;;EACX,CAAA;EAGX"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.vanilla.cjs","names":[],"sources":["../../../components/Avatar/Avatar.vanilla.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport React, { forwardRef } from 'react';\n\nimport { CSSProps } from '../../styles/cssProps';\nimport { BoxVanilla } from '../Box/Box.vanilla';\nimport { avatarFallbackRecipe, avatarImage, avatarRecipe } from './Avatar.vanilla.css';\n\ntype AvatarRecipeVariants = NonNullable<RecipeVariants<typeof avatarRecipe>>;\n\ninterface AvatarOwnProps extends AvatarRecipeVariants, CSSProps {\n alt?: string;\n src?: string;\n fallback?: React.ReactNode;\n}\n\nexport type AvatarVanillaProps = Omit<\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n keyof AvatarOwnProps\n> &\n AvatarOwnProps;\n\nconst AvatarVanillaComponent = forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Root>,\n AvatarVanillaProps\n>(({ alt, src, fallback, size, variant, shape, css, style, ...props }, ref) => {\n const recipeClass = avatarRecipe({ size, variant, shape });\n const fallbackRecipeClass = avatarFallbackRecipe({ size });\n\n // This CSS will be processed by the Box component\n const wrapperCss = {\n ...css,\n position: 'relative' as const,\n height: 'fit-content' as const,\n width: 'fit-content' as const,\n };\n\n return (\n <BoxVanilla css={wrapperCss} style={style}>\n <AvatarPrimitive.Root ref={ref} className={recipeClass} {...props}>\n <AvatarPrimitive.Image className={avatarImage} alt={alt} src={src} />\n <AvatarPrimitive.Fallback className={fallbackRecipeClass}>\n {fallback}\n </AvatarPrimitive.Fallback>\n </AvatarPrimitive.Root>\n </BoxVanilla>\n );\n});\n\nAvatarVanillaComponent.displayName = 'AvatarVanilla';\n\nexport const AvatarVanilla = AvatarVanillaComponent;\n"],"mappings":";;;;;;;;;AAsBA,IAAM,0BAAA,GAAA,MAAA,aAGH,EAAE,KAAK,KAAK,UAAU,MAAM,SAAS,OAAO,KAAK,OAAO,GAAG,SAAS,QAAQ;CAC7E,MAAM,cAAc,2BAAA,aAAa;EAAE;EAAM;EAAS;EAAO,CAAC;CAC1D,MAAM,sBAAsB,2BAAA,qBAAqB,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Avatar.vanilla.cjs","names":[],"sources":["../../../components/Avatar/Avatar.vanilla.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport React, { forwardRef } from 'react';\n\nimport { CSSProps } from '../../styles/cssProps';\nimport { BoxVanilla } from '../Box/Box.vanilla';\nimport { avatarFallbackRecipe, avatarImage, avatarRecipe } from './Avatar.vanilla.css';\n\ntype AvatarRecipeVariants = NonNullable<RecipeVariants<typeof avatarRecipe>>;\n\ninterface AvatarOwnProps extends AvatarRecipeVariants, CSSProps {\n alt?: string;\n src?: string;\n fallback?: React.ReactNode;\n}\n\nexport type AvatarVanillaProps = Omit<\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n keyof AvatarOwnProps\n> &\n AvatarOwnProps;\n\nconst AvatarVanillaComponent = forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Root>,\n AvatarVanillaProps\n>(({ alt, src, fallback, size, variant, shape, css, style, ...props }, ref) => {\n const recipeClass = avatarRecipe({ size, variant, shape });\n const fallbackRecipeClass = avatarFallbackRecipe({ size });\n\n // This CSS will be processed by the Box component\n const wrapperCss = {\n ...css,\n position: 'relative' as const,\n height: 'fit-content' as const,\n width: 'fit-content' as const,\n };\n\n return (\n <BoxVanilla css={wrapperCss} style={style}>\n <AvatarPrimitive.Root ref={ref} className={recipeClass} {...props}>\n <AvatarPrimitive.Image className={avatarImage} alt={alt} src={src} />\n <AvatarPrimitive.Fallback className={fallbackRecipeClass}>\n {fallback}\n </AvatarPrimitive.Fallback>\n </AvatarPrimitive.Root>\n </BoxVanilla>\n );\n});\n\nAvatarVanillaComponent.displayName = 'AvatarVanilla';\n\nexport const AvatarVanilla = AvatarVanillaComponent;\n"],"mappings":";;;;;;;;;AAsBA,IAAM,0BAAA,GAAA,MAAA,aAGH,EAAE,KAAK,KAAK,UAAU,MAAM,SAAS,OAAO,KAAK,OAAO,GAAG,SAAS,QAAQ;CAC7E,MAAM,cAAc,2BAAA,aAAa;EAAE;EAAM;EAAS;EAAO,CAAC;CAC1D,MAAM,sBAAsB,2BAAA,qBAAqB,EAAE,MAAM,CAAC;CAU1D,OACE,iBAAA,GAAA,kBAAA,KAAC,oBAAA,YAAD;EAAY,KAAK;GAPjB,GAAG;GACH,UAAU;GACV,QAAQ;GACR,OAAO;GAIU;EAAmB;YAClC,iBAAA,GAAA,kBAAA,MAAC,uBAAgB,MAAjB;GAA2B;GAAK,WAAW;GAAa,GAAI;aAA5D,CACE,iBAAA,GAAA,kBAAA,KAAC,uBAAgB,OAAjB;IAAuB,WAAW,2BAAA;IAAkB;IAAU;IAAO,CAAA,EACrE,iBAAA,GAAA,kBAAA,KAAC,uBAAgB,UAAjB;IAA0B,WAAW;cAClC;IACwB,CAAA,CACN;;EACZ,CAAA;EAEf;AAEF,uBAAuB,cAAc;AAErC,IAAa,gBAAgB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.vanilla.js","names":[],"sources":["../../../components/Avatar/Avatar.vanilla.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport React, { forwardRef } from 'react';\n\nimport { CSSProps } from '../../styles/cssProps';\nimport { BoxVanilla } from '../Box/Box.vanilla';\nimport { avatarFallbackRecipe, avatarImage, avatarRecipe } from './Avatar.vanilla.css';\n\ntype AvatarRecipeVariants = NonNullable<RecipeVariants<typeof avatarRecipe>>;\n\ninterface AvatarOwnProps extends AvatarRecipeVariants, CSSProps {\n alt?: string;\n src?: string;\n fallback?: React.ReactNode;\n}\n\nexport type AvatarVanillaProps = Omit<\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n keyof AvatarOwnProps\n> &\n AvatarOwnProps;\n\nconst AvatarVanillaComponent = forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Root>,\n AvatarVanillaProps\n>(({ alt, src, fallback, size, variant, shape, css, style, ...props }, ref) => {\n const recipeClass = avatarRecipe({ size, variant, shape });\n const fallbackRecipeClass = avatarFallbackRecipe({ size });\n\n // This CSS will be processed by the Box component\n const wrapperCss = {\n ...css,\n position: 'relative' as const,\n height: 'fit-content' as const,\n width: 'fit-content' as const,\n };\n\n return (\n <BoxVanilla css={wrapperCss} style={style}>\n <AvatarPrimitive.Root ref={ref} className={recipeClass} {...props}>\n <AvatarPrimitive.Image className={avatarImage} alt={alt} src={src} />\n <AvatarPrimitive.Fallback className={fallbackRecipeClass}>\n {fallback}\n </AvatarPrimitive.Fallback>\n </AvatarPrimitive.Root>\n </BoxVanilla>\n );\n});\n\nAvatarVanillaComponent.displayName = 'AvatarVanilla';\n\nexport const AvatarVanilla = AvatarVanillaComponent;\n"],"mappings":";;;;;;AAsBA,IAAM,yBAAyB,YAG5B,EAAE,KAAK,KAAK,UAAU,MAAM,SAAS,OAAO,KAAK,OAAO,GAAG,SAAS,QAAQ;CAC7E,MAAM,cAAc,aAAa;EAAE;EAAM;EAAS;EAAO,CAAC;CAC1D,MAAM,sBAAsB,qBAAqB,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Avatar.vanilla.js","names":[],"sources":["../../../components/Avatar/Avatar.vanilla.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport React, { forwardRef } from 'react';\n\nimport { CSSProps } from '../../styles/cssProps';\nimport { BoxVanilla } from '../Box/Box.vanilla';\nimport { avatarFallbackRecipe, avatarImage, avatarRecipe } from './Avatar.vanilla.css';\n\ntype AvatarRecipeVariants = NonNullable<RecipeVariants<typeof avatarRecipe>>;\n\ninterface AvatarOwnProps extends AvatarRecipeVariants, CSSProps {\n alt?: string;\n src?: string;\n fallback?: React.ReactNode;\n}\n\nexport type AvatarVanillaProps = Omit<\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n keyof AvatarOwnProps\n> &\n AvatarOwnProps;\n\nconst AvatarVanillaComponent = forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Root>,\n AvatarVanillaProps\n>(({ alt, src, fallback, size, variant, shape, css, style, ...props }, ref) => {\n const recipeClass = avatarRecipe({ size, variant, shape });\n const fallbackRecipeClass = avatarFallbackRecipe({ size });\n\n // This CSS will be processed by the Box component\n const wrapperCss = {\n ...css,\n position: 'relative' as const,\n height: 'fit-content' as const,\n width: 'fit-content' as const,\n };\n\n return (\n <BoxVanilla css={wrapperCss} style={style}>\n <AvatarPrimitive.Root ref={ref} className={recipeClass} {...props}>\n <AvatarPrimitive.Image className={avatarImage} alt={alt} src={src} />\n <AvatarPrimitive.Fallback className={fallbackRecipeClass}>\n {fallback}\n </AvatarPrimitive.Fallback>\n </AvatarPrimitive.Root>\n </BoxVanilla>\n );\n});\n\nAvatarVanillaComponent.displayName = 'AvatarVanilla';\n\nexport const AvatarVanilla = AvatarVanillaComponent;\n"],"mappings":";;;;;;AAsBA,IAAM,yBAAyB,YAG5B,EAAE,KAAK,KAAK,UAAU,MAAM,SAAS,OAAO,KAAK,OAAO,GAAG,SAAS,QAAQ;CAC7E,MAAM,cAAc,aAAa;EAAE;EAAM;EAAS;EAAO,CAAC;CAC1D,MAAM,sBAAsB,qBAAqB,EAAE,MAAM,CAAC;CAU1D,OACE,oBAAC,YAAD;EAAY,KAAK;GAPjB,GAAG;GACH,UAAU;GACV,QAAQ;GACR,OAAO;GAIU;EAAmB;YAClC,qBAAC,gBAAgB,MAAjB;GAA2B;GAAK,WAAW;GAAa,GAAI;aAA5D,CACE,oBAAC,gBAAgB,OAAjB;IAAuB,WAAW;IAAkB;IAAU;IAAO,CAAA,EACrE,oBAAC,gBAAgB,UAAjB;IAA0B,WAAW;cAClC;IACwB,CAAA,CACN;;EACZ,CAAA;EAEf;AAEF,uBAAuB,cAAc;AAErC,IAAa,gBAAgB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.cjs","names":[],"sources":["../../../components/Badge/Badge.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { COLORS } from './Badge.vanilla';\n\ntype COLOR_VALUES = (typeof COLORS)[number];\n\nconst getColorBadgeStyles = (color: COLOR_VALUES) => ({\n bc: `$${color}6`,\n color: `$${color}10`,\n border: `1px solid $${color}10`,\n});\n\ntype ColorVariants = Record<COLOR_VALUES, { bc: string; color: string }>;\nconst colorVariants: ColorVariants = COLORS.reduce(\n (variants, color) => ({\n ...variants,\n [color]: getColorBadgeStyles(color),\n }),\n {} as ColorVariants,\n);\n\nconst interactiveColorVariants: ColorVariants = COLORS.reduce(\n (variants, color) => ({\n ...variants,\n [color]: {\n ...getColorBadgeStyles(color),\n },\n }),\n {} as ColorVariants,\n);\n\nconst alphaColorCompoundVariants = COLORS.map((color) => ({\n alphaBg: true,\n variant: color,\n css: { bc: `$${color}A6` },\n}));\n\nconst BADGE_BASE_STYLES = {\n // Reset\n alignItems: 'center',\n appearance: 'none',\n border: 'none',\n boxSizing: 'border-box',\n display: 'inline-flex',\n flexShrink: 0,\n fontFamily: '$rubik',\n fontWeight: '$medium',\n justifyContent: 'center',\n lineHeight: '1',\n verticalAlign: 'middle',\n outline: 'none',\n padding: '0',\n textDecoration: 'none',\n userSelect: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n borderRadius: '$pill',\n whiteSpace: 'nowrap',\n fontVariantNumeric: 'tabular-nums',\n position: 'relative',\n\n '&:disabled': {\n backgroundColor: '$slate3',\n pointerEvents: 'none',\n color: '$slate8',\n },\n variants: {\n size: {\n small: {\n height: '$4',\n px: '$2',\n fontSize: '$2',\n },\n large: {\n height: '$5',\n px: '$3',\n fontSize: '$3',\n },\n },\n variant: colorVariants,\n alphaBg: {\n true: {},\n },\n borderless: {\n true: {\n border: 'none',\n },\n },\n },\n compoundVariants: alphaColorCompoundVariants,\n defaultVariants: {\n size: 'small',\n variant: 'gray',\n borderless: false,\n },\n};\n\nconst StyledSpanBadge = styled('span', BADGE_BASE_STYLES);\nconst StyledSpanBadgeSlot = styled(Slot, StyledSpanBadge);\n\nconst StyledButtonBadge = styled('button', BADGE_BASE_STYLES, {\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n borderRadius: 'inherit',\n },\n '&:focus-visible': {\n outline: '2px solid $primary',\n },\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: '$badgeInteractiveBackgroundHover',\n },\n },\n '&:active': {\n '&::before': {\n backgroundColor: '$badgeInteractiveBackgroundActive',\n },\n },\n\n variants: {\n variant: interactiveColorVariants,\n borderless: {\n true: {\n border: 'none',\n },\n },\n },\n});\nconst StyledButtonBadgeSlot = styled(Slot, StyledButtonBadge);\n\ntype BadgeProps = ComponentProps<typeof StyledButtonBadge> &\n VariantProps<typeof StyledButtonBadge> & {\n asChild?: boolean;\n interactive?: boolean;\n };\n\nexport const Badge = React.forwardRef<React.ElementRef<typeof StyledButtonBadge>, BadgeProps>(\n ({ interactive, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => {\n if (interactive) {\n return asChild ? StyledButtonBadgeSlot : StyledButtonBadge;\n }\n return asChild ? StyledSpanBadgeSlot : StyledSpanBadge;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [asChild]);\n\n return <Component {...props} ref={forwardedRef} />;\n },\n);\n"],"mappings":";;;;;;;;AAQA,IAAM,uBAAuB,WAAyB;CACpD,IAAI,IAAI,MAAM;CACd,OAAO,IAAI,MAAM;CACjB,QAAQ,cAAc,MAAM;CAC7B;AAGD,IAAM,gBAA+B,sBAAA,OAAO,QACzC,UAAU,WAAW;CACpB,GAAG;EACF,QAAQ,oBAAoB,MAAM;CACpC,GACD,EAAE,CACH;AAED,IAAM,2BAA0C,sBAAA,OAAO,QACpD,UAAU,WAAW;CACpB,GAAG;EACF,QAAQ,EACP,GAAG,oBAAoB,MAAM,EAC9B;CACF,GACD,EAAE,CACH;AAED,IAAM,6BAA6B,sBAAA,OAAO,KAAK,WAAW;CACxD,SAAS;CACT,SAAS;CACT,KAAK,EAAE,IAAI,IAAI,MAAM,KAAK;CAC3B,EAAE;AAEH,IAAM,oBAAoB;CAExB,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,SAAS;CACT,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACZ,eAAe;CACf,SAAS;CACT,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,yBAAyB;CACzB,cAAc;CACd,YAAY;CACZ,oBAAoB;CACpB,UAAU;CAEV,cAAc;EACZ,iBAAiB;EACjB,eAAe;EACf,OAAO;EACR;CACD,UAAU;EACR,MAAM;GACJ,OAAO;IACL,QAAQ;IACR,IAAI;IACJ,UAAU;IACX;GACD,OAAO;IACL,QAAQ;IACR,IAAI;IACJ,UAAU;IACX;GACF;EACD,SAAS;EACT,SAAS,EACP,MAAM,EAAE,EACT;EACD,YAAY,EACV,MAAM,EACJ,QAAQ,QACT,EACF;EACF;CACD,kBAAkB;CAClB,iBAAiB;EACf,MAAM;EACN,SAAS;EACT,YAAY;EACb;CACF;AAED,IAAM,kBAAkB,wBAAA,OAAO,QAAQ,kBAAkB;AACzD,IAAM,sBAAsB,wBAAA,OAAO,qBAAA,MAAM,gBAAgB;AAEzD,IAAM,oBAAoB,wBAAA,OAAO,UAAU,mBAAmB;CAC5D,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,cAAc;EACf;CACD,mBAAmB,EACjB,SAAS,sBACV;CACD,WAAW;EACT,QAAQ;EACR,aAAa,EACX,iBAAiB,oCAClB;EACF;CACD,YAAY,EACV,aAAa,EACX,iBAAiB,qCAClB,EACF;CAED,UAAU;EACR,SAAS;EACT,YAAY,EACV,MAAM,EACJ,QAAQ,QACT,EACF;EACF;CACF,CAAC;AACF,IAAM,wBAAwB,wBAAA,OAAO,qBAAA,MAAM,kBAAkB;AAQ7D,IAAa,QAAQ,MAAA,QAAM,YACxB,EAAE,aAAa,SAAS,GAAG,SAAS,iBAAiB;
|
|
1
|
+
{"version":3,"file":"Badge.cjs","names":[],"sources":["../../../components/Badge/Badge.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { COLORS } from './Badge.vanilla';\n\ntype COLOR_VALUES = (typeof COLORS)[number];\n\nconst getColorBadgeStyles = (color: COLOR_VALUES) => ({\n bc: `$${color}6`,\n color: `$${color}10`,\n border: `1px solid $${color}10`,\n});\n\ntype ColorVariants = Record<COLOR_VALUES, { bc: string; color: string }>;\nconst colorVariants: ColorVariants = COLORS.reduce(\n (variants, color) => ({\n ...variants,\n [color]: getColorBadgeStyles(color),\n }),\n {} as ColorVariants,\n);\n\nconst interactiveColorVariants: ColorVariants = COLORS.reduce(\n (variants, color) => ({\n ...variants,\n [color]: {\n ...getColorBadgeStyles(color),\n },\n }),\n {} as ColorVariants,\n);\n\nconst alphaColorCompoundVariants = COLORS.map((color) => ({\n alphaBg: true,\n variant: color,\n css: { bc: `$${color}A6` },\n}));\n\nconst BADGE_BASE_STYLES = {\n // Reset\n alignItems: 'center',\n appearance: 'none',\n border: 'none',\n boxSizing: 'border-box',\n display: 'inline-flex',\n flexShrink: 0,\n fontFamily: '$rubik',\n fontWeight: '$medium',\n justifyContent: 'center',\n lineHeight: '1',\n verticalAlign: 'middle',\n outline: 'none',\n padding: '0',\n textDecoration: 'none',\n userSelect: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n borderRadius: '$pill',\n whiteSpace: 'nowrap',\n fontVariantNumeric: 'tabular-nums',\n position: 'relative',\n\n '&:disabled': {\n backgroundColor: '$slate3',\n pointerEvents: 'none',\n color: '$slate8',\n },\n variants: {\n size: {\n small: {\n height: '$4',\n px: '$2',\n fontSize: '$2',\n },\n large: {\n height: '$5',\n px: '$3',\n fontSize: '$3',\n },\n },\n variant: colorVariants,\n alphaBg: {\n true: {},\n },\n borderless: {\n true: {\n border: 'none',\n },\n },\n },\n compoundVariants: alphaColorCompoundVariants,\n defaultVariants: {\n size: 'small',\n variant: 'gray',\n borderless: false,\n },\n};\n\nconst StyledSpanBadge = styled('span', BADGE_BASE_STYLES);\nconst StyledSpanBadgeSlot = styled(Slot, StyledSpanBadge);\n\nconst StyledButtonBadge = styled('button', BADGE_BASE_STYLES, {\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n borderRadius: 'inherit',\n },\n '&:focus-visible': {\n outline: '2px solid $primary',\n },\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: '$badgeInteractiveBackgroundHover',\n },\n },\n '&:active': {\n '&::before': {\n backgroundColor: '$badgeInteractiveBackgroundActive',\n },\n },\n\n variants: {\n variant: interactiveColorVariants,\n borderless: {\n true: {\n border: 'none',\n },\n },\n },\n});\nconst StyledButtonBadgeSlot = styled(Slot, StyledButtonBadge);\n\ntype BadgeProps = ComponentProps<typeof StyledButtonBadge> &\n VariantProps<typeof StyledButtonBadge> & {\n asChild?: boolean;\n interactive?: boolean;\n };\n\nexport const Badge = React.forwardRef<React.ElementRef<typeof StyledButtonBadge>, BadgeProps>(\n ({ interactive, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => {\n if (interactive) {\n return asChild ? StyledButtonBadgeSlot : StyledButtonBadge;\n }\n return asChild ? StyledSpanBadgeSlot : StyledSpanBadge;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [asChild]);\n\n return <Component {...props} ref={forwardedRef} />;\n },\n);\n"],"mappings":";;;;;;;;AAQA,IAAM,uBAAuB,WAAyB;CACpD,IAAI,IAAI,MAAM;CACd,OAAO,IAAI,MAAM;CACjB,QAAQ,cAAc,MAAM;CAC7B;AAGD,IAAM,gBAA+B,sBAAA,OAAO,QACzC,UAAU,WAAW;CACpB,GAAG;EACF,QAAQ,oBAAoB,MAAM;CACpC,GACD,EAAE,CACH;AAED,IAAM,2BAA0C,sBAAA,OAAO,QACpD,UAAU,WAAW;CACpB,GAAG;EACF,QAAQ,EACP,GAAG,oBAAoB,MAAM,EAC9B;CACF,GACD,EAAE,CACH;AAED,IAAM,6BAA6B,sBAAA,OAAO,KAAK,WAAW;CACxD,SAAS;CACT,SAAS;CACT,KAAK,EAAE,IAAI,IAAI,MAAM,KAAK;CAC3B,EAAE;AAEH,IAAM,oBAAoB;CAExB,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,SAAS;CACT,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACZ,eAAe;CACf,SAAS;CACT,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,yBAAyB;CACzB,cAAc;CACd,YAAY;CACZ,oBAAoB;CACpB,UAAU;CAEV,cAAc;EACZ,iBAAiB;EACjB,eAAe;EACf,OAAO;EACR;CACD,UAAU;EACR,MAAM;GACJ,OAAO;IACL,QAAQ;IACR,IAAI;IACJ,UAAU;IACX;GACD,OAAO;IACL,QAAQ;IACR,IAAI;IACJ,UAAU;IACX;GACF;EACD,SAAS;EACT,SAAS,EACP,MAAM,EAAE,EACT;EACD,YAAY,EACV,MAAM,EACJ,QAAQ,QACT,EACF;EACF;CACD,kBAAkB;CAClB,iBAAiB;EACf,MAAM;EACN,SAAS;EACT,YAAY;EACb;CACF;AAED,IAAM,kBAAkB,wBAAA,OAAO,QAAQ,kBAAkB;AACzD,IAAM,sBAAsB,wBAAA,OAAO,qBAAA,MAAM,gBAAgB;AAEzD,IAAM,oBAAoB,wBAAA,OAAO,UAAU,mBAAmB;CAC5D,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,cAAc;EACf;CACD,mBAAmB,EACjB,SAAS,sBACV;CACD,WAAW;EACT,QAAQ;EACR,aAAa,EACX,iBAAiB,oCAClB;EACF;CACD,YAAY,EACV,aAAa,EACX,iBAAiB,qCAClB,EACF;CAED,UAAU;EACR,SAAS;EACT,YAAY,EACV,MAAM,EACJ,QAAQ,QACT,EACF;EACF;CACF,CAAC;AACF,IAAM,wBAAwB,wBAAA,OAAO,qBAAA,MAAM,kBAAkB;AAQ7D,IAAa,QAAQ,MAAA,QAAM,YACxB,EAAE,aAAa,SAAS,GAAG,SAAS,iBAAiB;CASpD,OAAO,iBAAA,GAAA,kBAAA,MAAA,GAAA,MAAA,eARyB;EAC9B,IAAI,aACF,OAAO,UAAU,wBAAwB;EAE3C,OAAO,UAAU,sBAAsB;IAEtC,CAAC,QAAQ,CAEJ,EAAD;EAAW,GAAI;EAAO,KAAK;EAAgB,CAAA;EAErD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","names":[],"sources":["../../../components/Badge/Badge.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { COLORS } from './Badge.vanilla';\n\ntype COLOR_VALUES = (typeof COLORS)[number];\n\nconst getColorBadgeStyles = (color: COLOR_VALUES) => ({\n bc: `$${color}6`,\n color: `$${color}10`,\n border: `1px solid $${color}10`,\n});\n\ntype ColorVariants = Record<COLOR_VALUES, { bc: string; color: string }>;\nconst colorVariants: ColorVariants = COLORS.reduce(\n (variants, color) => ({\n ...variants,\n [color]: getColorBadgeStyles(color),\n }),\n {} as ColorVariants,\n);\n\nconst interactiveColorVariants: ColorVariants = COLORS.reduce(\n (variants, color) => ({\n ...variants,\n [color]: {\n ...getColorBadgeStyles(color),\n },\n }),\n {} as ColorVariants,\n);\n\nconst alphaColorCompoundVariants = COLORS.map((color) => ({\n alphaBg: true,\n variant: color,\n css: { bc: `$${color}A6` },\n}));\n\nconst BADGE_BASE_STYLES = {\n // Reset\n alignItems: 'center',\n appearance: 'none',\n border: 'none',\n boxSizing: 'border-box',\n display: 'inline-flex',\n flexShrink: 0,\n fontFamily: '$rubik',\n fontWeight: '$medium',\n justifyContent: 'center',\n lineHeight: '1',\n verticalAlign: 'middle',\n outline: 'none',\n padding: '0',\n textDecoration: 'none',\n userSelect: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n borderRadius: '$pill',\n whiteSpace: 'nowrap',\n fontVariantNumeric: 'tabular-nums',\n position: 'relative',\n\n '&:disabled': {\n backgroundColor: '$slate3',\n pointerEvents: 'none',\n color: '$slate8',\n },\n variants: {\n size: {\n small: {\n height: '$4',\n px: '$2',\n fontSize: '$2',\n },\n large: {\n height: '$5',\n px: '$3',\n fontSize: '$3',\n },\n },\n variant: colorVariants,\n alphaBg: {\n true: {},\n },\n borderless: {\n true: {\n border: 'none',\n },\n },\n },\n compoundVariants: alphaColorCompoundVariants,\n defaultVariants: {\n size: 'small',\n variant: 'gray',\n borderless: false,\n },\n};\n\nconst StyledSpanBadge = styled('span', BADGE_BASE_STYLES);\nconst StyledSpanBadgeSlot = styled(Slot, StyledSpanBadge);\n\nconst StyledButtonBadge = styled('button', BADGE_BASE_STYLES, {\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n borderRadius: 'inherit',\n },\n '&:focus-visible': {\n outline: '2px solid $primary',\n },\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: '$badgeInteractiveBackgroundHover',\n },\n },\n '&:active': {\n '&::before': {\n backgroundColor: '$badgeInteractiveBackgroundActive',\n },\n },\n\n variants: {\n variant: interactiveColorVariants,\n borderless: {\n true: {\n border: 'none',\n },\n },\n },\n});\nconst StyledButtonBadgeSlot = styled(Slot, StyledButtonBadge);\n\ntype BadgeProps = ComponentProps<typeof StyledButtonBadge> &\n VariantProps<typeof StyledButtonBadge> & {\n asChild?: boolean;\n interactive?: boolean;\n };\n\nexport const Badge = React.forwardRef<React.ElementRef<typeof StyledButtonBadge>, BadgeProps>(\n ({ interactive, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => {\n if (interactive) {\n return asChild ? StyledButtonBadgeSlot : StyledButtonBadge;\n }\n return asChild ? StyledSpanBadgeSlot : StyledSpanBadge;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [asChild]);\n\n return <Component {...props} ref={forwardedRef} />;\n },\n);\n"],"mappings":";;;;;;AAQA,IAAM,uBAAuB,WAAyB;CACpD,IAAI,IAAI,MAAM;CACd,OAAO,IAAI,MAAM;CACjB,QAAQ,cAAc,MAAM;CAC7B;AAGD,IAAM,gBAA+B,OAAO,QACzC,UAAU,WAAW;CACpB,GAAG;EACF,QAAQ,oBAAoB,MAAM;CACpC,GACD,EAAE,CACH;AAED,IAAM,2BAA0C,OAAO,QACpD,UAAU,WAAW;CACpB,GAAG;EACF,QAAQ,EACP,GAAG,oBAAoB,MAAM,EAC9B;CACF,GACD,EAAE,CACH;AAED,IAAM,6BAA6B,OAAO,KAAK,WAAW;CACxD,SAAS;CACT,SAAS;CACT,KAAK,EAAE,IAAI,IAAI,MAAM,KAAK;CAC3B,EAAE;AAEH,IAAM,oBAAoB;CAExB,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,SAAS;CACT,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACZ,eAAe;CACf,SAAS;CACT,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,yBAAyB;CACzB,cAAc;CACd,YAAY;CACZ,oBAAoB;CACpB,UAAU;CAEV,cAAc;EACZ,iBAAiB;EACjB,eAAe;EACf,OAAO;EACR;CACD,UAAU;EACR,MAAM;GACJ,OAAO;IACL,QAAQ;IACR,IAAI;IACJ,UAAU;IACX;GACD,OAAO;IACL,QAAQ;IACR,IAAI;IACJ,UAAU;IACX;GACF;EACD,SAAS;EACT,SAAS,EACP,MAAM,EAAE,EACT;EACD,YAAY,EACV,MAAM,EACJ,QAAQ,QACT,EACF;EACF;CACD,kBAAkB;CAClB,iBAAiB;EACf,MAAM;EACN,SAAS;EACT,YAAY;EACb;CACF;AAED,IAAM,kBAAkB,OAAO,QAAQ,kBAAkB;AACzD,IAAM,sBAAsB,OAAO,MAAM,gBAAgB;AAEzD,IAAM,oBAAoB,OAAO,UAAU,mBAAmB;CAC5D,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,cAAc;EACf;CACD,mBAAmB,EACjB,SAAS,sBACV;CACD,WAAW;EACT,QAAQ;EACR,aAAa,EACX,iBAAiB,oCAClB;EACF;CACD,YAAY,EACV,aAAa,EACX,iBAAiB,qCAClB,EACF;CAED,UAAU;EACR,SAAS;EACT,YAAY,EACV,MAAM,EACJ,QAAQ,QACT,EACF;EACF;CACF,CAAC;AACF,IAAM,wBAAwB,OAAO,MAAM,kBAAkB;AAQ7D,IAAa,QAAQ,MAAM,YACxB,EAAE,aAAa,SAAS,GAAG,SAAS,iBAAiB;
|
|
1
|
+
{"version":3,"file":"Badge.js","names":[],"sources":["../../../components/Badge/Badge.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { COLORS } from './Badge.vanilla';\n\ntype COLOR_VALUES = (typeof COLORS)[number];\n\nconst getColorBadgeStyles = (color: COLOR_VALUES) => ({\n bc: `$${color}6`,\n color: `$${color}10`,\n border: `1px solid $${color}10`,\n});\n\ntype ColorVariants = Record<COLOR_VALUES, { bc: string; color: string }>;\nconst colorVariants: ColorVariants = COLORS.reduce(\n (variants, color) => ({\n ...variants,\n [color]: getColorBadgeStyles(color),\n }),\n {} as ColorVariants,\n);\n\nconst interactiveColorVariants: ColorVariants = COLORS.reduce(\n (variants, color) => ({\n ...variants,\n [color]: {\n ...getColorBadgeStyles(color),\n },\n }),\n {} as ColorVariants,\n);\n\nconst alphaColorCompoundVariants = COLORS.map((color) => ({\n alphaBg: true,\n variant: color,\n css: { bc: `$${color}A6` },\n}));\n\nconst BADGE_BASE_STYLES = {\n // Reset\n alignItems: 'center',\n appearance: 'none',\n border: 'none',\n boxSizing: 'border-box',\n display: 'inline-flex',\n flexShrink: 0,\n fontFamily: '$rubik',\n fontWeight: '$medium',\n justifyContent: 'center',\n lineHeight: '1',\n verticalAlign: 'middle',\n outline: 'none',\n padding: '0',\n textDecoration: 'none',\n userSelect: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n borderRadius: '$pill',\n whiteSpace: 'nowrap',\n fontVariantNumeric: 'tabular-nums',\n position: 'relative',\n\n '&:disabled': {\n backgroundColor: '$slate3',\n pointerEvents: 'none',\n color: '$slate8',\n },\n variants: {\n size: {\n small: {\n height: '$4',\n px: '$2',\n fontSize: '$2',\n },\n large: {\n height: '$5',\n px: '$3',\n fontSize: '$3',\n },\n },\n variant: colorVariants,\n alphaBg: {\n true: {},\n },\n borderless: {\n true: {\n border: 'none',\n },\n },\n },\n compoundVariants: alphaColorCompoundVariants,\n defaultVariants: {\n size: 'small',\n variant: 'gray',\n borderless: false,\n },\n};\n\nconst StyledSpanBadge = styled('span', BADGE_BASE_STYLES);\nconst StyledSpanBadgeSlot = styled(Slot, StyledSpanBadge);\n\nconst StyledButtonBadge = styled('button', BADGE_BASE_STYLES, {\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n borderRadius: 'inherit',\n },\n '&:focus-visible': {\n outline: '2px solid $primary',\n },\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: '$badgeInteractiveBackgroundHover',\n },\n },\n '&:active': {\n '&::before': {\n backgroundColor: '$badgeInteractiveBackgroundActive',\n },\n },\n\n variants: {\n variant: interactiveColorVariants,\n borderless: {\n true: {\n border: 'none',\n },\n },\n },\n});\nconst StyledButtonBadgeSlot = styled(Slot, StyledButtonBadge);\n\ntype BadgeProps = ComponentProps<typeof StyledButtonBadge> &\n VariantProps<typeof StyledButtonBadge> & {\n asChild?: boolean;\n interactive?: boolean;\n };\n\nexport const Badge = React.forwardRef<React.ElementRef<typeof StyledButtonBadge>, BadgeProps>(\n ({ interactive, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => {\n if (interactive) {\n return asChild ? StyledButtonBadgeSlot : StyledButtonBadge;\n }\n return asChild ? StyledSpanBadgeSlot : StyledSpanBadge;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [asChild]);\n\n return <Component {...props} ref={forwardedRef} />;\n },\n);\n"],"mappings":";;;;;;AAQA,IAAM,uBAAuB,WAAyB;CACpD,IAAI,IAAI,MAAM;CACd,OAAO,IAAI,MAAM;CACjB,QAAQ,cAAc,MAAM;CAC7B;AAGD,IAAM,gBAA+B,OAAO,QACzC,UAAU,WAAW;CACpB,GAAG;EACF,QAAQ,oBAAoB,MAAM;CACpC,GACD,EAAE,CACH;AAED,IAAM,2BAA0C,OAAO,QACpD,UAAU,WAAW;CACpB,GAAG;EACF,QAAQ,EACP,GAAG,oBAAoB,MAAM,EAC9B;CACF,GACD,EAAE,CACH;AAED,IAAM,6BAA6B,OAAO,KAAK,WAAW;CACxD,SAAS;CACT,SAAS;CACT,KAAK,EAAE,IAAI,IAAI,MAAM,KAAK;CAC3B,EAAE;AAEH,IAAM,oBAAoB;CAExB,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,SAAS;CACT,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACZ,eAAe;CACf,SAAS;CACT,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,yBAAyB;CACzB,cAAc;CACd,YAAY;CACZ,oBAAoB;CACpB,UAAU;CAEV,cAAc;EACZ,iBAAiB;EACjB,eAAe;EACf,OAAO;EACR;CACD,UAAU;EACR,MAAM;GACJ,OAAO;IACL,QAAQ;IACR,IAAI;IACJ,UAAU;IACX;GACD,OAAO;IACL,QAAQ;IACR,IAAI;IACJ,UAAU;IACX;GACF;EACD,SAAS;EACT,SAAS,EACP,MAAM,EAAE,EACT;EACD,YAAY,EACV,MAAM,EACJ,QAAQ,QACT,EACF;EACF;CACD,kBAAkB;CAClB,iBAAiB;EACf,MAAM;EACN,SAAS;EACT,YAAY;EACb;CACF;AAED,IAAM,kBAAkB,OAAO,QAAQ,kBAAkB;AACzD,IAAM,sBAAsB,OAAO,MAAM,gBAAgB;AAEzD,IAAM,oBAAoB,OAAO,UAAU,mBAAmB;CAC5D,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,cAAc;EACf;CACD,mBAAmB,EACjB,SAAS,sBACV;CACD,WAAW;EACT,QAAQ;EACR,aAAa,EACX,iBAAiB,oCAClB;EACF;CACD,YAAY,EACV,aAAa,EACX,iBAAiB,qCAClB,EACF;CAED,UAAU;EACR,SAAS;EACT,YAAY,EACV,MAAM,EACJ,QAAQ,QACT,EACF;EACF;CACF,CAAC;AACF,IAAM,wBAAwB,OAAO,MAAM,kBAAkB;AAQ7D,IAAa,QAAQ,MAAM,YACxB,EAAE,aAAa,SAAS,GAAG,SAAS,iBAAiB;CASpD,OAAO,oBARW,cAAc;EAC9B,IAAI,aACF,OAAO,UAAU,wBAAwB;EAE3C,OAAO,UAAU,sBAAsB;IAEtC,CAAC,QAAQ,CAEJ,EAAD;EAAW,GAAI;EAAO,KAAK;EAAgB,CAAA;EAErD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.themes.cjs","names":[],"sources":["../../../components/Badge/Badge.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n badgeInteractiveBackgroundActive: Property.Color;\n badgeInteractiveBackgroundHover: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n badgeInteractiveBackgroundActive: tinycolor('black').setAlpha(0.1).toHslString(),\n badgeInteractiveBackgroundHover: tinycolor('black').setAlpha(0.05).toHslString(),\n });\n\n export const getDark: Factory = () => ({\n badgeInteractiveBackgroundActive: tinycolor('black').setAlpha(0.2).toHslString(),\n badgeInteractiveBackgroundHover: tinycolor('black').setAlpha(0.1).toHslString(),\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;
|
|
1
|
+
{"version":3,"file":"Badge.themes.cjs","names":[],"sources":["../../../components/Badge/Badge.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n badgeInteractiveBackgroundActive: Property.Color;\n badgeInteractiveBackgroundHover: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n badgeInteractiveBackgroundActive: tinycolor('black').setAlpha(0.1).toHslString(),\n badgeInteractiveBackgroundHover: tinycolor('black').setAlpha(0.05).toHslString(),\n });\n\n export const getDark: Factory = () => ({\n badgeInteractiveBackgroundActive: tinycolor('black').setAlpha(0.2).toHslString(),\n badgeInteractiveBackgroundHover: tinycolor('black').setAlpha(0.1).toHslString(),\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAQQ,OAAA,kBAA2B;EACtC,mCAAA,GAAA,WAAA,SAA4C,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EAChF,kCAAA,GAAA,WAAA,SAA2C,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACjF;CAEY,OAAA,iBAA0B;EACrC,mCAAA,GAAA,WAAA,SAA4C,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EAChF,kCAAA,GAAA,WAAA,SAA2C,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EAChF;yBACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.themes.js","names":[],"sources":["../../../components/Badge/Badge.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n badgeInteractiveBackgroundActive: Property.Color;\n badgeInteractiveBackgroundHover: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n badgeInteractiveBackgroundActive: tinycolor('black').setAlpha(0.1).toHslString(),\n badgeInteractiveBackgroundHover: tinycolor('black').setAlpha(0.05).toHslString(),\n });\n\n export const getDark: Factory = () => ({\n badgeInteractiveBackgroundActive: tinycolor('black').setAlpha(0.2).toHslString(),\n badgeInteractiveBackgroundHover: tinycolor('black').setAlpha(0.1).toHslString(),\n });\n}\n"],"mappings":";;AAKO,IAAA;;
|
|
1
|
+
{"version":3,"file":"Badge.themes.js","names":[],"sources":["../../../components/Badge/Badge.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n badgeInteractiveBackgroundActive: Property.Color;\n badgeInteractiveBackgroundHover: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n badgeInteractiveBackgroundActive: tinycolor('black').setAlpha(0.1).toHslString(),\n badgeInteractiveBackgroundHover: tinycolor('black').setAlpha(0.05).toHslString(),\n });\n\n export const getDark: Factory = () => ({\n badgeInteractiveBackgroundActive: tinycolor('black').setAlpha(0.2).toHslString(),\n badgeInteractiveBackgroundHover: tinycolor('black').setAlpha(0.1).toHslString(),\n });\n}\n"],"mappings":";;AAKO,IAAA;;CAQQ,OAAA,kBAA2B;EACtC,kCAAkC,UAAU,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EAChF,iCAAiC,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACjF;CAEY,OAAA,iBAA0B;EACrC,kCAAkC,UAAU,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EAChF,iCAAiC,UAAU,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EAChF;yBACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.vanilla.cjs","names":[],"sources":["../../../components/Badge/Badge.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { badgeRecipe, interactiveBadgeRecipe } from './Badge.vanilla.css';\n\nexport const COLORS = ['gray', 'red', 'blue', 'green', 'neon', 'orange', 'purple'] as const;\n\ntype BadgeRecipeVariants = RecipeVariants<typeof badgeRecipe>;\n\ninterface BadgeOwnProps extends Omit<BadgeRecipeVariants, 'color'>, CSSProps {\n interactive?: boolean;\n}\n\nexport type BadgeVanillaProps<C extends ElementType = 'span'> = PolymorphicComponentProps<\n C,\n BadgeOwnProps\n>;\n\ntype BadgeVanillaComponent = PolymorphicComponent<'span', BadgeVanillaProps<ElementType>>;\n\nconst BadgeVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'span'>(\n {\n as,\n interactive,\n className,\n css,\n style,\n size,\n variant,\n alphaBg,\n borderless,\n ...props\n }: BadgeVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || (interactive ? 'button' : 'span');\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipe = interactive ? interactiveBadgeRecipe : badgeRecipe;\n const recipeClass = recipe({ size, variant, alphaBg, borderless });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nBadgeVanillaComponentImpl.displayName = 'BadgeVanilla';\n\nexport const BadgeVanilla = BadgeVanillaComponentImpl as BadgeVanillaComponent;\n"],"mappings":";;;;;;;;AAaA,IAAa,SAAS;CAAC;CAAQ;CAAO;CAAQ;CAAS;CAAQ;CAAU;CAAS;AAelF,IAAM,6BAAA,GAAA,MAAA,aAEF,EACE,IACA,aACA,WACA,KACA,OACA,MACA,SACA,SACA,YACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,OAAO,cAAc,WAAW;CAElD,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAC1B;
|
|
1
|
+
{"version":3,"file":"Badge.vanilla.cjs","names":[],"sources":["../../../components/Badge/Badge.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { badgeRecipe, interactiveBadgeRecipe } from './Badge.vanilla.css';\n\nexport const COLORS = ['gray', 'red', 'blue', 'green', 'neon', 'orange', 'purple'] as const;\n\ntype BadgeRecipeVariants = RecipeVariants<typeof badgeRecipe>;\n\ninterface BadgeOwnProps extends Omit<BadgeRecipeVariants, 'color'>, CSSProps {\n interactive?: boolean;\n}\n\nexport type BadgeVanillaProps<C extends ElementType = 'span'> = PolymorphicComponentProps<\n C,\n BadgeOwnProps\n>;\n\ntype BadgeVanillaComponent = PolymorphicComponent<'span', BadgeVanillaProps<ElementType>>;\n\nconst BadgeVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'span'>(\n {\n as,\n interactive,\n className,\n css,\n style,\n size,\n variant,\n alphaBg,\n borderless,\n ...props\n }: BadgeVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || (interactive ? 'button' : 'span');\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipe = interactive ? interactiveBadgeRecipe : badgeRecipe;\n const recipeClass = recipe({ size, variant, alphaBg, borderless });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nBadgeVanillaComponentImpl.displayName = 'BadgeVanilla';\n\nexport const BadgeVanilla = BadgeVanillaComponentImpl as BadgeVanillaComponent;\n"],"mappings":";;;;;;;;AAaA,IAAa,SAAS;CAAC;CAAQ;CAAO;CAAQ;CAAS;CAAQ;CAAU;CAAS;AAelF,IAAM,6BAAA,GAAA,MAAA,aAEF,EACE,IACA,aACA,WACA,KACA,OACA,MACA,SACA,SACA,YACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,OAAO,cAAc,WAAW;CAElD,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAC1B;CAKD,OACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,IANA,cAAc,0BAAA,yBAAyB,0BAAA,aAC3B;GAAE;GAAM;GAAS;GAAS;GAAY,CAK/C,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,0BAA0B,cAAc;AAExC,IAAa,eAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.vanilla.js","names":[],"sources":["../../../components/Badge/Badge.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { badgeRecipe, interactiveBadgeRecipe } from './Badge.vanilla.css';\n\nexport const COLORS = ['gray', 'red', 'blue', 'green', 'neon', 'orange', 'purple'] as const;\n\ntype BadgeRecipeVariants = RecipeVariants<typeof badgeRecipe>;\n\ninterface BadgeOwnProps extends Omit<BadgeRecipeVariants, 'color'>, CSSProps {\n interactive?: boolean;\n}\n\nexport type BadgeVanillaProps<C extends ElementType = 'span'> = PolymorphicComponentProps<\n C,\n BadgeOwnProps\n>;\n\ntype BadgeVanillaComponent = PolymorphicComponent<'span', BadgeVanillaProps<ElementType>>;\n\nconst BadgeVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'span'>(\n {\n as,\n interactive,\n className,\n css,\n style,\n size,\n variant,\n alphaBg,\n borderless,\n ...props\n }: BadgeVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || (interactive ? 'button' : 'span');\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipe = interactive ? interactiveBadgeRecipe : badgeRecipe;\n const recipeClass = recipe({ size, variant, alphaBg, borderless });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nBadgeVanillaComponentImpl.displayName = 'BadgeVanilla';\n\nexport const BadgeVanilla = BadgeVanillaComponentImpl as BadgeVanillaComponent;\n"],"mappings":";;;;;;;AAaA,IAAa,SAAS;CAAC;CAAQ;CAAO;CAAQ;CAAS;CAAQ;CAAU;CAAS;AAelF,IAAM,4BAA4B,YAE9B,EACE,IACA,aACA,WACA,KACA,OACA,MACA,SACA,SACA,YACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,OAAO,cAAc,WAAW;CAElD,MAAM,EAAE,WAAW,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;
|
|
1
|
+
{"version":3,"file":"Badge.vanilla.js","names":[],"sources":["../../../components/Badge/Badge.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { badgeRecipe, interactiveBadgeRecipe } from './Badge.vanilla.css';\n\nexport const COLORS = ['gray', 'red', 'blue', 'green', 'neon', 'orange', 'purple'] as const;\n\ntype BadgeRecipeVariants = RecipeVariants<typeof badgeRecipe>;\n\ninterface BadgeOwnProps extends Omit<BadgeRecipeVariants, 'color'>, CSSProps {\n interactive?: boolean;\n}\n\nexport type BadgeVanillaProps<C extends ElementType = 'span'> = PolymorphicComponentProps<\n C,\n BadgeOwnProps\n>;\n\ntype BadgeVanillaComponent = PolymorphicComponent<'span', BadgeVanillaProps<ElementType>>;\n\nconst BadgeVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'span'>(\n {\n as,\n interactive,\n className,\n css,\n style,\n size,\n variant,\n alphaBg,\n borderless,\n ...props\n }: BadgeVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || (interactive ? 'button' : 'span');\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipe = interactive ? interactiveBadgeRecipe : badgeRecipe;\n const recipeClass = recipe({ size, variant, alphaBg, borderless });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nBadgeVanillaComponentImpl.displayName = 'BadgeVanilla';\n\nexport const BadgeVanilla = BadgeVanillaComponentImpl as BadgeVanillaComponent;\n"],"mappings":";;;;;;;AAaA,IAAa,SAAS;CAAC;CAAQ;CAAO;CAAQ;CAAS;CAAQ;CAAU;CAAS;AAelF,IAAM,4BAA4B,YAE9B,EACE,IACA,aACA,WACA,KACA,OACA,MACA,SACA,SACA,YACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,OAAO,cAAc,WAAW;CAElD,MAAM,EAAE,WAAW,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;CAKD,OACE,oBAAC,WAAD;EACO;EACL,WAAW,IANA,cAAc,yBAAyB,aAC3B;GAAE;GAAM;GAAS;GAAS;GAAY,CAK/C,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,0BAA0B,cAAc;AAExC,IAAa,eAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Blockquote.vanilla.cjs","names":[],"sources":["../../../components/Blockquote/Blockquote.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { blockquoteRecipe } from './Blockquote.vanilla.css';\n\ntype BlockquoteRecipeVariants = RecipeVariants<typeof blockquoteRecipe>;\n\ninterface BlockquoteOwnProps extends Omit<BlockquoteRecipeVariants, never>, CSSProps {}\n\nexport type BlockquoteVanillaProps<C extends ElementType = 'blockquote'> =\n PolymorphicComponentProps<C, BlockquoteOwnProps>;\n\ntype BlockquoteComponent = PolymorphicComponent<'blockquote', BlockquoteVanillaProps<ElementType>>;\n\nconst BlockquoteVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'blockquote'>(\n {\n as,\n className,\n css,\n style,\n size,\n weight,\n variant,\n gradient,\n transform,\n noWrap,\n ...props\n }: BlockquoteVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as || 'blockquote') as ElementType;\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = blockquoteRecipe({ size, weight, variant, gradient, transform, noWrap });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nBlockquoteVanillaComponentImpl.displayName = 'BlockquoteVanilla';\n\nexport const BlockquoteVanilla = BlockquoteVanillaComponentImpl as BlockquoteComponent;\n"],"mappings":";;;;;;;;AAsBA,IAAM,kCAAA,GAAA,MAAA,aAEF,EACE,IACA,WACA,KACA,OACA,MACA,QACA,SACA,UACA,WACA,QACA,GAAG,SAEL,QACG;CACH,MAAM,YAAa,MAAM;CACzB,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAC1B;
|
|
1
|
+
{"version":3,"file":"Blockquote.vanilla.cjs","names":[],"sources":["../../../components/Blockquote/Blockquote.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { blockquoteRecipe } from './Blockquote.vanilla.css';\n\ntype BlockquoteRecipeVariants = RecipeVariants<typeof blockquoteRecipe>;\n\ninterface BlockquoteOwnProps extends Omit<BlockquoteRecipeVariants, never>, CSSProps {}\n\nexport type BlockquoteVanillaProps<C extends ElementType = 'blockquote'> =\n PolymorphicComponentProps<C, BlockquoteOwnProps>;\n\ntype BlockquoteComponent = PolymorphicComponent<'blockquote', BlockquoteVanillaProps<ElementType>>;\n\nconst BlockquoteVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'blockquote'>(\n {\n as,\n className,\n css,\n style,\n size,\n weight,\n variant,\n gradient,\n transform,\n noWrap,\n ...props\n }: BlockquoteVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as || 'blockquote') as ElementType;\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = blockquoteRecipe({ size, weight, variant, gradient, transform, noWrap });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nBlockquoteVanillaComponentImpl.displayName = 'BlockquoteVanilla';\n\nexport const BlockquoteVanilla = BlockquoteVanillaComponentImpl as BlockquoteComponent;\n"],"mappings":";;;;;;;;AAsBA,IAAM,kCAAA,GAAA,MAAA,aAEF,EACE,IACA,WACA,KACA,OACA,MACA,QACA,SACA,UACA,WACA,QACA,GAAG,SAEL,QACG;CACH,MAAM,YAAa,MAAM;CACzB,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAC1B;CAID,OACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,+BAAA,iBAAiB;GAAE;GAAM;GAAQ;GAAS;GAAU;GAAW;GAAQ,CAKzE,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,+BAA+B,cAAc;AAE7C,IAAa,oBAAoB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Blockquote.vanilla.js","names":[],"sources":["../../../components/Blockquote/Blockquote.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { blockquoteRecipe } from './Blockquote.vanilla.css';\n\ntype BlockquoteRecipeVariants = RecipeVariants<typeof blockquoteRecipe>;\n\ninterface BlockquoteOwnProps extends Omit<BlockquoteRecipeVariants, never>, CSSProps {}\n\nexport type BlockquoteVanillaProps<C extends ElementType = 'blockquote'> =\n PolymorphicComponentProps<C, BlockquoteOwnProps>;\n\ntype BlockquoteComponent = PolymorphicComponent<'blockquote', BlockquoteVanillaProps<ElementType>>;\n\nconst BlockquoteVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'blockquote'>(\n {\n as,\n className,\n css,\n style,\n size,\n weight,\n variant,\n gradient,\n transform,\n noWrap,\n ...props\n }: BlockquoteVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as || 'blockquote') as ElementType;\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = blockquoteRecipe({ size, weight, variant, gradient, transform, noWrap });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nBlockquoteVanillaComponentImpl.displayName = 'BlockquoteVanilla';\n\nexport const BlockquoteVanilla = BlockquoteVanillaComponentImpl as BlockquoteComponent;\n"],"mappings":";;;;;;;AAsBA,IAAM,iCAAiC,YAEnC,EACE,IACA,WACA,KACA,OACA,MACA,QACA,SACA,UACA,WACA,QACA,GAAG,SAEL,QACG;CACH,MAAM,YAAa,MAAM;CACzB,MAAM,EAAE,WAAW,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;
|
|
1
|
+
{"version":3,"file":"Blockquote.vanilla.js","names":[],"sources":["../../../components/Blockquote/Blockquote.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { blockquoteRecipe } from './Blockquote.vanilla.css';\n\ntype BlockquoteRecipeVariants = RecipeVariants<typeof blockquoteRecipe>;\n\ninterface BlockquoteOwnProps extends Omit<BlockquoteRecipeVariants, never>, CSSProps {}\n\nexport type BlockquoteVanillaProps<C extends ElementType = 'blockquote'> =\n PolymorphicComponentProps<C, BlockquoteOwnProps>;\n\ntype BlockquoteComponent = PolymorphicComponent<'blockquote', BlockquoteVanillaProps<ElementType>>;\n\nconst BlockquoteVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'blockquote'>(\n {\n as,\n className,\n css,\n style,\n size,\n weight,\n variant,\n gradient,\n transform,\n noWrap,\n ...props\n }: BlockquoteVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as || 'blockquote') as ElementType;\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = blockquoteRecipe({ size, weight, variant, gradient, transform, noWrap });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nBlockquoteVanillaComponentImpl.displayName = 'BlockquoteVanilla';\n\nexport const BlockquoteVanilla = BlockquoteVanillaComponentImpl as BlockquoteComponent;\n"],"mappings":";;;;;;;AAsBA,IAAM,iCAAiC,YAEnC,EACE,IACA,WACA,KACA,OACA,MACA,QACA,SACA,UACA,WACA,QACA,GAAG,SAEL,QACG;CACH,MAAM,YAAa,MAAM;CACzB,MAAM,EAAE,WAAW,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;CAID,OACE,oBAAC,WAAD;EACO;EACL,WAAW,GALK,iBAAiB;GAAE;GAAM;GAAQ;GAAS;GAAU;GAAW;GAAQ,CAKzE,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,+BAA+B,cAAc;AAE7C,IAAa,oBAAoB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.vanilla.cjs","names":[],"sources":["../../../components/Box/Box.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { box } from './Box.vanilla.css';\n\nexport type BoxProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, CSSProps>;\n\ntype BoxComponent = PolymorphicComponent<'div', BoxProps<ElementType>>;\n\nconst BoxVanillaComponent = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, ...props }: BoxProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n return (\n <Component\n ref={ref}\n className={`${box} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nBoxVanillaComponent.displayName = 'BoxVanilla';\n\nexport const BoxVanilla = BoxVanillaComponent as BoxComponent;\n"],"mappings":";;;;;;;;AAgBA,IAAM,uBAAA,GAAA,MAAA,aAEF,EAAE,IAAI,WAAW,KAAK,OAAO,GAAG,SAChC,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAC1B;
|
|
1
|
+
{"version":3,"file":"Box.vanilla.cjs","names":[],"sources":["../../../components/Box/Box.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { box } from './Box.vanilla.css';\n\nexport type BoxProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, CSSProps>;\n\ntype BoxComponent = PolymorphicComponent<'div', BoxProps<ElementType>>;\n\nconst BoxVanillaComponent = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, ...props }: BoxProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n return (\n <Component\n ref={ref}\n className={`${box} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nBoxVanillaComponent.displayName = 'BoxVanilla';\n\nexport const BoxVanilla = BoxVanillaComponent as BoxComponent;\n"],"mappings":";;;;;;;;AAgBA,IAAM,uBAAA,GAAA,MAAA,aAEF,EAAE,IAAI,WAAW,KAAK,OAAO,GAAG,SAChC,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAC1B;CAED,OACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GAAG,wBAAA,IAAI,GAAG,aAAa,KAAK,MAAM;EAC7C,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,oBAAoB,cAAc;AAElC,IAAa,aAAa"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.vanilla.js","names":[],"sources":["../../../components/Box/Box.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { box } from './Box.vanilla.css';\n\nexport type BoxProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, CSSProps>;\n\ntype BoxComponent = PolymorphicComponent<'div', BoxProps<ElementType>>;\n\nconst BoxVanillaComponent = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, ...props }: BoxProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n return (\n <Component\n ref={ref}\n className={`${box} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nBoxVanillaComponent.displayName = 'BoxVanilla';\n\nexport const BoxVanilla = BoxVanillaComponent as BoxComponent;\n"],"mappings":";;;;;;;AAgBA,IAAM,sBAAsB,YAExB,EAAE,IAAI,WAAW,KAAK,OAAO,GAAG,SAChC,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;
|
|
1
|
+
{"version":3,"file":"Box.vanilla.js","names":[],"sources":["../../../components/Box/Box.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { box } from './Box.vanilla.css';\n\nexport type BoxProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, CSSProps>;\n\ntype BoxComponent = PolymorphicComponent<'div', BoxProps<ElementType>>;\n\nconst BoxVanillaComponent = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, ...props }: BoxProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n return (\n <Component\n ref={ref}\n className={`${box} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nBoxVanillaComponent.displayName = 'BoxVanilla';\n\nexport const BoxVanilla = BoxVanillaComponent as BoxComponent;\n"],"mappings":";;;;;;;AAgBA,IAAM,sBAAsB,YAExB,EAAE,IAAI,WAAW,KAAK,OAAO,GAAG,SAChC,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;CAED,OACE,oBAAC,WAAD;EACO;EACL,WAAW,GAAG,IAAI,GAAG,aAAa,KAAK,MAAM;EAC7C,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,oBAAoB,cAAc;AAElC,IAAa,aAAa"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Bubble.vanilla.cjs","names":[],"sources":["../../../components/Bubble/Bubble.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { bubbleRecipe } from './Bubble.vanilla.css';\n\ntype BubbleRecipeVariants = NonNullable<RecipeVariants<typeof bubbleRecipe>>;\n\ninterface BubbleOwnProps extends BubbleRecipeVariants, CSSProps {}\n\nexport type BubbleVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n BubbleOwnProps\n>;\n\ntype BubbleVanillaComponent = PolymorphicComponent<'div', BubbleVanillaProps<ElementType>>;\n\nconst BubbleVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, size, variant, noAnimation, ...props }: BubbleVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = bubbleRecipe({ size, variant, noAnimation });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nBubbleVanillaComponentImpl.displayName = 'BubbleVanilla';\n\nexport const BubbleVanilla = BubbleVanillaComponentImpl as BubbleVanillaComponent;\n"],"mappings":";;;;;;;;AAwBA,IAAM,8BAAA,GAAA,MAAA,aAEF,EAAE,IAAI,WAAW,KAAK,OAAO,MAAM,SAAS,aAAa,GAAG,SAC5D,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAC1B;
|
|
1
|
+
{"version":3,"file":"Bubble.vanilla.cjs","names":[],"sources":["../../../components/Bubble/Bubble.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { bubbleRecipe } from './Bubble.vanilla.css';\n\ntype BubbleRecipeVariants = NonNullable<RecipeVariants<typeof bubbleRecipe>>;\n\ninterface BubbleOwnProps extends BubbleRecipeVariants, CSSProps {}\n\nexport type BubbleVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n BubbleOwnProps\n>;\n\ntype BubbleVanillaComponent = PolymorphicComponent<'div', BubbleVanillaProps<ElementType>>;\n\nconst BubbleVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, size, variant, noAnimation, ...props }: BubbleVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = bubbleRecipe({ size, variant, noAnimation });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nBubbleVanillaComponentImpl.displayName = 'BubbleVanilla';\n\nexport const BubbleVanilla = BubbleVanillaComponentImpl as BubbleVanillaComponent;\n"],"mappings":";;;;;;;;AAwBA,IAAM,8BAAA,GAAA,MAAA,aAEF,EAAE,IAAI,WAAW,KAAK,OAAO,MAAM,SAAS,aAAa,GAAG,SAC5D,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAC1B;CAID,OACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,2BAAA,aAAa;GAAE;GAAM;GAAS;GAAa,CAK7C,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,2BAA2B,cAAc;AAEzC,IAAa,gBAAgB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Bubble.vanilla.js","names":[],"sources":["../../../components/Bubble/Bubble.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { bubbleRecipe } from './Bubble.vanilla.css';\n\ntype BubbleRecipeVariants = NonNullable<RecipeVariants<typeof bubbleRecipe>>;\n\ninterface BubbleOwnProps extends BubbleRecipeVariants, CSSProps {}\n\nexport type BubbleVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n BubbleOwnProps\n>;\n\ntype BubbleVanillaComponent = PolymorphicComponent<'div', BubbleVanillaProps<ElementType>>;\n\nconst BubbleVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, size, variant, noAnimation, ...props }: BubbleVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = bubbleRecipe({ size, variant, noAnimation });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nBubbleVanillaComponentImpl.displayName = 'BubbleVanilla';\n\nexport const BubbleVanilla = BubbleVanillaComponentImpl as BubbleVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,6BAA6B,YAE/B,EAAE,IAAI,WAAW,KAAK,OAAO,MAAM,SAAS,aAAa,GAAG,SAC5D,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;
|
|
1
|
+
{"version":3,"file":"Bubble.vanilla.js","names":[],"sources":["../../../components/Bubble/Bubble.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { bubbleRecipe } from './Bubble.vanilla.css';\n\ntype BubbleRecipeVariants = NonNullable<RecipeVariants<typeof bubbleRecipe>>;\n\ninterface BubbleOwnProps extends BubbleRecipeVariants, CSSProps {}\n\nexport type BubbleVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n BubbleOwnProps\n>;\n\ntype BubbleVanillaComponent = PolymorphicComponent<'div', BubbleVanillaProps<ElementType>>;\n\nconst BubbleVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, size, variant, noAnimation, ...props }: BubbleVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = bubbleRecipe({ size, variant, noAnimation });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nBubbleVanillaComponentImpl.displayName = 'BubbleVanilla';\n\nexport const BubbleVanilla = BubbleVanillaComponentImpl as BubbleVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,6BAA6B,YAE/B,EAAE,IAAI,WAAW,KAAK,OAAO,MAAM,SAAS,aAAa,GAAG,SAC5D,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;CAID,OACE,oBAAC,WAAD;EACO;EACL,WAAW,GALK,aAAa;GAAE;GAAM;GAAS;GAAa,CAK7C,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,2BAA2B,cAAc;AAEzC,IAAa,gBAAgB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.cjs","names":[],"sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\n\nexport const BUTTON_BASE_STYLES = {\n appearance: 'none',\n userSelect: 'none',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n};\n\nconst BG_SIZES = {\n small: '$sizes$8',\n medium: '$sizes$9',\n large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n $$bgSize: BG_SIZES[size],\n backgroundSize: '$$bgSize',\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n $colors$deepBlue4 33%,\n $colors$deepBlue4 66%,\n transparent 66%\n )`,\n animation: `${keyframes({\n '100%': { transform: 'translateX($$bgSize)' },\n })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n // Reset\n all: 'unset',\n alignItems: 'center',\n overflow: 'hidden',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n\n // Custom reset?\n display: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n lineHeight: '1',\n\n // Custom\n position: 'relative',\n height: '$5',\n px: '$2',\n fontFamily: '$rubik',\n fontSize: '$3',\n fontWeight: '$medium',\n fontVariantNumeric: 'tabular-nums',\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.05,\n },\n },\n },\n\n '&:active': {\n '&::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n variants: {\n size: {\n small: {\n borderRadius: '$button',\n height: '$5',\n px: '$2',\n fontSize: '$1',\n lineHeight: '$sizes$5',\n },\n medium: {\n borderRadius: '$button',\n height: '$6',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$6',\n },\n large: {\n borderRadius: '$button',\n height: '$7',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$7',\n },\n },\n variant: {\n primary: {\n bc: '$buttonPrimaryBg',\n c: '$buttonPrimaryText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n secondary: {\n bc: '$buttonSecondaryBg',\n c: '$buttonSecondaryText',\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n '&:active': {\n boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n },\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n red: {\n backgroundColor: '$buttonRedBg',\n color: '$buttonRedText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n },\n },\n },\n state: {\n active: {\n bc: '$deepBlue5',\n c: '$deepBlue11',\n '&:active': {\n backgroundColor: '$deepBlue5',\n },\n },\n waiting: {\n bc: '$deepBlue3',\n boxShadow: `inset 0 0 0 1px $deepBlue4`,\n c: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n '&::after': {\n left: '-100%',\n width: '200%',\n ...backgroundSizeAnimation('medium'),\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@hover': {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$pill',\n },\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n ghost: 'true',\n css: {\n color: '$buttonPrimaryBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonPrimaryGhostHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n variant: 'primary',\n state: 'active',\n css: {\n backgroundColor: '$buttonPrimaryFocusBg',\n color: '$buttonPrimaryText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'secondary',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'secondary',\n ghost: true,\n css: {\n backgroundColor: 'transparent',\n color: '$buttonSecondaryText',\n boxShadow: 'none',\n },\n },\n {\n variant: 'red',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'red',\n state: 'active',\n css: {\n backgroundColor: '$buttonRedFocusBg',\n color: '$buttonRedText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'red',\n ghost: 'true',\n css: {\n color: '$buttonRedBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonRedHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n size: 'small',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('small'),\n },\n },\n {\n size: 'large',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('large'),\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n ButtonVariants & {\n css?: CSS;\n asChild?: boolean;\n as?: string;\n };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n ({ children, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n return (\n <Component ref={forwardedRef} {...props}>\n {children}\n </Component>\n );\n },\n);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Button.cjs","names":[],"sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\n\nexport const BUTTON_BASE_STYLES = {\n appearance: 'none',\n userSelect: 'none',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n};\n\nconst BG_SIZES = {\n small: '$sizes$8',\n medium: '$sizes$9',\n large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n $$bgSize: BG_SIZES[size],\n backgroundSize: '$$bgSize',\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n $colors$deepBlue4 33%,\n $colors$deepBlue4 66%,\n transparent 66%\n )`,\n animation: `${keyframes({\n '100%': { transform: 'translateX($$bgSize)' },\n })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n // Reset\n all: 'unset',\n alignItems: 'center',\n overflow: 'hidden',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n\n // Custom reset?\n display: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n lineHeight: '1',\n\n // Custom\n position: 'relative',\n height: '$5',\n px: '$2',\n fontFamily: '$rubik',\n fontSize: '$3',\n fontWeight: '$medium',\n fontVariantNumeric: 'tabular-nums',\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.05,\n },\n },\n },\n\n '&:active': {\n '&::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n variants: {\n size: {\n small: {\n borderRadius: '$button',\n height: '$5',\n px: '$2',\n fontSize: '$1',\n lineHeight: '$sizes$5',\n },\n medium: {\n borderRadius: '$button',\n height: '$6',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$6',\n },\n large: {\n borderRadius: '$button',\n height: '$7',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$7',\n },\n },\n variant: {\n primary: {\n bc: '$buttonPrimaryBg',\n c: '$buttonPrimaryText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n secondary: {\n bc: '$buttonSecondaryBg',\n c: '$buttonSecondaryText',\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n '&:active': {\n boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n },\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n red: {\n backgroundColor: '$buttonRedBg',\n color: '$buttonRedText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n },\n },\n },\n state: {\n active: {\n bc: '$deepBlue5',\n c: '$deepBlue11',\n '&:active': {\n backgroundColor: '$deepBlue5',\n },\n },\n waiting: {\n bc: '$deepBlue3',\n boxShadow: `inset 0 0 0 1px $deepBlue4`,\n c: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n '&::after': {\n left: '-100%',\n width: '200%',\n ...backgroundSizeAnimation('medium'),\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@hover': {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$pill',\n },\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n ghost: 'true',\n css: {\n color: '$buttonPrimaryBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonPrimaryGhostHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n variant: 'primary',\n state: 'active',\n css: {\n backgroundColor: '$buttonPrimaryFocusBg',\n color: '$buttonPrimaryText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'secondary',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'secondary',\n ghost: true,\n css: {\n backgroundColor: 'transparent',\n color: '$buttonSecondaryText',\n boxShadow: 'none',\n },\n },\n {\n variant: 'red',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'red',\n state: 'active',\n css: {\n backgroundColor: '$buttonRedFocusBg',\n color: '$buttonRedText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'red',\n ghost: 'true',\n css: {\n color: '$buttonRedBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonRedHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n size: 'small',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('small'),\n },\n },\n {\n size: 'large',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('large'),\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n ButtonVariants & {\n css?: CSS;\n asChild?: boolean;\n as?: string;\n };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n ({ children, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n return (\n <Component ref={forwardedRef} {...props}>\n {children}\n </Component>\n );\n },\n);\n"],"mappings":"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"}
|