@revenuecat/purchases-ui-js 0.0.13 → 0.0.14

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;

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

@@ -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;

package/dist/utils/style-utils.js

@@ -28,8 +28,28 @@ 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", }) {
+    const color = colorMap?.[colorMode];
+    if (!color) {
+        return fallback;
+    }
+    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 +84,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 +97,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",
@@ -143,7 +163,7 @@ 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(", ")})`,
     };

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.14",
   "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",