@revenuecat/purchases-ui-js 2.0.3 → 2.0.4

package/dist/components/carousel/Carousel.stories.svelte.d.ts

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

package/dist/components/carousel/Carousel.svelte

@@ -0,0 +1,298 @@
+<script lang="ts">
+  import { getColorModeContext } from "../../stores/color-mode";
+  import { getSelectedStateContext } from "../../stores/selected";
+  import type { CarouselProps } from "../../types/components/carousel";
+  import { mapBackground } from "../../utils/background-utils";
+  import {
+    css,
+    mapBorder,
+    mapBorderRadius,
+    mapShadow,
+    mapSpacing,
+    px,
+  } from "../../utils/base-utils";
+  import { getActiveStateProps } from "../../utils/style-utils";
+  import { onMount } from "svelte";
+  import { clamp, getTranslation, mapPageAlignment } from "./carousel-utils";
+  import CarouselPage from "./CarouselPage.svelte";
+  import PageControl from "./PageControl.svelte";
+
+  const props: CarouselProps = $props();
+  const selectedState = getSelectedStateContext();
+  const {
+    pages,
+    padding,
+    margin,
+    background,
+    shape,
+    border,
+    shadow,
+    page_alignment,
+    page_spacing,
+    page_peek,
+    page_control,
+    initial_page_index,
+    loop,
+    auto_advance,
+  } = $derived.by(() => {
+    return {
+      ...props,
+      ...getActiveStateProps($selectedState, props.overrides),
+    };
+  });
+
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
+
+  const carouselStyle = $derived(
+    css({
+      margin: mapSpacing(margin),
+      padding: mapSpacing(padding),
+      ...mapBackground(colorMode, null, background),
+      border: mapBorder(colorMode, border),
+      "border-radius": mapBorderRadius(shape),
+      "box-shadow": mapShadow(colorMode, shadow),
+      "transition-duration": `${auto_advance?.ms_transition_time ?? 0}ms`,
+    }),
+  );
+
+  const sliderStyle = $derived(
+    css({
+      gap: px(page_spacing),
+      padding: `0 ${page_peek + page_spacing}px`,
+      "align-items": mapPageAlignment(page_alignment),
+    }),
+  );
+
+  const prevPages = $derived.by(() => {
+    if (!loop) {
+      return [];
+    }
+
+    const last = pages.length - 1;
+    switch (pages.length) {
+      case 0:
+        return [];
+      case 1:
+        return [0, 0];
+      case 2:
+        return [0, last];
+      default:
+        return [last - 1, last];
+    }
+  });
+
+  const nextPages = $derived.by(() => {
+    if (!loop) {
+      return [];
+    }
+
+    switch (pages.length) {
+      case 0:
+        return [];
+      case 1:
+        return [0, 0];
+      default:
+        return [0, 1];
+    }
+  });
+
+  let slider: HTMLElement | null = null;
+  let currentPage = $state(0);
+  let carouselWidth = $state(0);
+  let pageOffset = $derived(2 * page_peek + page_spacing);
+  let pageWidth = $derived(carouselWidth - pageOffset);
+
+  function startTransition(withDelay: boolean = true, durationMs?: number) {
+    if (slider === null) {
+      return;
+    }
+
+    const delayMs = withDelay ? (auto_advance?.ms_time_per_page ?? 0) : 0;
+    durationMs ??= auto_advance?.ms_transition_time ?? 0;
+    slider.style.transition = `transform ${durationMs}ms ease-in-out ${delayMs}ms`;
+  }
+
+  function stopTransition() {
+    if (slider !== null) {
+      slider.style.transition = "none";
+    }
+  }
+
+  const loopOffset = $derived(loop ? 2 : 0);
+
+  function setSliderTranslate(translate: number) {
+    if (slider !== null) {
+      slider.style.transform = `translateX(${translate}px)`;
+    }
+  }
+
+  function moveTo(index: number) {
+    if (slider === null) {
+      return;
+    }
+
+    index += loopOffset;
+    const translate = index * -pageWidth;
+    setSliderTranslate(translate);
+  }
+
+  function setCurrentPage(index: number) {
+    index %= pages.length + loopOffset;
+    startTransition(true);
+    moveTo(index);
+  }
+
+  function startAutoAdvance() {
+    if (auto_advance == null) {
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      setCurrentPage(currentPage + 1);
+    });
+  }
+
+  onMount(() => {
+    const initialPage =
+      pages.at(initial_page_index) !== undefined ? initial_page_index : 0;
+    currentPage = initialPage;
+
+    stopTransition();
+    moveTo(currentPage);
+    startAutoAdvance();
+  });
+
+  function getPageFromTranslation(translation: number) {
+    return Math.round(translation / -pageWidth) - loopOffset;
+  }
+
+  function ontransitionend() {
+    const translation = getTranslation(slider);
+    const page = getPageFromTranslation(translation);
+    currentPage = (page + pages.length) % pages.length;
+    stopTransition();
+    moveTo(currentPage);
+
+    requestAnimationFrame(() => {
+      startAutoAdvance();
+    });
+  }
+
+  let startTranslation = $state(0);
+
+  function onpointerdown(event: PointerEvent) {
+    const target = event.currentTarget as HTMLElement;
+    target.setPointerCapture(event.pointerId);
+    startTranslation = getTranslation(slider);
+  }
+
+  function onpointerup(event: PointerEvent) {
+    const target = event.currentTarget as HTMLElement;
+    target.releasePointerCapture(event.pointerId);
+
+    const translation = getTranslation(slider);
+    const page = getPageFromTranslation(translation);
+    startTransition(false, 500);
+    moveTo(page);
+  }
+
+  function onpointermove(event: PointerEvent) {
+    const target = event.currentTarget as HTMLElement;
+    if (!target.hasPointerCapture(event.pointerId)) {
+      return;
+    }
+
+    const [min, max] = loop
+      ? [startTranslation - carouselWidth, startTranslation + carouselWidth]
+      : [-(pages.length - 1) * pageWidth, 0];
+    const translation = getTranslation(slider);
+    const newTranslation = clamp(translation + event.movementX, min, max);
+
+    const page = getPageFromTranslation(newTranslation);
+    currentPage = (page + pages.length) % pages.length;
+
+    setSliderTranslate(newTranslation);
+    stopTransition();
+  }
+</script>
+
+<div class="carousel" style={carouselStyle}>
+  <div
+    bind:this={slider}
+    bind:clientWidth={carouselWidth}
+    {ontransitionend}
+    {onpointerdown}
+    {onpointerup}
+    {onpointermove}
+    class="slider"
+    style={sliderStyle}
+    role="region"
+    aria-label="Feature carousel"
+    aria-roledescription="carousel"
+    aria-live="polite"
+  >
+    {#each prevPages as index}
+      <CarouselPage
+        page={pages[index]}
+        {index}
+        pages={pages.length}
+        selected={currentPage === index}
+        hidden
+      />
+    {/each}
+    {#each pages as page, index}
+      <CarouselPage
+        {page}
+        {index}
+        pages={pages.length}
+        selected={currentPage === index}
+      />
+    {/each}
+    {#each nextPages as index}
+      <CarouselPage
+        page={pages[index]}
+        {index}
+        pages={pages.length}
+        selected={currentPage === index}
+        hidden
+      />
+    {/each}
+  </div>
+
+  {#if page_control != null}
+    <PageControl
+      {...page_control}
+      length={pages.length}
+      selected={currentPage}
+    />
+  {/if}
+</div>
+
+<style>
+  .carousel {
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .slider {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+
+    transition-property: transform;
+    transition-duration: 500ms;
+    transition-timing-function: ease-in-out;
+    transition-delay: 2500ms;
+    transform: translateX(0);
+
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+      user-select: none;
+    }
+  }
+</style>

package/dist/components/carousel/Carousel.svelte.d.ts

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

package/dist/components/carousel/CarouselPage.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { StackProps } from "../../types/components/stack";
+  import Stack from "../stack/Stack.svelte";
+
+  interface CarouselPageProps {
+    page: StackProps;
+    index: number;
+    pages: number;
+    selected: boolean;
+    hidden?: boolean;
+  }
+
+  const {
+    index,
+    pages,
+    selected,
+    page,
+    hidden = false,
+  }: CarouselPageProps = $props();
+</script>
+
+<div
+  class="page"
+  role="group"
+  aria-roledescription="slide"
+  aria-label={`Slide ${index + 1} of ${pages}`}
+  aria-current={selected}
+  aria-hidden={hidden}
+>
+  <Stack {...page} />
+</div>
+
+<style>
+  div {
+    flex: 0 0 100%;
+    scroll-snap-align: center;
+    scroll-snap-stop: always;
+  }
+</style>

package/dist/components/carousel/CarouselPage.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { StackProps } from "../../types/components/stack";
+interface CarouselPageProps {
+    page: StackProps;
+    index: number;
+    pages: number;
+    selected: boolean;
+    hidden?: boolean;
+}
+declare const CarouselPage: import("svelte").Component<CarouselPageProps, {}, "">;
+type CarouselPage = ReturnType<typeof CarouselPage>;
+export default CarouselPage;

package/dist/components/carousel/PageControl.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import { getColorModeContext } from "../../stores/color-mode";
+  import type {
+    PageControl,
+    PageControlIndicator,
+  } from "../../types/components/carousel";
+  import { mapBackground } from "../../utils/background-utils";
+  import {
+    css,
+    mapBorder,
+    mapBorderRadius,
+    mapColor,
+    mapShadow,
+    mapSpacing,
+    px,
+  } from "../../utils/base-utils";
+
+  interface ExtraProps {
+    length: number;
+    selected: number;
+  }
+
+  const {
+    position,
+    spacing,
+    margin,
+    padding,
+    background_color = null,
+    border = null,
+    shape = null,
+    shadow = null,
+    active: activeIndicator,
+    default: defaultIndicator,
+    length,
+    selected,
+  }: PageControl & ExtraProps = $props();
+
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
+
+  function mapIndicatorBorder(indicator: PageControlIndicator) {
+    if (indicator.stroke_width == null || indicator.stroke_color == null) {
+      return "none";
+    }
+
+    return mapBorder(colorMode, {
+      width: indicator.stroke_width,
+      color: indicator.stroke_color,
+    });
+  }
+
+  function mapIndicatorStyle(indicator: PageControlIndicator) {
+    return css({
+      width: px(indicator.width),
+      height: px(indicator.height),
+      background: mapColor(colorMode, indicator.color),
+      border: mapIndicatorBorder(indicator),
+      "border-radius": "9999px",
+    });
+  }
+
+  const defaultStyle = $derived(mapIndicatorStyle(defaultIndicator));
+  const activeStyle = $derived(mapIndicatorStyle(activeIndicator));
+
+  const style = $derived(
+    css({
+      order: position === "top" ? -1 : 1,
+      gap: px(spacing),
+      margin: mapSpacing(margin),
+      padding: mapSpacing(padding),
+      ...mapBackground(colorMode, background_color, null),
+      border: mapBorder(colorMode, border),
+      "border-radius": mapBorderRadius(shape),
+      "box-shadow": mapShadow(colorMode, shadow),
+    }),
+  );
+</script>
+
+<div class="control" {style}>
+  {#each { length }, index}
+    <div style={index === selected ? activeStyle : defaultStyle}></div>
+  {/each}
+</div>
+
+<style>
+  .control {
+    align-self: center;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

package/dist/components/carousel/PageControl.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PageControl } from "../../types/components/carousel";
+declare const PageControl: any;
+type PageControl = ReturnType<typeof PageControl>;
+export default PageControl;

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

@@ -0,0 +1,4 @@
+import type { VerticalAlignment } from "../../types/alignment";
+export declare function mapPageAlignment(alignment: VerticalAlignment): string;
+export declare function clamp(value: number, min: number, max: number): number;
+export declare function getTranslation(element: HTMLElement | null): number;

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

@@ -0,0 +1,21 @@
+export function mapPageAlignment(alignment) {
+    switch (alignment) {
+        case "top":
+            return "flex-start";
+        case "center":
+            return "center";
+        case "bottom":
+            return "flex-end";
+    }
+}
+export function clamp(value, min, max) {
+    return Math.max(min, Math.min(value, max));
+}
+export function getTranslation(element) {
+    if (element === null) {
+        return 0;
+    }
+    const style = window.getComputedStyle(element);
+    const trasform = new WebKitCSSMatrix(style.transform);
+    return trasform.m41;
+}

package/dist/components/paywall/Node.svelte

@@ -11,11 +11,12 @@
   import TextNode from "../text/TextNode.svelte";
   import type { Component } from "../../types/component";
   import type { Component as SvelteComponent } from "svelte";
+  import Carousel from "../carousel/Carousel.svelte";
   import Icon from "../icon/Icon.svelte";
-  import Self from "./Node.svelte";
 
   type SupportedComponents =
     | ButtonNode
+    | Carousel
     | Footer
     | Icon
     | Image
@@ -31,6 +32,7 @@
 
   const ComponentTypes = {
     button: ButtonNode,
+    carousel: Carousel,
     footer: Footer,
     icon: Icon,
     image: Image,
@@ -84,16 +86,8 @@
   const [ComponentToRender, dataToUse] = $derived(
     getComponentClass(nodeData) ?? [],
   );
-
-  const components = $derived(
-    ("components" in nodeData ? nodeData.components : undefined) ?? [],
-  );
 </script>
 
 {#if ComponentToRender}
-  <ComponentToRender {...(dataToUse as any) || {}} {...restProps}>
-    {#each components as childData}
-      <Self nodeData={childData} {...restProps} />
-    {/each}
-  </ComponentToRender>
+  <ComponentToRender {...(dataToUse as any) || {}} {...restProps} />
 {/if}

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

@@ -3,8 +3,9 @@ import { Footer, Image, Package, PurchaseButton, Stack, Timeline } from "../..";
 import ButtonNode from "../button/ButtonNode.svelte";
 import TextNode from "../text/TextNode.svelte";
 import type { Component } from "../../types/component";
+import Carousel from "../carousel/Carousel.svelte";
 import Icon from "../icon/Icon.svelte";
-type SupportedComponents = ButtonNode | Footer | Icon | Image | Package | PurchaseButton | Stack | TextNode | Timeline;
+type SupportedComponents = ButtonNode | Carousel | Footer | Icon | Image | Package | PurchaseButton | Stack | TextNode | Timeline;
 interface Props {
     nodeData: Component;
 }

package/dist/components/paywall/Paywall.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import type { PaywallData, UIConfig } from "../../data/entities";
-
   import Footer from "../footer/Footer.svelte";
   import Node from "./Node.svelte";
   import {
@@ -16,11 +14,13 @@
   } from "../../stores/variables";
   import type { ColorMode } from "../../types";
   import type { Action } from "../../types/components/button";
-  import { findSelectedPackageId } from "../../utils/style-utils";
+  import type { PaywallData } from "../../types/paywall";
+  import type { UIConfig } from "../../types/ui-config";
+  import type { VariableDictionary } from "../../types/variables";
   import { registerFonts } from "../../utils/font-utils";
-  import { derived, readable, writable } from "svelte/store";
+  import { findSelectedPackageId } from "../../utils/style-utils";
   import { onMount } from "svelte";
-  import type { VariableDictionary } from "../../types/variables";
+  import { derived, readable, writable } from "svelte/store";
 
   interface Props {
     paywallData: PaywallData;

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

@@ -1,5 +1,6 @@
-import type { PaywallData, UIConfig } from "../../data/entities";
 import type { ColorMode } from "../../types";
+import type { PaywallData } from "../../types/paywall";
+import type { UIConfig } from "../../types/ui-config";
 import type { VariableDictionary } from "../../types/variables";
 interface Props {
     paywallData: PaywallData;

package/dist/components/paywall/fixtures/override-paywall.d.ts

@@ -1,2 +1,2 @@
-import type { PaywallData } from "../../../data/entities";
+import type { PaywallData } from "../../../types/paywall";
 export declare const OVERRIDE_PAYWALL: PaywallData;

package/dist/components/paywall/fixtures/stack-paywall.d.ts

@@ -1,2 +1,2 @@
-import type { PaywallData } from "../../../data/entities";
+import type { PaywallData } from "../../../types/paywall";
 export declare const STACK_PAYWALL: PaywallData;

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

@@ -1,6 +1,6 @@
-import type { PaywallData } from "../../data/entities";
 import type { ColorMode } from "../../types";
 import type { Background } from "../../types/background";
+import type { PaywallData } from "../../types/paywall";
 export declare function getBackgroundStyles({ background, colorMode, }: {
     background?: Background;
     colorMode: ColorMode;

package/dist/components/stack/Stack.svelte

@@ -14,13 +14,17 @@
     px,
   } from "../../utils/base-utils";
   import { getActiveStateProps } from "../../utils/style-utils";
+  import type { Snippet } from "svelte";
   import { mapBadge, mapDimension, mapLayerAlignment } from "./stack-utils";
 
   interface MiscProps {
     onclick?: () => void;
+    children?: Snippet;
   }
 
   const props: StackProps & MiscProps = $props();
+  const { onclick, children } = props;
+
   const selectedState = getSelectedStateContext();
   const {
     components,
@@ -35,7 +39,6 @@
     shape,
     shadow,
     badge,
-    onclick,
   } = $derived.by(() => {
     return {
       ...props,
@@ -110,6 +113,8 @@
       <Node nodeData={component} />
     {/each}
   {/if}
+
+  {@render children?.()}
 </svelte:element>
 
 <style>

package/dist/components/stack/Stack.svelte.d.ts

@@ -1,6 +1,8 @@
 import type { StackProps } from "../../types/components/stack";
+import type { Snippet } from "svelte";
 interface MiscProps {
     onclick?: () => void;
+    children?: Snippet;
 }
 type $$ComponentProps = StackProps & MiscProps;
 declare const Stack: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/index.d.ts

@@ -7,9 +7,9 @@ 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 { type PaywallData as PaywallData } from "./data/entities";
-export { type UIConfig as UIConfig } from "./data/entities";
 export * from "./types";
+export { type PaywallData } from "./types/paywall";
+export { type UIConfig } from "./types/ui-config";
 export { type VariableDictionary } from "./types/variables";
 export * from "./ui/globals";
 export { default as Button } from "./ui/molecules/button.svelte";

package/dist/index.js

@@ -8,9 +8,9 @@ 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 {} from "./data/entities";
-export {} from "./data/entities";
 export * from "./types";
+export {} from "./types/paywall";
+export {} from "./types/ui-config";
 export {} from "./types/variables";
 export * from "./ui/globals";
 export { default as Button } from "./ui/molecules/button.svelte";

package/dist/stores/paywall.d.ts

@@ -1,5 +1,5 @@
-import type { UIConfig } from "../data/entities";
 import type { Action } from "../types/components/button";
+import type { UIConfig } from "../types/ui-config";
 import type { VariableDictionary } from "../types/variables";
 import { type Readable, type Writable } from "svelte/store";
 type PaywallContext = Readonly<{