@j3m-quantum/ui 0.7.2 → 0.7.3

package/README.md

@@ -9,11 +9,12 @@ J3M Quantum UI - A themed component library based on shadcn/ui with J3M design t
 - ✨ **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
+- 🎬 **Smooth Animations** - Powered by tw-animate-css
 
 ## Installation
 
 ```bash
-npm install @j3m-quantum/ui
+npm install @j3m-quantum/ui tw-animate-css
 ```
 
 ### Peer Dependencies
@@ -27,8 +28,19 @@ npm install react react-dom tailwindcss lucide-react
 Plus Radix UI primitives for each component you use:
 
 ```bash
-# Example for Button, Dialog, Select
+# Core components
 npm install @radix-ui/react-slot @radix-ui/react-dialog @radix-ui/react-select
+
+# All Radix packages (if using all components)
+npm install @radix-ui/react-accordion @radix-ui/react-alert-dialog @radix-ui/react-avatar \
+  @radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-context-menu \
+  @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-hover-card \
+  @radix-ui/react-label @radix-ui/react-menubar @radix-ui/react-navigation-menu \
+  @radix-ui/react-popover @radix-ui/react-progress @radix-ui/react-radio-group \
+  @radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-separator \
+  @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-switch \
+  @radix-ui/react-tabs @radix-ui/react-toggle @radix-ui/react-toggle-group \
+  @radix-ui/react-tooltip
 ```
 
 ## Quick Start
@@ -55,24 +67,34 @@ export default defineConfig({
 })
 ```
 
-### 3. Import Styles
+### 3. Import Styles (IMPORTANT ORDER)
 
 ```css
 /* src/index.css */
 @import "tailwindcss";
-@import "@j3m-quantum/ui/styles";
+@import "tw-animate-css";              /* Required for animations */
+@import "@j3m-quantum/ui/styles";      /* J3M theme and tokens */
 ```
 
+> ⚠️ **Order matters!** Import `tw-animate-css` before `@j3m-quantum/ui/styles` to ensure animations work correctly on Dialog, Sheet, Select, Popover, and other overlay components.
+
 ### 4. Use Components
 
 ```tsx
-import { Button, Card, Input } from '@j3m-quantum/ui'
+import { Button, Card, Input, Dialog, DialogTrigger, DialogContent } from '@j3m-quantum/ui'
 
 function App() {
   return (
     <Card>
       <Input placeholder="Enter email" />
-      <Button>Submit</Button>
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button>Open Dialog</Button>
+        </DialogTrigger>
+        <DialogContent>
+          <p>This dialog has smooth animations!</p>
+        </DialogContent>
+      </Dialog>
     </Card>
   )
 }
@@ -151,6 +173,7 @@ Override CSS variables after the import:
 
 ```css
 @import "tailwindcss";
+@import "tw-animate-css";
 @import "@j3m-quantum/ui/styles";
 
 /* Custom overrides */
@@ -160,7 +183,27 @@ Override CSS variables after the import:
 }
 ```
 
+## Troubleshooting
+
+### Animations not working (Dialog, Sheet, Select, etc.)
+Make sure you've:
+1. Installed `tw-animate-css`: `npm install tw-animate-css`
+2. Imported it **before** the J3M styles:
+   ```css
+   @import "tw-animate-css";
+   @import "@j3m-quantum/ui/styles";
+   ```
+
+### "Invalid hook call" error
+If using local file links during development, add `dedupe` to your Vite config:
+```typescript
+export default defineConfig({
+  resolve: {
+    dedupe: ["react", "react-dom"],
+  },
+})
+```
+
 ## License
 
 MIT
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@j3m-quantum/ui",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "J3M UI Component Library - themed shadcn/ui components with design tokens",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -53,6 +53,7 @@
     "react": ">=18",
     "react-dom": ">=18",
     "tailwindcss": ">=4",
+    "tw-animate-css": "^1.0.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.0",
     "@radix-ui/react-aspect-ratio": "^1.1.0",