Catálogo
Visão geral e exploração dos itens registrados no Up Web DS.
Derivado dos arquivos *.meta.ts. Nada aqui é uma lista mantida à mão.
Total83
Incoming0
Experimental0
Stable83
Deprecated0
Últimos adicionados
Distribuição
- Primitives
- 61
- Recipes
- 6
- Components
- 14
- Patterns
- 1
- Blocks
- 0
- Templates
- 1
Catálogo
83 itens
Primitives61
- AccordionStablePrimitive de disclosure: uma pilha de cabeçalhos em que cada um revela o seu painel. Composto sobre Base UI Accordion; a abertura transiciona a altura pela escala de motion da Foundation, então reduced motion a colapsa sem desligar o disclosure.PrimitiveDisclosure
- AlertStablePrimitive de feedback para mensagens que permanecem no fluxo da página: informação ou falha que pede ação. Aceita ícone, título, descrição e uma ação compacta no canto. O papel de live region acompanha a variante — status para informação, alert para falha — e a variante destrutiva usa a superfície discreta da Foundation, não a cor sólida como texto.PrimitiveFeedback
- Alert DialogStableDialog que se recusa a ser dispensado por acidente: sem botão de fechar no canto, sem clique fora, e com o foco começando na escolha segura — a ação destrutiva fica a um Tab, nunca a um Enter. Composto sobre Base UI AlertDialog e sobre o Button do Up Web DS. Esse custo só se paga por uma decisão que não dá para desfazer; tudo o mais pertence ao Dialog.PrimitiveOverlay
- AndroidStableA mockup of an Android device.PrimitiveData Display
- Aspect RatioStableReserva a caixa que uma mídia vai ocupar antes de ela chegar, para que a página não reflua quando a imagem decodifica.PrimitiveLayout
- AttachmentStableUm arquivo mostrado como card, no estado em que o envio está. O estado vive na raiz e todas as partes o leem de lá.PrimitiveData Display
- AutocompleteStableCampo de texto que sugere enquanto a pessoa digita: a lista estreita a cada tecla, escolher uma sugestão a escreve no campo, e texto livre continua sendo resposta válida. Composto sobre Base UI Autocomplete e sobre o Input e o ScrollArea do Up Web DS, com escala de tamanho, addon inicial, gatilho e limpeza. A diferença para o Combobox é o valor: no Combobox ele precisa ser uma das opções; aqui o valor é o texto, e a lista só sugere — use-o para busca e para campos que aceitam o que a lista não conhece. É também a base do Command.PrimitiveInput
- AvatarStableMoldura circular para retrato, com fallback de iniciais, badge de status, agrupamento e contagem. Composto sobre Base UI Avatar. Quase tudo o que dá errado num avatar dá errado na árvore de acessibilidade e não na tela: iniciais lidas em voz alta são letras, não uma pessoa — por isso o fallback aceita `label`, que esconde as iniciais e anuncia o nome no lugar delas.PrimitiveData Display
- BadgeStablePrimitive compacto de status e rótulo. Renderiza um span por padrão e assume qualquer elemento através de `render`.PrimitiveData Display
- BreadcrumbStablePrimitive de navegação que indica a hierarquia de localização do usuário dentro da aplicação. Composto por links ou texto puro, facilita a navegação reversa e suporta delimitadores customizáveis.PrimitiveNavigation
- ButtonStableO primitive canônico de ação. A intenção semântica vive em `variant` e a densidade em `size`; tratamentos decorativos pertencem a recipes construídas sobre ele.PrimitiveAction
- Button GroupStableJunta controles numa forma só: achata os cantos internos, colapsa as bordas dobradas e eleva quem está com foco acima dos vizinhos para o anel não ser cortado. É só desenho — não adiciona foco itinerante, papel nem estado compartilhado, e cada controle dentro mantém o próprio Tab stop. Juntar é uma afirmação de que aquilo age sobre o mesmo objeto; um conjunto em que só um pode estar ativo é Toggle ou RadioGroup, não isto.PrimitiveLayout
- CalendarStableGrade de datas para escolher um dia, um período ou várias datas. Composto sobre React DayPicker 10, cuja API é a do componente: `mode` single, range ou multiple, `disabled` com matchers, `captionLayout="dropdown"` para mês e ano, `numberOfMonths`, números de semana. Mantém os padrões do Coss — dias dos meses vizinhos visíveis e modo single — e traduz pelo `locale` do DayPicker, que nomeia meses, dias da semana, cada dia e as setas. `classNames`, `formatters` e `components` passados somam aos padrões em vez de substituí-los. Use para escolher data dentro de uma página ou de um Popover; para ler uma agenda de entregas por mês, use Roadmap Calendar.PrimitiveSelection
- CardStableSuperfície que agrupa coisas que pertencem juntas, com header, ação no cabeçalho, conteúdo e rodapé. A elevação é declarada uma vez — hairline e passo tonal, sem sombra —, porque um card fica sobre a página em vez de flutuar sobre ela. O título é um div por padrão: o card não sabe em que documento vai cair, e `headingLevel` é como a página pede um heading de verdade.PrimitiveLayout
- CheckboxStablePrimitive de seleção binária, com estado misto para o caso de um pai que controla um grupo. Composto sobre Base UI Checkbox; a área tocável se estende além da caixa de 16px sem deslocar o layout ao redor.PrimitiveSelection
- CollapsibleStablePrimitive de disclosure para expandir e contrair áreas de conteúdo. Controlado por um estado interno ou externo, gerencia a acessibilidade via atributos ARIA e suporta animações de altura.PrimitiveDisclosure
- ComboboxStableCampo em que a pessoa digita até a lista, com grupos, limpeza e seleção múltipla em chips. Composto sobre Base UI Combobox e sobre o InputGroup e o Button do Up Web DS. O Select mostra uma lista; o combobox deixa digitar dentro dela — o que só compensa depois do ponto em que varrer com os olhos para de funcionar, e cobra um preço real: o campo passa a aceitar texto que não casa com nada, então o estado vazio faz parte do contrato.PrimitiveSelection
- CommandStablePaleta de comandos: uma busca sobre coisas a fazer e lugares aonde ir, conduzida pelo teclado — digitar estreita, as setas percorrem, Enter executa. É um Autocomplete sempre aberto que lista no lugar, com o primeiro resultado sempre destacado, e vive dentro de um dialog (CommandDialog, sobre Base UI Dialog) ou inline na página, com grupos, atalhos por linha e rodapé. Use o Command para executar ações e navegar; para escolher um valor de formulário, use o Combobox ou o Autocomplete.PrimitiveAction
- Context MenuStableO mesmo menu do Dropdown, invocado pelo objeto em vez de por um botão: clique secundário, pressão longa ou a tecla de menu da plataforma. Composto sobre Base UI ContextMenu. O risco do primitive é justamente não ter gatilho visível, então nenhuma ação pode existir só aqui — o menu é o atalho, não a rota.PrimitiveOverlay
- DeckStablePilha de cartas descartadas uma a uma, no estilo Tinder: arraste a carta do topo para a esquerda ou para a direita, ou foque nela e use as setas. Preserva a API do Kibo — índice controlado ou não, limiar do arraste, tamanho e escala da pilha, animação na troca externa de índice. A normalização acrescentou o que o upstream deixava só para o ponteiro: teclado, foco que segue para a próxima carta, só a carta do topo na árvore de acessibilidade e a política de reduced motion.PrimitiveData Display
- DialogStableOverlay modal com trigger, título, descrição, corpo rolável, rodapé e fechamento. Composto sobre Base UI Dialog e sobre o Button do Up Web DS.PrimitiveOverlay
- DockStableUma barra de ícones que crescem quando o ponteiro se aproxima, no estilo do dock do macOS. O Dock só mede e amplia: o que se opera é o controle dentro de cada DockIcon — um link quando leva a algum lugar, um botão quando faz algo —, com nome acessível próprio. O foco por teclado amplia como o ponteiro; toque e movimento reduzido mantêm os ícones no tamanho de repouso.PrimitiveNavigation
- DrawerStableSuperfície de borda que se pega: acompanha o dedo um para um, assenta proporcional à força do gesto, empilha quando outra abre por cima e para em snap points. Composto sobre Base UI Drawer. O Sheet e o Drawer ancoram na mesma borda, e escolher entre eles não é gosto — a camada de gesto só se paga quando o toque é a via principal; fora disso o Sheet é a resposta honesta.PrimitiveOverlay
- Dropdown MenuStableMenu de ações ancorado a um gatilho, com grupos, rótulos, submenus, itens de checkbox e de rádio. Composto sobre Base UI Menu. A diferença para o Popover não é visual: um menu tem papel `menu`, foco itinerante pelas setas e typeahead, e dentro dele Tab sai em vez de andar entre campos — por isso uma lista de ações mora aqui e um formulário não.PrimitiveOverlay
- Elastic SliderStableSlider de um valor que se comporta como um controle físico: o preenchimento vai com mola até onde foi pressionado, um toque perto de um décimo encaixa nele e arrastar além das pontas estica a trilha como um elástico. O rótulo e o valor são desenhados dentro da trilha, que inteira é o controle; faixas de até dez posições mostram cada passo e encaixam em todos eles.PrimitiveSelection
- EmptyStableEstado vazio com mídia opcional, título, descrição e ação. Existem três estados vazios e eles não são intercambiáveis: nada foi criado ainda é um convite e ganha a ação; um filtro não achou nada é um beco que a pessoa construiu e ganha um caminho de volta; algo não é permitido deve uma explicação e um próximo passo que não seja "tentar de novo". A moldura é decisão de quem usa — um estado vazio dentro de um painel já emoldurado não quer uma segunda caixa.PrimitiveFeedback
- HighlighterStableUma marca desenhada à mão sobre um trecho de texto — marca-texto, sublinhado, caixa, círculo, risco, X ou colchetes —, com o traço animado uma vez. O texto não é tocado: continua um só nó, na ordem de leitura, com a própria cor; a marca é um SVG ao lado dele, fora da árvore de acessibilidade. As cores padrão acompanham o tema, e o marca-texto mantém o texto legível em AA no claro e no escuro.PrimitiveData Display
- Hover CardStablePrévia ancorada a um link, aberta por hover ou foco. Composto sobre Base UI PreviewCard — e o nome de lá descreve melhor o contrato: ela adianta algo que o gatilho já leva. O gatilho continua sendo um link real, então tudo que a prévia mostra também é alcançável sem ela.PrimitiveOverlay
- InputStableCampo de texto de uma linha. Composto sobre Base UI Input, então uma aplicação consumidora pode envolvê-lo em um Field e receber rótulo, descrição e estado de validação sem que o primitive saiba que o Field existe.PrimitiveInput
- Input GroupStableUm campo só feito de vários elementos: a borda, o anel de foco e o estado inválido pertencem ao invólucro, e o controle dentro abre mão dos três. A pessoa vê uma caixa, e o anel cerca a caixa em vez de cercar o input. O invólucro é um div e não nomeia nada, então quem carrega o rótulo continua sendo o controle. Compõe Input, Textarea e Button do Up Web DS.PrimitiveInput
- IphoneStableA mockup of the iPhonePrimitiveData Display
- ItemStableLinha de lista: mídia, título, descrição e ações no fim, em três variantes e três densidades. A decisão que ele carrega é o que a linha É. Como div, é um contêiner e os controles dentro são os alvos; como `a` ou `button`, ela vira um alvo só, e aí nada focalizável pode morar dentro — um botão dentro de um link é um alvo que o teclado alcança e o ponteiro não consegue mirar com honestidade.PrimitiveData Display
- KbdStablePrimitive de exibição para teclas e atalhos de teclado. Renderiza um <kbd> real, e o KbdGroup aninha as teclas de uma combinação como a especificação HTML pede. Funciona em texto corrido, dentro de botões e dentro do Tooltip, onde inverte junto com a superfície.PrimitiveData Display
- LabelStablePrimitive de rótulo para controles de formulário. Um <label> nativo associado por htmlFor, que dá nome ao controle e o ativa quando pressionado — foco num campo de texto, alternância num checkbox. O estado desabilitado acompanha o controle, lido do peer ou do grupo, em vez de ser uma prop que poderia discordar dele.PrimitiveInput
- LensStableUma lupa que segue o ponteiro sobre o conteúdo que ela cobre: um círculo que mostra a mesma área ampliada, sem tirar nada de lugar. Serve para detalhe — a textura de um produto, um trecho de um gráfico, o recorte de uma captura de tela. A cópia ampliada é a mesma coisa duas vezes, então ela fica fora da árvore de acessibilidade; o conteúdo embaixo continua inteiro.PrimitiveData Display
- MenubarStableBarra de comandos persistente de uma aplicação. Composto sobre Base UI Menubar e sobre o DropdownMenu do Up Web DS, que fornece todo o interior — o menubar não reimplementa item, submenu nem estado. O que ele acrescenta é ser um controle só: a página gasta um único Tab stop, as setas andam entre os menus, e com um menu aberto ir para o lado abre o vizinho sem clique.PrimitiveNavigation
- Mini CalendarStableUma tira curta de dias consecutivos em volta de hoje, para escolher uma data que está perto — a entrega dos próximos cinco dias, o turno depois deste. É um date picker sem o calendário: não há grade de mês para abrir e nada alcança uma data longe da que está na tela. Preserva a API do Kibo. Duas peças de estado independentes: qual dia está escolhido e onde a janela está; cada uma pode ser do chamador ou do componente, e nenhuma mexe na outra.PrimitiveSelection
- Number FieldStableCampo para um número exato, com botões de diminuir e aumentar nas pontas. Composto sobre Base UI Number Field, que interpreta o que foi digitado na localidade, respeita min, max e step e formata por Intl.NumberFormat (moeda, porcentagem). A caixa usa a mesma altura, borda, anel de foco e estado inválido do Input, e o NumberFieldScrubArea compõe o Label como rótulo que também ajusta o valor ao ser arrastado. Use quando o valor é contado ou medido e a precisão importa; para texto livre use Input, e para escolher uma posição aproximada num intervalo use Slider.PrimitiveInput
- OTP FieldStableCódigo de uso único, um caractere por casa. Composto sobre Base UI OTP Field, que avança o foco ao digitar, volta com Backspace, preenche todas as casas ao colar e marca a primeira casa com autocomplete="one-time-code", para o código de um SMS entrar num toque. Cada casa usa a borda, o anel de foco e o estado inválido do Input, e o OTPFieldSeparator compõe o Separator entre grupos. Use para códigos de verificação, autenticação em dois fatores e PINs curtos de tamanho fixo; para qualquer outro texto use Input.PrimitiveInput
- PopoverStableSuperfície ancorada e não modal, com header, título e descrição. Composto sobre Base UI Popover. A diferença para o Dialog é a proteção: aqui a página atrás continua viva e a superfície pode ser abandonada com um clique fora, então uma decisão que precisa ser concluída antes de seguir pertence ao Dialog. A diferença para o Tooltip é que aqui cabe o cursor.PrimitiveOverlay
- ProgressStablePrimitive de feedback que mostra o quanto uma tarefa já avançou. Composto sobre Base UI Progress, é um progressbar e não um medidor: o valor caminha para um fim. Nome e valor são o que a barra não consegue mostrar sozinha, então o rótulo é ligado automaticamente, o valor é falado na unidade da tarefa e o estado indeterminado (value={null}) preenche a trilha em intensidade menor, para não se passar por vazio nem por concluído.PrimitiveFeedback
- Radio GroupStableUma resposta dentre um conjunto conhecido. Composto sobre Base UI RadioGroup. É um controle só feito de vários elementos: o grupo custa um Tab stop, e dentro dele as setas movem e escolhem ao mesmo tempo. Não há caminho de volta para "nada" — uma pergunta genuinamente opcional precisa de uma opção explícita, não de um grupo vazio. Passando de seis ou sete opções, o Select passa a economizar mais do que custa.PrimitiveSelection
- ResizableStablePrimitive de layout para painéis que o usuário redimensiona arrastando, ou pelo teclado, a borda entre eles. Composto sobre react-resizable-panels, que guarda o layout em porcentagens e expõe cada borda como um separator focável; o grupo ocupa a caixa que o envolve, em linha ou em coluna, e pode ser aninhado.PrimitiveLayout
- Roadmap CalendarStableGrade mensal de features — um roadmap, um calendário de lançamentos —, cada uma desenhada no dia em que termina, com seletores de mês e ano e setas de navegação. É para ler, não para escolher data. Preserva a API do Kibo. Traduz como o React DayPicker 10: `locale` nomeia meses, dias da semana e cada dia via Intl, e `labels` traz as strings fixas, só as que mudam.PrimitiveData Display
- SafariStableA safari browser mockup to showcase your website.PrimitiveData Display
- Scroll AreaStablePrimitive de layout para uma região rolável cujas barras pertencem ao design system. Composto sobre Base UI Scroll Area: a rolagem continua nativa — roda, toque e teclado —, e a barra do navegador dá lugar a uma barra fina no mesmo tom de scrollbar-quiet. As barras são escolhidas por eixo com scrollbars e ficam ao lado do viewport, não dentro dele. Tamanho, borda e raio são de quem usa, e o anel de foco é desenhado no mesmo elemento que carrega o raio.PrimitiveLayout
- Segmented ControlStableUma escolha entre poucas opções, com todas visíveis ao mesmo tempo. Compartilha a escala de altura com o Tabs. É primitive e não recipe: o que ele acrescenta é semântica própria — grupo nomeado de seleção única com foco itinerante e tamanho que desce por contexto — não uma aparência de outro primitive. Para uma barra de ferramentas ou seleção múltipla, feita de toggles com a forma do Button, use o Toggle Group.PrimitiveNavigation
- SelectStableCampo de seleção com trigger, popup em listbox, grupos, rótulos e separadores. Composto sobre Base UI Select; a escolha é reportada pelo rótulo do item, não pelo valor bruto.PrimitiveSelection
- SeparatorStableRégua de um pixel entre duas coisas, horizontal ou vertical. Composto sobre Base UI Separator. A única decisão que ele carrega não é visual: se apagar a régua fundiria duas coisas que significam coisas diferentes, ela é estrutura e o leitor de tela deve ouvi-la; se apagá-la só deixaria o layout mais apertado, ela é decoração e `decorative` a tira da árvore de acessibilidade.PrimitiveLayout
- SheetStableDialog ancorado a uma borda da viewport, com header e footer fixos e um corpo que rola. Composto sobre Base UI Dialog e sobre o Button do Up Web DS. A borda é o argumento para usá-lo: ele segura trabalho secundário — filtros, detalhes, navegação — sem fingir que a página embaixo sumiu. Quando o conteúdo é uma decisão em vez de um lugar, o Dialog centralizado diz isso melhor.PrimitiveOverlay
- SkeletonStablePlaceholder com a forma do conteúdo que ainda não chegou. Só vale desenhar quando essa forma é conhecida: uma caixa cinza genérica diz "espere", uma caixa do tamanho do parágrafo diz onde ele vai ficar e impede o layout de pular quando ele chega. É aria-hidden por padrão — quem anuncia o carregamento é a região, não seis retângulos vazios.PrimitiveFeedback
- SliderStablePrimitive de seleção para escolher um valor, ou um intervalo, ao longo de uma escala. Composto sobre Base UI Slider: cada thumb é um input range de verdade, com teclado e leitor de tela nativos. A quantidade de thumbs segue o valor — um número é um thumb, um array é um por entrada —, e um intervalo nomeia cada ponta com thumbLabels, porque dois controles com o mesmo nome não dizem qual extremo se está segurando. O knob visível tem 16px dentro de um thumb de 24px, que é o alvo real do toque.PrimitiveSelection
- Swipe ActionsStableUma linha de lista que se arrasta para revelar ações na borda esquerda ou direita. A faixa de ações vive fora da linha, encostada na borda, e viaja com ela — quem recorta é a própria linha, então as ações saem de baixo em vez de entrar em cena. O arraste é um atalho: tudo que ele alcança precisa estar alcançável de outro jeito.PrimitiveAction
- SwitchStableControle que faz efeito no instante em que se move. Composto sobre Base UI Switch. A distinção para o Checkbox não é de forma e sim de produto: switch pertence a um ajuste que se aplica na hora, checkbox a um valor enviado com o formulário — uma fileira de switches acima de um botão Salvar é uma promessa que a interface não cumpre. A pista visível é menor que o alvo: um pseudo-elemento estende a área de toque para fora da trilha sem mexer no layout ao redor.PrimitiveSelection
- TableStableTabela de dados sobre o `<table>` nativo: a semântica de tabela, cabeçalho de coluna e legenda é a do navegador, e nada aqui finge ser grid. Duas aparências — `default`, linhas divididas por hairlines sobre a página, e `card`, o corpo numa superfície própria. Linha selecionada é marcada com `data-state="selected"`; quem anuncia a seleção é o checkbox da linha. Para dados que se navegam por setas ou se editam célula a célula, isto não basta.PrimitiveData Display
- TabsStableUma superfície visível por vez, escolhida numa linha de irmãs. `default` é uma faixa segmentada e lê como controle; `underline` lê como navegação.PrimitiveNavigation
- TextareaStableCampo de texto de múltiplas linhas. Continua sendo um textarea nativo — a ordem de preferência da Foundation põe HTML nativo antes de Base UI, e não há controller a acrescentar. Cresce com o que é digitado e usa a barra de rolagem discreta do sistema quando atinge o limite.PrimitiveInput
- ToggleStableBotão que permanece pressionado. Base UI Toggle fornece o comportamento e o Button do Up Web DS fornece a forma, então um toggle é um botão por construção, não por semelhança. `variant` fica restrito a ghost e outline — as duas que descrevem um controle com estado ligado.PrimitiveAction
- Toggle GroupStableUma fileira de Toggles que compartilha um estado: seleção única ou `multiple`, com foco itinerante. Cada item é o Toggle do Up Web DS — o Button com estado pressionado —, então um item no grupo e um toggle sozinho são o mesmo controle. Use para uma barra de ferramentas de estados liga/desliga (formatação, filtros), inclusive quando vários podem estar ligados; para trocar entre vistas ou modos, em que exatamente uma opção vale, use o Segmented Control.PrimitiveAction
- TooltipStableHint transitório ancorado a um gatilho. Composto sobre Base UI Tooltip, que desenha o popup mas não o anuncia: esta camada adiciona o papel `tooltip` e liga `aria-describedby` ao gatilho enquanto ele está aberto. É a única superfície do sistema que inverte foreground e background, para separar à primeira vista um hint de um popover — onde se pode colocar o cursor.PrimitiveOverlay
- TreeStableÁrvore composável — arquivos e pastas, uma navegação aninhada — com abrir e fechar animados, linhas-guia, ícones e seleção simples ou múltipla. Preserva a API do Kibo. O upstream era um conjunto de divs clicáveis; a normalização aplicou o padrão tree do WAI-ARIA, com uma parada de Tab e navegação por setas.PrimitiveNavigation
Recipes6
- AnnouncementStableRecipe do Badge oficial para anunciar uma novidade: uma pílula com etiqueta e título, normalmente acima do título de um hero e apontando para a página que explica a mudança. Preserva variantes, `render` e comportamento do primitive; a recipe acrescenta só forma — altura que acompanha o conteúdo, elevação de contorno e a etiqueta encaixada na borda, tingida com a própria tinta da variante, o que dispensou a flag `themed` da origem.RecipeData Display
- Dialog StackStableFluxo de várias etapas apresentado como uma pilha de cartas: a etapa ativa é o painel da frente e as anteriores ficam como bordas acima dele. É um único dialog com várias etapas, não vários dialogs — o primitive Dialog (Base UI) é dono de modalidade, portal, overlay, foco, Escape, descarte e estado de abertura, e a recipe é dona do workflow. Apenas a etapa ativa monta conteúdo, então não sobram títulos duplicados nem campos focáveis invisíveis atrás dela.RecipeOverlay
- Hero Video DialogStableMiniatura de vídeo que abre o player em um overlay, para o topo de uma página de marketing. O Dialog do Up Web DS é dono da modalidade, do portal, do scrim, do foco, do Escape e do descarte; a recipe é dona da apresentação — a miniatura com o botão de play e a entrada do player, que segue uma das oito curvas do upstream.RecipeOverlay
- Shimmer ButtonStableRecipe do Button oficial com uma luz que percorre o perímetro, confinada à borda por máscara. Preserva variantes semânticas, tamanhos, composição e comportamento do primitive; cores, raio herdado e ritmo vêm da Foundation.RecipeAction
- StatusStableRecipe do Badge oficial que diz se um serviço está no ar: um ponto colorido, com um anel que pulsa, e a palavra do estado — online, offline, em manutenção ou instável. Preserva a API do Kibo (`status` na raiz, indicador e rótulo como partes) e tudo o que o Badge é, `variant` e `render` incluídos. As cores são tokens: `destructive` do contrato base, e `--success`, `--warning` e `--info` lidos com a cor original do upstream como fallback.RecipeData Display
- Status ButtonStableRecipe do Button oficial que mostra o andamento de uma ação assíncrona onde a pessoa já está olhando: spinner enquanto roda, check quando termina e de volta ao rótulo, sem mudar de largura, com cada passo anunciado por uma região live. Preserva variantes, tamanhos e comportamento do primitive; enquanto ocupado continua focável — é aria-disabled, não disabled — e ignora novos cliques. Funciona sem controle, por um `onClick` assíncrono, ou controlado por `status`, como num formulário com `useActionState`.RecipeAction
Components14
- GlimpseStablePrévia do destino de um link: no hover ou no foco, mostra os metadados da página para onde ele aponta — imagem Open Graph, título e descrição (ou o `<title>` e a meta description, quando ela não publica `og:*`) — e, tipicamente, o endereço. É um resumo do destino, não uma miniatura nem um iframe da página. Composto sobre o Hover Card, de quem herda intenção do ponteiro, foco, Escape e política de movimento. O componente é apresentacional: quem lê os metadados é a aplicação, no servidor, e os passa como children — o helper `glimpse(url)` da origem, que baixava a URL e lia as tags, ficou de fora de propósito.ComponentNavigationApplication
- Hexagon PatternStableA background hexagon pattern made with SVGs, fully customizable using Tailwind CSS.ComponentData DisplayApplication
- Image ZoomStableClique numa imagem e ela sai da página: a original fica onde está, uma cópia cresce até preencher a viewport sobre um scrim, e um clique, Escape ou um arrasto a devolvem. É um lightbox de uma imagem só — não há galeria, não há próxima nem anterior — e envolve o que receber, então uma `img`, um `svg` ou uma figure ampliam do mesmo jeito. O comportamento é do react-medium-image-zoom; a aparência é da Foundation.ComponentData DisplayApplication
- Logos CarouselStableGrade de logos que troca coluna por coluna, numa onda escalonada. É conteúdo ambiente: roda só enquanto está na tela e com a aba visível, a grade em movimento fica fora da árvore de acessibilidade e do Tab, e o conjunto inteiro é listado uma vez para leitor de tela. Quando os logos importam, vem com um controle de pausa por `play`.ComponentData DisplayApplication
- Logos FlipStableFileira de cards que viram um após o outro para revelar o próximo lote de logos. Só roda quando há mais logos que cards, enquanto está na tela e com a aba visível. As duas faces de cada card ficam fora da árvore de acessibilidade e do Tab, e o conjunto inteiro é listado uma vez para leitor de tela. Quando os logos importam, vem com um controle de pausa por `play`.ComponentData DisplayApplication
- MarqueeStableFaixa horizontal que rola continuamente — logos, tags, novidades. O laço é do `react-fast-marquee`; o que o Up Web DS acrescenta é o que a biblioteca deixa para quem a usa: as cópias que ela renderiza para preencher a faixa ficam fora da árvore de acessibilidade e do Tab, o foco dentro dela para o laço e o traz de volta ao início, e sob movimento reduzido a faixa vira uma linha estática que quebra. É conteúdo ambiente: nada nela pode ser o único lugar onde uma informação existe, e uma faixa cujo conteúdo importa vem com um controle de pausa.ComponentData DisplayApplication
- Middle TruncationStableUma linha de texto encurtada no meio, preservando o começo e o fim — as partes que distinguem dois nomes de arquivo, dois hashes ou dois caminhos. Mede com a fonte computada do próprio elemento e recalcula quando a largura muda; `end` fixa quantos caracteres ficam no fim, `minEnd` garante um mínimo. O texto completo é lido por leitor de tela e aparece no `title`.ComponentData DisplayApplication
- Navigation MenuStableNavegação principal de um site ou de uma aplicação: uma linha de entradas em que umas são links e outras abrem um painel de links. Composto sobre Base UI Navigation Menu, com uma única superfície flutuante que muda de forma ao passar de um gatilho para o outro em vez de fechar um popup e abrir outro. O painel é navegação, não menu: os links continuam links, alcançáveis por Tab.ComponentNavigationApplication
- Number TickerStableUm número que conta até o próprio valor na primeira vez em que entra na tela — ou regressivamente, com `direction="down"`. A contagem é ornamento e o número é o conteúdo: o leitor de tela recebe o número de destino desde o primeiro render, nunca um quadro da contagem, e sob movimento reduzido o número aparece de uma vez. `locale` define o agrupamento e o separador decimal; combine-o com o idioma da página.ComponentData DisplayApplication
- Question CardStableEnunciado, alternativas e feedback de uma questão. Não decide o que é correto: recebe `status` e devolve a escolha por callback.ComponentAssessmentEducation
- Shimmering TextStableTexto cujos caracteres clareiam em sequência. Serve para dizer que algo ainda está acontecendo, onde um spinner seria alto demais e um rótulo estático pareceria travado — é irmão do Skeleton, não decoração. A fonte usava um controlador de animação por caractere via `motion`; a revisão arquitetural que o DS009 pediu terminou onde costuma terminar: uma varredura de cor em laço com início escalonado é um keyframe e um atraso, então a dependência saiu e a duração passou a viver em --motion-loop-duration, onde prefers-reduced-motion a alcança.ComponentData DisplayApplication
- SidebarStableO painel lateral de uma aplicação: um provider que guarda o estado aberto, um painel que é coluna fixa em tela larga e Sheet abaixo de md, e as partes do menu que vão dentro dele. Recolhe para fora da borda ou para uma coluna de ícones, e o estado desktop fica lembrado em cookie para o servidor renderizar onde a pessoa deixou. Compõe Button, Input, Separator, Sheet, Skeleton e Tooltip do Up Web DS; o hook useIsMobile é um support module (shadcn/use-mobile) que viaja com o item em vez de virar item do catálogo.ComponentNavigationApplication
- Spinning Circular TextStableUma palavra disposta em círculo, girando devagar — um selo, um carimbo, a marca no canto de um hero. O anel é uma figura da palavra, não a palavra: ele sai da árvore de acessibilidade e o texto é anunciado uma vez, inteiro. O raio vem do espaçamento pedido, então o anel cresce com o número de caracteres em vez de amontoá-los.ComponentData DisplayApplication
- Text FlipStableUm espaço de texto que troca o item exibido pelo próximo, no lugar. Funciona melhor no fim de uma linha, onde a mudança de largura não empurra nada, e numa frase que faz sentido com qualquer um dos itens — o leitor de tela lê o item da vez, e a troca não é anunciada de propósito. `play` pausa o ciclo; sob movimento reduzido a troca vira um cross-fade.ComponentData DisplayApplication