@fylib/animation 0.1.0

package/dist/default-animations.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/default-animations.js

@@ -0,0 +1,603 @@
+import { animationEngine } from './engine';
+const buttonAnimationsCss = `
+.fy-anim-button-hover-soft:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.fy-anim-button-hover-glow:hover {
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
+}
+
+.fy-anim-button-hover-lift:hover {
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
+}
+
+.fy-anim-button-click-press:active {
+  transform: translateY(1px) scale(0.97);
+}
+`;
+const layoutAnimationsCss = `
+.fy-anim-layout-fade-in {
+  animation: fy-layout-fade-in 0.4s ease-out;
+}
+
+@keyframes fy-layout-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+`;
+const sidebarAnimationsCss = `
+.fy-anim-sidebar-slide-in {
+  animation: fy-sidebar-slide-in 0.25s ease-out;
+}
+
+.fy-anim-sidebar-slide-out {
+  animation: fy-sidebar-slide-out 0.25s ease-in;
+}
+
+@keyframes fy-sidebar-slide-in {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes fy-sidebar-slide-out {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+`;
+const headerMenuAnimationsCss = `
+.fy-anim-header-menu-dropdown-in {
+  animation: fy-header-menu-dropdown-in 0.25s ease-out;
+}
+.fy-anim-header-menu-dropdown-out {
+  animation: fy-header-menu-dropdown-out 0.25s ease-in;
+}
+@keyframes fy-header-menu-dropdown-in {
+  from { transform: translateY(-8px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+@keyframes fy-header-menu-dropdown-out {
+  from { transform: translateY(0); opacity: 1; }
+  to { transform: translateY(-8px); opacity: 0; }
+}
+
+.fy-anim-header-menu-macos-slide-in {
+  animation: fy-header-menu-macos-slide-in 0.3s ease-out;
+}
+.fy-anim-header-menu-macos-slide-out {
+  animation: fy-header-menu-macos-slide-out 0.26s ease-in;
+}
+@keyframes fy-header-menu-macos-slide-in {
+  from { transform: translateY(-16px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+@keyframes fy-header-menu-macos-slide-out {
+  from { transform: translateY(0); opacity: 1; }
+  to { transform: translateY(-16px); opacity: 0; }
+}
+`;
+const inputAnimationsCss = `
+.fy-anim-input-focus-glow:focus-within {
+  box-shadow: 0 0 0 2px rgba(var(--fy-colors-primary-rgb, 59,130,246), 0.45);
+  border-color: rgba(var(--fy-colors-primary-rgb, 59,130,246), 0.7);
+}
+
+.fy-anim-input-focus-soft:focus-within {
+  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35);
+}
+
+.fy-anim-input-success-pulse {
+  animation: fy-input-success-pulse 0.4s ease-out;
+}
+
+.fy-anim-input-error-shake {
+  animation: fy-input-error-shake 0.3s ease-in-out;
+}
+
+@keyframes fy-input-success-pulse {
+  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
+  100% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
+}
+
+@keyframes fy-input-error-shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-2px); }
+  75% { transform: translateX(2px); }
+}
+`;
+const tableAnimationsCss = `
+.fy-anim-table-fade-in {
+  animation: fy-table-fade-in 0.4s ease-out;
+}
+
+.fy-anim-table-row-enter {
+  animation: fy-table-row-enter 0.3s ease-out;
+}
+
+@keyframes fy-table-fade-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fy-table-row-enter {
+  from { opacity: 0; transform: translateX(-4px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+`;
+const cardAnimationsCss = `
+.fy-anim-card-fade-in {
+  animation: fy-card-fade-in 0.4s ease-out;
+}
+
+@keyframes fy-card-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+`;
+const selectAnimationsCss = `
+.fy-anim-select-focus-glow:focus-within {
+  box-shadow: 0 0 0 2px rgba(var(--fy-colors-primary-rgb, 59,130,246), 0.45);
+  border-color: rgba(var(--fy-colors-primary-rgb, 59,130,246), 0.7);
+}
+
+.fy-anim-select-focus-soft:focus-within {
+  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35);
+}
+
+.fy-anim-select-success-pulse {
+  animation: fy-select-success-pulse 0.4s ease-out;
+}
+
+.fy-anim-select-error-shake {
+  animation: fy-select-error-shake 0.3s ease-in-out;
+}
+
+@keyframes fy-select-success-pulse {
+  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
+  100% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
+}
+
+@keyframes fy-select-error-shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-2px); }
+  75% { transform: translateX(2px); }
+}
+`;
+const macosAnimationsCss = `
+.fy-anim-layout-macos-window-enter {
+  animation: fy-layout-macos-window-enter 0.45s ease-out;
+}
+
+@keyframes fy-layout-macos-window-enter {
+  0% {
+    opacity: 0;
+    transform: translateY(-12px) scale(0.98);
+  }
+  60% {
+    opacity: 1;
+    transform: translateY(2px) scale(1.01);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.fy-anim-sidebar-macos-slide-in {
+  animation: fy-sidebar-macos-slide-in 0.3s ease-out;
+}
+
+.fy-anim-sidebar-macos-slide-out {
+  animation: fy-sidebar-macos-slide-out 0.26s ease-in;
+}
+
+@keyframes fy-sidebar-macos-slide-in {
+  from {
+    transform: translateX(-16px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fy-sidebar-macos-slide-out {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-16px);
+    opacity: 0;
+  }
+}
+
+.fy-anim-input-focus-macos-glow:focus-within {
+  box-shadow: 0 0 0 2px rgba(var(--fy-colors-primary-rgb, 59,130,246), 0.45);
+  border-color: rgba(var(--fy-colors-primary-rgb, 59,130,246), 0.8);
+}
+
+.fy-anim-input-success-macos-pulse {
+  animation: fy-input-success-macos-pulse 0.45s ease-out;
+}
+
+@keyframes fy-input-success-macos-pulse {
+  0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.5); }
+  100% { box-shadow: 0 0 0 7px rgba(52, 199, 89, 0); }
+}
+
+.fy-anim-input-error-macos-shake {
+  animation: fy-input-error-macos-shake 0.35s ease-in-out;
+}
+
+@keyframes fy-input-error-macos-shake {
+  0%, 100% { transform: translateX(0); }
+  20% { transform: translateX(-3px); }
+  40% { transform: translateX(3px); }
+  60% { transform: translateX(-2px); }
+  80% { transform: translateX(2px); }
+}
+
+.fy-anim-card-macos-fade-in {
+  animation: fy-card-macos-fade-in 0.45s ease-out;
+}
+
+@keyframes fy-card-macos-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.99);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.fy-anim-button-hover-macos-soft:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
+}
+
+.fy-anim-button-click-macos-press:active {
+  transform: translateY(1px) scale(0.97);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+}
+`;
+const puffyAnimationsCss = `
+.fy-anim-button-puffy-bounce:hover {
+  transform: scale(1.05);
+  box-shadow: 0 8px 25px rgba(255, 133, 162, 0.4);
+}
+.fy-anim-button-puffy-press:active {
+  transform: scale(0.95);
+}
+.fy-anim-card-puffy-float {
+  animation: fy-puffy-float 3s ease-in-out infinite;
+}
+.fy-anim-input-puffy-glow:focus-within {
+  box-shadow: 0 0 0 4px rgba(255, 133, 162, 0.25);
+  border-color: #ff85a2;
+}
+.fy-anim-puffy-sparkle {
+  animation: fy-puffy-sparkle 1.5s ease-in-out infinite;
+  background: linear-gradient(90deg, #ff4d6d, #ff85a2, #ff4d6d);
+  background-size: 200% auto;
+}
+
+@keyframes fy-puffy-float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-6px); }
+}
+@keyframes fy-puffy-sparkle {
+  0% { background-position: 0% center; opacity: 0.8; }
+  50% { background-position: 100% center; opacity: 1; transform: scale(1.05); }
+  100% { background-position: 0% center; opacity: 0.8; }
+}
+`;
+const allAnimationsCss = `
+${buttonAnimationsCss}
+${layoutAnimationsCss}
+${sidebarAnimationsCss}
+${headerMenuAnimationsCss}
+${inputAnimationsCss}
+${tableAnimationsCss}
+${cardAnimationsCss}
+${selectAnimationsCss}
+${macosAnimationsCss}
+${puffyAnimationsCss}
+`;
+function injectCssOnce(id, css) {
+    if (typeof document === 'undefined')
+        return;
+    if (document.getElementById(id))
+        return;
+    const style = document.createElement('style');
+    style.id = id;
+    style.textContent = css;
+    document.head.appendChild(style);
+}
+injectCssOnce('fy-button-animations', buttonAnimationsCss);
+injectCssOnce('fy-layout-animations', layoutAnimationsCss);
+injectCssOnce('fy-sidebar-animations', sidebarAnimationsCss);
+injectCssOnce('fy-header-menu-animations', headerMenuAnimationsCss);
+injectCssOnce('fy-input-animations', inputAnimationsCss);
+injectCssOnce('fy-card-animations', cardAnimationsCss);
+injectCssOnce('fy-table-animations', tableAnimationsCss);
+injectCssOnce('fy-macos-animations', macosAnimationsCss);
+const modalAnimationsCss = `
+.fy-anim-modal-fade-in {
+  animation: fy-modal-fade-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.fy-anim-modal-fade-out {
+  animation: fy-modal-fade-out 0.22s cubic-bezier(0.4, 0, 1, 1);
+}
+@keyframes fy-modal-fade-in {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.96);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+@keyframes fy-modal-fade-out {
+  0% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.96);
+  }
+}
+`;
+const dropdownAnimationsCss = `
+.fy-anim-dropdown-in {
+  animation: fy-dropdown-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+  transform-origin: top right;
+}
+.fy-anim-dropdown-out {
+  animation: fy-dropdown-out 0.2s cubic-bezier(0.4, 0, 1, 1);
+  transform-origin: top right;
+}
+@keyframes fy-dropdown-in {
+  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+@keyframes fy-dropdown-out {
+  from { opacity: 1; transform: scale(1) translateY(0); }
+  to { opacity: 0; transform: scale(0.95) translateY(-8px); }
+}
+`;
+const accordionAnimationsCss = `
+.fy-accordion__panel {
+  overflow: hidden;
+  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, padding 0.3s ease;
+}
+.fy-anim-accordion-expand {
+  animation: fy-accordion-expand 0.3s ease-out;
+}
+.fy-anim-accordion-collapse {
+  animation: fy-accordion-collapse 0.25s ease-in;
+}
+@keyframes fy-accordion-expand {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes fy-accordion-collapse {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-4px); }
+}
+`;
+injectCssOnce('fy-modal-animations', modalAnimationsCss);
+injectCssOnce('fy-dropdown-animations', dropdownAnimationsCss);
+injectCssOnce('fy-accordion-animations', accordionAnimationsCss);
+animationEngine.registerAnimation({
+    name: 'button-hover-soft',
+    duration: 150,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'button-hover-glow',
+    duration: 150,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'button-hover-lift',
+    duration: 180,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'button-click-press',
+    duration: 120,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'button-click-ripple',
+    duration: 220,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'button-success-pulse',
+    duration: 300,
+    easing: 'ease-in-out'
+});
+animationEngine.registerAnimation({
+    name: 'button-error-shake',
+    duration: 300,
+    easing: 'ease-in-out'
+});
+animationEngine.registerAnimation({
+    name: 'layout-fade-in',
+    duration: 400,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'sidebar-slide-in',
+    duration: 250,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'sidebar-slide-out',
+    duration: 250,
+    easing: 'ease-in'
+});
+animationEngine.registerAnimation({
+    name: 'header-menu-dropdown-in',
+    duration: 250,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'header-menu-dropdown-out',
+    duration: 250,
+    easing: 'ease-in'
+});
+animationEngine.registerAnimation({
+    name: 'header-menu-macos-slide-in',
+    duration: 300,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'header-menu-macos-slide-out',
+    duration: 260,
+    easing: 'ease-in'
+});
+animationEngine.registerAnimation({
+    name: 'input-focus-glow',
+    duration: 200,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'input-focus-soft',
+    duration: 200,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'input-success-pulse',
+    duration: 400,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'input-error-shake',
+    duration: 300,
+    easing: 'ease-in-out'
+});
+animationEngine.registerAnimation({
+    name: 'card-fade-in',
+    duration: 400,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'layout-macos-window-enter',
+    duration: 450,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'sidebar-macos-slide-in',
+    duration: 300,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'sidebar-macos-slide-out',
+    duration: 260,
+    easing: 'ease-in'
+});
+animationEngine.registerAnimation({
+    name: 'input-focus-macos-glow',
+    duration: 220,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'input-success-macos-pulse',
+    duration: 450,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'input-error-macos-shake',
+    duration: 350,
+    easing: 'ease-in-out'
+});
+animationEngine.registerAnimation({
+    name: 'table-fade-in',
+    duration: 400,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'dropdown-in',
+    duration: 250,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'dropdown-out',
+    duration: 200,
+    easing: 'ease-in'
+});
+animationEngine.registerAnimation({
+    name: 'accordion-expand',
+    duration: 300,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'accordion-collapse',
+    duration: 250,
+    easing: 'ease-in'
+});
+animationEngine.registerAnimation({
+    name: 'table-row-enter',
+    duration: 300,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'table-macos-fade-in',
+    duration: 350,
+    easing: 'cubic-bezier(0.23, 1, 0.32, 1)'
+});
+animationEngine.registerAnimation({
+    name: 'card-macos-fade-in',
+    duration: 450,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'button-hover-macos-soft',
+    duration: 160,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'button-click-macos-press',
+    duration: 130,
+    easing: 'ease-out'
+});
+animationEngine.registerAnimation({
+    name: 'modal-fade-in',
+    duration: 280,
+    easing: 'cubic-bezier(0.22, 1, 0.36, 1)'
+});
+animationEngine.registerAnimation({
+    name: 'modal-fade-out',
+    duration: 220,
+    easing: 'cubic-bezier(0.4, 0, 1, 1)'
+});

package/dist/effects/default-effects.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/effects/default-effects.js

@@ -0,0 +1,14 @@
+import { animationEngine } from '../engine';
+animationEngine.registerEffect({ name: 'confetti', type: 'global' });
+animationEngine.registerEffect({ name: 'hearts', type: 'global' });
+animationEngine.registerEffect({ name: 'snow', type: 'global' });
+animationEngine.registerEffect({ name: 'bubbles', type: 'global' });
+animationEngine.registerEffect({ name: 'matrix', type: 'global' });
+animationEngine.registerEffect({ name: 'particles', type: 'global' });
+animationEngine.registerEffect({ name: 'stars', type: 'global' });
+animationEngine.registerEffect({ name: 'aurora', type: 'global' });
+animationEngine.registerEffect({ name: 'window-open', type: 'global' });
+animationEngine.registerEffect({ name: 'sidebar-slide-in', type: 'global' });
+animationEngine.registerEffect({ name: 'sidebar-slide-out', type: 'global' });
+animationEngine.registerEffect({ name: 'window-macos-sheet-open', type: 'global' });
+animationEngine.registerEffect({ name: 'window-macos-sheet-close', type: 'global' });

package/dist/effects/index.d.ts

@@ -0,0 +1 @@
+export type GlobalEffectName = 'confetti' | 'window-open' | 'sidebar-slide-in' | 'sidebar-slide-out';

package/dist/effects/index.js

@@ -0,0 +1 @@
+export {};

package/dist/engine.d.ts

@@ -0,0 +1,23 @@
+import { AnimationDefinition, EffectDefinition } from '@fylib/core';
+export interface AnimationPlugin {
+    name: string;
+    onBeforeAnimation?(animation: AnimationDefinition): void;
+    onAfterAnimation?(animation: AnimationDefinition): void;
+}
+export interface GlobalEffectPlugin {
+    name: string;
+    renderEffect(effect: EffectDefinition): void;
+}
+export declare class AnimationEngine {
+    private animations;
+    private effects;
+    private animationPlugins;
+    private globalEffectPlugins;
+    registerAnimation(animation: AnimationDefinition): void;
+    registerEffect(effect: EffectDefinition): void;
+    registerAnimationPlugin(plugin: AnimationPlugin): void;
+    registerGlobalEffectPlugin(plugin: GlobalEffectPlugin): void;
+    playAnimation(name: string): void;
+    triggerEffect(name: string, params?: Record<string, any>): void;
+}
+export declare const animationEngine: AnimationEngine;

package/dist/engine.js

@@ -0,0 +1,40 @@
+import { logger } from '@fylib/logger';
+export class AnimationEngine {
+    constructor() {
+        this.animations = new Map();
+        this.effects = new Map();
+        this.animationPlugins = [];
+        this.globalEffectPlugins = [];
+    }
+    registerAnimation(animation) {
+        this.animations.set(animation.name, animation);
+    }
+    registerEffect(effect) {
+        this.effects.set(effect.name, effect);
+    }
+    registerAnimationPlugin(plugin) {
+        this.animationPlugins.push(plugin);
+    }
+    registerGlobalEffectPlugin(plugin) {
+        this.globalEffectPlugins.push(plugin);
+    }
+    playAnimation(name) {
+        const animation = this.animations.get(name);
+        if (!animation)
+            return;
+        this.animationPlugins.forEach(p => p.onBeforeAnimation?.(animation));
+        logger.debug('Animation', `Playing animation: ${name}`, animation);
+        // Implementation would go here (e.g., CSS injection or Web Animations API)
+        this.animationPlugins.forEach(p => p.onAfterAnimation?.(animation));
+    }
+    triggerEffect(name, params) {
+        const effect = this.effects.get(name);
+        if (!effect)
+            return;
+        if (effect.type === 'global') {
+            const mergedEffect = params ? { ...effect, params: { ...effect.params, ...params } } : effect;
+            this.globalEffectPlugins.forEach(p => p.renderEffect(mergedEffect));
+        }
+    }
+}
+export const animationEngine = new AnimationEngine();

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import './default-animations';
+import './effects/default-effects';
+export * from './engine';
+export * from './types';
+export * from './effects';

package/dist/index.js

@@ -0,0 +1,5 @@
+import './default-animations';
+import './effects/default-effects';
+export * from './engine';
+export * from './types';
+export * from './effects';

package/dist/types.d.ts

@@ -0,0 +1,17 @@
+export type ButtonHoverAnimationName = 'button-hover-soft' | 'button-hover-glow' | 'button-hover-lift' | 'button-hover-macos-soft';
+export type ButtonClickAnimationName = 'button-click-press' | 'button-click-ripple' | 'button-click-macos-press';
+export type ButtonStateAnimationName = 'button-success-pulse' | 'button-error-shake' | 'button-success-macos-pulse' | 'button-error-macos-shake';
+export interface ButtonComponentAnimationsConfig {
+    hover?: ButtonHoverAnimationName;
+    click?: ButtonClickAnimationName;
+    success?: ButtonStateAnimationName;
+    error?: ButtonStateAnimationName;
+}
+export type InputFocusAnimationName = 'input-focus-glow' | 'input-focus-soft' | 'input-focus-macos-glow';
+export type InputStateAnimationName = 'input-success-pulse' | 'input-error-shake' | 'input-success-macos-pulse' | 'input-error-macos-shake';
+export type LayoutAnimationName = 'layout-fade-in' | 'layout-macos-window-enter';
+export type SidebarAnimationName = 'sidebar-slide-in' | 'sidebar-slide-out' | 'sidebar-macos-slide-in' | 'sidebar-macos-slide-out';
+export type HeaderMenuAnimationName = 'header-menu-slide-in' | 'header-menu-slide-out' | 'header-menu-macos-slide-in' | 'header-menu-macos-slide-out';
+export type CardAnimationName = 'card-fade-in' | 'card-macos-fade-in';
+export type TableAnimationName = 'table-fade-in' | 'table-row-enter' | 'table-macos-fade-in';
+export type ChartAnimationName = 'chart-fade-in' | 'chart-data-update';

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@fylib/animation",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],  
+   "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  },
+  "dependencies": {
+    "@fylib/core": "workspace:*",
+    "@fylib/logger": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "catalog:",
+    "@types/node": "catalog:"
+  }
+}