@revenuecat/purchases-ui-js 2.0.5 → 2.1.0

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

@@ -1,38 +1,53 @@
+import { FontSizes, FontWeights, TextAlignments, } from "../../types";
 import { mapBackground } from "../../utils/background-utils";
-import { css, mapColor, mapSize, mapSpacing } from "../../utils/base-utils";
+import { css, mapColorInfo, mapColorMode, mapSize, mapSpacing, } from "../../utils/base-utils";
 import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
-import { getTextStyles } from "../../utils/style-utils";
+import { getScopedFontFamily, isFontRCFMManaged } from "../../utils/font-utils";
 export const defaultColor = {
     light: { type: "hex", value: DEFAULT_TEXT_COLOR },
 };
+export function mapTextColor(colorMode, scheme) {
+    const info = mapColorMode(colorMode, scheme);
+    const color = mapColorInfo(info);
+    switch (info.type) {
+        case "alias":
+        case "hex":
+            return { color };
+        case "linear":
+        case "radial":
+            return {
+                color: "transparent",
+                background: color,
+                "-webkit-background-clip": "text",
+                "background-clip": "text",
+            };
+    }
+}
 /**
  * Generates comprehensive styles for text components by combining text, component and size styles
  * @param props - Text component properties including font, color, background, spacing etc.
  * @returns Object containing text inline styles and the appropriate HTML tag to render
  */
-export const getTextComponentStyles = (colorMode, props) => {
-    const { color = defaultColor, background_color, padding, margin, size, } = props;
-    const textStyles = getTextStyles(props);
-    const style = css({
+export const getTextComponentStyles = (colorMode, props, fonts) => {
+    const { font_name, font_size, font_weight, font_weight_int, horizontal_alignment, color = defaultColor, padding, margin, size, } = props;
+    const font = fonts[font_name ?? ""];
+    const fontFamily = font?.web?.family;
+    return css({
         display: "block",
         width: mapSize(size.width),
         height: mapSize(size.height),
         margin: mapSpacing(margin),
         padding: mapSpacing(padding),
-        ...mapBackground(colorMode, background_color, null),
-        color: mapColor(colorMode, color),
-        "text-align": textStyles["--text-align"] || "initial",
-        "font-weight": textStyles["--font-weight"] || "initial",
-        "font-size": textStyles["--font-size"] || "initial",
-        "font-family": textStyles["--font-family"] || "sans-serif",
-        "-webkit-background-clip": textStyles["--background-clip"] || "initial",
-        "background-clip": textStyles["--background-clip"] || "initial",
-        "-webkit-text-fill-color": textStyles["--text-fill-color"] || "initial",
+        ...mapTextColor(colorMode, color),
+        "text-align": TextAlignments[horizontal_alignment] || TextAlignments.leading,
+        "font-weight": font_weight_int ?? FontWeights[font_weight] ?? FontWeights.regular,
+        "font-size": Number.isInteger(Number(font_size))
+            ? `${font_size}px`
+            : FontSizes[font_size] || FontSizes.body_m,
+        "font-family": isFontRCFMManaged(font_name ?? "")
+            ? getScopedFontFamily(fontFamily ?? "")
+            : "sans-serif",
     });
-    return {
-        textStyles: style,
-        tagToRender: "span",
-    };
 };
 export function getTextWrapperInlineStyles(colorMode, _restProps, size, background_color) {
     return css({

package/dist/components/timeline/TimelineItem.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { getTimelineItemContentInlineStyles } from "./timeline-utils";
-  import type { TimelineItemProps } from "../../types/components/timeline";
   import { getColorModeContext } from "../../stores/color-mode";
-  import { getColor, getActiveStateProps } from "../../utils/style-utils";
   import { getSelectedStateContext } from "../../stores/selected";
+  import type { TimelineItemProps } from "../../types/components/timeline";
+  import { css, mapColor } from "../../utils/base-utils";
+  import { getActiveStateProps } from "../../utils/style-utils";
   import Icon from "../icon/Icon.svelte";
-  import { css } from "../../utils/base-utils";
   import TextNode from "../text/TextNode.svelte";
 
   interface Props extends TimelineItemProps {
@@ -64,11 +64,7 @@
   const connectorBarStyles = $derived.by(() => {
     if (!connector) return "";
 
-    const background = getColor({
-      colorMap: connector.color,
-      colorMode,
-      fallback: "#000000",
-    });
+    const background = mapColor(colorMode, connector.color);
 
     return css({
       width: "100%",

package/dist/components/video/Video.stories.svelte

@@ -0,0 +1,267 @@
+<script module lang="ts">
+  import Video from "./Video.svelte";
+  import { componentDecorator } from "../../stories/component-decorator";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  const { Story } = defineMeta({
+    title: "Components/Video",
+    component: Video,
+    decorators: [componentDecorator()],
+    parameters: {
+      chromatic: { disableSnapshot: true },
+    },
+    args: {
+      type: "video",
+      id: "video",
+      name: "Video",
+      fit_mode: "fill",
+      auto_play: true,
+      loop: true,
+      mute_audio: true,
+      show_controls: true,
+      size: {
+        width: { type: "fill" },
+        height: { type: "fill" },
+      },
+      source: {
+        dark: null,
+        light: {
+          width: 1920,
+          height: 1080,
+          url: "https://videos.pexels.com/video-files/10288594/10288594-hd_1920_1080_25fps.mp4",
+          url_low_res:
+            "https://videos.pexels.com/video-files/10288594/10288594-hd_1920_1080_25fps.mp4",
+        },
+      },
+    },
+  });
+</script>
+
+<Story
+  name="Rectangle"
+  args={{
+    mask_shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 0,
+        top_trailing: 0,
+        bottom_leading: 0,
+        bottom_trailing: 0,
+      },
+    },
+  }}
+/>
+
+<Story
+  name="Rounded Rectangle"
+  args={{
+    mask_shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 32,
+        top_trailing: 32,
+        bottom_leading: 32,
+        bottom_trailing: 32,
+      },
+    },
+  }}
+/>
+
+<Story
+  name="Circle"
+  args={{
+    mask_shape: { type: "circle" },
+  }}
+/>
+
+<Story
+  name="Concave"
+  args={{
+    mask_shape: { type: "concave" },
+  }}
+/>
+
+<Story
+  name="Convex"
+  args={{
+    mask_shape: { type: "convex" },
+  }}
+/>
+
+<Story
+  name="With Controls"
+  args={{
+    show_controls: true,
+    auto_play: false,
+    mute_audio: false,
+  }}
+/>
+
+<Story
+  name="Autoplay Muted"
+  args={{
+    show_controls: false,
+    auto_play: true,
+    mute_audio: true,
+    loop: true,
+  }}
+/>
+
+<Story
+  name="With Fallback Image"
+  args={{
+    source: null,
+    fallback_source: {
+      dark: null,
+      light: {
+        width: 1920,
+        height: 1080,
+        original:
+          "https://placehold.co/1920x1080/blue/white?text=Video+Not+Available",
+        heic: "https://placehold.co/1920x1080/blue/white?text=Video+Not+Available",
+        heic_low_res:
+          "https://placehold.co/1920x1080/blue/white?text=Video+Not+Available",
+        webp: "https://placehold.co/1920x1080/blue/white?text=Video+Not+Available",
+        webp_low_res:
+          "https://placehold.co/1920x1080/blue/white?text=Video+Not+Available",
+      },
+    },
+  }}
+/>
+
+<Story
+  name="Overlay Radial Gradient"
+  args={{
+    color_overlay: {
+      light: {
+        type: "radial",
+        points: [
+          {
+            percent: 0,
+            color: "#020024ff",
+          },
+          {
+            percent: 100,
+            color: "#00d4ff00",
+          },
+        ],
+      },
+    },
+  }}
+/>
+
+<Story
+  name="Overlay Linear Gradient"
+  args={{
+    color_overlay: {
+      light: {
+        degrees: 180,
+        points: [
+          {
+            percent: 0,
+            color: "#020024ff",
+          },
+          {
+            percent: 100,
+            color: "#00d4ff00",
+          },
+        ],
+        type: "linear",
+      },
+    },
+  }}
+/>
+
+<Story
+  name="Overlay Solid"
+  args={{
+    color_overlay: {
+      light: {
+        type: "hex",
+        value: "#e7c00069",
+      },
+    },
+  }}
+/>
+
+<Story
+  name="Complex"
+  args={{
+    size: {
+      width: { type: "fixed", value: 400 },
+      height: { type: "fixed", value: 300 },
+    },
+    mask_shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 0,
+        top_trailing: 16,
+        bottom_trailing: 32,
+        bottom_leading: 64,
+      },
+    },
+    fit_mode: "fill",
+    padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+    margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+    color_overlay: {
+      light: {
+        type: "linear",
+        degrees: 180,
+        points: [
+          { percent: 0, color: "#ff000080" },
+          { percent: 100, color: "#ff00ff00" },
+        ],
+      },
+    },
+    border: {
+      width: 3,
+      color: {
+        light: { type: "hex", value: "#00ff0080" },
+      },
+    },
+    shadow: {
+      x: 0,
+      y: 0,
+      radius: 16,
+      color: {
+        light: { type: "hex", value: "#0000ff80" },
+      },
+    },
+    show_controls: true,
+    auto_play: false,
+    mute_audio: false,
+    loop: false,
+  }}
+/>
+
+<Story
+  name="Fixed Size"
+  args={{
+    size: {
+      width: { type: "fixed", value: 320 },
+      height: { type: "fixed", value: 240 },
+    },
+  }}
+/>
+
+<Story
+  name="Fit Mode - Contain"
+  args={{
+    fit_mode: "fit",
+    size: {
+      width: { type: "fixed", value: 400 },
+      height: { type: "fixed", value: 300 },
+    },
+  }}
+/>
+
+<Story
+  name="Fit Mode - Cover"
+  args={{
+    fit_mode: "fill",
+    size: {
+      width: { type: "fixed", value: 400 },
+      height: { type: "fixed", value: 300 },
+    },
+  }}
+/>

package/dist/components/video/Video.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Video from "./Video.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Video: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Video = InstanceType<typeof Video>;
+export default Video;

package/dist/components/video/Video.svelte

@@ -0,0 +1,248 @@
+<script lang="ts">
+  import { getColorModeContext } from "../../stores/color-mode";
+  import { getSelectedStateContext } from "../../stores/selected";
+  import type { VideoProps } from "../../types/components/video";
+  import type { VideoFiles, ImageFiles } from "../../types/media";
+  import {
+    css,
+    mapColor,
+    mapColorMode,
+    mapFitMode,
+    mapSize,
+    mapSpacing,
+  } from "../../utils/base-utils";
+  import { getActiveStateProps } from "../../utils/style-utils";
+  import ClipPath from "../image/ClipPath.svelte";
+  import Overlay from "../image/Overlay.svelte";
+
+  const props: VideoProps = $props();
+
+  const selectedState = getSelectedStateContext();
+  const {
+    id,
+    source,
+    fallback_source,
+    size,
+    mask_shape,
+    fit_mode,
+    padding,
+    margin,
+    color_overlay,
+    border,
+    shadow,
+    auto_play,
+    loop,
+    mute_audio,
+    show_controls,
+  } = $derived.by(() => {
+    return {
+      ...props,
+      ...getActiveStateProps($selectedState, props.overrides),
+    };
+  });
+
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
+  const video: VideoFiles | null = $derived(
+    source ? (mapColorMode(colorMode, source as any) as VideoFiles) : null,
+  );
+  const fallbackImage: ImageFiles | null = $derived(
+    fallback_source
+      ? (mapColorMode(colorMode, fallback_source as any) as ImageFiles)
+      : null,
+  );
+
+  let wrapperWidth = $state(0);
+  let videoSize = $state({
+    height: 0,
+    width: 0,
+  });
+  let videoElement = $state<HTMLVideoElement | null>(null);
+  let hasVideoError = $state(false);
+
+  // Load video or fallback image metadata to get dimensions
+  $effect(() => {
+    // If we have a video, load its dimensions
+    if (video) {
+      if (video.width && video.height) {
+        videoSize = {
+          height: video.height,
+          width: video.width,
+        };
+        return;
+      }
+
+      // If dimensions aren't provided, try to load them from the video element
+      if (videoElement) {
+        const onLoadedMetadata = () => {
+          videoSize = {
+            height: videoElement?.videoHeight ?? 0,
+            width: videoElement?.videoWidth ?? 0,
+          };
+        };
+
+        const onError = () => {
+          hasVideoError = true;
+        };
+
+        videoElement.addEventListener("loadedmetadata", onLoadedMetadata);
+        videoElement.addEventListener("error", onError);
+
+        return () => {
+          videoElement?.removeEventListener("loadedmetadata", onLoadedMetadata);
+          videoElement?.removeEventListener("error", onError);
+        };
+      }
+    }
+    // If we don't have a video but have a fallback image, use its dimensions
+    else if (fallbackImage) {
+      if (fallbackImage.width && fallbackImage.height) {
+        videoSize = {
+          height: fallbackImage.height,
+          width: fallbackImage.width,
+        };
+        return;
+      }
+
+      // If dimensions aren't provided, load them from the image
+      const img = new window.Image();
+      img.src = fallbackImage.original;
+
+      const onImageLoad = () => {
+        videoSize = {
+          height: img.height,
+          width: img.width,
+        };
+      };
+
+      img.addEventListener("load", onImageLoad);
+      return () => {
+        img.removeEventListener("load", onImageLoad);
+      };
+    }
+  });
+
+  const height = $derived.by(() => {
+    if (size.height.type === "fixed") {
+      return size.height.value;
+    }
+    return Math.round(wrapperWidth * (videoSize.height / videoSize.width));
+  });
+
+  const style = $derived(
+    css({
+      width: mapSize(size.width),
+      height: `${height}px`,
+      margin: mapSpacing(margin),
+      padding: mapSpacing(padding),
+      "line-height": 0,
+      "flex-shrink": size.width.type === "fixed" ? 0 : 1,
+    }),
+  );
+
+  let svgRect = $state<DOMRect | null>(null);
+
+  const [svgWidth, svgHeight] = $derived.by(() => {
+    return [svgRect?.width ?? 0, svgRect?.height ?? 0];
+  });
+
+  const viewBox = $derived.by(() => {
+    return `0 0 ${svgWidth} ${svgHeight}`;
+  });
+
+  const svgStyle = $derived.by(() => {
+    if (!shadow?.color) {
+      return "";
+    }
+
+    const { x, y, radius, color } = shadow;
+    const shadowColor = mapColor(colorMode, color);
+    return `filter: drop-shadow(${x}px ${y}px ${radius}px ${shadowColor})`;
+  });
+
+  const overlay = $derived(
+    color_overlay && mapColorMode(colorMode, color_overlay),
+  );
+
+  const shouldShowFallback = $derived(hasVideoError || !video);
+</script>
+
+<div {style} bind:clientWidth={wrapperWidth}>
+  <svg
+    bind:contentRect={svgRect}
+    width="100%"
+    height="100%"
+    {viewBox}
+    style={svgStyle}
+  >
+    <defs>
+      <clipPath id={`${id}-path`}>
+        <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
+      </clipPath>
+
+      <g id={`${id}-border`}>
+        <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
+      </g>
+
+      <Overlay id={`${id}-overlay`} {overlay} />
+    </defs>
+
+    {#if border && border.width > 0}
+      <use href={`#${id}-border`} fill="transparent" />
+    {/if}
+
+    <g clip-path={`url(#${id}-path)`}>
+      <foreignObject x="0" y="0" width="100%" height="100%">
+        {#if shouldShowFallback && fallbackImage}
+          <img
+            src={fallbackImage.original}
+            style="object-fit:{mapFitMode(fit_mode)}"
+            alt=""
+          />
+        {:else if video}
+          <video
+            bind:this={videoElement}
+            src={video.url}
+            style="object-fit:{mapFitMode(fit_mode)}"
+            autoplay={auto_play}
+            {loop}
+            muted={mute_audio}
+            controls={show_controls}
+            playsinline
+          >
+            <track kind="captions" />
+          </video>
+        {/if}
+      </foreignObject>
+
+      {#if overlay}
+        <rect
+          x="0"
+          y="0"
+          height="100%"
+          width="100%"
+          fill={`url(#${id}-overlay)`}
+        />
+      {/if}
+
+      {#if border && border.width > 0}
+        <use
+          href={`#${id}-border`}
+          fill="none"
+          stroke={mapColor(colorMode, border.color)}
+          stroke-width={border.width}
+        />
+      {/if}
+    </g>
+  </svg>
+</div>
+
+<style>
+  video,
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    object-position: center;
+  }
+</style>

package/dist/components/video/Video.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { VideoProps } from "../../types/components/video";
+declare const Video: import("svelte").Component<VideoProps, {}, "">;
+type Video = ReturnType<typeof Video>;
+export default Video;

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { default as PurchaseButton } from "./components/purchase-button/Purchase
 export { default as Stack } from "./components/stack/Stack.svelte";
 export { default as Text } from "./components/text/Text.svelte";
 export { default as Timeline } from "./components/timeline/Timeline.svelte";
+export { default as Video } from "./components/video/Video.svelte";
 export * from "./types";
 export { type PaywallData } from "./types/paywall";
 export { type UIConfig } from "./types/ui-config";

package/dist/index.js

@@ -8,6 +8,7 @@ export { default as PurchaseButton } from "./components/purchase-button/Purchase
 export { default as Stack } from "./components/stack/Stack.svelte";
 export { default as Text } from "./components/text/Text.svelte";
 export { default as Timeline } from "./components/timeline/Timeline.svelte";
+export { default as Video } from "./components/video/Video.svelte";
 export * from "./types";
 export {} from "./types/paywall";
 export {} from "./types/ui-config";

package/dist/stores/paywall.d.ts

@@ -6,7 +6,7 @@ type PaywallContext = Readonly<{
     selectedPackageId: Writable<string | undefined>;
     variablesPerPackage: Readable<Record<string, VariableDictionary> | undefined>;
     onPurchase: () => void;
-    onButtonAction: (action: Action) => void;
+    onButtonAction: (action: Action, actionId?: string) => void;
     uiConfig: UIConfig;
 }>;
 export declare function setPaywallContext(context: PaywallContext): void;

package/dist/stories/paywall-decorator.js

@@ -17,7 +17,7 @@ export function paywallDecorator() {
             selectedPackageId,
             variablesPerPackage: readable(undefined),
             onPurchase: () => window.alert("Purchase clicked"),
-            onButtonAction: (action) => window.alert(`Button clicked: ${JSON.stringify(action, undefined, 2)}`),
+            onButtonAction: (action, actionId) => window.alert(`Button clicked: ${JSON.stringify({ action, actionId }, undefined, 2)}`),
             uiConfig: emptyUiConfig,
         });
         return Story();

package/dist/types/base.d.ts

@@ -4,4 +4,5 @@ export interface BaseComponent {
     id: string;
     name: string;
     fallback?: Component;
+    triggers?: Record<string, string>;
 }