@revenuecat/purchases-ui-js 2.0.4 → 2.0.6

package/dist/stores/selected.js

@@ -1,10 +1,8 @@
 import { getContext, setContext } from "svelte";
-import { derived, readable } from "svelte/store";
-import { getPaywallContext } from "./paywall";
+import { readable } from "svelte/store";
 const key = Symbol("selected");
-export function setSelectedStateContext(packageId) {
-    const { selectedPackageId } = getPaywallContext();
-    setContext(key, derived(selectedPackageId, (value) => value === packageId));
+export function setSelectedStateContext(context) {
+    setContext(key, context);
 }
 export function getSelectedStateContext() {
     const context = getContext(key);

package/dist/types/component.d.ts

@@ -1,11 +1,13 @@
-import type { TimelineProps } from "./components/timeline";
-import type { TextNodeProps } from "./components/text";
 import type { ButtonProps } from "./components/button";
+import type { CarouselProps } from "./components/carousel";
 import type { FooterProps } from "./components/footer";
 import type { IconProps } from "./components/icon";
 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 { CarouselProps } from "./components/carousel";
-export type Component = ButtonProps | CarouselProps | FooterProps | IconProps | ImageProps | PackageProps | PurchaseButtonProps | StackProps | TextNodeProps | TimelineProps;
+import type { TabControlButtonProps, TabControlProps, TabControlToggleProps, TabsProps } from "./components/tabs";
+import type { TextNodeProps } from "./components/text";
+import type { TimelineProps } from "./components/timeline";
+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

@@ -1,5 +1,6 @@
 import type { BaseComponent } from "../base";
 import type { Overrides } from "../overrides";
+import type { SheetProps } from "./sheet";
 import type { StackProps } from "./stack";
 interface RestorePurchasesAction {
     type: "restore_purchases";
@@ -14,7 +15,7 @@ interface NavigateToAction {
 interface NavigateToSheetAction {
     type: "navigate_to";
     destination: "sheet";
-    sheet?: unknown;
+    sheet?: SheetProps | null;
 }
 interface NavigateToWebPurchase {
     type: "navigate_to";

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

@@ -0,0 +1,16 @@
+import type { SizeType } from "..";
+import type { Background } from "../background";
+import type { BaseComponent } from "../base";
+import type { Overrides } from "../overrides";
+import type { StackProps } from "./stack";
+type SheetPosition = "bottom" | "top" | "center" | "left" | "right";
+export interface SheetProps extends BaseComponent {
+    type: "sheet";
+    stack: StackProps;
+    size: SizeType;
+    background?: Background | null;
+    background_blur: boolean;
+    position?: SheetPosition;
+    overrides?: Overrides<SheetProps>;
+}
+export {};

package/dist/types/components/sheet.js

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

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

@@ -0,0 +1,56 @@
+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";
+export interface TabControl {
+    type: TabControlType;
+    stack: StackProps;
+}
+export interface TabProps extends BaseComponent {
+    type: "tab";
+    stack: StackProps;
+    overrides?: Overrides<TabProps>;
+}
+export interface TabsProps extends BaseComponent {
+    type: "tabs";
+    visible?: boolean | null;
+    size: SizeType;
+    padding: Spacing;
+    margin: Spacing;
+    control: TabControl;
+    tabs: TabProps[];
+    default_tab_id: string;
+    background?: Background | null;
+    shape?: ShapeType | null;
+    border?: BorderType | null;
+    shadow?: ShadowType | null;
+    overrides?: Overrides<TabsProps>;
+}
+export interface TabControlProps extends BaseComponent {
+    type: "tab_control";
+    overrides?: Overrides<TabControlProps>;
+}
+export interface TabControlButtonProps extends BaseComponent {
+    type: "tab_control_button";
+    tab_id: string;
+    stack: StackProps;
+    overrides?: Overrides<TabControlButtonProps>;
+    /**
+     * @deprecated Use `tab_id` instead. This stores the index of the tab the control is related to,
+     *             we'll utilize the `tab_id` field instead but need this for backwards compatibility
+     */
+    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/tabs.js

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

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/paywall.d.ts

@@ -2,7 +2,7 @@ import type { Background } from "./background";
 import type { FooterProps } from "./components/footer";
 import type { StackProps } from "./components/stack";
 import type { Localizations } from "./localization";
-interface RootPaywall {
+export interface RootPaywall {
     background?: Background;
     stack: StackProps;
     sticky_footer?: FooterProps | null;
@@ -24,4 +24,3 @@ export interface PaywallData {
     components_config: ComponentConfig;
     components_localizations: Localizations;
 }
-export {};

package/dist/types.d.ts

@@ -45,10 +45,14 @@ type FixedSize = {
     value: number;
 };
 type RelativeSize = {
-    type: "fit" | "fill" | "relative";
+    type: "relative";
+    value: number;
+};
+type FitFillSize = {
+    type: "fit" | "fill";
     value?: null;
 };
-export type Size = FixedSize | RelativeSize;
+export type Size = FixedSize | RelativeSize | FitFillSize;
 export type SizeType = {
     width: Size;
     height: Size;

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

@@ -8,7 +8,7 @@ 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 mapSize(size: Size): 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;

package/dist/utils/base-utils.js

@@ -14,7 +14,7 @@ export function mapColorMode(colorMode, value) {
     const result = value[colorMode];
     return result ?? value.light;
 }
-export function mapSize(size, deviceFrameElement) {
+export function mapSize(size) {
     switch (size.type) {
         case "fill":
             // Support both webkit and mozilla browsers
@@ -29,22 +29,7 @@ export function mapSize(size, deviceFrameElement) {
         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);
+            return `${size.value * 100}%`;
         }
     }
 }

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

@@ -2,7 +2,7 @@ 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 { PaywallData } from "../types/paywall.js";
+import type { RootPaywall } from "../types/paywall.js";
 import { type ColorMode } from "../types.js";
 /**
  * Gets color value based on color mode with fallback
@@ -30,18 +30,11 @@ type TextStyleVariables = {
  * @returns CSS style object with text formatting properties
  */
 export declare function getTextStyles(props: TextNodeProps): 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 function findSelectedPackageId({ stack, sticky_footer, }: RootPaywall): string | undefined;
 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 {};

package/dist/utils/style-utils.js

@@ -64,22 +64,12 @@ export function getTextStyles(props) {
     });
     return styles;
 }
-/**
- * Converts a style object to a CSS string
- * @param styles - Object containing CSS properties and values
- * @returns CSS string
- */
-export function stringifyStyles(styles) {
-    return Object.entries(styles)
-        .map(([key, value]) => `${key}: ${value}`)
-        .join("; ");
-}
 /**
  * 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 function findSelectedPackageId(paywallData) {
+export function findSelectedPackageId({ stack, sticky_footer, }) {
     const traverseNode = (node) => {
         if (node.type === "package" && node.is_selected_by_default) {
             return node;
@@ -100,7 +90,6 @@ export function findSelectedPackageId(paywallData) {
         }
         return undefined;
     };
-    const { stack, sticky_footer } = paywallData.components_config.base;
     const pkg = traverseNode(stack);
     if (pkg !== undefined) {
         return pkg?.package_id;
@@ -120,14 +109,3 @@ export const getActiveStateProps = (selectedState, overrides) => {
     const override = overrides?.find((override) => override.conditions.find((condition) => condition.type === "selected"));
     return override?.properties ?? {};
 };
-export function prefixObject(object, prefix) {
-    if (!object)
-        return {};
-    if (!prefix)
-        return object;
-    return Object.entries(object).reduce((acc, [key, value]) => {
-        const replacedKey = key.replace(/^--/, `${prefix}-`);
-        acc[`--${replacedKey}`] = value;
-        return acc;
-    }, {});
-}

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.4",
+  "version": "2.0.6",
   "author": {
     "name": "RevenueCat, Inc."
   },

package/dist/components/paywall/paywall-utils.d.ts

@@ -1,8 +0,0 @@
-import type { ColorMode } from "../../types";
-import type { Background } from "../../types/background";
-import type { PaywallData } from "../../types/paywall";
-export declare function getBackgroundStyles({ background, colorMode, }: {
-    background?: Background;
-    colorMode: ColorMode;
-}): string;
-export declare function getBackgroundImageSource(paywallData: PaywallData, colorMode: ColorMode): string | undefined;

package/dist/components/paywall/paywall-utils.js

@@ -1,24 +0,0 @@
-import { DEFAULT_COLOR_MODE } from "../../utils/constants";
-import { getColor, prefixObject, stringifyStyles, } from "../../utils/style-utils";
-export function getBackgroundStyles({ background, colorMode, }) {
-    const styles = { "--background": "initial" };
-    if (background?.type === "color") {
-        Object.assign(styles, {
-            "--background": getColor({
-                colorMap: background.value,
-                colorMode,
-                fallback: "transparent",
-            }),
-        });
-    }
-    const prefixedStyles = prefixObject(styles, "paywall");
-    return stringifyStyles(prefixedStyles);
-}
-export function getBackgroundImageSource(paywallData, colorMode) {
-    const { background } = paywallData.components_config.base;
-    if (background?.type !== "image") {
-        return "";
-    }
-    const { value } = background;
-    return value[colorMode]?.original ?? value[DEFAULT_COLOR_MODE]?.original;
-}