@lets-events/react 6.0.0 → 7.0.0

package/src/components/Button.tsx

@@ -1,329 +0,0 @@
-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} />
-}