@liguelead/design-system 0.0.30 → 0.0.32

package/components/Alert/Alert.stories.tsx

@@ -6,55 +6,131 @@ const meta: Meta<typeof Alert> = {
   component: Alert,
   parameters: {
     layout: 'padded',
+    docs: {
+      description: {
+        component: `
+Componente de alerta para comunicar mensagens de feedback ao usuário.
+
+**Quando usar cada variante:**
+- \`default\` — informações gerais ou neutras
+- \`info\` — dicas, orientações ou informações complementares
+- \`success\` — confirmação de ação concluída com sucesso
+- \`warning\` — atenção necessária, mas não crítica
+- \`danger\` — erros, falhas ou ações destrutivas
+
+**Boas práticas:**
+- Use títulos curtos e objetivos
+- A descrição deve complementar, não repetir o título
+- Use \`hasButton\` apenas quando houver uma ação clara para o usuário
+        `,
+      },
+    },
   },
   tags: ['autodocs'],
   argTypes: {
     variant: {
       control: 'select',
       options: ['default', 'danger', 'warning', 'info', 'success'],
-      description: 'Visual style variant of the alert'
+      description: 'Variante visual do alerta',
+      table: { defaultValue: { summary: 'default' } },
     },
     title: {
       control: 'text',
-      description: 'Alert title'
+      description: 'Título do alerta (obrigatório)',
     },
     description: {
       control: 'text',
-      description: 'Alert description'
+      description: 'Descrição complementar do alerta',
     },
     hasButton: {
       control: 'boolean',
-      description: 'Whether to show action button'
+      description: 'Exibe botão de ação',
+      table: { defaultValue: { summary: 'false' } },
     },
     buttonLabel: {
       control: 'text',
-      description: 'Action button label'
+      description: 'Texto do botão de ação',
     },
     href: {
       control: 'text',
-      description: 'Action button link'
-    }
+      description: 'URL do botão de ação',
+    },
   },
 }
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Variants: Story = {
+export const Default: Story = {
+  args: {
+    title: 'Informação importante',
+    description: 'Esta é uma mensagem de alerta padrão.',
+  },
+}
+
+export const TodasVariantes: Story = {
+  name: 'Todas as variantes',
+  parameters: {
+    docs: { description: { story: 'Visão geral de todas as variantes disponíveis.' } },
+  },
   render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      <Alert variant="default" title="Default Alert" description="This is a default alert message." />
-      <Alert variant="info" title="Info Alert" description="This is an informational alert message." />
-      <Alert variant="success" title="Success Alert" description="This is a success alert message." />
-      <Alert variant="warning" title="Warning Alert" description="This is a warning alert message." />
-      <Alert variant="danger" title="Danger Alert" description="This is a danger alert message." />
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Alert variant="default" title="Default" description="Informação geral ou neutra." />
+      <Alert variant="info" title="Info" description="Dica ou orientação complementar." />
+      <Alert variant="success" title="Sucesso" description="Ação concluída com sucesso." />
+      <Alert variant="warning" title="Atenção" description="Requer atenção, mas não é crítico." />
+      <Alert variant="danger" title="Erro" description="Falha ou ação destrutiva detectada." />
     </div>
   ),
 }
 
-export const Default: Story = {
-  args: {
-    title: 'Alert Title',
-    description: 'This is an alert description.',
+export const ComBotao: Story = {
+  name: 'Com botão de ação',
+  parameters: {
+    docs: { description: { story: 'Use `hasButton` quando houver uma ação clara para o usuário tomar.' } },
   },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Alert variant="info" title="Nova versão disponível" description="Uma atualização está pronta para ser instalada." hasButton buttonLabel="Atualizar agora" href="#" />
+      <Alert variant="warning" title="Sessão expirando" description="Sua sessão expira em 5 minutos." hasButton buttonLabel="Renovar sessão" href="#" />
+      <Alert variant="danger" title="Falha no pagamento" description="Não foi possível processar seu pagamento." hasButton buttonLabel="Tentar novamente" href="#" />
+    </div>
+  ),
+}
+
+export const SemDescricao: Story = {
+  name: 'Sem descrição',
+  parameters: {
+    docs: { description: { story: 'Alertas podem ser usados apenas com título quando a mensagem é autoexplicativa.' } },
+  },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Alert variant="success" title="Salvo com sucesso." />
+      <Alert variant="danger" title="Erro ao carregar os dados." />
+    </div>
+  ),
+}
+
+export const ExemploFormulario: Story = {
+  name: 'Exemplo: Feedback de formulário',
+  parameters: {
+    docs: { description: { story: 'Padrão de uso em formulários para comunicar resultado de submissão.' } },
+  },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: 480 }}>
+      <Alert
+        variant="success"
+        title="Cadastro realizado com sucesso!"
+        description="Você receberá um e-mail de confirmação em breve."
+      />
+      <Alert
+        variant="danger"
+        title="Não foi possível salvar"
+        description="Verifique os campos obrigatórios e tente novamente."
+        hasButton
+        buttonLabel="Ver erros"
+        href="#"
+      />
+    </div>
+  ),
 }

package/components/Badge/Badge.stories.tsx

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { CheckCircleIcon, ArrowRightIcon, XCircleIcon, InfoIcon, WarningCircleIcon } from '@phosphor-icons/react'
+import { themes } from '@liguelead/foundation'
+import Badge from './Badge'
+
+const colorOptions = Object.keys(themes.spa.colors)
+
+const meta: Meta<typeof Badge> = {
+    title: 'Data Display/Badge',
+    component: Badge,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: `
+Badge compacto para destacar status, categorias ou contagens.
+
+**Props principais:**
+- \`color\` — qualquer token de cor do tema (ex: \`primary\`, \`danger200\`, \`secondary\`)
+- \`showLeftIcon\` / \`showRightIcon\` — exibe ícones nas extremidades
+                `,
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        color: {
+            control: 'select',
+            options: colorOptions,
+            description: 'Cor de fundo do badge (token do tema)',
+            table: { defaultValue: { summary: 'primary' } },
+        },
+        children: {
+            control: 'text',
+            description: 'Texto exibido no badge',
+            table: { defaultValue: { summary: 'Badge' } },
+        },
+        showLeftIcon: {
+            control: 'boolean',
+            description: 'Exibe ícone à esquerda',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        showRightIcon: {
+            control: 'boolean',
+            description: 'Exibe ícone à direita',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        leftIcon: { control: false },
+        rightIcon: { control: false },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        children: 'Ativo',
+        color: 'success50',
+    },
+}
+
+export const Danger: Story = {
+    args: {
+        children: 'Erro',
+        color: 'danger50',
+    },
+}
+
+export const Secondary: Story = {
+    args: {
+        children: 'Categoria',
+        color: 'warning50',
+    },
+}
+
+export const ComIconeEsquerdo: Story = {
+    name: 'Com ícone esquerdo',
+    args: {
+        children: 'Verificado',
+        color: 'success50',
+        showLeftIcon: true,
+        leftIcon: <CheckCircleIcon size={16} />,
+    },
+}
+
+export const ComIconeDireito: Story = {
+    name: 'Com ícone direito',
+    args: {
+        children: 'Ver mais',
+        color: 'success50',
+        showRightIcon: true,
+        rightIcon: <ArrowRightIcon size={16} />,
+    },
+}
+
+export const TodasAsCores: Story = {
+    name: 'Exemplo: Status de pedido',
+    render: () => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, fontFamily: 'Manrope, sans-serif' }}>
+            {[
+                { id: '#1042', status: 'Aprovado', color: 'primary' as const, icon: <CheckCircleIcon size={16} /> },
+                { id: '#1043', status: 'Pendente', color: 'warning100' as const, icon: <InfoIcon size={16} /> },
+                { id: '#1044', status: 'Cancelado', color: 'danger200' as const, icon: <XCircleIcon size={16} /> },
+                { id: '#1045', status: 'Em análise', color: 'secondary' as const, icon: <WarningCircleIcon size={16} /> },
+            ].map(({ id, status, color, icon }) => (
+                <div key={id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', border: '1px solid #e5e7eb', borderRadius: 6, width: 280 }}>
+                    <span style={{ fontSize: 14, color: '#374151' }}>Pedido {id}</span>
+                    <Badge color={color} showLeftIcon leftIcon={icon}>{status}</Badge>
+                </div>
+            ))}
+        </div>
+    ),
+}

package/components/Badge/Badge.styles.ts

@@ -0,0 +1,36 @@
+import styled, { DefaultTheme } from 'styled-components'
+import { spacing, fontSize, fontWeight, lineHeight, radius } from '@liguelead/foundation'
+import { getTextColor, parseColor } from '../../utils'
+import { colorType } from '../../types'
+
+const getBadgeColors = (theme: DefaultTheme, color: colorType) => {
+    const parsedColor = parseColor(theme.colors[color])
+    return {
+        background: parsedColor,
+        text: parseColor(theme.colors[getTextColor(parsedColor)]),
+    }
+}
+
+export const StyledBadge = styled.span<{ $color: colorType }>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${spacing.spacing4}px;
+  padding: ${spacing.spacing2}px ${spacing.spacing8}px;
+  border-radius: ${radius.radius4}px;
+  font-size: ${fontSize.fontSize12}px;
+  font-weight: ${fontWeight.fontWeight500};
+  line-height: ${lineHeight.lineHeight16}px;
+  font-family: Manrope, sans-serif;
+  white-space: nowrap;
+
+  background-color: ${({ theme, $color }) => getBadgeColors(theme, $color).background};
+
+  color: ${({ theme, $color }) => getBadgeColors(theme, $color).text};
+
+  & svg {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+  }
+`

package/components/Badge/Badge.tsx

@@ -0,0 +1,23 @@
+import { StyledBadge } from './Badge.styles'
+import { TBadgeProps } from './Badge.types'
+
+const Badge = ({
+  children = 'Badge',
+  className,
+  color = 'primary',
+  leftIcon,
+  rightIcon,
+  showLeftIcon = false,
+  showRightIcon = false,
+}: TBadgeProps) => {
+
+  return (
+    <StyledBadge $color={color} className={className}>
+      {showLeftIcon && leftIcon}
+      {children}
+      {showRightIcon && rightIcon}
+    </StyledBadge>
+  )
+}
+
+export default Badge

package/components/Badge/Badge.types.ts

@@ -0,0 +1,11 @@
+import { colorType } from "../../types"
+
+export type TBadgeProps = {
+  children?: React.ReactNode
+  className?: string
+  leftIcon?: React.ReactNode
+  rightIcon?: React.ReactNode
+  showLeftIcon?: boolean
+  showRightIcon?: boolean
+  color?: colorType
+}

package/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge'
+export type { TBadgeProps } from './Badge.types'

package/components/Button/Button.appearance.ts

@@ -75,7 +75,7 @@ export const ButtonVariant = (
         neutralOutline: `
         background-color: transparent;
         color: ${parseColor(theme.colors.textDark)};
-        border: 1px solid ${parseColor(theme.colors.neutral900)};
+        border: 1px solid ${parseColor(theme.colors.neutral400)};
 
         &:hover {
             background-color: ${parseColor(theme.colors.primaryDarker)};

package/components/Button/Button.stories.tsx

@@ -1,15 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { themes } from '@liguelead/foundation'
+import { PlusIcon, ArrowRightIcon, TrashIcon } from '@phosphor-icons/react'
 import Button from './Button'
 import type { ButtonVariantTypes } from './Button.types'
 
 const themeColors = Object.keys(themes.spa.colors)
 const buttonVariantOptions: ButtonVariantTypes[] = [
-  'solid',
-  'outline',
-  'ghost',
-  'neutralOutline',
-  'neutralGhost'
+  'solid', 'outline', 'ghost', 'neutralOutline', 'neutralGhost',
 ]
 
 const meta: Meta<typeof Button> = {
@@ -17,35 +14,53 @@ const meta: Meta<typeof Button> = {
   component: Button,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component: `
+Botão de ação principal do design system.
+
+**Quando usar cada variante:**
+- \`solid\` — ação primária da tela (ex: Salvar, Confirmar)
+- \`outline\` — ação secundária com destaque (ex: Editar)
+- \`ghost\` — ação terciária ou em contextos com fundo colorido
+- \`neutralOutline\` / \`neutralGhost\` — ações neutras, cancelar, voltar
+        `,
+      },
+    },
   },
   tags: ['autodocs'],
   argTypes: {
     variant: {
       control: 'select',
       options: buttonVariantOptions,
-      description: 'Visual style variant of the button',
+      description: 'Variante visual do botão',
+      table: { defaultValue: { summary: 'solid' } },
     },
     size: {
       control: 'select',
       options: ['sm', 'md', 'lg'],
-      description: 'Size of the button',
+      description: 'Tamanho do botão',
+      table: { defaultValue: { summary: 'md' } },
     },
     color: {
       control: 'select',
       options: themeColors,
-      description: 'Color theme of the button',
+      description: 'Cor do botão baseada nos tokens do tema',
+      table: { defaultValue: { summary: 'primary' } },
     },
     disabled: {
       control: 'boolean',
-      description: 'Whether the button is disabled',
+      description: 'Desabilita o botão',
+      table: { defaultValue: { summary: 'false' } },
     },
     fullWidth: {
       control: 'boolean',
-      description: 'Whether the button takes full width',
+      description: 'Ocupa 100% da largura do container',
+      table: { defaultValue: { summary: 'false' } },
     },
     children: {
       control: 'text',
-      description: 'Button content',
+      description: 'Conteúdo do botão',
     },
   },
 }
@@ -54,17 +69,16 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  args: {
-    children: 'Button',
-  },
+  args: { children: 'Confirmar' },
 }
 
-export const Variants: Story = {
-  args: {
-    children: 'Button',
+export const Variantes: Story = {
+  name: 'Todas as variantes',
+  parameters: {
+    docs: { description: { story: 'Todas as variantes disponíveis com a cor primária.' } },
   },
   render: (args) => (
-    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
       <Button {...args} variant="solid">Solid</Button>
       <Button {...args} variant="outline">Outline</Button>
       <Button {...args} variant="ghost">Ghost</Button>
@@ -73,3 +87,70 @@ export const Variants: Story = {
     </div>
   ),
 }
+
+export const Tamanhos: Story = {
+  name: 'Tamanhos',
+  parameters: {
+    docs: { description: { story: 'Três tamanhos disponíveis: `sm`, `md` e `lg`.' } },
+  },
+  render: () => (
+    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+      <Button size="sm">Pequeno</Button>
+      <Button size="md">Médio</Button>
+      <Button size="lg">Grande</Button>
+    </div>
+  ),
+}
+
+export const Desabilitado: Story = {
+  name: 'Estado desabilitado',
+  parameters: {
+    docs: { description: { story: 'Estado `disabled` em todas as variantes.' } },
+  },
+  render: () => (
+    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+      <Button disabled variant="solid">Solid</Button>
+      <Button disabled variant="outline">Outline</Button>
+      <Button disabled variant="ghost">Ghost</Button>
+    </div>
+  ),
+}
+
+export const LarguraTotal: Story = {
+  name: 'Largura total',
+  parameters: {
+    docs: { description: { story: 'Use `fullWidth` em formulários ou containers de largura definida.' } },
+  },
+  render: () => (
+    <div style={{ width: 320 }}>
+      <Button fullWidth>Entrar</Button>
+    </div>
+  ),
+}
+
+export const ComIcones: Story = {
+  name: 'Com ícones',
+  parameters: {
+    docs: { description: { story: 'Combine com ícones do Phosphor para reforçar a ação.' } },
+  },
+  render: () => (
+    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
+      <Button><PlusIcon size={16} /> Adicionar</Button>
+      <Button variant="outline">Próximo <ArrowRightIcon size={16} /></Button>
+      <Button variant="ghost" color="danger200"><TrashIcon size={16} /> Excluir</Button>
+    </div>
+  ),
+}
+
+export const ExemploFormulario: Story = {
+  name: 'Exemplo: Rodapé de formulário',
+  parameters: {
+    docs: { description: { story: 'Padrão comum de ações em formulários: ação primária + cancelar.' } },
+  },
+  render: () => (
+    <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', padding: 16, border: '1px solid #e5e7eb', borderRadius: 8, width: 400 }}>
+      <Button variant="neutralGhost">Cancelar</Button>
+      <Button variant="solid">Salvar alterações</Button>
+    </div>
+  ),
+}

package/components/Checkbox/Checkbox.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
 import Checkbox from './Checkbox'
 
 const meta: Meta<typeof Checkbox> = {
@@ -6,29 +7,48 @@ const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component: `
+Checkbox para seleção de uma ou múltiplas opções independentes.
+
+**Quando usar:**
+- Seleção múltipla em listas de opções
+- Aceite de termos e condições
+- Filtros que podem ser combinados
+
+**Não usar para:**
+- Seleção exclusiva (use RadioButton)
+- Ativar/desativar configurações em tempo real (use Toggle)
+        `,
+      },
+    },
   },
   tags: ['autodocs'],
   argTypes: {
     label: {
       control: 'text',
-      description: 'Checkbox label'
+      description: 'Texto do label do checkbox',
     },
     description: {
       control: 'text',
-      description: 'Checkbox description'
+      description: 'Descrição complementar abaixo do label',
     },
     checked: {
       control: 'boolean',
-      description: 'Whether checkbox is checked'
+      description: 'Estado marcado do checkbox',
+      table: { defaultValue: { summary: 'false' } },
     },
     disabled: {
       control: 'boolean',
-      description: 'Whether checkbox is disabled'
+      description: 'Desabilita o checkbox',
+      table: { defaultValue: { summary: 'false' } },
     },
     $hasError: {
       control: 'boolean',
-      description: 'Whether checkbox has error state'
-    }
+      description: 'Estado de erro',
+      table: { defaultValue: { summary: 'false' } },
+    },
   },
 }
 
@@ -37,6 +57,86 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    label: 'Checkbox Label',
+    label: 'Aceito os termos de uso',
+  },
+}
+
+export const ComDescricao: Story = {
+  name: 'Com descrição',
+  parameters: {
+    docs: { description: { story: 'Use a descrição para dar contexto adicional à opção.' } },
+  },
+  args: {
+    label: 'Receber notificações',
+    description: 'Enviaremos atualizações sobre sua conta por e-mail.',
+  },
+}
+
+export const Marcado: Story = {
+  name: 'Estado marcado',
+  args: {
+    label: 'Opção selecionada',
+    checked: true,
+  },
+}
+
+export const Desabilitado: Story = {
+  name: 'Estado desabilitado',
+  parameters: {
+    docs: { description: { story: 'Estado desabilitado — marcado e desmarcado.' } },
+  },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Checkbox label="Desabilitado desmarcado" disabled />
+      <Checkbox label="Desabilitado marcado" disabled checked />
+    </div>
+  ),
+}
+
+export const ComErro: Story = {
+  name: 'Estado de erro',
+  parameters: {
+    docs: { description: { story: 'Use para indicar que o campo é obrigatório e não foi preenchido.' } },
+  },
+  args: {
+    label: 'Aceito os termos de uso',
+    $hasError: true,
+  },
+}
+
+export const ExemploGrupo: Story = {
+  name: 'Exemplo: Grupo de checkboxes',
+  parameters: {
+    docs: { description: { story: 'Padrão de uso em formulários com múltiplas opções selecionáveis.' } },
+  },
+  render: () => {
+    const [selected, setSelected] = useState<string[]>(['email'])
+    const options = [
+      { value: 'email', label: 'E-mail', description: 'Notificações por e-mail' },
+      { value: 'sms', label: 'SMS', description: 'Mensagens de texto' },
+      { value: 'push', label: 'Push', description: 'Notificações no app' },
+    ]
+
+    const toggle = (value: string) =>
+      setSelected(prev =>
+        prev.includes(value) ? prev.filter(v => v !== value) : [...prev, value]
+      )
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <p style={{ fontSize: 14, fontWeight: 600, marginBottom: 4, fontFamily: 'Manrope, sans-serif' }}>
+          Canais de notificação
+        </p>
+        {options.map(opt => (
+          <Checkbox
+            key={opt.value}
+            label={opt.label}
+            description={opt.description}
+            checked={selected.includes(opt.value)}
+            onChange={() => toggle(opt.value)}
+          />
+        ))}
+      </div>
+    )
   },
 }

package/components/DatePicker/DatePicker.styles.ts

@@ -197,6 +197,7 @@ export const DatePickerContent = styled(Popover.Content)`
         0 1px 3px 0 rgba(0, 0, 0, 0.10),
         0 1px 2px -1px rgba(0, 0, 0, 0.10);
     min-width: 240px;
+    z-index: 9999;
 `
 
 export const CalendarWrapper = styled.div<{$singleMonth: boolean}>`