@lets-events/react 4.0.0 → 6.0.0

package/src/components/Switch.tsx

@@ -0,0 +1,109 @@
+import { Switch as RadixSwitch } from '@radix-ui/themes'
+import type { ComponentProps } from 'react'
+import { styled } from '../styles'
+
+export const SwitchStyled = styled(RadixSwitch, {
+  all: 'unset',
+  borderRadius: '$full',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  transition: 'all 0.3s',
+  cursor: 'pointer',
+
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    borderRadius: '$full',
+    pointerEvents: 'none',
+    cursor: 'pointer',
+  },
+  'span': {
+    position: 'absolute',
+    top: '50%',
+    left: 0,
+    transform: 'translate(0, -50%)',
+    borderRadius: '50%',
+    transition: 'all 0.3s',
+    cursor: 'pointer',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.24)',
+  },
+
+  '&[data-state="checked"] span': {
+    left: 'auto',
+    transform: 'translate(50%, -50%)',
+  },
+
+  variants: {
+    color: {
+      brand: {
+        '&::before': {
+          backgroundColor: '$brand50',
+        },
+        'span': {
+          backgroundColor: '$dark50',
+          borderColor: '$neutral300',
+        },
+        '&[data-state="checked"]  span': {
+          backgroundColor: '$brand500',
+          borderColor: '$brand500',
+        },
+      }
+    },
+    size: {
+      sm: {
+        width: '32px',
+        height: '20px',
+        '&::before': {
+          width: '$32',
+          height: '$12',
+        },
+
+        'span': {
+          width: '$20',
+          height: '$20',
+        },
+      },
+      md: {
+        width: '40px',
+        height: '20px',
+        '&::before': {
+          width: '40px',
+          height: '16px',
+        },
+        'span': {
+          width: '24px',
+          height: '24px',
+        },
+      },
+      lg: {
+        width: '56px',
+        height: '32px',
+        '&::before': {
+          width: '56px',
+          height: '24px',
+        },
+        'span': {
+          width: '32px',
+          height: '32px',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    color: 'brand',
+  },
+
+})
+export type SwitchProps = ComponentProps<typeof RadixSwitch> & {
+  color?: 'brand'
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export function Switch(props: SwitchProps) {
+  return <SwitchStyled color="brand" defaultChecked {...props} />
+}

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'
-
-export const Text = styled(TextRadix, {
-  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 TextProps = ComponentProps<typeof Text> & {
-  as?: ElementType
-}
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+import { Text as TextRadix } from '@radix-ui/themes'
+import { CSS } from '@stitches/react'
+import { typographyValues } from '../types/typographyValues'
+
+export const TextStyle = styled(TextRadix, {
+  fontFamily: '$default',
+  lineHeight: '$base',
+  color: '$gray100',
+  variants: {
+    typography: typographyValues,
+    fontWeight: {
+      regular: { fontWeight: '$regular' },
+      medium: { fontWeight: '$medium' },
+      semibold: { fontWeight: '$semibold' },
+      bold: { fontWeight: '$bold' },
+    }
+  }
+})
+
+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

@@ -1,193 +1,241 @@
-import { ComponentProps, useState } from 'react'
-import { styled } from '../styles'
-import { TextField as TextFieldRadix } from "@radix-ui/themes";
-import Icon from './Icon';
-
-export const TextFieldStyled = styled(TextFieldRadix.Root, {
-  height: '$40',
-  fontFamily: '$default',
-  letterSpacing: '0px',
-  fontSize: '$13',
-  padding: '$12 $14',
-  borderRadius: '$sm',
-  boxSizing: 'border-box',
-  color: '$dark500',
-  border: '1px solid $dark300',
-  position: 'relative',
-  display: 'flex',
-  'input': {
-    order: 1,
-    border: 'none',
-    outline: 'none',
-    padding: 0,
-    margin: 0,
-    width: '100%',
-  },
-
-  '&:has(input:focus)': {
-    border: '2px solid $brand300',
-  },
-  '&:has(input:disabled)': {
-    backgroundColor: '$dark100',
-    color: '$dark400',
-    border: '1px solid $dark200',
-    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: {
-}
-    },
-  },
-
-  compoundVariants: [
-    {
-      isValid: false,
-      css: {
-        border: '1px solid $error400',
-        color: '$error400',
-        backgroundColor: '$error50',
-        'input': {
-          '&::placeholder': {
-            color: '$error400',
-          },
-          backgroundColor: '$error50',
-        },
-        '&:has(input:focus)': {
-          border: '2px solid $error400',
-        },
-        '&:has(input:disabled)': {
-          'input': {
-            backgroundColor: '$error50',
-          },
-          backgroundColor: '$error50',
-          color: '$error300',
-          border: '1px solid $error100',
-          cursor: 'not-allowed',
-        },
-      }
-    },
-    {
-      isValid: true,
-      css: {
-        '&:has(input:focus)': {
-          border: '2px solid $success500',
-        },
-        '&:has(input:disabled)': {
-          backgroundColor: '$dark100',
-          color: '$dark400',
-          border: '1px solid $dark200',
-          cursor: 'not-allowed',
-        },
-      }
-    }
-  ],
-})
-
-export const TextFieldSlotStyled = styled(TextFieldRadix.Slot, {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-})
-
-export type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
-  placeholder?: string
-  children?: React.ReactNode
-  isValid?: boolean,
-  name?: string,
-}
-
-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 color={color} isValid={isValid} name={name} {...props}>
-      {children}
-      {isValid && (
-        <TextFieldSlot position='flex-end' name={name} color={color as TextFieldSlotProps['color']}>
-          <Icon name='check' />
-        </TextFieldSlot>
-      )}
-    </TextFieldStyled>
-  )
-}
-
-export function TextFieldSlot({
-  children,
-  position = 'flex-start',
-  onClick,
-  ...props
-}: TextFieldSlotProps) {
-  console.log('onclick', onClick)
-
-  return (
-    <>
-      {
-        !!onClick ?
-          <TextFieldSlotStyled {...{ ...props, color: undefined }} style={{
-            position: 'absolute',
-            left: position === 'flex-end' ? 'none' : 15,
-            right: position === 'flex-start' ? 'none' : 15,
-            padding: 13,
-            zIndex: 2,
-            top: 0,
-            cursor: 'pointer',
-          }} onClick={() => onClick()}>{children}</TextFieldSlotStyled>
-          :
-          <TextFieldSlotStyled {...{ ...props, color: undefined }} style={{
-            float: position === 'flex-start' ? 'left' : 'right',
-            order: position === 'flex-start' ? 0 : 2,
-            marginLeft: position === 'flex-start' ? 0 : 15,
-            marginRight: position === 'flex-end' ? 0 : 15,
-          }}>{children}</TextFieldSlotStyled>
-
-      }
-    </>
-  )
-}
+import { ComponentProps } from 'react'
+import { styled } from '../styles'
+import { TextField as TextFieldRadix } from "@radix-ui/themes";
+import Icon from './Icon';
+import { typographyValues } from '../types/typographyValues';
+
+export const TextFieldStyled = styled(TextFieldRadix.Root, {
+  height: '$40',
+  fontFamily: '$default',
+  padding: '$12 $14',
+  borderRadius: '$sm',
+  boxSizing: 'border-box',
+  color: '$dark500',
+  border: '1px solid $dark300',
+  position: 'relative',
+  display: 'flex',
+
+  'input': {
+    order: 1,
+    border: 'none',
+    outline: 'none',
+    padding: 0,
+    margin: 0,
+    width: '100%',
+    font: 'inherit',
+  },
+
+  '&:has(input:focus)': {
+    border: '2px solid $brand300',
+  },
+  '&:has(input:disabled)': {
+    backgroundColor: '$dark100',
+    color: '$dark400',
+    border: '1px solid $dark200',
+    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',
+        },
+        '&:has(input:focus)': {
+          border: '2px solid $error400',
+        },
+        '&:has(input:disabled)': {
+          backgroundColor: '$error50',
+          color: '$error300',
+          border: '1px solid $error100',
+          cursor: 'not-allowed',
+        },
+      }
+    },
+
+    typography: typographyValues,
+    fontWeight: {
+      regular: { fontWeight: '$regular' },
+      medium: { fontWeight: '$medium' },
+      semibold: { fontWeight: '$semibold' },
+      bold: { fontWeight: '$bold' },
+    },
+    isValid: {
+      true: {},
+      false: {}
+    },
+  },
+
+  compoundVariants: [
+    {
+      isValid: false,
+      css: {
+        border: '1px solid $error400',
+        color: '$error400',
+        backgroundColor: '$error50',
+        'input': {
+          '&::placeholder': {
+            color: '$error400',
+          },
+          backgroundColor: '$error50',
+        },
+        '&:has(input:focus)': {
+          border: '2px solid $error400',
+        },
+        '&:has(input:disabled)': {
+          'input': {
+            backgroundColor: '$error50',
+          },
+          backgroundColor: '$error50',
+          color: '$error300',
+          border: '1px solid $error100',
+          cursor: 'not-allowed',
+        },
+      }
+    },
+    {
+      isValid: true,
+      css: {
+        '&:has(input:focus)': {
+          border: '2px solid $success500',
+        },
+        '&:has(input:disabled)': {
+          backgroundColor: '$dark100',
+          color: '$dark400',
+          border: '1px solid $dark200',
+          cursor: 'not-allowed',
+        },
+      }
+    }
+  ],
+})
+
+export const TextFieldSlotStyled = styled(TextFieldRadix.Slot, {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+
+  variants: {
+    typography: typographyValues,
+    fontWeight: {
+      regular: { fontWeight: '$regular' },
+      medium: { fontWeight: '$medium' },
+      semibold: { fontWeight: '$semibold' },
+      bold: { fontWeight: '$bold' },
+    }
+  }
+})
+
+export type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
+  placeholder?: string
+  children?: React.ReactNode
+  isValid?: boolean
+  name?: string
+  typography?: string
+  fontWeight?: 'regular' | 'medium' | 'semibold' | 'bold'
+}
+
+export type TextFieldSlotProps = Omit<ComponentProps<typeof TextFieldStyled>, 'color'> & {
+  placeholder?: string
+  children?: React.ReactNode
+  position?: 'flex-start' | 'flex-end'
+  onClick?: () => void
+  color?: "error" | "success" | undefined
+  typography?: string
+  fontWeight?: 'regular' | 'medium' | 'semibold' | 'bold'
+}
+
+export function TextField({
+  children,
+  isValid,
+  name,
+  color,
+  typography,
+  fontWeight,
+  ...props
+}: TextFieldProps) {
+  return (
+    <TextFieldStyled
+      color={color}
+      isValid={isValid}
+      name={name}
+      typography={typography}
+      fontWeight={fontWeight}
+      {...props}
+    >
+      {children}
+      {isValid && (
+        <TextFieldSlot
+          position='flex-end'
+          name={name}
+          color={color as TextFieldSlotProps['color']}
+          typography={typography}
+          fontWeight={fontWeight}
+        >
+          <Icon name='check' />
+        </TextFieldSlot>
+      )}
+    </TextFieldStyled>
+  )
+}
+
+export function TextFieldSlot({
+  children,
+  position = 'flex-start',
+  onClick,
+  typography = 'bodyXS',
+  fontWeight = 'regular',
+  ...props
+}: TextFieldSlotProps) {
+  const sharedStyles = {
+    typography,
+    fontWeight,
+    ...props,
+    color: undefined,
+  }
+
+  return !!onClick ? (
+    <TextFieldSlotStyled
+      {...sharedStyles}
+      style={{
+        position: 'absolute',
+        left: position === 'flex-end' ? 'none' : 15,
+        right: position === 'flex-start' ? 'none' : 15,
+        padding: 13,
+        zIndex: 2,
+        top: 0,
+        cursor: 'pointer',
+      }}
+      onClick={() => onClick()}
+    >
+      {children}
+    </TextFieldSlotStyled>
+  ) : (
+    <TextFieldSlotStyled
+      {...sharedStyles}
+      style={{
+        float: position === 'flex-start' ? 'left' : 'right',
+        order: position === 'flex-start' ? 0 : 2,
+        marginLeft: position === 'flex-start' ? 0 : 15,
+        marginRight: position === 'flex-end' ? 0 : 15,
+      }}
+    >
+      {children}
+    </TextFieldSlotStyled>
+  )
+}

package/src/index.tsx

@@ -1,23 +1,27 @@
-export * from './components/Icon'
-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'
-
-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'
-
+// Icon
+export * from './components/Icon'
+
+// Text
+export * from './components/Text'
+
+// Components
+export * from './components/Button'
+export * from './components/ButtonGroup'
+export * from './components/Avatar'
+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'