@lets-events/react 3.0.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

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

@@ -11,7 +11,12 @@ export const BadgeText = styled(Text, {
       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: {

package/src/components/Button.tsx

@@ -1,6 +1,7 @@
-import { ComponentProps, ElementType } from 'react'
+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,
@@ -13,117 +14,71 @@ export const ButtonStyled = styled(ButtonRadix, {
   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: {
-      simple: {
+      text: {
         backgroundColor: 'transparent',
+        boxShadow: 'none',
         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',
+      contained: {
         '&:hover': {
-          border: '$2 solid $brand700',
-          transform: 'scale(1.05)',
-          backgroundColor: '$blue600',
+          borderWidth: '$2',
+          borderStyle: 'solid',
         },
         '&:focus': {
           border: 0,
-          backgroundColor: '$blue700',
         },
         '&:active': {
-          transform: 'scale(0.95)',
-          border: '$4 solid $brand300',
-          backgroundColor: '$blue500',
-        },
-        '&:hover:disabled': {
-          transform: 'none',
+          borderWidth: '$4',
+          borderStyle: 'solid',
         },
         '&:disabled': {
-          border: '$1 solid $brand50',
-          backgroundColor: '$brand50',
+          borderWidth: '$1',
+          borderStyle: 'solid',
           boxShadow: 'none',
-          color: '$neutral400',
-          transition: 'none',
         }
       },
-      purple: {
-        backgroundColor: '$purple500',
-        color: '$grey50',
+      outlined: {
+        borderWidth: '$1',
+        borderStyle: 'solid',
         '&:hover': {
-          transform: 'scale(1.05)',
-          backgroundColor: '$purple600',
-          border: '$2 solid $purple700',
+          borderWidth: '$2',
+          borderStyle: 'solid',
         },
         '&:focus': {
-          border: '$2 solid $purple700',
-          backgroundColor: '$purple600',
+          borderWidth: '$2',
+          borderStyle: 'solid',
         },
         '&:active': {
-          transform: 'scale(0.95)',
-          border: '$2 solid $purple300',
-          backgroundColor: '$purple500',
-        },
-        '&:hover:disabled': {
-          transform: 'none',
+          borderWidth: '$2',
+          borderStyle: 'solid',
         },
         '&: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',
+          borderWidth: '$1',
+          borderStyle: 'solid',
           color: '$neutral400',
-          transition: 'none',
         }
-      },
+      }
     },
     size: {
       xs: {
@@ -152,20 +107,242 @@ export const ButtonStyled = styled(ButtonRadix, {
         borderRadius: '$full',
       }
     },
-
   },
 
   defaultVariants: {
-    variant: 'simple',
+    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} />