@revenuecat/purchases-ui-js 0.0.13 → 0.0.15

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(
@@ -36,11 +54,23 @@
   const parsedLabel = $derived(
     replaceVariables({
       value: label,
-      dictionary: variableDictionary,
+      variableDictionary,
     }),
   );
 </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

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

@@ -16,8 +16,28 @@ 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: {
@@ -43,11 +63,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";
@@ -104,6 +129,11 @@ export interface StackProps extends SharedComponentProps {
     size: SizeType;
     spacing?: number;
     type: "stack";
+    overrides?: {
+        states: {
+            [state: string]: StackProps;
+        };
+    };
 }
 export interface TextNodeProps extends SharedComponentProps {
     background_color?: ColorType;
@@ -119,6 +149,11 @@ export interface TextNodeProps extends SharedComponentProps {
     type: "text";
     size: SizeType;
     variableDictionary?: VariableDictionary;
+    overrides?: {
+        states: {
+            [state: string]: TextNodeProps;
+        };
+    };
 }
 type ImageSourceDictionaryType = Record<"original" | "heic" | "heic_low_res" | "webp" | "webp_low_res", string>;
 type ImageSourceType = {
@@ -138,5 +173,10 @@ export interface ImageProps extends SharedComponentProps {
     mask_shape?: ImageMaskShapeType;
     max_height?: number;
     override_source_lid?: string;
+    overrides?: {
+        states: {
+            [state: string]: ImageProps;
+        };
+    };
 }
 export {};

package/dist/data/state.d.ts

@@ -1,5 +1,7 @@
+import type { VariableDictionary } from "../utils/variable-utils";
 export interface PurchaseState {
     selectedPackageId?: string;
     locale: string;
     defaultLocale: string;
+    variablesPerPackage?: Record<string, VariableDictionary>;
 }

package/dist/index.d.ts

@@ -8,3 +8,4 @@ export { default as Image } from "./components/image/Image.svelte";
 export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";
 export { default as Package } from "./components/package/Package.svelte";
 export { default as Footer } from "./components/footer/Footer.svelte";
+export { type VariableDictionary } from "./utils/variable-utils";

package/dist/index.js

@@ -9,3 +9,4 @@ export { default as Image } from "./components/image/Image.svelte";
 export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";
 export { default as Package } from "./components/package/Package.svelte";
 export { default as Footer } from "./components/footer/Footer.svelte";
+export {} from "./utils/variable-utils";

package/dist/stories/fixtures.d.ts

@@ -3,7 +3,11 @@ export declare const paywallData: PaywallData;
 export declare const alignmentPaywallData: PaywallData;
 export declare const fontsPaywallData: PaywallData;
 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 labelsData: {
     en_US: {
         id1: string;