@lets-events/react 4.0.0 → 6.0.0

package/src/components/Button.tsx

@@ -1,349 +1,329 @@
-import { ComponentProps } from 'react'
-import { styled } from '../styles'
-import { Button as ButtonRadix } from '@radix-ui/themes'
-
-export const ButtonStyled = styled(ButtonRadix, {
-  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',
-  '&:hover': {
-    transform: 'scale(1.05)',
-  },
-  '&:active': {
-    transform: 'scale(0.95)',
-  },
-  '&:disabled': {
-    cursor: 'not-allowed',
-    transition: 'none',
-  },
-  '&:hover:disabled': {
-    transform: 'none',
-  },
-  variants: {
-    color: {
-      brand: {},
-      neutral: {},
-      purple: {},
-    },
-    variant: {
-      text: {
-        backgroundColor: 'transparent',
-        boxShadow: 'none',
-        padding: 0,
-        border: 0,
-      },
-      contained: {
-        '&:hover': {
-          borderWidth: '$2',
-          borderStyle: 'solid',
-        },
-        '&:focus': {
-          border: 0,
-        },
-        '&:active': {
-          borderWidth: '$4',
-          borderStyle: 'solid',
-        },
-        '&:disabled': {
-          borderWidth: '$1',
-          borderStyle: 'solid',
-          boxShadow: 'none',
-        }
-      },
-      outlined: {
-        borderWidth: '$1',
-        borderStyle: 'solid',
-        '&:hover': {
-          borderWidth: '$2',
-          borderStyle: 'solid',
-        },
-        '&:focus': {
-          borderWidth: '$2',
-          borderStyle: 'solid',
-        },
-        '&:active': {
-          borderWidth: '$2',
-          borderStyle: 'solid',
-        },
-        '&:disabled': {
-          borderWidth: '$1',
-          borderStyle: 'solid',
-          color: '$neutral400',
-        }
-      }
-    },
-    size: {
-      xs: {
-        padding: '$6 $12',
-        fontSize: '$12',
-        lineHeight: '$base',
-      },
-      sm: {
-        padding: '$8 $14',
-        fontSize: '$13',
-        lineHeight: '$smaller',
-      },
-      md: {
-        padding: '$12 $16',
-        fontSize: '$14',
-        lineHeight: '$smaller',
-      },
-      lg: {
-        padding: '$13 $20',
-        fontSize: '$18',
-        lineHeight: '$smaller',
-      },
-    },
-    radii: {
-      'full': {
-        borderRadius: '$full',
-      }
-    },
-  },
-
-  defaultVariants: {
-    variant: 'contained',
-    size: 'md',
-    color: 'brand',
-  },
-
-  compoundVariants: [
-    {
-      variant: 'text',
-      color: 'brand',
-      css: {
-        color: '$brand500',
-        '&:hover': { color: '$brand600' },
-        '&:focus': { color: '$brand700' },
-        '&:active': { color: '$brand500' },
-        '&:disabled': { color: '$dark400' },
-      }
-    },
-    {
-      variant: 'text',
-      color: 'neutral',
-      css: {
-        color: '$neutral600',
-        '&:hover': { color: '$neutral700' },
-        '&:focus': { color: '$neutral800' },
-        '&:active': { color: '$neutral500' },
-        '&:disabled': { color: '$dark400' },
-      }
-    },
-    {
-      variant: 'text',
-      color: 'purple',
-      css: {
-        color: '$purple500',
-        '&:hover': { color: '$purple600' },
-        '&:focus': { color: '$purple700' },
-        '&:active': { color: '$purple500' },
-        '&:disabled': { color: '$dark400' },
-      }
-    },
-    {
-      variant: 'text',
-      color: 'green',
-      css: {
-        color: '$green500',
-        '&:hover': { color: '$green600' },
-        '&:focus': { color: '$green700' },
-        '&:active': { color: '$green500' },
-        '&:disabled': { color: '$dark400' },
-      }
-    },
-    {
-      variant: 'text',
-      color: 'blue',
-      css: {
-        color: '$blue500',
-        '&:hover': { color: '$blue600' },
-        '&:focus': { color: '$blue700' },
-        '&:active': { color: '$blue500' },
-        '&:disabled': { color: '$dark400' },
-      }
-    },
-    {
-      variant: 'text',
-      color: 'red',
-      css: {
-        color: '$red500',
-        '&:hover': { color: '$red600' },
-        '&:focus': { color: '$red700' },
-        '&:active': { color: '$red500' },
-        '&:disabled': { color: '$dark400' },
-      }
-    },
-
-    // contained
-    {
-      variant: 'contained',
-      color: 'brand',
-      css: {
-        color: '$grey50',
-        backgroundColor: '$brand500',
-        '&:hover': {
-          borderColor: '$brand700',
-          backgroundColor: '$blue600',
-        },
-        '&:focus': {
-          backgroundColor: '$blue700',
-        },
-        '&:active': {
-          borderColor: '$brand300',
-          backgroundColor: '$blue500',
-        },
-        '&:disabled': {
-          borderColor: '$brand50',
-          backgroundColor: '$brand50',
-          color: '$neutral400',
-        }
-      }
-    },
-    {
-      variant: 'contained',
-      color: 'neutral',
-      css: {
-        backgroundColor: '$neutral600',
-        color: '$grey50',
-        '&:hover': {
-          backgroundColor: '$neutral700',
-          borderColor: '$neutral800',
-        },
-        '&:focus': {
-          backgroundColor: '$neutral800',
-        },
-        '&:active': {
-          backgroundColor: '$neutral500',
-          borderColor: '$neutral400',
-        },
-        '&:disabled': {
-          backgroundColor: '$neutral50',
-          borderColor: '$neutral200',
-          color: '$neutral400',
-        }
-      }
-    },
-    {
-      variant: 'contained',
-      color: 'purple',
-      css: {
-        backgroundColor: '$purple500',
-        color: '$grey50',
-        '&:hover': {
-          backgroundColor: '$purple600',
-          borderColor: '$purple700',
-        },
-        '&:focus': {
-          backgroundColor: '$purple700',
-        },
-        '&:active': {
-          borderColor: '$purple300',
-          backgroundColor: '$purple500',
-        },
-        '&:disabled': {
-          borderColor: '$purple200',
-          backgroundColor: '$purple200',
-          color: '$neutral400',
-        }
-      }
-    },
-
-
-
-    // outlined
-    {
-      variant: 'outlined',
-      color: 'brand',
-      css: {
-        color: '$brand500',
-        borderColor: '$brand300',
-        backgroundColor: '$grey50',
-        '&:hover': {
-          borderColor: '$brand400',
-          backgroundColor: '$brand50',
-        },
-        '&:focus': {
-          borderColor: '$brand400',
-          backgroundColor: '$brand50',
-        },
-        '&:active': {
-          borderColor: '$brand300',
-          backgroundColor: '$grey50',
-        },
-        '&:disabled': {
-          borderColor: '$brand200',
-          backgroundColor: '$neutral200',
-        }
-      }
-    },
-    {
-      variant: 'outlined',
-      color: 'neutral',
-      css: {
-        color: '$neutral600',
-        borderColor: '$neutral300',
-        backgroundColor: '$grey50',
-        '&:hover': {
-          borderColor: '$neutral400',
-          backgroundColor: '$grey100',
-        },
-        '&:focus': {
-          borderColor: '$neutral400',
-          backgroundColor: '$grey100',
-        },
-        '&:active': {
-          borderColor: '$neutral300',
-          backgroundColor: '$grey50',
-        },
-        '&:disabled': {
-          borderColor: '$neutral200',
-          backgroundColor: '$neutral200',
-        }
-      }
-    },
-    {
-      variant: 'outlined',
-      color: 'purple',
-      css: {
-        color: '$purple500',
-        borderColor: '$purple300',
-        backgroundColor: '$grey50',
-        '&:hover': {
-          borderColor: '$purple400',
-          backgroundColor: '$purple50',
-        },
-        '&:focus': {
-          borderColor: '$purple400',
-          backgroundColor: '$purple50',
-        },
-        '&:active': {
-          borderColor: '$purple300',
-          backgroundColor: '$grey50',
-        },
-        '&:disabled': {
-          borderColor: '$purple200',
-          backgroundColor: '$neutral200',
-        }
-      }
-    },
-
-  ]
-})
-
-export interface ButtonProps extends ComponentProps<typeof ButtonStyled> {
-  asChild?: boolean,
-}
-
-export function Button({ asChild, ...props }: ButtonProps) {
-  const Component = asChild ? ButtonRadix : 'button'
-  return <ButtonStyled as={Component} {...props} />
+import { ComponentProps } from 'react'
+import { styled } from '../styles'
+import { Button as ButtonRadix } from '@radix-ui/themes'
+import { typographyButtonValues } from '../types/typographyValues'
+
+export const ButtonStyled = styled(ButtonRadix, {
+  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',
+  '&:disabled': {
+    cursor: 'not-allowed',
+    transition: 'none',
+  },
+  variants: {
+    color: {
+      brand: {},
+      neutral: {},
+      purple: {},
+    },
+    variant: {
+      text: {
+        backgroundColor: 'transparent',
+        boxShadow: 'none',
+        padding: 0,
+        border: 0,
+      },
+      contained: {
+        '&:hover': {
+          borderWidth: '$2',
+          borderStyle: 'solid',
+        },
+        '&:focus': {
+          border: 0,
+        },
+        '&:active': {
+          borderWidth: '$4',
+          borderStyle: 'solid',
+        },
+        '&:disabled': {
+          borderWidth: '$1',
+          borderStyle: 'solid',
+          boxShadow: 'none',
+        }
+      },
+      outlined: {
+        borderWidth: '$1',
+        borderStyle: 'solid',
+        '&:hover': {
+          borderWidth: '$2',
+          borderStyle: 'solid',
+        },
+        '&:focus': {
+          borderWidth: '$2',
+          borderStyle: 'solid',
+        },
+        '&:active': {
+          borderWidth: '$2',
+          borderStyle: 'solid',
+        },
+        '&:disabled': {
+          borderWidth: '$1',
+          borderStyle: 'solid',
+          color: '$neutral400',
+        }
+      }
+    },
+    typography: typographyButtonValues,
+    fontWeight: {
+      regular: { fontWeight: '$regular' },
+      medium: { fontWeight: '$medium' },
+      semibold: { fontWeight: '$semibold' },
+      bold: { fontWeight: '$bold' },
+    },
+    radii: {
+      'full': {
+        borderRadius: '$full',
+      }
+    },
+  },
+
+  defaultVariants: {
+    variant: 'contained',
+    typography: 'buttonMedium',
+    color: 'brand',
+  },
+
+  compoundVariants: [
+    {
+      variant: 'text',
+      color: 'brand',
+      css: {
+        color: '$brand500',
+        '&:hover': { color: '$brand600' },
+        '&:focus': { color: '$brand700' },
+        '&:active': { color: '$brand500' },
+        '&:disabled': { color: '$dark400' },
+      }
+    },
+    {
+      variant: 'text',
+      color: 'neutral',
+      css: {
+        color: '$neutral600',
+        '&:hover': { color: '$neutral700' },
+        '&:focus': { color: '$neutral800' },
+        '&:active': { color: '$neutral500' },
+        '&:disabled': { color: '$dark400' },
+      }
+    },
+    {
+      variant: 'text',
+      color: 'purple',
+      css: {
+        color: '$purple500',
+        '&:hover': { color: '$purple600' },
+        '&:focus': { color: '$purple700' },
+        '&:active': { color: '$purple500' },
+        '&:disabled': { color: '$dark400' },
+      }
+    },
+    {
+      variant: 'text',
+      color: 'green',
+      css: {
+        color: '$green500',
+        '&:hover': { color: '$green600' },
+        '&:focus': { color: '$green700' },
+        '&:active': { color: '$green500' },
+        '&:disabled': { color: '$dark400' },
+      }
+    },
+    {
+      variant: 'text',
+      color: 'blue',
+      css: {
+        color: '$blue500',
+        '&:hover': { color: '$blue600' },
+        '&:focus': { color: '$blue700' },
+        '&:active': { color: '$blue500' },
+        '&:disabled': { color: '$dark400' },
+      }
+    },
+    {
+      variant: 'text',
+      color: 'red',
+      css: {
+        color: '$red500',
+        '&:hover': { color: '$red600' },
+        '&:focus': { color: '$red700' },
+        '&:active': { color: '$red500' },
+        '&:disabled': { color: '$dark400' },
+      }
+    },
+
+    // contained
+    {
+      variant: 'contained',
+      color: 'brand',
+      css: {
+        color: '$grey50',
+        backgroundColor: '$brand500',
+        borderWidth: '$2',
+        borderStyle: 'solid',
+        borderColor: 'transparent',
+        '&:hover': {
+          borderColor: '$brand700',
+          backgroundColor: '$blue600',
+        },
+        '&:focus': {
+          backgroundColor: '$blue700',
+        },
+        '&:active': {
+          borderColor: '$brand300',
+          backgroundColor: '$blue500',
+        },
+        '&:disabled': {
+          borderColor: '$brand50',
+          backgroundColor: '$brand50',
+          color: '$neutral400',
+        }
+      }
+    },
+    {
+      variant: 'contained',
+      color: 'neutral',
+      css: {
+        backgroundColor: '$neutral600',
+        color: '$grey50',
+        '&:hover': {
+          backgroundColor: '$neutral700',
+          borderColor: '$neutral800',
+        },
+        '&:focus': {
+          backgroundColor: '$neutral800',
+        },
+        '&:active': {
+          backgroundColor: '$neutral500',
+          borderColor: '$neutral400',
+        },
+        '&:disabled': {
+          backgroundColor: '$neutral50',
+          borderColor: '$neutral200',
+          color: '$neutral400',
+        }
+      }
+    },
+    {
+      variant: 'contained',
+      color: 'purple',
+      css: {
+        backgroundColor: '$purple500',
+        color: '$grey50',
+        '&:hover': {
+          backgroundColor: '$purple600',
+          borderColor: '$purple700',
+        },
+        '&:focus': {
+          backgroundColor: '$purple700',
+        },
+        '&:active': {
+          borderColor: '$purple300',
+          backgroundColor: '$purple500',
+        },
+        '&:disabled': {
+          borderColor: '$purple200',
+          backgroundColor: '$purple200',
+          color: '$neutral400',
+        }
+      }
+    },
+
+
+
+    // outlined
+    {
+      variant: 'outlined',
+      color: 'brand',
+      css: {
+        color: '$brand500',
+        borderColor: '$brand300',
+        backgroundColor: '$grey50',
+        '&:hover': {
+          borderColor: '$brand400',
+          backgroundColor: '$brand50',
+        },
+        '&:focus': {
+          borderColor: '$brand400',
+          backgroundColor: '$brand50',
+        },
+        '&:active': {
+          borderColor: '$brand300',
+          backgroundColor: '$grey50',
+        },
+        '&:disabled': {
+          borderColor: '$brand200',
+          backgroundColor: '$neutral200',
+        }
+      }
+    },
+    {
+      variant: 'outlined',
+      color: 'neutral',
+      css: {
+        color: '$neutral600',
+        borderColor: '$neutral300',
+        backgroundColor: '$grey50',
+        '&:hover': {
+          borderColor: '$neutral400',
+          backgroundColor: '$grey100',
+        },
+        '&:focus': {
+          borderColor: '$neutral400',
+          backgroundColor: '$grey100',
+        },
+        '&:active': {
+          borderColor: '$neutral300',
+          backgroundColor: '$grey50',
+        },
+        '&:disabled': {
+          borderColor: '$neutral200',
+          backgroundColor: '$neutral200',
+        }
+      }
+    },
+    {
+      variant: 'outlined',
+      color: 'purple',
+      css: {
+        color: '$purple500',
+        borderColor: '$purple300',
+        backgroundColor: '$grey50',
+        '&:hover': {
+          borderColor: '$purple400',
+          backgroundColor: '$purple50',
+        },
+        '&:focus': {
+          borderColor: '$purple400',
+          backgroundColor: '$purple50',
+        },
+        '&:active': {
+          borderColor: '$purple300',
+          backgroundColor: '$grey50',
+        },
+        '&:disabled': {
+          borderColor: '$purple200',
+          backgroundColor: '$neutral200',
+        }
+      }
+    },
+
+  ]
+})
+
+export interface ButtonProps extends ComponentProps<typeof ButtonStyled> {
+  asChild?: boolean,
+}
+
+export function Button({ asChild, ...props }: ButtonProps) {
+  const Component = asChild ? ButtonRadix : 'button'
+  return <ButtonStyled as={Component} {...props} />
 }