@lets-events/react 8.0.0 → 9.0.0

package/src/components/TextField.tsx

@@ -1,299 +1,299 @@
-import { ComponentProps, ReactNode } from 'react'
-import { styled } from '../styles'
-import { TextField as TextFieldRadix } from '@radix-ui/themes'
-import Icon from './Icon'
-import { typographyValues } from '../types/typographyValues'
-import { TextStyle } from './Text'
-import { Flex } from './Flex'
-import { format, MaskOptions, useMask, unformat } from '@react-input/mask'
-
-export const TextFieldStyled = styled(TextFieldRadix.Root, {
-  height: '$40',
-  fontFamily: '$default',
-  borderRadius: '$sm',
-  boxSizing: 'border-box',
-  color: '$dark500',
-  border: '1px solid $dark300',
-  position: 'relative',
-  display: 'flex',
-  width: '100%',
-  alignItems: 'center',
-  padding: '0 $14',
-  gap: '$14',
-  input: {
-    order: 1,
-    outline: 'none',
-    border: 'none',
-    margin: 0,
-    width: '100%',
-    font: 'inherit',
-    textAlign: 'left',
-  },
-
-  '&: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' },
-    },
-    textAlign: {
-      left: { textAlign: 'left' },
-      center: { textAlign: 'center' },
-      right: { textAlign: 'right' },
-    },
-    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',
-  padding: 4,
-
-  variants: {
-    typography: typographyValues,
-    fontWeight: {
-      regular: { fontWeight: '$regular' },
-      medium: { fontWeight: '$medium' },
-      semibold: { fontWeight: '$semibold' },
-      bold: { fontWeight: '$bold' },
-    },
-    textAlign: {
-      left: { textAlign: 'left' },
-      right: { textAlign: 'right' },
-      center: { textAlign: 'center' },
-    },
-  },
-})
-
-export type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
-  addon?: ReactNode
-  placeholder?: string
-  children?: React.ReactNode
-  isValid?: boolean
-  name?: string
-  typography?: string
-  fontWeight?: 'regular' | 'medium' | 'semibold' | 'bold'
-  textAlign?: 'left' | 'right' | 'center'
-  mask?: MaskOptions
-}
-
-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'
-  textAlign?: 'left' | 'right' | 'center'
-}
-
-const InputAddon = styled(TextStyle, {
-  boxSizing: 'border-box',
-  border: '1px solid $dark300',
-  height: '$40',
-  padding: '0  $12',
-  margin: '0 auto',
-
-  color: '$dark600',
-  whiteSpace: 'nowrap',
-  borderRadius: '$sm 0px 0px $sm',
-  borderRightWidth: '0px',
-  display: 'flex',
-  flexWrap: 'nowrap',
-  alignItems: 'center',
-  lineHeight: 1,
-})
-export const maskFormat = format
-export const maskUnformat = unformat
-
-export function TextField({
-  children,
-  isValid,
-  name,
-  color,
-  typography,
-  fontWeight,
-  addon,
-  textAlign = 'left',
-  mask,
-  ...props
-}: TextFieldProps) {
-  const maskRef = mask ? useMask(mask) : undefined
-
-  return (
-    <Flex gap={'0'} css={{ width: '100%' }}>
-      {!!addon && <InputAddon typography="labelSmall">{addon}</InputAddon>}
-
-      <TextFieldStyled
-        color={color}
-        isValid={isValid}
-        name={name}
-        typography={typography}
-        fontWeight={fontWeight}
-        textAlign={textAlign}
-        ref={maskRef}
-        {...props}
-        style={
-          addon
-            ? { borderTopLeftRadius: '0px', borderBottomLeftRadius: '0px' }
-            : undefined
-        }
-      >
-        {children}
-        {isValid && (
-          <TextFieldSlot
-            position="flex-end"
-            name={name}
-            color={color as TextFieldSlotProps['color']}
-            typography={typography}
-            fontWeight={fontWeight}
-            textAlign={textAlign}
-          >
-            <Icon name="check" />
-          </TextFieldSlot>
-        )}
-      </TextFieldStyled>
-    </Flex>
-  )
-}
-
-export function TextFieldSlot({
-  children,
-  position = 'flex-start',
-  onClick,
-  typography = 'bodyXS',
-  fontWeight = 'regular',
-  textAlign = 'right',
-  ...props
-}: TextFieldSlotProps) {
-  const sharedStyles = {
-    typography,
-    fontWeight,
-    textAlign,
-    ...props,
-    color: undefined,
-  }
-
-  return onClick ? (
-    <TextFieldSlotStyled
-      {...sharedStyles}
-      style={{
-        float: position === 'flex-start' ? 'left' : 'right',
-        order: position === 'flex-start' ? 0 : 2,
-        textAlign,
-        zIndex: 2,
-        cursor: 'pointer',
-      }}
-      onClick={() => onClick()}
-    >
-      {children}
-    </TextFieldSlotStyled>
-  ) : (
-    <TextFieldSlotStyled
-      {...sharedStyles}
-      style={{
-        float: position === 'flex-start' ? 'left' : 'right',
-        order: position === 'flex-start' ? 0 : 2,
-        textAlign,
-      }}
-    >
-      {children}
-    </TextFieldSlotStyled>
-  )
-}
+import { ComponentProps, ReactNode } from 'react'
+import { styled } from '../styles'
+import { TextField as TextFieldRadix } from '@radix-ui/themes'
+import Icon from './Icon'
+import { typographyValues } from '../types/typographyValues'
+import { TextStyle } from './Text'
+import { Flex } from './Flex'
+import { format, MaskOptions, useMask, unformat } from '@react-input/mask'
+
+export const TextFieldStyled = styled(TextFieldRadix.Root, {
+  height: '$40',
+  fontFamily: '$default',
+  borderRadius: '$sm',
+  boxSizing: 'border-box',
+  color: '$dark500',
+  border: '1px solid $dark300',
+  position: 'relative',
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  padding: '0 $14',
+  gap: '$14',
+  input: {
+    order: 1,
+    outline: 'none',
+    border: 'none',
+    margin: 0,
+    width: '100%',
+    font: 'inherit',
+    textAlign: 'left',
+  },
+
+  '&: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' },
+    },
+    textAlign: {
+      left: { textAlign: 'left' },
+      center: { textAlign: 'center' },
+      right: { textAlign: 'right' },
+    },
+    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',
+  padding: 4,
+
+  variants: {
+    typography: typographyValues,
+    fontWeight: {
+      regular: { fontWeight: '$regular' },
+      medium: { fontWeight: '$medium' },
+      semibold: { fontWeight: '$semibold' },
+      bold: { fontWeight: '$bold' },
+    },
+    textAlign: {
+      left: { textAlign: 'left' },
+      right: { textAlign: 'right' },
+      center: { textAlign: 'center' },
+    },
+  },
+})
+
+export type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
+  addon?: ReactNode
+  placeholder?: string
+  children?: React.ReactNode
+  isValid?: boolean
+  name?: string
+  typography?: string
+  fontWeight?: 'regular' | 'medium' | 'semibold' | 'bold'
+  textAlign?: 'left' | 'right' | 'center'
+  mask?: MaskOptions
+}
+
+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'
+  textAlign?: 'left' | 'right' | 'center'
+}
+
+const InputAddon = styled(TextStyle, {
+  boxSizing: 'border-box',
+  border: '1px solid $dark300',
+  height: '$40',
+  padding: '0  $12',
+  margin: '0 auto',
+
+  color: '$dark600',
+  whiteSpace: 'nowrap',
+  borderRadius: '$sm 0px 0px $sm',
+  borderRightWidth: '0px',
+  display: 'flex',
+  flexWrap: 'nowrap',
+  alignItems: 'center',
+  lineHeight: 1,
+})
+export const maskFormat = format
+export const maskUnformat = unformat
+
+export function TextField({
+  children,
+  isValid,
+  name,
+  color,
+  typography,
+  fontWeight,
+  addon,
+  textAlign = 'left',
+  mask,
+  ...props
+}: TextFieldProps) {
+  const maskRef = mask ? useMask(mask) : undefined
+
+  return (
+    <Flex gap={'0'} css={{ width: '100%' }}>
+      {!!addon && <InputAddon typography="labelSmall">{addon}</InputAddon>}
+
+      <TextFieldStyled
+        color={color}
+        isValid={isValid}
+        name={name}
+        typography={typography}
+        fontWeight={fontWeight}
+        textAlign={textAlign}
+        ref={maskRef}
+        {...props}
+        style={
+          addon
+            ? { borderTopLeftRadius: '0px', borderBottomLeftRadius: '0px' }
+            : undefined
+        }
+      >
+        {children}
+        {isValid && (
+          <TextFieldSlot
+            position="flex-end"
+            name={name}
+            color={color as TextFieldSlotProps['color']}
+            typography={typography}
+            fontWeight={fontWeight}
+            textAlign={textAlign}
+          >
+            <Icon name="check" />
+          </TextFieldSlot>
+        )}
+      </TextFieldStyled>
+    </Flex>
+  )
+}
+
+export function TextFieldSlot({
+  children,
+  position = 'flex-start',
+  onClick,
+  typography = 'bodyXS',
+  fontWeight = 'regular',
+  textAlign = 'right',
+  ...props
+}: TextFieldSlotProps) {
+  const sharedStyles = {
+    typography,
+    fontWeight,
+    textAlign,
+    ...props,
+    color: undefined,
+  }
+
+  return onClick ? (
+    <TextFieldSlotStyled
+      {...sharedStyles}
+      style={{
+        float: position === 'flex-start' ? 'left' : 'right',
+        order: position === 'flex-start' ? 0 : 2,
+        textAlign,
+        zIndex: 2,
+        cursor: 'pointer',
+      }}
+      onClick={() => onClick()}
+    >
+      {children}
+    </TextFieldSlotStyled>
+  ) : (
+    <TextFieldSlotStyled
+      {...sharedStyles}
+      style={{
+        float: position === 'flex-start' ? 'left' : 'right',
+        order: position === 'flex-start' ? 0 : 2,
+        textAlign,
+      }}
+    >
+      {children}
+    </TextFieldSlotStyled>
+  )
+}