@j3m-quantum/ui 0.7.0 → 0.7.2

package/dist/styles/index.css

@@ -548,9 +548,29 @@ textarea,
 }
 
 /* ========================================
-   ANIMATIONS
+   ANIMATIONS (tw-animate-css compatible)
+   Composable animation system using CSS variables
    ======================================== */
 
+/* Keyframes */
+@keyframes enter {
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
+      scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))
+      rotate(var(--tw-enter-rotate, 0));
+  }
+}
+
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
+      scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))
+      rotate(var(--tw-exit-rotate, 0));
+  }
+}
+
 @keyframes accordion-down {
   from { height: 0; }
   to { height: var(--radix-accordion-content-height); }
@@ -561,24 +581,14 @@ textarea,
   to { height: 0; }
 }
 
-@keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes fade-out {
-  from { opacity: 1; }
-  to { opacity: 0; }
-}
-
-@keyframes zoom-in {
-  from { opacity: 0; transform: scale(0.95); }
-  to { opacity: 1; transform: scale(1); }
+@keyframes collapsible-down {
+  from { height: 0; }
+  to { height: var(--radix-collapsible-content-height); }
 }
 
-@keyframes zoom-out {
-  from { opacity: 1; transform: scale(1); }
-  to { opacity: 0; transform: scale(0.95); }
+@keyframes collapsible-up {
+  from { height: var(--radix-collapsible-content-height); }
+  to { height: 0; }
 }
 
 @keyframes spin {
@@ -586,6 +596,211 @@ textarea,
   to { transform: rotate(360deg); }
 }
 
+/* Base animation classes */
+.animate-in {
+  animation-name: enter;
+  animation-duration: 150ms;
+  animation-timing-function: ease-out;
+  --tw-enter-opacity: initial;
+  --tw-enter-scale: initial;
+  --tw-enter-rotate: initial;
+  --tw-enter-translate-x: initial;
+  --tw-enter-translate-y: initial;
+}
+
+.animate-out {
+  animation-name: exit;
+  animation-duration: 150ms;
+  animation-timing-function: ease-in;
+  --tw-exit-opacity: initial;
+  --tw-exit-scale: initial;
+  --tw-exit-rotate: initial;
+  --tw-exit-translate-x: initial;
+  --tw-exit-translate-y: initial;
+}
+
+/* Fade utilities */
+.fade-in { --tw-enter-opacity: 0; }
+.fade-in-0 { --tw-enter-opacity: 0; }
+.fade-in-5 { --tw-enter-opacity: 0.05; }
+.fade-in-10 { --tw-enter-opacity: 0.1; }
+.fade-in-20 { --tw-enter-opacity: 0.2; }
+.fade-in-25 { --tw-enter-opacity: 0.25; }
+.fade-in-30 { --tw-enter-opacity: 0.3; }
+.fade-in-40 { --tw-enter-opacity: 0.4; }
+.fade-in-50 { --tw-enter-opacity: 0.5; }
+.fade-in-60 { --tw-enter-opacity: 0.6; }
+.fade-in-70 { --tw-enter-opacity: 0.7; }
+.fade-in-75 { --tw-enter-opacity: 0.75; }
+.fade-in-80 { --tw-enter-opacity: 0.8; }
+.fade-in-90 { --tw-enter-opacity: 0.9; }
+.fade-in-95 { --tw-enter-opacity: 0.95; }
+.fade-in-100 { --tw-enter-opacity: 1; }
+
+.fade-out { --tw-exit-opacity: 0; }
+.fade-out-0 { --tw-exit-opacity: 0; }
+.fade-out-5 { --tw-exit-opacity: 0.05; }
+.fade-out-10 { --tw-exit-opacity: 0.1; }
+.fade-out-20 { --tw-exit-opacity: 0.2; }
+.fade-out-25 { --tw-exit-opacity: 0.25; }
+.fade-out-30 { --tw-exit-opacity: 0.3; }
+.fade-out-40 { --tw-exit-opacity: 0.4; }
+.fade-out-50 { --tw-exit-opacity: 0.5; }
+.fade-out-60 { --tw-exit-opacity: 0.6; }
+.fade-out-70 { --tw-exit-opacity: 0.7; }
+.fade-out-75 { --tw-exit-opacity: 0.75; }
+.fade-out-80 { --tw-exit-opacity: 0.8; }
+.fade-out-90 { --tw-exit-opacity: 0.9; }
+.fade-out-95 { --tw-exit-opacity: 0.95; }
+.fade-out-100 { --tw-exit-opacity: 1; }
+
+/* Zoom/Scale utilities */
+.zoom-in { --tw-enter-scale: 0; }
+.zoom-in-0 { --tw-enter-scale: 0; }
+.zoom-in-50 { --tw-enter-scale: 0.5; }
+.zoom-in-75 { --tw-enter-scale: 0.75; }
+.zoom-in-90 { --tw-enter-scale: 0.9; }
+.zoom-in-95 { --tw-enter-scale: 0.95; }
+.zoom-in-100 { --tw-enter-scale: 1; }
+.zoom-in-105 { --tw-enter-scale: 1.05; }
+.zoom-in-110 { --tw-enter-scale: 1.1; }
+.zoom-in-125 { --tw-enter-scale: 1.25; }
+.zoom-in-150 { --tw-enter-scale: 1.5; }
+
+.zoom-out { --tw-exit-scale: 0; }
+.zoom-out-0 { --tw-exit-scale: 0; }
+.zoom-out-50 { --tw-exit-scale: 0.5; }
+.zoom-out-75 { --tw-exit-scale: 0.75; }
+.zoom-out-90 { --tw-exit-scale: 0.9; }
+.zoom-out-95 { --tw-exit-scale: 0.95; }
+.zoom-out-100 { --tw-exit-scale: 1; }
+.zoom-out-105 { --tw-exit-scale: 1.05; }
+.zoom-out-110 { --tw-exit-scale: 1.1; }
+.zoom-out-125 { --tw-exit-scale: 1.25; }
+.zoom-out-150 { --tw-exit-scale: 1.5; }
+
+/* Slide utilities */
+.slide-in-from-top { --tw-enter-translate-y: -100%; }
+.slide-in-from-top-0 { --tw-enter-translate-y: 0px; }
+.slide-in-from-top-1 { --tw-enter-translate-y: -0.25rem; }
+.slide-in-from-top-2 { --tw-enter-translate-y: -0.5rem; }
+.slide-in-from-top-3 { --tw-enter-translate-y: -0.75rem; }
+.slide-in-from-top-4 { --tw-enter-translate-y: -1rem; }
+.slide-in-from-top-5 { --tw-enter-translate-y: -1.25rem; }
+.slide-in-from-top-6 { --tw-enter-translate-y: -1.5rem; }
+.slide-in-from-top-8 { --tw-enter-translate-y: -2rem; }
+.slide-in-from-top-10 { --tw-enter-translate-y: -2.5rem; }
+.slide-in-from-top-12 { --tw-enter-translate-y: -3rem; }
+.slide-in-from-top-16 { --tw-enter-translate-y: -4rem; }
+.slide-in-from-top-20 { --tw-enter-translate-y: -5rem; }
+.slide-in-from-top-24 { --tw-enter-translate-y: -6rem; }
+.slide-in-from-top-full { --tw-enter-translate-y: -100%; }
+
+.slide-in-from-bottom { --tw-enter-translate-y: 100%; }
+.slide-in-from-bottom-0 { --tw-enter-translate-y: 0px; }
+.slide-in-from-bottom-1 { --tw-enter-translate-y: 0.25rem; }
+.slide-in-from-bottom-2 { --tw-enter-translate-y: 0.5rem; }
+.slide-in-from-bottom-3 { --tw-enter-translate-y: 0.75rem; }
+.slide-in-from-bottom-4 { --tw-enter-translate-y: 1rem; }
+.slide-in-from-bottom-5 { --tw-enter-translate-y: 1.25rem; }
+.slide-in-from-bottom-6 { --tw-enter-translate-y: 1.5rem; }
+.slide-in-from-bottom-8 { --tw-enter-translate-y: 2rem; }
+.slide-in-from-bottom-10 { --tw-enter-translate-y: 2.5rem; }
+.slide-in-from-bottom-12 { --tw-enter-translate-y: 3rem; }
+.slide-in-from-bottom-16 { --tw-enter-translate-y: 4rem; }
+.slide-in-from-bottom-20 { --tw-enter-translate-y: 5rem; }
+.slide-in-from-bottom-24 { --tw-enter-translate-y: 6rem; }
+.slide-in-from-bottom-full { --tw-enter-translate-y: 100%; }
+
+.slide-in-from-left { --tw-enter-translate-x: -100%; }
+.slide-in-from-left-0 { --tw-enter-translate-x: 0px; }
+.slide-in-from-left-1 { --tw-enter-translate-x: -0.25rem; }
+.slide-in-from-left-2 { --tw-enter-translate-x: -0.5rem; }
+.slide-in-from-left-3 { --tw-enter-translate-x: -0.75rem; }
+.slide-in-from-left-4 { --tw-enter-translate-x: -1rem; }
+.slide-in-from-left-5 { --tw-enter-translate-x: -1.25rem; }
+.slide-in-from-left-6 { --tw-enter-translate-x: -1.5rem; }
+.slide-in-from-left-8 { --tw-enter-translate-x: -2rem; }
+.slide-in-from-left-10 { --tw-enter-translate-x: -2.5rem; }
+.slide-in-from-left-12 { --tw-enter-translate-x: -3rem; }
+.slide-in-from-left-16 { --tw-enter-translate-x: -4rem; }
+.slide-in-from-left-20 { --tw-enter-translate-x: -5rem; }
+.slide-in-from-left-24 { --tw-enter-translate-x: -6rem; }
+.slide-in-from-left-52 { --tw-enter-translate-x: -13rem; }
+.slide-in-from-left-full { --tw-enter-translate-x: -100%; }
+
+.slide-in-from-right { --tw-enter-translate-x: 100%; }
+.slide-in-from-right-0 { --tw-enter-translate-x: 0px; }
+.slide-in-from-right-1 { --tw-enter-translate-x: 0.25rem; }
+.slide-in-from-right-2 { --tw-enter-translate-x: 0.5rem; }
+.slide-in-from-right-3 { --tw-enter-translate-x: 0.75rem; }
+.slide-in-from-right-4 { --tw-enter-translate-x: 1rem; }
+.slide-in-from-right-5 { --tw-enter-translate-x: 1.25rem; }
+.slide-in-from-right-6 { --tw-enter-translate-x: 1.5rem; }
+.slide-in-from-right-8 { --tw-enter-translate-x: 2rem; }
+.slide-in-from-right-10 { --tw-enter-translate-x: 2.5rem; }
+.slide-in-from-right-12 { --tw-enter-translate-x: 3rem; }
+.slide-in-from-right-16 { --tw-enter-translate-x: 4rem; }
+.slide-in-from-right-20 { --tw-enter-translate-x: 5rem; }
+.slide-in-from-right-24 { --tw-enter-translate-x: 6rem; }
+.slide-in-from-right-52 { --tw-enter-translate-x: 13rem; }
+.slide-in-from-right-full { --tw-enter-translate-x: 100%; }
+
+.slide-out-to-top { --tw-exit-translate-y: -100%; }
+.slide-out-to-top-0 { --tw-exit-translate-y: 0px; }
+.slide-out-to-top-1 { --tw-exit-translate-y: -0.25rem; }
+.slide-out-to-top-2 { --tw-exit-translate-y: -0.5rem; }
+.slide-out-to-top-3 { --tw-exit-translate-y: -0.75rem; }
+.slide-out-to-top-4 { --tw-exit-translate-y: -1rem; }
+.slide-out-to-top-5 { --tw-exit-translate-y: -1.25rem; }
+.slide-out-to-top-6 { --tw-exit-translate-y: -1.5rem; }
+.slide-out-to-top-8 { --tw-exit-translate-y: -2rem; }
+.slide-out-to-top-full { --tw-exit-translate-y: -100%; }
+
+.slide-out-to-bottom { --tw-exit-translate-y: 100%; }
+.slide-out-to-bottom-0 { --tw-exit-translate-y: 0px; }
+.slide-out-to-bottom-1 { --tw-exit-translate-y: 0.25rem; }
+.slide-out-to-bottom-2 { --tw-exit-translate-y: 0.5rem; }
+.slide-out-to-bottom-3 { --tw-exit-translate-y: 0.75rem; }
+.slide-out-to-bottom-4 { --tw-exit-translate-y: 1rem; }
+.slide-out-to-bottom-5 { --tw-exit-translate-y: 1.25rem; }
+.slide-out-to-bottom-6 { --tw-exit-translate-y: 1.5rem; }
+.slide-out-to-bottom-8 { --tw-exit-translate-y: 2rem; }
+.slide-out-to-bottom-full { --tw-exit-translate-y: 100%; }
+
+.slide-out-to-left { --tw-exit-translate-x: -100%; }
+.slide-out-to-left-0 { --tw-exit-translate-x: 0px; }
+.slide-out-to-left-1 { --tw-exit-translate-x: -0.25rem; }
+.slide-out-to-left-2 { --tw-exit-translate-x: -0.5rem; }
+.slide-out-to-left-3 { --tw-exit-translate-x: -0.75rem; }
+.slide-out-to-left-4 { --tw-exit-translate-x: -1rem; }
+.slide-out-to-left-5 { --tw-exit-translate-x: -1.25rem; }
+.slide-out-to-left-6 { --tw-exit-translate-x: -1.5rem; }
+.slide-out-to-left-8 { --tw-exit-translate-x: -2rem; }
+.slide-out-to-left-52 { --tw-exit-translate-x: -13rem; }
+.slide-out-to-left-full { --tw-exit-translate-x: -100%; }
+
+.slide-out-to-right { --tw-exit-translate-x: 100%; }
+.slide-out-to-right-0 { --tw-exit-translate-x: 0px; }
+.slide-out-to-right-1 { --tw-exit-translate-x: 0.25rem; }
+.slide-out-to-right-2 { --tw-exit-translate-x: 0.5rem; }
+.slide-out-to-right-3 { --tw-exit-translate-x: 0.75rem; }
+.slide-out-to-right-4 { --tw-exit-translate-x: 1rem; }
+.slide-out-to-right-5 { --tw-exit-translate-x: 1.25rem; }
+.slide-out-to-right-6 { --tw-exit-translate-x: 1.5rem; }
+.slide-out-to-right-8 { --tw-exit-translate-x: 2rem; }
+.slide-out-to-right-52 { --tw-exit-translate-x: 13rem; }
+.slide-out-to-right-full { --tw-exit-translate-x: 100%; }
+
+/* Duration utilities */
+.duration-150 { animation-duration: 150ms; }
+.duration-200 { animation-duration: 200ms; }
+.duration-300 { animation-duration: 300ms; }
+.duration-500 { animation-duration: 500ms; }
+.duration-700 { animation-duration: 700ms; }
+.duration-1000 { animation-duration: 1000ms; }
+
+/* Accordion animations */
 .animate-accordion-down {
   animation: accordion-down 0.2s ease-out;
 }
@@ -594,14 +809,138 @@ textarea,
   animation: accordion-up 0.2s ease-out;
 }
 
-.animate-in {
-  animation: fade-in 0.2s ease-out, zoom-in 0.2s ease-out;
+/* Collapsible animations */
+.animate-collapsible-down {
+  animation: collapsible-down 0.2s ease-out;
 }
 
-.animate-out {
-  animation: fade-out 0.2s ease-in, zoom-out 0.2s ease-in;
+.animate-collapsible-up {
+  animation: collapsible-up 0.2s ease-out;
 }
 
+/* Spin animation */
 .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.0",
+  "version": "0.7.2",
   "description": "J3M UI Component Library - themed shadcn/ui components with design tokens",
   "type": "module",
   "main": "./dist/index.cjs",