@revenuecat/purchases-ui-js 0.0.14 → 0.0.16

package/dist/components/image/Image.svelte

@@ -30,7 +30,7 @@
     border-radius: var(--corner-radius, unset);
     clip-path: var(--clip-path, unset);
     display: flex;
-    flex: var(--flex, 1 0 auto);
+    flex: var(--flex, 1 1 auto);
   }
 
   .image {

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

@@ -1,16 +1,21 @@
-import { getGradientStyle, getMaskStyle, getSizeStyle, } from "../../utils/style-utils";
+import { getActiveStateProps, getGradientStyle, getMaskStyle, getSizeStyle, } from "../../utils/style-utils";
 /**
  * Generates comprehensive styles for image components by combining gradient and size styles
  * @param props - Image component properties including gradient, mask and size
  * @returns Object containing image style variables and gradient style variables
  */
 export const getImageComponentStyles = (props) => {
-    const { gradient_colors, colorMode, mask_shape, size, max_height, // TODO: implement this. still waiting on spec
-    override_source_lid, // TODO: Implement this once structure is defined
-     } = props;
-    const gradientStyles = getGradientStyle(colorMode, gradient_colors);
-    const sizeStyles = getSizeStyle(size);
-    const maskStyles = getMaskStyle(mask_shape);
+    const { gradient_colors, colorMode, mask_shape, size, 
+    // max_height, // TODO: implement this. still waiting on spec
+    // override_source_lid, // TODO: Implement this once structure is defined
+    overrides, componentState, } = props;
+    const activeStateProps = getActiveStateProps(overrides, componentState);
+    const gradientStyles = getGradientStyle(colorMode, activeStateProps?.gradient_colors || gradient_colors);
+    const sizeStyles = getSizeStyle({ ...size, ...activeStateProps });
+    const maskStyles = getMaskStyle({
+        ...mask_shape,
+        ...activeStateProps,
+    });
     const imageStylesObject = {
         ...sizeStyles,
         ...maskStyles,

package/dist/components/package/Package.svelte

@@ -24,12 +24,15 @@
   const packageVariables = $derived(
     purchaseState.variablesPerPackage?.[package_id] || variableDictionary,
   );
-  const isSelected = $derived(purchaseState?.selectedPackageId === package_id);
+
+  const componentState = $derived({
+    selected: purchaseState?.selectedPackageId === package_id,
+  });
 </script>
 
 <button
   class="package"
-  class:selected={isSelected}
+  class:selected={componentState.selected}
   {id}
   onclick={onPackageClick}
 >
@@ -38,6 +41,7 @@
     {labels}
     {onAction}
     {purchaseState}
+    {componentState}
     variableDictionary={packageVariables}
   />
 </button>

package/dist/components/paywall/Paywall.stories.svelte

@@ -10,6 +10,8 @@
     paywallData,
     gradientPaywallData,
     variablesPastaPaywallData,
+    stateTemplate,
+    posterMakerTemplate,
   } from "../../stories/fixtures";
   import { fn } from "@storybook/test";
 
@@ -132,3 +134,58 @@
     onRestorePurchasesClicked: fn(),
   }}
 />
+
+<Story
+  name="Dynamic state style overrides"
+  args={{
+    paywallData: stateTemplate,
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>
+
+<Story
+  name="Dynamic state style overrides with background image"
+  args={{
+    paywallData: {
+      ...stateTemplate,
+      components_config: {
+        ...stateTemplate.components_config,
+        base: {
+          ...stateTemplate.components_config.base,
+          background: {
+            type: "image",
+            value: {
+              light: {
+                heic: "https://assets.pawwalls.com/1005820_1732028636.heic",
+                heic_low_res:
+                  "https://assets.pawwalls.com/1005820_low_res_1732028636.heic",
+                original: "https://assets.pawwalls.com/1005820_1732028636.jpeg",
+                webp: "https://assets.pawwalls.com/1005820_1732028636.webp",
+                webp_low_res:
+                  "https://assets.pawwalls.com/1005820_low_res_1732028636.webp",
+              },
+            },
+          },
+        },
+      },
+    },
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>
+
+<Story
+  name="Poster Maker"
+  args={{
+    paywallData: posterMakerTemplate,
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>

package/dist/components/paywall/Paywall.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type {
+    BaseNodeBackgroundImage,
     Extra,
     NavigateToAction,
     PaywallData,
@@ -10,6 +11,11 @@
   import type { PurchaseState } from "../../data/state";
   import { findSelectedPackageId, getLabelById } from "../../utils/style-utils";
   import { type VariableDictionary } from "../../utils/variable-utils";
+  import {
+    getBackgroundImageSource,
+    getBackgroundStyles,
+  } from "./paywall-utils";
+  import { prefersDarkMode } from "../../stores/theme";
 
   interface Props {
     paywallData: PaywallData;
@@ -107,6 +113,17 @@
         break;
     }
   };
+  const colorMode = $derived($prefersDarkMode ? "dark" : "light");
+
+  const backgroundStyles = $derived(
+    getBackgroundStyles({
+      background: paywallData.components_config.base?.background,
+      colorMode,
+    }),
+  );
+  const backgroundImgSource = $derived(
+    getBackgroundImageSource(paywallData, $prefersDarkMode ? "dark" : "light"),
+  );
 </script>
 
 <div class="paywall">
@@ -117,6 +134,13 @@
     {purchaseState}
     {variableDictionary}
   />
+  {#if paywallData.components_config.base.background?.type === "color"}
+    <div class="paywall-background" style={backgroundStyles}></div>
+  {:else if paywallData.components_config.base.background?.type === "image"}
+    <div class="paywall-background image-container">
+      <img class="image" src={backgroundImgSource} alt="" />
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -125,11 +149,32 @@
   *::before,
   *::after {
     box-sizing: border-box;
+    margin: 0;
   }
 
-  /* 2. Remove default margin */
-  * {
-    margin: 0;
+  .paywall {
+    position: relative;
+  }
+
+  .paywall-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--background, none);
+    z-index: -1;
+  }
+  .image-container {
+    overflow: hidden;
+    background: none;
+  }
+
+  .image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
   }
 
   body {

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

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

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

@@ -0,0 +1,21 @@
+import { getColor } from "../../utils/style-utils";
+export function getBackgroundStyles({ background, colorMode, }) {
+    if (!background)
+        return "";
+    if (background.type === "color") {
+        const style = getColor({
+            colorMap: background.value,
+            colorMode,
+            fallback: "transparent",
+        });
+        return `--background: ${style};`;
+    }
+}
+export function getBackgroundImageSource(paywallData, colorMode) {
+    if (paywallData.components_config.base?.background?.type !== "image")
+        return "";
+    const backgroundObject = paywallData.components_config.base
+        .background;
+    return (backgroundObject.value[colorMode]?.original ||
+        backgroundObject.value["light"]?.original);
+}

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

@@ -1,11 +1,12 @@
-import { getComponentStyles, getDimensionStyle, getSizeStyle, } from "../../utils/style-utils";
+import { getActiveStateProps, getComponentStyles, getDimensionStyle, getSizeStyle, } from "../../utils/style-utils";
 /**
  * Generates comprehensive styles for stack components by combining component, dimension and size styles
  * @param props - Stack component properties including background, spacing, size, border etc.
  * @returns CSS style variables object with all stack-specific styles
  */
 export const getStackComponentStyles = (props) => {
-    const { background_color, margin, padding, spacing, size, border, shape, colorMode, shadow, dimension, } = props;
+    const { background_color, margin, padding, spacing, size, border, shape, colorMode, shadow, dimension, componentState, overrides, } = props;
+    const activeStateProps = getActiveStateProps(overrides, componentState);
     const componentStyles = getComponentStyles({
         backgroundColor: background_color,
         margin,
@@ -14,9 +15,13 @@ export const getStackComponentStyles = (props) => {
         colorMode,
         shape,
         shadow,
+        ...activeStateProps,
     });
-    const dimensionStyles = getDimensionStyle(dimension);
-    const sizeStyles = getSizeStyle(size);
+    const dimensionStyles = getDimensionStyle({
+        ...dimension,
+        ...activeStateProps,
+    });
+    const sizeStyles = getSizeStyle({ ...size, ...activeStateProps });
     return {
         ...sizeStyles,
         ...dimensionStyles,

package/dist/components/text/Text.svelte

@@ -36,8 +36,9 @@
     font-size: var(--font-size, 1rem);
     font-weight: var(--font-weight, normal);
     text-align: var(--text-align, center);
-    height: var(--height, unset);
-    width: var(--width, unset);
     font-family: var(--font-family, sans-serif);
+    -webkit-background-clip: var(--background-clip, initial);
+    background-clip: var(--background-clip, initial);
+    -webkit-text-fill-color: var(--text-fill-color, initial);
   }
 </style>

package/dist/components/text/TextNode.stories.svelte

@@ -39,7 +39,12 @@
       },
     },
     args: {
-      labels: { en_US: { lb123: "Test text" } },
+      labels: {
+        en_US: {
+          lb123:
+            "Do not allow people to dim your shine because they are blinded. Tell them to put some sunglasses on.",
+        },
+      },
       text_lid: "lb123",
       size: {
         width: { type: "fill" },
@@ -102,6 +107,118 @@
     name: "hello world!",
   }}
 />
+
+<!-- Linear Gradient Color text story -->
+<Story
+  name="LinearGradientColor"
+  args={{
+    font_weight: "regular",
+    text_style: "normal",
+    horizontal_alignment: "start",
+    size: { width: { type: "fixed", value: 200 }, height: { type: "fixed" } },
+    padding: { top: 20, trailing: 20, bottom: 20, leading: 20 },
+    color: {
+      dark: {
+        degrees: 90,
+        points: [
+          {
+            color: "#9f009f",
+            percent: 100,
+          },
+          {
+            color: "#090979ff",
+            percent: 35,
+          },
+          {
+            color: "#53d6ec",
+            percent: 0,
+          },
+        ],
+        type: "linear",
+      },
+      light: {
+        degrees: 45,
+        points: [
+          {
+            color: "#9f009f",
+            percent: 0,
+          },
+          {
+            color: "#090979ff",
+            percent: 50,
+          },
+
+          {
+            color: "#53d6ec",
+            percent: 100,
+          },
+        ],
+        type: "linear",
+      },
+    },
+    background_color: {
+      dark: { type: "hex", value: "#000000" },
+      light: { type: "hex", value: "#000000" },
+    },
+    name: "hello world!",
+  }}
+/>
+
+<!-- Radial Gradient Color text story -->
+<Story
+  name="RadialGradientColor"
+  args={{
+    font_weight: "regular",
+    text_style: "normal",
+    horizontal_alignment: "start",
+    size: { width: { type: "fixed", value: 200 }, height: { type: "fixed" } },
+    padding: { top: 20, trailing: 20, bottom: 20, leading: 20 },
+    color: {
+      dark: {
+        degrees: 90,
+        points: [
+          {
+            color: "#9f009f",
+            percent: 100,
+          },
+          {
+            color: "#090979ff",
+            percent: 35,
+          },
+          {
+            color: "#53d6ec",
+            percent: 0,
+          },
+        ],
+        type: "radial",
+      },
+      light: {
+        points: [
+          {
+            color: "#53d6ec",
+            percent: 0,
+          },
+          {
+            color: "#090979ff",
+            percent: 30,
+          },
+
+          {
+            color: "#9f009f",
+            percent: 50,
+          },
+        ],
+        type: "radial",
+      },
+    },
+    background_color: {
+      dark: { type: "hex", value: "#000000" },
+      light: { type: "hex", value: "#000000" },
+    },
+    name: "hello world!",
+  }}
+/>
+
 <!-- Text with spacing story -->
 <Story
   name="With Spacing"

package/dist/components/text/TextNode.svelte

@@ -2,7 +2,12 @@
   import { getTextComponentStyles } from "./text-utils";
   import Text from "./Text.svelte";
   import type { TextNodeProps } from "../../data/entities";
-  import { getLabelById, stringifyStyles } from "../../utils/style-utils";
+  import {
+    getComponentStyles,
+    getLabelById,
+    getSizeStyle,
+    stringifyStyles,
+  } from "../../utils/style-utils";
   import { replaceVariables } from "../../utils/variable-utils";
 
   const {
@@ -11,6 +16,8 @@
     text_lid,
     purchaseState,
     variableDictionary,
+    background_color,
+    size,
     ...restProps
   }: TextNodeProps = $props();
 
@@ -20,9 +27,20 @@
       labels,
       text_lid,
       purchaseState,
+      background_color,
+      size,
       ...restProps,
     }),
   );
+  const wrapperStyles = $derived(
+    stringifyStyles({
+      ...getComponentStyles({
+        backgroundColor: background_color,
+        ...restProps,
+      }),
+      ...getSizeStyle(size),
+    }),
+  );
   const styles = $derived(stringifyStyles(textStyles));
 
   const label = $derived(
@@ -41,6 +59,18 @@
   );
 </script>
 
-<Text styleVariables={styles} component={tagToRender} {id}>
-  {parsedLabel}
-</Text>
+<span style={wrapperStyles} class="text-wrapper">
+  <Text styleVariables={styles} component={tagToRender} {id}>
+    {parsedLabel}
+  </Text>
+</span>
+
+<style>
+  .text-wrapper {
+    display: block;
+
+    height: var(--height, unset);
+    width: var(--width, unset);
+    background: var(--background, none);
+  }
+</style>

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

@@ -7,6 +7,8 @@ type TextStyleVariables = {
     "--font-weight": number | string;
     "--font-size": string;
     "--font-family": string;
+    "--background-clip": string;
+    "--text-fill-color": string;
 };
 /**
  * Generates comprehensive styles for text components by combining text, component and size styles
@@ -14,7 +16,7 @@ type TextStyleVariables = {
  * @returns Object containing text style variables and the appropriate HTML tag to render
  */
 export declare const getTextComponentStyles: (props: TextNodeProps) => {
-    textStyles: TextStyleVariables;
-    tagToRender: TextComponentTags;
+    textStyles: Partial<TextStyleVariables>;
+    tagToRender: Partial<TextComponentTags>;
 };
 export {};

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

@@ -1,5 +1,4 @@
-import { getSizeStyle, getTextComponentTag, getTextStyles, } from "../../utils/style-utils";
-import { getComponentStyles } from "../../utils/style-utils";
+import { getActiveStateProps, getComponentStyles, getSizeStyle, getTextComponentTag, getTextStyles, } from "../../utils/style-utils";
 /**
  * Generates comprehensive styles for text components by combining text, component and size styles
  * @param props - Text component properties including font, color, background, spacing etc.
@@ -13,20 +12,22 @@ export const getTextComponentStyles = (props) => {
         dark: { type: "hex", value: "#FFFFFF" },
         light: { type: "hex", value: "#FFFFFF" },
     }, padding, margin, colorMode, size, } = props;
+    const activeStateProps = getActiveStateProps(props.overrides, props.componentState);
     const tagToRender = getTextComponentTag(font_size);
-    const textStyles = getTextStyles(props);
+    const textStyles = getTextStyles({ ...props, ...activeStateProps }, colorMode);
     const componentStyles = getComponentStyles({
         backgroundColor: background_color,
         textColor: color,
         margin,
         padding,
         colorMode,
+        ...activeStateProps,
     });
-    const sizeStyles = getSizeStyle(size);
+    const sizeStyles = getSizeStyle({ ...size, ...activeStateProps });
     return {
         textStyles: {
-            ...textStyles,
             ...componentStyles,
+            ...textStyles,
             ...sizeStyles,
         },
         tagToRender,

package/dist/data/entities.d.ts

@@ -2,7 +2,7 @@ import type { BorderType, ColorMode, ColorType, CornerRadiusType, DimensionType,
 import type { PurchaseState } from "./state";
 import type { VariableDictionary } from "../utils/variable-utils";
 export interface Extra {
-    [key: string]: any;
+    [key: string]: unknown;
 }
 export type ComponentTypes = "stack" | "text" | "image" | "button" | "purchase_button" | "footer" | "package";
 export interface PaywallComponent extends Extra {
@@ -10,14 +10,32 @@ export interface PaywallComponent extends Extra {
     id: string;
     name: string;
 }
-export interface Text extends PaywallComponent {
-}
 export interface Stack extends PaywallComponent {
     spacing: number;
     components: PaywallComponent[];
 }
+type BaseNodeBackgroundColor = {
+    type: "color";
+    value: ColorType;
+};
+export type BaseNodeBackgroundImage = {
+    type: "image";
+    value: ImageSourceType;
+};
+export type BaseNodeBackgroundType = BaseNodeBackgroundColor | BaseNodeBackgroundImage;
 export interface ComponentConfig {
+    colors?: Record<string, string>;
+    fonts?: {
+        [fontName: string]: {
+            ios: string;
+            android: string;
+            web: string;
+        };
+    };
+    asset_base_url?: string;
     base: {
+        default_font_name?: string;
+        background?: BaseNodeBackgroundType;
         stack: Stack;
         sticky_footer?: {
             stack: {
@@ -28,8 +46,8 @@ export interface ComponentConfig {
     };
 }
 export interface ComponentLocalizations extends Extra {
-    en_US: {
-        [key: string]: string;
+    [locale: string]: {
+        [label_id: string]: string;
     };
 }
 export interface PaywallData extends Extra {
@@ -43,12 +61,16 @@ export interface ActionsProps {
 export interface PurchaseStateProps {
     purchaseState: PurchaseState;
 }
+export type ComponentState = {
+    [state: string]: boolean;
+};
 interface SharedComponentProps extends PaywallComponent, ActionsProps, PurchaseStateProps {
     labels: ComponentLocalizations;
     id: string;
     colorMode: ColorMode;
     name: string;
     variableDictionary?: VariableDictionary;
+    componentState?: ComponentState;
 }
 interface Action {
     type: "restore_purchases" | "navigate_to" | "navigate_back" | "purchase" | "select_package";
@@ -105,6 +127,9 @@ export interface StackProps extends SharedComponentProps {
     size: SizeType;
     spacing?: number;
     type: "stack";
+    overrides?: {
+        [state: string]: StackProps;
+    };
 }
 export interface TextNodeProps extends SharedComponentProps {
     background_color?: ColorType;
@@ -120,6 +145,9 @@ export interface TextNodeProps extends SharedComponentProps {
     type: "text";
     size: SizeType;
     variableDictionary?: VariableDictionary;
+    overrides?: {
+        [state: string]: TextNodeProps;
+    };
 }
 type ImageSourceDictionaryType = Record<"original" | "heic" | "heic_low_res" | "webp" | "webp_low_res", string>;
 type ImageSourceType = {
@@ -139,5 +167,8 @@ export interface ImageProps extends SharedComponentProps {
     mask_shape?: ImageMaskShapeType;
     max_height?: number;
     override_source_lid?: string;
+    overrides?: {
+        [state: string]: ImageProps;
+    };
 }
 export {};

package/dist/stories/fixtures.d.ts

@@ -6,6 +6,9 @@ export declare const pastaPaywallData: PaywallData;
 export declare const variablesPastaPaywallData: PaywallData;
 export declare const gradientPaywallData: PaywallData;
 export declare const calmPaywallData: PaywallData;
+export declare const stateTemplate: PaywallData;
+export declare const posterMakerTemplate: PaywallData;
+export declare const testTemplate: PaywallData;
 export declare const labelsData: {
     en_US: {
         id1: string;