@lets-events/react 3.0.0 → 4.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/Icon.tsx

@@ -9,23 +9,34 @@ import PropTypes from "prop-types";
 
 library.add(fas, far, fab);
 
-interface IconProps extends Omit<FontAwesomeIconProps, "icon"> {
+interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
   name: IconName;
+  size?: 'xs' | 'sm' | 'md' | 'xl';
   prefix?: IconPrefix;
 }
 
-export const Icon = ({ name, prefix = "fas", size = "1x", color = "currentColor", className = "", ...props }: IconProps) => {
+export const Icon = ({ name, prefix = "fas", size = "sm", color = "currentColor", className = "", ...props }: IconProps) => {
+  const sizeMap = {
+
+    'xs': { width: '0.625rem', height: '0.625rem', fontSize: '0.625rem' },
+    'sm': { width: '0.625rem', height: '0.625rem', fontSize: '0.625rem' },
+    'md': { width: '0.75rem', height: '0.75rem', fontSize: '0.75rem' },
+    'xl': { width: '1rem', height: '1rem', fontSize: '1rem' },
+    undefined: { width: '0.75rem', height: '0.75rem', fontSize: '0.75rem' },
+  } as const;
+
   return (
     <FontAwesomeIcon
       icon={[prefix, name]}
-      size={size}
+      style={sizeMap[size]}
       color={color}
       className={className}
       {...props}
+      width={sizeMap[size]?.width}
+      height={sizeMap[size]?.height}
     />
   );
 };
-
 Icon.propTypes = {
   name: PropTypes.string.isRequired,
   prefix: PropTypes.string,

package/src/components/RadioGroup.tsx

@@ -50,8 +50,8 @@ export const RadioGroupStyled = styled(RadioGroupRadix.Root, {
   },
 
   variants: {
-    isValid: {
-      true: {
+    color: {
+      success: {
         'label': {
           '&:focus button, &:hover button': {
             boxShadow: '0px 0px 0px 4px rgba(38, 167, 67, 0.50)',
@@ -65,7 +65,8 @@ export const RadioGroupStyled = styled(RadioGroupRadix.Root, {
           backgroundColor: '$green500',
         },
       },
-      false: {
+      blue: {},
+      error: {
         'label': {
           '&:focus button, &:hover button': {
             boxShadow: '0px 0px 0px 4px rgba(225, 86, 98, 0.50)'
@@ -98,9 +99,8 @@ export const RadioGroupStyled = styled(RadioGroupRadix.Root, {
   },
 
   compoundVariants: [
-
     {
-      isValid: undefined,
+      color: 'blue',
       disabled: false,
       css: {
         'label': {
@@ -118,7 +118,7 @@ export const RadioGroupStyled = styled(RadioGroupRadix.Root, {
     },
 
     {
-      isValid: undefined,
+      color: 'blue',
       disabled: true,
       css: {
         'label button': {
@@ -132,7 +132,7 @@ export const RadioGroupStyled = styled(RadioGroupRadix.Root, {
     },
 
     {
-      isValid: true,
+      color: 'success',
       disabled: true,
       css: {
         'label button': {
@@ -146,7 +146,7 @@ export const RadioGroupStyled = styled(RadioGroupRadix.Root, {
     },
 
     {
-      isValid: false,
+      color: 'error',
       disabled: true,
       css: {
         'label button': {
@@ -158,13 +158,17 @@ export const RadioGroupStyled = styled(RadioGroupRadix.Root, {
         }
       }
     }
-  ]
+  ],
+  defaultVariants: {
+    color: 'blue',
+    disabled: false
+  }
 })
 
 export type RadioGroupProps = ComponentProps<typeof RadioGroupStyled> & {
   placeholder?: string
   children?: React.ReactNode
-  isValid?: boolean
+  color?: string
   disabled?: boolean
 }
 
@@ -175,14 +179,12 @@ export type RadioItemProps = {
 
 export function RadioGroup({
   children,
-  isValid,
   disabled,
   ...props
 }: RadioGroupProps) {
   return (
     <RadioGroupStyled
       disabled={disabled}
-      isValid={isValid}
       {...props}
     >
       {children}