@lets-events/react 12.9.3 → 12.10.0

package/src/components/Button/styledComponents.ts

@@ -1,320 +1,361 @@
-import { Button as ButtonRadix } from "@radix-ui/themes";
-
-import { styled, keyframes } from "../../styles";
-
-export const ButtonStyled = styled(ButtonRadix, {
-  $$buttonColor: "inherit",
-  $$buttonBgColor: "$colors$grey50",
-  $$buttonBorderColor: "inherit",
-  $$buttonOutlinedColor: "inherit",
-  fontFamily: "$default",
-  letterSpacing: 0,
-  border: 0,
-  transition: "all 300ms ease-out",
-  cursor: "pointer",
-  borderRadius: "$xs",
-  boxShadow:
-    "0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  gap: "$10",
-  padding: "$6 $12",
-  "&:disabled": {
-    cursor: "not-allowed",
-    transition: "none",
-  },
-  variants: {
-    color: {
-      brand: {
-        $$buttonColor: "$colors$brand500",
-        $$buttonBorderColor: "$colors$brand600",
-        $$buttonOutlinedColor: "$$buttonColor",
-        "&:hover": {
-          $$buttonColor: "$colors$brand600",
-          $$buttonBorderColor: "$colors$brand700",
-        },
-        "&:focus": {
-          $$buttonColor: "$colors$brand400",
-          $$buttonBorderColor: "$colors$brand300",
-          $$buttonBgColor: "$colors$grey200",
-        },
-        "&:active": {
-          $$buttonColor: "$colors$brand500",
-          $$buttonBorderColor: "$colors$brand700",
-          $$buttonBgColor: "$colors$grey200",
-        },
-      },
-      purple: {
-        $$buttonColor: "$colors$purple500",
-        $$buttonBorderColor: "$colors$purple300",
-        $$buttonOutlinedColor: "$$buttonColor",
-        "&:hover": {
-          $$buttonColor: "$colors$purple600",
-          $$buttonBorderColor: "$colors$purple700",
-          $$buttonOutlinedColor: "$colors$purple500",
-          $$buttonBgColor: "$colors$purple50",
-        },
-        "&:focus": {
-          $$buttonColor: "$colors$purple700",
-          $$buttonOutlinedColor: "$colors$purple500",
-          $$buttonBgColor: "$colors$purple200",
-          $$buttonBorderColor: "$colors$purple400",
-        },
-        "&:active": {
-          $$buttonColor: "$colors$purple500",
-          $$buttonOutlinedColor: "$colors$purple500",
-          $$buttonBgColor: "$colors$purple100",
-          $$buttonBorderColor: "$colors$purple300",
-        },
-      },
-      error: {
-        $$buttonColor: "$colors$error600",
-        $$buttonBorderColor: "$colors$error500",
-        $$buttonOutlinedColor: " $colors$error500",
-        "&:hover": {
-          $$buttonColor: "$colors$error600",
-          $$buttonBorderColor: "$colors$error700",
-          $$buttonBgColor: "$colors$error50",
-        },
-        "&:focus": {
-          $$buttonColor: "$colors$error400",
-          $$buttonBorderColor: "$colors$error300",
-          $$buttonBgColor: "$colors$error200",
-        },
-        "&:active": {
-          $$buttonColor: "$colors$error700",
-          $$buttonBorderColor: "$colors$error700",
-          $$buttonBgColor: "$colors$re1050",
-        },
-      },
-      info: {
-        $$buttonColor: "$colors$info500",
-        $$buttonBorderColor: "$colors$info600",
-        $$buttonOutlinedColor: "$$buttonColor",
-        "&:hover": {
-          $$buttonColor: "$colors$info600",
-          $$buttonBorderColor: "$colors$info700",
-          $$buttonBgColor: "$colors$info50",
-        },
-        "&:focus": {
-          $$buttonColor: "$colors$info400",
-          $$buttonBorderColor: "$colors$info600",
-          $$buttonBgColor: "$colors$info200",
-        },
-        "&:active": {
-          $$buttonColor: "$colors$info700",
-          $$buttonBorderColor: "$colors$info700",
-          $$buttonBgColor: "$colors$info100",
-        },
-      },
-      success: {
-        $$buttonColor: "$colors$success500",
-        $$buttonBorderColor: "$colors$success600",
-        $$buttonOutlinedColor: "$$buttonColor",
-        "&:hover": {
-          $$buttonColor: "$colors$success600",
-          $$buttonBorderColor: "$colors$success700",
-          $$buttonBgColor: "$colors$success50",
-        },
-        "&:focus": {
-          $$buttonColor: "$colors$success400",
-          $$buttonBorderColor: "$colors$success600",
-          $$buttonBgColor: "$colors$success200",
-        },
-        "&:active": {
-          $$buttonColor: "$colors$success700",
-          $$buttonBorderColor: "$colors$success700",
-          $$buttonBgColor: "$colors$success100",
-        },
-      },
-      warning: {
-        $$buttonColor: "$colors$warning500",
-        $$buttonBorderColor: "$colors$warning600",
-        $$buttonOutlinedColor: "$$buttonColor",
-        "&:hover": {
-          $$buttonColor: "$colors$warning600",
-          $$buttonBorderColor: "$colors$warning700",
-          $$buttonBgColor: "$colors$warning50",
-        },
-        "&:focus": {
-          $$buttonColor: "$colors$warning400",
-          $$buttonBorderColor: "$colors$warning600",
-          $$buttonBgColor: "$colors$warning200",
-        },
-        "&:active": {
-          $$buttonColor: "$colors$warning700",
-          $$buttonBorderColor: "$colors$warning700",
-          $$buttonBgColor: "$colors$warning100",
-        },
-      },
-      neutral: {
-        $$buttonColor: "$colors$neutral600",
-        $$buttonBorderColor: "$colors$neutral300",
-        $$buttonOutlinedColor: "$$buttonColor",
-        "&:hover": {
-          $$buttonColor: "$colors$neutral700",
-          $$buttonBgColor: "$colors$neutral100",
-          $$buttonBorderColor: "$colors$neutral300",
-        },
-        "&:focus": {
-          $$buttonColor: "$colors$neutral800",
-          $$buttonBgColor: "$colors$neutral300",
-          $$buttonBorderColor: "$colors$neutral400",
-        },
-        "&:active": {
-          $$buttonColor: "$colors$neutral500",
-          $$buttonBgColor: "$colors$neutral300",
-          $$buttonBorderColor: "$colors$neutral400",
-        },
-      },
-      white: {
-        $$buttonColor: "$colors$neutral50",
-        $$buttonBorderColor: "$colors$neutral300",
-        $$buttonOutlinedColor: "$colors$neutral50",
-        "&:hover": {
-          $$buttonColor: "$colors$neutral100",
-          $$buttonBorderColor: "$colors$neutral300",
-          $$buttonBgColor: "$colors$neutral100",
-        },
-        "&:focus": {
-          $$buttonBorderColor: "$colors$neutral400",
-          $$buttonColor: "$colors$neutral300",
-          $$buttonBgColor: "$colors$neutral200",
-        },
-        "&:active": {
-          $$buttonColor: "$colors$neutral400",
-          $$buttonBorderColor: "$colors$neutral500",
-          $$buttonBgColor: "$colors$neutral300",
-        },
-      },
-    },
-    size: {
-      extraSmall: {
-        height: "$24",
-        fontSize: "$buttonExtraSmall",
-        lineHeight: "$buttonExtraSmall",
-        padding: "0 $12",
-      },
-      small: {
-        height: "30px",
-        fontSize: "$buttonSmall",
-        lineHeight: "$buttonSmall",
-        padding: "0 $14",
-      },
-      medium: {
-        height: "40px",
-        fontSize: "$buttonMedium",
-        lineHeight: "$buttonMedium",
-        padding: "0 $16",
-      },
-      large: {
-        height: "48px",
-        fontSize: "$buttonLarge",
-        lineHeight: "$buttonLarge",
-        padding: "0 $20",
-      },
-    },
-    variant: {
-      text: {
-        backgroundColor: "transparent",
-        boxShadow: "none",
-        padding: 0,
-        border: 0,
-        height: "unset",
-        color: "$$buttonColor",
-      },
-      contained: {
-        color: "$grey50",
-        backgroundColor: "$$buttonColor",
-        border: "1px solid $$buttonBorderColor",
-        "&:disabled": {
-          boxShadow: "none",
-          color: "$neutral400",
-          backgroundColor: "$neutral200",
-          $$buttonBorderColor: "$colors$neutral100",
-        },
-      },
-      outlined: {
-        color: "$$buttonOutlinedColor",
-        border: "1px solid $$buttonOutlinedColor",
-        backgroundColor: "$$buttonBgColor",
-        boxShadow: "none",
-        "&:disabled": {
-          boxShadow: "none",
-          borderColor: "$colors$neutral100",
-          $$buttonColor: "$colors$neutral300",
-        },
-      },
-      menuDropdownItem: {
-        backgroundColor: "transparent",
-        boxShadow: "none",
-        padding: "0.25rem 0.5rem",
-        border: 0,
-        height: "unset",
-        color: "$$buttonColor",
-        width: "100%",
-        borderRadius: 0,
-        whiteSpace: "nowrap",
-        "&:hover": {
-          backgroundColor: "$dark100",
-        },
-      },
-    },
-    fontWeight: {
-      regular: { fontWeight: "$regular" },
-      medium: { fontWeight: "$medium" },
-      semibold: { fontWeight: "$semibold" },
-      bold: { fontWeight: "$bold" },
-    },
-    outlinedBgColor: {
-      neutral: {},
-      transparent: {
-        $$buttonBgColor: "transparent",
-      },
-    },
-    radii: {
-      full: {
-        borderRadius: "$full",
-      },
-    },
-    isCircle: {
-      true: {
-        borderRadius: "$full",
-        padding: 0,
-        aspectRatio: "1",
-      },
-    },
-  },
-
-  compoundVariants: [
-    {
-      color: "neutral",
-      variant: "outlined",
-      css: {
-        border: "1px solid $$buttonBorderColor",
-      },
-    },
-  ],
-
-  defaultVariants: {
-    variant: "contained",
-    color: "brand",
-    size: "medium",
-    fontWeight: "medium",
-    outlinedBgColor: "transparent",
-  },
-});
-
-const spin = keyframes({
-  "0%": { transform: "rotate(0deg)" },
-  "100%": { transform: "rotate(360deg)" },
-});
-
-export const SpinningDiv = styled("div", {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  animation: `${spin} 1s linear infinite`,
-  transformOrigin: "center center",
-});
+import { Button as ButtonRadix } from "@radix-ui/themes";
+
+import { styled, keyframes } from "../../styles";
+
+export const ButtonStyled = styled(ButtonRadix, {
+  $$buttonColor: "inherit",
+  $$buttonBgColor: "$colors$grey50",
+  $$buttonBorderColor: "inherit",
+  $$buttonOutlinedColor: "inherit",
+  $$buttonToggleBgColor: "transparent",
+  fontFamily: "$default",
+  letterSpacing: 0,
+  border: 0,
+  transition: "all 300ms ease-out",
+  cursor: "pointer",
+  borderRadius: "$xs",
+  boxShadow:
+    "0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "$10",
+  padding: "$6 $12",
+  "&:disabled": {
+    cursor: "not-allowed",
+    transition: "none",
+  },
+  variants: {
+    color: {
+      brand: {
+        $$buttonColor: "$colors$brand500",
+        $$buttonBorderColor: "$colors$brand600",
+        $$buttonOutlinedColor: "$$buttonColor",
+        $$buttonToggleBgColor: "rgba(0, 78, 210, 0.2)",
+        "&:hover": {
+          $$buttonColor: "$colors$brand600",
+          $$buttonBorderColor: "$colors$brand700",
+        },
+        "&:focus": {
+          $$buttonColor: "$colors$brand400",
+          $$buttonBorderColor: "$colors$brand300",
+          $$buttonBgColor: "$colors$grey200",
+        },
+        "&:active": {
+          $$buttonColor: "$colors$brand500",
+          $$buttonBorderColor: "$colors$brand700",
+          $$buttonBgColor: "$colors$grey200",
+        },
+      },
+      purple: {
+        $$buttonColor: "$colors$purple500",
+        $$buttonBorderColor: "$colors$purple300",
+        $$buttonOutlinedColor: "$$buttonColor",
+        $$buttonToggleBgColor: "rgba(137, 97, 216, 0.2)",
+        "&:hover": {
+          $$buttonColor: "$colors$purple600",
+          $$buttonBorderColor: "$colors$purple700",
+          $$buttonOutlinedColor: "$colors$purple500",
+          $$buttonBgColor: "$colors$purple50",
+        },
+        "&:focus": {
+          $$buttonColor: "$colors$purple700",
+          $$buttonOutlinedColor: "$colors$purple500",
+          $$buttonBgColor: "$colors$purple200",
+          $$buttonBorderColor: "$colors$purple400",
+        },
+        "&:active": {
+          $$buttonColor: "$colors$purple500",
+          $$buttonOutlinedColor: "$colors$purple500",
+          $$buttonBgColor: "$colors$purple100",
+          $$buttonBorderColor: "$colors$purple300",
+        },
+      },
+      error: {
+        $$buttonColor: "$colors$error600",
+        $$buttonBorderColor: "$colors$error500",
+        $$buttonOutlinedColor: " $colors$error500",
+        $$buttonToggleBgColor: "rgba(219, 54, 68, 0.2)",
+        "&:hover": {
+          $$buttonColor: "$colors$error600",
+          $$buttonBorderColor: "$colors$error700",
+          $$buttonBgColor: "$colors$error50",
+        },
+        "&:focus": {
+          $$buttonColor: "$colors$error400",
+          $$buttonBorderColor: "$colors$error300",
+          $$buttonBgColor: "$colors$error200",
+        },
+        "&:active": {
+          $$buttonColor: "$colors$error700",
+          $$buttonBorderColor: "$colors$error700",
+          $$buttonBgColor: "$colors$re1050",
+        },
+      },
+      info: {
+        $$buttonColor: "$colors$info500",
+        $$buttonBorderColor: "$colors$info600",
+        $$buttonOutlinedColor: "$$buttonColor",
+        $$buttonToggleBgColor: "rgba(2, 120, 254, 0.2)",
+        "&:hover": {
+          $$buttonColor: "$colors$info600",
+          $$buttonBorderColor: "$colors$info700",
+          $$buttonBgColor: "$colors$info50",
+        },
+        "&:focus": {
+          $$buttonColor: "$colors$info400",
+          $$buttonBorderColor: "$colors$info600",
+          $$buttonBgColor: "$colors$info200",
+        },
+        "&:active": {
+          $$buttonColor: "$colors$info700",
+          $$buttonBorderColor: "$colors$info700",
+          $$buttonBgColor: "$colors$info100",
+        },
+      },
+      success: {
+        $$buttonColor: "$colors$success500",
+        $$buttonBorderColor: "$colors$success600",
+        $$buttonOutlinedColor: "$$buttonColor",
+        $$buttonToggleBgColor: "rgba(38, 167, 67, 0.2)",
+        "&:hover": {
+          $$buttonColor: "$colors$success600",
+          $$buttonBorderColor: "$colors$success700",
+          $$buttonBgColor: "$colors$success50",
+        },
+        "&:focus": {
+          $$buttonColor: "$colors$success400",
+          $$buttonBorderColor: "$colors$success600",
+          $$buttonBgColor: "$colors$success200",
+        },
+        "&:active": {
+          $$buttonColor: "$colors$success700",
+          $$buttonBorderColor: "$colors$success700",
+          $$buttonBgColor: "$colors$success100",
+        },
+      },
+      warning: {
+        $$buttonColor: "$colors$warning500",
+        $$buttonBorderColor: "$colors$warning600",
+        $$buttonOutlinedColor: "$$buttonColor",
+        $$buttonToggleBgColor: "rgba(255, 193, 7, 0.2)",
+        "&:hover": {
+          $$buttonColor: "$colors$warning600",
+          $$buttonBorderColor: "$colors$warning700",
+          $$buttonBgColor: "$colors$warning50",
+        },
+        "&:focus": {
+          $$buttonColor: "$colors$warning400",
+          $$buttonBorderColor: "$colors$warning600",
+          $$buttonBgColor: "$colors$warning200",
+        },
+        "&:active": {
+          $$buttonColor: "$colors$warning700",
+          $$buttonBorderColor: "$colors$warning700",
+          $$buttonBgColor: "$colors$warning100",
+        },
+      },
+      neutral: {
+        $$buttonColor: "$colors$neutral600",
+        $$buttonBorderColor: "$colors$neutral300",
+        $$buttonOutlinedColor: "$$buttonColor",
+        $$buttonToggleBgColor: "rgba(76, 79, 84, 0.2)",
+        "&:hover": {
+          $$buttonColor: "$colors$neutral700",
+          $$buttonBgColor: "$colors$neutral100",
+          $$buttonBorderColor: "$colors$neutral300",
+        },
+        "&:focus": {
+          $$buttonColor: "$colors$neutral800",
+          $$buttonBgColor: "$colors$neutral300",
+          $$buttonBorderColor: "$colors$neutral400",
+        },
+        "&:active": {
+          $$buttonColor: "$colors$neutral500",
+          $$buttonBgColor: "$colors$neutral300",
+          $$buttonBorderColor: "$colors$neutral400",
+        },
+      },
+      white: {
+        $$buttonColor: "$colors$neutral50",
+        $$buttonBorderColor: "$colors$neutral300",
+        $$buttonOutlinedColor: "$colors$neutral50",
+        $$buttonToggleBgColor: "rgba(255, 255, 255, 0.2)",
+        "&:hover": {
+          $$buttonColor: "$colors$neutral100",
+          $$buttonBorderColor: "$colors$neutral300",
+          $$buttonBgColor: "$colors$neutral100",
+        },
+        "&:focus": {
+          $$buttonBorderColor: "$colors$neutral400",
+          $$buttonColor: "$colors$neutral300",
+          $$buttonBgColor: "$colors$neutral200",
+        },
+        "&:active": {
+          $$buttonColor: "$colors$neutral400",
+          $$buttonBorderColor: "$colors$neutral500",
+          $$buttonBgColor: "$colors$neutral300",
+        },
+      },
+    },
+    size: {
+      extraSmall: {
+        height: "$24",
+        fontSize: "$buttonExtraSmall",
+        lineHeight: "$buttonExtraSmall",
+        padding: "0 $12",
+      },
+      small: {
+        height: "30px",
+        fontSize: "$buttonSmall",
+        lineHeight: "$buttonSmall",
+        padding: "0 $14",
+      },
+      medium: {
+        height: "40px",
+        fontSize: "$buttonMedium",
+        lineHeight: "$buttonMedium",
+        padding: "0 $16",
+      },
+      large: {
+        height: "48px",
+        fontSize: "$buttonLarge",
+        lineHeight: "$buttonLarge",
+        padding: "0 $20",
+      },
+    },
+    variant: {
+      text: {
+        backgroundColor: "transparent",
+        boxShadow: "none",
+        padding: 0,
+        border: 0,
+        height: "unset",
+        color: "$$buttonColor",
+      },
+      toggle: {
+        backgroundColor: "transparent",
+        boxShadow: "none",
+        padding: "$6 $12",
+        border: 0,
+        height: "2rem",
+        color: "$$buttonColor",
+        borderRadius: ".5rem",
+        "&:hover": {
+          backgroundColor: "$$buttonToggleBgColor",
+        },
+      },
+      contained: {
+        color: "$grey50",
+        backgroundColor: "$$buttonColor",
+        border: "1px solid $$buttonBorderColor",
+        "&:disabled": {
+          boxShadow: "none",
+          color: "$neutral400",
+          backgroundColor: "$neutral200",
+          $$buttonBorderColor: "$colors$neutral100",
+        },
+      },
+      outlined: {
+        color: "$$buttonOutlinedColor",
+        border: "1px solid $$buttonOutlinedColor",
+        backgroundColor: "$$buttonBgColor",
+        boxShadow: "none",
+        "&:disabled": {
+          boxShadow: "none",
+          borderColor: "$colors$neutral100",
+          $$buttonColor: "$colors$neutral300",
+        },
+      },
+      menuDropdownItem: {
+        backgroundColor: "transparent",
+        boxShadow: "none",
+        padding: "0.5rem 1rem",
+        border: 0,
+        height: "unset",
+        color: "$$buttonColor",
+        width: "100%",
+        borderRadius: 0,
+        whiteSpace: "nowrap",
+        "&:hover": {
+          backgroundColor: "$dark100",
+        },
+      },
+      menuDropdownItemDelete: {
+        backgroundColor: "transparent",
+        boxShadow: "none",
+        padding: "0.5rem 1rem",
+        border: 0,
+        height: "unset",
+        color: "$$buttonColor",
+        width: "100%",
+        borderRadius: 0,
+        whiteSpace: "nowrap",
+        "&:hover": {
+          backgroundColor: "$red100",
+        },
+      }
+    },
+    fontWeight: {
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" },
+    },
+    textAlign: {
+      center: { textAlign: "center", justifyContent: "center" },
+      left: { textAlign: "left", justifyContent: "flex-start" },
+      right: { textAlign: "right", justifyContent: "flex-end" },
+    },
+    outlinedBgColor: {
+      neutral: {},
+      transparent: {
+        $$buttonBgColor: "transparent",
+      },
+    },
+    radii: {
+      full: {
+        borderRadius: "$full",
+      },
+    },
+    isCircle: {
+      true: {
+        borderRadius: "$full",
+        padding: 0,
+        aspectRatio: "1",
+      },
+    },
+  },
+
+  compoundVariants: [
+    {
+      color: "neutral",
+      variant: "outlined",
+      css: {
+        border: "1px solid $$buttonBorderColor",
+      },
+    },
+  ],
+
+  defaultVariants: {
+    variant: "contained",
+    color: "brand",
+    size: "medium",
+    fontWeight: "medium",
+    textAlign: "center",
+    outlinedBgColor: "transparent",
+  },
+});
+
+const spin = keyframes({
+  "0%": { transform: "rotate(0deg)" },
+  "100%": { transform: "rotate(360deg)" },
+});
+
+export const SpinningDiv = styled("div", {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  animation: `${spin} 1s linear infinite`,
+  transformOrigin: "center center",
+});