@revenuecat/purchases-ui-js 3.5.1 → 3.5.3

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

@@ -2,159 +2,16 @@
   import Stack from "../stack/Stack.svelte";
   import { getPaywallContext } from "../../stores/paywall";
   import type { PurchaseButtonProps } from "../../types/components/purchase-button";
-  import { getSelectedStateContext } from "../../stores/selected";
-  import { getActiveStateProps } from "../../utils/style-utils";
-  import {
-    type CSS,
-    css,
-    mapBorder,
-    mapBorderRadius,
-    mapShadow,
-    mapSize,
-    mapSpacing,
-    px,
-  } from "../../utils/base-utils";
-  import { mapDimension } from "../stack/stack-utils";
-  import type { StackProps } from "../../types/components/stack";
-  import { DEFAULT_SPACING } from "../../utils/constants";
-  import { getColorModeContext } from "../../stores/color-mode";
-  import { onMount } from "svelte";
 
   const props: PurchaseButtonProps = $props();
   const { stack } = props;
 
-  const { onPurchase, walletButtonRender, selectedPackageId } =
-    getPaywallContext();
-
-  const stackProps: StackProps & { style?: CSS } = { ...stack };
-  const selectedState = getSelectedStateContext();
-  const { size, dimension, spacing, margin, border, shape, shadow } =
-    $derived.by(() => {
-      return {
-        ...stackProps,
-        ...getActiveStateProps($selectedState, stackProps.overrides),
-      };
-    });
-
-  const minDistanceBetweenPurchaseButtons = 10;
-  const maxWaitTimeBeforeClosingSkeleton = 3000;
-
-  const getColorMode = getColorModeContext();
-  const colorMode = $derived(getColorMode());
-
-  const stackLayoutRules = $derived({
-    ...stackProps.style,
-    display: "flex",
-    position: "relative",
-    width: mapSize(size.width),
-    height: mapSize(size.height),
-    ...mapDimension(dimension),
-    gap: px(spacing),
-    margin: mapSpacing({
-      ...(margin
-        ? {
-            ...margin,
-            bottom: Math.max(margin.bottom, minDistanceBetweenPurchaseButtons),
-          }
-        : {
-            ...DEFAULT_SPACING,
-            bottom: minDistanceBetweenPurchaseButtons,
-          }),
-    }),
-  });
-
-  const stackStyle = $derived(css(stackLayoutRules));
-
-  const loaderStyle = $derived(
-    css({
-      ...stackLayoutRules,
-      border: mapBorder(colorMode, border),
-      "border-radius": mapBorderRadius(shape),
-      "box-shadow": mapShadow(colorMode, shadow),
-    }),
-  );
+  const { onPurchase } = getPaywallContext();
 
   const onclick = () => {
     const actionId = props.triggers?.on_purchase_press;
     onPurchase(actionId);
   };
-
-  let shouldShowWalletSkeleton = $state(!!walletButtonRender);
-  const onWalletButtonReady = () => {
-    shouldShowWalletSkeleton = false;
-  };
-
-  onMount(() => {
-    setTimeout(() => {
-      shouldShowWalletSkeleton = false;
-    }, maxWaitTimeBeforeClosingSkeleton);
-  });
 </script>
 
-{#if walletButtonRender && $selectedPackageId}
-  <div style={stackStyle}>
-    <div
-      style="flex-grow: 1; width:100%;"
-      use:walletButtonRender={{
-        selectedPackageId: $selectedPackageId,
-        onReady: onWalletButtonReady,
-      }}
-    ></div>
-  </div>
-{/if}
-
-{#if shouldShowWalletSkeleton}
-  <div class="wallet-skeleton" style={loaderStyle} aria-hidden="true">
-    &nbsp;
-  </div>
-{:else}
-  <Stack {...stack} {onclick} />
-{/if}
-
-<style>
-  .wallet-skeleton {
-    position: relative;
-    overflow: hidden;
-    border-radius: 9999px;
-    background-color: rgba(128, 128, 128, 0.16);
-    backdrop-filter: blur(18px);
-    min-height: 48px;
-    content: " ";
-    flex-grow: 1;
-    width: 100%;
-  }
-
-  .wallet-skeleton::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(
-      135deg,
-      rgba(255, 255, 255, 0.2),
-      rgba(255, 255, 255, 0.01)
-    );
-    opacity: 0.9;
-    mix-blend-mode: screen;
-  }
-
-  .wallet-skeleton::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    transform: translateX(-100%);
-    background: linear-gradient(
-      120deg,
-      transparent 0%,
-      rgba(255, 255, 255, 0.6) 20%,
-      transparent 40%
-    );
-    opacity: 0.8;
-    animation: wallet-skeleton-shimmer 1.4s ease-in-out infinite;
-  }
-
-  @keyframes wallet-skeleton-shimmer {
-    100% {
-      transform: translateX(100%);
-    }
-  }
-</style>
+<Stack {...stack} {onclick} />

package/dist/components/skeleton-loader/SkeletonLoader.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  import {
+    type CSS,
+    css,
+    mapBorder,
+    mapBorderRadius,
+    mapShadow,
+    mapSize,
+    mapSpacing,
+    px,
+  } from "../../utils/base-utils";
+  import { mapDimension } from "../stack/stack-utils";
+  import { DEFAULT_SPACING } from "../../utils/constants";
+  import { getColorModeContext } from "../../stores/color-mode";
+  import type { SkeletonLoaderProps } from "../../types/components/skeleton-loader-props";
+
+  const stackProps: SkeletonLoaderProps & { style?: CSS } = $props();
+
+  const fallbackSize = {
+    width: { type: "fill" },
+    height: { type: "fit" },
+  } as const;
+  const fallbackDimension = {
+    type: "vertical",
+    alignment: "center",
+    distribution: "center",
+  } as const;
+
+  const { size, dimension, spacing, margin, border, shape, shadow, style } =
+    $derived.by(() => {
+      return {
+        size: stackProps.size ?? fallbackSize,
+        dimension: stackProps.dimension ?? fallbackDimension,
+        spacing: stackProps.spacing ?? 0,
+        margin: stackProps.margin ?? DEFAULT_SPACING,
+        border: stackProps.border ?? null,
+        shape: stackProps.shape ?? null,
+        shadow: stackProps.shadow ?? null,
+        style: stackProps.style,
+      };
+    });
+
+  const minDistanceBetweenPurchaseButtons = 10;
+
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
+
+  const stackLayoutRules = $derived({
+    ...style,
+    display: "flex",
+    position: "relative",
+    width: mapSize(size.width),
+    height: mapSize(size.height),
+    ...mapDimension(dimension),
+    gap: px(spacing),
+    margin: mapSpacing({
+      ...(margin
+        ? {
+            ...margin,
+            bottom: Math.max(margin.bottom, minDistanceBetweenPurchaseButtons),
+          }
+        : {
+            ...DEFAULT_SPACING,
+            bottom: minDistanceBetweenPurchaseButtons,
+          }),
+    }),
+  });
+
+  const loaderStyle = $derived(
+    css({
+      ...stackLayoutRules,
+      border: mapBorder(colorMode, border),
+      "border-radius": mapBorderRadius(shape),
+      "box-shadow": mapShadow(colorMode, shadow),
+    }),
+  );
+</script>
+
+<div class="wallet-skeleton" style={loaderStyle} aria-hidden={true}>&nbsp;</div>
+
+<style>
+  .wallet-skeleton {
+    position: relative;
+    overflow: hidden;
+    border-radius: 9999px;
+    background-color: rgba(128, 128, 128, 0.16);
+    backdrop-filter: blur(18px);
+    min-height: 48px;
+    content: " ";
+    flex-grow: 1;
+    width: 100%;
+  }
+
+  .wallet-skeleton::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.2),
+      rgba(255, 255, 255, 0.01)
+    );
+    opacity: 0.9;
+    mix-blend-mode: screen;
+  }
+
+  .wallet-skeleton::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(
+      120deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.6) 20%,
+      transparent 40%
+    );
+    opacity: 0.8;
+    animation: wallet-skeleton-shimmer 1.4s ease-in-out infinite;
+  }
+
+  @keyframes wallet-skeleton-shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+</style>

package/dist/components/skeleton-loader/SkeletonLoader.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type CSS } from "../../utils/base-utils";
+import type { SkeletonLoaderProps } from "../../types/components/skeleton-loader-props";
+type $$ComponentProps = SkeletonLoaderProps & {
+    style?: CSS;
+};
+declare const SkeletonLoader: import("svelte").Component<$$ComponentProps, {}, "">;
+type SkeletonLoader = ReturnType<typeof SkeletonLoader>;
+export default SkeletonLoader;

package/dist/components/stack/Stack.svelte

@@ -59,8 +59,7 @@
 
   const stackStyle = $derived(
     css({
-      ...style,
-      display: "flex",
+      display: props.visible === false ? "none" : "flex",
       position: "relative",
       width: mapSize(size.width),
       height: mapSize(size.height),
@@ -72,6 +71,7 @@
       border: mapBorder(colorMode, border),
       "border-radius": mapBorderRadius(shape),
       "box-shadow": mapShadow(colorMode, shadow),
+      ...style,
     }),
   );
 

package/dist/components/wallet-button/WalletButton.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { getPaywallContext } from "../../stores/paywall";
+  import {
+    type CSS,
+    css,
+    mapSize,
+    mapSpacing,
+    px,
+  } from "../../utils/base-utils";
+  import { mapDimension } from "../stack/stack-utils";
+  import { DEFAULT_SPACING } from "../../utils/constants";
+  import type { WalletButtonProps } from "../../types/components/wallet-button";
+
+  const { walletButtonRender, onWalletButtonReady, selectedPackageId } =
+    getPaywallContext();
+
+  const props: WalletButtonProps & { style?: CSS } = $props();
+
+  const fallbackSize = {
+    width: { type: "fill" },
+    height: { type: "fit" },
+  } as const;
+  const fallbackDimension = {
+    type: "vertical",
+    alignment: "center",
+    distribution: "center",
+  } as const;
+
+  const { size, dimension, spacing, margin, style, border, shape, shadow } =
+    $derived.by(() => {
+      return {
+        size: props.size ?? fallbackSize,
+        dimension: props.dimension ?? fallbackDimension,
+        spacing: props.spacing ?? 0,
+        margin: props.margin ?? DEFAULT_SPACING,
+        border: props.border ?? null,
+        shape: props.shape ?? null,
+        shadow: props.shadow ?? null,
+        style: props.style,
+      };
+    });
+
+  const stackLayoutRules = $derived({
+    ...style,
+    display: "flex",
+    position: "relative",
+    width: mapSize(size.width),
+    height: mapSize(size.height),
+    ...mapDimension(dimension),
+    gap: px(spacing),
+    margin: mapSpacing({
+      ...(margin
+        ? {
+            ...margin,
+          }
+        : {
+            ...DEFAULT_SPACING,
+          }),
+    }),
+  });
+
+  const stackStyle = $derived(css(stackLayoutRules));
+</script>
+
+{#if walletButtonRender && $selectedPackageId}
+  <div style={stackStyle}>
+    <div
+      style="flex-grow: 1; width:100%;"
+      use:walletButtonRender={{
+        selectedPackageId: $selectedPackageId,
+        onReady: props.onWalletButtonReady ?? onWalletButtonReady,
+      }}
+    ></div>
+  </div>
+{/if}

package/dist/components/wallet-button/WalletButton.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type CSS } from "../../utils/base-utils";
+import type { WalletButtonProps } from "../../types/components/wallet-button";
+type $$ComponentProps = WalletButtonProps & {
+    style?: CSS;
+};
+declare const WalletButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type WalletButton = ReturnType<typeof WalletButton>;
+export default WalletButton;

package/dist/stores/paywall.d.ts

@@ -9,14 +9,15 @@ type PaywallContext = Readonly<{
     onPurchase: (actionId?: string) => void;
     walletButtonRender?: (node: HTMLElement, params: {
         selectedPackageId: string;
-        onReady?: () => void;
+        onReady?: (walletButtonAvailable?: boolean) => void;
     }) => {
         destroy?: () => void;
         update?: (params: {
             selectedPackageId: string;
-            onReady?: () => void;
+            onReady?: (walletButtonAvailable?: boolean) => void;
         }) => void;
     };
+    onWalletButtonReady?: (walletButtonAvailable?: boolean) => void;
     onButtonAction: (action: Action, actionId?: string) => void;
     uiConfig: UIConfig;
     hideBackButtons: boolean;

package/dist/stories/paywall-decorator.d.ts

@@ -1,11 +1,11 @@
 import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
 export declare function paywallDecorator<TRenderer extends Renderer, TArgs>(walletButtonRender?: (node: HTMLElement, params: {
     selectedPackageId: string;
-    onReady?: () => void;
+    onReady?: (walletButtonAvailable?: boolean) => void;
 }) => {
     destroy?: () => void;
     update?: (updateParams: {
         selectedPackageId: string;
-        onReady?: () => void;
+        onReady?: (walletButtonAvailable?: boolean) => void;
     }) => void;
-}): DecoratorFunction<TRenderer, TArgs>;
+}, selectedPackageId?: string): DecoratorFunction<TRenderer, TArgs>;

package/dist/stories/paywall-decorator.js

@@ -1,11 +1,11 @@
 import { setPaywallContext } from "../stores/paywall";
 import { readable, writable } from "svelte/store";
-export function paywallDecorator(walletButtonRender) {
+export function paywallDecorator(walletButtonRender, selectedPackageId) {
     return (Story) => {
-        const selectedPackageId = writable(undefined);
-        selectedPackageId.subscribe((packageId) => {
+        const selectedPackageIdWritable = writable(selectedPackageId);
+        selectedPackageIdWritable.subscribe((packageId) => {
             if (packageId !== undefined) {
-                window.alert(`Selected package ${packageId}`);
+                //window.alert(`Selected package ${packageId}`);
             }
         });
         const emptyUiConfig = {
@@ -14,7 +14,7 @@ export function paywallDecorator(walletButtonRender) {
             },
         };
         setPaywallContext({
-            selectedPackageId,
+            selectedPackageId: selectedPackageIdWritable,
             variablesPerPackage: readable(undefined),
             infoPerPackage: readable(undefined),
             onPurchase: () => window.alert("Purchase clicked"),

package/dist/stories/paywall-wrapper-decorator.d.ts

@@ -0,0 +1,2 @@
+import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
+export declare function paywallWrapperDecorator<TRenderer extends Renderer, TArgs>(): DecoratorFunction<TRenderer, TArgs>;

package/dist/stories/paywall-wrapper-decorator.js

@@ -0,0 +1,7 @@
+import PaywallWrapper from "./paywall-wrapper.svelte";
+export function paywallWrapperDecorator() {
+    return (Story) => ({
+        Component: PaywallWrapper,
+        Slot: Story(),
+    });
+}

package/dist/stories/paywall-wrapper.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    children: Snippet;
+  }
+
+  const { children }: Props = $props();
+</script>
+
+<div class="paywall" style="display: contents;">
+  {@render children()}
+</div>
+
+<style>
+  /* The wrapper should not affect layout - it's just for CSS scoping */
+  .paywall {
+    display: contents;
+  }
+</style>

package/dist/stories/paywall-wrapper.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+interface Props {
+    children: Snippet;
+}
+declare const PaywallWrapper: import("svelte").Component<Props, {}, "">;
+type PaywallWrapper = ReturnType<typeof PaywallWrapper>;
+export default PaywallWrapper;

package/dist/stories/selected-package-id-decorator.d.ts

@@ -0,0 +1,2 @@
+import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
+export declare function selectedPackageIdDecorator<TRenderer extends Renderer, TArgs>(selectedPackageId: string): DecoratorFunction<TRenderer, TArgs>;

package/dist/stories/selected-package-id-decorator.js

@@ -0,0 +1,12 @@
+import { writable } from "svelte/store";
+import { getPaywallContext, setPaywallContext } from "../stores/paywall";
+export function selectedPackageIdDecorator(selectedPackageId) {
+    const paywallContext = getPaywallContext();
+    return (Story) => {
+        setPaywallContext({
+            ...paywallContext,
+            selectedPackageId: writable(selectedPackageId),
+        });
+        return Story();
+    };
+}

package/dist/types/component.d.ts

@@ -13,4 +13,7 @@ import type { TabControlButtonProps, TabControlProps, TabControlToggleProps, Tab
 import type { TextNodeProps } from "./components/text";
 import type { TimelineProps } from "./components/timeline";
 import type { VideoProps } from "./components/video";
-export type Component = ButtonProps | CarouselProps | CountdownProps | FooterProps | IconProps | ImageProps | InputMultipleChoiceProps | InputOptionProps | InputSingleChoiceProps | PackageProps | PurchaseButtonProps | RedemptionButtonProps | StackProps | TabControlButtonProps | TabControlToggleProps | TabControlProps | TabsProps | TextNodeProps | TimelineProps | VideoProps;
+import type { WalletButtonProps } from "./components/wallet-button";
+import type { SkeletonLoaderProps } from "./components/skeleton-loader-props";
+import type { ExpressPurchaseButtonProps } from "./components/express-purchase-button-props";
+export type Component = ButtonProps | CarouselProps | CountdownProps | ExpressPurchaseButtonProps | FooterProps | IconProps | ImageProps | InputMultipleChoiceProps | InputOptionProps | InputSingleChoiceProps | PackageProps | PurchaseButtonProps | RedemptionButtonProps | SkeletonLoaderProps | StackProps | TabControlButtonProps | TabControlToggleProps | TabControlProps | TabsProps | TextNodeProps | TimelineProps | WalletButtonProps | VideoProps;

package/dist/types/components/express-purchase-button-props.d.ts

@@ -0,0 +1,8 @@
+import type { BaseComponent } from "../base";
+import type { StackProps } from "./stack";
+export interface ExpressPurchaseButtonProps extends BaseComponent {
+    type: "express_purchase_button";
+    wallet_unknown_stack: StackProps;
+    wallet_available_stack: StackProps;
+    wallet_unavailable_stack: StackProps;
+}

package/dist/types/components/express-purchase-button-props.js

@@ -0,0 +1 @@
+export {};

package/dist/types/components/skeleton-loader-props.d.ts

@@ -0,0 +1,13 @@
+import type { BaseComponent } from "../base";
+import type { BorderType, ShadowType, ShapeType, SizeType, Spacing } from "../..";
+import type { Dimension } from "../alignment";
+export interface SkeletonLoaderProps extends BaseComponent {
+    type: "skeleton_loader";
+    size?: SizeType;
+    dimension?: Dimension;
+    spacing?: number;
+    margin?: Spacing;
+    border?: BorderType | null;
+    shape?: ShapeType | null;
+    shadow?: ShadowType | null;
+}

package/dist/types/components/skeleton-loader-props.js

@@ -0,0 +1 @@
+export {};

package/dist/types/components/wallet-button.d.ts

@@ -0,0 +1,14 @@
+import type { BaseComponent } from "../base";
+import type { BorderType, ShadowType, ShapeType, SizeType, Spacing } from "../..";
+import type { Dimension } from "../alignment";
+export interface WalletButtonProps extends BaseComponent {
+    type: "wallet_button";
+    size?: SizeType;
+    dimension?: Dimension;
+    spacing?: number;
+    margin?: Spacing;
+    border?: BorderType | null;
+    shape?: ShapeType | null;
+    onWalletButtonReady?: (walletButtonAvailable?: boolean) => void;
+    shadow?: ShadowType | null;
+}

package/dist/types/components/wallet-button.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "3.5.1",
+  "version": "3.5.3",
   "author": {
     "name": "RevenueCat, Inc."
   },