@revenuecat/purchases-ui-js 2.0.3 → 2.0.5

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/package/Package.svelte

@@ -13,7 +13,9 @@
 
   const { selectedPackageId, variablesPerPackage } = getPaywallContext();
 
-  setSelectedStateContext(package_id);
+  setSelectedStateContext(
+    derived(selectedPackageId, (value) => value === package_id),
+  );
 
   const onPackageClick = () => {
     $selectedPackageId = package_id;

package/dist/components/paywall/Node.svelte

@@ -11,19 +11,11 @@
   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
-    | Footer
-    | Icon
-    | Image
-    | Package
-    | PurchaseButton
-    | Stack
-    | TextNode
-    | Timeline;
+  import TabControl from "../tabs/TabControl.svelte";
+  import TabControlButton from "../tabs/TabControlButton.svelte";
+  import Tabs from "../tabs/Tabs.svelte";
 
   interface Props {
     nodeData: Component;
@@ -31,12 +23,16 @@
 
   const ComponentTypes = {
     button: ButtonNode,
+    carousel: Carousel,
     footer: Footer,
     icon: Icon,
     image: Image,
     package: Package,
     purchase_button: PurchaseButton,
     stack: Stack,
+    tab_control_button: TabControlButton,
+    tab_control: TabControl,
+    tabs: Tabs,
     text: TextNode,
     timeline: Timeline,
   } satisfies {
@@ -56,12 +52,12 @@
    */
   export const getComponentClass: (
     nodeData: Component,
-  ) => [SvelteComponent<SupportedComponents>, Component] | undefined = (
+  ) => [SvelteComponent<Component>, Component] | undefined = (
     nodeData: Component,
   ) => {
     if (ComponentTypes[nodeData.type]) {
       return [
-        ComponentTypes[nodeData.type] as SvelteComponent<SupportedComponents>,
+        ComponentTypes[nodeData.type] as SvelteComponent<Component>,
         nodeData,
       ];
     }
@@ -69,7 +65,7 @@
     const { fallback } = nodeData;
     if (fallback && ComponentTypes[fallback?.type]) {
       return [
-        ComponentTypes[fallback.type] as SvelteComponent<SupportedComponents>,
+        ComponentTypes[fallback.type] as SvelteComponent<Component>,
         fallback,
       ];
     }
@@ -84,16 +80,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

@@ -1,10 +1,5 @@
 import { SvelteComponent } from "svelte";
-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 Icon from "../icon/Icon.svelte";
-type SupportedComponents = ButtonNode | Footer | Icon | Image | Package | PurchaseButton | Stack | TextNode | Timeline;
 interface Props {
     nodeData: Component;
 }
@@ -17,7 +12,7 @@ declare const Node: import("svelte").Component<Props, {
        * @param nodeData:Component - the Component object representing a Node in the paywall
        * @returns [Component<SupportedComponents>, Component] - a tuple containing the component class and the node data
        * @throws Error - if the component type and the fallback component type are not supported
-       */ getComponentClass: (nodeData: Component) => [SvelteComponent<SupportedComponents>, Component] | undefined;
+       */ getComponentClass: (nodeData: Component) => [SvelteComponent<Component>, Component] | undefined;
 }, "">;
 type Node = ReturnType<typeof Node>;
 export default Node;