@j3m-quantum/ui 0.3.0 → 0.7.0

package/README.md

@@ -0,0 +1,166 @@
+# @j3m-quantum/ui
+
+J3M Quantum UI - A themed component library based on shadcn/ui with J3M design tokens.
+
+## Features
+
+- 🎨 **J3M Design Tokens** - Orange primary, neutral grays, pill-shaped buttons
+- 🌙 **Dark Mode** - Full dark theme support via `.dark` class
+- ✨ **Glass Mode** - Frosted glass effects via `.theme-glass` class
+- 📦 **55+ Components** - All shadcn/ui components with J3M styling
+- 🎯 **TweakCN Style** - Single CSS import for complete theming
+
+## Installation
+
+```bash
+npm install @j3m-quantum/ui
+```
+
+### Peer Dependencies
+
+The package requires these peer dependencies:
+
+```bash
+npm install react react-dom tailwindcss lucide-react
+```
+
+Plus Radix UI primitives for each component you use:
+
+```bash
+# Example for Button, Dialog, Select
+npm install @radix-ui/react-slot @radix-ui/react-dialog @radix-ui/react-select
+```
+
+## Quick Start
+
+### 1. Setup Vite + Tailwind
+
+```bash
+npm create vite@latest my-app -- --template react-ts
+cd my-app
+npm install
+npm add -D tailwindcss @tailwindcss/vite
+```
+
+### 2. Configure Vite
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})
+```
+
+### 3. Import Styles
+
+```css
+/* src/index.css */
+@import "tailwindcss";
+@import "@j3m-quantum/ui/styles";
+```
+
+### 4. Use Components
+
+```tsx
+import { Button, Card, Input } from '@j3m-quantum/ui'
+
+function App() {
+  return (
+    <Card>
+      <Input placeholder="Enter email" />
+      <Button>Submit</Button>
+    </Card>
+  )
+}
+```
+
+## Theme Modes
+
+### Dark Mode
+
+Add the `dark` class to your root element:
+
+```tsx
+<div className="dark">
+  {/* Dark themed content */}
+</div>
+```
+
+### Glass Mode
+
+Add `theme-glass` class for frosted glass effects:
+
+```tsx
+<div className="theme-glass">
+  {/* Glass themed content */}
+</div>
+```
+
+Combine with dark mode:
+
+```tsx
+<div className="dark theme-glass">
+  {/* Dark glass themed content */}
+</div>
+```
+
+## Design Tokens
+
+| Token | Light | Dark |
+|-------|-------|------|
+| `--primary` | #F58446 | #F58446 |
+| `--background` | #FFFFFF | #333333 |
+| `--foreground` | #333333 | #FFFFFF |
+| `--muted` | #E8E8E8 | #4A4A4A |
+| `--destructive` | #FB3748 | #D00416 |
+| `--radius` | 12px | 12px |
+
+## Optional Dependencies
+
+Some components require additional dependencies:
+
+| Component | Dependency | Install |
+|-----------|------------|---------|
+| Calendar | react-day-picker, date-fns | `npm add react-day-picker date-fns` |
+| Carousel | embla-carousel-react | `npm add embla-carousel-react` |
+| Chart | recharts | `npm add recharts` |
+| Command | cmdk | `npm add cmdk` |
+| Drawer | vaul | `npm add vaul` |
+| Form | react-hook-form | `npm add react-hook-form` |
+| InputOTP | input-otp | `npm add input-otp` |
+| Resizable | react-resizable-panels | `npm add react-resizable-panels` |
+| Sonner | sonner | `npm add sonner` |
+
+## Exports
+
+```typescript
+// Components
+import { Button, Card, Dialog, ... } from '@j3m-quantum/ui'
+
+// Styles (CSS)
+import '@j3m-quantum/ui/styles'
+```
+
+## Customization
+
+Override CSS variables after the import:
+
+```css
+@import "tailwindcss";
+@import "@j3m-quantum/ui/styles";
+
+/* Custom overrides */
+:root {
+  --primary: #your-color;
+  --radius: 8px;
+}
+```
+
+## License
+
+MIT
+