@liguelead/design-system 0.0.25 → 0.0.26

package/components/Button/Button.sizes.ts

@@ -15,7 +15,7 @@ export const ButtonSizes = (size: ButtonSizeTypes) => {
       font-weight: ${fontWeight.fontWeight500};
       line-height: ${lineHeight.lineHeight22}px;
       gap: ${spacing.spacing8}px;
-      min-width: ${spacing.spacing64}px;
+      height: ${spacing.spacing32}px;
       border-radius: ${radius.radius4}px;
       `,
     md: `
@@ -24,7 +24,7 @@ export const ButtonSizes = (size: ButtonSizeTypes) => {
       font-weight: ${fontWeight.fontWeight500};
       line-height: ${lineHeight.lineHeight22}px;
       gap: ${spacing.spacing8}px;
-      min-width: ${spacing.spacing76}px;
+      height: ${spacing.spacing36}px;
       border-radius: ${radius.radius4}px;
     `,
     lg: `
@@ -33,7 +33,7 @@ export const ButtonSizes = (size: ButtonSizeTypes) => {
       font-weight: ${fontWeight.fontWeight500};
       line-height: ${lineHeight.lineHeight24}px;
       gap: ${spacing.spacing8}px;
-      min-width: ${spacing.spacing108}px;
+      height: ${spacing.spacing40}px;
       border-radius: ${radius.radius4}px;
     `
   }

package/components/Button/Button.styles.ts

@@ -5,7 +5,7 @@ import { shadow } from '@liguelead/foundation'
 export interface StyledButtonProps extends ButtonProps {
     $variant: string
     $buttonSize: string
-    $fluid: boolean
+    $fullWidth: boolean
 }
 
 export const StyledButton = styled.button<StyledButtonProps>`
@@ -14,7 +14,7 @@ export const StyledButton = styled.button<StyledButtonProps>`
     outline: none !important;
     justify-content: center;
     align-items: center;
-    width: ${({ $fluid }) => ($fluid ? '100%' : 'auto')};
+    width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
     ${({ $buttonSize }) => $buttonSize}
     overflow: hidden;
     cursor: pointer;

package/components/Button/Button.tsx

@@ -10,7 +10,7 @@ const Button: React.FC<ButtonProps> = ({
     className,
     color = 'primary',
     disabled,
-    fluid = false,
+    fullWidth = false,
     size = 'md',
     onClick,
     type = 'button',
@@ -47,7 +47,7 @@ const Button: React.FC<ButtonProps> = ({
         <StyledButton
             disabled={disabled}
             className={className}
-            $fluid={fluid}
+            $fullWidth={fullWidth}
             $variant={buttonVariant}
             onClick={handleClick}
             $buttonSize={buttonSize}

package/components/Button/Button.types.ts

@@ -8,7 +8,7 @@ export interface ButtonProps {
     children: React.ReactNode
     className?: string
     disabled?: boolean
-    fluid?: boolean
+    fullWidth?: boolean
     size?: ButtonSizeTypes
     color?: colorType
     onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void

package/components/IconButton/IconButton.tsx

@@ -10,7 +10,7 @@ const IconButton: React.FC<ButtonProps> = ({
     className,
     color = 'primary',
     disabled,
-    fluid = false,
+    fullWidth = false,
     size = 'md',
     onClick,
     ...rest
@@ -42,7 +42,7 @@ const IconButton: React.FC<ButtonProps> = ({
         <StyledButton
             disabled={disabled}
             className={className}
-            $fluid={fluid}
+            $fullWidth={fullWidth}
             $variant={buttonVariant}
             onClick={handleClick}
             $buttonSize={buttonSize}

package/components/LinkButton/LinkButton.style.ts

@@ -32,7 +32,7 @@ export const StyledLinkButton = styled.button<StyledButtonProps>`
     display: flex;
     outline: none !important;
 
-    width: ${({ $fluid }) => ($fluid ? '100%' : 'auto')};
+    width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
     ${({ $buttonSize }) => $buttonSize}
     overflow: hidden;
     cursor: pointer;

package/components/LinkButton/LinkButton.tsx

@@ -12,7 +12,7 @@ const LinkButton: React.FC<LinkButtonProps> = ({
   disabled = false,
   color = 'primary',
   variant = 'ghost',
-  fluid = false,
+  fullWidth = false,
   leftIcon,
   rightIcon,
   onClick,
@@ -47,7 +47,7 @@ const LinkButton: React.FC<LinkButtonProps> = ({
       onClick={handleClick}
       $variant={buttonVariant}
       $buttonSize={buttonSize}
-      $fluid={fluid}
+      $fullWidth={fullWidth}
       aria-disabled={disabled}
       rel={rest.target === '_blank' ? 'noopener noreferrer' : rest.rel}
       {...rest}

package/components/LinkButton/LinkButton.types.ts

@@ -6,7 +6,7 @@ export interface LinkButtonProps extends React.AnchorHTMLAttributes<HTMLAnchorEl
   disabled?: boolean
   color?: colorType
   variant?: 'ghost'
-  fluid?: boolean
+  fullWidth?: boolean
   leftIcon?: React.ReactNode
   rightIcon?: React.ReactNode
   size?: 'sm' | 'md' | 'lg'

package/components/Select/Select.sizes.ts

@@ -18,6 +18,7 @@ export const textFieldSizes = (
             input: `
         font-size: ${fontSize.fontSize14}px;
         line-height: ${lineHeight.lineHeight22}px;
+        height: ${spacing.spacing32}px;
         padding: ${spacing.spacing8}px ${spacing.spacing12}px;
         padding-left: ${leftIcon ? withIconPadding.sm : spacing.spacing12}px;
         padding-right: ${rightIcon ? withIconPadding.sm : spacing.spacing12}px;
@@ -32,6 +33,7 @@ export const textFieldSizes = (
       font-size: ${fontSize.fontSize14}px;
       line-height: ${lineHeight.lineHeight20}px;
       padding: ${spacing.spacing12}px ${spacing.spacing16}px;
+      height: ${spacing.spacing36}px;
       padding-left: ${leftIcon ? withIconPadding.md : spacing.spacing16}px;
       padding-right: ${rightIcon ? withIconPadding.md : spacing.spacing16}px;
     `,
@@ -43,6 +45,7 @@ export const textFieldSizes = (
       font-size: ${fontSize.fontSize16}px;
       line-height: ${lineHeight.lineHeight24}px;
       padding: ${spacing.spacing12}px ${spacing.spacing16}px;
+      height: ${spacing.spacing40}px;
       padding-left: ${leftIcon ? withIconPadding.lg : spacing.spacing16}px;
       padding-right: ${rightIcon ? withIconPadding.lg : spacing.spacing16}px;
     `,

package/components/TextField/TextField.sizes.ts

@@ -18,8 +18,9 @@ export const textFieldSizes = (size: TextFieldSize, leftIcon: boolean, rightIcon
   const sizes = {
     sm: {
       input: `
-        font-size: ${fontSize.fontSize14}px;    
-        line-height: ${lineHeight.lineHeight22}px;    
+        font-size: ${fontSize.fontSize14}px;
+        line-height: ${lineHeight.lineHeight22}px;
+        height: ${spacing.spacing32}px;
         padding: ${spacing.spacing8}px ${spacing.spacing12}px;
         padding-left: ${leftIcon ? withIconPadding.sm : spacing.spacing12}px;
         padding-right: ${rightIcon ? withIconPadding.sm : spacing.spacing12}px;
@@ -31,6 +32,7 @@ export const textFieldSizes = (size: TextFieldSize, leftIcon: boolean, rightIcon
       font-size: ${fontSize.fontSize14}px;
       line-height: ${lineHeight.lineHeight20}px;
       padding: ${spacing.spacing12}px ${spacing.spacing16}px;
+      height: ${spacing.spacing36}px;
       padding-left: ${leftIcon ? withIconPadding.md : spacing.spacing16}px;
       padding-right: ${rightIcon ? withIconPadding.md : spacing.spacing16}px;
     `,
@@ -41,6 +43,7 @@ export const textFieldSizes = (size: TextFieldSize, leftIcon: boolean, rightIcon
       font-size: ${fontSize.fontSize16}px;
       line-height: ${lineHeight.lineHeight24}px;
       padding: ${spacing.spacing12}px ${spacing.spacing16}px;
+      height: ${spacing.spacing40}px;
       padding-left: ${leftIcon ? withIconPadding.lg : spacing.spacing16}px;
       padding-right: ${rightIcon ? withIconPadding.lg : spacing.spacing16}px;
     `,

package/components/TextField/TextField.states.tsx

@@ -5,6 +5,8 @@ export interface StateInterface {
     input: string
     label?: string
     helperText: string
+    fileButton?: string
+    fileName?: string
 }
 
 interface TextFieldStates {
@@ -27,6 +29,21 @@ export const TextFieldStates = (state: keyof TextFieldStates) => {
             `,
             label: `color: ${parseColor(theme.colors.textDark)};`,
             helperText: `color: ${parseColor(theme.colors.danger200)};`,
+            fileButton: `
+                border: 1px solid ${parseColor(theme.colors.danger200)};
+                background: transparent;
+                border-right: none;
+                color: ${parseColor(theme.colors.primary)};
+                &:hover {
+                    background: transparent;
+                }
+            `,
+            fileName: `
+                border: 1px solid ${parseColor(theme.colors.danger200)};
+                color: ${parseColor(theme.colors.textDark)};
+                background: ${parseColor(theme.colors.white)};
+                border-left: none;
+            `,
         },
         default: {
             input: `
@@ -39,6 +56,18 @@ export const TextFieldStates = (state: keyof TextFieldStates) => {
             `,
             label: `color: ${parseColor(theme.colors.textDark)};`,
             helperText: `color: ${parseColor(theme.colors.textMedium)};`,
+            fileButton: `
+                border: 1px solid ${parseColor(theme.colors.neutral400)};
+                background: transparent;
+                border-right: none;
+                color: ${parseColor(theme.colors.primary)};
+            `,
+            fileName: `
+                border: 1px solid ${parseColor(theme.colors.neutral400)};
+                color: ${parseColor(theme.colors.textDark)};
+                background: ${parseColor(theme.colors.white)};
+                border-left: none;
+            `,
         },
         disabled: {
             input: `
@@ -48,6 +77,21 @@ export const TextFieldStates = (state: keyof TextFieldStates) => {
             `,
             label: `color: ${parseColor(theme.colors.textDark)};`,
             helperText: `color: ${parseColor(theme.colors.neutral500)};`,
+            fileButton: `
+                border: 1px solid ${parseColor(theme.colors.neutral300)};
+                background: transparent;
+                border-right: none;
+                color: ${parseColor(theme.colors.primary)};
+                cursor: not-allowed;
+                opacity: 0.5;
+            `,
+            fileName: `
+                border: 1px solid ${parseColor(theme.colors.neutral300)};
+                background: ${parseColor(theme.colors.neutral50)};
+                color: ${parseColor(theme.colors.neutral500)};
+                opacity: 0.5;
+                border-left: none;
+            `,
         }
     }
     return states[state]

package/components/TextField/TextField.styles.ts

@@ -4,6 +4,7 @@ import {
     fontSize,
     fontWeight,
     lineHeight,
+    shadow,
     spacing
 } from '@liguelead/foundation'
 import { StateInterface } from './TextField.states'
@@ -14,9 +15,13 @@ interface StyledInputProps {
     $themefication: StateInterface
 }
 
-export const InputWrapper = styled.div`
+export const InputWrapper = styled.div<{ $isDragging?: boolean }>`
     position: relative;
     width: 100%;
+
+    box-shadow: ${({ $isDragging }) => ($isDragging ? shadow.focusShadow : 'none')};
+    border-radius: 4px;
+    background: transparent;
 `
 
 export const Label = styled.label`
@@ -55,15 +60,14 @@ export const StyledInput = styled.input.withConfig({
     width: 100%;
     border-radius: 4px;
     outline: none;
-    border: 1px solid #CFCFD1;
+    border: 1px solid ${parseColor('neutral400')};
     transition: border-color 0.2s ease;
     background: transparent;
 `
 
-
 export const Wrapper = styled.div<StyledInputProps>`
     position: relative;
-    width: 100%;
+    max-width: 600px;
     display: flex;
     flex-direction: column;
     gap: ${spacing.spacing4}px;
@@ -79,5 +83,44 @@ export const Wrapper = styled.div<StyledInputProps>`
         ${HelperText} {
             ${$themefication.helperText}
         }
+        ${FileButton} {
+            ${$themefication.fileButton || $themefication.input}
+            ${size.input}
+        }
+        ${FileName} {
+            ${$themefication.fileName || $themefication.input}
+            ${size.input}
+        }
+        ${FileInputContainer} {
+            ${StyledInput} {
+                ${$themefication.input}
+                ${size.input}
+            }
+        }
     `}
 `
+
+export const FileButton = styled.span`
+    display: inline-flex;
+    align-items: center;
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+    border-radius: 4px 0 0 4px;
+    transition: all 0.2s ease;
+`
+
+export const FileName = styled.span`
+    flex: 1;
+    border-radius: 0 4px 4px 0;
+    border-left: none;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+`
+
+export const FileInputContainer = styled.div`
+    display: flex;
+    width: 100%;
+    position: relative;
+`

package/components/TextField/TextField.tsx

@@ -2,6 +2,9 @@ import React, { forwardRef, useState } from 'react'
 import { TextFieldProps } from './TextField.types'
 import { StateInterface, TextFieldStates } from './TextField.states'
 import {
+    FileButton,
+    FileInputContainer,
+    FileName,
     HelperText,
     IconWrapper,
     InputWrapper,
@@ -9,9 +12,10 @@ import {
     StyledInput,
     Wrapper
 } from './TextField.styles'
+
 import { textFieldSizes } from './TextField.sizes'
-import { Eye, EyeClosed } from '@phosphor-icons/react'
-import  getState  from './utils/getState'
+import { EyeIcon, EyeClosedIcon } from '@phosphor-icons/react'
+import getState from './utils/getState'
 import RequiredAsterisk from '../RequiredAsterisk'
 
 const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
@@ -23,6 +27,8 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             handleLeftIcon,
             handleRightIcon,
             helperText,
+            filePlaceholder = 'Nenhum arquivo selecionado',
+            fileButtonLabel = 'Escolher arquivo',
             label,
             leftIcon,
             onChange,
@@ -37,17 +43,39 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         },
         ref
     ) => {
-        const [passwordVisible, setPasswordVisible] = useState(
-            type !== 'password'
-        )
+        const [passwordVisible, setPasswordVisible] = useState(false)
+        const [selectedFileName, setSelectedFileName] = useState('')
         const state = getState(disabled, !!error)
         const textFieldState: StateInterface = TextFieldStates(state)
         const textFieldSize = textFieldSizes(size, !!leftIcon, !!rightIcon)
+        const [isDragging, setIsDragging] = useState(false)
+
+        const getCurrentInputType = () => {
+            if (type === 'password') {
+                return passwordVisible ? 'text' : 'password'
+            }
+            return type
+        }
 
         const togglePasswordVisibility = () => {
             setPasswordVisible(!passwordVisible)
         }
 
+        const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+            const files = e.target.files
+            if (files && files.length > 0) {
+                const fileNames = Array.from(files)
+                    .map(file => file.name)
+                    .join(', ')
+                setSelectedFileName(fileNames)
+            } else {
+                setSelectedFileName('')
+            }
+
+            register?.onChange(e)
+            onChange?.(e)
+        }
+
         const transformRightIcon = (
             type: string,
             rightIcon: React.ReactNode
@@ -55,14 +83,97 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             if (type === 'password') {
                 return (
                     <IconWrapper onClick={togglePasswordVisibility} $right>
-                        {passwordVisible ? <Eye /> : <EyeClosed />}
+                        {passwordVisible ? <EyeIcon /> : <EyeClosedIcon />}
+                    </IconWrapper>
+                )
+            }
+            if (rightIcon) {
+                return (
+                    <IconWrapper onClick={handleRightIcon} $right>
+                        {rightIcon}
                     </IconWrapper>
                 )
             }
+            return null
+        }
+
+        const handleDrop = (e: React.DragEvent<HTMLLabelElement>) => {
+            e.preventDefault()
+            e.stopPropagation()
+            setIsDragging(false)
+
+            const files = e.dataTransfer.files
+            if (!files || files.length === 0) return
+
+            const fileNames = Array.from(files)
+                .map(f => f.name)
+                .join(', ')
+            setSelectedFileName(fileNames)
+
+            const event = {
+                target: {
+                    files
+                }
+            } as unknown as React.ChangeEvent<HTMLInputElement>
+
+            register?.onChange(event)
+            onChange?.(event)
+        }
+
+        const handleDragOver = (e: React.DragEvent) => {
+            e.preventDefault()
+            e.stopPropagation()
+            setIsDragging(true)
+        }
+
+        const handleDragLeave = (e: React.DragEvent) => {
+            e.preventDefault()
+            e.stopPropagation()
+            setIsDragging(false)
+        }
+
+        if (type === 'file') {
             return (
-                <IconWrapper onClick={handleRightIcon} $right>
-                    {rightIcon}
-                </IconWrapper>
+                <Wrapper
+                    className={className}
+                    size={textFieldSize}
+                    $themefication={textFieldState}>
+                    <Label>
+                        {label} {requiredSymbol && <RequiredAsterisk />}
+                    </Label>
+                    <InputWrapper
+                        as="label"
+                        onDragOver={handleDragOver}
+                        onDragLeave={handleDragLeave}
+                        onDrop={handleDrop}
+                        $isDragging={isDragging}
+                    >
+                        {leftIcon && (
+                            <IconWrapper onClick={handleLeftIcon}>
+                                {leftIcon}
+                            </IconWrapper>
+                        )}
+                        <FileInputContainer>
+                            <FileButton>{fileButtonLabel}</FileButton>
+                            <FileName>
+                                {selectedFileName || filePlaceholder}
+                            </FileName>
+                        </FileInputContainer>
+                        {transformRightIcon(type, rightIcon)}
+                        <StyledInput
+                            ref={ref}
+                            type="file"
+                            hidden
+                            disabled={disabled}
+                            {...props}
+                            {...register}
+                            onChange={handleFileChange}
+                        />
+                    </InputWrapper>
+                    {(helperText || error) && (
+                        <HelperText>{error?.message || helperText}</HelperText>
+                    )}
+                </Wrapper>
             )
         }
 
@@ -70,8 +181,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             <Wrapper
                 className={className}
                 size={textFieldSize}
-                $themefication={textFieldState}
-            >
+                $themefication={textFieldState}>
                 <Label>
                     {label} {requiredSymbol && <RequiredAsterisk />}
                 </Label>
@@ -84,7 +194,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
                     {transformRightIcon(type, rightIcon)}
                     <StyledInput
                         ref={ref}
-                        type={passwordVisible ? 'text' : 'password'}
+                        type={getCurrentInputType()}
                         value={value}
                         disabled={disabled}
                         placeholder={placeholder}

package/components/TextField/TextField.types.ts

@@ -10,6 +10,8 @@ export interface TextFieldProps<TFieldValues extends FieldValues = FieldValues>
     handleLeftIcon?: () => void
     handleRightIcon?: () => void
     helperText?: string
+    filePlaceholder?: string
+    fileButtonLabel?: string
     size?: TextFieldSize
     className?: string
     placeholder?: string
@@ -18,6 +20,6 @@ export interface TextFieldProps<TFieldValues extends FieldValues = FieldValues>
     rightIcon?: React.ReactNode
     error?: TFieldValues
     requiredSymbol?: boolean
-    type?: 'text' | 'password' | 'email' | 'number'
+    type?: 'text' | 'password' | 'email' | 'number' | 'file'
     register?: UseFormRegisterReturn<string>
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@liguelead/design-system",
-    "version": "0.0.25",
+    "version": "0.0.26",
     "type": "module",
     "main": "components/index.ts",
     "publishConfig": {