@lets-events/react 2.0.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "2.0.0",
+  "version": "4.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/Badge.tsx

@@ -0,0 +1,121 @@
+import React from 'react'
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+import { Badge as BadgeRadix } from '@radix-ui/themes'
+export const BadgeStyled = styled(BadgeRadix, {
+    fontFamily: '$default',
+    borderRadius: '$sm',
+    verticalAlign: 'middle',
+    'svg': {
+        marginRight: '10px',
+    },
+    variants: {
+        color: {
+            primary: {
+                backgroundColor: '$brand100',
+                color: '$dark700',
+            },
+            dark: {
+                backgroundColor: '$dark700',
+                color: '$grey50',
+            },
+            light: {
+                backgroundColor: '$neutral200',
+                color: '$dark700',
+            },
+            red: {
+                backgroundColor: '$red100',
+                color: '$dark700',
+            },
+            green: {
+                backgroundColor: '$green100',
+                color: '$dark700',
+            },
+            yellow: {
+                backgroundColor: '$yellow100',
+                color: '$dark700',
+            },
+            orange: {
+                backgroundColor: '$orange100',
+                color: '$dark700',
+            },
+            blue: {
+                backgroundColor: '$blue100',
+                color: '$dark700',
+            },
+            pink: {
+                backgroundColor: '$pink100',
+                color: '$dark700',
+            },
+            purple: {
+                backgroundColor: '$purple100',
+                color: '$dark700',
+            },
+            grey: {
+                backgroundColor: '$grey200',
+                color: '$dark700',
+            },
+            disable: {
+                backgroundColor: '$neutral200',
+                color: '$grey500',
+            }
+
+
+        },
+        size: {
+            xs: {
+                padding: '$4 $6',
+                fontSize: '$10',
+                borderRadius: '$2xs',
+                lineHeight: '$smaller',
+            },
+            sm: {
+                padding: '$4 $8',
+                fontSize: '$12',
+                borderRadius: '$xs',
+                lineHeight: '$smaller',
+            },
+            md: {
+                padding: '$8 $10',
+                fontSize: '$14',
+                borderRadius: '$sm',
+                lineHeight: '$smaller',
+            },
+            xl: {
+                padding: '$12 $12',
+                fontSize: '$16',
+                borderRadius: '$sm',
+                lineHeight: '$smaller',
+            },
+        },
+        radii: {
+            'full': {
+                borderRadius: '$full',
+            },
+        },
+    },
+
+    defaultVariants: {
+        size: 'md',
+        color: 'primary',
+    },
+})
+
+export type BadgeProps = ComponentProps<typeof BadgeStyled> & {
+    as?: ElementType
+    icon?: boolean
+    size: 'md',
+    children: React.ReactNode
+}
+export function Badge({ asChild, children, ...props }: BadgeProps) {
+    return (
+        <BadgeStyled {...props}>
+            {React.Children.map(children, (child) => {
+                if (React.isValidElement(child)) {
+                    return React.cloneElement(child, { size: props.size } as any)
+                }
+                return child
+            })}
+        </BadgeStyled>
+    )
+}

package/src/components/BadgeText.tsx

@@ -0,0 +1,29 @@
+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' },
+      'xs': { fontSize: '$10', lineHeight: '$10', fontWeight: '$regular' },
+      'sm': { fontSize: '$12', lineHeight: '$12', fontWeight: '$regular' },
+      'md': { fontSize: '$14', lineHeight: '$14', fontWeight: '$regular' },
+      'xl': { fontSize: '$16', lineHeight: '$16', 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,349 @@
+import { ComponentProps } 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',
+  '&:hover': {
+    transform: 'scale(1.05)',
+  },
+  '&:active': {
+    transform: 'scale(0.95)',
+  },
+  '&:disabled': {
+    cursor: 'not-allowed',
+    transition: 'none',
+  },
+  '&:hover:disabled': {
+    transform: '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',
+        }
+      }
+    },
+    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: 'contained',
+    size: 'md',
+    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',
+        '&: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} />
+}