@traefik-labs/faency 12.0.10 → 12.0.11

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.
Files changed (5) hide show
  1. package/dist/components/Button/Button.cjs +4 -4
  2. package/dist/components/Button/Button.cjs.map +1 -1
  3. package/dist/components/Button/Button.js +4 -4
  4. package/dist/components/Button/Button.js.map +1 -1
  5. package/package.json +1 -1
package/dist/components/Button/Button.cjs CHANGED
@@ -115,7 +115,7 @@ const StyledButton = stitches_config.styled("button", BUTTON_BASE_STYLES, {
115
115
  },
116
116
  variant: {
117
117
  primary: {
118
- bc: "$primary",
118
+ bc: "$buttonPrimaryBg",
119
119
  c: "$buttonPrimaryText",
120
120
  "&:focus-visible": {
121
121
  boxShadow: "inset 0 0 0 2px $colors$buttonPrimaryFocusBorder"
@@ -123,7 +123,7 @@ const StyledButton = stitches_config.styled("button", BUTTON_BASE_STYLES, {
123
123
  "@hover": {
124
124
  "&:hover": {
125
125
  "&::after": {
126
- backgroundColor: "$primary"
126
+ backgroundColor: "$buttonPrimaryBg"
127
127
  }
128
128
  }
129
129
  }
@@ -141,7 +141,7 @@ const StyledButton = stitches_config.styled("button", BUTTON_BASE_STYLES, {
141
141
  "@hover": {
142
142
  "&:hover": {
143
143
  "&::after": {
144
- backgroundColor: "$primary"
144
+ backgroundColor: "$buttonPrimaryBg"
145
145
  }
146
146
  }
147
147
  }
@@ -196,7 +196,7 @@ const StyledButton = stitches_config.styled("button", BUTTON_BASE_STYLES, {
196
196
  variant: "primary",
197
197
  ghost: "true",
198
198
  css: {
199
- color: "$primary",
199
+ color: "$buttonPrimaryBg",
200
200
  backgroundColor: "transparent",
201
201
  "@hover": {
202
202
  "&:hover": {
package/dist/components/Button/Button.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.cjs","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';\nimport { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';\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: '$primary',\n c: '$buttonPrimaryText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$primary',\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: '$primary',\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: '$primary',\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 },\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\nconst BaseButton = (props: ButtonProps): JSX.Element => <Button {...props} />;\nexport const ButtonForStory = modifyVariantsForStory<ButtonVariants, ButtonProps>(BaseButton);\n"],"names":["keyframes","styled","Slot","useMemo"],"mappings":"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"}
1
+ {"version":3,"file":"Button.cjs","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';\nimport { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';\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 },\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\nconst BaseButton = (props: ButtonProps): JSX.Element => <Button {...props} />;\nexport const ButtonForStory = modifyVariantsForStory<ButtonVariants, ButtonProps>(BaseButton);\n"],"names":["keyframes","styled","Slot","useMemo"],"mappings":"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"}
package/dist/components/Button/Button.js CHANGED
@@ -113,7 +113,7 @@ const StyledButton = styled("button", BUTTON_BASE_STYLES, {
113
113
  },
114
114
  variant: {
115
115
  primary: {
116
- bc: "$primary",
116
+ bc: "$buttonPrimaryBg",
117
117
  c: "$buttonPrimaryText",
118
118
  "&:focus-visible": {
119
119
  boxShadow: "inset 0 0 0 2px $colors$buttonPrimaryFocusBorder"
@@ -121,7 +121,7 @@ const StyledButton = styled("button", BUTTON_BASE_STYLES, {
121
121
  "@hover": {
122
122
  "&:hover": {
123
123
  "&::after": {
124
- backgroundColor: "$primary"
124
+ backgroundColor: "$buttonPrimaryBg"
125
125
  }
126
126
  }
127
127
  }
@@ -139,7 +139,7 @@ const StyledButton = styled("button", BUTTON_BASE_STYLES, {
139
139
  "@hover": {
140
140
  "&:hover": {
141
141
  "&::after": {
142
- backgroundColor: "$primary"
142
+ backgroundColor: "$buttonPrimaryBg"
143
143
  }
144
144
  }
145
145
  }
@@ -194,7 +194,7 @@ const StyledButton = styled("button", BUTTON_BASE_STYLES, {
194
194
  variant: "primary",
195
195
  ghost: "true",
196
196
  css: {
197
- color: "$primary",
197
+ color: "$buttonPrimaryBg",
198
198
  backgroundColor: "transparent",
199
199
  "@hover": {
200
200
  "&:hover": {
package/dist/components/Button/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","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';\nimport { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';\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: '$primary',\n c: '$buttonPrimaryText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$primary',\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: '$primary',\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: '$primary',\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 },\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\nconst BaseButton = (props: ButtonProps): JSX.Element => <Button {...props} />;\nexport const ButtonForStory = modifyVariantsForStory<ButtonVariants, ButtonProps>(BaseButton);\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","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';\nimport { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';\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 },\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\nconst BaseButton = (props: ButtonProps): JSX.Element => <Button {...props} />;\nexport const ButtonForStory = modifyVariantsForStory<ButtonVariants, ButtonProps>(BaseButton);\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@traefik-labs/faency",
3
3
  "description": "Traefik Labs design system",
4
- "version": "12.0.10",
4
+ "version": "12.0.11",
5
5
  "license": "Apache-2.0",
6
6
  "keywords": [
7
7
  "traefiklabs",