zag

Zag é uma biblioteca JavaScript de máquinas de estados finitos para construção de componentes UI acessíveis. Seu objetivo é evitar reimplementar padrões comuns de componentes (abas, menus, modais, tooltips e outros) separadamente em cada framework, modelando a lógica de interação uma vez de forma framework-agnostic. Ideias principais descritas no README: - Escreva uma vez, use em qualquer lugar: as interações dos componentes são modeladas independentemente de qualquer framework, com adaptadores para React, Solid, Svelte e Vue. - Foco em acessibilidade: o projeto diz que trata de detalhes como interações por teclado, gerenciamento de foco e papéis e atributos ARIA. - Headless: as APIs das máquinas são descritas como completamente sem estilo, deixando a escolha da solução de estilização para o desenvolvedor. - Máquinas de estado: a implementação se baseia em ideias de statecharts, embora o README note que não segue a especificação SCXML. Modelo de uso: as máquinas são publicadas por componente como pacotes separados, por exemplo @zag-js/dialog e @zag-js/tooltip, instalados com npm ou yarn. Wrappers de framework como @zag-js/react, @zag-js/vue, @zag-js/solid e @zag-js/svelte permitem consumir uma máquina dentro de uma aplicação. O exemplo React no README mostra useMachine de @zag-js/react combinado com um pacote de componente, depois connect(service, normalizeProps) para produzir uma API de props, que é espalhada em elementos como o contêiner raiz e cada item. Princípios norteadores declarados no README: as máquinas e testes são modelados após as práticas de autoria WAI-ARIA; testes end-to-end são escritos para cada componente para que o comportamento seja consistente entre frameworks; e as máquinas pretendem permanecer leves e simples, evitando conceitos complexos de máquinas como spawn e estados aninhados. Notas sobre repositório e fluxo de trabalho: - Documentação e changelog estão linkados do README (zagjs.com e CHANGELOG.md). - O build usa esbuild e turborepo para builds concorrentes entre pacotes, produzindo saída CJS, ESM e DTS. - Exemplos starter existem para React (Next.js TypeScript), Vue 3, Solid e Svelte. - Testes end-to-end usam Playwright e são executados por framework (React, Vue, Solid). - Comandos de generator estão disponíveis para criar um novo pacote de máquina ou um novo pacote de utilitário. - Outros comandos cobrem execução de testes, linting, build e início do site. O README também creditas várias inspirações, incluindo código duplicado entre as implementações React e Vue do Chakra UI, padrões UI puros, Material Components Web, Radix UI, XState, Vue.js, Lit e Sonner. O guia de contribuição aponta para o rótulo Good First Issue, reporte de issues para bugs e lacunas na documentação, e solicitações de funcionalidades. O projeto é licenciado sob MIT e mantido pela Chakra Systems Inc.