@revenuecat/purchases-ui-js/dist/utils/style-utils.d.ts

Web components for Paywalls. Powered by RevenueCat

import type { ComponentState, ImageMaskShapeType, ImageProps, PaywallData, TextNodeProps } from "../data/entities.js";
import { type BorderType, type ColorMode, type ColorType, type CornerRadiusType, type DimensionType, FontSizeTags, type ShadowType, type ShapeType, type SizeType, type Spacing } from "../types.js";
type MarginVariables = {
    "--margin-block-start": string;
    "--margin-inline-end": string;
    "--margin-block-end": string;
    "--margin-inline-start": string;
};
type PaddingVariables = {
    "--padding-block-start": string;
    "--padding-inline-end": string;
    "--padding-block-end": string;
    "--padding-inline-start": string;
};
type SpacingStyleVariables = MarginVariables | PaddingVariables;
export type TextComponentTags = "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
/**
 * Maps font size to appropriate HTML heading tag
 * @param fontSize - Key from FontSizeTags enum
 * @returns Corresponding HTML heading tag
 */
export declare function getTextComponentTag(fontSize: keyof typeof FontSizeTags): TextComponentTags;
/**
 * Gets color value based on color mode with fallback
 * @param params - Object containing color map, mode and fallback color
 * @returns Color value as string
 */
export declare function getColor({ colorMap, colorMode, fallback, }: {
    colorMap?: ColorType;
    colorMode?: ColorMode;
    fallback?: string;
}): string;
/**
 * Generates CSS border style string
 * @param border - Border configuration object
 * @param colorMode - Color mode (light/dark)
 * @returns CSS border style string
 */
export declare function getBorderStyle(border?: BorderType, colorMode?: ColorMode): string;
type CornerRadiusStyleVariables = {
    "--border-start-start-radius": string;
    "--border-start-end-radius": string;
    "--border-end-start-radius": string;
    "--border-end-end-radius": string;
};
/**
 * Generates CSS border radius style for corners
 * @param corners - Corner radius configuration
 * @returns CSS border radius string
 */
export declare function getCornerRadiusStyle(corners: CornerRadiusType): CornerRadiusStyleVariables;
type ComponentStyleVariables = {
    "--background": string;
    "--text-color": string;
    "--border": string;
    "--shadow": string;
} & CornerRadiusStyleVariables & SpacingStyleVariables;
/**
 * Generates comprehensive component styles including spacing, colors, borders and shadows
 * @param params - Component style configuration object
 * @returns CSS style object with component styles
 */
export declare function getComponentStyles({ background_color, border, margin, padding, color, colorMode, shape, shadow, }: {
    padding?: Spacing;
    margin?: Spacing;
    background_color?: ColorType;
    color?: ColorType;
    border?: BorderType;
    colorMode?: ColorMode;
    shape?: ShapeType;
    shadow?: ShadowType;
}): ComponentStyleVariables;
type SizeStyleVariables = {
    "--width": string;
    "--height": string;
    "--flex": string;
};
/**
 * Generates size-related CSS styles for components
 * @param size - Size configuration object
 * @returns CSS style object with size properties
 */
export declare function getSizeStyle(size: SizeType): SizeStyleVariables;
type InsetStyleVariables = {
    "--inset": string;
    "--transform": string;
};
export declare function getInsetStyles(dimension: DimensionType): InsetStyleVariables;
type DimensionVariableType = {
    "--direction": string;
    "--alignment": string;
    "--distribution": string;
    "--position": string;
    "--inset": string;
    "--transform": string;
};
/**
 * Generates dimension-related styles for stack components
 * @param dimension - Dimension configuration object
 * @returns CSS style object with flex layout properties
 */
export declare function getDimensionStyle(dimension: DimensionType): DimensionVariableType;
type TextStyleVariables = {
    "--text-align": string;
    "--font-weight": number | string;
    "--font-size": string;
    "--font-family": string;
    "--background-clip": string;
    "--text-fill-color": string;
    "--background": string;
};
/**
 * Generates text-related styles
 * @param props - Text component properties
 * @param colorMode - The currently selected ColorMode (dark/light)
 * @returns CSS style object with text formatting properties
 */
export declare function getTextStyles(props: TextNodeProps, colorMode?: ColorMode): TextStyleVariables;
/**
 * Converts a style object to a CSS string
 * @param styles - Object containing CSS properties and values
 * @returns CSS string
 */
export declare function stringifyStyles(styles: Record<string, string | number>): string;
/**
 * Given an instance of PaywallData, returns the id of the first package marked as `is_selected_by_default` if any.
 * @param paywallData
 * @returns the id of the first package marked as `is_selected_by_default` or undefined
 */
export declare function findSelectedPackageId(paywallData: PaywallData): string | undefined;
export declare const getActiveStateProps: <T>(overrides?: {
    states?: Record<string, T>;
}, componentState?: ComponentState) => T;
export declare function prefixObject(object?: Record<string, string | number>, prefix?: string): Record<string, string | number>;
export declare function getMaskPath(props: ImageProps & {
    imageAspectRatio: number;
}): string;
type MaskStyleVariables = {
    "--border-start-start-radius": string;
    "--border-start-end-radius": string;
    "--border-end-start-radius": string;
    "--border-end-end-radius": string;
};
/**
 * Generates mask styles for images
 * @param maskShape - Shape configuration for image mask
 * @returns CSS style object with mask properties
 */
export declare const getMaskStyle: (maskShape?: ImageMaskShapeType) => MaskStyleVariables;
export declare function getLinearGradientAngle(props: ImageProps & {
    imageAspectRatio: number;
}): {
    x1: string;
    y1: string;
    x2: string;
    y2: string;
};
export {};