{"_id":"@bloxanaut/ui","name":"@bloxanaut/ui","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@bloxanaut/ui","version":"0.1.0","description":"BLOXANAUT Design System - Space-themed UI components for React","author":{"name":"Blox Team"},"license":"MIT","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles.css":"./dist/styles.css"},"sideEffects":["**/*.css"],"scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist","prepublishOnly":"pnpm build","typecheck":"tsc --noEmit"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"dependencies":{"@radix-ui/react-avatar":"^1.1.11","@radix-ui/react-collapsible":"^1.1.12","@radix-ui/react-dialog":"^1.1.15","@radix-ui/react-dropdown-menu":"^2.1.16","@radix-ui/react-label":"^2.1.8","@radix-ui/react-popover":"^1.1.15","@radix-ui/react-progress":"^1.1.8","@radix-ui/react-select":"^2.2.6","@radix-ui/react-separator":"^1.1.8","@radix-ui/react-slider":"^1.2.0","@radix-ui/react-slot":"^1.2.4","@radix-ui/react-tabs":"^1.1.13","class-variance-authority":"^0.7.1","clsx":"^2.1.1","lucide-react":"^0.554.0","react-day-picker":"^9.13.0","tailwind-merge":"^3.4.0","vaul":"^1.1.2"},"devDependencies":{"@types/react":"^19.2.7","@types/react-dom":"^19.2.3","tsup":"^8.5.1","typescript":"^5.9.3"},"keywords":["react","ui","components","design-system","blox","bloxanaut","tailwind","radix-ui"],"repository":{"type":"git","url":"git+https://github.com/your-org/blox-design-system.git"},"homepage":"https://github.com/your-org/blox-design-system#readme","bugs":{"url":"https://github.com/your-org/blox-design-system/issues"},"_id":"@bloxanaut/ui@0.1.0","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-urMDraK6bvMe35zKe9K12ojpzadm1EOYFECYM39C02NM//0n23strHIjhiuS53aGcDUUbqw07bA2B/1IWGXhGQ==","shasum":"b0a7a08a11ef80b851352313bb1af7ce8cbefa1f","tarball":"https://registry.npmjs.org/@bloxanaut/ui/-/ui-0.1.0.tgz","fileCount":9,"unpackedSize":300591,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICZzXOQzKLzxMewp1QWKoCRSWnJxet8nQ21r928Lkm8eAiBrYtojJay7iR3DwH82W6hyShEew+CJArbjHYAC8MxfYA=="}]},"_npmUser":{"name":"kiwi_wirachit","email":"wirachit.cloud@gmail.com"},"directories":{},"maintainers":[{"name":"kiwi_wirachit","email":"wirachit.cloud@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_0.1.0_1766740968443_0.4801447201816338"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-26T09:22:48.347Z","0.1.0":"2025-12-26T09:22:48.586Z","modified":"2025-12-26T09:22:48.907Z"},"maintainers":[{"name":"kiwi_wirachit","email":"wirachit.cloud@gmail.com"}],"description":"BLOXANAUT Design System - Space-themed UI components for React","homepage":"https://github.com/your-org/blox-design-system#readme","keywords":["react","ui","components","design-system","blox","bloxanaut","tailwind","radix-ui"],"repository":{"type":"git","url":"git+https://github.com/your-org/blox-design-system.git"},"author":{"name":"Blox Team"},"bugs":{"url":"https://github.com/your-org/blox-design-system/issues"},"license":"MIT","readme":"# @blox/ui\n\n🚀 **BLOXANAUT Design System** - Space-themed UI components for React\n\nA collection of accessible, customizable UI components built with:\n- [Radix UI](https://radix-ui.com) primitives\n- [Tailwind CSS](https://tailwindcss.com) for styling\n- [class-variance-authority](https://cva.style) for variants\n- Full TypeScript support\n\n## Installation\n\n```bash\n# npm\nnpm install @blox/ui\n\n# pnpm\npnpm add @blox/ui\n\n# yarn\nyarn add @blox/ui\n```\n\n### Peer Dependencies\n\n```bash\npnpm add react react-dom\n```\n\n## Setup\n\n### 1. Import styles\n\nAdd the design tokens CSS to your app's entry point:\n\n```tsx\n// app/layout.tsx or _app.tsx\nimport '@blox/ui/styles.css';\n```\n\n### 2. Configure Tailwind (if using Tailwind)\n\nAdd the package to your content configuration:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  content: [\n    // ... your content paths\n    './node_modules/@blox/ui/dist/**/*.js',\n  ],\n  // ...\n};\n```\n\n## Usage\n\n```tsx\nimport { Button, Card, Input, Badge } from '@blox/ui';\n\nexport default function MyComponent() {\n  return (\n    <Card>\n      <Input placeholder=\"Enter your email\" />\n      <Button variant=\"default\">Subscribe</Button>\n      <Badge variant=\"solar\">NEW</Badge>\n    </Card>\n  );\n}\n```\n\n## Components\n\n| Component | Description |\n|-----------|-------------|\n| `Alert` | Notification messages |\n| `Avatar` | User avatars with fallback |\n| `Badge` | Status indicators and labels |\n| `Button` | Interactive buttons with variants |\n| `Calendar` | Date picker calendar |\n| `Card` | Content containers |\n| `Collapsible` | Expandable content sections |\n| `Dialog` | Modal dialogs |\n| `Drawer` | Bottom/side sheets |\n| `DropdownMenu` | Context menus |\n| `Input` | Text input fields |\n| `Label` | Form labels |\n| `Popover` | Floating content panels |\n| `Progress` | Progress bars |\n| `Select` | Dropdown selections |\n| `Separator` | Visual dividers |\n| `Sheet` | Side panels |\n| `Skeleton` | Loading placeholders |\n| `Slider` | Range input |\n| `Tabs` | Tabbed navigation |\n\n## Button Variants\n\n```tsx\n<Button variant=\"default\">Primary</Button>\n<Button variant=\"secondary\">Secondary</Button>\n<Button variant=\"outline\">Outline</Button>\n<Button variant=\"ghost\">Ghost</Button>\n<Button variant=\"solar\">Solar ⭐</Button>\n<Button variant=\"destructive\">Delete</Button>\n<Button variant=\"link\">Link</Button>\n```\n\n## Badge Variants\n\n```tsx\n<Badge variant=\"default\">Default</Badge>\n<Badge variant=\"secondary\">Secondary</Badge>\n<Badge variant=\"solar\">NEW ⭐</Badge>\n<Badge variant=\"success\">Success</Badge>\n<Badge variant=\"warning\">Warning</Badge>\n<Badge variant=\"destructive\">Error</Badge>\n<Badge variant=\"outline\">Outline</Badge>\n```\n\n## Theming\n\nThe design system uses CSS custom properties for theming. Override in your CSS:\n\n```css\n:root {\n  --blox-blue-bright: #00A3FF;  /* Your primary color */\n  --blox-amber-solar: #FFBC00;  /* Accent color */\n  /* ... see tokens.css for all variables */\n}\n```\n\n### Dark Mode\n\nAdd the `dark` class to your root element:\n\n```html\n<html class=\"dark\">\n  <!-- Your app -->\n</html>\n```\n\nOr use `data-theme=\"dark\"`:\n\n```html\n<html data-theme=\"dark\">\n  <!-- Your app -->\n</html>\n```\n\n## Utility Function\n\nThe `cn` utility helps merge Tailwind classes:\n\n```tsx\nimport { cn } from '@blox/ui';\n\nfunction MyComponent({ className }) {\n  return (\n    <div className={cn('base-classes', className)}>\n      Content\n    </div>\n  );\n}\n```\n\n---\n\n## Publishing to npm\n\n### First-time Setup\n\n1. **Create npm account** at [npmjs.com](https://www.npmjs.com/signup)\n\n2. **Login to npm**\n   ```bash\n   npm login\n   ```\n\n3. **Verify login**\n   ```bash\n   npm whoami\n   ```\n\n### Publishing\n\n```bash\n# Build the package\npnpm build\n\n# Publish (first time - creates the package)\nnpm publish --access public\n\n# Publish updates (bump version first)\nnpm version patch  # or minor, major\nnpm publish\n```\n\n### Scoped Package Setup\n\nSince `@blox/ui` is a scoped package, you need to either:\n\n**Option A: Use your npm username as scope**\n```json\n{\n  \"name\": \"@yourusername/ui\"\n}\n```\n\n**Option B: Create an npm organization**\n1. Go to npmjs.com → Your Avatar → Organizations → Create\n2. Name it \"blox\"\n3. Then publish with `--access public`\n\n### Versioning\n\n```bash\nnpm version patch  # 0.1.0 → 0.1.1 (bug fixes)\nnpm version minor  # 0.1.0 → 0.2.0 (new features)\nnpm version major  # 0.1.0 → 1.0.0 (breaking changes)\n```\n\n---\n\n## Project Structure\n\n```\nblox-design-system/\n├── src/\n│   ├── components/       # UI components\n│   │   ├── button.tsx\n│   │   ├── card.tsx\n│   │   └── ...\n│   ├── lib/\n│   │   └── utils.ts      # cn() utility\n│   ├── styles/\n│   │   └── tokens.css    # Design tokens\n│   └── index.ts          # Main entry\n├── dist/                 # Built output\n├── package.json\n├── tsconfig.json\n└── tsup.config.ts\n```\n\n## Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Build\npnpm build\n\n# Build in watch mode\npnpm dev\n\n# Typecheck\npnpm typecheck\n```\n\n## License\n\nMIT © Blox Team\n","readmeFilename":"README.md","_rev":"1-d99582249aa5417e969eb4b3295f60f3"}