# 1DS — Design System da 1Doc (Vue 3)

> Biblioteca de 61 componentes Vue 3 da Softplan/1Doc, com design tokens
> próprios e 12 temas. Pacote `@1doc/1ds-vue` v2.5.0. Documentação viva em
> https://1ds.1doc.com.br/vue/latest/.

Regras que valem para qualquer código gerado com este design system:

- Use os componentes de `@1doc/1ds-vue`. Não use Tailwind, shadcn/ui, Material UI, Chakra ou Ant Design.
- Não escreva cor, espaçamento ou raio em hex/px. Use as variáveis `--umds-semantic-*` e `--umds-primitive-*`.
- Ícones vêm do componente `Icon` (Font Awesome). Não use lucide-react, heroicons ou phosphor.
- Cada página de componente abaixo tem uma seção "Quando NÃO usar" que nomeia a alternativa correta. Leia antes de escolher.

Específico do Vue, e diferente do que a convenção do framework sugere:

- Nenhum componente do 1DS Vue suporta `v-model`. Não há `defineEmits` no pacote.
- Callbacks são props: `:value` entra, `:onChange` sai, recebendo o valor já extraído.
- A prop de classe é `className`, não `class`.
- Props são camelCase no template: `ariaLabel`, `startIcon`, `tabIndex`.

## Componentes

- [Accordion](https://1ds.1doc.com.br/vue/latest/docs/Accordion.md): Accordion component — lista de painéis expansíveis (sanfona).
- [AIContent](https://1ds.1doc.com.br/vue/latest/docs/AIContent.md): AIContent — envolve conteúdo gerado por IA, marca visualmente enquanto ele é da IA, e tira a marca quando o usuário edita.
- [AILabel](https://1ds.1doc.com.br/vue/latest/docs/AILabel.md): AILabel — selo que marca conteúdo gerado por IA, com painel de explicabilidade.
- [Alert](https://1ds.1doc.com.br/vue/latest/docs/Alert.md): Componente Alert é utilizado para comunicar mensagens importantes que requerem a atenção imediata do usuário.
- [AppHeader](https://1ds.1doc.com.br/vue/latest/docs/AppHeader.md): Barra superior da aplicação.
- [AppHeaderAction](https://1ds.1doc.com.br/vue/latest/docs/AppHeaderAction.md): Botão de ação do cabeçalho: um ícone, opcionalmente com contador.
- [AppNavItem](https://1ds.1doc.com.br/vue/latest/docs/AppNavItem.md): AppNavItem — um item da navegação horizontal do `AppHeader`.
- [AppShell](https://1ds.1doc.com.br/vue/latest/docs/AppShell.md): AppShell — a moldura da aplicação: cabeçalho no topo, barra lateral à esquerda, conteúdo preenchendo o resto.
- [AppSidebar](https://1ds.1doc.com.br/vue/latest/docs/AppSidebar.md): AppSidebar — a navegação lateral da aplicação, que abre e fecha.
- [AppSubheader](https://1ds.1doc.com.br/vue/latest/docs/AppSubheader.md): AppSubheader — a segunda barra da aplicação, logo abaixo do `AppHeader`.
- [Avatar](https://1ds.1doc.com.br/vue/latest/docs/Avatar.md): Representação visual de uma pessoa ou entidade.
- [Badge](https://1ds.1doc.com.br/vue/latest/docs/Badge.md): Componente Badge para exibir status, rótulos e contagens.
- [BottomNavigation](https://1ds.1doc.com.br/vue/latest/docs/BottomNavigation.md): BottomNavigation — barra de navegação inferior mobile-first (achado do time mobile na simulação de adoção: Tabs não serve para bottom-nav sem hackear classes internas — indicador embaixo, sem ícone acima do label, itens sem flex:1). Itens com ícone acima do label, indicador NO TOPO do item ativo, alvos de toque ≥44px por padrão. Controlado (value/onChange) ou não-controlado (defaultValue).
- [BottomSheet](https://1ds.1doc.com.br/vue/latest/docs/BottomSheet.md): Painel que entra por baixo, para fluxos de mobile.
- [Box](https://1ds.1doc.com.br/vue/latest/docs/Box.md): Box — superfície com padding, fundo, borda e raio vindos dos tokens.
- [Breadcrumb](https://1ds.1doc.com.br/vue/latest/docs/Breadcrumb.md): Breadcrumb component — navegação estrutural (trilha de páginas).
- [Button](https://1ds.1doc.com.br/vue/latest/docs/Button.md): Button — botão de ação com variantes, tamanhos, ícones e estado de carregamento.
- [Card](https://1ds.1doc.com.br/vue/latest/docs/Card.md): Componente Card — container de conteúdo com header opcional.
- [Checkbox](https://1ds.1doc.com.br/vue/latest/docs/Checkbox.md): Componente Checkbox — caixa de seleção com suporte a estados marcado, indeterminado, inválido, sucesso e desabilitado.
- [Chips](https://1ds.1doc.com.br/vue/latest/docs/Chips.md): Chips component — rótulo interativo compacto, usado principalmente no MultiSelect e como tags removíveis.
- [ConfirmAIAction](https://1ds.1doc.com.br/vue/latest/docs/ConfirmAIAction.md): ConfirmAIAction — confirmação de ação sugerida por IA, escalonada por nível de risco.
- [ConfirmDialog](https://1ds.1doc.com.br/vue/latest/docs/ConfirmDialog.md): Componente ConfirmDialog — diálogo modal de confirmação.
- [Container](https://1ds.1doc.com.br/vue/latest/docs/Container.md): Container — centraliza o conteúdo e limita a largura máxima.
- [DataTable](https://1ds.1doc.com.br/vue/latest/docs/DataTable.md): DataTable component — tabela de dados com ordenação, seleção e estados de loading/vazio.
- [DatePicker](https://1ds.1doc.com.br/vue/latest/docs/DatePicker.md): DatePicker — filtro de período "de/até" com dois meses lado a lado.
- [Divider](https://1ds.1doc.com.br/vue/latest/docs/Divider.md): Divider component to separate content
- [Dropdown](https://1ds.1doc.com.br/vue/latest/docs/Dropdown.md): Dropdown component — menu de ações ancorado a um trigger.
- [EmptyState](https://1ds.1doc.com.br/vue/latest/docs/EmptyState.md): EmptyState component — estado vazio com ícone, título, descrição e ação opcional.
- [FileInput](https://1ds.1doc.com.br/vue/latest/docs/FileInput.md): FileInput component — campo de upload com drag-and-drop e lista de arquivos.
- [Grid](https://1ds.1doc.com.br/vue/latest/docs/Grid.md): Sistema de layout em colunas responsivas.
- [Icon](https://1ds.1doc.com.br/vue/latest/docs/Icon.md): Componente de ícone (Font Awesome) do 1DS — recebe o ícone como objeto importado do pacote Font Awesome e o desenha como SVG.
- [Input](https://1ds.1doc.com.br/vue/latest/docs/Input.md): Componente Input — campo de texto de linha única com rótulo, ícone à esquerda, botões de ação à direita, estados de erro/desabilitado/somente leitura e alternância de visibilidade para senhas.
- [Link](https://1ds.1doc.com.br/vue/latest/docs/Link.md): Link — âncora estilizada; renderiza <a> quando há href e <button> caso contrário (ou quando desabilitado).
- [Logo](https://1ds.1doc.com.br/vue/latest/docs/Logo.md): Marca da 1Doc.
- [Modal](https://1ds.1doc.com.br/vue/latest/docs/Modal.md): Componente Modal do 1DS — diálogo centralizado sobre um overlay escurecido, que bloqueia a página até ser fechado.
- [MultiSelect](https://1ds.1doc.com.br/vue/latest/docs/MultiSelect.md): Componente MultiSelect do 1DS — campo de seleção múltipla com busca.
- [PageHeader](https://1ds.1doc.com.br/vue/latest/docs/PageHeader.md): PageHeader component — cabeçalho padrão de páginas com breadcrumb, título, descrição e slot de ações.
- [Pagination](https://1ds.1doc.com.br/vue/latest/docs/Pagination.md): Pagination component — navegação entre páginas em 5 variantes (spec Figma): - "default": links Anterior/Próxima + campo para digitar a página + "de N".
- [PhoneInput](https://1ds.1doc.com.br/vue/latest/docs/PhoneInput.md): PhoneInput component — campo de telefone com seletor de país (bandeira + DDI) e botão de cópia do número completo.
- [Portal](https://1ds.1doc.com.br/vue/latest/docs/Portal.md): Utilitário que move o conteúdo para outro ponto do DOM.
- [ProgressBar](https://1ds.1doc.com.br/vue/latest/docs/ProgressBar.md): ProgressBar component — barra de progresso com variantes de cor e tamanhos.
- [Radio](https://1ds.1doc.com.br/vue/latest/docs/Radio.md): Componente Radio — botão de opção para seleção única dentro de um grupo.
- [Select](https://1ds.1doc.com.br/vue/latest/docs/Select.md): Componente Select — campo de seleção com dropdown, busca, seleção múltipla e paginação.
- [SidePanel](https://1ds.1doc.com.br/vue/latest/docs/SidePanel.md): Painel lateral da tela, com trilho de abas.
- [SidePanelItem](https://1ds.1doc.com.br/vue/latest/docs/SidePanelItem.md): Linha contada dentro de um `SidePanel` — ícone, nome e número.
- [SidePanelSearch](https://1ds.1doc.com.br/vue/latest/docs/SidePanelSearch.md): Campo de busca de um `SidePanel`.
- [SidePanelSection](https://1ds.1doc.com.br/vue/latest/docs/SidePanelSection.md): Rótulo de grupo dentro de um `SidePanel`, com ação opcional à direita.
- [Skeleton](https://1ds.1doc.com.br/vue/latest/docs/Skeleton.md): Skeleton é um placeholder exibido no lugar do conteúdo real durante o carregamento.
- [Spinner](https://1ds.1doc.com.br/vue/latest/docs/Spinner.md): Spinner component for loading states
- [Stack](https://1ds.1doc.com.br/vue/latest/docs/Stack.md): Stack — empilha os filhos com espaçamento da escala do DS.
- [StatCard](https://1ds.1doc.com.br/vue/latest/docs/StatCard.md): StatCard — cartão de indicador: um número grande, o que ele significa, e opcionalmente a variação.
- [Stepper](https://1ds.1doc.com.br/vue/latest/docs/Stepper.md): Stepper component — indicador de progresso em etapas (horizontal ou vertical).
- [Switch](https://1ds.1doc.com.br/vue/latest/docs/Switch.md): Interruptor de ligar/desligar, com efeito imediato.
- [Tabs](https://1ds.1doc.com.br/vue/latest/docs/Tabs.md): Propriedades do componente Tabs.
- [Tag](https://1ds.1doc.com.br/vue/latest/docs/Tag.md): Componente Tag para exibir rótulos, categorias e seleções.
- [Text](https://1ds.1doc.com.br/vue/latest/docs/Text.md): Componente tipográfico do 1DS — renderiza qualquer texto dentro da escala oficial.
- [Textarea](https://1ds.1doc.com.br/vue/latest/docs/Textarea.md): Componente Textarea — campo de texto multilinha com rótulo, contador de caracteres, redimensionamento automático e estados de erro/desabilitado/ somente leitura.
- [TimePicker](https://1ds.1doc.com.br/vue/latest/docs/TimePicker.md): TimePicker component — campo de horário com spinner de horas/minutos/segundos.
- [Toast](https://1ds.1doc.com.br/vue/latest/docs/Toast.md): Componente Toast — notificação temporária flutuante, renderizada via Portal na raiz do documento (não fica presa ao overflow do elemento pai).
- [Tooltip](https://1ds.1doc.com.br/vue/latest/docs/Tooltip.md): Rótulo flutuante de apoio, acionado por hover ou foco.
- [Tree](https://1ds.1doc.com.br/vue/latest/docs/Tree.md): Árvore hierárquica com expansão, seleção e teclado APG.

## Foundations

- [Tokens primitivos](https://1ds.1doc.com.br/vue/latest/docs/foundation/tokens-primitivos.md): Escalas cruas: cor, espaçamento, tipografia, raio, sombra, opacidade e breakpoints.
- [Tokens semânticos](https://1ds.1doc.com.br/vue/latest/docs/foundation/tokens-semanticos.md): Tokens com significado de uso.
- [Temas](https://1ds.1doc.com.br/vue/latest/docs/foundation/temas.md): Os temas disponíveis e as variáveis que cada um redefine.

## Guidelines

- [Formulários](https://1ds.1doc.com.br/vue/latest/docs/guidelines/formularios.md): Regras de composição de formulários com os componentes 1DS: Input, Textarea, Select, MultiSelect, Radio, Checkbox, Switch, DatePicker, TimePicker, FileInput.
- [IA no produto](https://1ds.1doc.com.br/vue/latest/docs/guidelines/ianoproduto.md): Regras para telas onde parte do conteúdo ou parte da decisão vem de um modelo.
- [Overlays](https://1ds.1doc.com.br/vue/latest/docs/guidelines/overlays.md): Quatro componentes de sobreposição, quatro trabalhos diferentes.
- [Paginação](https://1ds.1doc.com.br/vue/latest/docs/guidelines/paginacao.md): O `Pagination` tem cinco variantes.
- [Tokens](https://1ds.1doc.com.br/vue/latest/docs/guidelines/tokens.md): Como o `@1doc/1ds-tokens` está organizado e as regras para consumi-lo sem quebrar tematização, dark mode e acessibilidade.
- [Tooltips](https://1ds.1doc.com.br/vue/latest/docs/guidelines/tooltips.md): Tooltip **esclarece** um elemento visível — nunca carrega conteúdo essencial.

## Optional

- [llms-full.txt](https://1ds.1doc.com.br/vue/latest/llms-full.txt): todas as páginas acima concatenadas num arquivo só.
- [Storybook](https://1ds.1doc.com.br/vue/latest/): documentação navegável, com as stories executáveis.
- [Servidor MCP](https://1ds.1doc.com.br/): `npx @1doc/1ds-vue-mcp@latest` — mesmas informações por protocolo MCP, com busca por componente.