@almadar/ui 5.121.3 → 5.121.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.121.3",
+  "version": "5.121.4",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -117,7 +117,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@almadar/core": "^10.29.0",
+    "@almadar/core": "^10.30.0",
     "@almadar/evaluator": "^2.30.0",
     "@almadar/logger": "^1.9.0",
     "@almadar/runtime": "^6.33.0",

package/tailwind-preset.cjs

@@ -84,6 +84,13 @@ module.exports = {
   'ring-2',
   'ring-primary',
   
+  // Motion utilities (applied conditionally on open/close state)
+  'animate-modal-in',
+  'animate-modal-out',
+  'animate-overlay-in',
+  'animate-overlay-out',
+  'animate-slide-up',
+  
   // Auto-added by audit-tailwind-safelist.ts (2026-03-28)
   'active:scale-[var(--active-scale)]',
   'animate-[combat-flash_0.2s_ease-in-out_2]',
@@ -363,6 +370,55 @@ module.exports = {
         emphasized: 'var(--easing-emphasized, cubic-bezier(0.2, 0, 0, 1))',
         spring: 'var(--easing-spring, cubic-bezier(0.34, 1.56, 0.64, 1))',
       },
+      keyframes: {
+        'modal-in': {
+          '0%': {
+            opacity: 'var(--motion-modal-enter-from-opacity, 0)',
+            transform: 'var(--motion-modal-enter-from-transform, scale(0.96) translateY(8px))',
+          },
+          '100%': {
+            opacity: 'var(--motion-modal-enter-to-opacity, 1)',
+            transform: 'var(--motion-modal-enter-to-transform, translateZ(0))',
+          },
+        },
+        'modal-out': {
+          '0%': {
+            opacity: 'var(--motion-modal-exit-from-opacity, 1)',
+            transform: 'var(--motion-modal-exit-from-transform, translateZ(0))',
+          },
+          '100%': {
+            opacity: 'var(--motion-modal-exit-to-opacity, 0)',
+            transform: 'var(--motion-modal-exit-to-transform, scale(0.96) translateY(8px))',
+          },
+        },
+        'overlay-in': {
+          '0%': { opacity: 'var(--motion-overlay-from-opacity, 0)' },
+          '100%': { opacity: '1' },
+        },
+        'overlay-out': {
+          '0%': { opacity: '1' },
+          '100%': { opacity: 'var(--motion-overlay-from-opacity, 0)' },
+        },
+        'slide-up': {
+          '0%': {
+            opacity: 'var(--motion-slide-up-from-opacity, 0)',
+            transform: 'var(--motion-slide-up-from-transform, translateY(16px))',
+          },
+          '100%': {
+            opacity: '1',
+            transform: 'translateZ(0)',
+          },
+        },
+      },
+      animation: {
+        // Motion-token-driven durations/easings (fall back to legacy
+        // --transition-* so themes that haven't migrated keep working).
+        'modal-in': 'modal-in var(--duration-normal, var(--transition-normal, 250ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
+        'modal-out': 'modal-out var(--duration-fast, var(--transition-fast, 150ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
+        'overlay-in': 'overlay-in var(--duration-normal, var(--transition-normal, 250ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
+        'overlay-out': 'overlay-out var(--duration-fast, var(--transition-fast, 150ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
+        'slide-up': 'slide-up var(--duration-slow, var(--transition-slow, 400ms)) var(--easing-emphasized, cubic-bezier(0.2, 0, 0, 1))',
+      },
       // Density-axis spacing scale. Tailwind's default `p-3` / `gap-4` resolve
       // here so existing classes keep working — but now read from tokens.
       // Defaults match Tailwind's default (12px / 16px / 24px for 3 / 4 / 6),

package/themes/_base.css

@@ -121,4 +121,23 @@
     --card-padding-lg: 40px;
     --dialog-padding: 40px;
     --section-gap: 64px;
+
+    /* ----------------------------------------------------------------
+     * Motion-keyframe endpoints (animate-modal-in/out, animate-overlay-in/out,
+     * animate-slide-up). These are the "shape" of the built-in transitions;
+     * duration/easing come from --duration-* / --easing-*. Override any of
+     * these in a theme block to restyle the motion — e.g. a minimal theme
+     * sets --motion-modal-enter-from-transform: none for a pure fade.
+     * ---------------------------------------------------------------- */
+    --motion-overlay-from-opacity: 0;
+    --motion-modal-enter-from-opacity: 0;
+    --motion-modal-enter-from-transform: scale(0.96) translateY(8px);
+    --motion-modal-enter-to-opacity: 1;
+    --motion-modal-enter-to-transform: translateZ(0);
+    --motion-modal-exit-from-opacity: 1;
+    --motion-modal-exit-from-transform: translateZ(0);
+    --motion-modal-exit-to-opacity: 0;
+    --motion-modal-exit-to-transform: scale(0.96) translateY(8px);
+    --motion-slide-up-from-opacity: 0;
+    --motion-slide-up-from-transform: translateY(16px);
 }