@lets-events/react 3.0.0 → 5.0.0

package/src/components/Text.tsx

@@ -1,26 +1,32 @@
 import { ComponentProps, ElementType } from 'react'
 import { styled } from '../styles'
 import { Text as TextRadix } from '@radix-ui/themes'
+import { CSS } from '@stitches/react'
 
-export const Text = styled(TextRadix, {
+export const TextStyle = styled(TextRadix, {
   fontFamily: '$default',
   lineHeight: '$base',
   color: '$gray100',
   letterSpacing: '$2',
   fontWeight: '$semibold',
+  fontSize: '$sm',
   variants: {
     size: {
       lg: { fontSize: '$56' },
       md: { fontSize: '$48' },
       sm: { fontSize: '$36' },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-  },
+    }
+  }
 })
 
-export type TextProps = ComponentProps<typeof Text> & {
-  as?: ElementType
+export type TextProps = ComponentProps<typeof TextStyle> & {
+  as?: ElementType,
+  asChild?: boolean
+  css?: CSS
 }
+
+export function Text({ ...props }: TextProps) {
+  return (
+    <TextStyle {...props} />
+  )
+}

package/src/components/TextField.tsx

@@ -34,13 +34,42 @@ export const TextFieldStyled = styled(TextFieldRadix.Root, {
     cursor: 'not-allowed',
   },
   variants: {
+    color: {
+      default: {
+        color: '$dark400',
+        border: '1px solid $dark200',
+        '&:has(input:focus)': {
+          border: '2px solid $brand300',
+        },
+        '&:has(input:disabled)': {
+          backgroundColor: '$dark100',
+          color: '$dark400',
+          border: '1px solid $dark200',
+          cursor: 'not-allowed',
+        },
+      },
+      error:{
+        border: '1px solid $error400',
+        color: '$error400',
+        'input::placeholder': {
+          color: '$error400',
+        },
+        '& hast(input:focus)': {
+          border: '2px solid $error400',
+        },
+        '&:has(input:disabled)': {
+          backgroundColor: '$error50',
+          color: '$error300',
+          border: '1px solid $error100',
+          cursor: 'not-allowed',
+        },
+      },
+
+    },
     isValid: {
       true: {},
       false: {
-        border: '1px solid $error400',
-        color: '$error400',
-        backgroundColor: '$error50',
-      }
+}
     },
   },
 
@@ -101,25 +130,27 @@ export type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
   name?: string,
 }
 
-export type TextFieldSlotProps = ComponentProps<typeof TextFieldStyled> & {
+export type TextFieldSlotProps = Omit<ComponentProps<typeof TextFieldStyled>, 'color'> & {
   placeholder?: string
   children?: React.ReactNode
   position?: 'flex-start' | 'flex-end'
   onClick?: () => void,
+  color?: "error" | "success" | undefined
 }
 
 export function TextField({
   children,
   isValid,
   name,
+  color,
   ...props
 }: TextFieldProps) {
 
   return (
-    <TextFieldStyled isValid={isValid} name={name} {...props}>
+    <TextFieldStyled color={color} isValid={isValid} name={name} {...props}>
       {children}
       {isValid && (
-        <TextFieldSlot position='flex-end' name={name}>
+        <TextFieldSlot position='flex-end' name={name} color={color as TextFieldSlotProps['color']}>
           <Icon name='check' />
         </TextFieldSlot>
       )}
@@ -139,7 +170,7 @@ export function TextFieldSlot({
     <>
       {
         !!onClick ?
-          <TextFieldSlotStyled {...props} style={{
+          <TextFieldSlotStyled {...{ ...props, color: undefined }} style={{
             position: 'absolute',
             left: position === 'flex-end' ? 'none' : 15,
             right: position === 'flex-start' ? 'none' : 15,
@@ -149,7 +180,7 @@ export function TextFieldSlot({
             cursor: 'pointer',
           }} onClick={() => onClick()}>{children}</TextFieldSlotStyled>
           :
-          <TextFieldSlotStyled {...props} style={{
+          <TextFieldSlotStyled {...{ ...props, color: undefined }} style={{
             float: position === 'flex-start' ? 'left' : 'right',
             order: position === 'flex-start' ? 0 : 2,
             marginLeft: position === 'flex-start' ? 0 : 15,

package/src/index.tsx

@@ -1,22 +1,27 @@
+// Icon
 export * from './components/Icon'
+
+// Text
 export * from './components/Text'
-export * from './components/DisplayText'
-export * from './components/Headline'
-export * from './components/Subtitle'
-export * from './components/BodyText'
-export * from './components/Label'
-export * from './components/BadgeText'
-export * from './components/CaptionText'
-export * from './components/TooltipText'
 
+// Components
 export * from './components/Button'
 export * from './components/ButtonGroup'
 export * from './components/Avatar'
-export * from './components/Flex'
-export * from './components/Box'
 export * from './components/TextField'
 export * from './components/RadioGroup'
 export * from './components/CheckboxGroup'
 export * from './components/Filter'
 export * from './components/Dropdown'
+export * from './components/Badge'
+export * from './components/Modal'
+export * from './components/Alert'
+export * from './components/Switch'
+export * from './components/Step'
 
+// Layouts
+export * from './components/Flex'
+export * from './components/Box'
+export * from './components/Grid'
+export * from './components/Container'
+export * from './components/Section'

package/src/components/BadgeText.tsx

@@ -1,24 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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/CaptionText.tsx

@@ -1,16 +0,0 @@
-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/DisplayText.tsx

@@ -1,26 +0,0 @@
-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
-}

package/src/components/Headline.tsx

@@ -1,29 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Heading } from '@radix-ui/themes'
-
-export const Headline = styled(Heading, {
-  fontFamily: '$default',
-  color: '$gray100',
-  letterSpacing: '0px',
-  variants: {
-    size: {
-      1: { fontSize: '$48', lineHeight: '$64', fontWeight: '$semibold' },
-      2: { fontSize: '$32', lineHeight: '$48', fontWeight: '$semibold' },
-      3: { fontSize: '$24', lineHeight: '$40', fontWeight: '$semibold' },
-      4: { fontSize: '$20', lineHeight: '$36', fontWeight: '$semibold' },
-      5: { fontSize: '$18', lineHeight: '$24', fontWeight: '$semibold' },
-      6: { fontSize: '$18', lineHeight: '$34', fontWeight: '$medium' },
-      7: { fontSize: '$16', lineHeight: '$32', fontWeight: '$semibold' },
-      8: { fontSize: '$16', lineHeight: '$32', fontWeight: '$medium' },
-    },
-  },
-
-  defaultVariants: {
-    size: 1,
-  },
-})
-
-export type HeadlineProps = ComponentProps<typeof Headline> & {
-  as?: ElementType
-}

package/src/components/Label.tsx

@@ -1,28 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Text } from '@radix-ui/themes'
-
-export const Label = styled(Text, {
-  fontFamily: '$default',
-  color: '$gray100',
-  letterSpacing: '0px',
-  variants: {
-    size: {
-      1: { fontSize: '$18', lineHeight: '$22', fontWeight: '$semibold' },
-      2: { fontSize: '$14', lineHeight: '$16', fontWeight: '$medium' },
-      3: { fontSize: '$14', lineHeight: '$16', fontWeight: '$regular' },
-      4: { fontSize: '$13', lineHeight: '$16', fontWeight: '$semibold', letterSpacing: '2px' },
-      5: { fontSize: '$13', lineHeight: '$16', fontWeight: '$medium' },
-      6: { fontSize: '$13', lineHeight: '$16', fontWeight: '$regular' },
-      7: { fontSize: '$12', lineHeight: '$12', fontWeight: '$regular' },
-    },
-  },
-
-  defaultVariants: {
-    size: '1',
-  },
-})
-
-export type LabelProps = ComponentProps<typeof Label> & {
-  as?: ElementType
-}

package/src/components/Subtitle.tsx

@@ -1,26 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Text } from '@radix-ui/themes'
-
-export const Subtitle = styled(Text, {
-  fontFamily: '$default',
-  color: '$gray100',
-  letterSpacing: '0px',
-  variants: {
-    size: {
-      1: { fontSize: '$20', lineHeight: '$36', fontWeight: '$regular' },
-      2: { fontSize: '$18', lineHeight: '$34', fontWeight: '$regular' },
-      3: { fontSize: '$16', lineHeight: '$32', fontWeight: '$regular' },
-      4: { fontSize: '$14', lineHeight: '$24', fontWeight: '$regular' },
-      5: { fontSize: '$14', lineHeight: '$16', fontWeight: '$semibold' },
-    },
-  },
-
-  defaultVariants: {
-    size: 1,
-  },
-})
-
-export type SubtitleProps = ComponentProps<typeof Subtitle> & {
-  as?: ElementType
-}

package/src/components/TooltipText.tsx

@@ -1,15 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-
-export const TooltipText = styled('span', {
-  fontFamily: '$default',
-  color: '$gray100',
-  letterSpacing: '0px',
-  fontSize: '$13',
-  lineHeight: '$16',
-  fontWeight: '$regular',
-})
-
-export interface TooltipTextProps extends ComponentProps<typeof TooltipText> {
-  as?: ElementType
-}