@revenuecat/purchases-ui-js 0.0.19 → 0.0.21

package/dist/components/button/ButtonNode.stories.svelte

@@ -7,7 +7,7 @@
     SupportedActions,
   } from "../../data/entities";
   import type { PurchaseState } from "../../data/state";
-  import type { ColorMode } from "../../types";
+  import { DEFAULT_COLOR_MODE, DEFAULT_TEXT_COLOR } from "../../utils/constants";
 
   const onAction = (action: SupportedActions) => {
     alert(action.type);
@@ -51,7 +51,7 @@
   const purchaseState: PurchaseState = {
     locale: "en_US",
     defaultLocale: "en_US",
-    colorMode: "light" as ColorMode,
+    colorMode: DEFAULT_COLOR_MODE,
   };
 
   export const labelsData = {
@@ -76,7 +76,7 @@
       light: { type: "hex", value: "transparent" },
     },
     color: {
-      dark: { type: "hex", value: "#000000" },
+      dark: { type: "hex", value: DEFAULT_TEXT_COLOR },
       light: { type: "hex", value: "#ffffff" },
     },
     font_size: "body_m",

package/dist/components/footer/Footer.stories.svelte

@@ -1,12 +1,12 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import Footer from "./Footer.svelte";
-  import type { ColorMode } from "../../types";
+  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
 
   const purchaseState = {
     locale: "en_US",
     defaultLocale: "en_US",
-    colorMode: "light" as ColorMode,
+    colorMode: DEFAULT_COLOR_MODE,
   };
 
   const { Story } = defineMeta({

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

@@ -2,10 +2,10 @@
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import Image from "./Image.svelte";
   import type { PurchaseState } from "../../data/state";
-  import type { ColorMode } from "../../types";
+  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
 
   const purchaseState: PurchaseState = {
-    colorMode: "light" as ColorMode,
+    colorMode: DEFAULT_COLOR_MODE,
     locale: "en_US",
     defaultLocale: "en_US",
   };
@@ -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

@@ -1,16 +1,27 @@
 <script lang="ts">
   import { getImageComponentStyles } from "./image-utils";
   import type { ImageProps } from "../../data/entities";
+  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
 
   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,
     }),
   );
 
@@ -19,29 +30,115 @@
     if (source[colorMode]?.original) {
       return source[colorMode].original;
     } else {
-      return source["light"].original as string;
+      return source[DEFAULT_COLOR_MODE]?.original as string;
     }
   });
 </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?.[DEFAULT_COLOR_MODE]?.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?.[DEFAULT_COLOR_MODE]?.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?.[DEFAULT_COLOR_MODE]?.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 +158,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/components/package/Package.stories.svelte

@@ -3,7 +3,7 @@
   import Package from "./Package.svelte";
   import type { Extra, SupportedActions } from "../../data/entities";
   import type { PurchaseState } from "../../data/state";
-  import type { ColorMode } from "../../types";
+  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
 
   const onAction = (action: SupportedActions, data?: Extra) => {
     alert(`${action.type} ${JSON.stringify(data)}`);
@@ -34,7 +34,7 @@
     },
   };
   const purchaseState: PurchaseState = {
-    colorMode: "light" as ColorMode,
+    colorMode: DEFAULT_COLOR_MODE,
     locale: "en_US",
     defaultLocale: "en_US",
   };

package/dist/components/paywall/Paywall.svelte

@@ -21,6 +21,7 @@
   import { prefersDarkMode } from "../../stores/theme";
   import type { ColorMode } from "../../types";
   import Footer from "../footer/Footer.svelte";
+  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
 
   interface Props {
     paywallData: PaywallData;
@@ -53,7 +54,8 @@
     locale: selectedLocale || paywallData.default_locale,
     defaultLocale: paywallData.default_locale,
     variablesPerPackage,
-    colorMode: preferredColorMode || ($prefersDarkMode ? "dark" : "light"),
+    colorMode:
+      preferredColorMode || ($prefersDarkMode ? "dark" : DEFAULT_COLOR_MODE),
   });
 
   let variableDictionary = $state(

package/dist/components/paywall/Paywall.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { PaywallData } from "../../data/entities";
 import { type VariableDictionary } from "../../utils/variable-utils";
 import type { ColorMode } from "../../types";
-declare const Paywall: import("svelte").Component<{
+interface Props {
     paywallData: PaywallData;
     onPurchaseClicked?: (selectedPackageId: string) => void;
     onBackClicked?: () => void;
@@ -12,6 +12,7 @@ declare const Paywall: import("svelte").Component<{
     variablesPerPackage?: Record<string, VariableDictionary>;
     preferredColorMode?: ColorMode;
     onError?: (error: unknown) => void;
-}, {}, "">;
+}
+declare const Paywall: import("svelte").Component<Props, {}, "">;
 type Paywall = ReturnType<typeof Paywall>;
 export default Paywall;

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

@@ -4,4 +4,4 @@ export declare function getBackgroundStyles({ background, colorMode, }: {
     background?: BaseNodeBackgroundType;
     colorMode: ColorMode;
 }): string;
-export declare function getBackgroundImageSource(paywallData: PaywallData, colorMode: ColorMode): string;
+export declare function getBackgroundImageSource(paywallData: PaywallData, colorMode: ColorMode): string | undefined;

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

@@ -1,3 +1,4 @@
+import { DEFAULT_COLOR_MODE } from "../../utils/constants";
 import { getColor, prefixObject, stringifyStyles, } from "../../utils/style-utils";
 export function getBackgroundStyles({ background, colorMode, }) {
     const styles = { "--background": "initial" };
@@ -19,5 +20,5 @@ export function getBackgroundImageSource(paywallData, colorMode) {
     const backgroundObject = paywallData.components_config.base
         .background;
     return (backgroundObject.value[colorMode]?.original ||
-        backgroundObject.value["light"]?.original);
+        backgroundObject.value[DEFAULT_COLOR_MODE]?.original);
 }

package/dist/components/purchase-button/PurchaseButton.stories.svelte

@@ -2,8 +2,9 @@
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import PurchaseButton from "./PurchaseButton.svelte";
   import type { PurchaseState } from "../../data/state";
-  import type { ColorMode, DimensionType } from "../../types";
+  import type { DimensionType } from "../../types";
   import type { SupportedActions } from "../../data/entities";
+  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
 
   const onAction = (action: SupportedActions) => {
     alert(action.type);
@@ -33,7 +34,7 @@
     },
   };
   const purchaseState: PurchaseState = {
-    colorMode: "light" as ColorMode,
+    colorMode: DEFAULT_COLOR_MODE,
     locale: "en_US",
     defaultLocale: "en_US",
   };

package/dist/components/stack/Stack.stories.svelte

@@ -12,6 +12,11 @@
   import { labelsData as labels } from "../../stories/fixtures";
   import type { PurchaseState } from "../../data/state";
   import type { PaywallComponent } from "../../data/entities";
+  import {
+    DEFAULT_BACKGROUND_COLOR,
+    DEFAULT_COLOR_MODE,
+    DEFAULT_TEXT_COLOR,
+  } from "../../utils/constants";
 
   const { Story } = defineMeta({
     title: "Components/Stack",
@@ -35,7 +40,7 @@
   const purchaseState: PurchaseState = {
     locale: "en_US",
     defaultLocale: "en_US",
-    colorMode: "light",
+    colorMode: DEFAULT_COLOR_MODE,
   };
 
   const components: PaywallComponent[] = [
@@ -379,7 +384,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -422,7 +427,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -465,7 +470,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -508,7 +513,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -551,7 +556,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -594,7 +599,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -637,7 +642,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -680,7 +685,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -775,7 +780,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -818,7 +823,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -861,7 +866,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -904,7 +909,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -947,7 +952,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -990,7 +995,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -1036,8 +1041,8 @@
       distribution: "space_around",
     },
     background_color: {
-      light: { type: "hex", value: "#FFFFFF" },
-      dark: { type: "hex", value: "#FFFFFF" },
+      light: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
+      dark: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
     },
     components,
     labels,
@@ -1082,7 +1087,7 @@
       padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
       margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
       text_lid: "badge",
-      color: { light: { type: "hex", value: "#000000" } },
+      color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
       font_weight: "bold",
       font_size: "body_s",
       horizontal_alignment: "center",
@@ -1104,8 +1109,8 @@
       distribution: "space_around",
     },
     background_color: {
-      light: { type: "hex", value: "#FFFFFF" },
-      dark: { type: "hex", value: "#FFFFFF" },
+      light: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
+      dark: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
     },
     components,
     labels,
@@ -1150,7 +1155,7 @@
       padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
       margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
       text_lid: "badge",
-      color: { light: { type: "hex", value: "#000000" } },
+      color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
       font_weight: "bold",
       font_size: "body_s",
       horizontal_alignment: "center",
@@ -1171,7 +1176,7 @@
       alignment: "center",
     },
     background_color: {
-      light: { type: "hex", value: "#FFFFFF" },
+      light: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
     },
     components: [
       {
@@ -1231,7 +1236,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -1290,7 +1295,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -1349,7 +1354,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",
@@ -1408,7 +1413,7 @@
           padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
           margin: { top: 4, trailing: 4, bottom: 4, leading: 4 },
           text_lid: "badge",
-          color: { light: { type: "hex", value: "#000000" } },
+          color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
           font_weight: "bold",
           font_size: "body_s",
           horizontal_alignment: "center",

package/dist/components/text/TextNode.stories.svelte

@@ -10,6 +10,7 @@
     horizontalAlignmentStoryMeta,
   } from "../../stories/meta-templates";
   import type { VariableDictionary } from "../../utils/variable-utils";
+  import { DEFAULT_COLOR_MODE, DEFAULT_TEXT_COLOR } from "../../utils/constants";
 
   /*
    * Documentation for this component can be found in https://www.notion.so/revenuecat/Text-e257cb046e104351861f8364ede617be?pvs=4
@@ -52,7 +53,7 @@
       purchaseState: {
         locale: "en_US",
         defaultLocale: "en_US",
-        colorMode: "light",
+        colorMode: DEFAULT_COLOR_MODE,
       },
     },
   });
@@ -157,8 +158,8 @@
       },
     },
     background_color: {
-      dark: { type: "hex", value: "#000000" },
-      light: { type: "hex", value: "#000000" },
+      dark: { type: "hex", value: DEFAULT_TEXT_COLOR },
+      light: { type: "hex", value: DEFAULT_TEXT_COLOR },
     },
     name: "hello world!",
   }}
@@ -212,8 +213,8 @@
       },
     },
     background_color: {
-      dark: { type: "hex", value: "#000000" },
-      light: { type: "hex", value: "#000000" },
+      dark: { type: "hex", value: DEFAULT_TEXT_COLOR },
+      light: { type: "hex", value: DEFAULT_TEXT_COLOR },
     },
     name: "hello world!",
   }}

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

@@ -1,9 +1,10 @@
 import { getActiveStateProps, getComponentStyles, getSizeStyle, getTextComponentTag, getTextStyles, prefixObject, stringifyStyles, } from "../../utils/style-utils";
+import { DEFAULT_BACKGROUND_COLOR, DEFAULT_TEXT_COLOR, } from "../../utils/constants";
 export const defaultColor = {
-    light: { type: "hex", value: "#000000" },
+    light: { type: "hex", value: DEFAULT_TEXT_COLOR },
 };
 export const defaultBackgroundColor = {
-    light: { type: "hex", value: "#FFFFFF" },
+    light: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
 };
 /**
  * Generates comprehensive styles for text components by combining text, component and size styles

package/dist/components/timeline/Timeline.stories.svelte

@@ -4,6 +4,7 @@
   import type { PurchaseState } from "../../data/state";
   import { defaultColor } from "../text/text-utils";
   import { type TimelineProps } from "../../data/entities";
+  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
 
   const { Story } = defineMeta({
     title: "Components/Timeline",
@@ -15,7 +16,7 @@
   const purchaseState: PurchaseState = {
     locale: "en_US",
     defaultLocale: "en_US",
-    colorMode: "light",
+    colorMode: DEFAULT_COLOR_MODE,
   };
 
   const labels = {

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/stories/meta-templates.js

@@ -1,3 +1,4 @@
+import { DEFAULT_BACKGROUND_COLOR, DEFAULT_TEXT_COLOR, } from "../utils/constants";
 export const getSpacingStoryMeta = (description) => ({
     description,
     control: { type: "object" },
@@ -18,7 +19,10 @@ export const getColorStoryMeta = (description) => ({
             dark: { type: "color" },
         },
     },
-    defaultValue: { dark: "#FFFFFF", light: "#FFFFFF" },
+    defaultValue: {
+        dark: DEFAULT_BACKGROUND_COLOR,
+        light: DEFAULT_BACKGROUND_COLOR,
+    },
     table: {
         type: {
             summary: "object",
@@ -99,7 +103,7 @@ export const shadowStoryMeta = {
         x: 0,
         y: 0,
         radius: 0,
-        color: { dark: "#000000", light: "#000000" },
+        color: { dark: DEFAULT_TEXT_COLOR, light: DEFAULT_TEXT_COLOR },
     },
     table: {
         type: {
@@ -119,7 +123,7 @@ export const borderStoryMeta = {
     },
     defaultValue: {
         width: 0,
-        color: { dark: "#000000", light: "#000000" },
+        color: { dark: DEFAULT_TEXT_COLOR, light: DEFAULT_TEXT_COLOR },
     },
     description: "Border properties including width, color, style, and radius",
 };

package/dist/utils/constants.d.ts

@@ -0,0 +1,4 @@
+import type { ColorMode } from "../types";
+export declare const DEFAULT_COLOR_MODE: ColorMode;
+export declare const DEFAULT_TEXT_COLOR = "#000000";
+export declare const DEFAULT_BACKGROUND_COLOR = "#FFFFFF";

package/dist/utils/constants.js

@@ -0,0 +1,3 @@
+export const DEFAULT_COLOR_MODE = "light";
+export const DEFAULT_TEXT_COLOR = "#000000";
+export const DEFAULT_BACKGROUND_COLOR = "#FFFFFF";

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

@@ -1,3 +1,4 @@
+import { DEFAULT_COLOR_MODE, DEFAULT_TEXT_COLOR, } from "./constants.js";
 import { FontSizes, FontSizeTags, FontWeights, StackAlignment, StackDirection, StackDistribution, TextAlignments, } from "../types.js";
 /**
  * Generates CSS spacing styles for margin or padding
@@ -35,10 +36,10 @@ export function getTextComponentTag(fontSize) {
  * @param params - Object containing color map, mode and fallback color
  * @returns Color value as string
  */
-export function getColor({ colorMap, colorMode = "light", fallback = "FFFFFF", }) {
+export function getColor({ colorMap, colorMode = DEFAULT_COLOR_MODE, fallback = "FFFFFF", }) {
     if (!colorMap)
         return fallback;
-    const color = colorMap[colorMode] || colorMap["light"];
+    const color = colorMap[colorMode] || colorMap[DEFAULT_COLOR_MODE];
     let colorPoints = "";
     switch (color.type) {
         case "hex":
@@ -64,7 +65,7 @@ export function getColor({ colorMap, colorMode = "light", fallback = "FFFFFF", }
  * @param colorMode - Color mode (light/dark)
  * @returns CSS border style string
  */
-export function getBorderStyle(border, colorMode = "light") {
+export function getBorderStyle(border, colorMode = DEFAULT_COLOR_MODE) {
     if (!border)
         return "";
     const color = getColor({ colorMap: border.color, colorMode });
@@ -88,7 +89,7 @@ export function getCornerRadiusStyle(corners) {
  * @param params - Component style configuration object
  * @returns CSS style object with component styles
  */
-export function getComponentStyles({ background_color, border, margin, padding, color, colorMode = "light", shape, shadow, }) {
+export function getComponentStyles({ background_color, border, margin, padding, color, colorMode = DEFAULT_COLOR_MODE, shape, shadow, }) {
     const stylesObject = {
         "--margin-block-start": "0px",
         "--margin-inline-end": "0px",
@@ -124,7 +125,7 @@ export function getComponentStyles({ background_color, border, margin, padding,
         stylesObject["--text-color"] = getColor({
             colorMap: color,
             colorMode,
-            fallback: "#000000",
+            fallback: DEFAULT_TEXT_COLOR,
         });
     }
     if (border) {
@@ -143,7 +144,7 @@ export function getComponentStyles({ background_color, border, margin, padding,
     }
     if (shadow) {
         stylesObject["--shadow"] = `${shadow.x}px ${shadow.y}px ${shadow.radius}px 
-      ${getColor({ colorMap: shadow.color, colorMode, fallback: "#000000" })}`;
+      ${getColor({ colorMap: shadow.color, colorMode, fallback: DEFAULT_TEXT_COLOR })}`;
     }
     return stylesObject;
 }
@@ -182,59 +183,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",
@@ -309,7 +257,7 @@ export function getDimensionStyle(dimension) {
  * @param colorMode - The currently selected ColorMode (dark/light)
  * @returns CSS style object with text formatting properties
  */
-export function getTextStyles(props, colorMode = "light") {
+export function getTextStyles(props, colorMode = DEFAULT_COLOR_MODE) {
     const { font_size, horizontal_alignment, font_weight, font_name, color } = props;
     const styles = {
         "--text-align": "initial",
@@ -413,3 +361,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?.[DEFAULT_COLOR_MODE]?.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.21",
   "author": {
     "name": "RevenueCat, Inc."
   },
@@ -61,37 +61,37 @@
     "svelte": "^5.3.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
-    "@eslint/js": "^9.16.0",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
+    "@chromatic-com/storybook": "^3.2.3",
+    "@eslint/js": "^9.18.0",
+    "@storybook/addon-essentials": "^8.5.0",
+    "@storybook/addon-interactions": "^8.5.0",
+    "@storybook/addon-links": "^8.5.0",
     "@storybook/addon-svelte-csf": "^5.0.0-next.14",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/svelte": "^8.4.7",
-    "@storybook/sveltekit": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "@sveltejs/adapter-node": "^5.2.9",
-    "@sveltejs/kit": "^2.9.0",
+    "@storybook/blocks": "^8.5.0",
+    "@storybook/svelte": "^8.5.0",
+    "@storybook/sveltekit": "^8.5.0",
+    "@storybook/test": "^8.5.0",
+    "@sveltejs/adapter-node": "^5.2.11",
+    "@sveltejs/kit": "^2.15.3",
     "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^5.0.2",
-    "@typescript-eslint/parser": "^8.17.0",
-    "chromatic": "^11.20.0",
-    "eslint": "^9.16.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@typescript-eslint/parser": "^8.20.0",
+    "chromatic": "^11.24.0",
+    "eslint": "^9.18.0",
     "eslint-plugin-svelte": "^2.46.1",
-    "globals": "^15.13.0",
+    "globals": "^15.14.0",
     "husky": "^9.1.7",
-    "jsdom": "^25.0.1",
-    "lint-staged": "^15.2.10",
+    "jsdom": "^26.0.0",
+    "lint-staged": "^15.3.0",
     "prettier": "^3.4.2",
-    "prettier-plugin-svelte": "^3.3.2",
+    "prettier-plugin-svelte": "^3.3.3",
     "publint": "^0.2.12",
-    "storybook": "^8.4.7",
-    "svelte": "^5.9.1",
-    "svelte-check": "^4.1.1",
-    "typescript": "^5.7.2",
-    "typescript-eslint": "^8.17.0",
-    "vite": "^6.0.3",
+    "storybook": "^8.5.0",
+    "svelte": "^5.18.0",
+    "svelte-check": "^4.1.4",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.0.7",
     "vitest": "^2.1.8"
   },
   "lint-staged": {