@anpdgovbr/shared-ui
Version:
Biblioteca de componentes React com MUI v7 e padrão GovBR-ds para ANPD
173 lines • 6.51 kB
TypeScript
/**
* Estados interativos avançados do GovBR Design System
*
* @security Valores de opacidade controlados previnem vazamento visual
* @resilience Estados padronizados (hover, focus, pressed) garantem feedback acessível (WCAG 2.1)
*
* Define estados como hover, pressed, focus, active, selected, disabled
* baseados no design system oficial GovBR para melhor feedback visual.
*/
/**
* Estados de hover por contexto
*/
export declare const hoverStates: {
readonly light: "var(--surface-opacity-xs, 0.05)";
readonly dark: "var(--surface-opacity-sm, 0.1)";
readonly interactive: "var(--surface-opacity-sm, 0.1)";
};
/**
* Estados pressed/active
*/
export declare const pressedStates: {
readonly light: "var(--surface-opacity-md, 0.2)";
readonly dark: "var(--surface-opacity-lg, 0.4)";
readonly interactive: "var(--surface-opacity-md, 0.2)";
};
/**
* Estados de focus
*/
export declare const focusStates: {
readonly style: "dashed";
readonly width: "var(--surface-width-lg, 4px)";
readonly offset: "var(--spacing-scale-half, 0.5rem)";
readonly color: {
readonly light: "var(--gold-vivid-40, #c2850c)";
readonly dark: "var(--gold-vivid-20, #ffbe2e)";
};
};
/**
* Estados especiais
*/
export declare const specialStates: {
readonly visited: {
readonly light: "var(--blue-warm-vivid-80, #0c326f)";
readonly dark: "var(--gray-20, #c5c5f3)";
};
readonly active: "var(--blue-warm-vivid-80, #0c326f)";
readonly selected: "var(--blue-warm-vivid-50, #2670e8)";
readonly on: "var(--blue-warm-vivid-40, #5992ed)";
readonly off: "var(--gray-20, #c5c5f3)";
readonly disabled: "var(--surface-opacity-lg, 0.4)";
};
/**
* Efeitos visuais de estado
*/
export declare const stateEffects: {
readonly hoverEffect: (rgb: string, opacity: string) => string;
readonly pressedEffect: (rgb: string, opacity: string) => string;
readonly transition: {
readonly fast: "150ms ease-out";
readonly base: "250ms ease-out";
readonly slow: "500ms ease-out";
};
};
/**
* Drag & Drop states (para funcionalidades avançadas)
*/
export declare const dragStates: {
readonly onDrag: {
readonly borderColor: "var(--interactive, #1351b4)";
readonly borderWidth: "var(--surface-width-md, 2px)";
readonly borderStyle: "solid";
readonly shadowBlur: "var(--surface-blur-lg, 16px)";
readonly opacity: "var(--surface-opacity-xl, 0.8)";
readonly rotate: "-5deg";
readonly cursor: "grabbing";
};
readonly draggable: {
readonly cursor: "grab";
readonly icon: "grip-vertical";
};
readonly dropZone: {
readonly borderColor: "var(--interactive, #1351b4)";
readonly borderWidth: "var(--surface-width-sm, 1px)";
readonly borderStyle: "dashed";
};
readonly onDrop: {
readonly background: "var(--interactive-rgb, 19, 81, 180)";
readonly opacity: "var(--surface-opacity-sm, 0.1)";
readonly cursor: "copy";
};
};
/**
* Tokens CSS de estados compilados
*/
export declare const stateTokens: {
readonly '--hover': "var(--hover-light)";
readonly '--hover-light': "var(--surface-opacity-xs, 0.05)";
readonly '--hover-dark': "var(--surface-opacity-sm, 0.1)";
readonly '--pressed': "var(--pressed-light)";
readonly '--pressed-light': "var(--surface-opacity-md, 0.2)";
readonly '--pressed-dark': "var(--surface-opacity-lg, 0.4)";
readonly '--focus-style': "dashed";
readonly '--focus-width': "var(--surface-width-lg, 4px)";
readonly '--focus-offset': "var(--spacing-scale-half, 0.5rem)";
readonly '--focus-color': "var(--focus-color-light)";
readonly '--focus-color-light': "var(--gold-vivid-40, #c2850c)";
readonly '--focus-color-dark': "var(--gold-vivid-20, #ffbe2e)";
readonly '--visited': "var(--visited-light)";
readonly '--visited-light': "var(--blue-warm-vivid-80, #0c326f)";
readonly '--visited-dark': "var(--gray-20, #c5c5f3)";
readonly '--active': "var(--blue-warm-vivid-80, #0c326f)";
readonly '--selected': "var(--blue-warm-vivid-50, #2670e8)";
readonly '--on': "var(--blue-warm-vivid-40, #5992ed)";
readonly '--off': "var(--gray-20, #c5c5f3)";
readonly '--disabled': "var(--surface-opacity-lg, 0.4)";
readonly '--hover-effect': "color-mix(in srgb, var(--interactive, #1351B4) 12%, transparent)";
readonly '--pressed-effect': "color-mix(in srgb, var(--interactive, #1351B4) 20%, transparent)";
readonly '--ondrag-border-color': "var(--interactive, #1351b4)";
readonly '--ondrag-border-width': "var(--surface-width-md, 2px)";
readonly '--ondrag-border-style': "solid";
readonly '--ondrag-shadow-blur': "var(--surface-blur-lg, 16px)";
readonly '--ondrag-opacity': "var(--surface-opacity-xl, 0.8)";
readonly '--ondrag-rotate': "-5deg";
readonly '--ondrag-cursor': "grabbing";
readonly '--draggable-cursor': "grab";
readonly '--draggable-icon': "grip-vertical";
readonly '--dropzone-border-color': "var(--interactive, #1351b4)";
readonly '--dropzone-border-width': "var(--surface-width-sm, 1px)";
readonly '--dropzone-border-style': "dashed";
readonly '--ondrop-background': "var(--interactive-rgb, 19, 81, 180)";
readonly '--ondrop-opacity': "var(--surface-opacity-sm, 0.1)";
readonly '--ondrop-cursor': "copy";
};
/**
* Mixins/helpers para aplicar estados
*/
export declare const stateMixins: {
readonly hover: (element?: "button" | "link" | "card") => {
'&:hover': {
backgroundImage: string;
backgroundColor: string;
transition: "150ms ease-out";
};
};
readonly pressed: () => {
'&:active': {
backgroundImage: string;
transition: "150ms ease-out";
};
};
readonly focus: () => {
'&:focus': {
outline: string;
};
'&:focus-visible': {
outlineColor: string;
outlineStyle: string;
outlineWidth: string;
outlineOffset: string;
};
};
readonly disabled: () => {
'&:disabled': {
opacity: string;
cursor: string;
pointerEvents: string;
};
};
};
export type HoverState = keyof typeof hoverStates;
export type PressedState = keyof typeof pressedStates;
export type SpecialState = keyof typeof specialStates;
//# sourceMappingURL=states.d.ts.map