{"_id":"@akiracryah/turbo-store-design-system","name":"@akiracryah/turbo-store-design-system","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@akiracryah/turbo-store-design-system","version":"0.0.1","description":"Design System da Turbo Store — React + TypeScript + Tailwind CSS v4 + Radix UI","scripts":{"dev":"vite","build":"tsc --noEmit && vite build","typecheck":"tsc --noEmit","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"keywords":["design-system","react","tailwind","radix-ui","atomic-design","storybook"],"author":"","license":"UNLICENSED","type":"module","dependencies":{"class-variance-authority":"^0.7.1","clsx":"^2.1.1","lucide-react":"^1.44.0","radix-ui":"^1.6.7","react":"^19.3.0","react-dom":"^19.3.0","tailwind-merge":"^3.6.0"},"devDependencies":{"@storybook/addon-a11y":"^10.6.0","@storybook/addon-docs":"^10.6.0","@storybook/react-vite":"^10.6.0","@tailwindcss/vite":"^4.3.3","@types/node":"^22.20.2","@types/react":"^19.3.0","@types/react-dom":"^19.3.0","@vitejs/plugin-react":"^6.1.1","storybook":"^10.6.0","tailwindcss":"^4.3.3","typescript":"^7.0.2","vite":"^8.3.0"},"private":false,"exports":{".":{"types":"./src/index.ts","import":"./src/index.ts"}},"_id":"@akiracryah/turbo-store-design-system@0.0.1","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-81Nha9Pouil9qXAaAs6fD6ie41yizFZEp30Tnc4C0l9F7W9SpKojbICCbelMPrC7NnpV2RTzxIGrWEwecbBmdg==","shasum":"5e2c7670561a09e0799e1d07c409ac2174d5f57f","tarball":"https://registry.npmjs.org/@akiracryah/turbo-store-design-system/-/turbo-store-design-system-0.0.1.tgz","fileCount":94,"unpackedSize":710269,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIG5ihPBkgXAJYlIZN0YpUGkmKq+mwGxBEVCjH/RZSIjoAiEA5/l32v5j0keFXdl483RybBI8++ABJ4LgXjp/wiFYPcc="}]},"_npmUser":{"name":"akiracryah","email":"akira@cryah.com.br"},"directories":{},"maintainers":[{"name":"akiracryah","email":"akira@cryah.com.br"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/turbo-store-design-system_0.0.1_1789135168429_0.6108332824000087"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-11T13:59:28.289Z","0.0.1":"2026-09-11T13:59:28.583Z","modified":"2026-09-11T13:59:28.800Z"},"maintainers":[{"name":"akiracryah","email":"akira@cryah.com.br"}],"description":"Design System da Turbo Store — React + TypeScript + Tailwind CSS v4 + Radix UI","keywords":["design-system","react","tailwind","radix-ui","atomic-design","storybook"],"license":"UNLICENSED","readme":"# Design System — Turbo Store\n\nBiblioteca de componentes em **React 19 + TypeScript + Tailwind CSS v4 + Radix UI**,\norganizada em **Atomic Design**, com Storybook e tokens semânticos.\n\n## Começando\n\n```bash\nnpm install\nnpm run storybook     # http://localhost:6006\n```\n\n| Script                    | O que faz                                      |\n| ------------------------- | ---------------------------------------------- |\n| `npm run storybook`       | Storybook em modo de desenvolvimento           |\n| `npm run build-storybook` | Gera o Storybook estático em `storybook-static` |\n| `npm run typecheck`       | Verificação de tipos com `tsc --noEmit`        |\n| `npm run dev`             | Servidor Vite                                   |\n| `npm run build`           | Typecheck + build da biblioteca                 |\n\n## Estrutura\n\n```\n.storybook/               Configuração do Storybook (a11y, tema, docs)\nsrc/\n  styles/\n    tokens.css            Primitivos → semânticos → @theme (Tailwind v4)\n    globals.css           Reset, base, foco visível, reduced-motion\n  lib/\n    cn.ts                 clsx + tailwind-merge\n  components/\n    atoms/                Button, IconButton, Input, Label, Checkbox, Switch,\n                          Badge, Text, Heading, Avatar, Separator, Skeleton, Spinner\n    molecules/            FormField, SearchField, Select, Tabs, Tooltip, Alert,\n                          QuantityStepper, Rating\n    organisms/            Header, ProductCard, Dialog, Toast\n  docs/                   Páginas MDX (Introdução, Tokens)\n  index.ts                Ponto de entrada público\n```\n\nCada componente vive em sua própria pasta com três arquivos:\n\n```\nButton/\n  Button.tsx            Componente + variantes (CVA)\n  Button.stories.tsx    Stories do Storybook\n  index.ts              Reexportações públicas\n```\n\nA dependência é de mão única: **organismo → molécula → átomo**. Um átomo nunca\nimporta uma molécula.\n\n## Tokens\n\nDuas camadas, em `src/styles/tokens.css`:\n\n1. **Primitivos** (`--palette-brand-500`) — valores brutos, sem significado.\n   Nunca usados direto em componentes.\n2. **Semânticos** (`--brand`, `--surface`, `--spacing-md`) — a intenção de uso.\n   É o que os componentes consomem, via utilitários Tailwind (`bg-brand`, `p-md`).\n\nO tema escuro reatribui apenas a camada semântica — nenhum componente muda:\n\n```html\n<html data-theme=\"dark\">\n```\n\nO bloco `@theme inline` é obrigatório para isso funcionar: sem `inline`, o\nTailwind v4 copia o valor em build-time e o tema deixa de responder em runtime.\n\nDocumentação completa em **Fundamentos → Tokens** no Storybook.\n\n## Acessibilidade\n\nO addon `@storybook/addon-a11y` roda axe-core em cada story (aba _Accessibility_).\n\nComponentes interativos são construídos sobre primitivos do **Radix UI**, que\nentregam foco preso em modais, devolução de foco ao gatilho, navegação por setas\nno padrão WAI-ARIA, `aria-expanded`/`aria-controls` sincronizados e fechamento por\nEscape.\n\nOnde um erro de acessibilidade é fácil de cometer, a API impede:\n\n- `IconButton` exige `label` em tempo de compilação;\n- `FormField` gera os `id`s e conecta rótulo, dica e erro por `aria-describedby`;\n- `Alert` obriga a escolher a urgência do anúncio (`status`, `alert` ou `none`);\n- `Rating` expõe a nota como texto, não só como estrelas;\n- `ProductCard` mantém um único link por card, sem âncora dentro de âncora.\n\n## Uso\n\n```tsx\nimport { ToastProvider, TooltipProvider } from '@turbo-store/design-system';\nimport '@turbo-store/design-system/styles/globals.css';\n\nexport function App({ children }: { children: React.ReactNode }) {\n  return (\n    <TooltipProvider>\n      <ToastProvider position=\"bottom-right\">{children}</ToastProvider>\n    </TooltipProvider>\n  );\n}\n```\n\n```tsx\nimport { Button, FormField, Input } from '@turbo-store/design-system';\n\n<FormField label=\"E-mail\" required hint=\"Enviaremos a confirmação do pedido.\">\n  <Input type=\"email\" placeholder=\"seu@email.com\" />\n</FormField>\n<Button type=\"submit\">Continuar</Button>\n```\n\n## Sincronização com o Figma\n\nOs primitivos em `src/styles/tokens.css` vêm do export de **Variables + Styles**\ndo arquivo `DS Turbo - teste` (formato DTCG): paletas Primary (lime), Secondary\n(roxo), Neutral, Red, Amber, Green e Blue; a escala `Shadow`; os anéis de foco;\ne a escala tipográfica (`text-2xs` … `text-9xl`, com entrelinha e tracking).\n\n**Ainda não sincronizados** — o arquivo não publica variáveis de dimensão:\n\n- escala de espaçamento (`--spacing-*`), mantida na base de 4px do código;\n- raios (`--radius-*`).\n\nTrês decisões tomadas na conversão, todas documentadas em **Fundamentos → Tokens**:\n\n- **Texto sobre cor** é por tom (`--content-on-brand`, `--content-on-danger`, …).\n  O lime da marca exige texto escuro (branco sobre ele dá 1,3:1); o vermelho de\n  erro exige texto claro. Um token único reprovaria em metade dos tons.\n- **`--brand-content`** (texto na cor da marca sobre fundo claro) usa\n  `primary-900`, não o lime puro — 5,2:1 contra 1,3:1.\n- **O anel de foco padrão é o neutro** do Figma, não o de marca: o anel lime tem\n  1,6:1 sobre branco, abaixo do mínimo de 3:1. O anel de marca continua\n  disponível em `--focus-ring-brand` e é o padrão no tema escuro.\n\nSe alguma dessas leituras não for a intenção do design, cada uma é uma linha em\n`tokens.css`.\n\n## Convenções\n\n- Variantes visuais com **CVA**, exportadas junto ao componente.\n- `cn()` resolve conflitos de classe — o `className` de quem consome sempre vence.\n- Todo componente encaminha `ref` e aceita `className`.\n- Documentação e stories em português; nomes de props em inglês.\n","readmeFilename":"README.md","_rev":"1-e62b6cc747b39457fe4b883484beaec2"}