@traefik-labs/faency 12.0.7

package/dist/components/Button/Button.cjs

@@ -0,0 +1,295 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactSlot = require("@radix-ui/react-slot");
+const React = require("react");
+const stitches_config = require("../../stitches.config.cjs");
+const BUTTON_BASE_STYLES = {
+  appearance: "none",
+  userSelect: "none",
+  boxSizing: "border-box",
+  border: "none",
+  WebkitTapHighlightColor: "rgba(0,0,0,0)",
+  "&:disabled": {
+    pointerEvents: "none",
+    opacity: 0.5
+  }
+};
+const BG_SIZES = {
+  small: "$sizes$8",
+  medium: "$sizes$9",
+  large: "$sizes$10"
+};
+const backgroundSizeAnimation = (size) => ({
+  $$bgSize: BG_SIZES[size],
+  backgroundSize: "$$bgSize",
+  backgroundImage: `linear-gradient(
+            -45deg,
+            transparent 33%,
+            $colors$deepBlue4 33%,
+            $colors$deepBlue4 66%,
+            transparent 66%
+          )`,
+  animation: `${stitches_config.keyframes({
+    "100%": { transform: "translateX($$bgSize)" }
+  })} 500ms linear infinite`
+});
+const StyledButton = stitches_config.styled("button", BUTTON_BASE_STYLES, {
+  // Reset
+  all: "unset",
+  alignItems: "center",
+  overflow: "hidden",
+  "&::before": {
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    inset: 0
+  },
+  "&::after": {
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    inset: 0
+  },
+  // Custom reset?
+  display: "inline-flex",
+  flexShrink: 0,
+  justifyContent: "center",
+  lineHeight: "1",
+  // Custom
+  position: "relative",
+  height: "$5",
+  px: "$2",
+  fontFamily: "$rubik",
+  fontSize: "$3",
+  fontWeight: "$medium",
+  fontVariantNumeric: "tabular-nums",
+  "&:focus-visible": {
+    boxShadow: `inset 0 0 0 2px $colors$focusOutline`,
+    "&::before": {
+      backgroundColor: "rgba(255, 255, 255, 0.15)"
+    },
+    "&::after": {
+      opacity: 0.15
+    }
+  },
+  "@hover": {
+    "&:hover": {
+      cursor: "pointer",
+      "&::before": {
+        backgroundColor: "rgba(255, 255, 255, 0.15)"
+      },
+      "&::after": {
+        opacity: 0.05
+      }
+    }
+  },
+  "&:active": {
+    "&::before": {
+      backgroundColor: "rgba(0, 0, 0, 0.15)"
+    }
+  },
+  variants: {
+    size: {
+      small: {
+        borderRadius: "$3",
+        height: "$5",
+        px: "$2",
+        fontSize: "$1",
+        lineHeight: "$sizes$5"
+      },
+      medium: {
+        borderRadius: "$3",
+        height: "$6",
+        px: "$3",
+        fontSize: "$3",
+        lineHeight: "$sizes$6"
+      },
+      large: {
+        borderRadius: "$3",
+        height: "$7",
+        px: "$3",
+        fontSize: "$3",
+        lineHeight: "$sizes$7"
+      }
+    },
+    variant: {
+      primary: {
+        bc: "$primary",
+        c: "$buttonPrimaryText",
+        "&:focus-visible": {
+          boxShadow: "inset 0 0 0 2px $colors$buttonPrimaryFocusBorder"
+        },
+        "@hover": {
+          "&:hover": {
+            "&::after": {
+              backgroundColor: "$primary"
+            }
+          }
+        }
+      },
+      secondary: {
+        bc: "$buttonSecondaryBg",
+        c: "$buttonSecondaryText",
+        boxShadow: "inset 0 0 0 2px $colors$buttonSecondaryBorder",
+        "&:active": {
+          boxShadow: "inset 0 0 0 1px $colors$buttonSecondaryBorder"
+        },
+        "&:focus-visible": {
+          boxShadow: "inset 0 0 0 2px $colors$buttonSecondaryFocusBorder"
+        },
+        "@hover": {
+          "&:hover": {
+            "&::after": {
+              backgroundColor: "$primary"
+            }
+          }
+        }
+      },
+      red: {
+        backgroundColor: "$buttonRedBg",
+        color: "$buttonRedText",
+        "&:focus-visible": {
+          boxShadow: "inset 0 0 0 2px $colors$buttonRedFocusBg"
+        }
+      }
+    },
+    state: {
+      active: {
+        bc: "$deepBlue5",
+        c: "$deepBlue11",
+        "&:active": {
+          backgroundColor: "$deepBlue5"
+        }
+      },
+      waiting: {
+        bc: "$deepBlue3",
+        boxShadow: `inset 0 0 0 1px $deepBlue4`,
+        c: "transparent",
+        overflow: "hidden",
+        pointerEvents: "none",
+        "&::after": {
+          left: "-100%",
+          width: "200%",
+          ...backgroundSizeAnimation("medium")
+        }
+      }
+    },
+    ghost: {
+      true: {
+        boxShadow: "none",
+        "@hover": {
+          "&:hover": {
+            boxShadow: "none"
+          }
+        }
+      }
+    },
+    rounded: {
+      true: {
+        borderRadius: "$pill"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "primary",
+      ghost: "true",
+      css: {
+        color: "$primary",
+        backgroundColor: "transparent",
+        "@hover": {
+          "&:hover": {
+            color: "$buttonPrimaryGhostHoverText",
+            backgroundColor: "transparent"
+          }
+        }
+      }
+    },
+    {
+      variant: "primary",
+      state: "active",
+      css: {
+        backgroundColor: "$buttonPrimaryFocusBg",
+        color: "$buttonPrimaryText",
+        boxShadow: "inset 0 0 0 2px white"
+      }
+    },
+    {
+      variant: "secondary",
+      state: "waiting",
+      css: {
+        backgroundColor: "$deepBlue3",
+        color: "transparent"
+      }
+    },
+    {
+      variant: "secondary",
+      ghost: true,
+      css: {
+        backgroundColor: "transparent",
+        color: "$buttonSecondaryText"
+      }
+    },
+    {
+      variant: "red",
+      state: "waiting",
+      css: {
+        backgroundColor: "$deepBlue3",
+        color: "transparent"
+      }
+    },
+    {
+      variant: "red",
+      state: "active",
+      css: {
+        backgroundColor: "$buttonRedFocusBg",
+        color: "$buttonRedText",
+        boxShadow: "inset 0 0 0 2px white"
+      }
+    },
+    {
+      variant: "red",
+      ghost: "true",
+      css: {
+        color: "$buttonRedBg",
+        backgroundColor: "transparent",
+        "@hover": {
+          "&:hover": {
+            color: "$buttonRedHoverText",
+            backgroundColor: "transparent"
+          }
+        }
+      }
+    },
+    {
+      size: "small",
+      state: "waiting",
+      css: {
+        "&::after": backgroundSizeAnimation("small")
+      }
+    },
+    {
+      size: "large",
+      state: "waiting",
+      css: {
+        "&::after": backgroundSizeAnimation("large")
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "medium",
+    variant: "primary"
+  }
+});
+const StyledButtonSlot = stitches_config.styled(reactSlot.Slot, StyledButton);
+const Button = React.forwardRef(
+  ({ children, asChild, ...props }, forwardedRef) => {
+    const Component = React.useMemo(() => asChild ? StyledButtonSlot : StyledButton, [asChild]);
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref: forwardedRef, ...props, children });
+  }
+);
+exports.BUTTON_BASE_STYLES = BUTTON_BASE_STYLES;
+exports.Button = Button;
+exports.StyledButton = StyledButton;
+//# sourceMappingURL=Button.cjs.map

package/dist/components/Button/Button.cjs.map

@@ -0,0 +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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"}

package/dist/components/Button/Button.js

@@ -0,0 +1,295 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import React, { useMemo } from "react";
+import { styled, keyframes } from "../../stitches.config.js";
+const BUTTON_BASE_STYLES = {
+  appearance: "none",
+  userSelect: "none",
+  boxSizing: "border-box",
+  border: "none",
+  WebkitTapHighlightColor: "rgba(0,0,0,0)",
+  "&:disabled": {
+    pointerEvents: "none",
+    opacity: 0.5
+  }
+};
+const BG_SIZES = {
+  small: "$sizes$8",
+  medium: "$sizes$9",
+  large: "$sizes$10"
+};
+const backgroundSizeAnimation = (size) => ({
+  $$bgSize: BG_SIZES[size],
+  backgroundSize: "$$bgSize",
+  backgroundImage: `linear-gradient(
+            -45deg,
+            transparent 33%,
+            $colors$deepBlue4 33%,
+            $colors$deepBlue4 66%,
+            transparent 66%
+          )`,
+  animation: `${keyframes({
+    "100%": { transform: "translateX($$bgSize)" }
+  })} 500ms linear infinite`
+});
+const StyledButton = styled("button", BUTTON_BASE_STYLES, {
+  // Reset
+  all: "unset",
+  alignItems: "center",
+  overflow: "hidden",
+  "&::before": {
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    inset: 0
+  },
+  "&::after": {
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    inset: 0
+  },
+  // Custom reset?
+  display: "inline-flex",
+  flexShrink: 0,
+  justifyContent: "center",
+  lineHeight: "1",
+  // Custom
+  position: "relative",
+  height: "$5",
+  px: "$2",
+  fontFamily: "$rubik",
+  fontSize: "$3",
+  fontWeight: "$medium",
+  fontVariantNumeric: "tabular-nums",
+  "&:focus-visible": {
+    boxShadow: `inset 0 0 0 2px $colors$focusOutline`,
+    "&::before": {
+      backgroundColor: "rgba(255, 255, 255, 0.15)"
+    },
+    "&::after": {
+      opacity: 0.15
+    }
+  },
+  "@hover": {
+    "&:hover": {
+      cursor: "pointer",
+      "&::before": {
+        backgroundColor: "rgba(255, 255, 255, 0.15)"
+      },
+      "&::after": {
+        opacity: 0.05
+      }
+    }
+  },
+  "&:active": {
+    "&::before": {
+      backgroundColor: "rgba(0, 0, 0, 0.15)"
+    }
+  },
+  variants: {
+    size: {
+      small: {
+        borderRadius: "$3",
+        height: "$5",
+        px: "$2",
+        fontSize: "$1",
+        lineHeight: "$sizes$5"
+      },
+      medium: {
+        borderRadius: "$3",
+        height: "$6",
+        px: "$3",
+        fontSize: "$3",
+        lineHeight: "$sizes$6"
+      },
+      large: {
+        borderRadius: "$3",
+        height: "$7",
+        px: "$3",
+        fontSize: "$3",
+        lineHeight: "$sizes$7"
+      }
+    },
+    variant: {
+      primary: {
+        bc: "$primary",
+        c: "$buttonPrimaryText",
+        "&:focus-visible": {
+          boxShadow: "inset 0 0 0 2px $colors$buttonPrimaryFocusBorder"
+        },
+        "@hover": {
+          "&:hover": {
+            "&::after": {
+              backgroundColor: "$primary"
+            }
+          }
+        }
+      },
+      secondary: {
+        bc: "$buttonSecondaryBg",
+        c: "$buttonSecondaryText",
+        boxShadow: "inset 0 0 0 2px $colors$buttonSecondaryBorder",
+        "&:active": {
+          boxShadow: "inset 0 0 0 1px $colors$buttonSecondaryBorder"
+        },
+        "&:focus-visible": {
+          boxShadow: "inset 0 0 0 2px $colors$buttonSecondaryFocusBorder"
+        },
+        "@hover": {
+          "&:hover": {
+            "&::after": {
+              backgroundColor: "$primary"
+            }
+          }
+        }
+      },
+      red: {
+        backgroundColor: "$buttonRedBg",
+        color: "$buttonRedText",
+        "&:focus-visible": {
+          boxShadow: "inset 0 0 0 2px $colors$buttonRedFocusBg"
+        }
+      }
+    },
+    state: {
+      active: {
+        bc: "$deepBlue5",
+        c: "$deepBlue11",
+        "&:active": {
+          backgroundColor: "$deepBlue5"
+        }
+      },
+      waiting: {
+        bc: "$deepBlue3",
+        boxShadow: `inset 0 0 0 1px $deepBlue4`,
+        c: "transparent",
+        overflow: "hidden",
+        pointerEvents: "none",
+        "&::after": {
+          left: "-100%",
+          width: "200%",
+          ...backgroundSizeAnimation("medium")
+        }
+      }
+    },
+    ghost: {
+      true: {
+        boxShadow: "none",
+        "@hover": {
+          "&:hover": {
+            boxShadow: "none"
+          }
+        }
+      }
+    },
+    rounded: {
+      true: {
+        borderRadius: "$pill"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "primary",
+      ghost: "true",
+      css: {
+        color: "$primary",
+        backgroundColor: "transparent",
+        "@hover": {
+          "&:hover": {
+            color: "$buttonPrimaryGhostHoverText",
+            backgroundColor: "transparent"
+          }
+        }
+      }
+    },
+    {
+      variant: "primary",
+      state: "active",
+      css: {
+        backgroundColor: "$buttonPrimaryFocusBg",
+        color: "$buttonPrimaryText",
+        boxShadow: "inset 0 0 0 2px white"
+      }
+    },
+    {
+      variant: "secondary",
+      state: "waiting",
+      css: {
+        backgroundColor: "$deepBlue3",
+        color: "transparent"
+      }
+    },
+    {
+      variant: "secondary",
+      ghost: true,
+      css: {
+        backgroundColor: "transparent",
+        color: "$buttonSecondaryText"
+      }
+    },
+    {
+      variant: "red",
+      state: "waiting",
+      css: {
+        backgroundColor: "$deepBlue3",
+        color: "transparent"
+      }
+    },
+    {
+      variant: "red",
+      state: "active",
+      css: {
+        backgroundColor: "$buttonRedFocusBg",
+        color: "$buttonRedText",
+        boxShadow: "inset 0 0 0 2px white"
+      }
+    },
+    {
+      variant: "red",
+      ghost: "true",
+      css: {
+        color: "$buttonRedBg",
+        backgroundColor: "transparent",
+        "@hover": {
+          "&:hover": {
+            color: "$buttonRedHoverText",
+            backgroundColor: "transparent"
+          }
+        }
+      }
+    },
+    {
+      size: "small",
+      state: "waiting",
+      css: {
+        "&::after": backgroundSizeAnimation("small")
+      }
+    },
+    {
+      size: "large",
+      state: "waiting",
+      css: {
+        "&::after": backgroundSizeAnimation("large")
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "medium",
+    variant: "primary"
+  }
+});
+const StyledButtonSlot = styled(Slot, StyledButton);
+const Button = React.forwardRef(
+  ({ children, asChild, ...props }, forwardedRef) => {
+    const Component = useMemo(() => asChild ? StyledButtonSlot : StyledButton, [asChild]);
+    return /* @__PURE__ */ jsx(Component, { ref: forwardedRef, ...props, children });
+  }
+);
+export {
+  BUTTON_BASE_STYLES,
+  Button,
+  StyledButton
+};
+//# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -0,0 +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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"}

package/dist/components/Button/Button.themes.cjs

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tinycolor = require("tinycolor2");
+exports.Theme = void 0;
+((Theme2) => {
+  Theme2.getLight = (primaryColor) => ({
+    buttonPrimaryBg: "$primary",
+    buttonPrimaryFocusBg: tinycolor(primaryColor.value).lighten(10).toHslString(),
+    buttonPrimaryText: "white",
+    buttonPrimaryFocusBorder: primaryColor.helpers.pickScale(6, { alpha: true }),
+    buttonPrimaryGhostHoverText: "$deepBlue9",
+    buttonSecondaryBg: "transparent",
+    buttonSecondaryText: "hsla(0, 0%, 0%, 0.54)",
+    buttonSecondaryBorder: "$grayBlue9",
+    buttonSecondaryFocusBorder: tinycolor(primaryColor.value).setAlpha(0.19).toHslString(),
+    buttonRedBg: "$red9",
+    buttonRedText: "$loContrast",
+    buttonRedHoverText: "$red10",
+    buttonRedFocusBg: "$redA8"
+  });
+  Theme2.getDark = (primaryColor) => ({
+    buttonPrimaryBg: "$primary",
+    buttonPrimaryFocusBg: tinycolor(primaryColor.value).lighten(10).toHslString(),
+    buttonPrimaryText: "$deepBlue2",
+    buttonPrimaryFocusBorder: primaryColor.helpers.pickScale(12, { alpha: true }),
+    buttonPrimaryGhostHoverText: tinycolor(primaryColor.value).lighten(10).toHslString(),
+    buttonSecondaryBg: "transparent",
+    buttonSecondaryText: tinycolor("white").setAlpha(0.74).toHslString(),
+    buttonSecondaryBorder: "$grayBlue9",
+    buttonSecondaryFocusBorder: "$primary",
+    buttonRedBg: "$red10",
+    buttonRedText: "$hiContrast",
+    buttonRedHoverText: "$red10",
+    buttonRedFocusBg: "$redA11"
+  });
+})(exports.Theme || (exports.Theme = {}));
+//# sourceMappingURL=Button.themes.cjs.map