@j3m-quantum/ui 0.7.1 → 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/dist/styles/index.css

@@ -822,3 +822,125 @@ textarea,
 .animate-spin {
   animation: spin 1s linear infinite;
 }
+
+/* ========================================
+   DATA-STATE ANIMATION VARIANTS
+   For Radix UI components (Dialog, Select, Popover, etc.)
+   These match Tailwind's data-[state=*] variants
+   ======================================== */
+
+/* Open state - apply enter animation */
+[data-state="open"].animate-in,
+[data-state="open"] .animate-in {
+  animation-name: enter;
+  animation-duration: 150ms;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+}
+
+/* Closed state - apply exit animation */
+[data-state="closed"].animate-out,
+[data-state="closed"] .animate-out {
+  animation-name: exit;
+  animation-duration: 150ms;
+  animation-timing-function: ease-in;
+  animation-fill-mode: forwards;
+}
+
+/* Fade in/out with data-state */
+[data-state="open"].fade-in-0,
+[data-state="open"] .fade-in-0 { --tw-enter-opacity: 0; }
+
+[data-state="closed"].fade-out-0,
+[data-state="closed"] .fade-out-0 { --tw-exit-opacity: 0; }
+
+/* Zoom in/out with data-state */
+[data-state="open"].zoom-in-95,
+[data-state="open"] .zoom-in-95 { --tw-enter-scale: 0.95; }
+
+[data-state="open"].zoom-in-90,
+[data-state="open"] .zoom-in-90 { --tw-enter-scale: 0.90; }
+
+[data-state="closed"].zoom-out-95,
+[data-state="closed"] .zoom-out-95 { --tw-exit-scale: 0.95; }
+
+[data-state="closed"].zoom-out-90,
+[data-state="closed"] .zoom-out-90 { --tw-exit-scale: 0.90; }
+
+/* Slide in from directions with data-state */
+[data-state="open"].slide-in-from-top-2,
+[data-state="open"] .slide-in-from-top-2,
+[data-side="bottom"].slide-in-from-top-2 { --tw-enter-translate-y: -0.5rem; }
+
+[data-state="open"].slide-in-from-bottom-2,
+[data-state="open"] .slide-in-from-bottom-2,
+[data-side="top"].slide-in-from-bottom-2 { --tw-enter-translate-y: 0.5rem; }
+
+[data-state="open"].slide-in-from-left-2,
+[data-state="open"] .slide-in-from-left-2,
+[data-side="right"].slide-in-from-left-2 { --tw-enter-translate-x: -0.5rem; }
+
+[data-state="open"].slide-in-from-right-2,
+[data-state="open"] .slide-in-from-right-2,
+[data-side="left"].slide-in-from-right-2 { --tw-enter-translate-x: 0.5rem; }
+
+/* Sheet/Drawer slide animations */
+[data-state="open"].slide-in-from-right,
+[data-state="open"] .slide-in-from-right { --tw-enter-translate-x: 100%; }
+
+[data-state="open"].slide-in-from-left,
+[data-state="open"] .slide-in-from-left { --tw-enter-translate-x: -100%; }
+
+[data-state="open"].slide-in-from-top,
+[data-state="open"] .slide-in-from-top { --tw-enter-translate-y: -100%; }
+
+[data-state="open"].slide-in-from-bottom,
+[data-state="open"] .slide-in-from-bottom { --tw-enter-translate-y: 100%; }
+
+[data-state="closed"].slide-out-to-right,
+[data-state="closed"] .slide-out-to-right { --tw-exit-translate-x: 100%; }
+
+[data-state="closed"].slide-out-to-left,
+[data-state="closed"] .slide-out-to-left { --tw-exit-translate-x: -100%; }
+
+[data-state="closed"].slide-out-to-top,
+[data-state="closed"] .slide-out-to-top { --tw-exit-translate-y: -100%; }
+
+[data-state="closed"].slide-out-to-bottom,
+[data-state="closed"] .slide-out-to-bottom { --tw-exit-translate-y: 100%; }
+
+/* Navigation menu motion variants */
+[data-motion^="from-"].animate-in,
+[data-motion="from-start"].slide-in-from-left-52 { --tw-enter-translate-x: -13rem; }
+[data-motion="from-end"].slide-in-from-right-52 { --tw-enter-translate-x: 13rem; }
+
+[data-motion^="to-"].animate-out,
+[data-motion="to-start"].slide-out-to-left-52 { --tw-exit-translate-x: -13rem; }
+[data-motion="to-end"].slide-out-to-right-52 { --tw-exit-translate-x: 13rem; }
+
+/* Data-side variants (for popovers, dropdowns, tooltips) */
+[data-side="bottom"] {
+  --tw-enter-translate-y: -0.5rem;
+}
+[data-side="top"] {
+  --tw-enter-translate-y: 0.5rem;
+}
+[data-side="left"] {
+  --tw-enter-translate-x: 0.5rem;
+}
+[data-side="right"] {
+  --tw-enter-translate-x: -0.5rem;
+}
+
+/* Visible/hidden states (for NavigationMenu indicator) */
+[data-state="visible"].animate-in,
+[data-state="visible"] .animate-in {
+  animation-name: enter;
+  animation-duration: 150ms;
+}
+
+[data-state="hidden"].animate-out,
+[data-state="hidden"] .animate-out {
+  animation-name: exit;
+  animation-duration: 150ms;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@j3m-quantum/ui",
-  "version": "0.7.1",
+  "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",