@revenuecat/purchases-ui-js 0.0.13 → 0.0.15

package/dist/types.d.ts

@@ -1,7 +1,13 @@
 export type ColorMode = "light" | "dark";
+export type ColorStop = {
+    color: string;
+    percent: number;
+};
 type Color = {
-    type: "hex" | "alias";
-    value: string;
+    type: "hex" | "alias" | "linear" | "radial";
+    value?: string;
+    degrees?: number;
+    points?: ColorStop[];
 };
 export type ColorType = {
     dark?: Color;
@@ -25,7 +31,7 @@ export declare enum FontWeights {
     light = 300,
     regular = 400,
     medium = 500,
-    semi_bold = 600,
+    semibold = 600,
     bold = 700,
     extra_bold = 800,
     black = 900

package/dist/types.js

@@ -19,7 +19,7 @@ export var FontWeights;
     FontWeights[FontWeights["light"] = 300] = "light";
     FontWeights[FontWeights["regular"] = 400] = "regular";
     FontWeights[FontWeights["medium"] = 500] = "medium";
-    FontWeights[FontWeights["semi_bold"] = 600] = "semi_bold";
+    FontWeights[FontWeights["semibold"] = 600] = "semibold";
     FontWeights[FontWeights["bold"] = 700] = "bold";
     FontWeights[FontWeights["extra_bold"] = 800] = "extra_bold";
     FontWeights[FontWeights["black"] = 900] = "black";

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

@@ -1,4 +1,4 @@
-import type { ComponentLocalizations, ImageMaskShapeType, PaywallData, TextNodeProps } from "../data/entities.js";
+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";
 export type TextComponentTags = "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 /**
@@ -7,6 +7,16 @@ export type TextComponentTags = "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
  * @returns Corresponding HTML heading tag
  */
 export declare function getTextComponentTag(fontSize: keyof typeof FontSizeTags): TextComponentTags;
+/**
+ * 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?: ColorType;
+    colorMode?: ColorMode;
+    fallback?: string;
+}): string;
 /**
  * Generates comprehensive component styles including spacing, colors, borders and shadows
  * @param params - Component style configuration object
@@ -30,7 +40,7 @@ export declare function getComponentStyles({ backgroundColor, border, margin, pa
     "--padding-inline-end": string;
     "--padding-block-end": string;
     "--padding-inline-start": string;
-    "--background-color": string;
+    "--background": string;
     "--text-color": string;
     "--border": string;
     "--border-radius": string;
@@ -77,14 +87,10 @@ export declare function getDimensionStyle(dimension: DimensionType): {
 /**
  * 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): {
-    "--text-align": string;
-    "--font-weight": number;
-    "--font-size": string;
-    "--font-family": string;
-};
+export declare function getTextStyles(props: TextNodeProps, colorMode?: ColorMode): any;
 /**
  * Converts a style object to a CSS string
  * @param styles - Object containing CSS properties and values
@@ -108,3 +114,4 @@ export declare function getLabelById(label_id: string, locale: string, fallbackL
  * @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;

package/dist/utils/style-utils.js

@@ -28,8 +28,27 @@ export function getTextComponentTag(fontSize) {
  * @param params - Object containing color map, mode and fallback color
  * @returns Color value as string
  */
-function getColor({ colorMap, colorMode = "light", fallback = "FFFFFF", }) {
-    return colorMap?.[colorMode]?.value || fallback;
+export function getColor({ colorMap, colorMode = "light", fallback = "FFFFFF", }) {
+    if (!colorMap)
+        return fallback;
+    const color = colorMap[colorMode] || colorMap["light"];
+    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})`;
+    }
+    return fallback;
 }
 /**
  * Generates CSS border style string
@@ -64,7 +83,7 @@ export function getComponentStyles({ backgroundColor, border, margin, padding, t
         "--padding-inline-end": "0px",
         "--padding-block-end": "0px",
         "--padding-inline-start": "0px",
-        "--background-color": "transparent",
+        "--background": "transparent",
         "--text-color": "#000000",
         "--border": "none",
         "--border-radius": "0px",
@@ -77,7 +96,7 @@ export function getComponentStyles({ backgroundColor, border, margin, padding, t
         Object.assign(stylesObject, getSpacingStyle(margin, "margin"));
     }
     if (backgroundColor) {
-        stylesObject["--background-color"] = getColor({
+        stylesObject["--background"] = getColor({
             colorMap: backgroundColor,
             colorMode,
             fallback: "transparent",
@@ -119,7 +138,6 @@ export function getSizeStyle(size) {
             return "fit-content";
         }
         if (size.type === "fill") {
-            // return "100%";
             const userAgent = navigator.userAgent;
             const isFirefox = userAgent.match(/firefox|fxios/i);
             return isFirefox ? "-moz-available" : "-webkit-fill-available";
@@ -143,9 +161,9 @@ export function getSizeStyle(size) {
  */
 export function getGradientStyle(colorMode, gradientColors) {
     if (!gradientColors)
-        return { "--background": "unset" };
+        return { "--background": "none" };
     return {
-        "--background": `linear-gradient(${gradientColors.map((color) => color[colorMode]?.value).join(", ")})`,
+        "--background": `linear-gradient(${gradientColors.map((color) => color[colorMode]?.value || color["light"].value).join(", ")})`,
     };
 }
 /**
@@ -200,20 +218,29 @@ export function getDimensionStyle(dimension) {
 /**
  * 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 } = props;
+export function getTextStyles(props, colorMode = "light") {
+    const { font_size, horizontal_alignment, font_weight, font_name, color } = props;
     const styles = {
         "--text-align": "initial",
         "--font-weight": 400,
         "--font-size": "initial",
         "--font-family": "sans-serif",
+        "--background-clip": "initial",
+        "--text-fill-color": "initial",
     };
     styles["--text-align"] = horizontal_alignment;
-    styles["--font-weight"] = FontWeights[font_weight];
-    styles["--font-size"] = FontSizes[font_size];
+    styles["--font-weight"] = FontWeights[font_weight] || FontWeights.regular;
+    styles["--font-size"] = FontSizes[font_size] || FontSizes.body_m;
     styles["--font-family"] = font_name || "sans-serif";
+    if (color &&
+        (color[colorMode]?.type === "linear" || color[colorMode]?.type === "radial")) {
+        styles["--background-clip"] = "text";
+        styles["--text-fill-color"] = "transparent";
+        styles["--background"] = getColor({ colorMap: color, colorMode });
+    }
     return styles;
 }
 /**
@@ -276,3 +303,26 @@ export function findSelectedPackageId(paywallData) {
     }
     return p.package_id;
 }
+export const getActiveStateProps = (overrides, componentState) => {
+    if (!componentState)
+        return {};
+    const activeStateKeys = getComponentActiveStateKeys(componentState);
+    const activeStateProps = activeStateKeys.reduce((props, key) => {
+        if (overrides) {
+            const styles = overrides.states[key];
+            return { ...props, ...styles };
+        }
+        return props;
+    }, {});
+    return activeStateProps;
+};
+const getComponentActiveStateKeys = (componentState) => {
+    if (!componentState)
+        return [];
+    const stateKeys = Object.entries(componentState).reduce((activeStates, [stateKey, stateValue]) => {
+        if (stateValue)
+            activeStates.push(stateKey);
+        return activeStates;
+    }, []);
+    return stateKeys;
+};

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

@@ -1,8 +1,28 @@
 export declare const VARIABLE_NAMES: string[];
-export type VariableDictionary = Record<string, string | number | undefined>;
+export type VariableDictionary = {
+    product_name: string | number | undefined;
+    price: string | number | undefined;
+    price_per_period: string | number | undefined;
+    price_per_period_full: string | number | undefined;
+    total_price_and_per_month: string | number | undefined;
+    total_price_and_per_month_full: string | number | undefined;
+    sub_price_per_month: string | number | undefined;
+    sub_price_per_week: string | number | undefined;
+    sub_duration: string | number | undefined;
+    sub_duration_in_months: string | number | undefined;
+    sub_period: string | number | undefined;
+    sub_period_length: string | number | undefined;
+    sub_period_abbreviated: string | number | undefined;
+    sub_offer_duration: string | number | undefined;
+    sub_offer_duration_2: string | number | undefined;
+    sub_offer_price: string | number | undefined;
+    sub_offer_price_2: string | number | undefined;
+    sub_relative_discount: string | number | undefined;
+    [key: string]: string | number | undefined;
+};
 export type ReplaceVariablesProps = {
     value?: string;
-    dictionary?: VariableDictionary;
+    variableDictionary?: VariableDictionary;
 };
 /**
  * Returns a string with the variables replaced by values from the dictionary
@@ -10,4 +30,4 @@ export type ReplaceVariablesProps = {
  * @param dictionary Dictionary containing the values for the variables
  * @returns The string with values: "Try CatGPT Annual for only $59.99/yr ($4.99/mo)"
  */
-export declare const replaceVariables: ({ value, dictionary, }: ReplaceVariablesProps) => string | undefined;
+export declare const replaceVariables: ({ value, variableDictionary: dictionary, }: ReplaceVariablesProps) => string | undefined;

package/dist/utils/variable-utils.js

@@ -24,7 +24,7 @@ export const VARIABLE_NAMES = [
  * @param dictionary Dictionary containing the values for the variables
  * @returns The string with values: "Try CatGPT Annual for only $59.99/yr ($4.99/mo)"
  */
-export const replaceVariables = ({ value = "", dictionary, }) => {
+export const replaceVariables = ({ value = "", variableDictionary: dictionary, }) => {
     if (!dictionary)
         return value;
     return VARIABLE_NAMES.reduce((result, variableName) => {

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.13",
+  "version": "0.0.15",
   "author": {
     "name": "RevenueCat, Inc."
   },
@@ -35,7 +35,8 @@
     "prepare": "husky",
     "chromatic": "chromatic",
     "format": "prettier --write .",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest"
   },
   "files": [
     "dist",
@@ -60,6 +61,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",
+    "@eslint/js": "^9.16.0",
     "@storybook/addon-essentials": "^8.3.6",
     "@storybook/addon-interactions": "^8.3.6",
     "@storybook/addon-links": "^8.3.6",
@@ -72,7 +74,11 @@
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/package": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@typescript-eslint/parser": "^8.17.0",
     "chromatic": "^11.16.1",
+    "eslint": "^9.16.0",
+    "eslint-plugin-svelte": "^2.46.1",
+    "globals": "^15.13.0",
     "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
     "prettier": "^3.3.3",
@@ -82,10 +88,14 @@
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
     "typescript": "^5.0.0",
+    "typescript-eslint": "^8.17.0",
     "vite": "^5.0.11"
   },
   "lint-staged": {
-    "**/*": "prettier --write --ignore-unknown"
+    "**/*": [
+      "prettier --write --ignore-unknown",
+      "eslint --fix"
+    ]
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }