@autumnsgrove/groveengine 0.3.2 → 0.4.0

package/dist/ui/tokens/animation.d.ts

@@ -0,0 +1,417 @@
+/**
+ * Grove Design System - Animation Tokens
+ *
+ * Durations, easings, and animation definitions.
+ */
+export declare const duration: {
+    readonly fast: "150ms";
+    readonly DEFAULT: "200ms";
+    readonly slow: "300ms";
+    readonly slower: "500ms";
+};
+export declare const easing: {
+    readonly DEFAULT: "cubic-bezier(0.4, 0, 0.2, 1)";
+    readonly in: "cubic-bezier(0.4, 0, 1, 1)";
+    readonly out: "cubic-bezier(0, 0, 0.2, 1)";
+    readonly 'in-out': "cubic-bezier(0.4, 0, 0.2, 1)";
+    readonly bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
+    readonly soft: "cubic-bezier(0.25, 0.1, 0.25, 1)";
+};
+export declare const animations: {
+    readonly 'fade-in': {
+        readonly duration: "300ms";
+        readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly keyframes: {
+            readonly from: {
+                readonly opacity: 0;
+            };
+            readonly to: {
+                readonly opacity: 1;
+            };
+        };
+    };
+    readonly 'fade-out': {
+        readonly duration: "200ms";
+        readonly easing: "cubic-bezier(0.4, 0, 1, 1)";
+        readonly keyframes: {
+            readonly from: {
+                readonly opacity: 1;
+            };
+            readonly to: {
+                readonly opacity: 0;
+            };
+        };
+    };
+    readonly 'fade-in-up': {
+        readonly duration: "400ms";
+        readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly keyframes: {
+            readonly from: {
+                readonly opacity: 0;
+                readonly transform: "translateY(8px)";
+            };
+            readonly to: {
+                readonly opacity: 1;
+                readonly transform: "translateY(0)";
+            };
+        };
+    };
+    readonly 'fade-in-down': {
+        readonly duration: "400ms";
+        readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly keyframes: {
+            readonly from: {
+                readonly opacity: 0;
+                readonly transform: "translateY(-8px)";
+            };
+            readonly to: {
+                readonly opacity: 1;
+                readonly transform: "translateY(0)";
+            };
+        };
+    };
+    readonly grow: {
+        readonly duration: "400ms";
+        readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly keyframes: {
+            readonly from: {
+                readonly opacity: 0;
+                readonly transform: "scale(0.95)";
+            };
+            readonly to: {
+                readonly opacity: 1;
+                readonly transform: "scale(1)";
+            };
+        };
+    };
+    readonly shrink: {
+        readonly duration: "300ms";
+        readonly easing: "cubic-bezier(0.4, 0, 1, 1)";
+        readonly keyframes: {
+            readonly from: {
+                readonly opacity: 1;
+                readonly transform: "scale(1)";
+            };
+            readonly to: {
+                readonly opacity: 0;
+                readonly transform: "scale(0.95)";
+            };
+        };
+    };
+    readonly bloom: {
+        readonly duration: "500ms";
+        readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly keyframes: {
+            readonly '0%': {
+                readonly opacity: 0;
+                readonly transform: "scale(0.8)";
+            };
+            readonly '50%': {
+                readonly transform: "scale(1.02)";
+            };
+            readonly '100%': {
+                readonly opacity: 1;
+                readonly transform: "scale(1)";
+            };
+        };
+    };
+    readonly 'leaf-fall': {
+        readonly duration: "3000ms";
+        readonly easing: "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly iteration: "infinite";
+        readonly keyframes: {
+            readonly '0%': {
+                readonly transform: "translateY(-10px) rotate(0deg)";
+                readonly opacity: 0;
+            };
+            readonly '10%': {
+                readonly opacity: 1;
+            };
+            readonly '90%': {
+                readonly opacity: 1;
+            };
+            readonly '100%': {
+                readonly transform: "translateY(100px) rotate(45deg)";
+                readonly opacity: 0;
+            };
+        };
+    };
+    readonly 'leaf-sway': {
+        readonly duration: "4000ms";
+        readonly easing: "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly iteration: "infinite";
+        readonly keyframes: {
+            readonly '0%, 100%': {
+                readonly transform: "rotate(-3deg)";
+            };
+            readonly '50%': {
+                readonly transform: "rotate(3deg)";
+            };
+        };
+    };
+    readonly 'slide-in-right': {
+        readonly duration: "300ms";
+        readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly keyframes: {
+            readonly from: {
+                readonly opacity: 0;
+                readonly transform: "translateX(16px)";
+            };
+            readonly to: {
+                readonly opacity: 1;
+                readonly transform: "translateX(0)";
+            };
+        };
+    };
+    readonly 'slide-in-left': {
+        readonly duration: "300ms";
+        readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly keyframes: {
+            readonly from: {
+                readonly opacity: 0;
+                readonly transform: "translateX(-16px)";
+            };
+            readonly to: {
+                readonly opacity: 1;
+                readonly transform: "translateX(0)";
+            };
+        };
+    };
+    readonly 'slide-in-up': {
+        readonly duration: "300ms";
+        readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly keyframes: {
+            readonly from: {
+                readonly opacity: 0;
+                readonly transform: "translateY(16px)";
+            };
+            readonly to: {
+                readonly opacity: 1;
+                readonly transform: "translateY(0)";
+            };
+        };
+    };
+    readonly 'slide-in-down': {
+        readonly duration: "300ms";
+        readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly keyframes: {
+            readonly from: {
+                readonly opacity: 0;
+                readonly transform: "translateY(-16px)";
+            };
+            readonly to: {
+                readonly opacity: 1;
+                readonly transform: "translateY(0)";
+            };
+        };
+    };
+};
+export declare const animation: {
+    readonly duration: {
+        readonly fast: "150ms";
+        readonly DEFAULT: "200ms";
+        readonly slow: "300ms";
+        readonly slower: "500ms";
+    };
+    readonly easing: {
+        readonly DEFAULT: "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly in: "cubic-bezier(0.4, 0, 1, 1)";
+        readonly out: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly 'in-out': "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
+        readonly soft: "cubic-bezier(0.25, 0.1, 0.25, 1)";
+    };
+    readonly animations: {
+        readonly 'fade-in': {
+            readonly duration: "300ms";
+            readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+            readonly keyframes: {
+                readonly from: {
+                    readonly opacity: 0;
+                };
+                readonly to: {
+                    readonly opacity: 1;
+                };
+            };
+        };
+        readonly 'fade-out': {
+            readonly duration: "200ms";
+            readonly easing: "cubic-bezier(0.4, 0, 1, 1)";
+            readonly keyframes: {
+                readonly from: {
+                    readonly opacity: 1;
+                };
+                readonly to: {
+                    readonly opacity: 0;
+                };
+            };
+        };
+        readonly 'fade-in-up': {
+            readonly duration: "400ms";
+            readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+            readonly keyframes: {
+                readonly from: {
+                    readonly opacity: 0;
+                    readonly transform: "translateY(8px)";
+                };
+                readonly to: {
+                    readonly opacity: 1;
+                    readonly transform: "translateY(0)";
+                };
+            };
+        };
+        readonly 'fade-in-down': {
+            readonly duration: "400ms";
+            readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+            readonly keyframes: {
+                readonly from: {
+                    readonly opacity: 0;
+                    readonly transform: "translateY(-8px)";
+                };
+                readonly to: {
+                    readonly opacity: 1;
+                    readonly transform: "translateY(0)";
+                };
+            };
+        };
+        readonly grow: {
+            readonly duration: "400ms";
+            readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+            readonly keyframes: {
+                readonly from: {
+                    readonly opacity: 0;
+                    readonly transform: "scale(0.95)";
+                };
+                readonly to: {
+                    readonly opacity: 1;
+                    readonly transform: "scale(1)";
+                };
+            };
+        };
+        readonly shrink: {
+            readonly duration: "300ms";
+            readonly easing: "cubic-bezier(0.4, 0, 1, 1)";
+            readonly keyframes: {
+                readonly from: {
+                    readonly opacity: 1;
+                    readonly transform: "scale(1)";
+                };
+                readonly to: {
+                    readonly opacity: 0;
+                    readonly transform: "scale(0.95)";
+                };
+            };
+        };
+        readonly bloom: {
+            readonly duration: "500ms";
+            readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+            readonly keyframes: {
+                readonly '0%': {
+                    readonly opacity: 0;
+                    readonly transform: "scale(0.8)";
+                };
+                readonly '50%': {
+                    readonly transform: "scale(1.02)";
+                };
+                readonly '100%': {
+                    readonly opacity: 1;
+                    readonly transform: "scale(1)";
+                };
+            };
+        };
+        readonly 'leaf-fall': {
+            readonly duration: "3000ms";
+            readonly easing: "cubic-bezier(0.4, 0, 0.2, 1)";
+            readonly iteration: "infinite";
+            readonly keyframes: {
+                readonly '0%': {
+                    readonly transform: "translateY(-10px) rotate(0deg)";
+                    readonly opacity: 0;
+                };
+                readonly '10%': {
+                    readonly opacity: 1;
+                };
+                readonly '90%': {
+                    readonly opacity: 1;
+                };
+                readonly '100%': {
+                    readonly transform: "translateY(100px) rotate(45deg)";
+                    readonly opacity: 0;
+                };
+            };
+        };
+        readonly 'leaf-sway': {
+            readonly duration: "4000ms";
+            readonly easing: "cubic-bezier(0.4, 0, 0.2, 1)";
+            readonly iteration: "infinite";
+            readonly keyframes: {
+                readonly '0%, 100%': {
+                    readonly transform: "rotate(-3deg)";
+                };
+                readonly '50%': {
+                    readonly transform: "rotate(3deg)";
+                };
+            };
+        };
+        readonly 'slide-in-right': {
+            readonly duration: "300ms";
+            readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+            readonly keyframes: {
+                readonly from: {
+                    readonly opacity: 0;
+                    readonly transform: "translateX(16px)";
+                };
+                readonly to: {
+                    readonly opacity: 1;
+                    readonly transform: "translateX(0)";
+                };
+            };
+        };
+        readonly 'slide-in-left': {
+            readonly duration: "300ms";
+            readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+            readonly keyframes: {
+                readonly from: {
+                    readonly opacity: 0;
+                    readonly transform: "translateX(-16px)";
+                };
+                readonly to: {
+                    readonly opacity: 1;
+                    readonly transform: "translateX(0)";
+                };
+            };
+        };
+        readonly 'slide-in-up': {
+            readonly duration: "300ms";
+            readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+            readonly keyframes: {
+                readonly from: {
+                    readonly opacity: 0;
+                    readonly transform: "translateY(16px)";
+                };
+                readonly to: {
+                    readonly opacity: 1;
+                    readonly transform: "translateY(0)";
+                };
+            };
+        };
+        readonly 'slide-in-down': {
+            readonly duration: "300ms";
+            readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+            readonly keyframes: {
+                readonly from: {
+                    readonly opacity: 0;
+                    readonly transform: "translateY(-16px)";
+                };
+                readonly to: {
+                    readonly opacity: 1;
+                    readonly transform: "translateY(0)";
+                };
+            };
+        };
+    };
+};
+export type Duration = typeof duration;
+export type Easing = typeof easing;
+export type Animations = typeof animations;
+export type Animation = typeof animation;

package/dist/ui/tokens/animation.js

@@ -0,0 +1,139 @@
+/**
+ * Grove Design System - Animation Tokens
+ *
+ * Durations, easings, and animation definitions.
+ */
+export const duration = {
+    'fast': '150ms',
+    'DEFAULT': '200ms',
+    'slow': '300ms',
+    'slower': '500ms',
+};
+export const easing = {
+    'DEFAULT': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    'in': 'cubic-bezier(0.4, 0, 1, 1)',
+    'out': 'cubic-bezier(0, 0, 0.2, 1)',
+    'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    'bounce': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+    'soft': 'cubic-bezier(0.25, 0.1, 0.25, 1)',
+};
+export const animations = {
+    // Fade animations
+    'fade-in': {
+        duration: '300ms',
+        easing: easing.out,
+        keyframes: {
+            from: { opacity: 0 },
+            to: { opacity: 1 },
+        },
+    },
+    'fade-out': {
+        duration: '200ms',
+        easing: easing.in,
+        keyframes: {
+            from: { opacity: 1 },
+            to: { opacity: 0 },
+        },
+    },
+    'fade-in-up': {
+        duration: '400ms',
+        easing: easing.out,
+        keyframes: {
+            from: { opacity: 0, transform: 'translateY(8px)' },
+            to: { opacity: 1, transform: 'translateY(0)' },
+        },
+    },
+    'fade-in-down': {
+        duration: '400ms',
+        easing: easing.out,
+        keyframes: {
+            from: { opacity: 0, transform: 'translateY(-8px)' },
+            to: { opacity: 1, transform: 'translateY(0)' },
+        },
+    },
+    // Growth animations (organic)
+    'grow': {
+        duration: '400ms',
+        easing: easing.out,
+        keyframes: {
+            from: { opacity: 0, transform: 'scale(0.95)' },
+            to: { opacity: 1, transform: 'scale(1)' },
+        },
+    },
+    'shrink': {
+        duration: '300ms',
+        easing: easing.in,
+        keyframes: {
+            from: { opacity: 1, transform: 'scale(1)' },
+            to: { opacity: 0, transform: 'scale(0.95)' },
+        },
+    },
+    'bloom': {
+        duration: '500ms',
+        easing: easing.out,
+        keyframes: {
+            '0%': { opacity: 0, transform: 'scale(0.8)' },
+            '50%': { transform: 'scale(1.02)' },
+            '100%': { opacity: 1, transform: 'scale(1)' },
+        },
+    },
+    // Leaf animations
+    'leaf-fall': {
+        duration: '3000ms',
+        easing: easing['in-out'],
+        iteration: 'infinite',
+        keyframes: {
+            '0%': { transform: 'translateY(-10px) rotate(0deg)', opacity: 0 },
+            '10%': { opacity: 1 },
+            '90%': { opacity: 1 },
+            '100%': { transform: 'translateY(100px) rotate(45deg)', opacity: 0 },
+        },
+    },
+    'leaf-sway': {
+        duration: '4000ms',
+        easing: easing['in-out'],
+        iteration: 'infinite',
+        keyframes: {
+            '0%, 100%': { transform: 'rotate(-3deg)' },
+            '50%': { transform: 'rotate(3deg)' },
+        },
+    },
+    // Slide animations
+    'slide-in-right': {
+        duration: '300ms',
+        easing: easing.out,
+        keyframes: {
+            from: { opacity: 0, transform: 'translateX(16px)' },
+            to: { opacity: 1, transform: 'translateX(0)' },
+        },
+    },
+    'slide-in-left': {
+        duration: '300ms',
+        easing: easing.out,
+        keyframes: {
+            from: { opacity: 0, transform: 'translateX(-16px)' },
+            to: { opacity: 1, transform: 'translateX(0)' },
+        },
+    },
+    'slide-in-up': {
+        duration: '300ms',
+        easing: easing.out,
+        keyframes: {
+            from: { opacity: 0, transform: 'translateY(16px)' },
+            to: { opacity: 1, transform: 'translateY(0)' },
+        },
+    },
+    'slide-in-down': {
+        duration: '300ms',
+        easing: easing.out,
+        keyframes: {
+            from: { opacity: 0, transform: 'translateY(-16px)' },
+            to: { opacity: 1, transform: 'translateY(0)' },
+        },
+    },
+};
+export const animation = {
+    duration,
+    easing,
+    animations,
+};