@anpdgovbr/shared-ui

/** * Sistema de Z-Index e Animações do GovBR Design System * * @security Camadas z-index organizadas previnem conflitos de sobreposição * @resilience Durações padronizadas garantem animações acessíveis (WCAG 2.1) * * Define camadas organizadas de z-index e propriedades de animação * baseadas no design system oficial para consistência visual. */ /** * Camadas de z-index organizadas * * Sistema de camadas para controlar a sobreposição de elementos * de forma consistente e previsível. */ export declare const zLayers: { readonly base: 0; readonly dropdown: 1000; readonly modal: 2000; readonly notification: 3000; readonly critical: 4000; readonly toast: 5000; }; /** * Tokens CSS de z-index */ export declare const zIndexTokens: { readonly '--z-index-layer-0': 0; readonly '--z-index-layer-1': 1000; readonly '--z-index-layer-2': 2000; readonly '--z-index-layer-3': 3000; readonly '--z-index-layer-4': 4000; readonly '--z-index-layer-5': 5000; }; /** * Durações de animação padronizadas */ export declare const animationDurations: { readonly instant: "50ms"; readonly quick: "150ms"; readonly base: "250ms"; readonly slow: "500ms"; readonly slowest: "800ms"; }; /** * Curvas de animação (easing functions) */ export declare const animationEasings: { readonly linear: "linear"; readonly base: "ease-out"; readonly accelerate: "cubic-bezier(0.4, 0, 1, 1)"; readonly decelerate: "cubic-bezier(0, 0, 0.2, 1)"; readonly ease: "cubic-bezier(0.4, 0, 0.2, 1)"; readonly bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"; readonly elastic: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"; }; /** * Propriedades de movimento/transform */ export declare const motionProperties: { readonly translate: { readonly sm: "4px"; readonly md: "8px"; readonly lg: "16px"; readonly xl: "32px"; }; readonly scale: { readonly sm: 0.95; readonly md: 0.9; readonly lg: 0.8; readonly grow: 1.05; readonly growLg: 1.1; }; readonly rotate: { readonly sm: "2deg"; readonly md: "5deg"; readonly lg: "10deg"; readonly quarter: "90deg"; readonly half: "180deg"; }; }; /** * Tokens CSS de animação compilados */ export declare const animationTokens: { readonly '--duration-instant': "50ms"; readonly '--duration-quick': "150ms"; readonly '--duration-base': "250ms"; readonly '--duration-slow': "500ms"; readonly '--duration-slowest': "800ms"; readonly '--animation-easing-linear': "linear"; readonly '--animation-easing-base': "ease-out"; readonly '--animation-easing-accelerate': "cubic-bezier(0.4, 0, 1, 1)"; readonly '--animation-easing-decelerate': "cubic-bezier(0, 0, 0.2, 1)"; readonly '--animation-easing-ease': "cubic-bezier(0.4, 0, 0.2, 1)"; readonly '--animation-easing-bounce': "cubic-bezier(0.68, -0.55, 0.265, 1.55)"; readonly '--animation-easing-elastic': "cubic-bezier(0.175, 0.885, 0.32, 1.275)"; }; /** * Animações pré-definidas comuns */ export declare const commonAnimations: { readonly fadeIn: { readonly from: { readonly opacity: 0; }; readonly to: { readonly opacity: 1; }; }; readonly fadeOut: { readonly from: { readonly opacity: 1; }; readonly to: { readonly opacity: 0; }; }; readonly slideInUp: { readonly from: { readonly opacity: 0; readonly transform: "translateY(16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateY(0)"; }; }; readonly slideInDown: { readonly from: { readonly opacity: 0; readonly transform: "translateY(-16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateY(0)"; }; }; readonly slideInLeft: { readonly from: { readonly opacity: 0; readonly transform: "translateX(-16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateX(0)"; }; }; readonly slideInRight: { readonly from: { readonly opacity: 0; readonly transform: "translateX(16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateX(0)"; }; }; readonly scaleIn: { readonly from: { readonly opacity: 0; readonly transform: "scale(0.9)"; }; readonly to: { readonly opacity: 1; readonly transform: "scale(1)"; }; }; readonly scaleOut: { readonly from: { readonly opacity: 1; readonly transform: "scale(1)"; }; readonly to: { readonly opacity: 0; readonly transform: "scale(0.9)"; }; }; readonly pulse: { readonly '0%': { readonly transform: "scale(1)"; }; readonly '50%': { readonly transform: "scale(1.05)"; }; readonly '100%': { readonly transform: "scale(1)"; }; }; readonly shake: { readonly '0%, 100%': { readonly transform: "translateX(0)"; }; readonly '25%': { readonly transform: "translateX(-4px)"; }; readonly '75%': { readonly transform: "translateX(4px)"; }; }; }; /** * Helpers para criar animações */ export declare const animationHelpers: { readonly transition: (property: string | string[], duration?: keyof typeof animationDurations, easing?: keyof typeof animationEasings) => string; readonly zIndex: (layer: keyof typeof zLayers) => { zIndex: 0 | 3000 | 4000 | 1000 | 2000 | 5000; }; readonly enterAnimation: (type: keyof typeof commonAnimations) => { '@keyframes enter': { readonly from: { readonly opacity: 0; }; readonly to: { readonly opacity: 1; }; } | { readonly from: { readonly opacity: 1; }; readonly to: { readonly opacity: 0; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateY(16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateY(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateY(-16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateY(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateX(-16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateX(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateX(16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateX(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "scale(0.9)"; }; readonly to: { readonly opacity: 1; readonly transform: "scale(1)"; }; } | { readonly from: { readonly opacity: 1; readonly transform: "scale(1)"; }; readonly to: { readonly opacity: 0; readonly transform: "scale(0.9)"; }; } | { readonly '0%': { readonly transform: "scale(1)"; }; readonly '50%': { readonly transform: "scale(1.05)"; }; readonly '100%': { readonly transform: "scale(1)"; }; } | { readonly '0%, 100%': { readonly transform: "translateX(0)"; }; readonly '25%': { readonly transform: "translateX(-4px)"; }; readonly '75%': { readonly transform: "translateX(4px)"; }; }; animation: string; }; readonly exitAnimation: (type: keyof typeof commonAnimations) => { '@keyframes exit': { readonly from: { readonly opacity: 0; }; readonly to: { readonly opacity: 1; }; } | { readonly from: { readonly opacity: 1; }; readonly to: { readonly opacity: 0; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateY(16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateY(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateY(-16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateY(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateX(-16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateX(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateX(16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateX(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "scale(0.9)"; }; readonly to: { readonly opacity: 1; readonly transform: "scale(1)"; }; } | { readonly from: { readonly opacity: 1; readonly transform: "scale(1)"; }; readonly to: { readonly opacity: 0; readonly transform: "scale(0.9)"; }; } | { readonly '0%': { readonly transform: "scale(1)"; }; readonly '50%': { readonly transform: "scale(1.05)"; }; readonly '100%': { readonly transform: "scale(1)"; }; } | { readonly '0%, 100%': { readonly transform: "translateX(0)"; }; readonly '25%': { readonly transform: "translateX(-4px)"; }; readonly '75%': { readonly transform: "translateX(4px)"; }; }; animation: string; }; }; /** * Mixins de animação para componentes específicos */ export declare const componentAnimations: { readonly button: { readonly hover: { readonly transition: string; readonly '&:hover': { readonly transform: "translateY(-4px)"; }; }; readonly pressed: { readonly '&:active': { readonly transform: "scale(0.95)"; readonly transition: string; }; }; }; readonly modal: { readonly backdrop: { readonly '@keyframes enter': { readonly from: { readonly opacity: 0; }; readonly to: { readonly opacity: 1; }; } | { readonly from: { readonly opacity: 1; }; readonly to: { readonly opacity: 0; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateY(16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateY(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateY(-16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateY(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateX(-16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateX(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateX(16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateX(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "scale(0.9)"; }; readonly to: { readonly opacity: 1; readonly transform: "scale(1)"; }; } | { readonly from: { readonly opacity: 1; readonly transform: "scale(1)"; }; readonly to: { readonly opacity: 0; readonly transform: "scale(0.9)"; }; } | { readonly '0%': { readonly transform: "scale(1)"; }; readonly '50%': { readonly transform: "scale(1.05)"; }; readonly '100%': { readonly transform: "scale(1)"; }; } | { readonly '0%, 100%': { readonly transform: "translateX(0)"; }; readonly '25%': { readonly transform: "translateX(-4px)"; }; readonly '75%': { readonly transform: "translateX(4px)"; }; }; readonly animation: string; }; readonly content: { readonly zIndex: 0 | 3000 | 4000 | 1000 | 2000 | 5000; readonly '@keyframes enter': { readonly from: { readonly opacity: 0; }; readonly to: { readonly opacity: 1; }; } | { readonly from: { readonly opacity: 1; }; readonly to: { readonly opacity: 0; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateY(16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateY(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateY(-16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateY(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateX(-16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateX(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateX(16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateX(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "scale(0.9)"; }; readonly to: { readonly opacity: 1; readonly transform: "scale(1)"; }; } | { readonly from: { readonly opacity: 1; readonly transform: "scale(1)"; }; readonly to: { readonly opacity: 0; readonly transform: "scale(0.9)"; }; } | { readonly '0%': { readonly transform: "scale(1)"; }; readonly '50%': { readonly transform: "scale(1.05)"; }; readonly '100%': { readonly transform: "scale(1)"; }; } | { readonly '0%, 100%': { readonly transform: "translateX(0)"; }; readonly '25%': { readonly transform: "translateX(-4px)"; }; readonly '75%': { readonly transform: "translateX(4px)"; }; }; readonly animation: string; }; }; readonly tooltip: { readonly enter: { readonly zIndex: 0 | 3000 | 4000 | 1000 | 2000 | 5000; readonly '@keyframes enter': { readonly from: { readonly opacity: 0; }; readonly to: { readonly opacity: 1; }; } | { readonly from: { readonly opacity: 1; }; readonly to: { readonly opacity: 0; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateY(16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateY(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateY(-16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateY(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateX(-16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateX(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateX(16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateX(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "scale(0.9)"; }; readonly to: { readonly opacity: 1; readonly transform: "scale(1)"; }; } | { readonly from: { readonly opacity: 1; readonly transform: "scale(1)"; }; readonly to: { readonly opacity: 0; readonly transform: "scale(0.9)"; }; } | { readonly '0%': { readonly transform: "scale(1)"; }; readonly '50%': { readonly transform: "scale(1.05)"; }; readonly '100%': { readonly transform: "scale(1)"; }; } | { readonly '0%, 100%': { readonly transform: "translateX(0)"; }; readonly '25%': { readonly transform: "translateX(-4px)"; }; readonly '75%': { readonly transform: "translateX(4px)"; }; }; readonly animation: string; }; readonly exit: { readonly '@keyframes exit': { readonly from: { readonly opacity: 0; }; readonly to: { readonly opacity: 1; }; } | { readonly from: { readonly opacity: 1; }; readonly to: { readonly opacity: 0; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateY(16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateY(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateY(-16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateY(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateX(-16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateX(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateX(16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateX(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "scale(0.9)"; }; readonly to: { readonly opacity: 1; readonly transform: "scale(1)"; }; } | { readonly from: { readonly opacity: 1; readonly transform: "scale(1)"; }; readonly to: { readonly opacity: 0; readonly transform: "scale(0.9)"; }; } | { readonly '0%': { readonly transform: "scale(1)"; }; readonly '50%': { readonly transform: "scale(1.05)"; }; readonly '100%': { readonly transform: "scale(1)"; }; } | { readonly '0%, 100%': { readonly transform: "translateX(0)"; }; readonly '25%': { readonly transform: "translateX(-4px)"; }; readonly '75%': { readonly transform: "translateX(4px)"; }; }; readonly animation: string; }; }; readonly notification: { readonly enter: { readonly zIndex: 0 | 3000 | 4000 | 1000 | 2000 | 5000; readonly '@keyframes enter': { readonly from: { readonly opacity: 0; }; readonly to: { readonly opacity: 1; }; } | { readonly from: { readonly opacity: 1; }; readonly to: { readonly opacity: 0; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateY(16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateY(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateY(-16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateY(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateX(-16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateX(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateX(16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateX(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "scale(0.9)"; }; readonly to: { readonly opacity: 1; readonly transform: "scale(1)"; }; } | { readonly from: { readonly opacity: 1; readonly transform: "scale(1)"; }; readonly to: { readonly opacity: 0; readonly transform: "scale(0.9)"; }; } | { readonly '0%': { readonly transform: "scale(1)"; }; readonly '50%': { readonly transform: "scale(1.05)"; }; readonly '100%': { readonly transform: "scale(1)"; }; } | { readonly '0%, 100%': { readonly transform: "translateX(0)"; }; readonly '25%': { readonly transform: "translateX(-4px)"; }; readonly '75%': { readonly transform: "translateX(4px)"; }; }; readonly animation: string; }; readonly exit: { readonly '@keyframes exit': { readonly from: { readonly opacity: 0; }; readonly to: { readonly opacity: 1; }; } | { readonly from: { readonly opacity: 1; }; readonly to: { readonly opacity: 0; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateY(16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateY(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateY(-16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateY(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateX(-16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateX(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "translateX(16px)"; }; readonly to: { readonly opacity: 1; readonly transform: "translateX(0)"; }; } | { readonly from: { readonly opacity: 0; readonly transform: "scale(0.9)"; }; readonly to: { readonly opacity: 1; readonly transform: "scale(1)"; }; } | { readonly from: { readonly opacity: 1; readonly transform: "scale(1)"; }; readonly to: { readonly opacity: 0; readonly transform: "scale(0.9)"; }; } | { readonly '0%': { readonly transform: "scale(1)"; }; readonly '50%': { readonly transform: "scale(1.05)"; }; readonly '100%': { readonly transform: "scale(1)"; }; } | { readonly '0%, 100%': { readonly transform: "translateX(0)"; }; readonly '25%': { readonly transform: "translateX(-4px)"; }; readonly '75%': { readonly transform: "translateX(4px)"; }; }; readonly animation: string; }; }; }; export type ZLayer = keyof typeof zLayers; export type AnimationDuration = keyof typeof animationDurations; export type AnimationEasing = keyof typeof animationEasings; export type CommonAnimation = keyof typeof commonAnimations; //# sourceMappingURL=motion.d.ts.map