@liguelead/design-system 0.0.36 → 0.0.38

package/components/Stepper/Stepper.styles.ts

@@ -0,0 +1,179 @@
+import styled, { css, keyframes } from 'styled-components'
+import { spacing, fontSize, fontWeight, lineHeight, radius } from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+import {
+    TStepIndicatorProps,
+    TStepSeparatorProps,
+    TStepperContainerProps,
+} from './Stepper.types'
+import { StepIndicatorAppearance } from './Stepper.appearance'
+
+const popIn = keyframes`
+    0%   { transform: scale(0.5); opacity: 0; }
+    60%  { transform: scale(1.2); }
+    100% { transform: scale(1); opacity: 1; }
+`
+
+const fillLine = keyframes`
+    from { width: 0%; }
+    to   { width: 100%; }
+`
+
+const fillLineV = keyframes`
+    from { height: 0%; }
+    to   { height: 100%; }
+`
+export const StepperWrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    width: 100%;
+`
+
+export const StepColumn = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-shrink: 0;
+`
+
+export const StepperLabelsRow = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    width: 100%;
+`
+
+export const StepLabelCell = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    margin-top: ${spacing.spacing8}px;
+`
+
+export const StepperContainer = styled.ol<TStepperContainerProps>`
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    flex-direction: column;
+`
+
+export const StepperItem = styled.li<{ $orientation: 'horizontal' | 'vertical' }>`
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: ${spacing.spacing8}px;
+`
+
+export const StepBody = styled.div<{ $orientation: 'horizontal' | 'vertical' }>`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: ${spacing.spacing8}px;
+`
+
+export const StepTrigger = styled.div<{ $orientation: 'horizontal' | 'vertical' }>`
+    display: flex;
+    align-items: center;
+    cursor: default;
+    gap: ${spacing.spacing8}px;
+`
+
+export const StepIndicator = styled.div<TStepIndicatorProps>`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    flex-shrink: 0;
+    font-size: ${fontSize.fontSize14}px;
+    font-weight: ${fontWeight.fontWeight600};
+    line-height: 1;
+    animation: ${popIn} 0.35s ease both;
+    transition:
+        width 0.3s ease,
+        height 0.3s ease,
+        background-color 0.3s ease,
+        border-color 0.3s ease,
+        box-shadow 0.3s ease;
+
+    ${({ $state }) => StepIndicatorAppearance($state)}
+`
+
+export const StepSeparator = styled.div<TStepSeparatorProps>`
+    border-radius: ${radius.radius4}px;
+    overflow: hidden;
+    position: relative;
+    background-color: ${({ theme }) => parseColor(theme.colors.neutral400)};
+
+    ${({ $orientation }) =>
+        $orientation === 'vertical'
+            ? css`
+                width: 2px;
+                min-height: ${spacing.spacing8}px;
+                margin-left: 13px;
+            `
+            : css`
+                height: 2px;
+                flex: 1;
+                min-width: ${spacing.spacing16}px;
+                margin: 14px ${spacing.spacing4}px 0;
+            `}
+
+    &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: ${({ theme }) => parseColor(theme.colors.primary)};
+        border-radius: ${radius.radius4}px;
+
+        ${({ $completed, $orientation }) =>
+            $completed
+                ? $orientation === 'vertical'
+                    ? css`
+                        animation: ${fillLineV} 0.4s ease forwards;
+                    `
+                    : css`
+                        animation: ${fillLine} 0.4s ease forwards;
+                    `
+                : css`
+                    width: 0%;
+                    height: 0%;
+                `}
+    }
+`
+
+export const StepContent = styled.div<{ $orientation: 'horizontal' | 'vertical' }>`
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+`
+
+export const StepLabel = styled.strong<{ $active: boolean }>`
+    font-size: ${fontSize.fontSize14}px;
+    font-weight: ${({ $active }) =>
+        $active ? fontWeight.fontWeight600 : fontWeight.fontWeight400};
+    line-height: ${lineHeight.lineHeight20}px;
+    color: ${({ theme, $active }) =>
+        $active
+            ? parseColor(theme.colors.textDark)
+            : parseColor(theme.colors.textMedium)};
+    transition: color 0.3s ease;
+`
+
+export const StepDescription = styled.p`
+    font-size: ${fontSize.fontSize12}px;
+    font-weight: ${fontWeight.fontWeight400};
+    line-height: ${lineHeight.lineHeight20}px;
+    color: ${({ theme }) => parseColor(theme.colors.textMedium)};
+    margin: 0;
+`
+
+export const StepNumber = styled.span`
+    font-size: ${fontSize.fontSize14}px;
+    font-weight: ${fontWeight.fontWeight600};
+    line-height: 1;
+`

package/components/Stepper/Stepper.tsx

@@ -0,0 +1,118 @@
+import React from 'react'
+import { CheckFatIcon, WarningCircleIcon } from '@phosphor-icons/react'
+import * as S from './Stepper.styles'
+import { TStepperProps, StepState } from './Stepper.types'
+
+const getStepState = (index: number, currentStep: number): StepState => {
+    if (index < currentStep) return 'completed'
+    if (index === currentStep) return 'active'
+    return 'pending'
+}
+
+const StepIndicatorContent: React.FC<{ state: StepState; index: number }> = ({
+    state,
+    index,
+}) => {
+    if (state === 'completed') return <CheckFatIcon size={14} weight="fill" />
+    if (state === 'error') return <WarningCircleIcon size={14} weight="fill" />
+    if (state === 'active') return <S.StepNumber>{index + 1}</S.StepNumber>
+    return null
+}
+
+export const Stepper: React.FC<TStepperProps> = ({
+    steps,
+    currentStep,
+    orientation = 'horizontal',
+    className,
+}) => {
+    if (orientation === 'horizontal') {
+        return (
+            <S.StepperWrapper className={className} aria-label="stepper">
+                {steps.map((step, index) => {
+                    const state = getStepState(index, currentStep)
+                    const isLast = index === steps.length - 1
+                    return (
+                        <React.Fragment key={index}>
+                            <S.StepColumn>
+                                <S.StepIndicator
+                                    $state={state}
+                                    aria-label={`Etapa ${index + 1}: ${step.label}`}
+                                    aria-current={state === 'active' ? 'step' : undefined}
+                                >
+                                    <StepIndicatorContent state={state} index={index} />
+                                </S.StepIndicator>
+                                <S.StepLabelCell role="listitem" aria-current={state === 'active' ? 'step' : undefined}>
+                                    <S.StepLabel $active={state === 'active'}>
+                                        {step.label}
+                                    </S.StepLabel>
+                                    {step.description && (
+                                        <S.StepDescription>
+                                            {step.description}
+                                        </S.StepDescription>
+                                    )}
+                                </S.StepLabelCell>
+                            </S.StepColumn>
+                            {!isLast && (
+                                <S.StepSeparator
+                                    role="separator"
+                                    aria-hidden="true"
+                                    $completed={state === 'completed'}
+                                    $orientation="horizontal"
+                                />
+                            )}
+                        </React.Fragment>
+                    )
+                })}
+            </S.StepperWrapper>
+        )
+    }
+
+    return (
+        <S.StepperContainer
+            $orientation="vertical"
+            className={className}
+            role="list"
+            aria-label="stepper"
+        >
+            {steps.map((step, index) => {
+                const state = getStepState(index, currentStep)
+                const isLast = index === steps.length - 1
+                return (
+                    <S.StepperItem
+                        key={index}
+                        $orientation="vertical"
+                        role="listitem"
+                        aria-current={state === 'active' ? 'step' : undefined}
+                    >
+                        <S.StepBody $orientation="vertical">
+                            <S.StepIndicator
+                                $state={state}
+                                aria-label={`Etapa ${index + 1}: ${step.label}`}
+                            >
+                                <StepIndicatorContent state={state} index={index} />
+                            </S.StepIndicator>
+                            <S.StepContent $orientation="vertical">
+                                <S.StepLabel $active={state === 'active'}>
+                                    {step.label}
+                                </S.StepLabel>
+                                {step.description && (
+                                    <S.StepDescription>
+                                        {step.description}
+                                    </S.StepDescription>
+                                )}
+                            </S.StepContent>
+                        </S.StepBody>
+                        {!isLast && (
+                            <S.StepSeparator
+                                role="separator"
+                                aria-hidden="true"
+                                $completed={state === 'completed'}
+                                $orientation="vertical"
+                            />
+                        )}
+                    </S.StepperItem>
+                )
+            })}
+        </S.StepperContainer>
+    )
+}

package/components/Stepper/Stepper.types.ts

@@ -0,0 +1,27 @@
+export type StepperOrientation = 'horizontal' | 'vertical'
+export type StepState = 'completed' | 'active' | 'pending' | 'error'
+
+export type TStepItem = {
+    label: string
+    description?: string
+}
+
+export type TStepperProps = {
+    steps: TStepItem[]
+    currentStep: number
+    orientation?: StepperOrientation
+    className?: string
+}
+
+export type TStepIndicatorProps = {
+    $state: StepState
+}
+
+export type TStepSeparatorProps = {
+    $completed: boolean
+    $orientation: StepperOrientation
+}
+
+export type TStepperContainerProps = {
+    $orientation: StepperOrientation
+}

package/components/Stepper/index.ts

@@ -0,0 +1,7 @@
+export { Stepper } from './Stepper'
+export type { 
+  TStepperProps, 
+  TStepItem, 
+  StepperOrientation, 
+  StepState 
+} from './Stepper.types'

package/components/Tabs/Tabs.tsx

@@ -15,6 +15,8 @@ const Tabs: React.FC<TabsProps> = ({
             {items.map(item => (
                 <Button
                     key={item.key}
+                    aria-controls={`tab-${item.key}`}
+                    aria-selected={activeKey === item.key}
                     variant={activeKey === item.key ? 'solid' : 'neutralGhost'}
                     color={activeKey === item.key ? 'primary' : undefined}
                     size="sm"

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)};
+`