{"_id":"design-system-zeroz","_rev":"242-3ba38fa6fae23f1a8b2b81d3e3d28a11","name":"design-system-zeroz","dist-tags":{"latest":"0.3.92"},"versions":{"0.1.0":{"name":"design-system-zeroz","version":"0.1.0","keywords":["Design System"],"author":{"name":"evandrometz"},"license":"ISC","_id":"design-system-zeroz@0.1.0","maintainers":[{"name":"evandrometz","email":"metzxevandro@gmail.com"}],"dist":{"shasum":"ad12693170a9977171a6f498c6a34bca36d67881","tarball":"https://registry.npmjs.org/design-system-zeroz/-/design-system-zeroz-0.1.0.tgz","fileCount":99,"integrity":"sha512-nGH6lurZTRoZKZL1meKA3xr0a8VXipr5XkP74llznil7YYic/zxBylRxb0JG5GJPxzcrzvLeazsq53FYh8Hemw==","signatures":[{"sig":"MEYCIQCjixT0Cce2qkKatXY8RTuVzuuDtq7SjnAsM4O0RXujVgIhAOHajo4rbmuRHxMm9paNj7011H2b2RwfD6hb24s835LV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222277},"main":"next.config.js","gitHead":"197ff77f84562e3cdaa9e5027d2ad3d81b362ab3","private":false,"scripts":{"dev":"next dev","lint":"next lint","build":"next build","start":"next start","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"evandrometz","email":"metzxevandro@gmail.com"},"_npmVersion":"9.8.1","description":"\r
![\"Zeroz](\"https://zeroz.vercel.app/logo-sm.svg\")
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
\r
![](\"https://zeroz.vercel.app/favicon.svg\")
\r\n\r\n# Design System Zeroz\r\n\r\nBiblioteca de componentes React reutilizáveis com tokens de design, tipografia, cores e estilos padronizados. Construída para garantir consistência visual e agilidade no desenvolvimento de interfaces.\r\n\r\n[](https://www.npmjs.com/package/design-system-zeroz)\r\n[](./LICENSE.md)\r\n[](https://zeroz.vercel.app)\r\n\r\n---\r\n\r\n## Instalação\r\n\r\n```bash\r\nnpm install design-system-zeroz\r\n# ou\r\nyarn add design-system-zeroz\r\n```\r\n\r\n---\r\n\r\n## Configuração\r\n\r\n### 1. Importar os estilos\r\n\r\nImporte os estilos uma única vez no ponto de entrada da sua aplicação (ex: `_app.tsx`, `layout.tsx`, `main.tsx`):\r\n\r\n```tsx\r\nimport \"design-system-zeroz/dist/styles.css\";\r\n```\r\n\r\n### 2. Definir o tema do projeto\r\n\r\nAdicione o atributo `data-company=\"zeroz\"` na tag `` para aplicar as cores da marca:\r\n\r\n```html\r\n\r\n```\r\n\r\nEm **Next.js (App Router)**:\r\n\r\n```tsx\r\n// app/layout.tsx\r\nexport default function RootLayout({ children }) {\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n}\r\n```\r\n\r\n### 3. Tema escuro (opcional)\r\n\r\nO design system suporta dark mode nativamente. Para ativá-lo, adicione `data-theme=\"dark\"` na tag ``:\r\n\r\n```html\r\n\r\n```\r\n\r\n---\r\n\r\n## Uso básico\r\n\r\n```tsx\r\nimport { Button } from \"design-system-zeroz\";\r\n\r\nexport default function Page() {\r\n return (\r\n \r\n );\r\n}\r\n```\r\n\r\n---\r\n\r\n## Todos os componentes\r\n\r\n| Componente | Descrição |\r\n|-----------|-----------|\r\n| `AppShell` | Wrapper raiz da aplicação |\r\n| `Aside` | Painel lateral deslizante |\r\n| `Avatar` | Foto ou inicial do usuário |\r\n| `Badge` | Indicador numérico ou de status |\r\n| `Brand` | Logo da marca |\r\n| `Breadcrumb` | Navegação hierárquica |\r\n| `Button` | Botão de ação |\r\n| `ButtonIcon` | Botão somente com ícone |\r\n| `Card` | Contêiner de conteúdo |\r\n| `CardDropdown` | Card com menu dropdown |\r\n| `Checkbox` | Campo de seleção múltipla |\r\n| `DataPicker` | Seletor de data |\r\n| `DataTable` | Tabela de dados avançada |\r\n| `DescriptionList` | Lista de descrição chave-valor |\r\n| `Dropdown` | Menu suspenso |\r\n| `EmptyState` | Estado vazio com ilustração |\r\n| `FileUploader` | Upload de arquivos |\r\n| `Header` | Cabeçalho da aplicação |\r\n| `Icon` | Ícone Material Symbols |\r\n| `Image` | Imagem com fallback |\r\n| `ImageUploader` | Upload de imagens com preview |\r\n| `Input` | Campo de texto |\r\n| `InputNumber` | Campo numérico |\r\n| `InputSearch` | Campo de busca |\r\n| `InputSelect` | Seletor dropdown |\r\n| `InputTime` | Seletor de horário |\r\n| `Layout` | Layout de grid |\r\n| `Link` | Link estilizado |\r\n| `Loading` | Indicador de carregamento |\r\n| `Modal` | Janela de diálogo |\r\n| `Notification` | Notificações toast |\r\n| `Page` | Contêiner da página |\r\n| `Pagination` | Controle de paginação |\r\n| `Progress` | Barra de progresso |\r\n| `ProgressIndicator` | Indicador de etapas |\r\n| `RadioButton` | Seleção única |\r\n| `Savebar` | Barra de salvar flutuante |\r\n| `SavebarTrigger` | Acionador do Savebar |\r\n| `Sidebar` | Navegação lateral |\r\n| `Skeleton` | Placeholder de carregamento |\r\n| `Slider` | Controle deslizante |\r\n| `Switch` | Toggle on/off |\r\n| `TableList` | Lista em formato de tabela |\r\n| `Tabs` | Navegação por abas |\r\n| `Tag` | Etiqueta de categoria |\r\n| `TextArea` | Campo de texto longo |\r\n| `Tooltip` | Dica flutuante |\r\n| `BarChart` | Gráfico de barras |\r\n| `LineChart` | Gráfico de linhas |\r\n| `PieChart` | Gráfico de pizza |\r\n\r\n---\r\n\r\n## Documentação e Storybook\r\n\r\nVeja todos os componentes, variantes e exemplos interativos no Storybook:\r\n\r\n👉 [StoryBook Zeroz](https://zeroz.vercel.app)\r\n\r\n---\r\n\r\n## Contribuindo\r\n\r\nContribuições são bem-vindas! Veja como contribuir:\r\n\r\n1. Fork o repositório\r\n2. Crie uma branch com o prefixo adequado: `feat/nome-da-feature`, `fix/nome-do-bug`\r\n3. Faça seus commits seguindo a mesma convenção: `feat: descrição`, `fix: descrição`\r\n4. Abra um Pull Request\r\n\r\n---\r\n\r\n## Licença\r\n\r\nMIT © [evandrometz](https://github.com/metzevandro/Zeroz)\r\n","readmeFilename":"README.md"}