@revenuecat/purchases-ui-js 2.0.4 → 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/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/types/component.d.ts

@@ -1,11 +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";
-import type { CarouselProps } from "./components/carousel";
-export type Component = ButtonProps | CarouselProps | 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,5 +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";
@@ -14,7 +15,7 @@ interface NavigateToAction {
 interface NavigateToSheetAction {
     type: "navigate_to";
     destination: "sheet";
-    sheet?: unknown;
+    sheet?: SheetProps | null;
 }
 interface NavigateToWebPurchase {
     type: "navigate_to";

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

@@ -2,7 +2,7 @@ import type { Background } from "./background";
 import type { FooterProps } from "./components/footer";
 import type { StackProps } from "./components/stack";
 import type { Localizations } from "./localization";
-interface RootPaywall {
+export interface RootPaywall {
     background?: Background;
     stack: StackProps;
     sticky_footer?: FooterProps | null;
@@ -24,4 +24,3 @@ export interface PaywallData {
     components_config: ComponentConfig;
     components_localizations: Localizations;
 }
-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/style-utils.d.ts

@@ -2,7 +2,7 @@ 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 { PaywallData } from "../types/paywall.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,7 +90,6 @@ export function findSelectedPackageId(paywallData) {
         }
         return undefined;
     };
-    const { stack, sticky_footer } = paywallData.components_config.base;
     const pkg = traverseNode(stack);
     if (pkg !== undefined) {
         return pkg?.package_id;
@@ -120,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;
-    }, {});
-}

package/package.json

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

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

@@ -1,8 +0,0 @@
-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;
-}): string;
-export declare function getBackgroundImageSource(paywallData: PaywallData, colorMode: ColorMode): string | undefined;

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

@@ -1,24 +0,0 @@
-import { DEFAULT_COLOR_MODE } from "../../utils/constants";
-import { getColor, prefixObject, stringifyStyles, } from "../../utils/style-utils";
-export function getBackgroundStyles({ background, colorMode, }) {
-    const styles = { "--background": "initial" };
-    if (background?.type === "color") {
-        Object.assign(styles, {
-            "--background": getColor({
-                colorMap: background.value,
-                colorMode,
-                fallback: "transparent",
-            }),
-        });
-    }
-    const prefixedStyles = prefixObject(styles, "paywall");
-    return stringifyStyles(prefixedStyles);
-}
-export function getBackgroundImageSource(paywallData, colorMode) {
-    const { background } = paywallData.components_config.base;
-    if (background?.type !== "image") {
-        return "";
-    }
-    const { value } = background;
-    return value[colorMode]?.original ?? value[DEFAULT_COLOR_MODE]?.original;
-}