{"_id":"@acadxp/xpui","_rev":"3-1dc5488d5d5b66271a13fb12e4b2d675","name":"@acadxp/xpui","dist-tags":{"latest":"0.1.0-beta.2"},"versions":{"0.1.0-beta.1":{"name":"@acadxp/xpui","version":"0.1.0-beta.1","keywords":["react","ui","components","tailwind","tailwindcss","pixel-art","retro","ui-library","design-system"],"author":{"url":"https://github.com/DripCode-Studio","name":"DripCode-Studio"},"license":"MIT","_id":"@acadxp/xpui@0.1.0-beta.1","maintainers":[{"name":"licode237","email":"lokoismael30@gmail.com"}],"homepage":"https://github.com/acadxp/xpui#readme","bugs":{"url":"https://github.com/acadxp/xpui/issues"},"dist":{"shasum":"4e866bae319fe1d1ee050b2e2c74aa92ea3dcd65","tarball":"https://registry.npmjs.org/@acadxp/xpui/-/xpui-0.1.0-beta.1.tgz","fileCount":14,"integrity":"sha512-32lM9FNI8+7zYfG8bd9I06L7B7Lwym7bdkNDfblt7ZriAyTKC/d61F6G4w8/uRoBEeX7HAnYGzJbJxdNyeeGXg==","signatures":[{"sig":"MEUCIDyNmlifitQUTdWuoTvJMMfy6CcmMUjeuwE6e5/ClPvEAiEAw5PJVkXtbcQ5oz8xeIUaoKX07OwQs1vMo0Ua83yImS0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@acadxp%2fxpui@0.1.0-beta.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":227348},"main":"./dist/xpui.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/xpui.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/xpui.js","require":"./dist/xpui.umd.cjs"},"./styles":"./dist/xpui.css"},"gitHead":"6a7bbe05bb76b25507bc4d3d52a70a1d0af51fcb","scripts":{"dev":"vite","lint":"eslint .","test":"vitest","build":"tsc -b && vite build","preview":"vite preview","publish":"npm publish --access public","test:ui":"vitest --ui","test:run":"vitest run","release:beta":"npm version prerelease --preid=beta && npm publish --tag beta && git push --follow-tags","release:major":"npm version major && npm publish && git push --follow-tags","release:minor":"npm version minor && npm publish && git push --follow-tags","release:patch":"npm version patch && npm publish && git push --follow-tags","test:coverage":"vitest --coverage"},"_npmUser":{"name":"licode237","email":"lokoismael30@gmail.com"},"repository":{"url":"git+https://github.com/acadxp/xpui.git","type":"git"},"_npmVersion":"10.8.2","description":"Game-inspired React component library for AcadXP","directories":{},"_nodeVersion":"20.19.5","dependencies":{"clsx":"^2.1.1","tailwind-merge":"^3.3.1","tailwind-variants":"^3.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.7","jsdom":"^27.1.0","react":"^19.1.1","eslint":"^9.36.0","vitest":"^4.0.8","globals":"^16.4.0","react-dom":"^19.1.1","@eslint/js":"^9.36.0","@vitest/ui":"^4.0.8","typescript":"~5.9.3","@types/node":"^24.6.0","tailwindcss":"^4.1.17","@types/react":"^19.1.16","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.1.9","@tailwindcss/vite":"^4.1.17","typescript-eslint":"^8.45.0","@vitejs/plugin-react":"^5.0.4","@testing-library/react":"^16.3.0","@testing-library/jest-dom":"^6.9.1","eslint-plugin-react-hooks":"^5.2.0","@testing-library/user-event":"^14.6.1","eslint-plugin-react-refresh":"^0.4.22"},"peerDependencies":{"react":"^19.1.1","react-dom":"^19.1.1","tailwindcss":"^4.1.17","@tailwindcss/vite":"^4.1.17"},"_npmOperationalInternal":{"tmp":"tmp/xpui_0.1.0-beta.1_1762580319221_0.04178575142259766","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.1.0-beta.2":{"name":"@acadxp/xpui","version":"0.1.0-beta.2","keywords":["react","ui","components","tailwind","tailwindcss","pixel-art","retro","ui-library","design-system"],"author":{"url":"https://github.com/DripCode-Studio","name":"DripCode-Studio"},"license":"MIT","_id":"@acadxp/xpui@0.1.0-beta.2","maintainers":[{"name":"licode237","email":"lokoismael30@gmail.com"}],"homepage":"https://github.com/acadxp/xpui#readme","bugs":{"url":"https://github.com/acadxp/xpui/issues"},"dist":{"shasum":"61e7a5aa3d3cb4d7810f6ad8ceff761b314bc683","tarball":"https://registry.npmjs.org/@acadxp/xpui/-/xpui-0.1.0-beta.2.tgz","fileCount":21,"integrity":"sha512-3bfsPBgqSfXGCFApSIcdGp/pdqk5+mydVzIuknH6uiF3AAIlsb7gvB8d6aBAyHjAla1vuVx+rWKdoTP9cvMZtQ==","signatures":[{"sig":"MEYCIQDZ/hP5yncrXCmH1gtyliTNWrD+RHkgQ2YPyYk5Q+JnfgIhANQzSf1eOKmWQgpof3NeCx1SJfTgeCn6SFbf1n3DMtOh","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@acadxp%2fxpui@0.1.0-beta.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":1042948},"main":"./dist/xpui.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/xpui.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/xpui.js","require":"./dist/xpui.umd.cjs"},"./styles":"./dist/xpui.css"},"gitHead":"9bd4ed55a7c27b0edd32ac67476fe11a75c3287d","scripts":{"dev":"storybook dev -p 6006","lint":"eslint .","test":"vitest","build":"tsc -b && vite build","preview":"storybook dev -p 6006","publish":"npm publish --access public","test:ui":"vitest --ui","test:run":"vitest run","storybook":"storybook dev -p 6006","release:beta":"npm version prerelease --preid=beta && npm publish --tag beta && git push --follow-tags","release:major":"npm version major && npm publish && git push --follow-tags","release:minor":"npm version minor && npm publish && git push --follow-tags","release:patch":"npm version patch && npm publish && git push --follow-tags","test:coverage":"vitest --coverage","build-storybook":"storybook build -o storybook-static","preview-storybook":"npx serve storybook-static"},"_npmUser":{"name":"licode237","email":"lokoismael30@gmail.com"},"repository":{"url":"git+https://github.com/acadxp/xpui.git","type":"git"},"_npmVersion":"10.8.2","description":"Game-inspired React component library for AcadXP","directories":{},"_nodeVersion":"20.19.5","dependencies":{"clsx":"^2.1.1","tailwind-merge":"^3.3.1","tailwind-variants":"^3.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.7","jsdom":"^27.1.0","react":"^19.1.1","eslint":"^9.36.0","vitest":"^4.0.8","globals":"^16.4.0","react-dom":"^19.1.1","storybook":"10.0.6","@eslint/js":"^9.36.0","@vitest/ui":"^4.0.8","typescript":"~5.9.3","@types/node":"^24.6.0","tailwindcss":"^4.1.17","@types/react":"^19.1.16","vite-plugin-dts":"^4.5.4","@storybook/react":"^10.0.6","@types/react-dom":"^19.1.9","@tailwindcss/vite":"^4.1.17","typescript-eslint":"^8.45.0","@vitejs/plugin-react":"^5.0.4","@storybook/addon-docs":"10.0.6","@storybook/react-vite":"10.0.6","@testing-library/react":"^16.3.0","eslint-plugin-storybook":"10.0.6","@testing-library/jest-dom":"^6.9.1","eslint-plugin-react-hooks":"^5.2.0","@storybook/addon-onboarding":"10.0.6","@testing-library/user-event":"^14.6.1","eslint-plugin-react-refresh":"^0.4.22"},"peerDependencies":{"react":"^19.1.1","react-dom":"^19.1.1","tailwindcss":"^4.1.17","@tailwindcss/vite":"^4.1.17"},"_npmOperationalInternal":{"tmp":"tmp/xpui_0.1.0-beta.2_1762593295259_0.1977779264088977","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2025-11-08T05:38:39.114Z","modified":"2026-07-20T20:53:54.536Z","0.1.0-beta.1":"2025-11-08T05:38:39.408Z","0.1.0-beta.2":"2025-11-08T09:14:55.551Z"},"bugs":{"url":"https://github.com/acadxp/xpui/issues"},"author":{"url":"https://github.com/DripCode-Studio","name":"DripCode-Studio"},"license":"MIT","homepage":"https://github.com/acadxp/xpui#readme","keywords":["react","ui","components","tailwind","tailwindcss","pixel-art","retro","ui-library","design-system"],"repository":{"url":"git+https://github.com/acadxp/xpui.git","type":"git"},"description":"Game-inspired React component library for AcadXP","maintainers":[{"name":"licode237","email":"lokoismael30@gmail.com"}],"readme":"<div align=\"center\">\n  <img src=\"./public/assets/favicon_io/android-chrome-512x512.png\" alt=\"xpui Logo\" width=\"200\"/>\n\n> The Playful React UI Library with pixel-art aesthetics\n\n[![npm version](https://img.shields.io/npm/v/@acadxp/xpui.svg)](https://www.npmjs.com/package/@acadxp/xpui)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)\n[![Tailwind CSS](https://img.shields.io/badge/Tailwind-Ready-38bdf8.svg)](https://tailwindcss.com/)\n\n[Documentation](https://xpui.vercel.app/) • [NPM Package](https://www.npmjs.com/package/@acadxp/xpui) • [Report Bug](https://github.com/acadxp/xpui/issues)\n\n</div>\n\n---\n\n## 🌟 Why xpui?\n\n**xpui** is a React UI library designed for developers who want to add a unique, game-inspired aesthetic to their applications. Perfect for:\n\n- 🎮 **Gaming platforms** and educational apps\n- 🎯 **AcadXP ecosystem** projects\n- 🎨 **Creative projects** that need a distinct retro look\n- 🚀 **Modern apps** with a nostalgic twist\n\nBuilt with modern web technologies and best practices, xpui combines the charm of pixel-art design with the power of React, TypeScript, and Tailwind CSS.\n\n## ✨ Features\n\n- 🎨 **Pixel-art styling** - Retro aesthetic with modern functionality\n- 🎯 **TypeScript** - Full type safety\n- 🎪 **Tailwind CSS** - Utility-first styling with tailwind-variants\n- 🧩 **Flexible** - Customizable with className overrides\n- ♿ **Accessible** - Built with accessibility in mind\n- 📦 **Lightweight** - Minimal dependencies\n\n## 📦 Installation\n\n```bash\nnpm install @acadxp/xpui\n# or\npnpm add @acadxp/xpui\n# or\nyarn add @acadxp/xpui\n```\n\n### Peer Dependencies\n\n```bash\nnpm install react react-dom tailwindcss @tailwindcss/vite\n```\n\n## 🚀 Quick Start\n\n### 1. Import styles in your app\n\n```tsx\nimport \"@acadxp/xpui/styles\";\n```\n\n### 2. Use components\n\n```tsx\nimport { Button } from \"@acadxp/xpui\";\n\nfunction App() {\n  return (\n    <Button variant=\"primary\" size=\"lg\" onClick={() => alert(\"Clicked!\")}>\n      Click Me!\n    </Button>\n  );\n}\n```\n\n## 📚 Components\n\n### Button\n\nA pixel-art styled button component with multiple variants and sizes.\n\n```tsx\nimport { Button } from \"@acadxp/xpui\";\n\n// Variants\n<Button variant=\"primary\">Primary</Button>\n<Button variant=\"secondary\">Secondary</Button>\n<Button variant=\"success\">Success</Button>\n<Button variant=\"danger\">Danger</Button>\n<Button variant=\"outline\">Outline</Button>\n\n// Sizes\n<Button size=\"sm\">Small</Button>\n<Button size=\"md\">Medium</Button>\n<Button size=\"lg\">Large</Button>\n\n// Pixelated font\n<Button pixelated>Retro Font</Button>\n<Button pixelated={false}>Normal Font</Button>\n\n// Custom styling\n<Button className=\"bg-purple-500 hover:bg-purple-600\">\n  Custom\n</Button>\n\n// Disabled\n<Button disabled>Disabled</Button>\n```\n\n#### Props\n\n| Prop                       | Type                                                             | Default     | Description                       |\n| -------------------------- | ---------------------------------------------------------------- | ----------- | --------------------------------- |\n| `variant`                  | `'primary' \\| 'secondary' \\| 'success' \\| 'danger' \\| 'outline'` | `'primary'` | Button color variant              |\n| `size`                     | `'sm' \\| 'md' \\| 'lg'`                                           | `'md'`      | Button size                       |\n| `pixelated`                | `boolean`                                                        | `true`      | Use monospace font for retro look |\n| `disabled`                 | `boolean`                                                        | `false`     | Disable the button                |\n| `className`                | `string`                                                         | -           | Additional CSS classes            |\n| All HTML button attributes | -                                                                | -           | onClick, type, etc.               |\n\n## 🛠️ Utilities\n\n### cn (Class Name Utility)\n\nMerge and conditionally apply CSS classes.\n\n```tsx\nimport { cn } from \"@acadxp/xpui\";\n\n<Button className={cn(\"custom-class\", isActive && \"active-class\")}>\n  Button\n</Button>;\n```\n\n## 🎨 Customization\n\nAll components support className overrides for full customization:\n\n```tsx\n<Button variant=\"primary\" className=\"rounded-full shadow-2xl border-4\">\n  Custom Styled\n</Button>\n```\n\n## 📖 More Components Coming Soon\n\n- 🎯 Input\n- 🎪 Card\n- 🎨 Badge\n- 📦 Modal\n- 🎭 Tooltip\n- 🎪 Dropdown\n- And more...\n\n## 🛠️ Development\n\nWant to contribute or run locally?\n\n```bash\n# Clone the repository\ngit clone https://github.com/acadxp/xpui.git\ncd xpui\n\n# Install dependencies\npnpm install\n\n# Start Storybook for development\npnpm dev\n\n# Build the library\npnpm build\n\n# Run tests\npnpm test\n```\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## 📄 License\n\nMIT © [DripCode-Studio](https://github.com/DripCode-Studio)\n\n---\n\n## 🔗 Links\n\n- [NPM Package](https://www.npmjs.com/package/@acadxp/xpui)\n- [GitHub Repository](https://github.com/acadxp/xpui)\n- [Report Issues](https://github.com/acadxp/xpui/issues)\n- [AcadXP Platform](https://acadxp.vercel.app/)\n\n---\n\n<div align=\"center\">\n  <p>Made with ❤️ by the <a href=\"https://dripcodestudio.com/\">DripCode Studio</a></p>\n  <p>⭐ Star us on GitHub if you find this project helpful!</p>\n</div>\n","readmeFilename":"README.md"}