@revenuecat/purchases-ui-js 0.0.18 → 0.0.20

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

@@ -1,4 +1,4 @@
-import type { ComponentState, ImageMaskShapeType, PaywallData, TextNodeProps } from "../data/entities.js";
+import type { ComponentState, ImageMaskShapeType, ImageProps, PaywallData, TextNodeProps } from "../data/entities.js";
 import { type BorderType, type ColorMode, type ColorType, type CornerRadiusType, type DimensionType, FontSizeTags, type ShadowType, type ShapeType, type SizeType, type Spacing } from "../types.js";
 type MarginVariables = {
     "--margin-block-start": string;
@@ -60,11 +60,11 @@ type ComponentStyleVariables = {
  * @param params - Component style configuration object
  * @returns CSS style object with component styles
  */
-export declare function getComponentStyles({ backgroundColor, border, margin, padding, textColor, colorMode, shape, shadow, }: {
+export declare function getComponentStyles({ background_color, border, margin, padding, color, colorMode, shape, shadow, }: {
     padding?: Spacing;
     margin?: Spacing;
-    backgroundColor?: ColorType;
-    textColor?: ColorType;
+    background_color?: ColorType;
+    color?: ColorType;
     border?: BorderType;
     colorMode?: ColorMode;
     shape?: ShapeType;
@@ -81,29 +81,6 @@ type SizeStyleVariables = {
  * @returns CSS style object with size properties
  */
 export declare function getSizeStyle(size: SizeType): SizeStyleVariables;
-type GradientStyleVariables = {
-    "--background": string;
-};
-/**
- * Generates gradient background styles
- * @param colorMode - Color mode (light/dark)
- * @param gradientColors - Array of colors for gradient
- * @returns CSS style object with gradient background
- */
-export declare function getGradientStyle(colorMode: ColorMode, gradientColors?: ColorType[]): GradientStyleVariables;
-type MaskStyleVariables = {
-    "--border-start-start-radius": string;
-    "--border-start-end-radius": string;
-    "--border-end-start-radius": string;
-    "--border-end-end-radius": string;
-    "--clip-path": string;
-};
-/**
- * Generates mask styles for images
- * @param maskShape - Shape configuration for image mask
- * @returns CSS style object with mask properties
- */
-export declare const getMaskStyle: (maskShape?: ImageMaskShapeType) => MaskStyleVariables;
 type InsetStyleVariables = {
     "--inset": string;
     "--transform": string;
@@ -151,6 +128,31 @@ export declare function stringifyStyles(styles: Record<string, string | number>)
  * @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;
+export declare const getActiveStateProps: <T>(overrides?: {
+    states?: Record<string, T>;
+}, componentState?: ComponentState) => T;
 export declare function prefixObject(object?: Record<string, string | number>, prefix?: string): Record<string, string | number>;
+export declare function getMaskPath(props: ImageProps & {
+    imageAspectRatio: number;
+}): string;
+type MaskStyleVariables = {
+    "--border-start-start-radius": string;
+    "--border-start-end-radius": string;
+    "--border-end-start-radius": string;
+    "--border-end-end-radius": string;
+};
+/**
+ * Generates mask styles for images
+ * @param maskShape - Shape configuration for image mask
+ * @returns CSS style object with mask properties
+ */
+export declare const getMaskStyle: (maskShape?: ImageMaskShapeType) => MaskStyleVariables;
+export declare function getLinearGradientAngle(props: ImageProps & {
+    imageAspectRatio: number;
+}): {
+    x1: string;
+    y1: string;
+    x2: string;
+    y2: string;
+};
 export {};

package/dist/utils/style-utils.js

@@ -88,7 +88,7 @@ export function getCornerRadiusStyle(corners) {
  * @param params - Component style configuration object
  * @returns CSS style object with component styles
  */
-export function getComponentStyles({ backgroundColor, border, margin, padding, textColor, colorMode = "light", shape, shadow, }) {
+export function getComponentStyles({ background_color, border, margin, padding, color, colorMode = "light", shape, shadow, }) {
     const stylesObject = {
         "--margin-block-start": "0px",
         "--margin-inline-end": "0px",
@@ -113,16 +113,16 @@ export function getComponentStyles({ backgroundColor, border, margin, padding, t
     if (margin) {
         Object.assign(stylesObject, getSpacingStyle(margin, "margin"));
     }
-    if (backgroundColor) {
+    if (background_color) {
         stylesObject["--background"] = getColor({
-            colorMap: backgroundColor,
+            colorMap: background_color,
             colorMode,
             fallback: "transparent",
         });
     }
-    if (textColor) {
+    if (color) {
         stylesObject["--text-color"] = getColor({
-            colorMap: textColor,
+            colorMap: color,
             colorMode,
             fallback: "#000000",
         });
@@ -182,59 +182,6 @@ export function getSizeStyle(size) {
     });
     return styles;
 }
-/**
- * Generates gradient background styles
- * @param colorMode - Color mode (light/dark)
- * @param gradientColors - Array of colors for gradient
- * @returns CSS style object with gradient background
- */
-export function getGradientStyle(colorMode, gradientColors) {
-    if (!gradientColors)
-        return { "--background": "none" };
-    return {
-        "--background": `linear-gradient(${gradientColors.map((color) => color[colorMode]?.value || color["light"].value).join(", ")})`,
-    };
-}
-/**
- * Generates mask styles for images
- * @param maskShape - Shape configuration for image mask
- * @returns CSS style object with mask properties
- */
-export const getMaskStyle = (maskShape) => {
-    const maskStyles = {
-        "--border-end-start-radius": "0px",
-        "--border-end-end-radius": "0px",
-        "--border-start-start-radius": "0px",
-        "--border-start-end-radius": "0px",
-        "--clip-path": "none",
-    };
-    if (maskShape?.type === "circle") {
-        Object.assign(maskStyles, {
-            "--border-end-start-radius": "50%",
-            "--border-end-end-radius": "50%",
-            "--border-start-start-radius": "50%",
-            "--border-start-end-radius": "50%",
-        });
-    }
-    if (maskShape?.type === "rectangle" && maskShape.corners) {
-        Object.assign(maskStyles, getCornerRadiusStyle(maskShape.corners));
-    }
-    // TODO: rework this implementation
-    if (maskShape?.type === "convex") {
-        Object.assign(maskStyles, {
-            "--border-start-start-radius": "0%",
-            "--border-start-end-radius": "0%",
-            "--border-end-start-radius": "50%",
-            "--border-end-end-radius": "50%",
-        });
-    }
-    if (maskShape?.type === "concave") {
-        Object.assign(maskStyles, {
-            "--clip-path": "polygon(0 0, 100% 0, 100% 100%, 50% 110%, 0 100%);",
-        });
-    }
-    return maskStyles;
-};
 export function getInsetStyles(dimension) {
     const defaultStyles = {
         "--inset": "initial",
@@ -385,7 +332,7 @@ export const getActiveStateProps = (overrides, componentState) => {
     const activeStateKeys = getComponentActiveStateKeys(componentState);
     const activeStateProps = activeStateKeys.reduce((props, key) => {
         if (overrides) {
-            const styles = overrides[key] || {};
+            const styles = overrides?.states?.[key] || {};
             return { ...props, ...styles };
         }
         return props;
@@ -413,3 +360,54 @@ export function prefixObject(object, prefix) {
         return acc;
     }, {});
 }
+export function getMaskPath(props) {
+    const { mask_shape: maskShape, imageAspectRatio } = props;
+    let maskPath = "";
+    if (maskShape?.type === "concave") {
+        maskPath = `M 0 0 
+              H 100 
+              V ${imageAspectRatio * 100} 
+              Q 50 ${imageAspectRatio * 80} 0 ${imageAspectRatio * 100} 
+              Z`;
+    }
+    else if (maskShape?.type === "convex") {
+        maskPath = `M 0 0 
+              H 100 
+              V ${imageAspectRatio * 80} 
+              Q 50 ${imageAspectRatio * 120} 0 ${imageAspectRatio * 80} 
+              Z`;
+    }
+    else {
+        maskPath = `M 0 0 H 100 V ${imageAspectRatio * 100} H 0 Z`;
+    }
+    return maskPath;
+}
+/**
+ * Generates mask styles for images
+ * @param maskShape - Shape configuration for image mask
+ * @returns CSS style object with mask properties
+ */
+export const getMaskStyle = (maskShape) => {
+    const maskStyles = {
+        "--border-end-start-radius": "0px",
+        "--border-end-end-radius": "0px",
+        "--border-start-start-radius": "0px",
+        "--border-start-end-radius": "0px",
+    };
+    if (maskShape?.corners) {
+        Object.assign(maskStyles, getCornerRadiusStyle(maskShape.corners));
+    }
+    return maskStyles;
+};
+export function getLinearGradientAngle(props) {
+    if (props.color_overlay?.[props.purchaseState.colorMode]?.type !== "linear") {
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "0%" };
+    }
+    const { color_overlay: colorOverlay } = props;
+    const angle = colorOverlay?.["light"]?.degrees || 0;
+    const x1 = "50%";
+    const y1 = "0%";
+    const x2 = `${Math.round(50 + Math.sin(((angle + 90) * Math.PI) / 90) * 50)}%`;
+    const y2 = `${Math.round(50 - Math.cos(((angle + 90) * Math.PI) / 90) * 50)}%`;
+    return { x1, y1, x2, y2 };
+}

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.18",
+  "version": "0.0.20",
   "author": {
     "name": "RevenueCat, Inc."
   },