@lets-events/react 2.0.0 → 4.0.0

package/src/components/ButtonGroup.tsx

@@ -0,0 +1,478 @@
+import { ComponentProps } from "react";
+import { styled } from "../styles";
+import { Button, Flex } from "@radix-ui/themes";
+
+export const ButtonItemStyled = styled(Button, {
+  fontFamily: '$default',
+  letterSpacing: 0,
+  border: 0,
+  transition: 'all 300ms ease-out',
+  cursor: 'pointer',
+  boxSizing: 'border-box',
+  variants: {
+    active: {
+      true: {
+      },
+    }
+  },
+});
+
+export const ButtonGroupStyled = styled(Flex, {
+  display: 'flex',
+  borderRadius: '$md',
+  overflow: 'hidden',
+  variants: {
+    color: {
+      brand: {},
+      neutral: {},
+      purple: {},
+      green: {},
+      blue: {},
+      red: {},
+    },
+    variant: {
+      text: {
+        [`& ${ButtonItemStyled}`]: {
+          backgroundColor: 'transparent',
+          boxShadow: 'none',
+          padding: 0,
+          border: 0,
+        },
+      },
+      contained: {
+        [`& ${ButtonItemStyled}`]: {
+          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',
+          },
+          '&:first-child': {
+            borderTopLeftRadius: '$sm',
+            borderBottomLeftRadius: '$sm',
+          },
+          '&:last-child': {
+            borderTopRightRadius: '$sm',
+            borderBottomRightRadius: '$sm',
+          },
+        }
+      },
+      md: {
+        [`& ${ButtonItemStyled}`]: {
+          padding: '$12 $16',
+          fontSize: '$14',
+          lineHeight: '$smaller',
+          '&:not(:first-child)': {
+            borderLeft: 'none',
+          },
+          '&:first-child': {
+            borderTopLeftRadius: '$md',
+            borderBottomLeftRadius: '$md',
+          },
+          '&:last-child': {
+            borderTopRightRadius: '$md',
+            borderBottomRightRadius: '$md',
+          },
+        }
+      },
+      lg: {
+        [`& ${ButtonItemStyled}`]: {
+          padding: '$13 $20',
+          fontSize: '$18',
+          lineHeight: '$smaller',
+          '&:not(:first-child)': {
+            borderLeft: 'none',
+          },
+          '&:first-child': {
+            borderTopLeftRadius: '$lg',
+            borderBottomLeftRadius: '$lg',
+          },
+          '&:last-child': {
+            borderTopRightRadius: '$lg',
+            borderBottomRightRadius: '$lg',
+          },
+        }
+      },
+    },
+  },
+
+  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: 'contained',
+    size: 'md',
+    color: 'brand',
+  }
+});
+
+export interface ButtonItemProps extends ComponentProps<typeof ButtonItemStyled> { }
+
+export type ButtonGroupProps = ComponentProps<typeof ButtonGroupStyled>
+
+export function ButtonItem({ children, active, ...props }: ButtonItemProps) {
+  return <ButtonItemStyled className={active ? 'active' : ''} {...props}>{children}</ButtonItemStyled>;
+}
+
+export function ButtonGroup({ children, ...props }: ButtonGroupProps) {
+  return <ButtonGroupStyled {...props}>{children}</ButtonGroupStyled>;
+}

package/src/components/CaptionText.tsx

@@ -0,0 +1,16 @@
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+import { Text } from '@radix-ui/themes'
+
+export const CaptionText = styled(Text, {
+  fontFamily: '$default',
+  color: '$gray100',
+  letterSpacing: '0px',
+  fontSize: '$14',
+  lineHeight: '$16',
+  fontWeight: '$regular',
+})
+
+export type CaptionTextProps = ComponentProps<typeof CaptionText> & {
+  as?: ElementType
+}

package/src/components/CheckboxGroup.tsx

@@ -0,0 +1,208 @@
+import { ComponentProps } from 'react'
+import { styled } from '../styles'
+import { CheckboxGroup as CheckboxGroupRadix } from "@radix-ui/themes";
+
+export const CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
+  fontFamily: '$default',
+  letterSpacing: '0px',
+  fontSize: '$13',
+  'svg': {
+    display: 'none'
+  },
+  'label': {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '$8',
+    cursor: 'pointer',
+    '&:focus button, &:hover button': {
+      transition: 'all 300ms ease-out',
+      boxShadow: '0px 0px 0px 4px rgba(56, 129, 255, 0.50)'
+    }
+  },
+  'label button': {
+    backgroundColor: '$white',
+    borderRadius: '2px',
+    height: '$16',
+    width: '$16',
+    position: 'relative',
+    border: '2px solid $dark300',
+    cursor: 'pointer',
+  },
+  'label button[data-state=checked]:before': {
+    backgroundColor: '$dark50',
+    content: '',
+    width: '8px',
+    height: '8px',
+    position: 'absolute',
+    top: '2px',
+    right: '2px',
+    zIndex: 2,
+  },
+  'label button[data-state=checked]:after': {
+    backgroundColor: '$brand500',
+    content: '',
+    height: '$16',
+    width: '$16',
+    position: 'absolute',
+    top: '-2px',
+    right: '-2px',
+    borderRadius: '2px',
+    zIndex: 1,
+  },
+
+  variants: {
+    color: {
+      success: {
+        'label': {
+          '&:focus button, &:hover button': {
+            boxShadow: '0px 0px 0px 4px rgba(38, 167, 67, 0.50)',
+          }
+        },
+        'label button': {
+          borderColor: '$green500',
+          backgroundColor: '$dark50',
+        },
+        'label button[data-state=checked]:after': {
+          backgroundColor: '$green500',
+        },
+      },
+      blue: {},
+      error: {
+        'label': {
+          '&:focus button, &:hover button': {
+            boxShadow: '0px 0px 0px 4px rgba(225, 86, 98, 0.50)'
+          }
+        },
+        'label button': {
+          borderColor: '$error400',
+          backgroundColor: '$dark50',
+        },
+        'label button[data-state=checked]:after': {
+          backgroundColor: '$error600',
+        },
+      }
+    },
+    disabled: {
+      true: {
+        'label': {
+          cursor: 'not-allowed',
+          opacity: 0.5,
+          '&:focus button, &:hover button': {
+            boxShadow: 'none',
+          }
+        },
+        'label button': {
+          cursor: 'not-allowed',
+        }
+      },
+      false: {}
+    }
+  },
+
+  compoundVariants: [
+
+    {
+      color: 'blue',
+      disabled: false,
+      css: {
+        'label': {
+          '&:focus button, &:hover button': {
+            boxShadow: '0px 0px 0px 4px rgba(56, 129, 255, 0.50)'
+          }
+        },
+        'label button': {
+          borderColor: '$dark300',
+        },
+        'label button[data-state=checked]:after': {
+          backgroundColor: '$brand500',
+        },
+      }
+    },
+
+    {
+      color: 'blue',
+      disabled: true,
+      css: {
+        'label button': {
+          borderColor: '$brand100',
+          backgroundColor: '$dark50',
+        },
+        'label button[data-state=checked]:after': {
+          backgroundColor: '$brand100',
+        },
+      }
+    },
+
+    {
+      color: 'success',
+      disabled: true,
+      css: {
+        'label button': {
+          borderColor: '$success100',
+          backgroundColor: '$dark50',
+        },
+        'label button[data-state=checked]:after': {
+          backgroundColor: '$success100',
+        }
+      }
+    },
+
+    {
+      color: 'error',
+      disabled: true,
+      css: {
+        'label button': {
+          borderColor: '$error100',
+          backgroundColor: '$dark50',
+        },
+        'label button[data-state=checked]:after': {
+          backgroundColor: '$error100',
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    color: 'blue',
+    disabled: false
+  }
+})
+
+export type CheckboxGroupProps = ComponentProps<typeof CheckboxGroupStyled> & {
+  placeholder?: string
+  children?: React.ReactNode
+  color?: string
+  disabled?: boolean
+}
+
+export type CheckboxItemProps = {
+  children?: React.ReactNode
+  value: string,
+  style?: React.CSSProperties
+}
+
+export function CheckboxGroup({
+  children,
+
+  ...props
+}: CheckboxGroupProps) {
+  return (
+    <CheckboxGroupStyled {...props}>
+      {children}
+    </CheckboxGroupStyled>
+  )
+}
+
+
+export function CheckboxItem({
+  children,
+
+  ...props
+}: CheckboxItemProps) {
+  return (
+    <CheckboxGroupRadix.Item {...props}>
+      {children}
+    </CheckboxGroupRadix.Item>
+  )
+}
+
+