@traefik-labs/faency 12.3.2 → 12.3.3
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/AriaTable/AriaTable.cjs.map +1 -1
- package/dist/components/AriaTable/AriaTable.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.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 +0 -1
- package/dist/components/Blockquote/Blockquote.vanilla.css.js +0 -1
- package/dist/components/Blockquote/Blockquote.vanilla.js.map +1 -1
- package/dist/components/Box/Box.cjs.map +1 -1
- package/dist/components/Bubble/Bubble.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.vanilla.cjs.map +1 -1
- package/dist/components/Button/Button.vanilla.js.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.cjs +1 -0
- package/dist/components/CodeBlock/CodeBlock.cjs.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.vanilla.cjs +1 -0
- package/dist/components/CodeBlock/CodeBlock.vanilla.cjs.map +1 -1
- package/dist/components/CodeBlock/prism-extend.cjs +25 -0
- package/dist/components/CodeBlock/prism-extend.cjs.map +1 -0
- package/dist/components/Container/Container.cjs.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/DateTimePickerInput/DateTimePickerInput.cjs.map +1 -1
- package/dist/components/DateTimePickerInput/DateTimePickerInput.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.cjs.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.cjs.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/IconButton/IconButton.vanilla.cjs.map +1 -1
- package/dist/components/IconButton/IconButton.vanilla.js.map +1 -1
- package/dist/components/Image/Image.cjs.map +1 -1
- package/dist/components/Input/Input.cjs.map +1 -1
- package/dist/components/Input/Input.js.map +1 -1
- package/dist/components/Label/Label.vanilla.cjs.map +1 -1
- package/dist/components/Label/Label.vanilla.css.cjs +1 -0
- package/dist/components/Label/Label.vanilla.css.js +1 -0
- package/dist/components/Label/Label.vanilla.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/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/Skeleton/Skeleton.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/Table/Table.cjs.map +1 -1
- package/dist/components/Table/Table.js.map +1 -1
- package/dist/components/Text/Text.cjs.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/package.json +6 -3
|
@@ -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":"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"}
|
|
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":";;;;;;;;;AA6BA,IAAa,UAAU,OAAO,OAAO,WAAc,EACjD,SAAS,iBACV,CAAC;AAEF,IAAM,cAAc,OAAO,OAAO,SAAY,EAC5C,SAAS,mBACV,CAAC;AACF,IAAa,QAAQ,YAGlB,OAAO,QAAQ,oBAAC,aAAD;CAAkB;CAAK,MAAK;CAAW,GAAI;CAAS,CAAA,CAAC;AAEvE,IAAM,cAAc,OAAO,OAAO,SAAY,EAC5C,SAAS,sBACV,CAAC;AACF,IAAa,QAAQ,YAGlB,OAAO,QAAQ,oBAAC,aAAD;CAAkB;CAAK,MAAK;CAAW,GAAI;CAAS,CAAA,CAAC;AAEvE,IAAM,WAAW,OAAO,OAAO,YAAS,EACtC,SAAS,aACV,CAAC;AACF,IAAM,eAAe,OAAO,MAAM,SAAS;AAE3C,IAAM,qBAAqB,EAAE,QAAQ,eAAyD;CAC5F,MAAM,eAAe,cAEjB,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,iBAAiB,cAEnB,SACI;EACE,YAAY;EACZ,SAAS;EACT,eAAe;EAChB,GACD;EACE,YAAY;EACZ,QAAQ;EACR,UAAU;EACV,SAAS;EACV,EACP,CAAC,OAAO,CACT;AAED,QACE,oBAAC,UAAD;EACE,KAAK,SAAS,EAAE,sBAAsB,EAAE,cAAc,6BAA6B,EAAE,GAAG,EAAE;YAE1F,oBAAC,IAAD;GAAI,KAAK;GAAc,aAAA;aACrB,oBAAC,KAAD;IAAK,KAAK;IAAiB;IAAe,CAAA;GACvC,CAAA;EACI,CAAA;;AAaf,IAAa,KAAK,YACf,EAAE,SAAS,UAAU,kBAAkB,kBAAkB,WAAW,KAAK,GAAG,SAAS,QAAQ;CAC5F,MAAM,YAAY,UAAU,eAAe;CAC3C,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;AAErD,KAAI,CAAC,SAAS;EACZ,MAAM,gBAAgB,SAAS,QAAQ,SAAS;AAQhD,MAP2B,cAAc,MAAM,UAAU;AACvD,OAAI,CAAC,eAAe,MAAM,CACxB,QAAO;GAET,MAAM,EAAE,gBAAgB,MAAM;AAC9B,UAAO,CAAC,CAAC;IAEP,IAAsB,cAAc,SAAS,EAC/C,OAAM,IAAI,MAAM,gEAAgE;;CAIpF,MAAM,OAAO,cAET,mBACE,YACE,oBAAC,IAAD,EAAI,KAAK,EAAE,OAAO,IAAI,EAAI,CAAA,GAE1B,oBAAC,IAAD,EAAqB,EAAb,WAAa,GAErB,mBACF,oBAAC,IAAD,EAAA,UACE,oBAAC,KAAD;EACE,UAAU,MAAM;AACd,KAAE,iBAAiB;AACnB,KAAE,gBAAgB;;YAGpB,oBAAC,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,mBAAmB,cAAc;AACrC,MAAI,QACF,QAAO,aACL,UACA,EAEE,GAAG,UAAU,OACd,EAED,CAAC,MAAM,GAAI,UAAU,OAAO,YAAY,EAAE,CAAE,CAC7C;AAGH,SACE,qBAAA,UAAA,EAAA,UAAA,CACG,MACA,SACA,EAAA,CAAA;IAEJ;EAAC;EAAS;EAAM;EAAS,CAAC;AAE7B,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,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,oBAAC,mBAAD;EAAmB,QAAQ;YAAc;EAAqC,CAAA,CAE/E,EAAA,CAAA;EAGR;AAED,IAAM,WAAW,OAAO,QAAQ,MAAS,EACvC,SAAS,cACV,CAAC;AAIF,IAAa,KAAK,YACf,OAAO,QAAQ,oBAAC,UAAD;CAAe;CAAK,MAAK;CAAe,GAAI;CAAS,CAAA,CACtE;AAED,IAAM,WAAW,OAAO,QAAQ,MAAS,EACvC,SAAS,cACV,CAAC;AAEF,IAAM,WAAW,OAAO,UAAU,EAChC,YAAY,UACb,CAAC;AAOF,IAAa,KAAK,YACf,EAAE,aAAa,KAAK,GAAG,SAAS,QAAQ;CACvC,MAAM,iBAAiB,cAEnB,cACI;EACE,UAAU;EACV,MAAM;EACN,OAAO;EACP,QAAQ;EACT,GACD,EAAE,EACR,CAAC,YAAY,CACd;AACD,KAAI,YACF,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,UAAD;EAAe;EAAK,GAAI;EAAS,CAAA,EACjC,oBAAC,UAAD;EAAe;EAAK,MAAK;EAAO,KAAK,UAAU,gBAAgB,IAAI;EAAE,GAAI;EAAS,CAAA,CACjF,EAAA,CAAA;AAGP,QAAO,oBAAC,UAAD;EAAe;EAAK,MAAK;EAAY;EAAK,GAAI;EAAS,CAAA;EAEjE;AAED,IAAM,cAAc,OAAO,OAAO,SAAY,EAC5C,SAAS,sBACV,CAAC;AACF,IAAa,QAAQ,YAGlB,OAAO,QAAQ,oBAAC,aAAD;CAAkB;CAAK,MAAK;CAAW,GAAI;CAAS,CAAA,CAAC;AAEvE,IAAM,cAAc,OAAO,OAAO,SAAY,EAC5C,SAAS,SACV,CAAC;AACF,IAAa,QAAQ,YAIlB,EAAE,wBAAwB,KAAK,GAAG,SAAS,QAC5C,oBAAC,aAAD;CACO;CACL,MAAK;CACL,KAAK,yBAAyB;EAAE,gBAAgB;EAAY,GAAG;EAAK,GAAG;CACvE,GAAI;CACJ,CAAA,CACF"}
|
|
@@ -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;AAU1D,QACE,iBAAA,GAAA,kBAAA,KAAC,oBAAA,YAAD;EAAY,
|
|
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;AAU1D,QACE,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;AAU1D,QACE,oBAAC,YAAD;EAAY,
|
|
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;AAU1D,QACE,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;AASpD,QAAO,iBAAA,GAAA,kBAAA,MAAA,GAAA,MAAA,eARyB;AAC9B,MAAI,YACF,QAAO,UAAU,wBAAwB;AAE3C,SAAO,UAAU,sBAAsB;IAEtC,CAAC,QAAQ,
|
|
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;AASpD,QAAO,iBAAA,GAAA,kBAAA,MAAA,GAAA,MAAA,eARyB;AAC9B,MAAI,YACF,QAAO,UAAU,wBAAwB;AAE3C,SAAO,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;AASpD,QAAO,oBARW,cAAc;AAC9B,MAAI,YACF,QAAO,UAAU,wBAAwB;AAE3C,SAAO,UAAU,sBAAsB;IAEtC,CAAC,QAAQ,
|
|
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;AASpD,QAAO,oBARW,cAAc;AAC9B,MAAI,YACF,QAAO,UAAU,wBAAwB;AAE3C,SAAO,UAAU,sBAAsB;IAEtC,CAAC,QAAQ,CAEJ,EAAD;EAAW,GAAI;EAAO,KAAK;EAAgB,CAAA;EAErD"}
|
|
@@ -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;AAKD,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,IANA,cAAc,0BAAA,yBAAyB,0BAAA,aAC3B;GAAE;GAAM;GAAS;GAAS;GAAY,
|
|
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;AAKD,QACE,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;AAKD,QACE,oBAAC,WAAD;EACO;EACL,WAAW,IANA,cAAc,yBAAyB,aAC3B;GAAE;GAAM;GAAS;GAAS;GAAY,
|
|
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;AAKD,QACE,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;AAID,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,+BAAA,iBAAiB;GAAE;GAAM;GAAQ;GAAS;GAAU;GAAW;GAAQ,
|
|
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;AAID,QACE,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;AAID,QACE,oBAAC,WAAD;EACO;EACL,WAAW,GALK,iBAAiB;GAAE;GAAM;GAAQ;GAAS;GAAU;GAAW;GAAQ,
|
|
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;AAID,QACE,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.cjs","names":[],"sources":["../../../components/Box/Box.tsx"],"sourcesContent":["import { styled } from '../../stitches.config';\n\nexport const Box = styled('div', {\n // Reset\n boxSizing: 'border-box',\n});\n"],"mappings":";AAEA,IAAa,
|
|
1
|
+
{"version":3,"file":"Box.cjs","names":[],"sources":["../../../components/Box/Box.tsx"],"sourcesContent":["import { styled } from '../../stitches.config';\n\nexport const Box = styled('div', {\n // Reset\n boxSizing: 'border-box',\n});\n"],"mappings":";AAEA,IAAa,0CAAM,CAAA,OAAO,OAAO,EAE/B,WAAW,cACZ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Bubble.js","names":[],"sources":["../../../components/Bubble/Bubble.tsx"],"sourcesContent":["import { keyframes, styled } from '../../stitches.config';\n\nconst bip = keyframes({\n '0%': {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n opacity: 1,\n },\n '100%': {\n top: -8,\n right: -8,\n bottom: -8,\n left: -8,\n opacity: 0,\n },\n});\n\nexport const Bubble = styled('div', {\n display: 'inline-block',\n size: '$4',\n bc: '$red8',\n borderRadius: '50%',\n position: 'relative',\n\n '&::before': {\n animation: `${bip} 1s ease infinite`,\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n boxShadow: 'inset 0 0 0 1px rgba(255,255,255,.5)',\n borderRadius: '50%',\n pointerEvents: 'none',\n zIndex: -1,\n },\n\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n top: 5,\n right: 5,\n bottom: 5,\n left: 5,\n bc: 'rgba(255,255,255,.1)',\n borderRadius: '50%',\n pointerEvents: 'none',\n },\n\n variants: {\n variant: {\n red: { bc: '$red8', '&::before': { bc: '$red8' } },\n green: { bc: '$green8', '&::before': { bc: '$green8' } },\n orange: { bc: '$orange8', '&::before': { bc: '$orange8' } },\n blue: { bc: '$blue8', '&::before': { bc: '$blue8' } },\n yellow: { bc: '$neon8', '&::before': { bc: '$neon8' } },\n purple: { bc: '$purple8', '&::before': { bc: '$purple8' } },\n gray: { bc: '$slate8', '&::before': { bc: '$slate8' } },\n },\n size: {\n 'x-small': { size: '$1' },\n small: { size: '$2' },\n medium: { size: '$3' },\n large: { size: '$4' },\n 'x-large': { size: '$5' },\n },\n noAnimation: {\n true: {\n '&::before': { content: 'none' },\n },\n },\n },\n\n defaultVariants: {\n size: 'small',\n noAnimation: false,\n },\n});\n"],"mappings":";AAmBA,IAAa,SAAS,OAAO,OAAO;CAClC,SAAS;CACT,MAAM;CACN,IAAI;CACJ,cAAc;CACd,UAAU;CAEV,aAAa;EACX,WAAW,GAzBH,UAAU;GACpB,MAAM;IACJ,KAAK;IACL,OAAO;IACP,QAAQ;IACR,MAAM;IACN,SAAS;IACV;GACD,QAAQ;IACN,KAAK;IACL,OAAO;IACP,QAAQ;IACR,MAAM;IACN,SAAS;IACV;GACF,
|
|
1
|
+
{"version":3,"file":"Bubble.js","names":[],"sources":["../../../components/Bubble/Bubble.tsx"],"sourcesContent":["import { keyframes, styled } from '../../stitches.config';\n\nconst bip = keyframes({\n '0%': {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n opacity: 1,\n },\n '100%': {\n top: -8,\n right: -8,\n bottom: -8,\n left: -8,\n opacity: 0,\n },\n});\n\nexport const Bubble = styled('div', {\n display: 'inline-block',\n size: '$4',\n bc: '$red8',\n borderRadius: '50%',\n position: 'relative',\n\n '&::before': {\n animation: `${bip} 1s ease infinite`,\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n boxShadow: 'inset 0 0 0 1px rgba(255,255,255,.5)',\n borderRadius: '50%',\n pointerEvents: 'none',\n zIndex: -1,\n },\n\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n top: 5,\n right: 5,\n bottom: 5,\n left: 5,\n bc: 'rgba(255,255,255,.1)',\n borderRadius: '50%',\n pointerEvents: 'none',\n },\n\n variants: {\n variant: {\n red: { bc: '$red8', '&::before': { bc: '$red8' } },\n green: { bc: '$green8', '&::before': { bc: '$green8' } },\n orange: { bc: '$orange8', '&::before': { bc: '$orange8' } },\n blue: { bc: '$blue8', '&::before': { bc: '$blue8' } },\n yellow: { bc: '$neon8', '&::before': { bc: '$neon8' } },\n purple: { bc: '$purple8', '&::before': { bc: '$purple8' } },\n gray: { bc: '$slate8', '&::before': { bc: '$slate8' } },\n },\n size: {\n 'x-small': { size: '$1' },\n small: { size: '$2' },\n medium: { size: '$3' },\n large: { size: '$4' },\n 'x-large': { size: '$5' },\n },\n noAnimation: {\n true: {\n '&::before': { content: 'none' },\n },\n },\n },\n\n defaultVariants: {\n size: 'small',\n noAnimation: false,\n },\n});\n"],"mappings":";AAmBA,IAAa,SAAS,OAAO,OAAO;CAClC,SAAS;CACT,MAAM;CACN,IAAI;CACJ,cAAc;CACd,UAAU;CAEV,aAAa;EACX,WAAW,GAzBH,UAAU;GACpB,MAAM;IACJ,KAAK;IACL,OAAO;IACP,QAAQ;IACR,MAAM;IACN,SAAS;IACV;GACD,QAAQ;IACN,KAAK;IACL,OAAO;IACP,QAAQ;IACR,MAAM;IACN,SAAS;IACV;GACF,CAUiB,CAAI;EAClB,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,WAAW;EACX,cAAc;EACd,eAAe;EACf,QAAQ;EACT;CAED,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,IAAI;EACJ,cAAc;EACd,eAAe;EAChB;CAED,UAAU;EACR,SAAS;GACP,KAAK;IAAE,IAAI;IAAS,aAAa,EAAE,IAAI,SAAS;IAAE;GAClD,OAAO;IAAE,IAAI;IAAW,aAAa,EAAE,IAAI,WAAW;IAAE;GACxD,QAAQ;IAAE,IAAI;IAAY,aAAa,EAAE,IAAI,YAAY;IAAE;GAC3D,MAAM;IAAE,IAAI;IAAU,aAAa,EAAE,IAAI,UAAU;IAAE;GACrD,QAAQ;IAAE,IAAI;IAAU,aAAa,EAAE,IAAI,UAAU;IAAE;GACvD,QAAQ;IAAE,IAAI;IAAY,aAAa,EAAE,IAAI,YAAY;IAAE;GAC3D,MAAM;IAAE,IAAI;IAAW,aAAa,EAAE,IAAI,WAAW;IAAE;GACxD;EACD,MAAM;GACJ,WAAW,EAAE,MAAM,MAAM;GACzB,OAAO,EAAE,MAAM,MAAM;GACrB,QAAQ,EAAE,MAAM,MAAM;GACtB,OAAO,EAAE,MAAM,MAAM;GACrB,WAAW,EAAE,MAAM,MAAM;GAC1B;EACD,aAAa,EACX,MAAM,EACJ,aAAa,EAAE,SAAS,QAAQ,EACjC,EACF;EACF;CAED,iBAAiB;EACf,MAAM;EACN,aAAa;EACd;CACF,CAAC"}
|
|
@@ -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;AAID,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,2BAAA,aAAa;GAAE;GAAM;GAAS;GAAa,
|
|
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;AAID,QACE,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;AAID,QACE,oBAAC,WAAD;EACO;EACL,WAAW,GALK,aAAa;GAAE;GAAM;GAAS;GAAa,
|
|
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;AAID,QACE,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":";;;;;;;AAKA,IAAa,qBAAqB;CAChC,YAAY;CACZ,YAAY;CACZ,WAAW;CACX,QAAQ;CACR,yBAAyB;CACzB,cAAc;EACZ,eAAe;EACf,SAAS;EACV;CACF;AAED,IAAM,WAAW;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,IAAM,2BAA2B,UAAiC;CAChE,UAAU,SAAS;CACnB,gBAAgB;CAChB,iBAAiB;;;;;;;CAOjB,WAAW,GAAG,wBAAA,UAAU,EACtB,QAAQ,EAAE,WAAW,wBAAwB,EAC9C,CAAC,CAAC;CACJ;AAED,IAAa,eAAe,wBAAA,OAAO,UAAU,oBAAoB;CAE/D,KAAK;CACL,YAAY;CACZ,UAAU;CAEV,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACR;CACD,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACR;CAGD,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,YAAY;CAGZ,UAAU;CACV,QAAQ;CACR,IAAI;CACJ,YAAY;CACZ,UAAU;CACV,YAAY;CACZ,oBAAoB;CAEpB,mBAAmB;EACjB,WAAW;EACX,aAAa,EACX,iBAAiB,6BAClB;EACD,YAAY,EACV,SAAS,KACV;EACF;CAED,UAAU,EACR,WAAW;EACT,QAAQ;EACR,aAAa,EACX,iBAAiB,6BAClB;EACD,YAAY,EACV,SAAS,KACV;EACF,EACF;CAED,YAAY,EACV,aAAa,EACX,iBAAiB,uBAClB,EACF;CAED,UAAU;EACR,MAAM;GACJ,OAAO;IACL,cAAc;IACd,QAAQ;IACR,IAAI;IACJ,UAAU;IACV,YAAY;IACb;GACD,QAAQ;IACN,cAAc;IACd,QAAQ;IACR,IAAI;IACJ,UAAU;IACV,YAAY;IACb;GACD,OAAO;IACL,cAAc;IACd,QAAQ;IACR,IAAI;IACJ,UAAU;IACV,YAAY;IACb;GACF;EACD,SAAS;GACP,SAAS;IACP,IAAI;IACJ,GAAG;IACH,mBAAmB,EACjB,WAAW,oDACZ;IACD,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,oBAClB,EACF,EACF;IACF;GACD,WAAW;IACT,IAAI;IACJ,GAAG;IACH,WAAW;IACX,YAAY,EACV,WAAW,iDACZ;IACD,mBAAmB,EACjB,WAAW,sDACZ;IACD,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,oBAClB,EACF,EACF;IACF;GACD,KAAK;IACH,iBAAiB;IACjB,OAAO;IACP,mBAAmB,EACjB,WAAW,4CACZ;IACF;GACF;EACD,OAAO;GACL,QAAQ;IACN,IAAI;IACJ,GAAG;IACH,YAAY,EACV,iBAAiB,cAClB;IACF;GACD,SAAS;IACP,IAAI;IACJ,WAAW;IACX,GAAG;IACH,UAAU;IACV,eAAe;IACf,YAAY;KACV,MAAM;KACN,OAAO;KACP,GAAG,wBAAwB,SAAS;KACrC;IACF;GACF;EACD,OAAO,EACL,MAAM;GACJ,WAAW;GACX,UAAU,EACR,WAAW,EACT,WAAW,QACZ,EACF;GACF,EACF;EACD,SAAS,EACP,MAAM,EACJ,cAAc,SACf,EACF;EACF;CACD,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,OAAO;IACP,iBAAiB;IACjB,UAAU,EACR,WAAW;KACT,OAAO;KACP,iBAAiB;KAClB,EACF;IACF;GACF;EACD;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;IACP,WAAW;IACZ;GACF;EACD;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;IACR;GACF;EACD;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;IACP,WAAW;IACZ;GACF;EACD;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;IACR;GACF;EACD;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;IACP,WAAW;IACZ;GACF;EACD;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,OAAO;IACP,iBAAiB;IACjB,UAAU,EACR,WAAW;KACT,OAAO;KACP,iBAAiB;KAClB,EACF;IACF;GACF;EACD;GACE,MAAM;GACN,OAAO;GACP,KAAK,EACH,YAAY,wBAAwB,QAAQ,EAC7C;GACF;EACD;GACE,MAAM;GACN,OAAO;GACP,KAAK,EACH,YAAY,wBAAwB,QAAQ,EAC7C;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,SAAS;EACV;CACF,CAAC;AACF,IAAM,mBAAmB,wBAAA,OAAO,qBAAA,MAAM,aAAa;AAUnD,IAAa,SAAS,MAAA,QAAM,YACzB,EAAE,UAAU,SAAS,GAAG,SAAS,iBAAiB;AAEjD,QACE,iBAAA,GAAA,kBAAA,MAAA,GAAA,MAAA,eAF+B,UAAU,mBAAmB,cAAe,CAAC,QAAQ,CAEnF,EAAD;EAAW,KAAK;EAAc,GAAI;EAC/B;EACS,CAAA;EAGjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","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.js","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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.vanilla.cjs","names":[],"sources":["../../../components/Button/Button.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 { buttonRecipe } from './Button.vanilla.css';\n\ntype ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n\ninterface ButtonOwnProps extends Omit<ButtonRecipeVariants, never>, CSSProps {}\n\nexport type ButtonVanillaProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n C,\n ButtonOwnProps\n>;\n\ntype ButtonVanillaComponent = PolymorphicComponent<'button', ButtonVanillaProps<ElementType>>;\n\nconst ButtonVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'button'>(\n {\n as,\n className,\n css,\n style,\n size,\n variant,\n state,\n ghost,\n rounded,\n ...props\n }: ButtonVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'button';\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 = buttonRecipe({ size, variant, state, ghost, rounded });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nButtonVanillaComponentImpl.displayName = 'ButtonVanilla';\n\nexport const ButtonVanilla = ButtonVanillaComponentImpl as ButtonVanillaComponent;\n"],"mappings":";;;;;;;;AAwBA,IAAM,8BAAA,GAAA,MAAA,aAEF,EACE,IACA,WACA,KACA,OACA,MACA,SACA,OACA,OACA,SACA,GAAG,SAEL,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;AAID,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,2BAAA,aAAa;GAAE;GAAM;GAAS;GAAO;GAAO;GAAS,
|
|
1
|
+
{"version":3,"file":"Button.vanilla.cjs","names":[],"sources":["../../../components/Button/Button.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 { buttonRecipe } from './Button.vanilla.css';\n\ntype ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n\ninterface ButtonOwnProps extends Omit<ButtonRecipeVariants, never>, CSSProps {}\n\nexport type ButtonVanillaProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n C,\n ButtonOwnProps\n>;\n\ntype ButtonVanillaComponent = PolymorphicComponent<'button', ButtonVanillaProps<ElementType>>;\n\nconst ButtonVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'button'>(\n {\n as,\n className,\n css,\n style,\n size,\n variant,\n state,\n ghost,\n rounded,\n ...props\n }: ButtonVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'button';\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 = buttonRecipe({ size, variant, state, ghost, rounded });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nButtonVanillaComponentImpl.displayName = 'ButtonVanilla';\n\nexport const ButtonVanilla = ButtonVanillaComponentImpl as ButtonVanillaComponent;\n"],"mappings":";;;;;;;;AAwBA,IAAM,8BAAA,GAAA,MAAA,aAEF,EACE,IACA,WACA,KACA,OACA,MACA,SACA,OACA,OACA,SACA,GAAG,SAEL,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;AAID,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,2BAAA,aAAa;GAAE;GAAM;GAAS;GAAO;GAAO;GAAS,CAKvD,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.vanilla.js","names":[],"sources":["../../../components/Button/Button.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 { buttonRecipe } from './Button.vanilla.css';\n\ntype ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n\ninterface ButtonOwnProps extends Omit<ButtonRecipeVariants, never>, CSSProps {}\n\nexport type ButtonVanillaProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n C,\n ButtonOwnProps\n>;\n\ntype ButtonVanillaComponent = PolymorphicComponent<'button', ButtonVanillaProps<ElementType>>;\n\nconst ButtonVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'button'>(\n {\n as,\n className,\n css,\n style,\n size,\n variant,\n state,\n ghost,\n rounded,\n ...props\n }: ButtonVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'button';\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 = buttonRecipe({ size, variant, state, ghost, rounded });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nButtonVanillaComponentImpl.displayName = 'ButtonVanilla';\n\nexport const ButtonVanilla = ButtonVanillaComponentImpl as ButtonVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,6BAA6B,YAE/B,EACE,IACA,WACA,KACA,OACA,MACA,SACA,OACA,OACA,SACA,GAAG,SAEL,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;AAID,QACE,oBAAC,WAAD;EACO;EACL,WAAW,GALK,aAAa;GAAE;GAAM;GAAS;GAAO;GAAO;GAAS,
|
|
1
|
+
{"version":3,"file":"Button.vanilla.js","names":[],"sources":["../../../components/Button/Button.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 { buttonRecipe } from './Button.vanilla.css';\n\ntype ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n\ninterface ButtonOwnProps extends Omit<ButtonRecipeVariants, never>, CSSProps {}\n\nexport type ButtonVanillaProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n C,\n ButtonOwnProps\n>;\n\ntype ButtonVanillaComponent = PolymorphicComponent<'button', ButtonVanillaProps<ElementType>>;\n\nconst ButtonVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'button'>(\n {\n as,\n className,\n css,\n style,\n size,\n variant,\n state,\n ghost,\n rounded,\n ...props\n }: ButtonVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'button';\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 = buttonRecipe({ size, variant, state, ghost, rounded });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nButtonVanillaComponentImpl.displayName = 'ButtonVanilla';\n\nexport const ButtonVanilla = ButtonVanillaComponentImpl as ButtonVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,6BAA6B,YAE/B,EACE,IACA,WACA,KACA,OACA,MACA,SACA,OACA,OACA,SACA,GAAG,SAEL,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;AAID,QACE,oBAAC,WAAD;EACO;EACL,WAAW,GALK,aAAa;GAAE;GAAM;GAAS;GAAO;GAAO;GAAS,CAKvD,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,2BAA2B,cAAc;AAEzC,IAAa,gBAAgB"}
|
|
@@ -4,6 +4,7 @@ const require_stitches_config = require("../../stitches.config.cjs");
|
|
|
4
4
|
const require_Box = require("../Box/Box.cjs");
|
|
5
5
|
const require_Button = require("../Button/Button.cjs");
|
|
6
6
|
const require_colorSchemeContext = require("../colorSchemeContext.cjs");
|
|
7
|
+
require("./prism-extend.cjs");
|
|
7
8
|
let _radix_ui_react_icons = require("@radix-ui/react-icons");
|
|
8
9
|
let react = require("react");
|
|
9
10
|
react = require_runtime.__toESM(react, 1);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.cjs","names":[],"sources":["../../../components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { Highlight, Language, themes } from 'prism-react-renderer';\nimport React, {\n ComponentProps,\n forwardRef,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { CSS, styled } from '../../stitches.config';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { useColorScheme } from '../colorSchemeContext';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\nimport { Prism } from './prism-extend';\n\nconst Pre = styled('pre', {\n m: 0,\n borderRadius: '$2',\n overflow: 'auto',\n border: '1px solid $colors$deepBlue3',\n fontSize: '$2',\n lineHeight: 1.6,\n\n variants: {\n noBorder: {\n true: { border: 'none' },\n },\n },\n});\n\nconst CopyButtonWrapper = styled('div', {\n position: 'absolute',\n zIndex: 1,\n variants: {\n position: {\n top: { top: '$2', right: '$3' },\n topLeft: { top: '$2', left: '$3' },\n bottomRight: { bottom: '$2', right: '$3' },\n bottomLeft: { bottom: '$2', left: '$3' },\n },\n },\n\n defaultVariants: {\n position: 'top',\n },\n});\n\nexport type CodeBlockProps = {\n lang?: CodeBlockLanguage;\n code: string;\n copyable?: boolean;\n copyText?: string;\n copiedText?: string;\n copyButtonAlign?: CodeBlockCopyButtonAlign;\n onCopy?: () => void;\n noBorder?: boolean;\n wrapText?: boolean;\n colorScheme?: 'light' | 'dark';\n maxHeight?: number | string;\n css?: CSS;\n} & Omit<ComponentProps<typeof Pre>, 'css'>;\n\nexport const CodeBlock = forwardRef<HTMLPreElement, CodeBlockProps>(\n (\n {\n lang = 'text',\n code,\n copyable = false,\n copyText,\n copiedText,\n copyButtonAlign = 'top right',\n onCopy,\n noBorder,\n wrapText = false,\n colorScheme,\n maxHeight = 424,\n css,\n style,\n className,\n ...props\n },\n ref,\n ) => {\n const systemScheme = useColorScheme();\n const resolvedScheme = colorScheme ?? systemScheme;\n const prismTheme = resolvedScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n const isBottom = copyButtonAlign.includes('bottom');\n const isLeft = copyButtonAlign.includes('left');\n const buttonPosition = isBottom\n ? isLeft\n ? 'bottomLeft'\n : 'bottomRight'\n : isLeft\n ? 'topLeft'\n : 'top';\n\n const [copied, setCopied] = useState(false);\n\n const preRef = useRef<HTMLPreElement | null>(\n null,\n ) as React.MutableRefObject<HTMLPreElement | null>;\n const buttonWrapperRef = useRef<HTMLDivElement>(null);\n\n const setPreRef = useCallback(\n (node: HTMLPreElement | null) => {\n preRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLPreElement | null>).current = node;\n },\n [ref],\n );\n\n useLayoutEffect(() => {\n if (!copyable) return;\n const pre = preRef.current;\n const wrapper = buttonWrapperRef.current;\n if (!pre || !wrapper) return;\n\n const isBottomAlign = isBottom;\n const borderH = noBorder ? 0 : 2;\n\n const update = () => {\n if (!isLeft) {\n const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);\n wrapper.style.right = `${16 + vScrollbar}px`;\n }\n if (isBottomAlign) {\n const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);\n wrapper.style.bottom = `${8 + hScrollbar}px`;\n }\n };\n\n update();\n const observer = new ResizeObserver(update);\n observer.observe(pre);\n return () => observer.disconnect();\n }, [copyable, isBottom, isLeft, noBorder]);\n\n const handleCopy = async () => {\n try {\n await navigator.clipboard.writeText(code);\n setCopied(true);\n onCopy?.();\n setTimeout(() => setCopied(false), 1500);\n } catch {\n // clipboard write failed (e.g. permission denied) — leave UI unchanged\n }\n };\n\n const copyButton = copyable ? (\n <Button\n variant=\"secondary\"\n ghost\n size=\"small\"\n type=\"button\"\n onClick={handleCopy}\n css={{\n color: '$hiContrast',\n gap: '$1',\n backgroundColor: '$codeBlockCopyButtonBg',\n height: '32px',\n }}\n >\n <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n {copied ? <CheckIcon /> : <CopyIcon />}\n </AccessibleIcon>\n {copied ? copiedText : copyText}\n </Button>\n ) : null;\n\n return (\n <Highlight\n theme={prismTheme}\n code={code}\n language={(Prism.languages[lang] != null ? lang : 'text') as Language}\n >\n {({\n className: highlightClass,\n style: highlightStyle,\n tokens,\n getLineProps,\n getTokenProps,\n }) => (\n <Box css={{ position: 'relative', ...css }}>\n <Pre\n ref={setPreRef}\n className={[highlightClass, className].filter(Boolean).join(' ')}\n style={{ maxHeight, ...highlightStyle, backgroundColor: 'inherit', ...style }}\n noBorder={noBorder}\n {...props}\n >\n <Box\n css={{\n p: '$4',\n ...(copyable && isLeft && isBottom ? { pb: '$7' } : {}),\n ...(copyable && isLeft && !isBottom ? { pt: '$7' } : {}),\n }}\n >\n {tokens.map((line, i) => (\n <div\n key={i}\n {...getLineProps({ line })}\n style={\n wrapText ? { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } : undefined\n }\n >\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </Box>\n </Pre>\n {copyButton && (\n <CopyButtonWrapper ref={buttonWrapperRef} position={buttonPosition}>\n {copyButton}\n </CopyButtonWrapper>\n )}\n </Box>\n )}\n </Highlight>\n );\n },\n);\n\nCodeBlock.displayName = 'CodeBlock';\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CodeBlock.cjs","names":[],"sources":["../../../components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { Highlight, Language, themes } from 'prism-react-renderer';\nimport React, {\n ComponentProps,\n forwardRef,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { CSS, styled } from '../../stitches.config';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { useColorScheme } from '../colorSchemeContext';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\nimport { Prism } from './prism-extend';\n\nconst Pre = styled('pre', {\n m: 0,\n borderRadius: '$2',\n overflow: 'auto',\n border: '1px solid $colors$deepBlue3',\n fontSize: '$2',\n lineHeight: 1.6,\n\n variants: {\n noBorder: {\n true: { border: 'none' },\n },\n },\n});\n\nconst CopyButtonWrapper = styled('div', {\n position: 'absolute',\n zIndex: 1,\n variants: {\n position: {\n top: { top: '$2', right: '$3' },\n topLeft: { top: '$2', left: '$3' },\n bottomRight: { bottom: '$2', right: '$3' },\n bottomLeft: { bottom: '$2', left: '$3' },\n },\n },\n\n defaultVariants: {\n position: 'top',\n },\n});\n\nexport type CodeBlockProps = {\n lang?: CodeBlockLanguage;\n code: string;\n copyable?: boolean;\n copyText?: string;\n copiedText?: string;\n copyButtonAlign?: CodeBlockCopyButtonAlign;\n onCopy?: () => void;\n noBorder?: boolean;\n wrapText?: boolean;\n colorScheme?: 'light' | 'dark';\n maxHeight?: number | string;\n css?: CSS;\n} & Omit<ComponentProps<typeof Pre>, 'css'>;\n\nexport const CodeBlock = forwardRef<HTMLPreElement, CodeBlockProps>(\n (\n {\n lang = 'text',\n code,\n copyable = false,\n copyText,\n copiedText,\n copyButtonAlign = 'top right',\n onCopy,\n noBorder,\n wrapText = false,\n colorScheme,\n maxHeight = 424,\n css,\n style,\n className,\n ...props\n },\n ref,\n ) => {\n const systemScheme = useColorScheme();\n const resolvedScheme = colorScheme ?? systemScheme;\n const prismTheme = resolvedScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n const isBottom = copyButtonAlign.includes('bottom');\n const isLeft = copyButtonAlign.includes('left');\n const buttonPosition = isBottom\n ? isLeft\n ? 'bottomLeft'\n : 'bottomRight'\n : isLeft\n ? 'topLeft'\n : 'top';\n\n const [copied, setCopied] = useState(false);\n\n const preRef = useRef<HTMLPreElement | null>(\n null,\n ) as React.MutableRefObject<HTMLPreElement | null>;\n const buttonWrapperRef = useRef<HTMLDivElement>(null);\n\n const setPreRef = useCallback(\n (node: HTMLPreElement | null) => {\n preRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLPreElement | null>).current = node;\n },\n [ref],\n );\n\n useLayoutEffect(() => {\n if (!copyable) return;\n const pre = preRef.current;\n const wrapper = buttonWrapperRef.current;\n if (!pre || !wrapper) return;\n\n const isBottomAlign = isBottom;\n const borderH = noBorder ? 0 : 2;\n\n const update = () => {\n if (!isLeft) {\n const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);\n wrapper.style.right = `${16 + vScrollbar}px`;\n }\n if (isBottomAlign) {\n const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);\n wrapper.style.bottom = `${8 + hScrollbar}px`;\n }\n };\n\n update();\n const observer = new ResizeObserver(update);\n observer.observe(pre);\n return () => observer.disconnect();\n }, [copyable, isBottom, isLeft, noBorder]);\n\n const handleCopy = async () => {\n try {\n await navigator.clipboard.writeText(code);\n setCopied(true);\n onCopy?.();\n setTimeout(() => setCopied(false), 1500);\n } catch {\n // clipboard write failed (e.g. permission denied) — leave UI unchanged\n }\n };\n\n const copyButton = copyable ? (\n <Button\n variant=\"secondary\"\n ghost\n size=\"small\"\n type=\"button\"\n onClick={handleCopy}\n css={{\n color: '$hiContrast',\n gap: '$1',\n backgroundColor: '$codeBlockCopyButtonBg',\n height: '32px',\n }}\n >\n <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n {copied ? <CheckIcon /> : <CopyIcon />}\n </AccessibleIcon>\n {copied ? copiedText : copyText}\n </Button>\n ) : null;\n\n return (\n <Highlight\n theme={prismTheme}\n code={code}\n language={(Prism.languages[lang] != null ? lang : 'text') as Language}\n >\n {({\n className: highlightClass,\n style: highlightStyle,\n tokens,\n getLineProps,\n getTokenProps,\n }) => (\n <Box css={{ position: 'relative', ...css }}>\n <Pre\n ref={setPreRef}\n className={[highlightClass, className].filter(Boolean).join(' ')}\n style={{ maxHeight, ...highlightStyle, backgroundColor: 'inherit', ...style }}\n noBorder={noBorder}\n {...props}\n >\n <Box\n css={{\n p: '$4',\n ...(copyable && isLeft && isBottom ? { pb: '$7' } : {}),\n ...(copyable && isLeft && !isBottom ? { pt: '$7' } : {}),\n }}\n >\n {tokens.map((line, i) => (\n <div\n key={i}\n {...getLineProps({ line })}\n style={\n wrapText ? { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } : undefined\n }\n >\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </Box>\n </Pre>\n {copyButton && (\n <CopyButtonWrapper ref={buttonWrapperRef} position={buttonPosition}>\n {copyButton}\n </CopyButtonWrapper>\n )}\n </Box>\n )}\n </Highlight>\n );\n },\n);\n\nCodeBlock.displayName = 'CodeBlock';\n"],"mappings":"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"}
|