{"_id":"@acsrocha/ui","name":"@acsrocha/ui","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@acsrocha/ui","version":"1.0.0","description":"Biblioteca de componentes React reutilizáveis por Carlos Rocha","author":{"name":"Carlos Rocha"},"license":"MIT","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs"},"./theme.css":"./dist/theme.css","./styles.css":"./dist/styles.css","./tailwind.preset":"./tailwind.preset.cjs"},"scripts":{"build":"tsup","build:css":"tailwindcss -i ./src/theme/theme.css -o ./dist/theme.css && tailwindcss -i ./src/theme/styles.css -o ./dist/styles.css","build:all":"npm run build && npm run build:css","dev":"tsup --watch","type-check":"tsc --noEmit","lint":"eslint src"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@tanstack/react-query":">=5.0.0","framer-motion":">=10.0.0"},"dependencies":{"@radix-ui/react-checkbox":"^1.3.3","@radix-ui/react-dialog":"^1.1.15","@radix-ui/react-select":"^2.2.6","@radix-ui/react-separator":"^1.1.7","@radix-ui/react-tabs":"^1.1.13","@radix-ui/react-tooltip":"^1.2.8","class-variance-authority":"^0.7.1","clsx":"^2.1.1","lucide-react":"^0.562.0","tailwind-merge":"^3.3.1"},"devDependencies":{"@types/react":"^19.1.10","@types/react-dom":"^19.1.7","autoprefixer":"^10.4.21","postcss":"^8.5.6","tailwindcss":"^3.4.0","tailwindcss-animate":"^1.0.7","tsup":"^8.0.0","typescript":"~5.8.3"},"_id":"@acsrocha/ui@1.0.0","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-zfdQ0BK4jH1DrZju3FzYwAl3ml1vLI3Mh0dl8XLglodXmx3n3Thu/lPv1vrtioT429f7GAm3nx6hiHV3eIZZWg==","shasum":"dfc91db32f03d74d2bb175cd99a32452c5ce402c","tarball":"https://registry.npmjs.org/@acsrocha/ui/-/ui-1.0.0.tgz","fileCount":11,"unpackedSize":697358,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC6KeWUnocbLrsMCltwyIQl07Bt/k4qRNuX/+tJaUyyqgIhAO8OIIp2fx5jcJtbEor41Ap0KmOiQ+UXfumBXV3T2Pz5"}]},"_npmUser":{"name":"acsrocha","email":"karlwide.karl@gmail.com"},"directories":{},"maintainers":[{"name":"acsrocha","email":"karlwide.karl@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_1.0.0_1773864293340_0.18085589280651937"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-18T20:04:53.191Z","1.0.0":"2026-03-18T20:04:53.554Z","modified":"2026-03-18T20:04:53.843Z"},"maintainers":[{"name":"acsrocha","email":"karlwide.karl@gmail.com"}],"description":"Biblioteca de componentes React reutilizáveis por Carlos Rocha","author":{"name":"Carlos Rocha"},"license":"MIT","readme":"# @csrocha/ui\n\nBiblioteca de componentes React reutilizáveis por Carlos Rocha.\n\nConstruída sobre Tailwind CSS + shadcn/ui primitivos, com componentes de alto nível para sistemas de gestão.\n\n---\n\n## Instalação\n\n```bash\nnpm install @csrocha/ui\n```\n\n### Dependências peer obrigatórias\n\n```bash\nnpm install react react-dom framer-motion @tanstack/react-query\n```\n\n---\n\n## Configuração\n\n### 1. Importar o CSS do tema\n\nNo `main.tsx` ou `App.tsx` do projeto consumidor:\n\n```tsx\nimport '@csrocha/ui/theme.css'\n```\n\n### 2. Configurar o Tailwind (obrigatório)\n\nNo `tailwind.config.js` do projeto consumidor, adicionar o path do pacote no `content`:\n\n```js\ncontent: [\n  './src/**/*.{js,ts,jsx,tsx}',\n  './node_modules/@csrocha/ui/dist/**/*.js', // ← adicionar esta linha\n],\n```\n\nE opcionalmente usar o preset para herdar as cores e tokens:\n\n```js\npresets: [require('@csrocha/ui/tailwind.preset')],\n```\n\n### 3. ThemeProvider (opcional — para customizar o tema)\n\n```tsx\nimport { ThemeProvider } from '@csrocha/ui'\n\n<ThemeProvider theme={{ primary: '217 91% 60%' }}>\n  <App />\n</ThemeProvider>\n```\n\n---\n\n## Uso\n\n```tsx\nimport { PageLayout, PageHeader, StatCard, DataTable, CardView, SmartFilterPanel } from '@csrocha/ui'\nimport { Users } from 'lucide-react'\n\nfunction MinhaPage() {\n  return (\n    <PageLayout\n      header={\n        <PageHeader\n          title=\"Usuários\"\n          icon={Users}\n          onRefresh={() => refetch()}\n        />\n      }\n      stats={[\n        { label: 'Total', value: 120, accentColor: 'blue' },\n        { label: 'Ativos', value: 98, accentColor: 'green' },\n      ]}\n      viewMode=\"table\"\n      tableContent={<DataTable columns={columns} data={data} total={120} />}\n    />\n  )\n}\n```\n\n---\n\n## Componentes\n\n| Componente | Descrição |\n|---|---|\n| `PageLayout` | Container padrão de páginas com header + stats + conteúdo |\n| `PageHeader` | Cabeçalho com título, ações, tabs e seletor de view mode |\n| `StatCard` | Card de métrica com suporte a accent colors e dark mode |\n| `DataTable` | Tabela completa com paginação, filtros, seleção e ordenação |\n| `CardView` | Grid de cards com react-query integrado, filtros e drawer |\n| `SmartFilterPanel` | Painel de filtros com badges, presets, histórico e URL sync |\n| `ConfirmDialog` | Dialog de confirmação com tipos (delete, edit, create, danger) |\n| `Toast` | Notificação flutuante com progress bar |\n| `ThemeProvider` | Injeta variáveis CSS de tema no `:root` |\n\n### Primitivos UI\n\n`Button` · `Badge` · `Card` · `Input` · `Table` · `Checkbox` · `Dialog`\n\n---\n\n## Tema\n\nO pacote usa variáveis CSS HSL. Você pode sobrescrever qualquer token:\n\n```css\n/* No CSS do seu projeto */\n@import '@csrocha/ui/theme.css';\n\n:root {\n  --primary: 217 91% 60%; /* azul em vez de verde */\n  --radius: 0.5rem;\n}\n```\n\n---\n\n## Publicação\n\n```bash\nnpm run build:all\nnpm publish --access public\n```\n","readmeFilename":"README.md","_rev":"1-b63306005828ebc5f7dfbaae4938a6d9"}