@lets-events/react 2.0.0 → 4.0.0

package/src/components/TextField.tsx

@@ -0,0 +1,193 @@
+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>
+
+      }
+    </>
+  )
+}

package/src/components/TooltipText.tsx

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

package/src/index.tsx

@@ -1 +1,23 @@
+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'
+

package/src/styles/index.ts

@@ -7,6 +7,7 @@ import {
   radii,
   space,
 } from '@lets-events/tokens'
+
 import { createStitches, defaultThemeMap } from '@stitches/react'
 
 export const {
@@ -23,6 +24,7 @@ export const {
     ...defaultThemeMap,
     height: 'space',
     width: 'space',
+    gap: 'space'
   },
   theme: {
     colors,