@liguelead/design-system 0.0.25 → 0.0.27

package/components/Button/Button.appearance.ts

@@ -53,8 +53,8 @@ export const ButtonVariant = (
         }
         &:disabled {
             background-color: transparent;
-            color: ${parseColor(theme.colors.neutral1100)}80;
-            border-color: ${parseColor(theme.colors.neutral400)};
+            color: ${parsedColor}80;
+            border-color: ${parsedColor}80;
             cursor: not-allowed;
         }
     `,
@@ -68,7 +68,7 @@ export const ButtonVariant = (
         }
         &:disabled {
             background-color: transparent;
-            color: ${parseColor(theme.colors.neutral1100)}80;
+            color: ${parsedColor}80;
             cursor: not-allowed;
         }
     `,

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/Combobox/Combobox.styles.ts

@@ -0,0 +1,269 @@
+import styled from 'styled-components'
+import * as Popover from '@radix-ui/react-popover'
+import { Command } from 'cmdk'
+import {
+    fontSize,
+    fontWeight,
+    lineHeight,
+    shadow,
+    spacing
+} from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+import { StyledInput } from '../TextField/TextField.styles'
+import { TextFieldSizeType } from '../TextField/TextField.sizes'
+import { StateInterface } from '../TextField/TextField.states'
+import Text from '../Text'
+
+type TStyledInputProps =  {
+    size: TextFieldSizeType
+    $themefication: StateInterface
+}
+
+export const TriggerButton = styled(StyledInput).attrs({ as: 'button' })<{
+    $width: number | string
+}>`
+    width: ${({ $width }) =>
+        typeof $width === 'number' ? `${$width}px` : $width};
+    border-radius: 4px;
+    padding-right: ${spacing.spacing16}px !important;
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: ${spacing.spacing8}px;
+    cursor: pointer;
+    text-align: left;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
+    &:hover:not(:disabled) {
+        border-color: ${({ theme }) => parseColor(theme.colors.neutral700)};
+    }
+
+    &:focus-visible {
+        border-color: ${({ theme }) => parseColor(theme.colors.neutral700)};
+        box-shadow: ${shadow.focusShadow};
+        outline: none;
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        background: transparent;
+    }
+`
+
+export const Label = styled.label`
+    display: block;
+    font-weight: ${fontWeight.fontWeight500};
+    font-size: ${fontSize.fontSize14}px;
+`
+
+export const HelperText = styled.span<{ error?: boolean }>`
+    font-size: ${fontSize.fontSize12}px;
+    line-height: ${lineHeight.lineHeight16}px;
+`
+
+export const TriggerLabel = styled.span`
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`
+
+export const TriggerIcon = styled.span`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: ${({ theme }) => parseColor(theme.colors.neutral700)};
+`
+
+export const PopoverContent = styled(Popover.Content)<{
+    $width: number | string
+}>`
+    width: ${({ $width }) =>
+        typeof $width === 'number' ? `${$width}px` : $width};
+    background: ${({ theme }) => parseColor(theme.colors.white)};
+    border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral400)};
+    border-radius: 4px;
+    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.08);
+    z-index: 10;
+`
+
+export const CommandRoot = styled(Command)`
+    width: 100%;
+`
+
+export const SearchRow = styled.div`
+    display: flex;
+    align-items: center;
+    gap: ${spacing.spacing8}px;
+    padding: ${spacing.spacing8}px ${spacing.spacing12}px;
+    border-bottom: 1px solid ${({ theme }) => parseColor(theme.colors.neutral200)};
+`
+
+export const SearchIcon = styled.div`
+    width: 16px;
+    height: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: ${({ theme }) => parseColor(theme.colors.textDark)};
+`
+
+export const CommandInput = styled(Command.Input)`
+    width: 100%;
+    border: 0;
+    outline: none;
+    font-size: ${fontSize.fontSize14}px;
+    line-height: ${lineHeight.lineHeight20}px;
+    color: ${({ theme }) => parseColor(theme.colors.textDark)};
+    background: transparent;
+
+    &::placeholder {
+        color: ${({ theme }) => parseColor(theme.colors.textMedium)};
+    }
+`
+
+export const List = styled(Command.List)`
+    max-height: 260px;
+    overflow: auto;
+    padding-top: ${spacing.spacing8}px;
+
+    &::-webkit-scrollbar {
+        width: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: ${({ theme }) => parseColor(theme.colors.neutral200)};
+        border-radius: 999px;
+        border: 3px solid ${({ theme }) => parseColor(theme.colors.white)};
+    }
+`
+
+export const Empty = styled(Command.Empty)`
+    padding: ${spacing.spacing8}px ${spacing.spacing12}px;
+`
+
+export const GroupHeading = styled.div`
+    padding: ${spacing.spacing12}px ${spacing.spacing12}px ${spacing.spacing4}px;
+    font-size: ${fontSize.fontSize12}px;
+    font-weight: ${fontWeight.fontWeight500};
+    color: ${({ theme }) => parseColor(theme.colors.textMedium)};
+`
+
+export const GroupWrap = styled(Command.Group)`
+    background: transparent;
+`
+
+export const ItemRow = styled(Command.Item)`
+    height: ${spacing.spacing36}px;
+    padding: 0 ${spacing.spacing12}px;
+    margin-bottom: ${spacing.spacing4}px;
+    display: flex;
+    align-items: center;
+    gap: ${spacing.spacing8}px;
+    font-size: ${fontSize.fontSize14}px;
+    color: ${({ theme }) => parseColor(theme.colors.textDark)};
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.2s ease;
+
+    &[data-disabled='true'] {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    &[data-variant='multi'][data-is-selected='true'] {
+        background: transparent;
+    }
+
+    &[data-variant='single'][data-is-selected='true'] {
+        background: ${({ theme }) => parseColor(theme.colors.primary)};
+        color: ${({ theme }) => parseColor(theme.colors.white)};
+    }
+
+    &:hover:not([data-disabled='true']):not([data-is-selected='true']:not([data-variant='multi'])) {
+        background: ${({ theme }) => parseColor(theme.colors.primaryLight)};
+    }
+`
+
+export const ItemLabel = styled(Text)`
+    padding-left: 4px;
+`;
+
+
+export const RightIcon = styled.span`
+    margin-left: auto;
+    padding: ${spacing.spacing8}px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: inherit;
+`
+
+export const Checkbox = styled.span<{ $checked: boolean }>`
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+    border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral400)};
+    background: ${({ $checked, theme }) =>
+        $checked
+            ? parseColor(theme.colors.primary)
+            : parseColor(theme.colors.white)};
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+        color: ${({ theme }) => parseColor(theme.colors.white)};
+    }
+`
+
+export const Footer = styled.div`
+    border-top: 1px solid ${({ theme }) => parseColor(theme.colors.neutral200)};
+    padding-top: ${spacing.spacing8}px;
+    margin-top: ${spacing.spacing8}px;
+`
+
+export const AddNewRow = styled.button`
+    width: 100%;
+    height: ${spacing.spacing36}px;
+    border: 0;
+    background: transparent;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    gap: ${spacing.spacing8}px;
+    padding: 0 ${spacing.spacing12}px;
+    cursor: pointer;
+    color: ${({ theme }) => parseColor(theme.colors.textDark)};
+    font-size: ${fontSize.fontSize14}px;
+
+    &:hover {
+        background: ${({ theme }) => parseColor(theme.colors.primaryLight)};
+    }
+`
+
+export const Wrapper = styled.div<TStyledInputProps>`
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: ${spacing.spacing4}px;
+    ${({ $themefication, size }) => `
+        ${TriggerButton} {
+            ${$themefication.input}
+            ${size.input}
+        }
+        ${HelperText} {
+            ${$themefication.helperText}
+        }
+        ${Label} {
+            ${$themefication.label}
+            ${size.label}
+        }
+    `}
+`

package/components/Combobox/Combobox.tsx

@@ -0,0 +1,266 @@
+import { useMemo, useState } from 'react'
+
+import {
+    MagnifyingGlassIcon,
+    CheckIcon,
+    PlusIcon,
+    CaretDownIcon
+} from '@phosphor-icons/react'
+
+import Text from '../Text'
+import { ComboboxProps } from './Combobox.types'
+
+import RequiredAsterisk from '../RequiredAsterisk'
+import getState from '../TextField/utils/getState'
+import { TextFieldStates } from '../TextField/TextField.states'
+import { textFieldSizes } from '../TextField/TextField.sizes'
+
+import * as Popover from '@radix-ui/react-popover'
+import * as s  from './Combobox.styles'
+import { isMultiProps, normalizeData } from './utils'
+
+const Combobox = (props: ComboboxProps) => {
+    const {
+        className,
+        label,
+        helperText,
+        error,
+        requiredSymbol = false,
+        leftIcon,
+        items,
+        groups,
+        onChange,
+        placeholder = 'Selecionar',
+        searchPlaceholder = 'Pesquisar',
+        emptyText = 'Sem resultados.',
+        disabled = false,
+        width = 280,
+        size = 'md',
+        onCreate,
+        createLabel = 'Adicionar novo'
+    } = props
+
+    const [open, setOpen] = useState(false)
+    const { groups: g } = normalizeData(items, groups)
+    const state = getState(disabled, !!error)
+    const textFieldState = TextFieldStates(state)
+    const textFieldSize = textFieldSizes(size, false, true)
+
+    const isMulti = isMultiProps(props)
+    const flatItems = useMemo(() => g.flatMap(x => x.items), [g])
+    const selectedValue = isMulti ? undefined : props.value
+    const selected = selectedValue
+        ? flatItems.find(i => i.value === selectedValue)
+        : undefined
+    const selectedValues = isMulti ? props.values ?? [] : []
+    const selectedLabels = isMulti
+        ? flatItems
+                .filter(i => selectedValues.includes(i.value))
+                .map(i => i.label)
+        : []
+    const triggerText = isMulti
+        ? selectedLabels.length === 0
+            ? placeholder
+            : selectedLabels.join(', ')
+        : selected?.label ?? placeholder
+
+    const toggle = (value: string) => {
+        if (!isMulti) return
+        const next = selectedValues.includes(value)
+            ? selectedValues.filter(x => x !== value)
+            : [...selectedValues, value]
+        ;(onChange as ((values: string[]) => void) | undefined)?.(next)
+    }
+
+    return (
+        <s.Wrapper
+            className={className}
+            size={textFieldSize}
+            $themefication={textFieldState}>
+            {label && (
+                <s.Label>
+                    {label} {requiredSymbol && <RequiredAsterisk />}
+                </s.Label>
+            )}
+            <Popover.Root open={open} onOpenChange={setOpen}>
+                <Popover.Trigger asChild>
+                    <s.TriggerButton
+                        type="button"
+                        role="combobox"
+                        aria-expanded={open}
+                        aria-invalid={!!error}
+                        disabled={disabled}
+                        $width={width}>
+                        <s.TriggerLabel>
+                            <Text
+                                tag="span"
+                                size="body02"
+                                color={
+                                    isMulti
+                                        ? selectedLabels.length
+                                            ? 'textDark'
+                                            : 'textMedium'
+                                        : selected
+                                        ? 'textDark'
+                                        : 'textMedium'
+                                }>
+                                {triggerText}
+                            </Text>
+                        </s.TriggerLabel>
+                        <s.TriggerIcon aria-hidden>
+                            <CaretDownIcon weight="fill" size={16} />
+                        </s.TriggerIcon>
+                    </s.TriggerButton>
+                </Popover.Trigger>
+
+                <Popover.Portal>
+                    <s.PopoverContent sideOffset={-1} $width={width} align="start">
+                        <s.CommandRoot>
+                            <s.SearchRow>
+                                <s.SearchIcon>
+                                    <MagnifyingGlassIcon size={16} />
+                                </s.SearchIcon>
+                                <s.CommandInput placeholder={searchPlaceholder} />
+                            </s.SearchRow>
+
+                            <s.List>
+                                <s.Empty>
+                                    <Text
+                                        tag="span"
+                                        size="body02"
+                                        color="textMedium"
+                                    >
+                                        {emptyText}
+                                    </Text>
+                                </s.Empty>
+
+                                {g.map((group, idx) => (
+                                    <s.GroupWrap
+                                        key={`${group.heading}-${idx}`}
+                                        heading={group.heading}>
+                                        {group.heading ? (
+                                            <s.GroupHeading>
+                                                <Text
+                                                    tag="span"
+                                                    size="span01"
+                                                    color="textMedium">
+                                                    {group.heading}
+                                                </Text>
+                                            </s.GroupHeading>
+                                        ) : null}
+
+                                        {group.items.map(item => {
+                                            const isSelected =
+                                                item.value === selectedValue
+                                            const isChecked =
+                                                isMulti &&
+                                                selectedValues.includes(
+                                                    item.value
+                                                )
+                                            return (
+                                                <s.ItemRow
+                                                    key={item.value}
+                                                    value={item.label}
+                                                    disabled={item.disabled}
+                                                    onSelect={() => {
+                                                        if (item.disabled)
+                                                            return
+                                                        if (isMulti) {
+                                                            toggle(item.value)
+                                                            return
+                                                        }
+                                                        ;(
+                                                            onChange as
+                                                                | ((
+                                                                        value: string
+                                                                    ) => void)
+                                                                | undefined
+                                                        )?.(item.value)
+                                                        setOpen(false)
+                                                    }}
+                                                    data-selected={
+                                                        isMulti
+                                                            ? isChecked
+                                                                ? 'true'
+                                                                : 'false'
+                                                            : isSelected
+                                                            ? 'true'
+                                                            : 'false'
+                                                    }
+                                                    data-is-selected={
+                                                        isMulti
+                                                            ? isChecked
+                                                                ? 'true'
+                                                                : 'false'
+                                                            : isSelected
+                                                            ? 'true'
+                                                            : 'false'
+                                                    }
+                                                    data-variant={
+                                                        isMulti ? 'multi' : 'single'
+                                                    }>
+                                                    {isMulti ? (
+                                                        <s.Checkbox
+                                                            $checked={
+                                                                isChecked
+                                                            }>
+                                                            {isChecked ? (
+                                                                <CheckIcon
+                                                                    size={12}
+                                                                    weight="bold"
+                                                                />
+                                                            ) : null}
+                                                        </s.Checkbox>
+                                                    ) : null}
+                                                    {leftIcon ? leftIcon : null}
+                                                    <s.ItemLabel
+                                                        tag="span"
+                                                        size="body02"
+                                                        color={
+                                                            !isMulti && isSelected
+                                                                ? 'white'
+                                                                : 'textDark'
+                                                        }>
+                                                        {item.label}
+                                                    </s.ItemLabel>
+                                                    {!isMulti && isSelected && (
+                                                        <s.RightIcon>
+                                                            <CheckIcon
+                                                                size={16}
+                                                                weight="bold"
+                                                            />
+                                                        </s.RightIcon>
+                                                    )}
+                                                </s.ItemRow>
+                                            )
+                                        })}
+                                    </s.GroupWrap>
+                                ))}
+                            </s.List>
+
+                            {onCreate && (
+                                <s.Footer>
+                                    <s.AddNewRow
+                                        type="button"
+                                        onClick={() => {
+                                            onCreate()
+                                        }}>
+                                        <PlusIcon size={16} />
+                                        <Text tag="span" size="body02">
+                                            {createLabel}
+                                        </Text>
+                                    </s.AddNewRow>
+                                </s.Footer>
+                            )}
+                        </s.CommandRoot>
+                    </s.PopoverContent>
+                </Popover.Portal>
+            </Popover.Root>
+            {(helperText || error) && (
+                <s.HelperText>{error?.message || helperText}</s.HelperText>
+            )}
+        </s.Wrapper>
+    )
+}
+
+export default Combobox

package/components/Combobox/Combobox.types.ts

@@ -0,0 +1,45 @@
+import { FieldValues } from 'react-hook-form'
+import React from 'react'
+import { TextFieldSize } from '../TextField/TextField.sizes'
+
+export type Item = { value: string; label: string; disabled?: boolean }
+export type Group = { heading: string; items: Item[] }
+
+export type BaseProps<TFieldValues extends FieldValues = FieldValues> = {
+    className?: string
+    label?: string
+    helperText?: string
+    error?: TFieldValues
+    requiredSymbol?: boolean
+    leftIcon?: React.ReactNode
+    placeholder?: string
+    searchPlaceholder?: string
+    emptyText?: string
+    disabled?: boolean
+    width?: number | string
+    size?: TextFieldSize
+    groups?: Group[]
+    items?: Item[]
+    onCreate?: () => void
+    createLabel?: string
+}
+
+export type ComboboxVariant = 'single' | 'multi'
+
+export type ComboboxSingleProps<TFieldValues extends FieldValues = FieldValues> =
+    BaseProps<TFieldValues> & {
+        variant?: 'single'
+        value?: string
+        onChange?: (value: string) => void
+    }
+
+export type ComboboxMultiProps<TFieldValues extends FieldValues = FieldValues> =
+    BaseProps<TFieldValues> & {
+        variant: 'multi'
+        values?: string[]
+        onChange?: (values: string[]) => void
+    }
+
+export type ComboboxProps<TFieldValues extends FieldValues = FieldValues> =
+    | ComboboxSingleProps<TFieldValues>
+    | ComboboxMultiProps<TFieldValues>

package/components/Combobox/index.ts

@@ -0,0 +1 @@
+export { default as Combobox } from './Combobox'

package/components/Combobox/utils/index.ts

@@ -0,0 +1,9 @@
+import { ComboboxMultiProps, ComboboxProps, Group, Item } from "../Combobox.types"
+
+export const normalizeData = (items?: Item[], groups?: Group[]) => {
+    if (groups?.length) return { groups }
+    return { groups: items ? [{ heading: '', items }] : [] }
+}
+
+export const isMultiProps = (props: ComboboxProps): props is ComboboxMultiProps =>
+    props.variant === 'multi'

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/components/index.ts

@@ -15,3 +15,4 @@ export { default as LinkButton } from './LinkButton'
 export { default as RadioButton } from './RadioButton'
 export { ToastProvider, Toaster } from './Toaster'
 export { default as Dialog } from './Dialog'
+export { Combobox } from './Combobox'

package/package.json

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