@lets-events/react 2.0.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -25,6 +25,13 @@
     "typescript": "^5.8.2"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.14.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@radix-ui/themes": "^3.2.1",
     "@stitches/react": "^1.2.8"
   }
 }

package/src/components/Avatar.tsx

@@ -0,0 +1,56 @@
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+import { Avatar as AvatarRadix } from "@radix-ui/themes";
+export const AvatarStyled = styled(AvatarRadix, {
+  fontFamily: '$default',
+  color: '$gray100',
+  letterSpacing: '0px',
+  variants: {
+    size: {
+      'xs': { width: '$24', height: '$24', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$10', },
+      'sm': { width: '$32', height: '$32', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$14', },
+      'md': { width: '$40', height: '$40', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$16', },
+      'lg': { width: '$48', height: '$48', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$18', },
+      'xl': { width: '$64', height: '$64', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$24', },
+    },
+    radii: {
+      full: { borderRadius: '$full' },
+    },
+    variant: {
+      'without-image': {
+        border: '1px solid $brand500',
+        backgroundColor: '$dark50',
+        color: '$dark700',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: 'normal',
+        textTransform: 'uppercase',
+
+      },
+      'with-image': {
+        border: 0,
+        'img': {
+          width: '100%',
+          height: '100%',
+          objectFit: 'cover',
+          borderRadius: '$full',
+        }
+      },
+    }
+  },
+
+  defaultVariants: {
+    size: 'md',
+    radii: 'full',
+    variant: 'without-image'
+  },
+})
+
+export type AvatarProps = ComponentProps<typeof AvatarStyled> & {
+  as?: ElementType
+  fallback?: string
+  src?: string
+}
+export function Avatar({ asChild, ...props }: AvatarProps) {
+  return <AvatarStyled as={AvatarRadix} {...props} />
+}

package/src/components/BadgeText.tsx

@@ -0,0 +1,24 @@
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+import { Text } from "@radix-ui/themes";
+export const BadgeText = styled(Text, {
+  fontFamily: '$default',
+  color: '$gray100',
+  letterSpacing: '0px',
+  variants: {
+    size: {
+      1: { fontSize: '$16', lineHeight: '$16', fontWeight: '$regular' },
+      2: { fontSize: '$14', lineHeight: '$14', fontWeight: '$regular' },
+      3: { fontSize: '$12', lineHeight: '$12', fontWeight: '$regular' },
+      4: { fontSize: '$10', lineHeight: '$10', fontWeight: '$regular' },
+    },
+  },
+
+  defaultVariants: {
+    size: '1',
+  },
+})
+
+export type BadgeTextProps = ComponentProps<typeof BadgeText> & {
+  as?: ElementType
+}

package/src/components/BodyText.tsx

@@ -0,0 +1,24 @@
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+import { Text } from "@radix-ui/themes";
+export const BodyText = styled(Text, {
+  fontFamily: '$default',
+  color: '$gray100',
+  fontWeight: '$regular',
+  variants: {
+    size: {
+      1: { fontSize: '$16', lineHeight: '$24' },
+      2: { fontSize: '$14', lineHeight: '$24' },
+      3: { fontSize: '$13', lineHeight: '$24' },
+      4: { fontSize: '$12', lineHeight: '$16' },
+    },
+  },
+
+  defaultVariants: {
+    size: '1',
+  },
+})
+
+export type BodyTextProps = ComponentProps<typeof BodyText> & {
+  as?: ElementType
+}

package/src/components/Box.tsx

@@ -0,0 +1,3 @@
+import { Box as BoxRadix } from "@radix-ui/themes";
+export const Box = BoxRadix
+

package/src/components/Button.tsx

@@ -0,0 +1,172 @@
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+import { Button as ButtonRadix } from '@radix-ui/themes'
+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',
+  variants: {
+    variant: {
+      simple: {
+        backgroundColor: 'transparent',
+        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',
+        '&:hover': {
+          border: '$2 solid $brand700',
+          transform: 'scale(1.05)',
+          backgroundColor: '$blue600',
+        },
+        '&:focus': {
+          border: 0,
+          backgroundColor: '$blue700',
+        },
+        '&:active': {
+          transform: 'scale(0.95)',
+          border: '$4 solid $brand300',
+          backgroundColor: '$blue500',
+        },
+        '&:hover:disabled': {
+          transform: 'none',
+        },
+        '&:disabled': {
+          border: '$1 solid $brand50',
+          backgroundColor: '$brand50',
+          boxShadow: 'none',
+          color: '$neutral400',
+          transition: 'none',
+        }
+      },
+      purple: {
+        backgroundColor: '$purple500',
+        color: '$grey50',
+        '&:hover': {
+          transform: 'scale(1.05)',
+          backgroundColor: '$purple600',
+          border: '$2 solid $purple700',
+        },
+        '&:focus': {
+          border: '$2 solid $purple700',
+          backgroundColor: '$purple600',
+        },
+        '&:active': {
+          transform: 'scale(0.95)',
+          border: '$2 solid $purple300',
+          backgroundColor: '$purple500',
+        },
+        '&:hover:disabled': {
+          transform: 'none',
+        },
+        '&: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',
+          color: '$neutral400',
+          transition: 'none',
+        }
+      },
+    },
+    size: {
+      xs: {
+        padding: '$6 $12',
+        fontSize: '$12',
+        lineHeight: '$base',
+      },
+      sm: {
+        padding: '$8 $14',
+        fontSize: '$13',
+        lineHeight: '$smaller',
+      },
+      md: {
+        padding: '$12 $16',
+        fontSize: '$14',
+        lineHeight: '$smaller',
+      },
+      lg: {
+        padding: '$13 $20',
+        fontSize: '$18',
+        lineHeight: '$smaller',
+      },
+    },
+    radii: {
+      'full': {
+        borderRadius: '$full',
+      }
+    },
+
+  },
+
+  defaultVariants: {
+    variant: 'simple',
+    size: 'md',
+  },
+})
+
+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} />
+}

package/src/components/ButtonGroup.tsx

@@ -0,0 +1,128 @@
+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',
+  variants: {
+    active: {
+      true: {
+      },
+    }
+  },
+});
+
+export const ButtonGroupStyled = styled(Flex, {
+  display: 'flex',
+  borderRadius: '$md',
+  overflow: 'hidden',
+  variants: {
+    variant: {
+      primary: {
+        [`& ${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' },
+        },
+
+      },
+      simple: {
+        [`& ${ButtonItemStyled}`]: {
+          backgroundColor: 'transparent',
+          border: '1px solid $dark300',
+          color: '$dark600',
+          '&:hover': { backgroundColor: '$neutral' },
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          backgroundColor: '$dark200',
+          color: '$dark600',
+          '&:hover': { backgroundColor: '$dark200', color: '$dark600', },
+        },
+      },
+    },
+    size: {
+      sm: {
+        [`& ${ButtonItemStyled}`]: {
+          padding: '$8 $14',
+          fontSize: '$13',
+
+          '&:not(:first-child)': {
+            borderLeft: 'none',
+          },
+          '&:first-child': {
+            borderTopLeftRadius: '$sm',
+            borderBottomLeftRadius: '$sm',
+          },
+          '&:last-child': {
+            borderTopRightRadius: '$sm',
+            borderBottomRightRadius: '$sm',
+          },
+        }
+      },
+      md: {
+        [`& ${ButtonItemStyled}`]: {
+          padding: '$12 $16',
+          fontSize: '$14',
+          '&:not(:first-child)': {
+            borderLeft: 'none',
+          },
+          '&:first-child': {
+            borderTopLeftRadius: '$md',
+            borderBottomLeftRadius: '$md',
+          },
+          '&:last-child': {
+            borderTopRightRadius: '$md',
+            borderBottomRightRadius: '$md',
+          },
+        }
+      },
+      lg: {
+        [`& ${ButtonItemStyled}`]: {
+          padding: '$13 $20',
+          fontSize: '$18',
+          '&:not(:first-child)': {
+            borderLeft: 'none',
+          },
+          '&:first-child': {
+            borderTopLeftRadius: '$lg',
+            borderBottomLeftRadius: '$lg',
+          },
+          '&:last-child': {
+            borderTopRightRadius: '$lg',
+            borderBottomRightRadius: '$lg',
+          },
+        }
+      },
+    },
+
+  },
+  defaultVariants: {
+    variant: 'primary',
+    size: 'md',
+  }
+});
+
+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,203 @@
+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: {
+    isValid: {
+      true: {
+        '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',
+        },
+      },
+      false: {
+        '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: [
+
+    {
+      isValid: undefined,
+      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',
+        },
+      }
+    },
+
+    {
+      isValid: undefined,
+      disabled: true,
+      css: {
+        'label button': {
+          borderColor: '$brand100',
+          backgroundColor: '$dark50',
+        },
+        'label button[data-state=checked]:after': {
+          backgroundColor: '$brand100',
+        },
+      }
+    },
+
+    {
+      isValid: true,
+      disabled: true,
+      css: {
+        'label button': {
+          borderColor: '$success100',
+          backgroundColor: '$dark50',
+        },
+        'label button[data-state=checked]:after': {
+          backgroundColor: '$success100',
+        }
+      }
+    },
+
+    {
+      isValid: false,
+      disabled: true,
+      css: {
+        'label button': {
+          borderColor: '$error100',
+          backgroundColor: '$dark50',
+        },
+        'label button[data-state=checked]:after': {
+          backgroundColor: '$error100',
+        }
+      }
+    }
+  ]
+})
+
+export type CheckboxGroupProps = ComponentProps<typeof CheckboxGroupStyled> & {
+  placeholder?: string
+  children?: React.ReactNode
+  isValid?: boolean
+  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>
+  )
+}
+
+

package/src/components/DisplayText.tsx

@@ -0,0 +1,26 @@
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+import { Text } from '@radix-ui/themes'
+
+export const DisplayText = styled('p', {
+  fontFamily: '$default',
+  lineHeight: '$base',
+  color: '$gray100',
+  letterSpacing: '$2',
+  fontWeight: '$semibold',
+  variants: {
+    size: {
+      lg: { fontSize: '$56' },
+      md: { fontSize: '$48' },
+      sm: { fontSize: '$36' },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export type DisplayTextProps = ComponentProps<typeof DisplayText> & {
+  as?: ElementType
+}