@liguelead/design-system 0.0.8 → 0.0.10

package/components/TextField/TextField.sizes.ts

@@ -1,58 +1,58 @@
-import { fontSize, lineHeight, spacing } from '@liguelead/foundation'
-
-export type TextFieldSize = 'sm' | 'md' | 'lg'
-
-export type TextFieldSizeType = {
-  input: string
-  label: string
-}
-
-export const textFieldSizes = (size: TextFieldSize, leftIcon: boolean, rightIcon: boolean) => {
-  const withIconMargin = Number(spacing.spacing8) + 20
-  const withIconPadding = {
-    sm: Number(spacing.spacing12) + Number(withIconMargin),
-    md: Number(spacing.spacing16) + Number(withIconMargin),
-    lg: Number(spacing.spacing16) + Number(withIconMargin)
-  }
-
-  const sizes = {
-    sm: {
-      input: `
-        font-size: ${fontSize.fontSize14}px;    
-        line-height: ${lineHeight.lineHeight22}px;    
-        padding: ${spacing.spacing8}px ${spacing.spacing12}px;
-        padding-left: ${leftIcon ? withIconPadding.sm : spacing.spacing12}px;
-        padding-right: ${rightIcon ? withIconPadding.sm : spacing.spacing12}px;
-      `,
-      label: `font-size: ${fontSize.fontSize14}px;
-              margin-left: ${leftIcon ? withIconMargin : 0}px;
-              margin-right: ${rightIcon ? withIconMargin : 0}px;`
-    },
-    md: {
-      input: `
-      font-size: ${fontSize.fontSize14}px;
-      line-height: ${lineHeight.lineHeight20}px;
-      padding: ${spacing.spacing12}px ${spacing.spacing16}px;
-      padding-left: ${leftIcon ? withIconPadding.md : spacing.spacing16}px;
-      padding-right: ${rightIcon ? withIconPadding.md : spacing.spacing16}px;
-    `,
-      label: `font-size: ${fontSize.fontSize14}px;
-            margin-left: ${leftIcon ? withIconMargin : 0}px;
-            margin-right: ${rightIcon ? withIconMargin : 0}px;`
-    },
-    lg: {
-      input: `
-      font-size: ${fontSize.fontSize16}px;
-      line-height: ${lineHeight.lineHeight24}px;
-      padding: ${spacing.spacing12}px ${spacing.spacing16}px;
-      padding-left: ${leftIcon ? withIconPadding.lg : spacing.spacing16}px;
-      padding-right: ${rightIcon ? withIconPadding.lg : spacing.spacing16}px;
-    `,
-      label: `font-size: ${fontSize.fontSize16}px;
-            margin-left: ${leftIcon ? withIconMargin : 0}px;
-            margin-right: ${rightIcon ? withIconMargin : 0}px;`
-    }
-  }
-
-  return sizes[size]
-}
+import { fontSize, lineHeight, spacing } from '@liguelead/foundation'
+
+export type TextFieldSize = 'sm' | 'md' | 'lg'
+
+export type TextFieldSizeType = {
+  input: string
+  label: string
+}
+
+export const textFieldSizes = (size: TextFieldSize, leftIcon: boolean, rightIcon: boolean) => {
+  const withIconMargin = Number(spacing.spacing8) + 20
+  const withIconPadding = {
+    sm: Number(spacing.spacing12) + Number(withIconMargin),
+    md: Number(spacing.spacing16) + Number(withIconMargin),
+    lg: Number(spacing.spacing16) + Number(withIconMargin)
+  }
+
+  const sizes = {
+    sm: {
+      input: `
+        font-size: ${fontSize.fontSize14}px;    
+        line-height: ${lineHeight.lineHeight22}px;    
+        padding: ${spacing.spacing8}px ${spacing.spacing12}px;
+        padding-left: ${leftIcon ? withIconPadding.sm : spacing.spacing12}px;
+        padding-right: ${rightIcon ? withIconPadding.sm : spacing.spacing12}px;
+      `,
+      label: `font-size: ${fontSize.fontSize14}px;
+              margin-left: ${leftIcon ? withIconMargin : 0}px;
+              margin-right: ${rightIcon ? withIconMargin : 0}px;`
+    },
+    md: {
+      input: `
+      font-size: ${fontSize.fontSize14}px;
+      line-height: ${lineHeight.lineHeight20}px;
+      padding: ${spacing.spacing12}px ${spacing.spacing16}px;
+      padding-left: ${leftIcon ? withIconPadding.md : spacing.spacing16}px;
+      padding-right: ${rightIcon ? withIconPadding.md : spacing.spacing16}px;
+    `,
+      label: `font-size: ${fontSize.fontSize14}px;
+            margin-left: ${leftIcon ? withIconMargin : 0}px;
+            margin-right: ${rightIcon ? withIconMargin : 0}px;`
+    },
+    lg: {
+      input: `
+      font-size: ${fontSize.fontSize16}px;
+      line-height: ${lineHeight.lineHeight24}px;
+      padding: ${spacing.spacing12}px ${spacing.spacing16}px;
+      padding-left: ${leftIcon ? withIconPadding.lg : spacing.spacing16}px;
+      padding-right: ${rightIcon ? withIconPadding.lg : spacing.spacing16}px;
+    `,
+      label: `font-size: ${fontSize.fontSize16}px;
+            margin-left: ${leftIcon ? withIconMargin : 0}px;
+            margin-right: ${rightIcon ? withIconMargin : 0}px;`
+    }
+  }
+
+  return sizes[size]
+}

package/components/TextField/TextField.states.tsx

@@ -1,76 +1,53 @@
-import {parseColor} from '../../utils'
-import {useTheme} from 'styled-components'
-import {fontWeight, fontSize} from '@liguelead/foundation'
-
-export interface StateInterface {
-    input: string
-    label: string
-    helperText: string
-    animation?: string
-}
-
-interface TextFieldStates {
-    error: StateInterface
-    default: StateInterface
-    disabled: StateInterface
-}
-
-export const TextFieldStates = (state: keyof TextFieldStates) => {
-    const theme = useTheme()
-    const states: TextFieldStates = {
-        error: {
-            input: `
-                border: 1px solid ${parseColor(theme.colors.danger100)};
-                color: ${parseColor(theme.colors.neutral1000)};
-                &:focus {
-                    border-color: ${parseColor(theme.colors.danger100)};
-                }
-                &:focus + label {
-                    color: ${parseColor(theme.colors.danger100)};
-                }
-            `,
-            label: `color: ${parseColor(theme.colors.danger100)};`,
-            helperText: `color: ${parseColor(theme.colors.danger100)};`,
-            animation: `
-                &:focus + label,
-                &:not(:placeholder-shown) + label {
-                    top: 0px;
-                    left: 12px;
-                    font-size: ${fontSize.fontSize12}px;
-                }`
-        },
-        default: {
-            input: `
-                border: 1px solid ${parseColor(theme.colors.neutral700)};
-                color: ${parseColor(theme.colors.neutral1000)};
-                &:focus {
-                    border-color: ${parseColor(theme.colors.primary)};
-                }
-                &:focus + label {
-                    color: ${parseColor(theme.colors.primary)};
-                    font-weight: ${fontWeight.fontWeight600};
-                }
-            `,
-            label: `color: ${parseColor(theme.colors.neutral800)};`,
-            helperText: `color: ${parseColor(theme.colors.neutral700)};`,
-            animation: `
-                &:focus + label,
-                &:not(:placeholder-shown) + label {
-                    top: 0px;
-                    left: 12px;
-                    font-size: ${fontSize.fontSize12}px;
-                }`
-        },
-        disabled: {
-            input: `
-                border: 1px solid ${parseColor(theme.colors.neutral500)};
-                color: ${parseColor(theme.colors.neutral600)};
-            `,
-            label: `color: ${parseColor(theme.colors.neutral500)};
-                    background: transparent;`,
-            helperText: `color: ${parseColor(theme.colors.neutral500)};`,
-            animation: ``
-        }
-    }
-    return states[state]
-}
+import {parseColor} from '../../utils'
+import {useTheme} from 'styled-components'
+
+export interface StateInterface {
+    input: string
+    label?: string
+    helperText: string
+}
+
+interface TextFieldStates {
+    error: StateInterface
+    default: StateInterface
+    disabled: StateInterface
+}
+
+export const TextFieldStates = (state: keyof TextFieldStates) => {
+    const theme = useTheme()
+    const states: TextFieldStates = {
+        error: {
+            input: `
+                border: 1px solid ${parseColor(theme.colors.danger200)};
+                color: ${parseColor(theme.colors.neutral1000)};
+                &:focus {
+                    border-color: ${parseColor(theme.colors.danger200)};
+                    box-shadow: 0 0 0 3px #DC262633;
+                }
+            `,
+            label: `color: ${parseColor(theme.colors.danger100)};`,
+            helperText: `color: ${parseColor(theme.colors.danger100)};`,
+        },
+        default: {
+            input: `
+                border: 1px solid #CFCFD1;
+                color: ${parseColor(theme.colors.neutral1000)};
+                &:focus {
+                    border-color: ${parseColor(theme.colors.neutral700)};
+                    box-shadow: 0 0 0 3px #A3A3A380;
+                }
+            `,
+            label: `color: ${parseColor(theme.colors.neutral1100)};`,
+            helperText: `color: ${parseColor(theme.colors.neutral800)};`,
+        },
+        disabled: {
+            input: `
+                color: ${parseColor(theme.colors.neutral1100)};
+                box-shadow: 0 1px 2px 0 #0000000D;
+                opacity: 0.5;
+            `,
+            helperText: `color: ${parseColor(theme.colors.neutral500)};`,
+        }
+    }
+    return states[state]
+}

package/components/TextField/TextField.styles.ts

@@ -1,98 +1,81 @@
-import styled from 'styled-components'
-import {TextFieldSizeType} from './TextField.sizes'
-import {fontSize, fontWeight, lineHeight, spacing} from '@liguelead/foundation'
-import {StateInterface} from './TextField.states'
-import {parseColor} from '../../utils'
-
-interface StyledInputProps {
-    size: TextFieldSizeType
-    $themefication: StateInterface
-}
-
-export const InputWrapper = styled.div`
-    position: relative;
-    width: 100%;
-`
-
-export const FloatingLabel = styled.label`
-    position: absolute;
-    top: 50%;
-    left: 12px;
-    transform: translateY(-50%);
-    font-weight: ${fontWeight.fontWeight600};
-    transition: all 0.2s ease;
-    pointer-events: none;
-    background-color: white;
-    padding: 0 4px;
-`
-
-export const HelperText = styled.span<{error?: boolean}>`
-    font-size: ${fontSize.fontSize12}px;
-    line-height: ${lineHeight.lineHeight12}px;
-    padding-left: ${spacing.spacing16}px;
-`
-
-export const IconWrapper = styled.div<{$right?: boolean}>`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: absolute;
-    top: 0px;
-    height: 100%;
-    cursor: pointer;
-    ${({$right}) => ($right ? 'right: 0px;' : 'left: 0px;')}
-    padding: 0px ${spacing.spacing16}px;
-
-    & svg {
-        width: 20px;
-        height: 20px;
-        fill: ${({theme}) => parseColor(theme.colors.neutral700)};
-        transition: fill 0.2s ease;
-    }
-`
-
-export const StyledInput = styled.input.withConfig({
-    shouldForwardProp: prop => !['control', 'errors', 'rules'].includes(prop)
-})`
-    width: 100%;
-    border-radius: 4px;
-    outline: none;
-    transition: border-color 0.2s ease;
-    background: transparent;
-`
-
-export const BorderWrapper = styled.div`
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    pointer-events: none;
-    border: 2px solid #ccc;
-    border-radius: 4px;
-    background-color: transparent;
-    z-index: -1;
-
-    ${StyledInput}:focus ~ & {
-        border-color: ${({theme}) => theme.colors.primary};
-    }
-`
-
-export const Wrapper = styled.div<StyledInputProps>`
-    position: relative;
-    width: 100%;
-    ${({$themefication, size}) => `
-    ${StyledInput} {
-      ${$themefication.animation}
-      ${$themefication.input}
-      ${size.input}
-    }
-    ${FloatingLabel} {
-      ${$themefication.label}
-      ${size.label}
-    }
-    ${HelperText} {
-      ${$themefication.label} 
-    }
-  `}
-`
+import styled from 'styled-components'
+import { TextFieldSizeType } from './TextField.sizes'
+import {
+    fontSize,
+    fontWeight,
+    lineHeight,
+    spacing
+} from '@liguelead/foundation'
+import { StateInterface } from './TextField.states'
+import { parseColor } from '../../utils'
+
+interface StyledInputProps {
+    size: TextFieldSizeType
+    $themefication: StateInterface
+}
+
+export const InputWrapper = styled.div`
+    position: relative;
+    width: 100%;
+`
+
+export const Label = styled.label`
+    display: block;
+    font-weight: ${fontWeight.fontWeight600};
+    margin-bottom: ${spacing.spacing4}px;
+    font-size: ${fontSize.fontSize14}px;
+`
+
+export const HelperText = styled.span<{ error?: boolean }>`
+    font-size: ${fontSize.fontSize12}px;
+    line-height: ${lineHeight.lineHeight16}px;
+`
+
+export const IconWrapper = styled.div<{ $right?: boolean }>`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: absolute;
+    top: 0px;
+    height: 100%;
+    cursor: pointer;
+    ${({ $right }) => ($right ? 'right: 0px;' : 'left: 0px;')}
+    padding: 0px ${spacing.spacing16}px;
+
+    & svg {
+        width: 20px;
+        height: 20px;
+        fill: ${({ theme }) => parseColor(theme.colors.neutral700)};
+        transition: fill 0.2s ease;
+    }
+`
+
+export const StyledInput = styled.input.withConfig({
+    shouldForwardProp: prop => !['control', 'errors', 'rules'].includes(prop)
+})`
+    width: 100%;
+    border-radius: 4px;
+    outline: none;
+    border: 1px solid #CFCFD1;
+    transition: border-color 0.2s ease;
+    background: transparent;
+`
+
+
+export const Wrapper = styled.div<StyledInputProps>`
+    position: relative;
+    width: 100%;
+    ${({ $themefication, size }) => `
+        ${StyledInput} {
+            ${$themefication.input}
+            ${size.input}
+        }
+        ${Label} {
+            ${$themefication.label}
+            ${size.label}
+        }
+        ${HelperText} {
+            ${$themefication.label} 
+        }
+    `}
+`

package/components/TextField/TextField.tsx

@@ -1,108 +1,105 @@
-import React, { forwardRef, useState } from 'react'
-import { TextFieldProps } from './TextField.types'
-import { StateInterface, TextFieldStates } from './TextField.states'
-import {
-    FloatingLabel,
-    HelperText,
-    IconWrapper,
-    InputWrapper,
-    StyledInput,
-    Wrapper
-} from './TextField.styles'
-import { textFieldSizes } from './TextField.sizes'
-import { Eye, EyeClosed } from '@phosphor-icons/react'
-
-export const getState = (disabled: boolean, error: boolean) => {
-    if (disabled) return 'disabled'
-    if (error) return 'error'
-    return 'default'
-}
-
-const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
-    (
-        {
-            className,
-            disabled = false,
-            error,
-            handleLeftIcon,
-            handleRightIcon,
-            helperText,
-            label,
-            leftIcon,
-            onChange,
-            rightIcon,
-            size = 'md',
-            type = 'text',
-            value,
-            register,
-            ...props
-        },
-        ref // A ref passada pelo componente pai
-    ) => {
-        const [passwordVisible, setPasswordVisible] = useState(
-            type !== 'password'
-        )
-        const state = getState(disabled, !!error)
-        const textFieldState: StateInterface = TextFieldStates(state)
-        const textFieldSize = textFieldSizes(size, !!leftIcon, !!rightIcon)
-
-        const togglePasswordVisibility = () => {
-            setPasswordVisible(!passwordVisible)
-        }
-
-        const transformRightIcon = (
-            type: string,
-            rightIcon: React.ReactNode
-        ) => {
-            if (type === 'password') {
-                return (
-                    <IconWrapper onClick={togglePasswordVisibility} $right>
-                        {passwordVisible ? <Eye /> : <EyeClosed />}
-                    </IconWrapper>
-                )
-            }
-            return (
-                <IconWrapper onClick={handleRightIcon} $right>
-                    {rightIcon}
-                </IconWrapper>
-            )
-        }
-
-        return (
-            <Wrapper
-                className={className}
-                size={textFieldSize}
-                $themefication={textFieldState}>
-                <InputWrapper>
-                    {leftIcon && (
-                        <IconWrapper onClick={handleLeftIcon}>
-                            {leftIcon}
-                        </IconWrapper>
-                    )}
-                    {transformRightIcon(type, rightIcon)}
-                    <StyledInput
-                        ref={ref}
-                        type={passwordVisible ? 'text' : 'password'}
-                        value={value}
-                        placeholder=" "
-                        disabled={disabled}
-                        {...props}
-                        {...register}
-                        onChange={e => {
-                            register?.onChange(e)
-                            onChange?.(e)
-                        }}
-                    />
-                    <FloatingLabel>{label}</FloatingLabel>
-                </InputWrapper>
-                {(helperText || error) && (
-                    <HelperText>{error?.message || helperText}</HelperText>
-                )}
-            </Wrapper>
-        )
-    }
-)
-
-TextField.displayName = 'TextField'
-
-export default TextField
+import React, { forwardRef, useState } from 'react'
+import { TextFieldProps } from './TextField.types'
+import { StateInterface, TextFieldStates } from './TextField.states'
+import {
+    Label,
+    HelperText,
+    IconWrapper,
+    InputWrapper,
+    StyledInput,
+    Wrapper
+} from './TextField.styles'
+import { textFieldSizes } from './TextField.sizes'
+import { Eye, EyeClosed } from '@phosphor-icons/react'
+import  getState  from './utils/getState'
+
+const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+    (
+        {
+            className,
+            disabled = false,
+            error,
+            handleLeftIcon,
+            handleRightIcon,
+            helperText,
+            label,
+            leftIcon,
+            onChange,
+            rightIcon,
+            size = 'md',
+            type = 'text',
+            value,
+            register,
+            placeholder,
+            ...props
+        },
+        ref
+    ) => {
+        const [passwordVisible, setPasswordVisible] = useState(
+            type !== 'password'
+        )
+        const state = getState(disabled, !!error)
+        const textFieldState: StateInterface = TextFieldStates(state)
+        const textFieldSize = textFieldSizes(size, !!leftIcon, !!rightIcon)
+
+        const togglePasswordVisibility = () => {
+            setPasswordVisible(!passwordVisible)
+        }
+
+        const transformRightIcon = (
+            type: string,
+            rightIcon: React.ReactNode
+        ) => {
+            if (type === 'password') {
+                return (
+                    <IconWrapper onClick={togglePasswordVisibility} $right>
+                        {passwordVisible ? <Eye /> : <EyeClosed />}
+                    </IconWrapper>
+                )
+            }
+            return (
+                <IconWrapper onClick={handleRightIcon} $right>
+                    {rightIcon}
+                </IconWrapper>
+            )
+        }
+
+        return (
+            <Wrapper
+                className={className}
+                size={textFieldSize}
+                $themefication={textFieldState}
+            >
+                <Label>{label}</Label>
+                <InputWrapper>
+                    {leftIcon && (
+                        <IconWrapper onClick={handleLeftIcon}>
+                            {leftIcon}
+                        </IconWrapper>
+                    )}
+                    {transformRightIcon(type, rightIcon)}
+                    <StyledInput
+                        ref={ref}
+                        type={passwordVisible ? 'text' : 'password'}
+                        value={value}
+                        disabled={disabled}
+                        placeholder={placeholder}
+                        {...props}
+                        {...register}
+                        onChange={e => {
+                            register?.onChange(e)
+                            onChange?.(e)
+                        }}
+                    />
+                </InputWrapper>
+                {(helperText || error) && (
+                    <HelperText>{error?.message || helperText}</HelperText>
+                )}
+            </Wrapper>
+        )
+    }
+)
+
+TextField.displayName = 'TextField'
+
+export default TextField