sgod-library-frontend/dist/esm/types/utils/responsive.d.ts

Thư viện component UI Frontend

export type BreakpointKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
export type DeviceType = 'mobile' | 'tablet' | 'desktop';
export type FluidSize = 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
export declare const FLUID_BREAKPOINTS: {
    readonly xs: "20rem";
    readonly sm: "30rem";
    readonly md: "48rem";
    readonly lg: "64rem";
    readonly xl: "80rem";
    readonly '2xl': "96rem";
    readonly '3xl': "120rem";
};
export declare const TAILWIND_BREAKPOINTS: {
    readonly xs: 320;
    readonly sm: 640;
    readonly md: 768;
    readonly lg: 1024;
    readonly xl: 1280;
    readonly '2xl': 1536;
};
export declare const createFluidGrid: (config: {
    type?: "auto-fit" | "auto-fill" | "fixed";
    minSize?: FluidSize | string;
    maxCols?: number;
    gap?: FluidSize;
    aspectRatio?: "square" | "video" | "photo" | "auto";
}) => string;
export declare const createFluidText: (config: {
    size?: FluidSize;
    weight?: "normal" | "medium" | "semibold" | "bold";
    responsive?: boolean;
}) => string;
export declare const createDisplayText: (config: {
    size?: "sm" | "md" | "lg" | "xl";
    weight?: "bold" | "black";
}) => string;
export declare const createFluidSpacing: (config: {
    size?: FluidSize;
    type?: "p" | "px" | "py" | "pt" | "pb" | "pl" | "pr" | "m" | "mx" | "my" | "mt" | "mb" | "ml" | "mr";
    context?: "element" | "container" | "section";
}) => string;
export declare const createFluidContainer: (config?: {
    maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "fluid";
    padding?: boolean;
    center?: boolean;
}) => string;
export declare const createFluidCard: (config?: {
    padding?: FluidSize;
    shadow?: "sm" | "md" | "lg" | "xl";
    rounded?: "sm" | "md" | "lg" | "xl";
    border?: boolean;
    hover?: boolean;
}) => string;
export declare const createViewportGrid: (config: {
    minWidth?: string;
    maxCols?: number;
    gap?: FluidSize;
}) => string;
export declare const createAspectRatioResponsive: (config: {
    widescreen?: string;
    standard?: string;
    mobile?: string;
}) => string;
export declare const fluidPresets: {
    container: {
        narrow: string;
        default: string;
        wide: string;
        fullwidth: string;
        fluid: string;
    };
    typography: {
        hero: string;
        title: string;
        subtitle: string;
        heading: string;
        subheading: string;
        body: string;
        caption: string;
        small: string;
    };
    grid: {
        cards: string;
        products: string;
        gallery: string;
        'viewport-cards': string;
        'viewport-products': string;
        'viewport-gallery': string;
    };
    spacing: {
        section: string;
        container: string;
        element: string;
        sectionMargin: string;
        elementMargin: string;
    };
    card: {
        default: string;
        compact: string;
        spacious: string;
        minimal: string;
    };
};
export declare const viewportUtils: {
    getViewportWidth: () => number;
    getViewportHeight: () => number;
    getAspectRatio: () => number;
    isWidescreen: () => boolean;
    getDeviceType: () => DeviceType;
    mediaQuery: (breakpoint: BreakpointKey) => string;
};
export declare const createResponsiveGrid: (config: {
    mobile?: number;
    tablet?: number;
    desktop?: number;
    gap?: "sm" | "md" | "lg";
}) => string;
export declare const createResponsiveText: (config: {
    size?: FluidSize;
    weight?: "normal" | "medium" | "semibold" | "bold";
    responsive?: boolean;
}) => string;
export declare const createResponsiveSpacing: (config: {
    mobile?: string;
    tablet?: string;
    desktop?: string;
    type?: "p" | "px" | "py" | "pt" | "pb" | "pl" | "pr" | "m" | "mx" | "my" | "mt" | "mb" | "ml" | "mr";
}) => string;
export declare const createResponsiveContainer: (config?: {
    maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "fluid";
    padding?: boolean;
    center?: boolean;
}) => string;
export declare const responsivePresets: {
    container: {
        narrow: string;
        default: string;
        wide: string;
        fullwidth: string;
        fluid: string;
    };
    text: {
        hero: string;
        title: string;
        subtitle: string;
        heading: string;
        subheading: string;
        body: string;
        caption: string;
        small: string;
    };
    grid: {
        cards: string;
        products: string;
        gallery: string;
        'viewport-cards': string;
        'viewport-products': string;
        'viewport-gallery': string;
    };
    spacing: {
        section: string;
        container: string;
        element: string;
        sectionMargin: string;
        elementMargin: string;
    };
};
export { fluidPresets as viewportPresets };