@revenuecat/purchases-ui-js 2.0.5 → 2.1.0

package/dist/types/component.d.ts

@@ -6,7 +6,8 @@ import type { ImageProps } from "./components/image";
 import type { PackageProps } from "./components/package";
 import type { PurchaseButtonProps } from "./components/purchase-button";
 import type { StackProps } from "./components/stack";
-import type { TabControlButtonProps, TabControlProps, TabsProps } from "./components/tabs";
+import type { TabControlButtonProps, TabControlProps, TabControlToggleProps, TabsProps } from "./components/tabs";
 import type { TextNodeProps } from "./components/text";
 import type { TimelineProps } from "./components/timeline";
-export type Component = ButtonProps | CarouselProps | FooterProps | IconProps | ImageProps | PackageProps | PurchaseButtonProps | StackProps | TabControlButtonProps | TabControlProps | TabsProps | TextNodeProps | TimelineProps;
+import type { VideoProps } from "./components/video";
+export type Component = ButtonProps | CarouselProps | FooterProps | IconProps | ImageProps | PackageProps | PurchaseButtonProps | StackProps | TabControlButtonProps | TabControlToggleProps | TabControlProps | TabsProps | TextNodeProps | TimelineProps | VideoProps;

package/dist/types/components/button.d.ts

@@ -2,6 +2,9 @@ import type { BaseComponent } from "../base";
 import type { Overrides } from "../overrides";
 import type { SheetProps } from "./sheet";
 import type { StackProps } from "./stack";
+interface WorkflowAction {
+    type: "workflow";
+}
 interface RestorePurchasesAction {
     type: "restore_purchases";
 }
@@ -31,12 +34,15 @@ interface NavigateToUrlAction {
         method: "deep_link" | "external_browser" | "in_app_browser";
     };
 }
-export type Action = RestorePurchasesAction | NavigateBackAction | NavigateToAction | NavigateToSheetAction | NavigateToWebPurchase | NavigateToUrlAction;
+export type Action = WorkflowAction | RestorePurchasesAction | NavigateBackAction | NavigateToAction | NavigateToSheetAction | NavigateToWebPurchase | NavigateToUrlAction;
 export interface ButtonProps extends BaseComponent {
     type: "button";
     action: Action;
     stack: StackProps;
     transition?: null;
+    triggers?: {
+        on_press?: string;
+    };
     overrides?: Overrides<ButtonProps>;
 }
 export {};

package/dist/types/components/tabs.d.ts

@@ -1,6 +1,7 @@
 import type { BorderType, ShadowType, ShapeType, SizeType, Spacing } from "..";
 import type { Background } from "../background";
 import type { BaseComponent } from "../base";
+import type { ColorGradientScheme } from "../colors";
 import type { Overrides } from "../overrides";
 import type { StackProps } from "./stack";
 type TabControlType = "buttons" | "toggle";
@@ -43,4 +44,13 @@ export interface TabControlButtonProps extends BaseComponent {
      */
     tab_index: number;
 }
+export interface TabControlToggleProps extends BaseComponent {
+    type: "tab_control_toggle";
+    default_value: boolean;
+    thumb_color_on: ColorGradientScheme;
+    thumb_color_off: ColorGradientScheme;
+    track_color_on: ColorGradientScheme;
+    track_color_off: ColorGradientScheme;
+    overrides?: Overrides<TabControlToggleProps>;
+}
 export {};

package/dist/types/components/text.d.ts

@@ -1,6 +1,6 @@
 import type { FontSizes, FontWeights, SizeType, Spacing, TextAlignments } from "..";
 import type { BaseComponent } from "../base";
-import type { ColorGradientScheme, ColorScheme } from "../colors";
+import type { ColorGradientScheme } from "../colors";
 import type { Overrides } from "../overrides";
 export interface TextNodeProps extends BaseComponent {
     text_lid: string;
@@ -9,7 +9,7 @@ export interface TextNodeProps extends BaseComponent {
     font_weight: keyof typeof FontWeights;
     font_weight_int?: number;
     horizontal_alignment: keyof typeof TextAlignments;
-    color: ColorScheme;
+    color: ColorGradientScheme;
     background_color?: ColorGradientScheme | null;
     type: "text";
     visible?: boolean | null;

package/dist/types/components/video.d.ts

@@ -0,0 +1,35 @@
+import type { BorderType, CircleShape, ConcaveShape, ConvexShape, RectangleShape, ShadowType, SizeType, Spacing } from "..";
+import type { BaseComponent } from "../base";
+import type { ColorGradientScheme } from "../colors";
+import type { FitMode, ImageInfo, VideoInfo } from "../media";
+import type { Overrides } from "../overrides";
+export type VideoObjectFit = "fit" | "fill";
+export type VideoMaskShape = {
+    type: "rectangle" | "circle" | "concave" | "convex";
+    corners?: {
+        top_leading?: number;
+        top_trailing?: number;
+        bottom_leading?: number;
+        bottom_trailing?: number;
+    } | null;
+};
+export interface VideoProps extends BaseComponent {
+    type: "video";
+    visible?: boolean | null;
+    source: VideoInfo | null;
+    fallback_source?: ImageInfo | null;
+    override_source_lid?: string | null;
+    size: SizeType;
+    mask_shape?: RectangleShape | CircleShape | ConcaveShape | ConvexShape | null;
+    fit_mode: FitMode;
+    padding?: Spacing | null;
+    margin?: Spacing | null;
+    color_overlay?: ColorGradientScheme | null;
+    border?: BorderType | null;
+    shadow?: ShadowType | null;
+    overrides?: Overrides<VideoProps>;
+    auto_play: boolean;
+    loop: boolean;
+    mute_audio: boolean;
+    show_controls: boolean;
+}

package/dist/types/components/video.js

@@ -0,0 +1 @@
+export {};

package/dist/types/media.d.ts

@@ -1,4 +1,4 @@
-type ImageFiles = {
+export type ImageFiles = {
     width: number;
     height: number;
     original: string;
@@ -11,9 +11,22 @@ export type ImageInfo = {
     light: ImageFiles;
     dark?: ImageFiles | null;
 };
+export type VideoFiles = {
+    width: number;
+    height: number;
+    url: string;
+    url_low_res: string;
+    checksum?: {
+        algo: string;
+        value: string;
+    } | null;
+    checksum_low_res?: {
+        algo: string;
+        value: string;
+    } | null;
+};
 export type VideoInfo = {
-    light: string;
-    dark: string | null;
+    light: VideoFiles;
+    dark?: VideoFiles | null;
 };
 export type FitMode = "fit" | "fill";
-export {};

package/dist/types/ui-config.d.ts

@@ -7,7 +7,7 @@ type AppFontFamilyConfig = {
     url: string;
     weight: number;
 };
-type AppFontsConfig = Record<string, {
+export type AppFontsConfig = Record<string, {
     ios?: AppFontFamilyConfig;
     android?: AppFontFamilyConfig;
     web?: AppFontFamilyConfig;

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

@@ -1,5 +1,5 @@
 import type { BorderType, CircleShape, ColorMode, ConcaveShape, ConvexShape, PillShape, RectangleShape, ShadowType, Size, Spacing } from "../types";
-import type { ColorGradientScheme, ColorScheme } from "../types/colors";
+import type { ColorGradientInfo, 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;
@@ -10,6 +10,7 @@ export declare function mapColorMode<T>(colorMode: ColorMode, value: {
 }): T;
 export declare function mapSize(size: Size): string;
 export declare function mapSpacing(spacing?: Spacing | null): string;
+export declare function mapColorInfo(info: ColorGradientInfo): 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;

package/dist/utils/base-utils.js

@@ -37,7 +37,7 @@ export function mapSpacing(spacing) {
     const { top, bottom, leading, trailing } = spacing ?? DEFAULT_SPACING;
     return mapTuple(top, trailing, bottom, leading);
 }
-function mapColorInfo(info) {
+export function mapColorInfo(info) {
     if (info.type === "alias" || info.type === "hex") {
         return info.value;
     }

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

@@ -1,35 +1,6 @@
-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 { RootPaywall } from "../types/paywall.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
- * @returns Color value as string
- */
-export declare function getColor({ colorMap, colorMode, fallback, }: {
-    colorMap?: ColorGradientScheme | null;
-    colorMode?: ColorMode;
-    fallback?: string;
-}): string;
-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): TextStyleVariables;
 /**
  * Given an instance of PaywallData, returns the id of the first package marked as `is_selected_by_default` if any.
  * @param paywallData
@@ -37,4 +8,3 @@ export declare function getTextStyles(props: TextNodeProps): TextStyleVariables;
  */
 export declare function findSelectedPackageId({ stack, sticky_footer, }: RootPaywall): string | undefined;
 export declare const getActiveStateProps: <T extends Component>(selectedState: boolean, overrides?: Overrides<T>) => Partial<T>;
-export {};

package/dist/utils/style-utils.js

@@ -1,69 +1,3 @@
-import { getPaywallContext } from "../stores/paywall.js";
-import { DEFAULT_COLOR_MODE } from "./constants.js";
-import { FontSizes, FontWeights, TextAlignments, } from "../types.js";
-import { getScopedFontFamily, isFontRCFMManaged } from "./font-utils.js";
-/**
- * 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 function getColor({ colorMap, colorMode = DEFAULT_COLOR_MODE, fallback = "FFFFFF", }) {
-    if (!colorMap)
-        return fallback;
-    const color = colorMap[colorMode] || colorMap[DEFAULT_COLOR_MODE];
-    let colorPoints = "";
-    switch (color?.type) {
-        case "hex":
-        case "alias":
-            return color.value ?? fallback;
-        case "linear":
-            colorPoints = (color.points || [])
-                .map((point) => `${point.color} ${point.percent}%`)
-                .join(", ");
-            return `linear-gradient(${color.degrees}deg, ${colorPoints})`;
-        case "radial":
-            colorPoints = (color.points || [])
-                .map((point) => `${point.color} ${point.percent}%`)
-                .join(", ");
-            return `radial-gradient(${colorPoints})`;
-        default:
-            return fallback;
-    }
-}
-/**
- * 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 function getTextStyles(props) {
-    const { font_size, horizontal_alignment, font_weight, font_name, font_weight_int, } = props;
-    const paywall = getPaywallContext();
-    const uiConfig = paywall.uiConfig;
-    const { fonts } = uiConfig.app;
-    const font = fonts[font_name ?? ""];
-    const fontFamily = font?.web?.family;
-    const styles = {
-        "--text-align": "initial",
-        "--font-weight": "initial",
-        "--font-size": "initial",
-        "--font-family": "sans-serif",
-        "--background-clip": "none",
-        "--text-fill-color": "none",
-        "--background": "unset",
-    };
-    Object.assign(styles, {
-        "--text-align": TextAlignments[horizontal_alignment] || TextAlignments.leading,
-        "--font-weight": font_weight_int ?? FontWeights[font_weight] ?? FontWeights.regular,
-        "--font-size": Number.isInteger(Number(font_size))
-            ? `${font_size}px`
-            : FontSizes[font_size] || FontSizes.body_m,
-        "--font-family": isFontRCFMManaged(font_name ?? "")
-            ? getScopedFontFamily(fontFamily ?? "")
-            : "sans-serif",
-    });
-    return styles;
-}
 /**
  * Given an instance of PaywallData, returns the id of the first package marked as `is_selected_by_default` if any.
  * @param paywallData

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "2.0.5",
+  "version": "2.1.0",
   "author": {
     "name": "RevenueCat, Inc."
   },