@lets-events/react 3.0.0 → 5.0.0

package/src/components/ButtonGroup.tsx

@@ -8,6 +8,7 @@ export const ButtonItemStyled = styled(Button, {
   border: 0,
   transition: 'all 300ms ease-out',
   cursor: 'pointer',
+  boxSizing: 'border-box',
   variants: {
     active: {
       true: {
@@ -21,44 +22,66 @@ export const ButtonGroupStyled = styled(Flex, {
   borderRadius: '$md',
   overflow: 'hidden',
   variants: {
+    color: {
+      brand: {},
+      neutral: {},
+      purple: {},
+      green: {},
+      blue: {},
+      red: {},
+    },
     variant: {
-      primary: {
+      text: {
         [`& ${ButtonItemStyled}`]: {
-          backgroundColor: '$brand500',
-          color: '$grey50',
-          '&:hover': { backgroundColor: '$blue600' },
-          '&:focus': { backgroundColor: '$blue700' },
-          '&:active': { backgroundColor: '$blue400' },
-
-        },
-        [`& ${ButtonItemStyled}.active`]: {
-          backgroundColor: '$brand700',
-          '&:hover': { backgroundColor: '$brand700' },
-          '&:focus': { backgroundColor: '$brand700' },
-          '&:active': { backgroundColor: '$brand700' },
+          backgroundColor: 'transparent',
+          boxShadow: 'none',
+          padding: 0,
+          border: 0,
         },
-
       },
-      simple: {
+      contained: {
         [`& ${ButtonItemStyled}`]: {
-          backgroundColor: 'transparent',
-          border: '1px solid $dark300',
-          color: '$dark600',
-          '&:hover': { backgroundColor: '$neutral' },
-        },
-        [`& ${ButtonItemStyled}.active`]: {
-          backgroundColor: '$dark200',
-          color: '$dark600',
-          '&:hover': { backgroundColor: '$dark200', color: '$dark600', },
-        },
+          borderWidth: '$1',
+          borderStyle: 'solid',
+          '&:disabled': {
+            boxShadow: 'none',
+          }
+        }
+      },
+      outlined: {
+        [`& ${ButtonItemStyled}`]: {
+          borderWidth: '$1',
+          borderStyle: 'solid',
+          '&:disabled': {
+            color: '$neutral400',
+          }
+        }
       },
     },
     size: {
+      xs: {
+        [`& ${ButtonItemStyled}`]: {
+          padding: '$6 $12',
+          fontSize: '$12',
+          lineHeight: '$base',
+          '&:not(:first-child)': {
+            borderLeft: 'none',
+          },
+          '&:first-child': {
+            borderTopLeftRadius: '$xs',
+            borderBottomLeftRadius: '$xs',
+          },
+          '&:last-child': {
+            borderTopRightRadius: '$xs',
+            borderBottomRightRadius: '$xs',
+          },
+        }
+      },
       sm: {
         [`& ${ButtonItemStyled}`]: {
           padding: '$8 $14',
           fontSize: '$13',
-
+          lineHeight: '$smaller',
           '&:not(:first-child)': {
             borderLeft: 'none',
           },
@@ -76,6 +99,7 @@ export const ButtonGroupStyled = styled(Flex, {
         [`& ${ButtonItemStyled}`]: {
           padding: '$12 $16',
           fontSize: '$14',
+          lineHeight: '$smaller',
           '&:not(:first-child)': {
             borderLeft: 'none',
           },
@@ -93,6 +117,7 @@ export const ButtonGroupStyled = styled(Flex, {
         [`& ${ButtonItemStyled}`]: {
           padding: '$13 $20',
           fontSize: '$18',
+          lineHeight: '$smaller',
           '&:not(:first-child)': {
             borderLeft: 'none',
           },
@@ -107,11 +132,336 @@ export const ButtonGroupStyled = styled(Flex, {
         }
       },
     },
-
   },
+
+  compoundVariants: [
+    // text
+    {
+      variant: 'text',
+      color: 'brand',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: '$brand500',
+          '&:hover': { color: '$brand600' },
+          '&:focus': { color: '$brand700' },
+          '&:active': { color: '$brand500' },
+          '&:disabled': { color: '$dark400' },
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: '$brand700',
+          '&:hover': { color: '$brand700' },
+          '&:focus': { color: '$brand700' },
+          '&:active': { color: '$brand700' },
+        },
+      }
+    },
+    {
+      variant: 'text',
+      color: 'neutral',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: '$neutral600',
+          '&:hover': { color: '$neutral700' },
+          '&:focus': { color: '$neutral800' },
+          '&:active': { color: '$neutral500' },
+          '&:disabled': { color: '$dark400' },
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: '$neutral800',
+          '&:hover': { color: '$neutral800' },
+          '&:focus': { color: '$neutral800' },
+          '&:active': { color: '$neutral800' },
+        },
+      }
+    },
+    {
+      variant: 'text',
+      color: 'purple',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: '$purple500',
+          '&:hover': { color: '$purple600' },
+          '&:focus': { color: '$purple700' },
+          '&:active': { color: '$purple500' },
+          '&:disabled': { color: '$dark400' },
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: '$purple700',
+          '&:hover': { color: '$purple700' },
+          '&:focus': { color: '$purple700' },
+          '&:active': { color: '$purple700' },
+        },
+      }
+    },
+    {
+      variant: 'text',
+      color: 'green',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: '$green500',
+          '&:hover': { color: '$green600' },
+          '&:focus': { color: '$green700' },
+          '&:active': { color: '$green500' },
+          '&:disabled': { color: '$dark400' },
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: '$green700',
+          '&:hover': { color: '$green700' },
+          '&:focus': { color: '$green700' },
+          '&:active': { color: '$green700' },
+        },
+      }
+    },
+    {
+      variant: 'text',
+      color: 'blue',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: '$blue500',
+          '&:hover': { color: '$blue600' },
+          '&:focus': { color: '$blue700' },
+          '&:active': { color: '$blue500' },
+          '&:disabled': { color: '$dark400' },
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: '$blue700',
+          '&:hover': { color: '$blue700' },
+          '&:focus': { color: '$blue700' },
+          '&:active': { color: '$blue700' },
+        },
+      }
+    },
+    {
+      variant: 'text',
+      color: 'red',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: '$red500',
+          '&:hover': { color: '$red600' },
+          '&:focus': { color: '$red700' },
+          '&:active': { color: '$red500' },
+          '&:disabled': { color: '$dark400' },
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: '$red700',
+          '&:hover': { color: '$red700' },
+          '&:focus': { color: '$red700' },
+          '&:active': { color: '$red700' },
+        },
+      }
+    },
+
+    // contained
+    {
+      variant: 'contained',
+      color: 'brand',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: '$grey50',
+          backgroundColor: '$brand500',
+          borderColor: '$brand500',
+          '&:hover': {
+            backgroundColor: '$blue600',
+          },
+          '&:focus': {
+            backgroundColor: '$blue700',
+          },
+          '&:active': {
+            backgroundColor: '$blue500',
+          },
+          '&:disabled': {
+            backgroundColor: '$brand50',
+            color: '$neutral400',
+          }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          backgroundColor: '$brand700',
+          '&:hover': { backgroundColor: '$brand700' },
+          '&:focus': { backgroundColor: '$brand700' },
+          '&:active': { backgroundColor: '$brand700' },
+        },
+      }
+    },
+    {
+      variant: 'contained',
+      color: 'neutral',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          backgroundColor: '$neutral600',
+          color: '$grey50',
+          '&:hover': {
+            backgroundColor: '$neutral700',
+            borderColor: '$neutral800',
+          },
+          '&:focus': {
+            backgroundColor: '$neutral800',
+          },
+          '&:active': {
+            backgroundColor: '$neutral500',
+            borderColor: '$neutral400',
+          },
+          '&:disabled': {
+            backgroundColor: '$neutral50',
+            borderColor: '$neutral200',
+            color: '$neutral400',
+          }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          backgroundColor: '$neutral800',
+          '&:hover': { backgroundColor: '$neutral800' },
+          '&:focus': { backgroundColor: '$neutral800' },
+          '&:active': { backgroundColor: '$neutral800' },
+        },
+      }
+    },
+    {
+      variant: 'contained',
+      color: 'purple',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          backgroundColor: '$purple500',
+          color: '$grey50',
+          '&:hover': {
+            backgroundColor: '$purple600',
+            borderColor: '$purple700',
+          },
+          '&:focus': {
+            backgroundColor: '$purple700',
+          },
+          '&:active': {
+            borderColor: '$purple300',
+            backgroundColor: '$purple500',
+          },
+          '&:disabled': {
+            borderColor: '$purple200',
+            backgroundColor: '$purple200',
+            color: '$neutral400',
+          }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          backgroundColor: '$purple700',
+          '&:hover': { backgroundColor: '$purple700' },
+          '&:focus': { backgroundColor: '$purple700' },
+          '&:active': { backgroundColor: '$purple700' },
+        },
+      }
+    },
+    // outlined
+    {
+      variant: 'outlined',
+      color: 'brand',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          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',
+            color: '$neutral400',
+          }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: '$brand700',
+          borderColor: '$brand600',
+          backgroundColor: '$brand50',
+          '&:hover': { backgroundColor: '$brand50', borderColor: '$brand600' },
+          '&:focus': { backgroundColor: '$brand50', borderColor: '$brand600' },
+          '&:active': { backgroundColor: '$brand50', borderColor: '$brand600' },
+        },
+      }
+    },
+    {
+      variant: 'outlined',
+      color: 'neutral',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          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',
+            color: '$neutral400',
+          }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: '$neutral800',
+          borderColor: '$neutral600',
+          backgroundColor: '$grey100',
+          '&:hover': { backgroundColor: '$grey100', borderColor: '$neutral600' },
+          '&:focus': { backgroundColor: '$grey100', borderColor: '$neutral600' },
+          '&:active': { backgroundColor: '$grey100', borderColor: '$neutral600' },
+        },
+      }
+    },
+    {
+      variant: 'outlined',
+      color: 'purple',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          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',
+            color: '$neutral400',
+          }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: '$purple700',
+          borderColor: '$purple600',
+          backgroundColor: '$purple50',
+          '&:hover': { backgroundColor: '$purple50', borderColor: '$purple600' },
+          '&:focus': { backgroundColor: '$purple50', borderColor: '$purple600' },
+          '&:active': { backgroundColor: '$purple50', borderColor: '$purple600' },
+        },
+      }
+    },
+
+  ],
+
   defaultVariants: {
-    variant: 'primary',
+    variant: 'contained',
     size: 'md',
+    color: 'brand',
   }
 });
 

package/src/components/CheckboxGroup.tsx

@@ -51,8 +51,8 @@ export const CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
   },
 
   variants: {
-    isValid: {
-      true: {
+    color: {
+      success: {
         'label': {
           '&:focus button, &:hover button': {
             boxShadow: '0px 0px 0px 4px rgba(38, 167, 67, 0.50)',
@@ -66,7 +66,8 @@ export const CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
           backgroundColor: '$green500',
         },
       },
-      false: {
+      blue: {},
+      error: {
         'label': {
           '&:focus button, &:hover button': {
             boxShadow: '0px 0px 0px 4px rgba(225, 86, 98, 0.50)'
@@ -101,7 +102,7 @@ export const CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
   compoundVariants: [
 
     {
-      isValid: undefined,
+      color: 'blue',
       disabled: false,
       css: {
         'label': {
@@ -119,7 +120,7 @@ export const CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
     },
 
     {
-      isValid: undefined,
+      color: 'blue',
       disabled: true,
       css: {
         'label button': {
@@ -133,7 +134,7 @@ export const CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
     },
 
     {
-      isValid: true,
+      color: 'success',
       disabled: true,
       css: {
         'label button': {
@@ -147,7 +148,7 @@ export const CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
     },
 
     {
-      isValid: false,
+      color: 'error',
       disabled: true,
       css: {
         'label button': {
@@ -159,13 +160,17 @@ export const CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
         }
       }
     }
-  ]
+  ],
+  defaultVariants: {
+    color: 'blue',
+    disabled: false
+  }
 })
 
 export type CheckboxGroupProps = ComponentProps<typeof CheckboxGroupStyled> & {
   placeholder?: string
   children?: React.ReactNode
-  isValid?: boolean
+  color?: string
   disabled?: boolean
 }
 

package/src/components/Container.tsx

@@ -0,0 +1,40 @@
+import { ComponentProps, ElementType } from 'react';
+import { styled } from '../styles';
+import { Container as ContainerRadix } from '@radix-ui/themes';
+
+export const ContainerStyled = styled(ContainerRadix, {
+  variants: {
+    size: {
+      xs: { maxWidth: '576px' },
+      sm: { minWidth: '577px', maxWidth: '767px' },
+      md: { mixWidth: '768px', maxWidth: '991px' },
+      lg: { mixWidth: '992px', maxWidth: '1199px' },
+      xl: { mixWidth: '1200px', maxWidth: '1399px' },
+      xxl: { mixWidth: '1400px' },
+      responsive: { width: '100%', maxWidth: '100%', minWidth: '100%' }
+    },
+    display: {
+      none: { display: 'none' },
+      initial: { display: 'initial' },
+    },
+    align: {
+      left: { marginLeft: 0, marginRight: 'auto' },
+      center: { marginLeft: 'auto', marginRight: 'auto' },
+      right: { marginLeft: 'auto', marginRight: 0 },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    align: 'left',
+    display: 'initial'
+  },
+});
+
+export type ContainerProps = ComponentProps<typeof ContainerStyled> & {
+  as?: ElementType;
+  children: React.ReactNode;
+};
+
+export function Container({ children, ...props }: ContainerProps) {
+  return <ContainerStyled {...props}>{children}</ContainerStyled>;
+}

package/src/components/Flex.tsx

@@ -1,9 +1,27 @@
 import { ComponentProps, ElementType } from 'react';
 import { styled } from '../styles'
 import { Flex as FlexRadix } from "@radix-ui/themes";
-export const Flex = styled(FlexRadix, {
-  display: 'flex',
+export const FlexStyled = styled(FlexRadix, {
   variants: {
+    display: {
+      'flex': { display: 'flex' },
+      'inline-flex': { display: 'inline-flex' }
+    },
+    align: {
+      start: { alignItems: 'flex-start' },
+      center: { alignItems: 'center' },
+      end: { alignItems: 'flex-end' },
+      stretch: { alignItems: 'stretch' },
+      baseline: { alignItems: 'baseline' },
+    },
+    justify: {
+      start: { justifyContent: 'flex-start' },
+      center: { justifyContent: 'center' },
+      end: { justifyContent: 'flex-end' },
+      between: { justifyContent: 'space-between' },
+      around: { justifyContent: 'space-around' },
+      evenly: { justifyContent: 'space-evenly' },
+    },
     direction: {
       row: { flexDirection: 'row' },
       column: { flexDirection: 'column' },
@@ -31,17 +49,70 @@ export const Flex = styled(FlexRadix, {
       72: { gap: '$72' },
       80: { gap: '$80' },
       full: { gap: '$full' },
+    },
+    gapY: {
+      2: { gap: '$2' },
+      4: { gap: '$4' },
+      6: { gap: '$6' },
+      8: { gap: '$8' },
+      10: { gap: '$10' },
+      12: { gap: '$12' },
+      14: { gap: '$14' },
+      16: { gap: '$16' },
+      20: { gap: '$20' },
+      22: { gap: '$22' },
+      24: { gap: '$24' },
+      32: { gap: '$32' },
+      36: { gap: '$36' },
+      40: { gap: '$40' },
+      48: { gap: '$48' },
+      56: { gap: '$56' },
+      64: { gap: '$64' },
+      72: { gap: '$72' },
+      80: { gap: '$80' },
+      full: { gap: '$full' },
+    },
+    gapX: {
+      2: { gap: '$2' },
+      4: { gap: '$4' },
+      6: { gap: '$6' },
+      8: { gap: '$8' },
+      10: { gap: '$10' },
+      12: { gap: '$12' },
+      14: { gap: '$14' },
+      16: { gap: '$16' },
+      20: { gap: '$20' },
+      22: { gap: '$22' },
+      24: { gap: '$24' },
+      32: { gap: '$32' },
+      36: { gap: '$36' },
+      40: { gap: '$40' },
+      48: { gap: '$48' },
+      56: { gap: '$56' },
+      64: { gap: '$64' },
+      72: { gap: '$72' },
+      80: { gap: '$80' },
+      full: { gap: '$full' },
     }
   },
   defaultVariants: {
+    display: 'flex',
     direction: 'row',
     gap: 10,
   }
 
 })
 
-export type FlexProps = ComponentProps<typeof Flex> & {
-  as?: ElementType
+export type FlexProps = ComponentProps<typeof FlexStyled> & {
+  as?: ElementType,
+  children: React.ReactNode
 }
 
 
+export function Flex({ children, ...props }: FlexProps) {
+  return (
+    <FlexStyled {...props}>
+      {children}
+    </FlexStyled>
+  )
+}