@revenuecat/purchases-ui-js 0.0.15 → 0.0.17

package/dist/stories/meta-templates.d.ts

@@ -7,7 +7,6 @@ export declare const fontWeightStoryMeta: InputType;
 export declare const fontSizeStoryMeta: InputType;
 export declare const textStyleStoryMeta: InputType;
 export declare const horizontalAlignmentStoryMeta: InputType;
-export declare const colorModeStoryMeta: InputType;
 export declare const shadowStoryMeta: InputType;
 export declare const borderStoryMeta: InputType;
 export declare const sizeStoryMeta: InputType;

package/dist/stories/meta-templates.js

@@ -85,11 +85,6 @@ export const horizontalAlignmentStoryMeta = {
     options: ["center", "start", "end"],
     description: "Text horizontal alignment",
 };
-export const colorModeStoryMeta = {
-    control: { type: "select" },
-    options: ["light", "dark"],
-    description: "Color mode",
-};
 export const shadowStoryMeta = {
     control: {
         type: "object",

package/dist/types.d.ts

@@ -3,7 +3,7 @@ export type ColorStop = {
     color: string;
     percent: number;
 };
-type Color = {
+export type Color = {
     type: "hex" | "alias" | "linear" | "radial";
     value?: string;
     degrees?: number;
@@ -48,7 +48,11 @@ export declare enum FontSizes {
     heading_xl = "26px",
     heading_xxl = "32px"
 }
-export type TextAlignment = "center" | "start" | "end";
+export declare enum TextAlignments {
+    leading = "start",
+    center = "center",
+    trailing = "end"
+}
 export type SizeType = {
     width: Size;
     height: Size;
@@ -63,10 +67,13 @@ type RelativeSize = {
     type: FitTypes;
 };
 export type ShapeType = RectangleShape | PillShape;
-type RectangleShape = {
+export type RectangleShape = {
     type: "rectangle";
     corners: CornerRadiusType;
 };
+export type CircleShape = {
+    type: "circle";
+};
 type PillShape = {
     type: "pill";
 };
@@ -111,7 +118,8 @@ export type ShadowType = {
 };
 export declare enum StackDirection {
     vertical = "column",
-    horizontal = "row"
+    horizontal = "row",
+    zlayer = "zstack"
 }
 export declare enum StackAlignment {
     top = "flex-start",

package/dist/types.js

@@ -37,10 +37,17 @@ export var FontSizes;
     FontSizes["heading_xl"] = "26px";
     FontSizes["heading_xxl"] = "32px";
 })(FontSizes || (FontSizes = {}));
+export var TextAlignments;
+(function (TextAlignments) {
+    TextAlignments["leading"] = "start";
+    TextAlignments["center"] = "center";
+    TextAlignments["trailing"] = "end";
+})(TextAlignments || (TextAlignments = {}));
 export var StackDirection;
 (function (StackDirection) {
     StackDirection["vertical"] = "column";
     StackDirection["horizontal"] = "row";
+    StackDirection["zlayer"] = "zstack";
 })(StackDirection || (StackDirection = {}));
 export var StackAlignment;
 (function (StackAlignment) {

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

@@ -1,5 +1,6 @@
 import type { ComponentLocalizations, ComponentState, ImageMaskShapeType, PaywallData, TextNodeProps } from "../data/entities.js";
-import { type BorderType, type ColorMode, type ColorType, type DimensionType, FontSizeTags, type ShadowType, type ShapeType, type SizeType, type Spacing } from "../types.js";
+import { type VariableDictionary } from "./variable-utils.js";
+import { type BorderType, type ColorMode, type ColorType, type CornerRadiusType, type DimensionType, FontSizeTags, type ShadowType, type ShapeType, type SizeType, type Spacing } from "../types.js";
 export type TextComponentTags = "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 /**
  * Maps font size to appropriate HTML heading tag
@@ -17,6 +18,19 @@ 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;
+/**
+ * Generates CSS border radius style for corners
+ * @param corners - Corner radius configuration
+ * @returns CSS border radius string
+ */
+export declare function getCornerRadiusStyle(corners: CornerRadiusType): string;
 /**
  * Generates comprehensive component styles including spacing, colors, borders and shadows
  * @param params - Component style configuration object
@@ -51,7 +65,7 @@ export declare function getComponentStyles({ backgroundColor, border, margin, pa
  * @param size - Size configuration object
  * @returns CSS style object with size properties
  */
-export declare function getSizeStyle(size: SizeType): {
+export declare function getSizeStyle(size: SizeType, isZStack?: boolean): {
     "--width": string;
     "--height": string;
     "--flex": string;
@@ -83,6 +97,9 @@ export declare function getDimensionStyle(dimension: DimensionType): {
     "--direction": string;
     "--alignment": string;
     "--distribution": string;
+    "--position": string;
+    "--inset": string;
+    "--transform": string;
 };
 /**
  * Generates text-related styles
@@ -90,7 +107,7 @@ export declare function getDimensionStyle(dimension: DimensionType): {
  * @param colorMode - The currently selected ColorMode (dark/light)
  * @returns CSS style object with text formatting properties
  */
-export declare function getTextStyles(props: TextNodeProps, colorMode?: ColorMode): any;
+export declare function getTextStyles(props: TextNodeProps, colorMode?: ColorMode): Record<string, unknown>;
 /**
  * Converts a style object to a CSS string
  * @param styles - Object containing CSS properties and values
@@ -108,10 +125,25 @@ export declare function stringifyStyles(styles: Record<string, string | number>)
  * @returns The label in the preferred or fallback locale, or undefined.
  */
 export declare function getLabelById(label_id: string, locale: string, fallbackLocale: string, labels: ComponentLocalizations): string | undefined;
+/**
+ * Gets a label by ID and replaces any variables in it with values from the dictionary
+ * @param text_lid - The ID of the text label to retrieve
+ * @param purchaseState - Object containing locale and defaultLocale
+ * @param labels - ComponentLocalizations containing the labels
+ * @param variableDictionary - Dictionary of variables to replace in the label text
+ * @returns The label with variables replaced, or undefined if label not found
+ */
+export declare function getLabelAndReplaceVariables({ text_lid, locale, defaultLocale, labels, variableDictionary, }: {
+    text_lid?: string;
+    locale: string;
+    defaultLocale: string;
+    labels: ComponentLocalizations;
+    variableDictionary?: VariableDictionary;
+}): string | undefined;
 /**
  * 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 const getActiveStateProps: <T>(overrides?: Record<"states", Record<string, T>>, componentState?: ComponentState) => T;
+export declare const getActiveStateProps: <T>(overrides?: Record<string, T>, componentState?: ComponentState) => T;

package/dist/utils/style-utils.js

@@ -1,4 +1,5 @@
-import { FontSizes, FontSizeTags, FontWeights, StackAlignment, StackDirection, StackDistribution, } from "../types.js";
+import { replaceVariables, } from "./variable-utils.js";
+import { FontSizes, FontSizeTags, FontWeights, StackAlignment, StackDirection, StackDistribution, TextAlignments, } from "../types.js";
 /**
  * Generates CSS spacing styles for margin or padding
  * @param spacing - The spacing object containing top, trailing, bottom, and leading values
@@ -47,8 +48,9 @@ export function getColor({ colorMap, colorMode = "light", fallback = "FFFFFF", }
                 .map((point) => `${point.color} ${point.percent}%`)
                 .join(", ");
             return `radial-gradient(${colorPoints})`;
+        default:
+            return fallback;
     }
-    return fallback;
 }
 /**
  * Generates CSS border style string
@@ -56,7 +58,9 @@ export function getColor({ colorMap, colorMode = "light", fallback = "FFFFFF", }
  * @param colorMode - Color mode (light/dark)
  * @returns CSS border style string
  */
-function getBorderStyle(border, colorMode = "light") {
+export function getBorderStyle(border, colorMode = "light") {
+    if (!border)
+        return "";
     const color = getColor({ colorMap: border.color, colorMode });
     return `${border.width}px solid ${color}`;
 }
@@ -65,7 +69,7 @@ function getBorderStyle(border, colorMode = "light") {
  * @param corners - Corner radius configuration
  * @returns CSS border radius string
  */
-function getCornerRadiusStyle(corners) {
+export function getCornerRadiusStyle(corners) {
     return `${corners.top_leading}px ${corners.top_trailing}px ${corners.bottom_trailing}px ${corners.bottom_leading}px`;
 }
 /**
@@ -129,12 +133,12 @@ export function getComponentStyles({ backgroundColor, border, margin, padding, t
  * @param size - Size configuration object
  * @returns CSS style object with size properties
  */
-export function getSizeStyle(size) {
+export function getSizeStyle(size, isZStack = false) {
     function getSizeValue(size) {
         if (size.type === "fixed") {
             return `${size.value}px`;
         }
-        if (size.type === "fit") {
+        if (size.type === "fit" || isZStack) {
             return "fit-content";
         }
         if (size.type === "fill") {
@@ -172,7 +176,7 @@ export function getGradientStyle(colorMode, gradientColors) {
  * @returns CSS style object with mask properties
  */
 export const getMaskStyle = (maskShape) => {
-    let maskStyles = {
+    const maskStyles = {
         "--corner-radius": "0px",
         "--clip-path": "none",
     };
@@ -192,6 +196,47 @@ export const getMaskStyle = (maskShape) => {
     }
     return maskStyles;
 };
+function getInsetStyles(dimension) {
+    const defaultStyles = {
+        "--inset": "initial",
+        "--transform": "initial",
+    };
+    switch (dimension.alignment) {
+        case "top_leading":
+            defaultStyles["--inset"] = "0 auto auto 0";
+            break;
+        case "top":
+            defaultStyles["--inset"] = "0 50%";
+            defaultStyles["--transform"] = "translate(-50%, 0)";
+            break;
+        case "top_trailing":
+            defaultStyles["--inset"] = "0 0 auto auto";
+            break;
+        case "leading":
+            defaultStyles["--inset"] = "50% 0 50% 0";
+            defaultStyles["--transform"] = "translate(0, -50%)";
+            break;
+        case "center":
+            defaultStyles["--inset"] = "50% 50% 50% 50%";
+            defaultStyles["--transform"] = "translate(-50%, -50%)";
+            break;
+        case "trailing":
+            defaultStyles["--inset"] = "50% 0 50% auto";
+            defaultStyles["--transform"] = "translate(0, -50%)";
+            break;
+        case "bottom_leading":
+            defaultStyles["--inset"] = "auto auto 0 0";
+            break;
+        case "bottom":
+            defaultStyles["--inset"] = "auto 50% 0 50%";
+            defaultStyles["--transform"] = "translate(-50%, 0)";
+            break;
+        case "bottom_trailing":
+            defaultStyles["--inset"] = "auto 0 0 auto";
+            break;
+    }
+    return defaultStyles;
+}
 /**
  * Generates dimension-related styles for stack components
  * @param dimension - Dimension configuration object
@@ -202,9 +247,14 @@ export function getDimensionStyle(dimension) {
         "--direction": "initial",
         "--alignment": "initial",
         "--distribution": "initial",
+        "--position": "relative",
+        "--inset": "unset",
+        "--transform": "unset",
     };
     if (dimension.type === "zlayer") {
-        // TODO: Review with Monetization team
+        styles["--position"] = "absolute";
+        const insetStyles = getInsetStyles(dimension);
+        Object.assign(styles, insetStyles);
     }
     else {
         styles["--direction"] = StackDirection[dimension.type];
@@ -231,7 +281,8 @@ export function getTextStyles(props, colorMode = "light") {
         "--background-clip": "initial",
         "--text-fill-color": "initial",
     };
-    styles["--text-align"] = horizontal_alignment;
+    styles["--text-align"] =
+        TextAlignments[horizontal_alignment] || TextAlignments.leading;
     styles["--font-weight"] = FontWeights[font_weight] || FontWeights.regular;
     styles["--font-size"] = FontSizes[font_size] || FontSizes.body_m;
     styles["--font-family"] = font_name || "sans-serif";
@@ -264,12 +315,30 @@ export function stringifyStyles(styles) {
  * @returns The label in the preferred or fallback locale, or undefined.
  */
 export function getLabelById(label_id, locale, fallbackLocale, labels) {
-    const fallback = (labels[fallbackLocale] || {})[label_id];
+    const fallback = labels[fallbackLocale]?.[label_id];
     if (!(labels[locale] || {})[label_id]) {
         return fallback;
     }
     return labels[locale][label_id];
 }
+/**
+ * Gets a label by ID and replaces any variables in it with values from the dictionary
+ * @param text_lid - The ID of the text label to retrieve
+ * @param purchaseState - Object containing locale and defaultLocale
+ * @param labels - ComponentLocalizations containing the labels
+ * @param variableDictionary - Dictionary of variables to replace in the label text
+ * @returns The label with variables replaced, or undefined if label not found
+ */
+export function getLabelAndReplaceVariables({ text_lid, locale, defaultLocale, labels, variableDictionary, }) {
+    if (!text_lid)
+        return "";
+    const label = getLabelById(text_lid, locale, defaultLocale, labels);
+    const parsedLabel = replaceVariables({
+        value: label,
+        variableDictionary,
+    });
+    return parsedLabel;
+}
 /**
  * Given an instance of PaywallData, returns the id of the first package marked as `is_selected_by_default` if any.
  * @param paywallData
@@ -281,8 +350,8 @@ export function findSelectedPackageId(paywallData) {
             node.is_selected_by_default) {
             return node;
         }
-        if (node.components) {
-            for (let c of node.components) {
+        if (node.components && Array.isArray(node.components)) {
+            for (const c of node.components) {
                 const pkg = traverseNode(c);
                 if (pkg) {
                     return pkg;
@@ -309,7 +378,7 @@ export const getActiveStateProps = (overrides, componentState) => {
     const activeStateKeys = getComponentActiveStateKeys(componentState);
     const activeStateProps = activeStateKeys.reduce((props, key) => {
         if (overrides) {
-            const styles = overrides.states[key];
+            const styles = overrides[key] || {};
             return { ...props, ...styles };
         }
         return props;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "0.0.15",
+  "version": "0.0.17",
   "author": {
     "name": "RevenueCat, Inc."
   },
@@ -36,7 +36,8 @@
     "chromatic": "chromatic",
     "format": "prettier --write .",
     "typecheck": "tsc --noEmit",
-    "test": "vitest"
+    "test": "vitest",
+    "lint": "eslint --config eslint.config.js src/**/*"
   },
   "files": [
     "dist",
@@ -57,39 +58,40 @@
     }
   },
   "peerDependencies": {
-    "svelte": "^5.0.0"
+    "svelte": "^5.3.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.9.0",
+    "@chromatic-com/storybook": "^3.2.2",
     "@eslint/js": "^9.16.0",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/addon-svelte-csf": "^5.0.0-next.9",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/svelte": "^8.3.6",
-    "@storybook/sveltekit": "^8.3.6",
-    "@storybook/test": "^8.3.6",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-svelte-csf": "^5.0.0-next.14",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/svelte": "^8.4.7",
+    "@storybook/sveltekit": "^8.4.7",
+    "@storybook/test": "^8.4.7",
     "@sveltejs/adapter-node": "^5.2.9",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/package": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@sveltejs/kit": "^2.9.0",
+    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/vite-plugin-svelte": "^5.0.2",
     "@typescript-eslint/parser": "^8.17.0",
-    "chromatic": "^11.16.1",
+    "chromatic": "^11.20.0",
     "eslint": "^9.16.0",
     "eslint-plugin-svelte": "^2.46.1",
     "globals": "^15.13.0",
-    "husky": "^9.1.6",
+    "husky": "^9.1.7",
     "lint-staged": "^15.2.10",
-    "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.7",
-    "publint": "^0.2.0",
-    "storybook": "^8.3.6",
-    "svelte": "^5.0.0",
-    "svelte-check": "^4.0.0",
-    "typescript": "^5.0.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.2",
+    "publint": "^0.2.12",
+    "storybook": "^8.4.7",
+    "svelte": "^5.9.1",
+    "svelte-check": "^4.1.1",
+    "typescript": "^5.7.2",
     "typescript-eslint": "^8.17.0",
-    "vite": "^5.0.11"
+    "vite": "^6.0.3",
+    "vitest": "^2.1.8"
   },
   "lint-staged": {
     "**/*": [