@revenuecat/purchases-ui-js 4.8.16 → 4.8.17

package/dist/components/loader/Loader.stories.svelte

@@ -0,0 +1,96 @@
+<script module lang="ts">
+  import LoaderNode from "./LoaderNode.svelte";
+  import { componentDecorator } from "../../stories/component-decorator";
+  import { paywallDecorator } from "../../stories/paywall-decorator";
+  import type { LoaderProps } from "../../types/components/loader";
+  import type { LoaderAnimationProps } from "../../types/components/loader-animation";
+  import type { StackProps } from "../../types/components/stack";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  const circularBar: LoaderAnimationProps = {
+    type: "circular_loader_animation",
+    id: "bar",
+    name: "Loader animation",
+    track: {
+      diameter: { type: "fixed", value: 96 },
+      path_width: 8,
+      endcap: "round",
+      color: { light: { type: "hex", value: "#E5E2FA" } },
+    },
+    fill: {
+      path_width: 8,
+      endcap: "round",
+      color: { light: { type: "hex", value: "#6C63FF" } },
+    },
+  };
+
+  const linearBar: LoaderAnimationProps = {
+    type: "linear_loader_animation",
+    id: "bar",
+    name: "Loader animation",
+    track: {
+      size: {
+        width: { type: "fixed", value: 240 },
+        height: { type: "fixed", value: 12 },
+      },
+      shape: { type: "pill" },
+      color: { light: { type: "hex", value: "#E5E2FA" } },
+    },
+    fill: {
+      size: {
+        width: { type: "fixed", value: 240 },
+        height: { type: "fixed", value: 12 },
+      },
+      shape: { type: "pill" },
+      color: { light: { type: "hex", value: "#6C63FF" } },
+    },
+  };
+
+  const stack: StackProps = {
+    type: "stack",
+    id: "loader-stack",
+    name: "Loader stack",
+    components: [circularBar],
+    size: {
+      width: { type: "fit" },
+      height: { type: "fit" },
+    },
+    dimension: {
+      type: "vertical",
+      alignment: "center",
+      distribution: "center",
+    },
+    spacing: 0,
+    margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    background_color: null,
+    background: null,
+    border: null,
+    shape: null,
+    shadow: null,
+  };
+
+  const { Story } = defineMeta({
+    title: "Components/Loader",
+    component: LoaderNode,
+    decorators: [paywallDecorator(), componentDecorator()],
+    args: {
+      type: "loader",
+      id: "loader",
+      name: "Loader",
+      loading_duration_ms: 5000,
+      action: { type: "workflow" },
+      stack,
+    } satisfies LoaderProps,
+  });
+</script>
+
+<Story name="Circular" parameters={{ chromatic: { disableSnapshot: true } }} />
+
+<Story
+  name="Linear"
+  args={{
+    stack: { ...stack, components: [linearBar] },
+  }}
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>

package/dist/components/loader/Loader.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+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 Loader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Loader = InstanceType<typeof Loader>;
+export default Loader;

package/dist/components/loader/LoaderNode.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import { writable } from "svelte/store";
+
+  import { sharedFrameNow } from "./shared-frame-ticker";
+
+  import Stack from "../stack/Stack.svelte";
+  import { useConditionContext } from "../../stores/condition-context.svelte";
+  import {
+    setLoaderContext,
+    type LoaderContextValue,
+  } from "../../stores/loader";
+  import { getPaywallContext } from "../../stores/paywall";
+  import type { LoaderProps } from "../../types/components/loader";
+  import { resolveOverrideProperties } from "../../utils/style-utils";
+
+  const props: LoaderProps = $props();
+
+  const { onButtonAction } = getPaywallContext();
+  const buildConditionContext = useConditionContext({ state: true });
+  const actualProps = $derived({
+    ...props,
+    ...resolveOverrideProperties(buildConditionContext(), props.overrides),
+  });
+
+  // Publishes progress (0–1) only; geometry belongs to the animation.
+  const loaderStore = writable<LoaderContextValue>({ progress: 0 });
+  setLoaderContext(loaderStore);
+
+  const isVisible = $derived(actualProps.visible !== false);
+
+  // Gated by visibility so a hidden loader can't dispatch in the background.
+  // untrack: the store's synchronous replay would otherwise make actualProps
+  // a dependency too, restarting the timer on any unrelated state change.
+  $effect(() => {
+    if (!isVisible) return;
+
+    return untrack(() => {
+      let fired = false;
+      let unsubscribe: (() => void) | undefined;
+      let dispatchFrame: number | undefined;
+
+      // Stamp startTs at subscribe time — the shared store replays its
+      // current value to new subscribers, which is not this loader's start.
+      const startTs = performance.now();
+
+      const onFrame = (now: number) => {
+        const elapsed = Math.max(0, now - startTs);
+        const next = Math.min(
+          1,
+          elapsed / Math.max(1, actualProps.loading_duration_ms),
+        );
+        loaderStore.set({ progress: next });
+        if (next < 1 || fired) return;
+
+        fired = true;
+        // Detach before dispatching; the action unmounts this screen.
+        unsubscribe?.();
+        unsubscribe = undefined;
+
+        // Pass own id for workflow actions, matching ButtonNode's convention.
+        const actionId =
+          actualProps.action.type === "workflow" ? actualProps.id : undefined;
+        // Defer past the next paint so a loader_progress_components entry at
+        // appears_at: 100 gets a chance to render before navigation unmounts.
+        dispatchFrame = requestAnimationFrame(() =>
+          onButtonAction(actualProps.action, actionId),
+        );
+      };
+
+      unsubscribe = sharedFrameNow.subscribe(onFrame);
+
+      return () => {
+        unsubscribe?.();
+        if (dispatchFrame !== undefined) cancelAnimationFrame(dispatchFrame);
+      };
+    });
+  });
+</script>
+
+{#if isVisible}
+  <Stack {...actualProps.stack} testId="loader" />
+{/if}

package/dist/components/loader/LoaderNode.svelte.d.ts

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

package/dist/components/loader/shared-frame-ticker.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Frame-paced monotonic clock (`performance.now()` ms) shared by every Loader,
+ * so N loaders drive one `requestAnimationFrame` loop rather than N. Shares
+ * only the clock, not the phase — each Loader keeps its own start timestamp.
+ */
+export declare const sharedFrameNow: import("svelte/store").Readable<number>;

package/dist/components/loader/shared-frame-ticker.js

@@ -0,0 +1,28 @@
+import { readable } from "svelte/store";
+/**
+ * Frame-paced monotonic clock (`performance.now()` ms) shared by every Loader,
+ * so N loaders drive one `requestAnimationFrame` loop rather than N. Shares
+ * only the clock, not the phase — each Loader keeps its own start timestamp.
+ */
+export const sharedFrameNow = readable(performance.now(), (set) => {
+    // Publish a fresh value before the first frame lands. Without this a new
+    // subscriber is replayed the module-load timestamp, and any consumer that
+    // treats its first value as a start time measures elapsed-since-page-load.
+    set(performance.now());
+    let frameId;
+    let stopped = false;
+    const tick = (now) => {
+        set(now);
+        // `set` can synchronously drop the last subscriber (stop() below), which
+        // must prevent this still-running call from scheduling another frame.
+        if (stopped)
+            return;
+        frameId = requestAnimationFrame(tick);
+    };
+    frameId = requestAnimationFrame(tick);
+    return () => {
+        stopped = true;
+        if (frameId !== undefined)
+            cancelAnimationFrame(frameId);
+    };
+});

package/dist/components/loader-animation/LoaderAnimation.stories.svelte

@@ -0,0 +1,96 @@
+<script module lang="ts">
+  import LoaderAnimation from "./LoaderAnimation.svelte";
+  import { componentDecorator } from "../../stories/component-decorator";
+  import { paywallDecorator } from "../../stories/paywall-decorator";
+  import { setLoaderContext } from "../../stores/loader";
+  import type { LoaderAnimationProps } from "../../types/components/loader-animation";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { writable } from "svelte/store";
+  import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
+
+  /**
+   * Mock loader context with a fixed progress so visual stories are deterministic.
+   * Geometry comes from the animation's own props, so the context carries progress only.
+   */
+  function staticLoaderDecorator<TRenderer extends Renderer, TArgs>(
+    progress: number,
+  ): DecoratorFunction<TRenderer, TArgs> {
+    return (Story) => {
+      setLoaderContext(writable({ progress }));
+      return Story();
+    };
+  }
+
+  const linearArgs = {
+    type: "linear_loader_animation",
+    track: {
+      size: {
+        width: { type: "fixed", value: 240 },
+        height: { type: "fixed", value: 12 },
+      },
+      shape: { type: "pill" },
+      color: { light: { type: "hex", value: "#E5E2FA" } },
+    },
+    fill: {
+      size: {
+        width: { type: "fixed", value: 240 },
+        height: { type: "fixed", value: 12 },
+      },
+      shape: { type: "pill" },
+      color: { light: { type: "hex", value: "#6C63FF" } },
+    },
+  } satisfies Partial<LoaderAnimationProps>;
+
+  const { Story } = defineMeta({
+    title: "Components/LoaderAnimation",
+    component: LoaderAnimation,
+    decorators: [paywallDecorator(), componentDecorator()],
+    args: {
+      type: "circular_loader_animation",
+      id: "bar",
+      name: "Loader animation",
+      track: {
+        diameter: { type: "fixed", value: 96 },
+        path_width: 8,
+        endcap: "round",
+        color: { light: { type: "hex", value: "#E5E2FA" } },
+      },
+      fill: {
+        path_width: 8,
+        endcap: "round",
+        color: { light: { type: "hex", value: "#6C63FF" } },
+      },
+    } satisfies LoaderAnimationProps,
+  });
+</script>
+
+<Story
+  name="Circular — In progress"
+  decorators={[staticLoaderDecorator(0.7)]}
+/>
+
+<Story name="Circular — Complete" decorators={[staticLoaderDecorator(1)]} />
+
+<Story
+  name="Circular — Large diameter"
+  args={{
+    track: {
+      diameter: { type: "fixed", value: 200 },
+      path_width: 8,
+      endcap: "round",
+      color: { light: { type: "hex", value: "#E5E2FA" } },
+    },
+  }}
+  decorators={[staticLoaderDecorator(0.7)]}
+/>
+
+<Story
+  name="Linear —  In progress"
+  decorators={[staticLoaderDecorator(0.4)]}
+  args={linearArgs}
+/>
+<Story
+  name="Linear — Complete"
+  decorators={[staticLoaderDecorator(1)]}
+  args={linearArgs}
+/>

package/dist/components/loader-animation/LoaderAnimation.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import LoaderAnimation from "./LoaderAnimation.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 LoaderAnimation: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type LoaderAnimation = InstanceType<typeof LoaderAnimation>;
+export default LoaderAnimation;

package/dist/components/loader-animation/LoaderAnimation.svelte

@@ -0,0 +1,223 @@
+<script lang="ts">
+  import { getColorModeContext } from "../../stores/color-mode";
+  import { useConditionContext } from "../../stores/condition-context.svelte";
+  import { getRequiredLoaderContext } from "../../stores/loader";
+  import type {
+    CircularAnimationLayer,
+    CircularLoaderAnimationProps,
+    LinearAnimationLayer,
+    LinearLoaderAnimationProps,
+    LoaderAnimationProps,
+  } from "../../types/components/loader-animation";
+  import { resolveOverrideProperties } from "../../utils/style-utils";
+
+  import { resolveAnimationFill } from "./resolve-animation-fill";
+  import { ringRadius, ringViewBoxSize, svgLinecap } from "./ring-geometry";
+  import {
+    css,
+    mapBorder,
+    mapBorderRadius,
+    mapColor,
+    mapColorInfo,
+    mapColorMode,
+    mapShadow,
+    mapSize,
+    mapSpacing,
+  } from "../../utils/base-utils";
+  import type { ColorGradientInfo } from "../../types/colors";
+
+  const props: LoaderAnimationProps = $props();
+  const svgId = $props.id();
+  const trackGradientId = `${svgId}-track`;
+  const fillGradientId = `${svgId}-fill`;
+
+  // SVG stroke can't take a CSS gradient() string — needs url(#id) into a
+  // real <linearGradient>/<radialGradient> def instead.
+  function svgPaint(info: ColorGradientInfo, id: string): string {
+    return info.type === "alias" || info.type === "hex"
+      ? mapColorInfo(info)
+      : `url(#${id})`;
+  }
+
+  const buildConditionContext = useConditionContext({ state: true });
+
+  const circularOverrideProps = $derived.by(() =>
+    props.type === "circular_loader_animation"
+      ? resolveOverrideProperties<CircularLoaderAnimationProps>(
+          buildConditionContext(),
+          props.overrides,
+        )
+      : {},
+  );
+  const linearOverrideProps = $derived.by(() =>
+    props.type === "linear_loader_animation"
+      ? resolveOverrideProperties<LinearLoaderAnimationProps>(
+          buildConditionContext(),
+          props.overrides,
+        )
+      : {},
+  );
+
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
+
+  const loader = getRequiredLoaderContext(props.type);
+  const progress = $derived(Math.min(1, Math.max(0, $loader.progress)));
+
+  const diameterWidth = (layer: CircularAnimationLayer): string =>
+    layer.diameter.type === "fill" ? "100%" : mapSize(layer.diameter);
+
+  // ── Pill geometry ─────────────────────────────────────────────────────────
+  const pillWidth = (layer: LinearAnimationLayer) =>
+    layer.size.width.type === "fill" ? "100%" : mapSize(layer.size.width);
+
+  const pillLayerStyle = (layer: LinearAnimationLayer) => ({
+    height: mapSize(layer.size.height),
+    "border-radius": mapBorderRadius(layer.shape ?? null),
+    background: mapColor(colorMode, layer.color),
+    ...mapBorder(colorMode, layer.border ?? null),
+    "box-shadow": mapShadow(colorMode, layer.shadow ?? null),
+  });
+</script>
+
+{#snippet gradientDef(info: ColorGradientInfo, id: string)}
+  {#if info.type === "linear"}
+    <linearGradient
+      {id}
+      gradientTransform="rotate({info.degrees - 90}, 0.5, 0.5)"
+    >
+      {#each info.points as point (`${point.percent}-${point.color}`)}
+        <stop offset="{point.percent}%" stop-color={point.color} />
+      {/each}
+    </linearGradient>
+  {:else if info.type === "radial"}
+    <radialGradient {id}>
+      {#each info.points as point (`${point.percent}-${point.color}`)}
+        <stop offset="{point.percent}%" stop-color={point.color} />
+      {/each}
+    </radialGradient>
+  {/if}
+{/snippet}
+
+{#if props.type === "circular_loader_animation"}
+  {@const actualProps = { ...props, ...circularOverrideProps }}
+  {#if actualProps.visible !== false}
+    {@const viewBoxSize = ringViewBoxSize(actualProps.track)}
+    {@const centre = viewBoxSize / 2}
+    {@const fillLayer = resolveAnimationFill(
+      actualProps.track,
+      actualProps.fill,
+    )}
+    {@const fillCircumference =
+      2 * Math.PI * ringRadius(viewBoxSize, fillLayer.path_width)}
+    {@const trackInfo = mapColorMode(colorMode, actualProps.track.color)}
+    {@const fillInfo = mapColorMode(colorMode, fillLayer.color)}
+    {@const outerStyle = css({
+      display: "inline-flex",
+      "align-items": "center",
+      "justify-content": "center",
+      "aspect-ratio": "1",
+      "flex-shrink": "0",
+      width: diameterWidth(actualProps.track),
+      margin: mapSpacing(actualProps.margin ?? null),
+      padding: mapSpacing(actualProps.padding ?? null),
+    })}
+    <div style={outerStyle}>
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 {viewBoxSize} {viewBoxSize}"
+        aria-hidden="true"
+        class="rc-loader-animation rc-loader-animation--circular"
+      >
+        <defs>
+          {@render gradientDef(trackInfo, trackGradientId)}
+          {@render gradientDef(fillInfo, fillGradientId)}
+        </defs>
+        <circle
+          cx={centre}
+          cy={centre}
+          r={ringRadius(viewBoxSize, actualProps.track.path_width)}
+          fill="none"
+          stroke={svgPaint(trackInfo, trackGradientId)}
+          stroke-width={actualProps.track.path_width}
+          stroke-linecap={svgLinecap(actualProps.track.endcap)}
+        />
+        <circle
+          cx={centre}
+          cy={centre}
+          r={ringRadius(viewBoxSize, fillLayer.path_width)}
+          fill="none"
+          stroke={svgPaint(fillInfo, fillGradientId)}
+          stroke-width={fillLayer.path_width}
+          stroke-linecap={svgLinecap(fillLayer.endcap)}
+          stroke-dasharray={fillCircumference}
+          stroke-dashoffset={fillCircumference * (1 - progress)}
+          transform="rotate(-90 {centre} {centre})"
+        />
+      </svg>
+    </div>
+  {/if}
+{:else}
+  {@const actualProps = { ...props, ...linearOverrideProps }}
+  {#if actualProps.visible !== false}
+    {@const fillLayer = resolveAnimationFill(
+      actualProps.track,
+      actualProps.fill,
+    )}
+    {@const outerStyle = css({
+      display: "block",
+      "flex-shrink": "0",
+      width: pillWidth(actualProps.track),
+      margin: mapSpacing(actualProps.margin ?? null),
+      padding: mapSpacing(actualProps.padding ?? null),
+    })}
+    <div style={outerStyle}>
+      <div
+        class="rc-loader-animation rc-loader-animation--linear rc-gradient-border"
+        style={css({
+          position: "relative",
+          width: "100%",
+          "box-sizing": "border-box",
+          ...pillLayerStyle(actualProps.track),
+        })}
+      >
+        <div
+          style={css({
+            width: "100%",
+            height: "100%",
+            overflow: "hidden",
+            "border-radius": mapBorderRadius(actualProps.track.shape ?? null),
+          })}
+        >
+          <div
+            class="rc-loader-animation__fill rc-gradient-border"
+            style={css({
+              width: `${progress * 100}%`,
+              ...pillLayerStyle(fillLayer),
+            })}
+          ></div>
+        </div>
+      </div>
+    </div>
+  {/if}
+{/if}
+
+<style>
+  .rc-loader-animation {
+    box-sizing: border-box;
+  }
+
+  .rc-loader-animation__fill {
+    box-sizing: border-box;
+    transition: width 0.05s linear;
+  }
+
+  /* Inline transition would beat this — keep it in the stylesheet so
+     reduced-motion can actually override it. */
+  @media (prefers-reduced-motion: reduce) {
+    .rc-loader-animation__fill {
+      transition: none;
+    }
+  }
+</style>

package/dist/components/loader-animation/LoaderAnimation.svelte.d.ts

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

package/dist/components/loader-animation/resolve-animation-fill.d.ts

@@ -0,0 +1,3 @@
+import type { CircularAnimationLayer, LinearAnimationLayer } from "../../types/components/loader-animation";
+/** Merges the fill's divergences over the complete track layer. */
+export declare const resolveAnimationFill: <L extends CircularAnimationLayer | LinearAnimationLayer>(track: L, fill: Partial<Omit<L, "diameter">> | undefined) => L;

package/dist/components/loader-animation/resolve-animation-fill.js

@@ -0,0 +1,12 @@
+/** Merges the fill's divergences over the complete track layer. */
+export const resolveAnimationFill = (track, fill) => {
+    if (!fill)
+        return track;
+    const resolved = { ...track };
+    for (const [key, value] of Object.entries(fill)) {
+        // An explicit undefined must not blank out the inherited value.
+        if (value !== undefined)
+            Object.assign(resolved, { [key]: value });
+    }
+    return resolved;
+};

package/dist/components/loader-animation/ring-geometry.d.ts

@@ -0,0 +1,11 @@
+import type { CircularAnimationLayer } from "../../types/components/loader-animation";
+/**
+ * A fixed diameter pegs the viewBox 1:1 to real CSS pixels, so `path_width`
+ * (typed as a literal pixel value) renders at its exact configured width.
+ * `fill`/`relative` diameters have no static pixel size to peg to, so their
+ * stroke width scales with the rendered size instead.
+ */
+export declare const DEFAULT_RING_VIEWBOX = 100;
+export declare const ringViewBoxSize: (layer: CircularAnimationLayer) => number;
+export declare const ringRadius: (viewBoxSize: number, pathWidth: number) => number;
+export declare const svgLinecap: (endcap: "round" | "square") => "round" | "butt";

package/dist/components/loader-animation/ring-geometry.js

@@ -0,0 +1,13 @@
+/**
+ * A fixed diameter pegs the viewBox 1:1 to real CSS pixels, so `path_width`
+ * (typed as a literal pixel value) renders at its exact configured width.
+ * `fill`/`relative` diameters have no static pixel size to peg to, so their
+ * stroke width scales with the rendered size instead.
+ */
+export const DEFAULT_RING_VIEWBOX = 100;
+export const ringViewBoxSize = (layer) => layer.diameter.type === "fixed" ? layer.diameter.value : DEFAULT_RING_VIEWBOX;
+export const ringRadius = (viewBoxSize, pathWidth) => Math.max(0, viewBoxSize / 2 - pathWidth / 2);
+// `square` renders as `butt` — a flat cut exactly at the mathematical
+// endpoint, so the stroke doesn't visibly start before 12 o'clock. `round`
+// keeps its natural bulge past the endpoint.
+export const svgLinecap = (endcap) => endcap === "round" ? "round" : "butt";