@liguelead/design-system 0.0.37 → 0.0.38

package/components/TextField/TextField.stories.tsx

@@ -15,13 +15,14 @@ Campo de texto para entrada de dados pelo usuário.
 
 **Tamanhos:** \`sm\` · \`md\` · \`lg\`
 
-**Tipos suportados:** \`text\` · \`password\` · \`email\` · \`number\` · \`file\`
+**Tipos suportados:** \`text\` · \`password\` · \`email\` · \`number\` · \`file\` · \`textarea\`
 
 **Boas práticas:**
 - Sempre use \`label\` para identificar o campo
 - Use \`helperText\` para instruções ou validações
 - Use \`error\` para comunicar erros de validação
 - Ícones devem reforçar o tipo de dado esperado
+- No \`textarea\`, use \`maxLength\` para o contador visual e \`htmlMaxLength\` para bloquear digitação pelo browser
         `,
       },
     },
@@ -48,7 +49,7 @@ Campo de texto para entrada de dados pelo usuário.
     },
     type: {
       control: 'select',
-      options: ['text', 'password', 'email', 'number', 'file'],
+      options: ['text', 'password', 'email', 'number', 'file', 'textarea'],
       description: 'Tipo do input HTML',
       table: { defaultValue: { summary: 'text' } },
     },
@@ -180,6 +181,112 @@ export const Obrigatorio: Story = {
   },
 }
 
+export const TextArea: Story = {
+  name: 'TextArea',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Variante textarea com contador de caracteres, botão de variável e controle de maxLength.',
+      },
+    },
+  },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 24, width: 480 }}>
+      <TextField
+        label="Mensagem simples"
+        type="textarea"
+        placeholder="Digite sua mensagem..."
+        maxLength={160}
+      />
+      <TextField
+        label="Com botão de variável"
+        type="textarea"
+        placeholder="Digite sua mensagem..."
+        maxLength={160}
+        showVariableButton
+        variableButtonLabel="Inserir variável"
+      />
+      <TextField
+        label="Com bloqueio nativo (htmlMaxLength)"
+        type="textarea"
+        placeholder="Máximo 60 caracteres — browser bloqueia ao atingir o limite"
+        maxLength={60}
+        htmlMaxLength
+        showVariableButton
+        variableButtonLabel="Inserir variável"
+      />
+      <TextField
+        label="Desabilitado"
+        type="textarea"
+        placeholder="Campo desabilitado"
+        maxLength={160}
+        showVariableButton
+        disabled
+      />
+    </div>
+  ),
+}
+
+export const TextAreaHtmlMaxLength: Story = {
+  name: 'TextArea — htmlMaxLength',
+  parameters: {
+    docs: {
+      description: {
+        story: `
+Por padrão \`maxLength\` só exibe o contador visual — o usuário pode digitar além do limite (estado de erro).
+
+Com \`htmlMaxLength\` o browser bloqueia a digitação ao atingir o limite. O botão "Inserir variável" também respeita o limite.
+
+| Prop | Comportamento |
+|------|--------------|
+| \`maxLength={n}\` | Contador visual, sem bloqueio |
+| \`maxLength={n} htmlMaxLength\` | Contador + bloqueio nativo |
+        `,
+      },
+    },
+  },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 24, width: 480 }}>
+      <TextField
+        label="Só contador (sem bloqueio)"
+        type="textarea"
+        placeholder="Pode digitar além de 30..."
+        maxLength={30}
+        showVariableButton
+        variableButtonLabel="Inserir variável"
+      />
+      <TextField
+        label="Contador + bloqueio nativo"
+        type="textarea"
+        placeholder="Bloqueado em 30 caracteres"
+        maxLength={30}
+        htmlMaxLength
+        showVariableButton
+        variableButtonLabel="Inserir variável"
+      />
+    </div>
+  ),
+}
+
+export const TextAreaComErro: Story = {
+  name: 'TextArea com erro',
+  parameters: {
+    docs: { description: { story: 'Estado de erro no textarea.' } },
+  },
+  render: () => (
+    <div style={{ width: 480 }}>
+      <TextField
+        label="Mensagem"
+        type="textarea"
+        placeholder="Digite sua mensagem..."
+        maxLength={160}
+        showVariableButton
+        error={{ message: 'Campo obrigatório.' }}
+      />
+    </div>
+  ),
+}
+
 export const ExemploLogin: Story = {
   name: 'Exemplo: Formulário de login',
   parameters: {

package/components/TextField/TextField.styles.ts

@@ -4,6 +4,7 @@ import {
     fontSize,
     fontWeight,
     lineHeight,
+    radius,
     shadow,
     spacing
 } from '@liguelead/foundation'
@@ -76,6 +77,9 @@ export const Wrapper = styled.div<StyledInputProps>`
             ${$themefication.input}
             ${size.input}
         }
+        ${StyledTextArea} {
+            ${$themefication.input}
+        }
         ${Label} {
             ${$themefication.label}
             ${size.label}
@@ -124,3 +128,43 @@ export const FileInputContainer = styled.div`
     width: 100%;
     position: relative;
 `
+
+export const StyledTextArea = styled.textarea.withConfig({
+    shouldForwardProp: prop => !['control', 'errors', 'rules'].includes(prop)
+})`
+    width: 100%;
+    border-radius: ${radius.radius4}px;
+    outline: none;
+    border: 1px solid ${parseColor('neutral400')};
+    transition: border-color 0.2s ease;
+    background: transparent;
+    resize: vertical;
+    font-family: inherit;
+    font-size: ${fontSize.fontSize14}px;
+    line-height: ${lineHeight.lineHeight22}px;
+    padding: ${spacing.spacing12}px ${spacing.spacing16}px;
+    color: inherit;
+`
+
+export const TextAreaWrapper = styled.div`
+    position: relative;
+    width: 100%;
+    border-radius: ${radius.radius4}px;
+    background: transparent;
+`
+
+export const TextAreaFooter = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: -6px;
+`
+
+export const CharCount = styled.span<{ $isOver?: boolean }>`
+    font-size: ${fontSize.fontSize12}px;
+    line-height: ${lineHeight.lineHeight16}px;
+    color: ${({ theme, $isOver }) =>
+        $isOver
+            ? parseColor(theme.colors.danger200)
+            : parseColor(theme.colors.textMedium)};
+`

package/components/TextField/TextField.tsx

@@ -1,7 +1,8 @@
-import React, { forwardRef, useState } from 'react'
+import React, { forwardRef, useEffect, useRef, useState } from 'react'
 import { TextFieldProps } from './TextField.types'
 import { StateInterface, TextFieldStates } from './TextField.states'
 import {
+    CharCount,
     FileButton,
     FileInputContainer,
     FileName,
@@ -10,6 +11,9 @@ import {
     InputWrapper,
     Label,
     StyledInput,
+    StyledTextArea,
+    TextAreaFooter,
+    TextAreaWrapper,
     Wrapper
 } from './TextField.styles'
 
@@ -17,6 +21,7 @@ import { textFieldSizes } from './TextField.sizes'
 import { EyeIcon, EyeClosedIcon } from '@phosphor-icons/react'
 import getState from './utils/getState'
 import RequiredAsterisk from '../RequiredAsterisk'
+import Button from '../Button'
 
 const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
     (
@@ -39,12 +44,22 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             register,
             requiredSymbol = false,
             placeholder,
+            showVariableButton = false,
+            variableButtonLabel = 'Variável',
+            maxLength,
+            htmlMaxLength = false,
+            onTextAreaChange,
             ...props
         },
         ref
     ) => {
         const [passwordVisible, setPasswordVisible] = useState(false)
         const [selectedFileName, setSelectedFileName] = useState('')
+        const [textAreaValue, setTextAreaValue] = useState(
+            (value as string) ?? ''
+        )
+        const textAreaRef = useRef<HTMLTextAreaElement>(null)
+        const varCountRef = useRef(0)
         const state = getState(disabled, !!error)
         const textFieldState: StateInterface = TextFieldStates(state)
         const textFieldSize = textFieldSizes(size, !!leftIcon, !!rightIcon)
@@ -131,6 +146,108 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             e.stopPropagation()
             setIsDragging(false)
         }
+        useEffect(() => {
+            if (value !== undefined) {
+                setTextAreaValue(value as string)
+            }
+        }, [value])
+
+        const handleInsertVariable = () => {
+            const el = textAreaRef.current
+            if (!el) return
+
+            const matches = textAreaValue.match(/\{\{(\d+)\}\}/g) ?? []
+            const usedNumbers = matches.map(m => parseInt(m.replace(/\D/g, ''), 10))
+            let next = 1
+            while (usedNumbers.includes(next)) next++
+            varCountRef.current = next
+            const variable = `{{${next}}}`
+            const start = el.selectionStart ?? textAreaValue.length
+            const end = el.selectionEnd ?? textAreaValue.length
+            const newValue =
+                textAreaValue.slice(0, start) +
+                variable +
+                textAreaValue.slice(end)
+
+            if (maxLength !== undefined && newValue.length > maxLength) return
+
+            setTextAreaValue(newValue)
+
+            requestAnimationFrame(() => {
+                el.focus()
+                el.setSelectionRange(
+                    start + variable.length,
+                    start + variable.length
+                )
+            })
+        }
+
+        const handleTextAreaChange = (
+            e: React.ChangeEvent<HTMLTextAreaElement>
+        ) => {
+            setTextAreaValue(e.target.value)
+            onTextAreaChange?.(e)
+        }
+
+        if (type === 'textarea') {
+            const charCount = textAreaValue.length
+            const isOver = maxLength !== undefined && charCount > maxLength
+
+            return (
+                <Wrapper
+                    className={className}
+                    size={textFieldSize}
+                    $themefication={textFieldState}
+                >
+                    {label && (
+                        <Label>
+                            {label}{' '}
+                            {requiredSymbol && <RequiredAsterisk />}
+                        </Label>
+                    )}
+                    <TextAreaWrapper>
+                        <StyledTextArea
+                            ref={textAreaRef}
+                            value={textAreaValue}
+                            disabled={disabled}
+                            placeholder={placeholder}
+                            maxLength={htmlMaxLength ? maxLength : undefined}
+                            onChange={handleTextAreaChange}
+                            aria-invalid={!!error}
+                            aria-describedby={
+                                helperText || error
+                                    ? `${label}-helper`
+                                    : undefined
+                            }
+                        />
+                    </TextAreaWrapper>
+                    <TextAreaFooter>
+                        {maxLength !== undefined && (
+                            <CharCount $isOver={isOver}>
+                                {charCount}/{maxLength}
+                            </CharCount>
+                        )}
+                        {showVariableButton && (
+                            <Button
+                                size="sm"
+                                variant="ghost"
+                                type="button"
+                                disabled={disabled}
+                                onClick={handleInsertVariable}
+                                aria-label={variableButtonLabel}
+                            >
+                                {variableButtonLabel}
+                            </Button>
+                        )}
+                    </TextAreaFooter>
+                    {(helperText || error) && (
+                        <HelperText id={`${label}-helper`}>
+                            {error?.message || helperText}
+                        </HelperText>
+                    )}
+                </Wrapper>
+            )
+        }
 
         if (type === 'file') {
             return (

package/components/TextField/TextField.types.ts

@@ -20,6 +20,16 @@ export interface TextFieldProps<TFieldValues extends FieldValues = FieldValues>
     rightIcon?: React.ReactNode
     error?: TFieldValues
     requiredSymbol?: boolean
-    type?: 'text' | 'password' | 'email' | 'number' | 'file'
+    type?: 'text' | 'password' | 'email' | 'number' | 'file' | 'textarea'
     register?: UseFormRegisterReturn<string>
+    /** Habilita o botão de inserir variável (apenas para type="textarea") */
+    showVariableButton?: boolean
+    /** Label do botão de variável */
+    variableButtonLabel?: string
+    /** Limite máximo de caracteres (exibido no rodapé quando type="textarea") */
+    maxLength?: number
+    /** Passa o maxLength nativo ao <textarea>, bloqueando digitação pelo browser. Default: false */
+    htmlMaxLength?: boolean
+    /** Callback chamado quando o valor do textarea muda */
+    onTextAreaChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
 }

package/package.json

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