{"_id":"@darksnow-ui/badge","name":"@darksnow-ui/badge","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@darksnow-ui/badge","version":"1.0.0","description":"badge component for DarkSnow UI","keywords":["react","badge","component","ui","darksnow","typescript"],"author":{"name":"Anderson Rosa"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/darksnow-ui/darksnow-ui.git","directory":"components/ui/badge"},"homepage":"https://github.com/darksnow-ui/darksnow-ui#readme","bugs":{"url":"https://github.com/darksnow-ui/darksnow-ui/issues"},"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"},"./styles.css":"./dist/styles.css"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"dependencies":{"class-variance-authority":"^0.7.1","clsx":"^2.1.1"},"devDependencies":{"@types/react":"^19.0.0","@types/react-dom":"^19.0.0","react":"^19.1.0","react-dom":"^19.1.0","tsup":"^8.5.0","typescript":"^5.3.3"},"scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist","typecheck":"tsc --noEmit","lint":"eslint src --ext ts,tsx","lint:fix":"eslint src --ext ts,tsx --fix"},"_id":"@darksnow-ui/badge@1.0.0","_integrity":"sha512-a69vK4CpvChTfnGn6ZEJWEt+82ssyfwmDIx2f0ulL8USp5hTbFS/KJ+425lHAKliqfsvv+rPfu03GY3rILOoSg==","_resolved":"/tmp/96baf08909698a3ea7653b2858bbf24f/darksnow-ui-badge-1.0.0.tgz","_from":"file:darksnow-ui-badge-1.0.0.tgz","_nodeVersion":"20.19.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-a69vK4CpvChTfnGn6ZEJWEt+82ssyfwmDIx2f0ulL8USp5hTbFS/KJ+425lHAKliqfsvv+rPfu03GY3rILOoSg==","shasum":"0710c1f051a6502f9c2065eedc1ddbf66c63569b","tarball":"https://registry.npmjs.org/@darksnow-ui/badge/-/badge-1.0.0.tgz","fileCount":8,"unpackedSize":14202,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAMu/DvrcK8SnEubjInpx1eLbPZfVh3s8Te5KjLdnKYDAiEA3J1ybQMffXZKGnbclr+ohfywUtMLmXXznkTP5W/TAfk="}]},"_npmUser":{"name":"andersondrosa","email":"andersondrosa@outlook.com"},"directories":{},"maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/badge_1.0.0_1749338978666_0.4010597967689158"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-07T23:29:38.557Z","1.0.0":"2025-06-07T23:29:38.839Z","modified":"2025-06-07T23:29:39.173Z"},"maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"description":"badge component for DarkSnow UI","homepage":"https://github.com/darksnow-ui/darksnow-ui#readme","keywords":["react","badge","component","ui","darksnow","typescript"],"repository":{"type":"git","url":"git+https://github.com/darksnow-ui/darksnow-ui.git","directory":"components/ui/badge"},"author":{"name":"Anderson Rosa"},"bugs":{"url":"https://github.com/darksnow-ui/darksnow-ui/issues"},"license":"MIT","readme":"# @darksnow-ui/badge\n\nA small status indicator or label component with multiple variants.\n\n## Installation\n\n```bash\nnpm install @darksnow-ui/badge\n# or\nyarn add @darksnow-ui/badge\n# or\npnpm add @darksnow-ui/badge\n```\n\n## Usage\n\n```tsx\nimport { Badge } from \"@darksnow-ui/badge\"\n\nexport function Example() {\n return (\n \n New\n \n )\n}\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `variant` | `\"default\" \\| \"secondary\" \\| \"destructive\" \\| \"outline\"` | `\"default\"` | Visual style variant |\n| `className` | `string` | - | Additional CSS classes |\n| `children` | `ReactNode` | - | Badge content |\n\n## Variants\n\n### Default\nPrimary badge with accent colors.\n\n```tsx\nDefault\n```\n\n### Secondary\nSubtle background, good for less important labels.\n\n```tsx\nSecondary\n```\n\n### Destructive\nFor warnings or error states.\n\n```tsx\nError\n```\n\n### Outline\nMinimal styling with border.\n\n```tsx\nOutline\n```\n\n## Examples\n\n### Basic Usage\n\n```tsx\nNew\n```\n\n### Status Indicators\n\n```tsx\n
\n Active\n Pending\n Failed\n Draft\n
\n```\n\n### With Icons\n\n```tsx\nimport { Check, X, Clock, AlertCircle } from \"lucide-react\"\n\n
\n \n \n Completed\n \n \n \n \n Failed\n \n \n \n \n Pending\n \n \n \n \n Warning\n \n
\n```\n\n### Notification Badges\n\n```tsx\n
\n \n \n 3\n \n
\n```\n\n### Team Member Roles\n\n```tsx\n
\n
\n
\n JD\n
\n
\n

John Doe

\n

john@example.com

\n
\n Admin\n
\n \n
\n
\n AB\n
\n
\n

Alice Brown

\n

alice@example.com

\n
\n Member\n
\n
\n```\n\n### Progress States\n\n```tsx\n
\n
\n Project Alpha\n In Progress\n
\n \n
\n Project Beta\n Completed\n
\n \n
\n Project Gamma\n Failed\n
\n \n
\n Project Delta\n Draft\n
\n
\n```\n\n### Category Tags\n\n```tsx\n
\n React\n TypeScript\n Tailwind CSS\n Node.js\n Next.js\n
\n```\n\n### All Variants Demo\n\n```tsx\n
\n Default\n Secondary\n Destructive\n Outline\n
\n```\n\n## Styling\n\nThe badge uses these CSS classes:\n\n- Base: `inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-theme-accent-sm focus:ring-offset-2`\n- `default`: `border-transparent bg-theme-accent text-theme-accent-content shadow-theme-sm hover:bg-theme-accent-on`\n- `secondary`: `border-transparent bg-theme-bg text-theme-content-subtle hover:bg-theme-bg-deep`\n- `destructive`: `border-transparent bg-theme-danger text-theme-danger-content shadow-theme-sm hover:bg-theme-danger-on`\n- `outline`: `text-theme-content border-theme-mark-light`\n\n## Accessibility\n\n- Uses semantic HTML with proper focus management\n- Supports keyboard navigation when interactive\n- Color contrast meets WCAG guidelines\n- Screen reader friendly\n\n## Theming\n\nThe badge uses CSS custom properties for theming:\n\n- `--theme-accent` - Default badge background\n- `--theme-accent-content` - Default badge text\n- `--theme-danger` - Destructive badge background\n- `--theme-bg` - Secondary badge background\n- `--theme-mark-light` - Outline badge border\n\n## Technical Details\n\n- Built with `class-variance-authority` for variant management\n- Uses `clsx` for conditional class names\n- Extends HTML div attributes\n- Small and lightweight component\n\n## License\n\nMIT © DarkSnow UI\n","readmeFilename":"README.md","_rev":"1-b7a5bcb5621274d3be5857860e00df9a"}