@revenuecat/purchases-ui-js 0.0.19 → 0.0.20

package/dist/components/image/Image.stories.svelte

@@ -64,6 +64,38 @@
     mask_shape: { type: "rectangle" },
   }}
 />
+
+<!-- Rounded Rectangle story -->
+<Story
+  name="Rounded Rectangle"
+  args={{
+    purchaseState,
+    id: "example-id",
+    fit_mode: "fit",
+    size: {
+      width: { type: "fill" },
+      height: { type: "fill" },
+    },
+    source: {
+      light: {
+        original: "https://placehold.co/600x400",
+        heic: "https://placehold.co/600x400",
+        heic_low_res: "https://placehold.co/600x400",
+        webp: "https://placehold.co/600x400",
+        webp_low_res: "https://placehold.co/600x400",
+      },
+    },
+    mask_shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 32,
+        top_trailing: 32,
+        bottom_leading: 32,
+        bottom_trailing: 32,
+      },
+    },
+  }}
+/>
 <!-- Circle story -->
 <Story
   name="Circle"
@@ -133,9 +165,50 @@
     mask_shape: { type: "convex" },
   }}
 />
-<!-- Gradient story -->
+<!-- Radial Gradient story -->
+<Story
+  name="Overlay Radial Gradient"
+  args={{
+    purchaseState,
+    id: "example-id",
+    fit_mode: "fit",
+    size: {
+      width: { type: "fill" },
+      height: { type: "fill" },
+    },
+    source: {
+      light: {
+        original: "https://placehold.co/600x400",
+        heic: "https://placehold.co/600x400",
+        heic_low_res: "https://placehold.co/600x400",
+        webp: "https://placehold.co/600x400",
+        webp_low_res: "https://placehold.co/600x400",
+      },
+    },
+    color_overlay: {
+      dark: {
+        type: "hex",
+        value: "#000000FF",
+      },
+      light: {
+        points: [
+          {
+            color: "#020024ff",
+            percent: 0,
+          },
+          {
+            color: "#00d4ff00",
+            percent: 100,
+          },
+        ],
+        type: "radial",
+      },
+    },
+  }}
+/>
+<!-- Linear Gradient story -->
 <Story
-  name="Background Gradient"
+  name="Overlay Linear Gradient"
   args={{
     purchaseState,
     id: "example-id",
@@ -153,19 +226,57 @@
         webp_low_res: "https://placehold.co/600x400",
       },
     },
-    gradient_colors: [
-      {
-        dark: { type: "hex", value: "#FFFFFF80" },
-        light: { type: "hex", value: "#FFFFFF80" },
+    color_overlay: {
+      dark: {
+        type: "hex",
+        value: "#000000FF",
+      },
+      light: {
+        degrees: 180,
+        points: [
+          {
+            color: "#020024ff",
+            percent: 0,
+          },
+          {
+            color: "#00d4ff00",
+            percent: 100,
+          },
+        ],
+        type: "linear",
+      },
+    },
+  }}
+/>
+<!-- Solid overlay -->
+<Story
+  name="Overlay Solid"
+  args={{
+    purchaseState,
+    id: "example-id",
+    fit_mode: "fit",
+    size: {
+      width: { type: "fill" },
+      height: { type: "fill" },
+    },
+    source: {
+      light: {
+        original: "https://placehold.co/600x400",
+        heic: "https://placehold.co/600x400",
+        heic_low_res: "https://placehold.co/600x400",
+        webp: "https://placehold.co/600x400",
+        webp_low_res: "https://placehold.co/600x400",
       },
-      {
-        dark: { type: "hex", value: "#FFFFFF80" },
-        light: { type: "hex", value: "#FFFFFF80" },
+    },
+    color_overlay: {
+      dark: {
+        type: "hex",
+        value: "#000000FF",
       },
-      {
-        dark: { type: "hex", value: "#000000" },
-        light: { type: "hex", value: "#000000" },
+      light: {
+        type: "hex",
+        value: "#e7c00069",
       },
-    ],
+    },
   }}
 />

package/dist/components/image/Image.svelte

@@ -4,13 +4,23 @@
 
   const { id, source, purchaseState, ...restProps }: ImageProps = $props();
 
-  const { gradientStyles, imageStyles } = $derived(
+  let imageAspectRatio = $state(0);
+  let imageElement: HTMLImageElement | null;
+
+  // Calculate aspect ratio once image loads
+  function onImageLoad() {
+    if (imageElement) {
+      imageAspectRatio = imageElement.naturalHeight / imageElement.naturalWidth;
+    }
+  }
+  const { imageStyles, maskPath, linearGradientAngle } = $derived(
     getImageComponentStyles({
       id,
       colorMode: purchaseState.colorMode,
       source,
       purchaseState,
       ...restProps,
+      imageAspectRatio,
     }),
   );
 
@@ -24,24 +34,110 @@
   });
 </script>
 
-<div
+<img
+  src={imageSource}
+  bind:this={imageElement}
+  onload={onImageLoad}
+  style="display: none;"
+  alt=""
+/>
+
+<svg
   class="rc-pw-image-container"
   id={`rc-pw-image-container-${id}`}
   style={imageStyles}
+  preserveAspectRatio="xMidYMid slice"
+  viewBox={`0 0 100 ${imageAspectRatio * 100}`}
 >
-  <img class="rc-pw-image" src={imageSource} alt="" {id} />
-  <span class="rc-pw-image-overlay" style={gradientStyles}></span>
-</div>
+  <defs>
+    <clipPath id={`clip-path-${id}`}>
+      {#if restProps.mask_shape?.type === "circle"}
+        <ellipse
+          cx="50"
+          cy={imageAspectRatio * 50}
+          rx="50"
+          ry={imageAspectRatio * 50}
+        />
+      {:else}
+        <path d={maskPath} />
+      {/if}
+    </clipPath>
+
+    {#if restProps.color_overlay?.[purchaseState.colorMode]?.type === "linear"}
+      <linearGradient
+        id={`gradient-${id}`}
+        x1={linearGradientAngle.x1}
+        y1={linearGradientAngle.y1}
+        x2={linearGradientAngle.x2}
+        y2={linearGradientAngle.y2}
+      >
+        {#each restProps.color_overlay?.[purchaseState.colorMode]?.points || restProps.color_overlay?.["light"]?.points || [] as stop}
+          <stop
+            offset={`${stop.percent}%`}
+            style={`stop-color: ${stop.color}`}
+          />
+        {/each}
+      </linearGradient>
+    {:else if restProps.color_overlay?.[purchaseState.colorMode]?.type === "radial"}
+      <radialGradient
+        id={`gradient-${id}`}
+        cx="50%"
+        cy="50%"
+        r="50%"
+        fx="50%"
+        fy="50%"
+      >
+        {#each restProps.color_overlay?.[purchaseState.colorMode]?.points || restProps.color_overlay?.["light"]?.points || [] as stop}
+          <stop
+            offset={`${stop.percent}%`}
+            style={`stop-color: ${stop.color}`}
+          />
+        {/each}
+      </radialGradient>
+    {:else if restProps.color_overlay?.[purchaseState.colorMode]?.type === "hex"}
+      <linearGradient id={`gradient-${id}`}>
+        <stop
+          offset="0%"
+          style={`stop-color: ${
+            restProps.color_overlay[purchaseState.colorMode]?.value ||
+            restProps.color_overlay?.["light"]?.value
+          }`}
+        />
+      </linearGradient>
+    {/if}
+  </defs>
+
+  <image
+    class="rc-pw-image"
+    href={imageSource}
+    x="0"
+    y="0"
+    width="100"
+    height={imageAspectRatio * 100}
+    clip-path={`url(#clip-path-${id})`}
+    preserveAspectRatio="xMidYMid slice"
+    {id}
+  />
+
+  <rect
+    class="rc-pw-image-overlay"
+    x="0"
+    y="0"
+    width="100"
+    height={imageAspectRatio * 100}
+    clip-path={`url(#clip-path-${id})`}
+    fill={`url(#gradient-${id})`}
+  />
+</svg>
 
 <style>
   .rc-pw-image-container {
-    position: relative;
-    overflow: hidden;
     border-end-start-radius: var(--image-border-end-start-radius, 0px);
     border-end-end-radius: var(--image-border-end-end-radius, 0px);
     border-start-start-radius: var(--image-border-start-start-radius, 0px);
     border-start-end-radius: var(--image-border-start-end-radius, 0px);
-    clip-path: var(--image-clip-path, initial);
+    position: relative;
+    overflow: hidden;
     display: flex;
     flex: var(--image-flex, 1 1 auto);
     position: var(--image-position, relative);
@@ -61,6 +157,5 @@
   .rc-pw-image-overlay {
     position: absolute;
     inset: 0;
-    background: var(--image-background, none);
   }
 </style>

package/dist/components/image/image-utils.d.ts

@@ -4,7 +4,15 @@ import type { ImageProps } from "../../data/entities";
  * @param props - Image component properties including gradient, mask and size
  * @returns Object containing image style variables and gradient style variables
  */
-export declare const getImageComponentStyles: (props: ImageProps) => {
+export declare const getImageComponentStyles: (props: ImageProps & {
+    imageAspectRatio: number;
+}) => {
     imageStyles: string;
-    gradientStyles: string;
+    maskPath: string;
+    linearGradientAngle: {
+        x1: string;
+        y1: string;
+        x2: string;
+        y2: string;
+    };
 };

package/dist/components/image/image-utils.js

@@ -1,14 +1,11 @@
-import { getActiveStateProps, getGradientStyle, getMaskStyle, getSizeStyle, prefixObject, stringifyStyles, } from "../../utils/style-utils";
+import { getActiveStateProps, getLinearGradientAngle, getMaskPath, getMaskStyle, getSizeStyle, prefixObject, stringifyStyles, } from "../../utils/style-utils";
 /**
  * Generates comprehensive styles for image components by combining gradient and size styles
  * @param props - Image component properties including gradient, mask and size
  * @returns Object containing image style variables and gradient style variables
  */
 export const getImageComponentStyles = (props) => {
-    const { gradient_colors, mask_shape, size, 
-    // max_height, // TODO: implement this. still waiting on spec
-    // override_source_lid, // TODO: Implement this once structure is defined
-    overrides, componentState, purchaseState, zStackChildStyles, } = props;
+    const { size, overrides, componentState, zStackChildStyles } = props;
     const imageStyles = {
         "--height": "unset",
         "--width": "unset",
@@ -21,21 +18,16 @@ export const getImageComponentStyles = (props) => {
         "--inset": "0",
         "--transform": "initial",
     };
-    Object.assign(imageStyles, zStackChildStyles);
-    const backgroundStyles = {
-        "--background": "none",
-    };
     const activeStateProps = getActiveStateProps(overrides, componentState);
-    Object.assign(backgroundStyles, getGradientStyle(purchaseState.colorMode, activeStateProps?.gradient_colors || gradient_colors));
+    Object.assign(imageStyles, zStackChildStyles);
     Object.assign(imageStyles, getSizeStyle({ ...size, ...activeStateProps }));
-    Object.assign(imageStyles, getMaskStyle({
-        ...mask_shape,
-        ...activeStateProps,
-    }));
+    Object.assign(imageStyles, getMaskStyle(props.mask_shape));
     const prefixedImageStyles = prefixObject(imageStyles, "image");
-    const prefixedGradientStyles = prefixObject(backgroundStyles, "image");
+    const maskPath = getMaskPath(props);
+    const linearGradientAngle = getLinearGradientAngle(props);
     return {
         imageStyles: stringifyStyles(prefixedImageStyles),
-        gradientStyles: stringifyStyles(prefixedGradientStyles),
+        maskPath,
+        linearGradientAngle,
     };
 };

package/dist/data/entities.d.ts

@@ -194,7 +194,7 @@ export interface ImageProps extends SharedComponentProps {
     fit_mode: FitTypes;
     size: SizeType;
     source: ImageSourceType;
-    gradient_colors?: ColorType[];
+    color_overlay?: ColorType;
     mask_shape?: ImageMaskShapeType;
     max_height?: number;
     override_source_lid?: string;

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;
@@ -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;
@@ -155,4 +132,27 @@ 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

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