/** * MultiSelect Dropdown Animations * * Shadcn-style animations with zoom + slide + fade * - Combined animation in single keyframe * - Side-aware based on dropdown position * - Smooth spring easing */ /** * Main dropdown content animations */ export declare const dropdownContentAnimations = "\n transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n\n /* Opening animations - Shadcn style with zoom */\n &[data-side='bottom'][data-state='open'] {\n animation: slideInFromTop 400ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n &[data-side='bottom'][data-state='closed'] {\n animation: slideOutToTop 300ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n &[data-side='top'][data-state='open'] {\n animation: slideInFromBottom 400ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n &[data-side='top'][data-state='closed'] {\n animation: slideOutToBottom 300ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n &[data-side='right'][data-state='open'] {\n animation: slideInFromLeft 400ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n &[data-side='right'][data-state='closed'] {\n animation: slideOutToLeft 300ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n &[data-side='left'][data-state='open'] {\n animation: slideInFromRight 400ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n &[data-side='left'][data-state='closed'] {\n animation: slideOutToRight 300ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n /* Shadcn-style keyframes with zoom + slide + fade */\n @keyframes slideInFromTop {\n from {\n opacity: 0;\n transform: translateY(-8px) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n\n @keyframes slideOutToTop {\n from {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n to {\n opacity: 0;\n transform: translateY(-8px) scale(0.95);\n }\n }\n\n @keyframes slideInFromBottom {\n from {\n opacity: 0;\n transform: translateY(8px) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n\n @keyframes slideOutToBottom {\n from {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n to {\n opacity: 0;\n transform: translateY(8px) scale(0.95);\n }\n }\n\n @keyframes slideInFromLeft {\n from {\n opacity: 0;\n transform: translateX(-8px) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translateX(0) scale(1);\n }\n }\n\n @keyframes slideOutToLeft {\n from {\n opacity: 1;\n transform: translateX(0) scale(1);\n }\n to {\n opacity: 0;\n transform: translateX(-8px) scale(0.95);\n }\n }\n\n @keyframes slideInFromRight {\n from {\n opacity: 0;\n transform: translateX(8px) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translateX(0) scale(1);\n }\n }\n\n @keyframes slideOutToRight {\n from {\n opacity: 1;\n transform: translateX(0) scale(1);\n }\n to {\n opacity: 0;\n transform: translateX(8px) scale(0.95);\n }\n }\n";