@resval/react-responsive-values/types.d.ts

Resval stands for Responsive Values, which is a hook that can return a value based on the current breakpoint. This hook can also respond to the size of the window.

/**
 * Types Utils
 */
export declare type TNarrowable = string | number | boolean | symbol | undefined | void | null;
export declare type TRecordKeys = string | number | symbol;
export declare type TPrimitive<T = string> = T & {};
export declare type TCSSAbsoluteUnits = 'px' | 'cm' | 'mm' | 'Q' | 'in' | 'pc' | 'pt';
export declare type Numbs = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
export declare type TCSSRelativeUnits = 'em' | 'ex' | 'ch' | 'rem' | 'lh' | 'rlh' | 'vw' | 'vh' | 'vmin' | 'vmax' | 'vb' | 'vi' | 'svw' | 'svh' | 'lvw' | 'lvh' | 'dvw' | 'dvh';
/**
 * Types System
 */
export declare type TCSSSWidthValues<T extends string> = T extends `${infer Numb extends Numbs}${infer TUnit}` ? `${Numb}${TCSSSWidthValues<TUnit>}` : `${TCSSAbsoluteUnits | TCSSRelativeUnits}`;
export declare type TBreakpointsDefault = {
    base?: string;
    xs?: string;
    sm?: string;
    md?: string;
    lg?: string;
    xl?: string;
};
export declare type TBreakpointsOption<T extends Record<string, string>> = {
    [P in keyof T]: TCSSSWidthValues<T[P]> extends TCSSAbsoluteUnits | TCSSRelativeUnits ? `${number}${TCSSAbsoluteUnits | TCSSRelativeUnits}` : TCSSSWidthValues<T[P]>;
};
export declare type TMedia = 'min' | 'max';
export declare type TOptions<T extends Record<string, string>> = {
    breakpoints?: T extends TBreakpointsOption<T> ? T : TBreakpointsOption<T>;
    media: TMedia;
};
export declare type TBreakpointsTrack = {
    query: string;
    constraintWidth: string;
    status: boolean;
};