@dndbuilder.com/react/dist/utils/style.d.ts

Drag and drop builder for React

import { Block, BlockAdvancedSettings, BlockConfig } from '../types/block';
import { Breakpoint, BreakpointConfig } from '../types/responsive';
import { BackgroundType, BoxShadow, DisplayFieldType, PseudoClass, SizeType, SpacingValue, TextShadow, TypographyType, UnitValue } from '../types/style';
import { ThemeSettings } from '../types/theme';
import { Styles } from 'free-style';

/**
 * Generates CSS styles for a specific block
 * @param blockId - The ID of the block
 * @param style - The styles to apply to the block
 * @returns A string of CSS with the block ID as the selector
 */
export declare const generateBlockStyle: (blockId: string, style: Styles) => string;
/**
 * Generates CSS styles for all blocks in the content
 * @param options - The options for generating content styles
 * @param options.content - The content blocks
 * @param options.themeSettings - The theme settings
 * @param options.breakpoints - The breakpoint configurations
 * @param options.config - The block configurations
 * @returns A string of CSS for all blocks
 */
export declare const generateContentStyles: ({ content, themeSettings, breakpoints, config, }: {
    content: Record<string, Block>;
    themeSettings: ThemeSettings;
    breakpoints: BreakpointConfig[];
    config: Record<string, BlockConfig>;
}) => string;
/**
 * Generates responsive styles for different breakpoints
 * @param breakpoints - The breakpoint configurations
 * @param callback - A function that returns styles for a specific breakpoint
 * @returns Styles object with media queries for different breakpoints
 */
export declare function generateResponsiveStyle(breakpoints: BreakpointConfig[], callback: (breakpoint: Breakpoint) => Styles): Styles;
/**
 * Generates styles for different pseudo-classes (hover, focus, etc.)
 * @param callback - A function that returns styles for a specific pseudo-class
 * @param pseudoClassesOptions - Optional list of pseudo-classes to generate styles for
 * @returns Styles object with pseudo-class selectors
 */
export declare function generatePseudoStyle(callback: (pseudoClass: PseudoClass) => Styles, pseudoClassesOptions?: PseudoClass[]): Styles;
/**
 * Generates advanced styles for a block based on its settings
 * @param options - The options for generating advanced styles
 * @param options.settings - The advanced settings for the block
 * @param options.breakpoints - The breakpoint configurations
 * @returns Styles object with advanced styling properties
 */
export declare function generateAdvancedStyle({ settings, breakpoints, }: {
    settings: BlockAdvancedSettings;
    breakpoints: BreakpointConfig[];
}): Styles;
export declare const generateDisplayStyle: (breakpoints: BreakpointConfig[], styles?: DisplayFieldType) => {
    [x: string]: Styles | import('free-style').PropertyValue | import('free-style').PropertyValue[];
    $unique?: boolean;
    $global?: boolean;
    $displayName?: string;
};
export declare const generateFontsUrl: (styles: string) => string;
export declare function generateFontSize(size?: SizeType): {
    fontSize: string;
    lineHeight: string;
};
export declare function generateSpacingValue(value?: SpacingValue): {
    top?: undefined;
    right?: undefined;
    bottom?: undefined;
    left?: undefined;
} | {
    top: string | undefined;
    right: string | undefined;
    bottom: string | undefined;
    left: string | undefined;
};
export declare function generateBgImageWithGradient({ type: bgType, image: backgroundImage, angle: bgGradientAngle, color1: bgGradientColor1, color2: bgGradientColor2, location1: bgGradientLocation1, location2: bgGradientLocation2, position: bgGradientPosition, gradientType: bgGradientType, }: {
    type?: BackgroundType;
    image?: string;
    angle?: UnitValue;
    color1?: string;
    color2?: string;
    location1?: UnitValue;
    location2?: UnitValue;
    position?: string;
    gradientType?: string;
}): string | undefined;
export declare function generateBgGradient({ type: bgType, angle: bgGradientAngle, color1: bgGradientColor1, color2: bgGradientColor2, location1: bgGradientLocation1, location2: bgGradientLocation2, position: bgGradientPosition, gradientType: bgGradientType, }: {
    type?: BackgroundType;
    angle?: UnitValue;
    color1?: string;
    color2?: string;
    location1?: UnitValue;
    location2?: UnitValue;
    position?: string;
    gradientType?: string;
}): string;
export declare function generateUnitValue(value?: UnitValue): string | undefined;
export declare function generateBorderWidth(value?: SpacingValue): {
    borderTopWidth: string | undefined;
    borderRightWidth: string | undefined;
    borderBottomWidth: string | undefined;
    borderLeftWidth: string | undefined;
} | undefined;
export declare function generateBorderRadius(value?: SpacingValue): {
    borderTopLeftRadius: string | undefined;
    borderTopRightRadius: string | undefined;
    borderBottomRightRadius: string | undefined;
    borderBottomLeftRadius: string | undefined;
} | undefined;
export declare function generateBoxShadow(value?: BoxShadow): string | undefined;
export declare function generateTextShadow(value?: TextShadow): string | undefined;
export declare function generateResponsiveVisibility({ hideOnDesktop, hideOnTablet, hideOnMobile, breakpoint, }: {
    hideOnDesktop?: boolean;
    hideOnTablet?: boolean;
    hideOnMobile?: boolean;
    breakpoint: Breakpoint;
}): {
    display: string;
} | {
    display: undefined;
};
export declare function generateTypography(breakpoints: BreakpointConfig[], typography?: TypographyType): {
    [x: string]: Styles | import('free-style').PropertyValue | import('free-style').PropertyValue[];
    $unique?: boolean;
    $global?: boolean;
    $displayName?: string;
};
export declare function generateTypographyFromBreakpoint(breakpoint: Breakpoint, typography?: TypographyType): Styles;
export declare function generateTypographyStyles(key: string, value: TypographyType, breakpoints: BreakpointConfig[]): Styles;
//# sourceMappingURL=style.d.ts.map