pixelforge-ui 1.0.0

package/README.md

@@ -0,0 +1,233 @@
+# PixelForge UI 🎮
+
+A **retro-future design system** with pixel-perfect components, Game Boy pastels, and dark mode. Built with React, TypeScript, and Tailwind CSS.
+
+![Version](https://img.shields.io/badge/version-1.0.0-blue)
+![License](https://img.shields.io/badge/license-MIT-green)
+![React](https://img.shields.io/badge/React-18+-61DAFB?logo=react)
+
+---
+
+## 🎨 Features
+
+- ✨ **Retro-Future Aesthetic** — Soft shadows, gentle glows, and pixel-perfect borders
+- 🌙 **Dark Mode** — Full light/dark theme support out of the box
+- 🎮 **Game Boy Palette** — Pastello colors inspired by classic gaming consoles
+- ♿ **Accessible** — WCAG 2.1 compliant components with keyboard navigation
+- 📦 **Tree-shakeable** — Import only what you need
+- 🎯 **TypeScript** — Full type safety
+- 🚀 **Zero Dependencies** — Works with any React app
+
+---
+
+## 📦 Installation
+
+```bash
+npm install @pixelforge/ui
+```
+
+or with yarn:
+
+```bash
+yarn add @pixelforge/ui
+```
+
+---
+
+## 🚀 Quick Start
+
+### 1. Setup Tailwind CSS
+
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+### 2. Configure Tailwind
+
+Update your `tailwind.config.js`:
+
+```js
+import { colors, spacing, shadows } from '@pixelforge/ui'
+
+export default {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {
+      colors,
+      spacing,
+      boxShadow: shadows,
+    },
+  },
+}
+```
+
+### 3. Use Components
+
+```tsx
+import { Button } from '@pixelforge/ui'
+import '@pixelforge/ui/dist/index.css'
+
+export default function App() {
+  return <Button>Press Start</Button>
+}
+```
+
+---
+
+## 📚 Design Tokens
+
+All design tokens are exported from the package:
+
+```tsx
+import {
+  colors,
+  typography,
+  spacing,
+  shadows,
+  borderRadius,
+  transitions,
+  zIndex,
+} from '@pixelforge/ui'
+```
+
+### Color Palette
+
+```tsx
+// Primary pastello colors
+colors.primary.lime      // #C4F0C8
+colors.primary.lavender  // #D4B5E8
+colors.primary.sky       // #B8E0F0
+colors.primary.peach     // #F0D9C8
+colors.primary.mint      // #C8F0E0
+
+// Semantic colors
+colors.semantic.success  // #7FD8B8
+colors.semantic.warning  // #FFB347
+colors.semantic.error    // #FF6B6B
+colors.semantic.info     // #B8E0F0
+```
+
+---
+
+## 🎮 Components
+
+### Available Components
+
+- ✅ Button
+- ✅ Input
+- ✅ Card
+- ✅ Badge
+- ✅ Modal
+- ✅ Dropdown
+- ✅ Tooltip
+- ✅ Navbar
+- ✅ Sidebar
+- ✅ Footer
+
+See the [documentation](./docs/index.html) for full usage examples.
+
+---
+
+## 🌙 Dark Mode
+
+Dark mode is supported via CSS class. Use a theme switcher in your app:
+
+```tsx
+export function ThemeToggle() {
+  const [isDark, setIsDark] = useState(false)
+
+  return (
+    <button
+      onClick={() => {
+        setIsDark(!isDark)
+        document.documentElement.classList.toggle('dark')
+      }}
+    >
+      {isDark ? '🌙' : '☀️'}
+    </button>
+  )
+}
+```
+
+---
+
+## 🛠️ Development
+
+Clone and install:
+
+```bash
+git clone https://github.com/yourusername/pixelforge-ui.git
+cd pixelforge-ui
+npm install
+```
+
+### Build
+
+```bash
+npm run build
+```
+
+### Watch Mode
+
+```bash
+npm run dev
+```
+
+### Type Check
+
+```bash
+npm run type-check
+```
+
+---
+
+## 📖 Documentation
+
+Full component documentation is available in the `/docs` folder.
+
+To run the documentation locally:
+
+```bash
+npm run docs
+```
+
+Then visit `http://localhost:8080`
+
+---
+
+## 🎨 Customization
+
+All tokens can be overridden in your `tailwind.config.js`:
+
+```js
+export default {
+  theme: {
+    extend: {
+      colors: {
+        pixelforge: {
+          lime: '#your-custom-color',
+        },
+      },
+    },
+  },
+}
+```
+
+---
+
+## 📄 License
+
+MIT © 2024 PixelForge UI
+
+---
+
+## 🤝 Contributing
+
+Contributions are welcome! Please open an issue or submit a pull request.
+
+---
+
+**Made with 🎮 by the PixelForge team**