@tempots/ui/dom/animatable.d.ts

Provides a higher level of renderables to help fast development with Tempo.

export type AnimatableProps = {
    width?: number;
    maxWidth?: number;
    minWidth?: number;
    height?: number;
    maxHeight?: number;
    minHeight?: number;
    lineHeight?: number;
    opacity?: number;
    top?: number;
    left?: number;
    right?: number;
    bottom?: number;
    padding?: number;
    paddingTop?: number;
    paddingBottom?: number;
    paddingLeft?: number;
    paddingRight?: number;
    margin?: number;
    marginTop?: number;
    marginBottom?: number;
    marginLeft?: number;
    marginRight?: number;
    fontSize?: number;
    letterSpacing?: number;
    color?: string;
    backgroundColor?: string;
    borderColor?: string;
    borderWidth?: number;
    borderRadius?: number;
    boxShadow?: string;
    textShadow?: string;
    outlineWidth?: number;
    outlineColor?: string;
    translateX?: number;
    translateY?: number;
    translateZ?: number;
    rotateX?: number;
    rotateY?: number;
    rotateZ?: number;
    scaleX?: number;
    scaleY?: number;
    scaleZ?: number;
    skewX?: number;
    skewY?: number;
    grayScale?: number;
    sepia?: number;
    saturate?: number;
    hueRotate?: number;
    invert?: number;
    brightness?: number;
    contrast?: number;
    blur?: number;
};
export type ColorChannels = [
    number,
    number,
    number,
    number,
    'rgba' | 'hex' | 'hsla'
];
export declare const parseColorChannels: (color: string) => ColorChannels;
export interface BoxShadow {
    inset: boolean;
    x: number;
    y: number;
    blur: number;
    spread: number;
    color: string;
}
export declare const colorChannelsToString: (channels: ColorChannels) => string;
export declare const interpolateColor: (startColor: string, endColor: string) => ((t: number) => string);
export declare const interpolateShadow: (startShadow: string, endShadow: string) => ((t: number) => string);
export declare const getComputedAnimatableProp: (styles: CSSStyleDeclaration, key: keyof AnimatableProps) => AnimatableProps[typeof key];
export declare const getComputedAnimatable: (el: HTMLElement, styles: AnimatableProps) => AnimatableProps;
export declare const applyAnimatableProp: (el: HTMLElement, key: keyof AnimatableProps, value: AnimatableProps[typeof key]) => void;
export declare const applyInterpolatedAnimatableProp: (el: HTMLElement, key: keyof AnimatableProps, from: AnimatableProps[typeof key], to: AnimatableProps[typeof key], progress: number) => void;
export declare const applyInterpolatedAnimatable: (el: HTMLElement, from: AnimatableProps, to: AnimatableProps, progress: number) => void;
export declare const applyAnimatable: (el: HTMLElement, styles: AnimatableProps) => void;