@lets-events/react 3.0.0 → 5.0.0

package/src/components/Button.tsx

@@ -1,6 +1,7 @@
-import { ComponentProps, ElementType } from 'react'
+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,
@@ -13,117 +14,62 @@ export const ButtonStyled = styled(ButtonRadix, {
   alignItems: 'center',
   justifyContent: 'center',
   gap: '$10',
+  '&:disabled': {
+    cursor: 'not-allowed',
+    transition: 'none',
+  },
   variants: {
+    color: {
+      brand: {},
+      neutral: {},
+      purple: {},
+    },
     variant: {
-      simple: {
+      text: {
         backgroundColor: 'transparent',
+        boxShadow: 'none',
         padding: 0,
-        color: '$neutral600',
         border: 0,
-        boxShadow: 'none',
-        '&:hover': {
-          transform: 'scale(1.05)',
-          color: '$brand600'
-        },
-        '&:focus': {
-          border: '2px solid $gray500',
-          color: '$brand700'
-        },
-        '&:active': {
-          transform: 'scale(0.95)',
-          color: '$brand500'
-        },
-        '&:hover:disabled': {
-          transform: 'none',
-        },
-        '&:disabled': {
-          cursor: 'not-allowed',
-          color: '$dark400',
-          transition: 'none',
-        }
       },
-      primary: {
-        backgroundColor: '$brand500',
-        color: '$grey50',
+      contained: {
         '&:hover': {
-          border: '$2 solid $brand700',
-          transform: 'scale(1.05)',
-          backgroundColor: '$blue600',
+          borderWidth: '$2',
+          borderStyle: 'solid',
         },
         '&:focus': {
           border: 0,
-          backgroundColor: '$blue700',
         },
         '&:active': {
-          transform: 'scale(0.95)',
-          border: '$4 solid $brand300',
-          backgroundColor: '$blue500',
-        },
-        '&:hover:disabled': {
-          transform: 'none',
+          borderWidth: '$4',
+          borderStyle: 'solid',
         },
         '&:disabled': {
-          border: '$1 solid $brand50',
-          backgroundColor: '$brand50',
+          borderWidth: '$1',
+          borderStyle: 'solid',
           boxShadow: 'none',
-          color: '$neutral400',
-          transition: 'none',
         }
       },
-      purple: {
-        backgroundColor: '$purple500',
-        color: '$grey50',
+      outlined: {
+        borderWidth: '$1',
+        borderStyle: 'solid',
         '&:hover': {
-          transform: 'scale(1.05)',
-          backgroundColor: '$purple600',
-          border: '$2 solid $purple700',
+          borderWidth: '$2',
+          borderStyle: 'solid',
         },
         '&:focus': {
-          border: '$2 solid $purple700',
-          backgroundColor: '$purple600',
+          borderWidth: '$2',
+          borderStyle: 'solid',
         },
         '&:active': {
-          transform: 'scale(0.95)',
-          border: '$2 solid $purple300',
-          backgroundColor: '$purple500',
-        },
-        '&:hover:disabled': {
-          transform: 'none',
+          borderWidth: '$2',
+          borderStyle: 'solid',
         },
         '&:disabled': {
-          border: '$1 solid $purple200',
-          backgroundColor: '$purple200',
-          transition: 'none',
-        }
-      },
-      secondary: {
-        backgroundColor: '$neutral500',
-        border: '$1 solid $neutral300',
-        color: '$neutral600',
-        '&:hover': {
-          transform: 'scale(1.05)',
-          backgroundColor: '$neutral100',
-          border: '$1 solid $neutral400',
-        },
-        '&:focus': {
-          backgroundColor: '$neutral200',
-          border: 0,
-        },
-        '&:active': {
-          transform: 'scale(0.95)',
-          backgroundColor: '$neutral50',
-          border: '$1 solid $neutral300',
-        },
-        '&:hover:disabled': {
-          transform: 'none',
-        },
-        '&:disabled': {
-          backgroundColor: '$neutral50',
-          border: '$1 solid $neutral200',
+          borderWidth: '$1',
+          borderStyle: 'solid',
           color: '$neutral400',
-          transition: 'none',
         }
-      },
+      }
     },
     size: {
       xs: {
@@ -152,20 +98,245 @@ export const ButtonStyled = styled(ButtonRadix, {
         borderRadius: '$full',
       }
     },
-
   },
 
   defaultVariants: {
-    variant: 'simple',
+    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',
+        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} />