{"_id":"@andersonnascimentoafsn/design-system","name":"@andersonnascimentoafsn/design-system","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@andersonnascimentoafsn/design-system","version":"0.1.0","author":{"name":"Anderson Nascimento","email":"anderson.nascimento@meta.com.br"},"description":"Sistema de design Anderson Nascimento - Biblioteca de componentes React","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./style.css":"./dist/design-system.css"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"devDependencies":{"@eslint/js":"^9.39.0","@storybook/addon-essentials":"^8.6.14","@storybook/addon-interactions":"^8.6.14","@storybook/addon-links":"^8.6.14","@storybook/blocks":"^8.6.14","@storybook/react":"^8.6.14","@storybook/react-vite":"^8.6.14","@storybook/test":"^8.6.14","@tailwindcss/vite":"^4.1.16","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.1.0","@testing-library/user-event":"^14.5.2","@types/node":"^22.10.5","@types/react":"^18.3.18","@types/react-dom":"^18.3.5","@typescript-eslint/eslint-plugin":"^8.19.1","@typescript-eslint/parser":"^8.19.1","@vitejs/plugin-react":"^4.3.4","@vitest/ui":"^2.1.8","eslint":"^9.18.0","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.16","eslint-plugin-storybook":"^0.11.1","globals":"^16.5.0","jsdom":"^25.0.1","storybook":"^8.6.14","tailwindcss":"^4.1.16","typescript":"^5.7.3","typescript-eslint":"^8.46.2","vite":"^6.0.7","vite-plugin-dts":"^4.3.0","vitest":"^2.1.8"},"keywords":["design-system","react","components","ui","tailwind","tailwindcss","typescript","vite","radix-ui","component-library","react-components"],"license":"Proprietary","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"engines":{"node":">=18.0.0","pnpm":">=8.0.0"},"repository":{"type":"git","url":"git+https://github.com/AndersonNascimentoAFSN/andersonnascimentoafsn-design-system.git"},"bugs":{"url":"https://github.com/AndersonNascimentoAFSN/andersonnascimentoafsn-design-system/issues"},"homepage":"https://github.com/AndersonNascimentoAFSN/andersonnascimentoafsn-design-system#readme","dependencies":{"@radix-ui/react-slot":"^1.2.3","class-variance-authority":"^0.7.1","clsx":"^2.1.1","lucide-react":"^0.552.0","tailwind-merge":"^3.3.1"},"scripts":{"build":"tsc --build --force && vite build","lint":"eslint .","preview":"vite preview","dev":"storybook dev -p 6006","build-storybook":"storybook build","type-check":"tsc --noEmit","test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage"},"_id":"@andersonnascimentoafsn/design-system@0.1.0","_integrity":"sha512-R8ChBBEIPRV3kecBQRrmXoalhOjaASB9tHO+NoTWcYhD9NEsvE3xe6lnnzyzIrzNXsOKXKWmM3blA5Kyhx71qg==","_resolved":"/tmp/0c91e61b0bae130acf5c6180ff193156/andersonnascimentoafsn-design-system-0.1.0.tgz","_from":"file:andersonnascimentoafsn-design-system-0.1.0.tgz","_nodeVersion":"18.20.8","_npmVersion":"10.8.2","dist":{"integrity":"sha512-R8ChBBEIPRV3kecBQRrmXoalhOjaASB9tHO+NoTWcYhD9NEsvE3xe6lnnzyzIrzNXsOKXKWmM3blA5Kyhx71qg==","shasum":"a3e2b0f53abef98e73ee80568e5024f3a415a08f","tarball":"https://registry.npmjs.org/@andersonnascimentoafsn/design-system/-/design-system-0.1.0.tgz","fileCount":8,"unpackedSize":539017,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@andersonnascimentoafsn%2fdesign-system@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGpuIIdv+R0+c2TDWppKa0qm1Dbdq97F4rVUNfmHwDZRAiEAjOz6rv5VPNChD7NsVgWVhAL19Sw/LgiQ3Vt0n1fiESg="}]},"_npmUser":{"name":"andersonnascimentoafsn","email":"anderson.nascimentoafsn@gmail.com"},"directories":{},"maintainers":[{"name":"andersonnascimentoafsn","email":"anderson.nascimentoafsn@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_0.1.0_1762014133864_0.4127843765442223"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-01T16:22:13.777Z","0.1.0":"2025-11-01T16:22:14.085Z","modified":"2025-11-01T16:22:14.697Z"},"maintainers":[{"name":"andersonnascimentoafsn","email":"anderson.nascimentoafsn@gmail.com"}],"description":"Sistema de design Anderson Nascimento - Biblioteca de componentes React","homepage":"https://github.com/AndersonNascimentoAFSN/andersonnascimentoafsn-design-system#readme","keywords":["design-system","react","components","ui","tailwind","tailwindcss","typescript","vite","radix-ui","component-library","react-components"],"repository":{"type":"git","url":"git+https://github.com/AndersonNascimentoAFSN/andersonnascimentoafsn-design-system.git"},"author":{"name":"Anderson Nascimento","email":"anderson.nascimento@meta.com.br"},"bugs":{"url":"https://github.com/AndersonNascimentoAFSN/andersonnascimentoafsn-design-system/issues"},"license":"Proprietary","readme":"# Design System\n\n> Sistema de design moderno desenvolvido com React, TypeScript, Tailwind CSS 4 e Radix UI\n\n[![NPM Version](https://img.shields.io/npm/v/@andersonnascimentoafsn/design-system)](https://www.npmjs.com/package/@andersonnascimentoafsn/design-system)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\n## 🚀 Características\n\n- ⚡️ **Vite** - Build ultra-rápido e otimizado\n- 🎨 **Tailwind CSS 4** - Sistema completo de design tokens usando @theme\n- 🧩 **Radix UI** - Componentes acessíveis e sem estilo\n- 🎯 **Class Variance Authority (CVA)** - Gerenciamento de variantes\n- 🧪 **Vitest** - Testes unitários com React Testing Library (35+ testes)\n- 📚 **Storybook** - Documentação interativa de componentes\n- 🎯 **TypeScript** - Type-safety completo\n- 📦 **Tree-shakeable** - Importe apenas o que você precisa\n\n## 📦 Instalação\n\n```bash\nnpm install @andersonnascimentoafsn/design-system\n# ou\npnpm add @andersonnascimentoafsn/design-system\n# ou\nyarn add @andersonnascimentoafsn/design-system\n```\n\n> **Nota:** Este pacote requer React 18+ e Tailwind CSS 4+ como peer dependencies.\n\n## 🎯 Uso\n\n### Setup Inicial\n\nImporte o CSS do design system no seu arquivo principal:\n\n```tsx\n// main.tsx ou App.tsx\nimport '@andersonnascimentoafsn/design-system/style.css';\n```\n\n### Importando componentes\n\n```tsx\nimport { Button } from '@andersonnascimentoafsn/design-system';\n\nfunction App() {\n  return (\n    <div>\n      <h1>Bem-vindo!</h1>\n      <Button variant=\"primary\" size=\"lg\">\n        Começar\n      </Button>\n    </div>\n  );\n}\n```\n\n### Usando Design Tokens\n\nOs tokens estão disponíveis como classes Tailwind CSS:\n\n```tsx\n<div className=\"bg-primary-500 text-white p-spacing-lg rounded-radius-md shadow-shadow-md\">\n  Conteúdo estilizado com design tokens\n</div>\n```\n\n## 🎨 Componentes\n\n### Button\n\nBotão versátil com múltiplas variantes, tamanhos e estados. Construído com Radix UI Slot para composição flexível.\n\n```tsx\nimport { Button } from '@andersonnascimentoafsn/design-system';\n\n<Button variant=\"primary\" size=\"md\" loading={false}>\n  Clique aqui\n</Button>\n```\n\n**Variantes disponíveis:**\n- `primary` - Botão principal (azul)\n- `secondary` - Botão secundário (roxo)\n- `success` - Sucesso (verde)\n- `warning` - Aviso (laranja)\n- `danger` - Perigo (vermelho)\n- `outline` - Contornado\n- `ghost` - Sem fundo\n- `link` - Estilo de link\n- `gradient` - Com gradiente\n\n**Tamanhos:**\n- `xs` - Extra pequeno\n- `sm` - Pequeno\n- `md` - Médio (padrão)\n- `lg` - Grande\n- `xl` - Extra grande\n\n**Props principais:**\n- `variant`: Variante visual do botão\n- `size`: Tamanho do botão\n- `loading`: Exibe indicador de carregamento\n- `disabled`: Desabilita o botão\n- `asChild`: Usa Radix Slot para composição\n- Todos os atributos HTML padrão de `<button>`\n\n## 🎨 Design Tokens\n\nO design system utiliza Tailwind CSS 4 com tokens definidos via `@theme` directive. Todos os tokens estão disponíveis como classes CSS.\n\n### Cores\n\n```tsx\n// Primárias (Azul)\n<div className=\"bg-primary-500 text-primary-50\" />\n\n// Sucesso (Verde)\n<div className=\"bg-success-500 border-success-600\" />\n\n// Erro (Vermelho)\n<div className=\"bg-error-500 text-error-50\" />\n\n// Aviso (Laranja)\n<div className=\"bg-warning-500\" />\n\n// Neutros (Cinza)\n<div className=\"bg-gray-100 text-gray-900\" />\n```\n\n**Escalas disponíveis:** 50, 100, 200, 300, 400, 500, 600, 700, 800, 900\n\n### Espaçamento\n\n```tsx\n<div className=\"p-spacing-xs\" />   // 4px\n<div className=\"m-spacing-sm\" />   // 8px\n<div className=\"gap-spacing-md\" /> // 16px\n<div className=\"p-spacing-lg\" />   // 24px\n<div className=\"m-spacing-xl\" />   // 32px\n```\n\n### Tipografia\n\n```tsx\n// Tamanhos\n<h1 className=\"text-size-h1\" />     // 36px\n<p className=\"text-size-base\" />    // 16px\n<small className=\"text-size-sm\" />  // 14px\n\n// Pesos\n<span className=\"font-weight-bold\" />    // 700\n<span className=\"font-weight-medium\" />  // 500\n<span className=\"font-weight-regular\" /> // 400\n\n// Famílias\n<p className=\"font-family-primary\" />   // Rubik\n<code className=\"font-family-mono\" />   // monospace\n```\n\n### Outros Tokens\n\n```tsx\n// Border Radius\n<div className=\"rounded-radius-sm\" />  // 4px\n<div className=\"rounded-radius-md\" />  // 8px\n<div className=\"rounded-radius-lg\" />  // 12px\n\n// Shadows\n<div className=\"shadow-shadow-sm\" />\n<div className=\"shadow-shadow-md\" />\n<div className=\"shadow-shadow-lg\" />\n\n// Z-index\n<div className=\"z-zindex-dropdown\" />   // 1000\n<div className=\"z-zindex-modal\" />      // 1300\n```\n\n## 🧪 Desenvolvimento\n\n```bash\n# Instalar dependências\npnpm install\n\n# Rodar Storybook\npnpm dev\n\n# Executar testes\npnpm test\n\n# Build da biblioteca\npnpm build\n\n# Verificar tipos\npnpm type-check\n```\n\n## 📚 Documentação\n\nAcesse a documentação completa no [Storybook](https://seu-storybook-url.com)\n\n## 🤝 Contribuindo\n\nContribuições são bem-vindas! Por favor, leia o [CONTRIBUTING.md](CONTRIBUTING.md) para detalhes.\n\n## �️ Requisitos Técnicos\n\n- **Node.js**: >=18.0.0\n- **pnpm**: >=8.0.0 (recomendado)\n- **React**: ^18.3.0\n- **Tailwind CSS**: ^4.0.0\n\n## �📄 Licença\n\nMIT © 2025 Anderson Nascimento\n\n## 🔗 Links\n\n- [NPM](https://www.npmjs.com/package/@andersonnascimentoafsn/design-system)\n- [GitHub](https://github.com/empreendedor/design-system)\n- [Issues](https://github.com/empreendedor/design-system/issues)\n","readmeFilename":"README.md","_rev":"1-dc88cee2036caebeb9b13bdea1eeb79d"}