@revenuecat/purchases-ui-js 2.0.3 → 2.0.5

package/dist/components/tabs/Tabs.stories.svelte.d.ts

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

package/dist/components/tabs/Tabs.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import { getColorModeContext } from "../../stores/color-mode";
+  import { getSelectedStateContext } from "../../stores/selected";
+  import type { TabsProps } from "../../types/components/tabs";
+  import { mapBackground } from "../../utils/background-utils";
+  import {
+    css,
+    mapBorder,
+    mapBorderRadius,
+    mapShadow,
+    mapSize,
+    mapSpacing,
+  } from "../../utils/base-utils";
+  import { getActiveStateProps } from "../../utils/style-utils";
+  import { derived, readable, writable } from "svelte/store";
+  import Stack from "../stack/Stack.svelte";
+  import { setTabsContext, type SelectTab } from "./tabs-context";
+
+  const props: TabsProps = $props();
+  const { control, tabs, default_tab_id } = props;
+
+  const selectedState = getSelectedStateContext();
+  const { size, padding, margin, background, shape, border, shadow } =
+    $derived.by(() => {
+      return {
+        ...props,
+        ...getActiveStateProps($selectedState, props.overrides),
+      };
+    });
+
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
+
+  const styles = $derived(
+    css({
+      width: mapSize(size.width),
+      height: mapSize(size.height),
+      margin: mapSpacing(margin),
+      padding: mapSpacing(padding),
+      ...mapBackground(colorMode, null, background),
+      border: mapBorder(colorMode, border),
+      "border-radius": mapBorderRadius(shape),
+      "box-shadow": mapShadow(colorMode, shadow),
+    }),
+  );
+
+  const tab = writable(
+    tabs.find((tab) => tab.id === default_tab_id) ?? tabs.at(0),
+  );
+
+  const selectTab: SelectTab = (tabId, tabIndex) => {
+    const nextTab = tabs.find((tab) => tab.id === tabId) ?? tabs.at(tabIndex);
+    if (nextTab !== undefined) {
+      tab.set(nextTab);
+    }
+  };
+
+  setTabsContext({
+    control: readable(control),
+    selectedTabId: derived(tab, (tab) => tab.id),
+    selectTab,
+  });
+</script>
+
+<div style={styles}>
+  {#if $tab !== undefined}
+    <Stack {...$tab.stack} />
+  {/if}
+</div>

package/dist/components/tabs/Tabs.svelte.d.ts

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

package/dist/components/tabs/tabs-context.d.ts

@@ -0,0 +1,11 @@
+import type { TabControl, TabProps } from "../../types/components/tabs";
+import type { Readable } from "svelte/store";
+export type SelectTab = (tabId: string, tabIndex: number) => void;
+interface TabsContext {
+    control: Readable<TabControl>;
+    selectedTabId: Readable<TabProps["id"]>;
+    selectTab: SelectTab;
+}
+export declare function setTabsContext(context: TabsContext): void;
+export declare function getTabsContext(): TabsContext;
+export {};

package/dist/components/tabs/tabs-context.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from "svelte";
+const key = Symbol("selected");
+export function setTabsContext(context) {
+    setContext(key, context);
+}
+export function getTabsContext() {
+    const context = getContext(key);
+    if (context === undefined) {
+        throw new Error("Tabs context not found");
+    }
+    return context;
+}

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<{

package/dist/stores/selected.d.ts

@@ -1,5 +1,5 @@
 import { type Readable } from "svelte/store";
 type SelectedContext = Readable<boolean>;
-export declare function setSelectedStateContext(packageId: string): void;
+export declare function setSelectedStateContext(context: SelectedContext): void;
 export declare function getSelectedStateContext(): SelectedContext;
 export {};

package/dist/stores/selected.js

@@ -1,10 +1,8 @@
 import { getContext, setContext } from "svelte";
-import { derived, readable } from "svelte/store";
-import { getPaywallContext } from "./paywall";
+import { readable } from "svelte/store";
 const key = Symbol("selected");
-export function setSelectedStateContext(packageId) {
-    const { selectedPackageId } = getPaywallContext();
-    setContext(key, derived(selectedPackageId, (value) => value === packageId));
+export function setSelectedStateContext(context) {
+    setContext(key, context);
 }
 export function getSelectedStateContext() {
     const context = getContext(key);

package/dist/stories/fixtures.d.ts

@@ -1,4 +1,5 @@
-import type { PaywallData, UIConfig } from "../data/entities";
+import type { PaywallData } from "../types/paywall";
+import type { UIConfig } from "../types/ui-config";
 import type { BrandingAppearance } from "../ui/utils/branding";
 export declare const uiConfigData: UIConfig;
 export declare const paywallData: PaywallData;

package/dist/stories/viewport-wrapper.svelte

@@ -14,11 +14,13 @@
 </script>
 
 <div class="container" {style}>
-  <div class="content">
-    {#each Array(elements) as _, index}
-      <div>Item {index + 1}</div>
-    {/each}
-  </div>
+  {#if elements > 0}
+    <div class="content">
+      {#each Array(elements) as _, index}
+        <div>Item {index + 1}</div>
+      {/each}
+    </div>
+  {/if}
   {@render children()}
 </div>
 

package/dist/types/component.d.ts

@@ -1,10 +1,12 @@
-import type { TimelineProps } from "./components/timeline";
-import type { TextNodeProps } from "./components/text";
 import type { ButtonProps } from "./components/button";
+import type { CarouselProps } from "./components/carousel";
 import type { FooterProps } from "./components/footer";
 import type { IconProps } from "./components/icon";
 import type { ImageProps } from "./components/image";
 import type { PackageProps } from "./components/package";
 import type { PurchaseButtonProps } from "./components/purchase-button";
 import type { StackProps } from "./components/stack";
-export type Component = ButtonProps | FooterProps | IconProps | ImageProps | PackageProps | PurchaseButtonProps | StackProps | TextNodeProps | TimelineProps;
+import type { TabControlButtonProps, TabControlProps, TabsProps } from "./components/tabs";
+import type { TextNodeProps } from "./components/text";
+import type { TimelineProps } from "./components/timeline";
+export type Component = ButtonProps | CarouselProps | FooterProps | IconProps | ImageProps | PackageProps | PurchaseButtonProps | StackProps | TabControlButtonProps | TabControlProps | TabsProps | TextNodeProps | TimelineProps;

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

@@ -1,4 +1,6 @@
 import type { BaseComponent } from "../base";
+import type { Overrides } from "../overrides";
+import type { SheetProps } from "./sheet";
 import type { StackProps } from "./stack";
 interface RestorePurchasesAction {
     type: "restore_purchases";
@@ -13,7 +15,7 @@ interface NavigateToAction {
 interface NavigateToSheetAction {
     type: "navigate_to";
     destination: "sheet";
-    sheet?: unknown;
+    sheet?: SheetProps | null;
 }
 interface NavigateToWebPurchase {
     type: "navigate_to";
@@ -35,5 +37,6 @@ export interface ButtonProps extends BaseComponent {
     action: Action;
     stack: StackProps;
     transition?: null;
+    overrides?: Overrides<ButtonProps>;
 }
 export {};

package/dist/types/components/carousel.d.ts

@@ -0,0 +1,51 @@
+import type { BorderType, ShadowType, ShapeType, Spacing } from "..";
+import type { VerticalAlignment } from "../alignment";
+import type { Background } from "../background";
+import type { BaseComponent } from "../base";
+import type { ColorScheme } from "../colors";
+import type { Overrides } from "../overrides";
+import type { StackProps } from "./stack";
+export interface PageControlIndicator {
+    width: number;
+    height: number;
+    color: ColorScheme;
+    stroke_color?: ColorScheme | null;
+    stroke_width?: number | null;
+}
+export interface PageControl {
+    position: "top" | "bottom";
+    spacing: number;
+    margin: Spacing;
+    padding: Spacing;
+    background_color?: ColorScheme | null;
+    border?: BorderType | null;
+    shape?: ShapeType | null;
+    shadow?: ShadowType | null;
+    active: PageControlIndicator;
+    default: PageControlIndicator;
+}
+type AutoAdvanceTransitionType = "fade" | "slide";
+interface AutoAdvance {
+    ms_time_per_page: number;
+    ms_transition_time: number;
+    transition_type: AutoAdvanceTransitionType;
+}
+export interface CarouselProps extends BaseComponent {
+    type: "carousel";
+    pages: StackProps[];
+    padding: Spacing;
+    margin: Spacing;
+    background?: Background | null;
+    shape?: ShapeType | null;
+    border?: BorderType | null;
+    shadow?: ShadowType | null;
+    page_alignment: VerticalAlignment;
+    page_spacing: number;
+    page_peek: number;
+    page_control?: PageControl | null;
+    initial_page_index: number;
+    loop: boolean;
+    auto_advance?: AutoAdvance | null;
+    overrides?: Overrides<CarouselProps>;
+}
+export {};

package/dist/types/components/sheet.d.ts

@@ -0,0 +1,16 @@
+import type { SizeType } from "..";
+import type { Background } from "../background";
+import type { BaseComponent } from "../base";
+import type { Overrides } from "../overrides";
+import type { StackProps } from "./stack";
+type SheetPosition = "bottom" | "top" | "center" | "left" | "right";
+export interface SheetProps extends BaseComponent {
+    type: "sheet";
+    stack: StackProps;
+    size: SizeType;
+    background?: Background | null;
+    background_blur: boolean;
+    position?: SheetPosition;
+    overrides?: Overrides<SheetProps>;
+}
+export {};

package/dist/types/components/sheet.js

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

package/dist/types/components/tabs.d.ts

@@ -0,0 +1,46 @@
+import type { BorderType, ShadowType, ShapeType, SizeType, Spacing } from "..";
+import type { Background } from "../background";
+import type { BaseComponent } from "../base";
+import type { Overrides } from "../overrides";
+import type { StackProps } from "./stack";
+type TabControlType = "buttons" | "toggle";
+export interface TabControl {
+    type: TabControlType;
+    stack: StackProps;
+}
+export interface TabProps extends BaseComponent {
+    type: "tab";
+    stack: StackProps;
+    overrides?: Overrides<TabProps>;
+}
+export interface TabsProps extends BaseComponent {
+    type: "tabs";
+    visible?: boolean | null;
+    size: SizeType;
+    padding: Spacing;
+    margin: Spacing;
+    control: TabControl;
+    tabs: TabProps[];
+    default_tab_id: string;
+    background?: Background | null;
+    shape?: ShapeType | null;
+    border?: BorderType | null;
+    shadow?: ShadowType | null;
+    overrides?: Overrides<TabsProps>;
+}
+export interface TabControlProps extends BaseComponent {
+    type: "tab_control";
+    overrides?: Overrides<TabControlProps>;
+}
+export interface TabControlButtonProps extends BaseComponent {
+    type: "tab_control_button";
+    tab_id: string;
+    stack: StackProps;
+    overrides?: Overrides<TabControlButtonProps>;
+    /**
+     * @deprecated Use `tab_id` instead. This stores the index of the tab the control is related to,
+     *             we'll utilize the `tab_id` field instead but need this for backwards compatibility
+     */
+    tab_index: number;
+}
+export {};

package/dist/types/components/tabs.js

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

package/dist/types/paywall.d.ts

@@ -0,0 +1,26 @@
+import type { Background } from "./background";
+import type { FooterProps } from "./components/footer";
+import type { StackProps } from "./components/stack";
+import type { Localizations } from "./localization";
+export interface RootPaywall {
+    background?: Background;
+    stack: StackProps;
+    sticky_footer?: FooterProps | null;
+}
+export interface ComponentConfig {
+    colors?: Record<string, string>;
+    fonts?: {
+        [fontName: string]: {
+            ios: string;
+            android: string;
+            web: string;
+        };
+    };
+    asset_base_url?: string;
+    base: RootPaywall;
+}
+export interface PaywallData {
+    default_locale: string;
+    components_config: ComponentConfig;
+    components_localizations: Localizations;
+}

package/dist/types/paywall.js

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

package/dist/types/ui-config.d.ts

@@ -0,0 +1,20 @@
+type AppFontFamilyConfig = {
+    type: "name" | "url";
+    value?: string;
+    family: string;
+    hash: string;
+    style: string;
+    url: string;
+    weight: number;
+};
+type AppFontsConfig = Record<string, {
+    ios?: AppFontFamilyConfig;
+    android?: AppFontFamilyConfig;
+    web?: AppFontFamilyConfig;
+}>;
+export type UIConfig = {
+    app: {
+        fonts: AppFontsConfig;
+    };
+};
+export {};

package/dist/types/ui-config.js

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

package/dist/types.d.ts

@@ -45,10 +45,14 @@ type FixedSize = {
     value: number;
 };
 type RelativeSize = {
-    type: "fit" | "fill" | "relative";
+    type: "relative";
+    value: number;
+};
+type FitFillSize = {
+    type: "fit" | "fill";
     value?: null;
 };
-export type Size = FixedSize | RelativeSize;
+export type Size = FixedSize | RelativeSize | FitFillSize;
 export type SizeType = {
     width: Size;
     height: Size;

package/dist/utils/base-utils.d.ts

@@ -8,7 +8,7 @@ export declare function mapColorMode<T>(colorMode: ColorMode, value: {
     light: T;
     dark?: T | null;
 }): T;
-export declare function mapSize(size: Size, deviceFrameElement?: HTMLElement | null): string;
+export declare function mapSize(size: Size): string;
 export declare function mapSpacing(spacing?: Spacing | null): string;
 export declare function mapColor(colorMode: ColorMode, scheme: ColorScheme | ColorGradientScheme | null | undefined): string;
 export declare function mapOverlay(colorMode: ColorMode, colorOverlay: ColorGradientScheme | null | undefined): string;

package/dist/utils/base-utils.js

@@ -14,7 +14,7 @@ export function mapColorMode(colorMode, value) {
     const result = value[colorMode];
     return result ?? value.light;
 }
-export function mapSize(size, deviceFrameElement) {
+export function mapSize(size) {
     switch (size.type) {
         case "fill":
             // Support both webkit and mozilla browsers
@@ -29,22 +29,7 @@ export function mapSize(size, deviceFrameElement) {
         case "fixed":
             return px(size.value);
         case "relative": {
-            // TODO(marek): Good enough for now.
-            if (!deviceFrameElement) {
-                console.error("[mapSizeConstraint] Device frame element is not available");
-                return `${(size.value ?? 0) * 100}%`;
-            }
-            // getBoundingClientRect returns device pixel values that may be affected by CSS transforms
-            // due to phone preview scaling.
-            // We need to account for any scaling that may be applied to the element
-            const rect = deviceFrameElement.getBoundingClientRect();
-            const computedStyle = window.getComputedStyle(
-            // Need to go up two levels to get the transformed viewport element.
-            deviceFrameElement.parentNode?.parentNode);
-            const { transform } = computedStyle;
-            const scale = transform === "none" ? 1 : parseFloat(transform.split("(")[1]);
-            const height = rect.height / (scale || 1);
-            return px((size.value ?? 0) * height);
+            return `${size.value * 100}%`;
         }
     }
 }

package/dist/utils/font-utils.d.ts

@@ -1,4 +1,4 @@
-import type { UIConfig } from "../data/entities";
+import type { UIConfig } from "../types/ui-config";
 export declare function isFontRCFMManaged(fontName: string): boolean;
 export declare function getScopedFontFamily(fontFamily: string): string;
 export declare function registerFonts(uiConfig: UIConfig): Promise<void>;

package/dist/utils/style-utils.d.ts

@@ -1,8 +1,8 @@
-import type { PaywallData } from "../data/entities.js";
 import type { ColorGradientScheme } from "../types/colors.js";
 import type { Component } from "../types/component.js";
 import type { TextNodeProps } from "../types/components/text";
 import type { Overrides } from "../types/overrides.js";
+import type { RootPaywall } from "../types/paywall.js";
 import { type ColorMode } from "../types.js";
 /**
  * Gets color value based on color mode with fallback
@@ -30,18 +30,11 @@ type TextStyleVariables = {
  * @returns CSS style object with text formatting properties
  */
 export declare function getTextStyles(props: TextNodeProps): TextStyleVariables;
-/**
- * Converts a style object to a CSS string
- * @param styles - Object containing CSS properties and values
- * @returns CSS string
- */
-export declare function stringifyStyles(styles: Record<string, string | number>): string;
 /**
  * Given an instance of PaywallData, returns the id of the first package marked as `is_selected_by_default` if any.
  * @param paywallData
  * @returns the id of the first package marked as `is_selected_by_default` or undefined
  */
-export declare function findSelectedPackageId(paywallData: PaywallData): string | undefined;
+export declare function findSelectedPackageId({ stack, sticky_footer, }: RootPaywall): string | undefined;
 export declare const getActiveStateProps: <T extends Component>(selectedState: boolean, overrides?: Overrides<T>) => Partial<T>;
-export declare function prefixObject(object?: Record<string, string | number>, prefix?: string): Record<string, string | number>;
 export {};

package/dist/utils/style-utils.js

@@ -64,22 +64,12 @@ export function getTextStyles(props) {
     });
     return styles;
 }
-/**
- * Converts a style object to a CSS string
- * @param styles - Object containing CSS properties and values
- * @returns CSS string
- */
-export function stringifyStyles(styles) {
-    return Object.entries(styles)
-        .map(([key, value]) => `${key}: ${value}`)
-        .join("; ");
-}
 /**
  * Given an instance of PaywallData, returns the id of the first package marked as `is_selected_by_default` if any.
  * @param paywallData
  * @returns the id of the first package marked as `is_selected_by_default` or undefined
  */
-export function findSelectedPackageId(paywallData) {
+export function findSelectedPackageId({ stack, sticky_footer, }) {
     const traverseNode = (node) => {
         if (node.type === "package" && node.is_selected_by_default) {
             return node;
@@ -100,8 +90,12 @@ export function findSelectedPackageId(paywallData) {
         }
         return undefined;
     };
-    for (const component of paywallData.components_config.base.stack.components) {
-        const pkg = traverseNode(component);
+    const pkg = traverseNode(stack);
+    if (pkg !== undefined) {
+        return pkg?.package_id;
+    }
+    if (sticky_footer != null) {
+        const pkg = traverseNode(sticky_footer);
         if (pkg !== undefined) {
             return pkg?.package_id;
         }
@@ -115,14 +109,3 @@ export const getActiveStateProps = (selectedState, overrides) => {
     const override = overrides?.find((override) => override.conditions.find((condition) => condition.type === "selected"));
     return override?.properties ?? {};
 };
-export function prefixObject(object, prefix) {
-    if (!object)
-        return {};
-    if (!prefix)
-        return object;
-    return Object.entries(object).reduce((acc, [key, value]) => {
-        const replacedKey = key.replace(/^--/, `${prefix}-`);
-        acc[`--${replacedKey}`] = value;
-        return acc;
-    }, {});
-}