@revenuecat/purchases-ui-js 0.0.14 → 0.0.16

package/dist/types.d.ts

@@ -31,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";
 /**
@@ -87,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): Record<string, unknown>;
 /**
  * Converts a style object to a CSS string
  * @param styles - Object containing CSS properties and values
@@ -118,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<string, T>, componentState?: ComponentState) => T;

package/dist/utils/style-utils.js

@@ -29,10 +29,9 @@ export function getTextComponentTag(fontSize) {
  * @returns Color value as string
  */
 export function getColor({ colorMap, colorMode = "light", fallback = "FFFFFF", }) {
-    const color = colorMap?.[colorMode];
-    if (!color) {
+    if (!colorMap)
         return fallback;
-    }
+    const color = colorMap[colorMode] || colorMap["light"];
     let colorPoints = "";
     switch (color.type) {
         case "hex":
@@ -139,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";
@@ -165,7 +163,7 @@ export function getGradientStyle(colorMode, gradientColors) {
     if (!gradientColors)
         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(", ")})`,
     };
 }
 /**
@@ -174,7 +172,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",
     };
@@ -220,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;
 }
 /**
@@ -257,7 +264,7 @@ 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;
     }
@@ -274,8 +281,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;
@@ -296,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[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/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "0.0.14",
+  "version": "0.0.16",
   "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",
@@ -61,6 +62,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",
@@ -73,7 +75,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",
@@ -83,10 +89,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"
 }