Catálogo
Toda a camada visual da Up Web Studio em um lugar só. O catálogo é derivado dos arquivos *.meta.ts: nada aqui é uma lista mantida à mão.
37 item(s) registrados.
Por arquitetura
Primitives
- 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.Primitive
- 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.Primitive
- Aspect RatioIncomingAspect Ratio adapted from shadcn/ui.Primitive
- AttachmentIncomingAttachment adapted from shadcn/ui.Primitive
- 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.Primitive
- BadgeStablePrimitive compacto de status e rótulo. Renderiza um span por padrão e assume qualquer elemento através de `render`.Primitive
- BreadcrumbIncomingBreadcrumb adapted from shadcn/ui.Primitive
- 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.Primitive
- 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.Primitive
- 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.Primitive
- 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.Primitive
- CollapsibleIncomingCollapsible adapted from shadcn/ui.Primitive
- 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.Primitive
- 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.Primitive
- 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.Primitive
- 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.Primitive
- 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.Primitive
- 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.Primitive
- 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.Primitive
- 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.Primitive
- 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.Primitive
- 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.Primitive
- 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.Primitive
- 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.Primitive
- 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.Primitive
- 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.Primitive
- 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.Primitive
- 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.Primitive
- 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.Primitive
- 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.Primitive
- 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.Primitive
- 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.Primitive
- 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.Primitive
Recipes
Components
- Question CardExperimentalEnunciado, alternativas e feedback de uma questão. Não decide o que é correto: recebe `status` e devolve a escolha por callback.Component · Education
- 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.Component · Application