@revenuecat/purchases-ui-js 2.0.2 → 2.0.3

package/dist/ui/molecules/button.stories.svelte

@@ -8,14 +8,7 @@
   const { Story } = defineMeta({
     component: Button,
     title: "Molecules/Button",
-    // @ts-expect-error ignore typing of decorator
-    decorators: [withLayout],
-    argTypes: {
-      intent: {
-        control: "radio",
-        options: ["primary", undefined],
-      },
-    },
+    decorators: [withLayout()],
     render: template,
   });
 
@@ -38,5 +31,7 @@
 {/snippet}
 
 <Story name="Default" {args} />
+
 <Story name="Disabled" args={{ ...args, disabled: true }} />
+
 <Story name="Loading" args={{ ...args, loading: true }} />

package/dist/ui/theme/colors.d.ts

@@ -1,4 +1,3 @@
-import type { BrandingAppearance } from "../utils/branding";
 /**
  * All those colors get translated in --rc-color-<property_name> css variables.
  * i.e. --rc-color-error or --rc-color-input-background
@@ -22,11 +21,6 @@ export interface Colors {
 }
 export declare const DEFAULT_FORM_COLORS: Colors;
 export declare const DEFAULT_INFO_COLORS: Colors;
-/**
- * Mappings from the colors defined above and the colors downloaded from the BrandingAppearance.
- * Bear in mind that font colors are calculated dynamically given the resulting background color.
- */
-export declare const ColorsToBrandingAppearanceMapping: Record<string, keyof BrandingAppearance>;
 export declare const FormColorsToBrandingAppearanceMapping: {
     "input-background": string;
     background: string;

package/dist/ui/theme/colors.js

@@ -36,7 +36,7 @@ export const DEFAULT_INFO_COLORS = {
  * Mappings from the colors defined above and the colors downloaded from the BrandingAppearance.
  * Bear in mind that font colors are calculated dynamically given the resulting background color.
  */
-export const ColorsToBrandingAppearanceMapping = {
+const ColorsToBrandingAppearanceMapping = {
     error: "color_error",
     focus: "color_accent",
     accent: "color_accent",

package/dist/ui/theme/text.d.ts

@@ -2,18 +2,17 @@
  * All text styles get translated into --rc-text-<property_name> CSS variables.
  * i.e., --rc-text-title1-font-size or --rc-text-title1-line-height
  */
-export interface TextStyle {
+interface TextStyle {
     fontSize: string;
     lineHeight: string;
     fontWeight: string;
     letterSpacing?: string;
 }
-export type ScreenType = "mobile" | "desktop";
-export type ScreenTextStyle = Record<TextStyleKey, TextStyle>;
-export type TextStyleKey = "heading2xl" | "headingXl" | "headingLg" | "headingMd" | "bodyBase" | "bodySmall" | "labelButton" | "labelDefault" | "captionDefault" | "captionLink";
+type TextStyleKey = "heading2xl" | "headingXl" | "headingLg" | "headingMd" | "bodyBase" | "bodySmall" | "labelButton" | "labelDefault" | "captionDefault" | "captionLink";
 export type TextStyles = Record<TextStyleKey, {
     mobile: TextStyle;
     desktop: TextStyle;
 }>;
 export declare const DEFAULT_FONT_FAMILY = "-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif";
 export declare const DEFAULT_TEXT_STYLES: TextStyles;
+export {};

package/dist/ui/theme/utils.d.ts

@@ -3,18 +3,8 @@ import { type Colors } from "./colors";
 import { type Shape } from "./shapes";
 import type { Spacing } from "./spacing";
 import { type TextStyles } from "./text";
-export declare const DEFAULT_LUMINANCE_THRESHOLD = 0.37;
-/**
- * Applies an alpha value to a color.
- * If the base color is light, the overlay color is black.
- * If the base color is dark, the overlay color is white.
- */
-export declare function applyAlpha(baseColor: string, alpha: number): string;
-export declare const toColors: (colorsMapping: Record<string, string>, defaultColors: Colors, brandingAppearance?: BrandingAppearance | null | undefined) => Colors;
-export declare const toProductInfoColors: (brandingAppearance?: BrandingAppearance | null | undefined) => Colors;
 export declare const toFormColors: (brandingAppearance?: BrandingAppearance | null | undefined) => Colors;
 export declare const toShape: (brandingAppearance?: BrandingAppearance | null | undefined) => Shape;
-export declare const toStyleVar: (prefix: string | undefined, entries: [string, string][]) => string;
 /**
  * Assigns values to the css variables given the branding appearance customization.
  * @param appearance BrandingAppearance

package/dist/ui/theme/utils.js

@@ -31,7 +31,7 @@ const isLightColor = ({ r, g, b, luminanceThreshold, }) => {
     // Return whether the background is light
     return luminance > luminanceThreshold;
 };
-export const DEFAULT_LUMINANCE_THRESHOLD = 0.37;
+const DEFAULT_LUMINANCE_THRESHOLD = 0.37;
 const rgbToTextColors = (rgb, luminanceThreshold = DEFAULT_LUMINANCE_THRESHOLD) => {
     const baseColor = isLightColor({ ...rgb, luminanceThreshold })
         ? "0,0,0"
@@ -56,7 +56,7 @@ function overlayColor(baseColor, overlay, alpha) {
  * If the base color is light, the overlay color is black.
  * If the base color is dark, the overlay color is white.
  */
-export function applyAlpha(baseColor, alpha) {
+function applyAlpha(baseColor, alpha) {
     const defaultRgb = { r: 255, g: 255, b: 255 };
     const normalizedAlpha = Math.max(0, Math.min(1, alpha));
     let appliedBaseColor = baseColor;
@@ -119,7 +119,7 @@ const mapColors = (colorsMapping, defaultColors, brandingAppearance) => {
     ]);
     return Object.fromEntries(mappedColors);
 };
-export const toColors = (colorsMapping, defaultColors, brandingAppearance) => {
+const toColors = (colorsMapping, defaultColors, brandingAppearance) => {
     const mappedColors = mapColors(colorsMapping, defaultColors, brandingAppearance);
     return brandingAppearance
         ? {
@@ -130,7 +130,7 @@ export const toColors = (colorsMapping, defaultColors, brandingAppearance) => {
         }
         : { ...defaultColors }; //copy, do not reference.
 };
-export const toProductInfoColors = (brandingAppearance) => {
+const toProductInfoColors = (brandingAppearance) => {
     return toColors(InfoColorsToBrandingAppearanceMapping, DEFAULT_INFO_COLORS, brandingAppearance);
 };
 export const toFormColors = (brandingAppearance) => {
@@ -151,7 +151,7 @@ export const toShape = (brandingAppearance) => {
             return DefaultShape;
     }
 };
-export const toStyleVar = (prefix = "", entries) => entries.map(([key, value]) => `--rc-${prefix}-${key}: ${value}`).join("; ");
+const toStyleVar = (prefix = "", entries) => entries.map(([key, value]) => `--rc-${prefix}-${key}: ${value}`).join("; ");
 /**
  * Assigns values to the css variables given the branding appearance customization.
  * @param appearance BrandingAppearance

package/dist/utils/background-utils.d.ts

@@ -0,0 +1,4 @@
+import type { ColorMode } from "../types";
+import type { Background } from "../types/background";
+import type { ColorGradientScheme } from "../types/colors";
+export declare function mapBackground(colorMode: ColorMode, background_color: ColorGradientScheme | null | undefined, background: Background | null | undefined): Record<string, string>;

package/dist/utils/background-utils.js

@@ -0,0 +1,39 @@
+import { mapColor, mapColorMode, mapFitMode, mapOverlay } from "./base-utils";
+function mapBackgroundImage(colorMode, info) {
+    const files = mapColorMode(colorMode, info);
+    return `url(${files.webp})`;
+}
+function mapBackgroundVideo(colorMode, info) {
+    // TODO: [MON-662] Implement video background.
+    console.error("Not supported yet");
+    return `url(${mapColorMode(colorMode, info)})`;
+}
+function mapBackgroundValue(colorMode, background_color, background) {
+    if (background == null) {
+        if (background_color == null) {
+            return "none";
+        }
+        return mapColor(colorMode, background_color);
+    }
+    if (background.type === "color") {
+        return mapColor(colorMode, background_color ?? background.value);
+    }
+    if (background.type === "image") {
+        return mapBackgroundImage(colorMode, background.value);
+    }
+    return mapBackgroundVideo(colorMode, background.value);
+}
+export function mapBackground(colorMode, background_color, background) {
+    const value = mapBackgroundValue(colorMode, background_color, background);
+    if (background?.type !== "image") {
+        return { background: value };
+    }
+    const { fit_mode, color_overlay } = background;
+    return {
+        background: value,
+        "background-size": mapFitMode(fit_mode),
+        "background-position": fit_mode === "fill" ? "center" : "top center",
+        "background-repeat": "no-repeat",
+        "--overlay": mapOverlay(colorMode, color_overlay),
+    };
+}

package/dist/utils/base-utils.d.ts

@@ -0,0 +1,18 @@
+import type { BorderType, CircleShape, ColorMode, ConcaveShape, ConvexShape, PillShape, RectangleShape, ShadowType, Size, Spacing } from "../types";
+import type { ColorGradientScheme, ColorScheme } from "../types/colors";
+import type { FitMode } from "../types/media";
+export type CSS = Record<string, string | number>;
+export declare function css(props: CSS): string;
+export declare function px(value: string | number): string;
+export declare function mapColorMode<T>(colorMode: ColorMode, value: {
+    light: T;
+    dark?: T | null;
+}): T;
+export declare function mapSize(size: Size, deviceFrameElement?: HTMLElement | null): string;
+export declare function mapSpacing(spacing?: Spacing | null): string;
+export declare function mapColor(colorMode: ColorMode, scheme: ColorScheme | ColorGradientScheme | null | undefined): string;
+export declare function mapOverlay(colorMode: ColorMode, colorOverlay: ColorGradientScheme | null | undefined): string;
+export declare function mapBorder(colorMode: ColorMode, border: BorderType | null | undefined): string;
+export declare function mapBorderRadius(shape: RectangleShape | CircleShape | PillShape | ConcaveShape | ConvexShape | null | undefined): string;
+export declare function mapShadow(colorMode: ColorMode, shadow: ShadowType | null | undefined): string;
+export declare function mapFitMode(fit_mode: FitMode): string;

package/dist/utils/base-utils.js

@@ -0,0 +1,124 @@
+import { DEFAULT_SPACING } from "./constants";
+export function css(props) {
+    return Object.entries(props)
+        .map(([key, value]) => `${key}:${value}`)
+        .join(";");
+}
+export function px(value) {
+    return `${value}px`;
+}
+function mapTuple(...tuple) {
+    return tuple.map(px).join(" ");
+}
+export function mapColorMode(colorMode, value) {
+    const result = value[colorMode];
+    return result ?? value.light;
+}
+export function mapSize(size, deviceFrameElement) {
+    switch (size.type) {
+        case "fill":
+            // Support both webkit and mozilla browsers
+            if (navigator.userAgent.includes("Firefox")) {
+                return "-moz-available";
+            }
+            else {
+                return "-webkit-fill-available";
+            }
+        case "fit":
+            return "fit-content";
+        case "fixed":
+            return px(size.value);
+        case "relative": {
+            // TODO(marek): Good enough for now.
+            if (!deviceFrameElement) {
+                console.error("[mapSizeConstraint] Device frame element is not available");
+                return `${(size.value ?? 0) * 100}%`;
+            }
+            // getBoundingClientRect returns device pixel values that may be affected by CSS transforms
+            // due to phone preview scaling.
+            // We need to account for any scaling that may be applied to the element
+            const rect = deviceFrameElement.getBoundingClientRect();
+            const computedStyle = window.getComputedStyle(
+            // Need to go up two levels to get the transformed viewport element.
+            deviceFrameElement.parentNode?.parentNode);
+            const { transform } = computedStyle;
+            const scale = transform === "none" ? 1 : parseFloat(transform.split("(")[1]);
+            const height = rect.height / (scale || 1);
+            return px((size.value ?? 0) * height);
+        }
+    }
+}
+export function mapSpacing(spacing) {
+    const { top, bottom, leading, trailing } = spacing ?? DEFAULT_SPACING;
+    return mapTuple(top, trailing, bottom, leading);
+}
+function mapColorInfo(info) {
+    if (info.type === "alias" || info.type === "hex") {
+        return info.value;
+    }
+    const points = info.points
+        .map((point) => `${point.color} ${point.percent}%`)
+        .join(", ");
+    switch (info.type) {
+        case "linear":
+            return `linear-gradient(${info.degrees}deg, ${points})`;
+        case "radial":
+            return `radial-gradient(circle, ${points})`;
+    }
+}
+export function mapColor(colorMode, scheme) {
+    if (scheme == null) {
+        return "transparent";
+    }
+    const info = mapColorMode(colorMode, scheme);
+    return mapColorInfo(info);
+}
+export function mapOverlay(colorMode, colorOverlay) {
+    if (colorOverlay == null) {
+        return "transparent";
+    }
+    return mapColor(colorMode, colorOverlay);
+}
+export function mapBorder(colorMode, border) {
+    if (border == null) {
+        return "none";
+    }
+    const color = mapColor(colorMode, border.color);
+    return `${border.width}px solid ${color}`;
+}
+function mapCornerRadius(corners) {
+    if (corners == null) {
+        return "0";
+    }
+    const { top_leading, top_trailing, bottom_trailing, bottom_leading } = corners;
+    return mapTuple(top_leading, top_trailing, bottom_trailing, bottom_leading);
+}
+export function mapBorderRadius(shape) {
+    switch (shape?.type) {
+        case undefined:
+        case "concave":
+        case "convex":
+            return "0";
+        case "rectangle":
+            return `${mapCornerRadius(shape.corners)}`;
+        case "circle":
+        case "pill":
+            return "9999px";
+    }
+}
+export function mapShadow(colorMode, shadow) {
+    if (shadow == null) {
+        return "none";
+    }
+    const { x, y, radius } = shadow;
+    const color = mapColor(colorMode, shadow.color);
+    return `${x}px ${y}px ${radius}px ${color}`;
+}
+export function mapFitMode(fit_mode) {
+    switch (fit_mode) {
+        case "fill":
+            return "cover";
+        case "fit":
+            return "contain";
+    }
+}

package/dist/utils/constants.d.ts

@@ -1,4 +1,4 @@
-import type { ColorMode } from "../types";
+import type { ColorMode, Spacing } from "../types";
 export declare const DEFAULT_COLOR_MODE: ColorMode;
 export declare const DEFAULT_TEXT_COLOR = "#000000";
-export declare const DEFAULT_BACKGROUND_COLOR = "#FFFFFF";
+export declare const DEFAULT_SPACING: Spacing;

package/dist/utils/constants.js

@@ -1,3 +1,8 @@
 export const DEFAULT_COLOR_MODE = "light";
 export const DEFAULT_TEXT_COLOR = "#000000";
-export const DEFAULT_BACKGROUND_COLOR = "#FFFFFF";
+export const DEFAULT_SPACING = {
+    top: 0,
+    bottom: 0,
+    leading: 0,
+    trailing: 0,
+};

package/dist/utils/font-utils.d.ts

@@ -0,0 +1,4 @@
+import type { UIConfig } from "../data/entities";
+export declare function isFontRCFMManaged(fontName: string): boolean;
+export declare function getScopedFontFamily(fontFamily: string): string;
+export declare function registerFonts(uiConfig: UIConfig): Promise<void>;

package/dist/utils/font-utils.js

@@ -0,0 +1,47 @@
+export function isFontRCFMManaged(fontName) {
+    return fontName.startsWith("RCFM:");
+}
+export function getScopedFontFamily(fontFamily) {
+    return `RevCatPaywall-${fontFamily}`;
+}
+export async function registerFonts(uiConfig) {
+    if (!uiConfig.app.fonts || typeof document === "undefined") {
+        return;
+    }
+    const fontPromises = [];
+    for (const [fontId, fontConfig] of Object.entries(uiConfig.app.fonts)) {
+        const webConfig = fontConfig.web;
+        if (!webConfig || !webConfig.url || !webConfig.family) {
+            console.warn(`[Font Registration] Skipping font ${fontId}: missing web config or required fields`);
+            continue;
+        }
+        try {
+            const registration = `${getScopedFontFamily(webConfig.family)}-${webConfig.style}-${webConfig.weight}`;
+            const fontFace = new FontFace(registration, `url(${webConfig.url})`, {
+                weight: webConfig.weight?.toString() || "400",
+                style: webConfig.style || "normal",
+            });
+            fontFace.family = getScopedFontFamily(webConfig.family);
+            const loadPromise = fontFace
+                .load()
+                .then(() => {
+                document.fonts.add(fontFace);
+                console.debug(`[Font Registration] Successfully registered font: ${registration} (${webConfig.family}, ${webConfig.weight}, ${webConfig.style})`);
+            })
+                .catch((error) => {
+                console.warn(`[Font Registration] Failed to load font ${webConfig.family}:`, error);
+            });
+            fontPromises.push(loadPromise);
+        }
+        catch (error) {
+            console.warn(`[Font Registration] Failed to create FontFace for ${fontId}:`, error);
+        }
+    }
+    try {
+        await Promise.allSettled(fontPromises);
+        console.debug(`[Font Registration] Font registration complete. Processed ${fontPromises.length} fonts.`);
+    }
+    catch (error) {
+        console.warn("[Font Registration] Unexpected error during font registration:", error);
+    }
+}

package/dist/utils/style-utils.d.ts

@@ -1,27 +1,9 @@
-import type { ComponentState, ImageMaskShapeType, ImageProps, PaywallData, TextNodeProps } from "../data/entities.js";
-import type { Dimension } from "../types/alignment.js";
-import type { ColorGradientScheme, ColorScheme } from "../types/colors.js";
-import { type BorderType, type ColorMode, type CornerRadiusType, 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;
+import type { PaywallData } from "../data/entities.js";
+import type { ColorGradientScheme } from "../types/colors.js";
+import type { Component } from "../types/component.js";
+import type { TextNodeProps } from "../types/components/text";
+import type { Overrides } from "../types/overrides.js";
+import { type ColorMode } from "../types.js";
 /**
  * Gets color value based on color mode with fallback
  * @param params - Object containing color map, mode and fallback color
@@ -32,76 +14,6 @@ export declare function getColor({ colorMap, colorMode, fallback, }: {
     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?: ColorGradientScheme | null;
-    color?: ColorScheme;
-    border?: BorderType | null;
-    colorMode?: ColorMode;
-    shape?: ShapeType | null;
-    shadow?: ShadowType | null;
-}): 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: Dimension): 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: Dimension): DimensionVariableType;
 type TextStyleVariables = {
     "--text-align": string;
     "--font-weight": number | string;
@@ -130,31 +42,6 @@ export declare function stringifyStyles(styles: Record<string, string | number>)
  * @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 const getActiveStateProps: <T extends Component>(selectedState: boolean, overrides?: Overrides<T>) => Partial<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(colorMode: ColorMode, props: ImageProps & {
-    imageAspectRatio: number;
-}): {
-    x1: string;
-    y1: string;
-    x2: string;
-    y2: string;
-};
 export {};