@j3m-quantum/ui 0.7.2 → 0.7.4

package/README.md

@@ -8,28 +8,16 @@ J3M Quantum UI - A themed component library based on shadcn/ui with J3M design t
 - 🌙 **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
+- 🎯 **Zero Config** - Radix UI included, just install and use
+- 🎬 **Smooth Animations** - Powered by tw-animate-css
 
 ## Installation
 
 ```bash
-npm install @j3m-quantum/ui
+npm install @j3m-quantum/ui tw-animate-css lucide-react
 ```
 
-### 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
-```
+That's it! All Radix UI primitives are bundled with the package.
 
 ## Quick Start
 
@@ -55,24 +43,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>
   )
 }
@@ -121,7 +119,7 @@ Combine with dark mode:
 
 ## Optional Dependencies
 
-Some components require additional dependencies:
+Some components require additional dependencies (installed only if you use them):
 
 | Component | Dependency | Install |
 |-----------|------------|---------|
@@ -151,6 +149,7 @@ Override CSS variables after the import:
 
 ```css
 @import "tailwindcss";
+@import "tw-animate-css";
 @import "@j3m-quantum/ui/styles";
 
 /* Custom overrides */
@@ -160,7 +159,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/dist/index.cjs

@@ -2670,7 +2670,7 @@ function Progress({
     {
       "data-slot": "progress",
       className: cn(
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        "bg-muted relative h-2 w-full overflow-hidden rounded-full",
         className
       ),
       ...props,