@traefik-labs/faency 12.2.3 → 12.3.1
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/Button/Button.cjs +3 -3
- package/dist/components/Button/Button.cjs.map +1 -1
- package/dist/components/Button/Button.js +3 -3
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Button/Button.vanilla.css.cjs.map +1 -1
- package/dist/components/Button/Button.vanilla.css.js.map +1 -1
- package/dist/components/Paragraph/Paragraph.vanilla.css.cjs +0 -1
- package/dist/components/Paragraph/Paragraph.vanilla.css.js +0 -1
- package/dist/components/Textarea/Textarea.vanilla.css.cjs +1 -0
- package/dist/components/Textarea/Textarea.vanilla.css.js +1 -0
- package/dist/components/Tooltip/Tooltip.cjs +0 -1
- package/dist/components/Tooltip/Tooltip.cjs.map +1 -1
- package/dist/components/Tooltip/Tooltip.js +0 -1
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/faency.css +87 -73
- package/dist/index.d.ts +93 -1
- package/dist/stitches.config.cjs +2 -1
- package/dist/stitches.config.cjs.map +1 -1
- package/dist/stitches.config.js +2 -1
- package/dist/stitches.config.js.map +1 -1
- package/dist/styles/cssProps.cjs +2 -1
- package/dist/styles/cssProps.cjs.map +1 -1
- package/dist/styles/cssProps.js +2 -1
- package/dist/styles/cssProps.js.map +1 -1
- package/dist/styles/themes.css.cjs.map +1 -1
- package/dist/styles/themes.css.js.map +1 -1
- package/package.json +11 -12
|
@@ -74,21 +74,21 @@ var StyledButton = require_stitches_config.styled("button", BUTTON_BASE_STYLES,
|
|
|
74
74
|
variants: {
|
|
75
75
|
size: {
|
|
76
76
|
small: {
|
|
77
|
-
borderRadius: "$
|
|
77
|
+
borderRadius: "$button",
|
|
78
78
|
height: "$5",
|
|
79
79
|
px: "$2",
|
|
80
80
|
fontSize: "$1",
|
|
81
81
|
lineHeight: "$sizes$5"
|
|
82
82
|
},
|
|
83
83
|
medium: {
|
|
84
|
-
borderRadius: "$
|
|
84
|
+
borderRadius: "$button",
|
|
85
85
|
height: "$6",
|
|
86
86
|
px: "$3",
|
|
87
87
|
fontSize: "$3",
|
|
88
88
|
lineHeight: "$sizes$6"
|
|
89
89
|
},
|
|
90
90
|
large: {
|
|
91
|
-
borderRadius: "$
|
|
91
|
+
borderRadius: "$button",
|
|
92
92
|
height: "$7",
|
|
93
93
|
px: "$3",
|
|
94
94
|
fontSize: "$3",
|
|
@@ -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: '$3',\n height: '$5',\n px: '$2',\n fontSize: '$1',\n lineHeight: '$sizes$5',\n },\n medium: {\n borderRadius: '$3',\n height: '$6',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$6',\n },\n large: {\n borderRadius: '$3',\n height: '$7',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$7',\n },\n },\n variant: {\n primary: {\n bc: '$buttonPrimaryBg',\n c: '$buttonPrimaryText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n secondary: {\n bc: '$buttonSecondaryBg',\n c: '$buttonSecondaryText',\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n '&:active': {\n boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n },\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n red: {\n backgroundColor: '$buttonRedBg',\n color: '$buttonRedText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n },\n },\n },\n state: {\n active: {\n bc: '$deepBlue5',\n c: '$deepBlue11',\n '&:active': {\n backgroundColor: '$deepBlue5',\n },\n },\n waiting: {\n bc: '$deepBlue3',\n boxShadow: `inset 0 0 0 1px $deepBlue4`,\n c: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n '&::after': {\n left: '-100%',\n width: '200%',\n ...backgroundSizeAnimation('medium'),\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@hover': {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$pill',\n },\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n ghost: 'true',\n css: {\n color: '$buttonPrimaryBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonPrimaryGhostHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n variant: 'primary',\n state: 'active',\n css: {\n backgroundColor: '$buttonPrimaryFocusBg',\n color: '$buttonPrimaryText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'secondary',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'secondary',\n ghost: true,\n css: {\n backgroundColor: 'transparent',\n color: '$buttonSecondaryText',\n boxShadow: 'none',\n },\n },\n {\n variant: 'red',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'red',\n state: 'active',\n css: {\n backgroundColor: '$buttonRedFocusBg',\n color: '$buttonRedText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'red',\n ghost: 'true',\n css: {\n color: '$buttonRedBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonRedHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n size: 'small',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('small'),\n },\n },\n {\n size: 'large',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('large'),\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n ButtonVariants & {\n css?: CSS;\n asChild?: boolean;\n as?: string;\n };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n ({ children, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n return (\n <Component ref={forwardedRef} {...props}>\n {children}\n </Component>\n );\n },\n);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Button.cjs","names":[],"sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\n\nexport const BUTTON_BASE_STYLES = {\n appearance: 'none',\n userSelect: 'none',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n};\n\nconst BG_SIZES = {\n small: '$sizes$8',\n medium: '$sizes$9',\n large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n $$bgSize: BG_SIZES[size],\n backgroundSize: '$$bgSize',\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n $colors$deepBlue4 33%,\n $colors$deepBlue4 66%,\n transparent 66%\n )`,\n animation: `${keyframes({\n '100%': { transform: 'translateX($$bgSize)' },\n })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n // Reset\n all: 'unset',\n alignItems: 'center',\n overflow: 'hidden',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n\n // Custom reset?\n display: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n lineHeight: '1',\n\n // Custom\n position: 'relative',\n height: '$5',\n px: '$2',\n fontFamily: '$rubik',\n fontSize: '$3',\n fontWeight: '$medium',\n fontVariantNumeric: 'tabular-nums',\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.05,\n },\n },\n },\n\n '&:active': {\n '&::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n variants: {\n size: {\n small: {\n borderRadius: '$button',\n height: '$5',\n px: '$2',\n fontSize: '$1',\n lineHeight: '$sizes$5',\n },\n medium: {\n borderRadius: '$button',\n height: '$6',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$6',\n },\n large: {\n borderRadius: '$button',\n height: '$7',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$7',\n },\n },\n variant: {\n primary: {\n bc: '$buttonPrimaryBg',\n c: '$buttonPrimaryText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n secondary: {\n bc: '$buttonSecondaryBg',\n c: '$buttonSecondaryText',\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n '&:active': {\n boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n },\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n red: {\n backgroundColor: '$buttonRedBg',\n color: '$buttonRedText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n },\n },\n },\n state: {\n active: {\n bc: '$deepBlue5',\n c: '$deepBlue11',\n '&:active': {\n backgroundColor: '$deepBlue5',\n },\n },\n waiting: {\n bc: '$deepBlue3',\n boxShadow: `inset 0 0 0 1px $deepBlue4`,\n c: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n '&::after': {\n left: '-100%',\n width: '200%',\n ...backgroundSizeAnimation('medium'),\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@hover': {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$pill',\n },\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n ghost: 'true',\n css: {\n color: '$buttonPrimaryBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonPrimaryGhostHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n variant: 'primary',\n state: 'active',\n css: {\n backgroundColor: '$buttonPrimaryFocusBg',\n color: '$buttonPrimaryText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'secondary',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'secondary',\n ghost: true,\n css: {\n backgroundColor: 'transparent',\n color: '$buttonSecondaryText',\n boxShadow: 'none',\n },\n },\n {\n variant: 'red',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'red',\n state: 'active',\n css: {\n backgroundColor: '$buttonRedFocusBg',\n color: '$buttonRedText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'red',\n ghost: 'true',\n css: {\n color: '$buttonRedBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonRedHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n size: 'small',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('small'),\n },\n },\n {\n size: 'large',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('large'),\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n ButtonVariants & {\n css?: CSS;\n asChild?: boolean;\n as?: string;\n };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n ({ children, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n return (\n <Component ref={forwardedRef} {...props}>\n {children}\n </Component>\n );\n },\n);\n"],"mappings":"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"}
|
|
@@ -72,21 +72,21 @@ var StyledButton = styled("button", BUTTON_BASE_STYLES, {
|
|
|
72
72
|
variants: {
|
|
73
73
|
size: {
|
|
74
74
|
small: {
|
|
75
|
-
borderRadius: "$
|
|
75
|
+
borderRadius: "$button",
|
|
76
76
|
height: "$5",
|
|
77
77
|
px: "$2",
|
|
78
78
|
fontSize: "$1",
|
|
79
79
|
lineHeight: "$sizes$5"
|
|
80
80
|
},
|
|
81
81
|
medium: {
|
|
82
|
-
borderRadius: "$
|
|
82
|
+
borderRadius: "$button",
|
|
83
83
|
height: "$6",
|
|
84
84
|
px: "$3",
|
|
85
85
|
fontSize: "$3",
|
|
86
86
|
lineHeight: "$sizes$6"
|
|
87
87
|
},
|
|
88
88
|
large: {
|
|
89
|
-
borderRadius: "$
|
|
89
|
+
borderRadius: "$button",
|
|
90
90
|
height: "$7",
|
|
91
91
|
px: "$3",
|
|
92
92
|
fontSize: "$3",
|
|
@@ -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: '$3',\n height: '$5',\n px: '$2',\n fontSize: '$1',\n lineHeight: '$sizes$5',\n },\n medium: {\n borderRadius: '$3',\n height: '$6',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$6',\n },\n large: {\n borderRadius: '$3',\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":";;;;;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,UAAU,EACtB,QAAQ,EAAE,WAAW,wBAAwB,EAC9C,CAAC,CAAC;CACJ;AAED,IAAa,eAAe,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,OAAO,MAAM,aAAa;AAUnD,IAAa,SAAS,MAAM,YACzB,EAAE,UAAU,SAAS,GAAG,SAAS,iBAAiB;AAEjD,QACE,oBAFgB,cAAe,UAAU,mBAAmB,cAAe,CAAC,QAAQ,CAAC,EAErF;EAAW,KAAK;EAAc,GAAI;EAC/B;EACS,CAAA;EAGjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.vanilla.css.cjs","names":[],"sources":["../../../components/Button/Button.vanilla.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe, RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\n// Background size constants for waiting animation\nconst BG_SIZES = {\n small: tokens.sizes['8'],\n medium: tokens.sizes['9'],\n large: tokens.sizes['10'],\n};\n\n// Keyframe animation for waiting state\nconst backgroundSlide = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['9']})` },\n});\n\nconst backgroundSlideSmall = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['8']})` },\n});\n\nconst backgroundSlideLarge = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['10']})` },\n});\n\n// Base button styles\nconst baseButton = style({\n // Reset\n appearance: 'none',\n all: 'unset',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Layout\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n position: 'relative',\n overflow: 'hidden',\n\n // Typography\n fontFamily: tokens.fonts.rubik,\n fontWeight: tokens.fontWeights.medium,\n fontVariantNumeric: 'tabular-nums',\n lineHeight: '1',\n\n // Pseudo-elements for hover/active effects\n selectors: {\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 '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.focusOutline}`,\n },\n '&:focus-visible::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:focus-visible::after': {\n opacity: 0.15,\n },\n '&:active::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n cursor: 'pointer',\n },\n '&:hover::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:hover::after': {\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport const buttonRecipe = recipe({\n base: baseButton,\n\n variants: {\n size: {\n small: {\n borderRadius: tokens.radii
|
|
1
|
+
{"version":3,"file":"Button.vanilla.css.cjs","names":[],"sources":["../../../components/Button/Button.vanilla.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe, RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\n// Background size constants for waiting animation\nconst BG_SIZES = {\n small: tokens.sizes['8'],\n medium: tokens.sizes['9'],\n large: tokens.sizes['10'],\n};\n\n// Keyframe animation for waiting state\nconst backgroundSlide = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['9']})` },\n});\n\nconst backgroundSlideSmall = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['8']})` },\n});\n\nconst backgroundSlideLarge = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['10']})` },\n});\n\n// Base button styles\nconst baseButton = style({\n // Reset\n appearance: 'none',\n all: 'unset',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Layout\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n position: 'relative',\n overflow: 'hidden',\n\n // Typography\n fontFamily: tokens.fonts.rubik,\n fontWeight: tokens.fontWeights.medium,\n fontVariantNumeric: 'tabular-nums',\n lineHeight: '1',\n\n // Pseudo-elements for hover/active effects\n selectors: {\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 '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.focusOutline}`,\n },\n '&:focus-visible::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:focus-visible::after': {\n opacity: 0.15,\n },\n '&:active::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n cursor: 'pointer',\n },\n '&:hover::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:hover::after': {\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport const buttonRecipe = recipe({\n base: baseButton,\n\n variants: {\n size: {\n small: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['5'],\n paddingLeft: tokens.space['2'],\n paddingRight: tokens.space['2'],\n fontSize: tokens.fontSizes['1'],\n lineHeight: tokens.sizes['5'],\n },\n medium: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['6'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n fontSize: tokens.fontSizes['3'],\n lineHeight: tokens.sizes['6'],\n },\n large: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['7'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n fontSize: tokens.fontSizes['3'],\n lineHeight: tokens.sizes['7'],\n },\n },\n variant: {\n primary: {\n backgroundColor: tokens.colors.primary,\n color: tokens.colors.buttonPrimaryText,\n selectors: {\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonPrimaryFocusBorder}`,\n },\n },\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover::after': {\n backgroundColor: tokens.colors.primary,\n },\n },\n },\n },\n },\n secondary: {\n backgroundColor: tokens.colors.buttonSecondaryBg,\n color: tokens.colors.buttonSecondaryText,\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonSecondaryBorder}`,\n selectors: {\n '&:active': {\n boxShadow: `inset 0 0 0 1px ${tokens.colors.buttonSecondaryBorder}`,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonSecondaryFocusBorder}`,\n },\n },\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover::after': {\n backgroundColor: tokens.colors.primary,\n },\n },\n },\n },\n },\n red: {\n backgroundColor: tokens.colors.buttonRedBg,\n color: tokens.colors.buttonRedText,\n selectors: {\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonRedFocusBg}`,\n },\n },\n },\n },\n state: {\n active: {\n backgroundColor: tokens.colors.deepBlue['5'],\n color: tokens.colors.deepBlue['11'],\n selectors: {\n '&:active': {\n backgroundColor: tokens.colors.deepBlue['5'],\n },\n },\n },\n waiting: {\n backgroundColor: tokens.colors.deepBlue['3'],\n boxShadow: `inset 0 0 0 1px ${tokens.colors.deepBlue['4']}`,\n color: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n selectors: {\n '&::after': {\n left: '-100%',\n width: '200%',\n backgroundSize: BG_SIZES.medium,\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n ${tokens.colors.deepBlue['4']} 33%,\n ${tokens.colors.deepBlue['4']} 66%,\n transparent 66%\n )`,\n animation: `${backgroundSlide} 500ms linear infinite`,\n },\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: tokens.radii.pill,\n },\n },\n },\n\n compoundVariants: [\n // Primary + Ghost\n {\n variants: { variant: 'primary', ghost: true },\n style: {\n color: tokens.colors.primary,\n backgroundColor: 'transparent',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n color: tokens.colors.buttonPrimaryGhostHoverText,\n backgroundColor: 'transparent',\n },\n },\n },\n },\n },\n },\n // Primary + Active\n {\n variants: { variant: 'primary', state: 'active' },\n style: {\n backgroundColor: tokens.colors.buttonPrimaryFocusBg,\n color: tokens.colors.buttonPrimaryText,\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n // Secondary + Waiting\n {\n variants: { variant: 'secondary', state: 'waiting' },\n style: {\n backgroundColor: tokens.colors.deepBlue['3'],\n color: 'transparent',\n },\n },\n // Secondary + Ghost\n {\n variants: { variant: 'secondary', ghost: true },\n style: {\n backgroundColor: 'transparent',\n color: tokens.colors.buttonSecondaryText,\n boxShadow: 'none',\n },\n },\n // Red + Waiting\n {\n variants: { variant: 'red', state: 'waiting' },\n style: {\n backgroundColor: tokens.colors.deepBlue['3'],\n color: 'transparent',\n },\n },\n // Red + Active\n {\n variants: { variant: 'red', state: 'active' },\n style: {\n backgroundColor: tokens.colors.buttonRedFocusBg,\n color: tokens.colors.buttonRedText,\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n // Red + Ghost\n {\n variants: { variant: 'red', ghost: true },\n style: {\n color: tokens.colors.buttonRedBg,\n backgroundColor: 'transparent',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n color: tokens.colors.buttonRedHoverText,\n backgroundColor: 'transparent',\n },\n },\n },\n },\n },\n },\n // Small + Waiting (specific animation)\n {\n variants: { size: 'small', state: 'waiting' },\n style: {\n selectors: {\n '&::after': {\n backgroundSize: BG_SIZES.small,\n animation: `${backgroundSlideSmall} 500ms linear infinite`,\n },\n },\n },\n },\n // Large + Waiting (specific animation)\n {\n variants: { size: 'large', state: 'waiting' },\n style: {\n selectors: {\n '&::after': {\n backgroundSize: BG_SIZES.large,\n animation: `${backgroundSlideLarge} 500ms linear infinite`,\n },\n },\n },\n },\n ],\n\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\n\nexport type ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.vanilla.css.js","names":[],"sources":["../../../components/Button/Button.vanilla.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe, RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\n// Background size constants for waiting animation\nconst BG_SIZES = {\n small: tokens.sizes['8'],\n medium: tokens.sizes['9'],\n large: tokens.sizes['10'],\n};\n\n// Keyframe animation for waiting state\nconst backgroundSlide = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['9']})` },\n});\n\nconst backgroundSlideSmall = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['8']})` },\n});\n\nconst backgroundSlideLarge = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['10']})` },\n});\n\n// Base button styles\nconst baseButton = style({\n // Reset\n appearance: 'none',\n all: 'unset',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Layout\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n position: 'relative',\n overflow: 'hidden',\n\n // Typography\n fontFamily: tokens.fonts.rubik,\n fontWeight: tokens.fontWeights.medium,\n fontVariantNumeric: 'tabular-nums',\n lineHeight: '1',\n\n // Pseudo-elements for hover/active effects\n selectors: {\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 '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.focusOutline}`,\n },\n '&:focus-visible::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:focus-visible::after': {\n opacity: 0.15,\n },\n '&:active::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n cursor: 'pointer',\n },\n '&:hover::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:hover::after': {\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport const buttonRecipe = recipe({\n base: baseButton,\n\n variants: {\n size: {\n small: {\n borderRadius: tokens.radii
|
|
1
|
+
{"version":3,"file":"Button.vanilla.css.js","names":[],"sources":["../../../components/Button/Button.vanilla.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe, RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\n// Background size constants for waiting animation\nconst BG_SIZES = {\n small: tokens.sizes['8'],\n medium: tokens.sizes['9'],\n large: tokens.sizes['10'],\n};\n\n// Keyframe animation for waiting state\nconst backgroundSlide = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['9']})` },\n});\n\nconst backgroundSlideSmall = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['8']})` },\n});\n\nconst backgroundSlideLarge = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['10']})` },\n});\n\n// Base button styles\nconst baseButton = style({\n // Reset\n appearance: 'none',\n all: 'unset',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Layout\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n position: 'relative',\n overflow: 'hidden',\n\n // Typography\n fontFamily: tokens.fonts.rubik,\n fontWeight: tokens.fontWeights.medium,\n fontVariantNumeric: 'tabular-nums',\n lineHeight: '1',\n\n // Pseudo-elements for hover/active effects\n selectors: {\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 '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.focusOutline}`,\n },\n '&:focus-visible::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:focus-visible::after': {\n opacity: 0.15,\n },\n '&:active::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n cursor: 'pointer',\n },\n '&:hover::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:hover::after': {\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport const buttonRecipe = recipe({\n base: baseButton,\n\n variants: {\n size: {\n small: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['5'],\n paddingLeft: tokens.space['2'],\n paddingRight: tokens.space['2'],\n fontSize: tokens.fontSizes['1'],\n lineHeight: tokens.sizes['5'],\n },\n medium: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['6'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n fontSize: tokens.fontSizes['3'],\n lineHeight: tokens.sizes['6'],\n },\n large: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['7'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n fontSize: tokens.fontSizes['3'],\n lineHeight: tokens.sizes['7'],\n },\n },\n variant: {\n primary: {\n backgroundColor: tokens.colors.primary,\n color: tokens.colors.buttonPrimaryText,\n selectors: {\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonPrimaryFocusBorder}`,\n },\n },\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover::after': {\n backgroundColor: tokens.colors.primary,\n },\n },\n },\n },\n },\n secondary: {\n backgroundColor: tokens.colors.buttonSecondaryBg,\n color: tokens.colors.buttonSecondaryText,\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonSecondaryBorder}`,\n selectors: {\n '&:active': {\n boxShadow: `inset 0 0 0 1px ${tokens.colors.buttonSecondaryBorder}`,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonSecondaryFocusBorder}`,\n },\n },\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover::after': {\n backgroundColor: tokens.colors.primary,\n },\n },\n },\n },\n },\n red: {\n backgroundColor: tokens.colors.buttonRedBg,\n color: tokens.colors.buttonRedText,\n selectors: {\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonRedFocusBg}`,\n },\n },\n },\n },\n state: {\n active: {\n backgroundColor: tokens.colors.deepBlue['5'],\n color: tokens.colors.deepBlue['11'],\n selectors: {\n '&:active': {\n backgroundColor: tokens.colors.deepBlue['5'],\n },\n },\n },\n waiting: {\n backgroundColor: tokens.colors.deepBlue['3'],\n boxShadow: `inset 0 0 0 1px ${tokens.colors.deepBlue['4']}`,\n color: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n selectors: {\n '&::after': {\n left: '-100%',\n width: '200%',\n backgroundSize: BG_SIZES.medium,\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n ${tokens.colors.deepBlue['4']} 33%,\n ${tokens.colors.deepBlue['4']} 66%,\n transparent 66%\n )`,\n animation: `${backgroundSlide} 500ms linear infinite`,\n },\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: tokens.radii.pill,\n },\n },\n },\n\n compoundVariants: [\n // Primary + Ghost\n {\n variants: { variant: 'primary', ghost: true },\n style: {\n color: tokens.colors.primary,\n backgroundColor: 'transparent',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n color: tokens.colors.buttonPrimaryGhostHoverText,\n backgroundColor: 'transparent',\n },\n },\n },\n },\n },\n },\n // Primary + Active\n {\n variants: { variant: 'primary', state: 'active' },\n style: {\n backgroundColor: tokens.colors.buttonPrimaryFocusBg,\n color: tokens.colors.buttonPrimaryText,\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n // Secondary + Waiting\n {\n variants: { variant: 'secondary', state: 'waiting' },\n style: {\n backgroundColor: tokens.colors.deepBlue['3'],\n color: 'transparent',\n },\n },\n // Secondary + Ghost\n {\n variants: { variant: 'secondary', ghost: true },\n style: {\n backgroundColor: 'transparent',\n color: tokens.colors.buttonSecondaryText,\n boxShadow: 'none',\n },\n },\n // Red + Waiting\n {\n variants: { variant: 'red', state: 'waiting' },\n style: {\n backgroundColor: tokens.colors.deepBlue['3'],\n color: 'transparent',\n },\n },\n // Red + Active\n {\n variants: { variant: 'red', state: 'active' },\n style: {\n backgroundColor: tokens.colors.buttonRedFocusBg,\n color: tokens.colors.buttonRedText,\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n // Red + Ghost\n {\n variants: { variant: 'red', ghost: true },\n style: {\n color: tokens.colors.buttonRedBg,\n backgroundColor: 'transparent',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n color: tokens.colors.buttonRedHoverText,\n backgroundColor: 'transparent',\n },\n },\n },\n },\n },\n },\n // Small + Waiting (specific animation)\n {\n variants: { size: 'small', state: 'waiting' },\n style: {\n selectors: {\n '&::after': {\n backgroundSize: BG_SIZES.small,\n animation: `${backgroundSlideSmall} 500ms linear infinite`,\n },\n },\n },\n },\n // Large + Waiting (specific animation)\n {\n variants: { size: 'large', state: 'waiting' },\n style: {\n selectors: {\n '&::after': {\n backgroundSize: BG_SIZES.large,\n animation: `${backgroundSlideLarge} 500ms linear infinite`,\n },\n },\n },\n },\n ],\n\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\n\nexport type ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n"],"mappings":""}
|
|
@@ -63,7 +63,6 @@ var Tooltip = react.default.forwardRef(({ children, content, open, defaultOpen,
|
|
|
63
63
|
}));
|
|
64
64
|
var TooltipRoot = _radix_ui_react_tooltip.Root;
|
|
65
65
|
var TooltipTrigger = _radix_ui_react_tooltip.Trigger;
|
|
66
|
-
_radix_ui_react_tooltip.Portal;
|
|
67
66
|
//#endregion
|
|
68
67
|
exports.Tooltip = Tooltip;
|
|
69
68
|
exports.TooltipContent = TooltipContent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.cjs","names":[],"sources":["../../../components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { Text } from '../Text';\n\nexport type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root> &\n Omit<React.ComponentProps<typeof TooltipPrimitive.Content>, 'content'> & {\n children: React.ReactElement | React.ReactNode;\n content: React.ReactElement | React.ReactNode;\n multiline?: boolean;\n css?: CSS;\n };\n\nconst Content = styled(TooltipPrimitive.Content, {\n color: '$tooltipText',\n backgroundColor: '$tooltipContentBg',\n borderRadius: '$3',\n padding: '$2',\n\n variants: {\n multiline: {\n true: {\n maxWidth: 250,\n pb: 7,\n },\n },\n },\n});\n\nconst ArrowBox = styled(Box, {\n color: '$tooltipContentBg',\n});\n\nexport const TooltipContent = React.forwardRef<\n React.ElementRef<typeof Content>,\n Partial<TooltipProps>\n>(({ css, multiline, children, ...props }, forwardedRef) => {\n const isContentString = React.useMemo(() => typeof children === 'string', [children]);\n return (\n <Content\n css={css}\n side=\"top\"\n align=\"center\"\n sideOffset={5}\n {...(props as React.ComponentProps<typeof TooltipPrimitive.Content>)}\n multiline={multiline}\n ref={forwardedRef}\n >\n {isContentString ? (\n <Text\n size=\"1\"\n as=\"p\"\n css={{\n color: 'currentColor',\n lineHeight: multiline ? '20px' : undefined,\n }}\n >\n {children}\n </Text>\n ) : (\n children\n )}\n <ArrowBox>\n <TooltipPrimitive.Arrow\n offset={5}\n width={11}\n height={5}\n style={{\n fill: 'currentColor',\n }}\n />\n </ArrowBox>\n </Content>\n );\n});\n\nexport const Tooltip = React.forwardRef<React.ElementRef<typeof Content>, TooltipProps>(\n (\n { children, content, open, defaultOpen, onOpenChange, multiline, css, ...props },\n forwardedRef,\n ) => (\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n delayDuration={400}\n >\n <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>\n <TooltipPrimitive.Portal>\n <TooltipContent css={css} multiline={multiline} ref={forwardedRef} {...props}>\n {content}\n </TooltipContent>\n </TooltipPrimitive.Portal>\n </TooltipPrimitive.Root>\n ),\n);\n\nexport const TooltipRoot = TooltipPrimitive.Root;\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\nexport const TooltipPortal = TooltipPrimitive.Portal;\n\nexport type TooltipVariants = VariantProps<typeof Tooltip>;\n"],"mappings":";;;;;;;;;;AAeA,IAAM,UAAU,wBAAA,OAAO,wBAAiB,SAAS;CAC/C,OAAO;CACP,iBAAiB;CACjB,cAAc;CACd,SAAS;CAET,UAAU,EACR,WAAW,EACT,MAAM;EACJ,UAAU;EACV,IAAI;EACL,EACF,EACF;CACF,CAAC;AAEF,IAAM,WAAW,wBAAA,OAAO,YAAA,KAAK,EAC3B,OAAO,qBACR,CAAC;AAEF,IAAa,iBAAiB,MAAA,QAAM,YAGjC,EAAE,KAAK,WAAW,UAAU,GAAG,SAAS,iBAAiB;CAC1D,MAAM,kBAAkB,MAAA,QAAM,cAAc,OAAO,aAAa,UAAU,CAAC,SAAS,CAAC;AACrF,QACE,iBAAA,GAAA,kBAAA,MAAC,SAAD;EACO;EACL,MAAK;EACL,OAAM;EACN,YAAY;EACZ,GAAK;EACM;EACX,KAAK;YAPP,CASG,kBACC,iBAAA,GAAA,kBAAA,KAAC,aAAA,MAAD;GACE,MAAK;GACL,IAAG;GACH,KAAK;IACH,OAAO;IACP,YAAY,YAAY,SAAS,KAAA;IAClC;GAEA;GACI,CAAA,GAEP,UAEF,iBAAA,GAAA,kBAAA,KAAC,UAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,wBAAiB,OAAlB;GACE,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO,EACL,MAAM,gBACP;GACD,CAAA,EACO,CAAA,CACH;;EAEZ;AAEF,IAAa,UAAU,MAAA,QAAM,YAEzB,EAAE,UAAU,SAAS,MAAM,aAAa,cAAc,WAAW,KAAK,GAAG,SACzE,iBAEA,iBAAA,GAAA,kBAAA,MAAC,wBAAiB,MAAlB;CACQ;CACO;CACC;CACd,eAAe;WAJjB,CAME,iBAAA,GAAA,kBAAA,KAAC,wBAAiB,SAAlB;EAA0B,SAAA;EAAS;EAAoC,CAAA,EACvE,iBAAA,GAAA,kBAAA,KAAC,wBAAiB,QAAlB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAqB;EAAgB;EAAW,KAAK;EAAc,GAAI;YACpE;EACc,CAAA,EACO,CAAA,CACJ;GAE3B;AAED,IAAa,cAAc,wBAAiB;AAC5C,IAAa,iBAAiB,wBAAiB
|
|
1
|
+
{"version":3,"file":"Tooltip.cjs","names":[],"sources":["../../../components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { Text } from '../Text';\n\nexport type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root> &\n Omit<React.ComponentProps<typeof TooltipPrimitive.Content>, 'content'> & {\n children: React.ReactElement | React.ReactNode;\n content: React.ReactElement | React.ReactNode;\n multiline?: boolean;\n css?: CSS;\n };\n\nconst Content = styled(TooltipPrimitive.Content, {\n color: '$tooltipText',\n backgroundColor: '$tooltipContentBg',\n borderRadius: '$3',\n padding: '$2',\n\n variants: {\n multiline: {\n true: {\n maxWidth: 250,\n pb: 7,\n },\n },\n },\n});\n\nconst ArrowBox = styled(Box, {\n color: '$tooltipContentBg',\n});\n\nexport const TooltipContent = React.forwardRef<\n React.ElementRef<typeof Content>,\n Partial<TooltipProps>\n>(({ css, multiline, children, ...props }, forwardedRef) => {\n const isContentString = React.useMemo(() => typeof children === 'string', [children]);\n return (\n <Content\n css={css}\n side=\"top\"\n align=\"center\"\n sideOffset={5}\n {...(props as React.ComponentProps<typeof TooltipPrimitive.Content>)}\n multiline={multiline}\n ref={forwardedRef}\n >\n {isContentString ? (\n <Text\n size=\"1\"\n as=\"p\"\n css={{\n color: 'currentColor',\n lineHeight: multiline ? '20px' : undefined,\n }}\n >\n {children}\n </Text>\n ) : (\n children\n )}\n <ArrowBox>\n <TooltipPrimitive.Arrow\n offset={5}\n width={11}\n height={5}\n style={{\n fill: 'currentColor',\n }}\n />\n </ArrowBox>\n </Content>\n );\n});\n\nexport const Tooltip = React.forwardRef<React.ElementRef<typeof Content>, TooltipProps>(\n (\n { children, content, open, defaultOpen, onOpenChange, multiline, css, ...props },\n forwardedRef,\n ) => (\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n delayDuration={400}\n >\n <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>\n <TooltipPrimitive.Portal>\n <TooltipContent css={css} multiline={multiline} ref={forwardedRef} {...props}>\n {content}\n </TooltipContent>\n </TooltipPrimitive.Portal>\n </TooltipPrimitive.Root>\n ),\n);\n\nexport const TooltipRoot = TooltipPrimitive.Root;\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\nexport const TooltipPortal = TooltipPrimitive.Portal;\n\nexport type TooltipVariants = VariantProps<typeof Tooltip>;\n"],"mappings":";;;;;;;;;;AAeA,IAAM,UAAU,wBAAA,OAAO,wBAAiB,SAAS;CAC/C,OAAO;CACP,iBAAiB;CACjB,cAAc;CACd,SAAS;CAET,UAAU,EACR,WAAW,EACT,MAAM;EACJ,UAAU;EACV,IAAI;EACL,EACF,EACF;CACF,CAAC;AAEF,IAAM,WAAW,wBAAA,OAAO,YAAA,KAAK,EAC3B,OAAO,qBACR,CAAC;AAEF,IAAa,iBAAiB,MAAA,QAAM,YAGjC,EAAE,KAAK,WAAW,UAAU,GAAG,SAAS,iBAAiB;CAC1D,MAAM,kBAAkB,MAAA,QAAM,cAAc,OAAO,aAAa,UAAU,CAAC,SAAS,CAAC;AACrF,QACE,iBAAA,GAAA,kBAAA,MAAC,SAAD;EACO;EACL,MAAK;EACL,OAAM;EACN,YAAY;EACZ,GAAK;EACM;EACX,KAAK;YAPP,CASG,kBACC,iBAAA,GAAA,kBAAA,KAAC,aAAA,MAAD;GACE,MAAK;GACL,IAAG;GACH,KAAK;IACH,OAAO;IACP,YAAY,YAAY,SAAS,KAAA;IAClC;GAEA;GACI,CAAA,GAEP,UAEF,iBAAA,GAAA,kBAAA,KAAC,UAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,wBAAiB,OAAlB;GACE,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO,EACL,MAAM,gBACP;GACD,CAAA,EACO,CAAA,CACH;;EAEZ;AAEF,IAAa,UAAU,MAAA,QAAM,YAEzB,EAAE,UAAU,SAAS,MAAM,aAAa,cAAc,WAAW,KAAK,GAAG,SACzE,iBAEA,iBAAA,GAAA,kBAAA,MAAC,wBAAiB,MAAlB;CACQ;CACO;CACC;CACd,eAAe;WAJjB,CAME,iBAAA,GAAA,kBAAA,KAAC,wBAAiB,SAAlB;EAA0B,SAAA;EAAS;EAAoC,CAAA,EACvE,iBAAA,GAAA,kBAAA,KAAC,wBAAiB,QAAlB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAqB;EAAgB;EAAW,KAAK;EAAc,GAAI;YACpE;EACc,CAAA,EACO,CAAA,CACJ;GAE3B;AAED,IAAa,cAAc,wBAAiB;AAC5C,IAAa,iBAAiB,wBAAiB"}
|
|
@@ -60,7 +60,6 @@ var Tooltip = React.forwardRef(({ children, content, open, defaultOpen, onOpenCh
|
|
|
60
60
|
}));
|
|
61
61
|
var TooltipRoot = TooltipPrimitive.Root;
|
|
62
62
|
var TooltipTrigger = TooltipPrimitive.Trigger;
|
|
63
|
-
TooltipPrimitive.Portal;
|
|
64
63
|
//#endregion
|
|
65
64
|
export { Tooltip, TooltipContent, TooltipRoot, TooltipTrigger };
|
|
66
65
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","names":[],"sources":["../../../components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { Text } from '../Text';\n\nexport type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root> &\n Omit<React.ComponentProps<typeof TooltipPrimitive.Content>, 'content'> & {\n children: React.ReactElement | React.ReactNode;\n content: React.ReactElement | React.ReactNode;\n multiline?: boolean;\n css?: CSS;\n };\n\nconst Content = styled(TooltipPrimitive.Content, {\n color: '$tooltipText',\n backgroundColor: '$tooltipContentBg',\n borderRadius: '$3',\n padding: '$2',\n\n variants: {\n multiline: {\n true: {\n maxWidth: 250,\n pb: 7,\n },\n },\n },\n});\n\nconst ArrowBox = styled(Box, {\n color: '$tooltipContentBg',\n});\n\nexport const TooltipContent = React.forwardRef<\n React.ElementRef<typeof Content>,\n Partial<TooltipProps>\n>(({ css, multiline, children, ...props }, forwardedRef) => {\n const isContentString = React.useMemo(() => typeof children === 'string', [children]);\n return (\n <Content\n css={css}\n side=\"top\"\n align=\"center\"\n sideOffset={5}\n {...(props as React.ComponentProps<typeof TooltipPrimitive.Content>)}\n multiline={multiline}\n ref={forwardedRef}\n >\n {isContentString ? (\n <Text\n size=\"1\"\n as=\"p\"\n css={{\n color: 'currentColor',\n lineHeight: multiline ? '20px' : undefined,\n }}\n >\n {children}\n </Text>\n ) : (\n children\n )}\n <ArrowBox>\n <TooltipPrimitive.Arrow\n offset={5}\n width={11}\n height={5}\n style={{\n fill: 'currentColor',\n }}\n />\n </ArrowBox>\n </Content>\n );\n});\n\nexport const Tooltip = React.forwardRef<React.ElementRef<typeof Content>, TooltipProps>(\n (\n { children, content, open, defaultOpen, onOpenChange, multiline, css, ...props },\n forwardedRef,\n ) => (\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n delayDuration={400}\n >\n <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>\n <TooltipPrimitive.Portal>\n <TooltipContent css={css} multiline={multiline} ref={forwardedRef} {...props}>\n {content}\n </TooltipContent>\n </TooltipPrimitive.Portal>\n </TooltipPrimitive.Root>\n ),\n);\n\nexport const TooltipRoot = TooltipPrimitive.Root;\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\nexport const TooltipPortal = TooltipPrimitive.Portal;\n\nexport type TooltipVariants = VariantProps<typeof Tooltip>;\n"],"mappings":";;;;;;;AAeA,IAAM,UAAU,OAAO,iBAAiB,SAAS;CAC/C,OAAO;CACP,iBAAiB;CACjB,cAAc;CACd,SAAS;CAET,UAAU,EACR,WAAW,EACT,MAAM;EACJ,UAAU;EACV,IAAI;EACL,EACF,EACF;CACF,CAAC;AAEF,IAAM,WAAW,OAAO,KAAK,EAC3B,OAAO,qBACR,CAAC;AAEF,IAAa,iBAAiB,MAAM,YAGjC,EAAE,KAAK,WAAW,UAAU,GAAG,SAAS,iBAAiB;CAC1D,MAAM,kBAAkB,MAAM,cAAc,OAAO,aAAa,UAAU,CAAC,SAAS,CAAC;AACrF,QACE,qBAAC,SAAD;EACO;EACL,MAAK;EACL,OAAM;EACN,YAAY;EACZ,GAAK;EACM;EACX,KAAK;YAPP,CASG,kBACC,oBAAC,MAAD;GACE,MAAK;GACL,IAAG;GACH,KAAK;IACH,OAAO;IACP,YAAY,YAAY,SAAS,KAAA;IAClC;GAEA;GACI,CAAA,GAEP,UAEF,oBAAC,UAAD,EAAA,UACE,oBAAC,iBAAiB,OAAlB;GACE,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO,EACL,MAAM,gBACP;GACD,CAAA,EACO,CAAA,CACH;;EAEZ;AAEF,IAAa,UAAU,MAAM,YAEzB,EAAE,UAAU,SAAS,MAAM,aAAa,cAAc,WAAW,KAAK,GAAG,SACzE,iBAEA,qBAAC,iBAAiB,MAAlB;CACQ;CACO;CACC;CACd,eAAe;WAJjB,CAME,oBAAC,iBAAiB,SAAlB;EAA0B,SAAA;EAAS;EAAoC,CAAA,EACvE,oBAAC,iBAAiB,QAAlB,EAAA,UACE,oBAAC,gBAAD;EAAqB;EAAgB;EAAW,KAAK;EAAc,GAAI;YACpE;EACc,CAAA,EACO,CAAA,CACJ;GAE3B;AAED,IAAa,cAAc,iBAAiB;AAC5C,IAAa,iBAAiB,iBAAiB
|
|
1
|
+
{"version":3,"file":"Tooltip.js","names":[],"sources":["../../../components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { Text } from '../Text';\n\nexport type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root> &\n Omit<React.ComponentProps<typeof TooltipPrimitive.Content>, 'content'> & {\n children: React.ReactElement | React.ReactNode;\n content: React.ReactElement | React.ReactNode;\n multiline?: boolean;\n css?: CSS;\n };\n\nconst Content = styled(TooltipPrimitive.Content, {\n color: '$tooltipText',\n backgroundColor: '$tooltipContentBg',\n borderRadius: '$3',\n padding: '$2',\n\n variants: {\n multiline: {\n true: {\n maxWidth: 250,\n pb: 7,\n },\n },\n },\n});\n\nconst ArrowBox = styled(Box, {\n color: '$tooltipContentBg',\n});\n\nexport const TooltipContent = React.forwardRef<\n React.ElementRef<typeof Content>,\n Partial<TooltipProps>\n>(({ css, multiline, children, ...props }, forwardedRef) => {\n const isContentString = React.useMemo(() => typeof children === 'string', [children]);\n return (\n <Content\n css={css}\n side=\"top\"\n align=\"center\"\n sideOffset={5}\n {...(props as React.ComponentProps<typeof TooltipPrimitive.Content>)}\n multiline={multiline}\n ref={forwardedRef}\n >\n {isContentString ? (\n <Text\n size=\"1\"\n as=\"p\"\n css={{\n color: 'currentColor',\n lineHeight: multiline ? '20px' : undefined,\n }}\n >\n {children}\n </Text>\n ) : (\n children\n )}\n <ArrowBox>\n <TooltipPrimitive.Arrow\n offset={5}\n width={11}\n height={5}\n style={{\n fill: 'currentColor',\n }}\n />\n </ArrowBox>\n </Content>\n );\n});\n\nexport const Tooltip = React.forwardRef<React.ElementRef<typeof Content>, TooltipProps>(\n (\n { children, content, open, defaultOpen, onOpenChange, multiline, css, ...props },\n forwardedRef,\n ) => (\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n delayDuration={400}\n >\n <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>\n <TooltipPrimitive.Portal>\n <TooltipContent css={css} multiline={multiline} ref={forwardedRef} {...props}>\n {content}\n </TooltipContent>\n </TooltipPrimitive.Portal>\n </TooltipPrimitive.Root>\n ),\n);\n\nexport const TooltipRoot = TooltipPrimitive.Root;\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\nexport const TooltipPortal = TooltipPrimitive.Portal;\n\nexport type TooltipVariants = VariantProps<typeof Tooltip>;\n"],"mappings":";;;;;;;AAeA,IAAM,UAAU,OAAO,iBAAiB,SAAS;CAC/C,OAAO;CACP,iBAAiB;CACjB,cAAc;CACd,SAAS;CAET,UAAU,EACR,WAAW,EACT,MAAM;EACJ,UAAU;EACV,IAAI;EACL,EACF,EACF;CACF,CAAC;AAEF,IAAM,WAAW,OAAO,KAAK,EAC3B,OAAO,qBACR,CAAC;AAEF,IAAa,iBAAiB,MAAM,YAGjC,EAAE,KAAK,WAAW,UAAU,GAAG,SAAS,iBAAiB;CAC1D,MAAM,kBAAkB,MAAM,cAAc,OAAO,aAAa,UAAU,CAAC,SAAS,CAAC;AACrF,QACE,qBAAC,SAAD;EACO;EACL,MAAK;EACL,OAAM;EACN,YAAY;EACZ,GAAK;EACM;EACX,KAAK;YAPP,CASG,kBACC,oBAAC,MAAD;GACE,MAAK;GACL,IAAG;GACH,KAAK;IACH,OAAO;IACP,YAAY,YAAY,SAAS,KAAA;IAClC;GAEA;GACI,CAAA,GAEP,UAEF,oBAAC,UAAD,EAAA,UACE,oBAAC,iBAAiB,OAAlB;GACE,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO,EACL,MAAM,gBACP;GACD,CAAA,EACO,CAAA,CACH;;EAEZ;AAEF,IAAa,UAAU,MAAM,YAEzB,EAAE,UAAU,SAAS,MAAM,aAAa,cAAc,WAAW,KAAK,GAAG,SACzE,iBAEA,qBAAC,iBAAiB,MAAlB;CACQ;CACO;CACC;CACd,eAAe;WAJjB,CAME,oBAAC,iBAAiB,SAAlB;EAA0B,SAAA;EAAS;EAAoC,CAAA,EACvE,oBAAC,iBAAiB,QAAlB,EAAA,UACE,oBAAC,gBAAD;EAAqB;EAAgB;EAAW,KAAK;EAAc,GAAI;YACpE;EACc,CAAA,EACO,CAAA,CACJ;GAE3B;AAED,IAAa,cAAc,iBAAiB;AAC5C,IAAa,iBAAiB,iBAAiB"}
|