@revenuecat/purchases-ui-js 2.0.0 → 2.0.1

package/dist/stories/paywall-decorator.js

@@ -0,0 +1,18 @@
+import { setPaywallContext } from "../stores/paywall";
+import { writable } from "svelte/store";
+export function paywallDecorator() {
+    return (Story) => {
+        const selectedPackageId = writable(undefined);
+        selectedPackageId.subscribe((packageId) => {
+            if (packageId !== undefined) {
+                window.alert(`Selected package ${packageId}`);
+            }
+        });
+        setPaywallContext({
+            selectedPackageId,
+            onPurchase: () => window.alert("Purchase clicked"),
+            onButtonAction: (action) => window.alert(`Button clicked: ${JSON.stringify(action, undefined, 2)}`),
+        });
+        return Story();
+    };
+}

package/dist/stories/variables-decorator.d.ts

@@ -0,0 +1,3 @@
+import type { VariableDictionary } from "../utils/variable-utils";
+import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
+export declare function variablesDecorator<TRenderer extends Renderer, TArgs>(variables?: VariableDictionary): DecoratorFunction<TRenderer, TArgs>;

package/dist/stories/variables-decorator.js

@@ -0,0 +1,9 @@
+import { setVariablesContext } from "../stores/variables";
+import { readable } from "svelte/store";
+export function variablesDecorator(variables) {
+    const store = readable(variables);
+    return (Story) => {
+        setVariablesContext(store);
+        return Story();
+    };
+}

package/dist/stories/with-layout.svelte

@@ -1,4 +1,4 @@
-<script module>
+<script module lang="ts">
   import { brandingAppearances } from "./fixtures";
   import { toProductInfoStyleVar } from "../ui/theme/utils";
   import Container from "../ui/layout/container.svelte";

package/dist/types/alignment.d.ts

@@ -0,0 +1,19 @@
+export type Distribution = "start" | "center" | "end" | "space_between" | "space_around" | "space_evenly";
+export type VerticalAlignment = "top" | "center" | "bottom";
+export type HorizontalDimension = {
+    type: "horizontal";
+    alignment: VerticalAlignment;
+    distribution: Distribution;
+};
+export type HorizontalAlignment = "leading" | "center" | "trailing";
+export type VerticalDimension = {
+    type: "vertical";
+    alignment: HorizontalAlignment;
+    distribution: Distribution;
+};
+export type ZAlignment = "top_leading" | "top" | "top_trailing" | "leading" | "center" | "trailing" | "bottom_leading" | "bottom" | "bottom_trailing";
+export type ZDimension = {
+    type: "zlayer";
+    alignment: ZAlignment;
+};
+export type Dimension = HorizontalDimension | VerticalDimension | ZDimension;

package/dist/types/alignment.js

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

package/dist/types/background.d.ts

@@ -0,0 +1,18 @@
+import type { ColorGradientScheme } from "./colors";
+import type { ImageInfo, ImageObjectFit, VideoInfo } from "./media";
+export type BackgroundColor = {
+    type: "color";
+    value: ColorGradientScheme;
+};
+export type BackgroundImage = {
+    type: "image";
+    value: ImageInfo;
+    color_overlay: ColorGradientScheme | null;
+    fit_mode: ImageObjectFit;
+};
+export type BackgroundVideo = {
+    type: "video";
+    value: VideoInfo;
+    color_overlay: ColorGradientScheme | null;
+};
+export type Background = BackgroundColor | BackgroundImage | BackgroundVideo;

package/dist/types/background.js

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

package/dist/types/colors.d.ts

@@ -0,0 +1,34 @@
+export type GradientPoint = {
+    percent: number;
+    color: string;
+};
+type GradientColorInfo = {
+    type: "linear" | "radial";
+    points: GradientPoint[];
+};
+export type LinearGradientColorInfo = GradientColorInfo & {
+    type: "linear";
+    degrees: number;
+};
+export type RadialGradientColorInfo = GradientColorInfo & {
+    type: "radial";
+};
+type AliasColorInfo = {
+    type: "alias";
+    value: string;
+};
+type HexColorInfo = {
+    type: "hex";
+    value: string;
+};
+export type ColorInfo = AliasColorInfo | HexColorInfo;
+export type ColorGradientInfo = ColorInfo | LinearGradientColorInfo | RadialGradientColorInfo;
+export type ColorScheme = {
+    light: ColorInfo;
+    dark?: ColorInfo | null;
+};
+export type ColorGradientScheme = {
+    light: ColorGradientInfo;
+    dark?: ColorGradientInfo | null;
+};
+export {};

package/dist/types/colors.js

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

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

@@ -0,0 +1,36 @@
+import type { SharedComponentProps, StackProps } from "../../data/entities";
+interface RestorePurchasesAction {
+    type: "restore_purchases";
+}
+interface NavigateBackAction {
+    type: "navigate_back";
+}
+interface NavigateToAction {
+    type: "navigate_to";
+    destination: "customer_center" | "offer_code";
+}
+interface NavigateToSheetAction {
+    type: "navigate_to";
+    destination: "sheet";
+    sheet?: unknown;
+}
+interface NavigateToWebPurchase {
+    type: "navigate_to";
+    destination: "web_paywall_link";
+    custom_url_options?: unknown;
+}
+interface NavigateToUrlAction {
+    type: "navigate_to";
+    destination: "privacy_policy" | "terms" | "url";
+    url: {
+        url_lid: string;
+        method: "deep_link" | "external_browser" | "in_app_browser";
+    };
+}
+export type Action = RestorePurchasesAction | NavigateBackAction | NavigateToAction | NavigateToSheetAction | NavigateToWebPurchase | NavigateToUrlAction;
+export interface ButtonProps extends SharedComponentProps {
+    type: "button";
+    action: Action;
+    stack: StackProps;
+}
+export {};

package/dist/types/components/button.js

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

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

@@ -0,0 +1,5 @@
+import type { SharedComponentProps, StackProps } from "../../data/entities";
+export interface FooterProps extends SharedComponentProps {
+    type: "footer";
+    stack: StackProps;
+}

package/dist/types/components/footer.js

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

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

@@ -0,0 +1,8 @@
+import type { SharedComponentProps, StackProps } from "../../data/entities";
+export interface PackageProps extends SharedComponentProps {
+    type: "package";
+    package_id: string;
+    is_selected_by_default: boolean;
+    apple_promo_offer_product_code?: string | null;
+    stack: StackProps;
+}

package/dist/types/components/package.js

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

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

@@ -0,0 +1,5 @@
+import type { SharedComponentProps, StackProps } from "../../data/entities";
+export interface PurchaseButtonProps extends SharedComponentProps {
+    type: "purchase_button";
+    stack: StackProps;
+}

package/dist/types/components/purchase-button.js

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

package/dist/types/localization.d.ts

@@ -0,0 +1,4 @@
+import type { ImageInfo } from "./media";
+export type LocalizationValue = string | ImageInfo;
+export type Localization = Partial<Record<string, string>>;
+export type Localizations = Partial<Record<string, Localization>>;

package/dist/types/localization.js

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

package/dist/types/media.d.ts

@@ -0,0 +1,18 @@
+export type ImageFiles = {
+    width: number;
+    height: number;
+    original: string;
+    heic: string;
+    heic_low_res: string;
+    webp: string;
+    webp_low_res: string;
+};
+export type ImageInfo = {
+    light: ImageFiles;
+    dark: ImageFiles | null;
+};
+export type VideoInfo = {
+    light: string;
+    dark: string | null;
+};
+export type ImageObjectFit = "fit" | "fill";

package/dist/types/media.js

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

package/dist/types.d.ts

@@ -1,18 +1,5 @@
+import type { ColorScheme } from "./types/colors";
 export type ColorMode = "light" | "dark";
-export type ColorStop = {
-    color: string;
-    percent: number;
-};
-export type Color = {
-    type: "hex" | "alias" | "linear" | "radial";
-    value?: string;
-    degrees?: number;
-    points?: ColorStop[];
-};
-export type ColorType = {
-    dark?: Color;
-    light: Color;
-};
 export declare enum FontSizeTags {
     body_s = "p",
     body_m = "p",
@@ -58,13 +45,13 @@ export type SizeType = {
     height: Size;
 };
 export type Size = FixedSize | RelativeSize;
-export type FitTypes = "fit" | "fill";
 type FixedSize = {
     type: "fixed";
     value: number;
 };
 type RelativeSize = {
-    type: FitTypes;
+    type: "fit" | "fill";
+    value?: null;
 };
 export type ShapeType = RectangleShape | PillShape;
 export type RectangleShape = {
@@ -78,7 +65,7 @@ type PillShape = {
     type: "pill";
 };
 export type BorderType = {
-    color: ColorType;
+    color: ColorScheme;
     width: number;
 };
 export type Spacing = {
@@ -93,29 +80,12 @@ export type CornerRadiusType = {
     top_leading: number;
     top_trailing: number;
 };
-export type DimensionType = VerticalAlignment | HorizontalAlignment | ZAlignment;
-type VerticalAlignment = {
-    type: "vertical";
-    alignment: "top" | "center" | "bottom";
-    distribution?: Distribution;
-};
-type HorizontalAlignment = {
-    type: "horizontal";
-    alignment: "leading" | "center" | "trailing";
-    distribution?: Distribution;
-};
 export type AlignmentType = "top_leading" | "top" | "top_trailing" | "leading" | "center" | "trailing" | "bottom_leading" | "bottom" | "bottom_trailing";
-export type ZAlignment = {
-    type: "zlayer";
-    alignment: AlignmentType;
-    distribution?: never;
-};
-type Distribution = "space_between" | "space_around" | "space_evenly" | "start" | "center" | "end";
 export type ShadowType = {
     x: number;
     y: number;
     radius: number;
-    color: ColorType;
+    color: ColorScheme;
 };
 export declare enum StackDirection {
     vertical = "column",

package/dist/ui/atoms/typography.stories.svelte

@@ -1,14 +1,11 @@
-<script module>
-  import { default as Typography } from "../../ui/atoms/typography.svelte";
-  import {
-    type Args,
-    defineMeta,
-    setTemplate,
-  } from "@storybook/addon-svelte-csf";
-  import { withLayout } from "../../stories/with-layout";
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { type ComponentProps } from "svelte";
   import { brandingViewportModes } from "../../../../.storybook/modes";
+  import { withLayout } from "../../stories/with-layout";
+  import { default as Typography } from "../../ui/atoms/typography.svelte";
 
-  let { Story } = defineMeta<typeof Typography>({
+  const { Story } = defineMeta({
     component: Typography,
     title: "Atoms/Typography",
     // @ts-expect-error ignore typing of decorator
@@ -35,16 +32,13 @@
         modes: brandingViewportModes,
       },
     },
+    render: template,
   });
 
   const baseContent = "The quick brown fox jumps over the lazy dog";
 </script>
 
-<script lang="ts">
-  setTemplate(template);
-</script>
-
-{#snippet template({ size = "body-base" }: Args<typeof Story>)}
+{#snippet template({ size = "body-base" }: ComponentProps<typeof Typography>)}
   <Typography {size}>
     {#snippet children()}
       Default text

package/dist/ui/atoms/typography.svelte

@@ -1,4 +1,4 @@
-<script module>
+<script module lang="ts">
   import { type Snippet } from "svelte";
 
   type Size =

package/dist/ui/molecules/button.stories.svelte

@@ -1,15 +1,11 @@
-<script module>
+<script module lang="ts">
+  import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
+  import type { ComponentProps } from "svelte";
   import { brandingAppearances } from "../../stories/fixtures";
-  import { default as Button } from "./button.svelte";
-  import {
-    type Args,
-    defineMeta,
-    setTemplate,
-    type StoryContext,
-  } from "@storybook/addon-svelte-csf";
   import { withLayout } from "../../stories/with-layout";
+  import { default as Button } from "./button.svelte";
 
-  let { Story } = defineMeta<typeof Button>({
+  const { Story } = defineMeta({
     component: Button,
     title: "Molecules/Button",
     // @ts-expect-error ignore typing of decorator
@@ -20,6 +16,7 @@
         options: ["primary", undefined],
       },
     },
+    render: template,
   });
 
   const args = {
@@ -30,13 +27,9 @@
   };
 </script>
 
-<script lang="ts">
-  setTemplate(template);
-</script>
-
 {#snippet template(
-  { ...args }: Args<typeof Story>,
-  context: StoryContext<typeof Story>,
+  { ...args }: ComponentProps<typeof Button>,
+  context: StoryContext<typeof Button>,
 )}
   {@const brandingInfo = brandingAppearances[context.globals.brandingName]}
   <Button {...args} brandingAppearance={brandingInfo ?? undefined}

package/dist/ui/molecules/button.svelte

@@ -13,6 +13,7 @@
     loading = false,
     brandingAppearance,
     styleOverrides,
+    children,
   }: UIButtonProps = $props();
 
   const theme = $derived(new Theme(brandingAppearance));
@@ -39,7 +40,7 @@
   {#if loading}
     <ProcessingAnimation size="small" />
   {:else}
-    <Typography size="body-base"><slot></slot></Typography>
+    <Typography size="body-base">{@render children?.()}</Typography>
   {/if}
 </button>
 

package/dist/ui/molecules/button.svelte.d.ts

@@ -1,28 +1,4 @@
 import type { UIButtonProps } from "./types";
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<UIButtonProps, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, "">;
-type Button = InstanceType<typeof Button>;
+declare const Button: import("svelte").Component<UIButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/ui/molecules/types.d.ts

@@ -1,7 +1,8 @@
+import type { Snippet } from "svelte";
 import type { BrandingAppearance } from "../utils/branding";
 export interface UIButtonProps {
     onclick?: (event: any) => void;
-    children?: unknown;
+    children?: Snippet;
     intent?: "primary";
     disabled?: boolean;
     testId?: string | undefined;

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

@@ -1,5 +1,7 @@
 import type { ComponentState, ImageMaskShapeType, ImageProps, PaywallData, TextNodeProps } from "../data/entities.js";
-import { type BorderType, type ColorMode, type ColorType, type CornerRadiusType, type DimensionType, FontSizeTags, type ShadowType, type ShapeType, type SizeType, type Spacing } from "../types.js";
+import type { Dimension } from "../types/alignment.js";
+import type { ColorGradientScheme, ColorScheme } from "../types/colors.js";
+import { type BorderType, type ColorMode, type CornerRadiusType, FontSizeTags, type ShadowType, type ShapeType, type SizeType, type Spacing } from "../types.js";
 type MarginVariables = {
     "--margin-block-start": string;
     "--margin-inline-end": string;
@@ -26,7 +28,7 @@ export declare function getTextComponentTag(fontSize: keyof typeof FontSizeTags)
  * @returns Color value as string
  */
 export declare function getColor({ colorMap, colorMode, fallback, }: {
-    colorMap?: ColorType;
+    colorMap?: ColorGradientScheme | null;
     colorMode?: ColorMode;
     fallback?: string;
 }): string;
@@ -63,12 +65,12 @@ type ComponentStyleVariables = {
 export declare function getComponentStyles({ background_color, border, margin, padding, color, colorMode, shape, shadow, }: {
     padding?: Spacing;
     margin?: Spacing;
-    background_color?: ColorType;
-    color?: ColorType;
-    border?: BorderType;
+    background_color?: ColorGradientScheme | null;
+    color?: ColorScheme;
+    border?: BorderType | null;
     colorMode?: ColorMode;
-    shape?: ShapeType;
-    shadow?: ShadowType;
+    shape?: ShapeType | null;
+    shadow?: ShadowType | null;
 }): ComponentStyleVariables;
 type SizeStyleVariables = {
     "--width": string;
@@ -85,7 +87,7 @@ type InsetStyleVariables = {
     "--inset": string;
     "--transform": string;
 };
-export declare function getInsetStyles(dimension: DimensionType): InsetStyleVariables;
+export declare function getInsetStyles(dimension: Dimension): InsetStyleVariables;
 type DimensionVariableType = {
     "--direction": string;
     "--alignment": string;
@@ -99,7 +101,7 @@ type DimensionVariableType = {
  * @param dimension - Dimension configuration object
  * @returns CSS style object with flex layout properties
  */
-export declare function getDimensionStyle(dimension: DimensionType): DimensionVariableType;
+export declare function getDimensionStyle(dimension: Dimension): DimensionVariableType;
 type TextStyleVariables = {
     "--text-align": string;
     "--font-weight": number | string;
@@ -115,7 +117,7 @@ type TextStyleVariables = {
  * @param colorMode - The currently selected ColorMode (dark/light)
  * @returns CSS style object with text formatting properties
  */
-export declare function getTextStyles(props: TextNodeProps, colorMode?: ColorMode): TextStyleVariables;
+export declare function getTextStyles(props: TextNodeProps): TextStyleVariables;
 /**
  * Converts a style object to a CSS string
  * @param styles - Object containing CSS properties and values
@@ -147,7 +149,7 @@ type MaskStyleVariables = {
  * @returns CSS style object with mask properties
  */
 export declare const getMaskStyle: (maskShape?: ImageMaskShapeType) => MaskStyleVariables;
-export declare function getLinearGradientAngle(props: ImageProps & {
+export declare function getLinearGradientAngle(colorMode: ColorMode, props: ImageProps & {
     imageAspectRatio: number;
 }): {
     x1: string;

package/dist/utils/style-utils.js

@@ -41,7 +41,7 @@ export function getColor({ colorMap, colorMode = DEFAULT_COLOR_MODE, fallback =
         return fallback;
     const color = colorMap[colorMode] || colorMap[DEFAULT_COLOR_MODE];
     let colorPoints = "";
-    switch (color.type) {
+    switch (color?.type) {
         case "hex":
         case "alias":
             return color.value ?? fallback;
@@ -257,8 +257,8 @@ export function getDimensionStyle(dimension) {
  * @param colorMode - The currently selected ColorMode (dark/light)
  * @returns CSS style object with text formatting properties
  */
-export function getTextStyles(props, colorMode = DEFAULT_COLOR_MODE) {
-    const { font_size, horizontal_alignment, font_weight, font_name, color } = props;
+export function getTextStyles(props) {
+    const { font_size, horizontal_alignment, font_weight, font_name } = props;
     const styles = {
         "--text-align": "initial",
         "--font-weight": "initial",
@@ -274,14 +274,6 @@ export function getTextStyles(props, colorMode = DEFAULT_COLOR_MODE) {
         "--font-size": FontSizes[font_size] || FontSizes.body_m,
         "--font-family": font_name || "sans-serif",
     });
-    if (color &&
-        (color[colorMode]?.type === "linear" || color[colorMode]?.type === "radial")) {
-        Object.assign(styles, {
-            "--background-clip": "text",
-            "--text-fill-color": "transparent",
-            "--background": getColor({ colorMap: color, colorMode }),
-        });
-    }
     return styles;
 }
 /**
@@ -400,12 +392,13 @@ export const getMaskStyle = (maskShape) => {
     }
     return maskStyles;
 };
-export function getLinearGradientAngle(props) {
-    if (props.color_overlay?.[props.purchaseState.colorMode]?.type !== "linear") {
+export function getLinearGradientAngle(colorMode, props) {
+    const { color_overlay: colorOverlay } = props;
+    if (colorOverlay?.[colorMode]?.type !== "linear") {
         return { x1: "0%", y1: "0%", x2: "0%", y2: "0%" };
     }
-    const { color_overlay: colorOverlay } = props;
-    const angle = colorOverlay?.[DEFAULT_COLOR_MODE]?.degrees || 0;
+    const defaultColor = colorOverlay?.[DEFAULT_COLOR_MODE];
+    const angle = defaultColor?.type === "linear" ? defaultColor.degrees : 0;
     const x1 = "50%";
     const y1 = "0%";
     const x2 = `${Math.round(50 + Math.sin(((angle + 90) * Math.PI) / 90) * 50)}%`;

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

@@ -1,4 +1,3 @@
-import type { ComponentLocalizations } from "../data/entities";
 export declare const VARIABLE_NAMES: string[];
 export type VariableDictionary = {
     product_name: string | number | undefined;
@@ -21,40 +20,4 @@ export type VariableDictionary = {
     sub_relative_discount: string | number | undefined;
     [key: string]: string | number | undefined;
 };
-export type ReplaceVariablesProps = {
-    value?: string;
-    variableDictionary?: VariableDictionary;
-};
-/**
- * Returns a string with the variables replaced by values from the dictionary
- * @param value A string like "Try {{ product_name }} for only {{ total_price_and_per_month }}"
- * @param dictionary Dictionary containing the values for the variables
- * @returns The string with values: "Try CatGPT Annual for only $59.99/yr ($4.99/mo)"
- */
-export declare const replaceVariables: ({ value, variableDictionary: dictionary, }: ReplaceVariablesProps) => string | undefined;
-/**
- * Given a ComponentLocalizations object and a locale returns the label with label_id in the chosen locale, if any. Falls
- * back to the label with the same label_id in the fallbackLocale, if any. Finally returns undefined if no label can be
- * found for the requested label_id.
- * @param label_id - The id of the label to be returned
- * @param locale - The preferred locale to return the label
- * @param fallbackLocale - The locale to fall back to in case no label is found in the preferred one
- * @param labels - A ComponentLocalizations instance
- * @returns The label in the preferred or fallback locale, or undefined.
- */
-export declare function getLabelById(label_id: string | null | undefined, locale: string, fallbackLocale: string, labels: ComponentLocalizations): string | undefined;
-/**
- * Gets a label by ID and replaces any variables in it with values from the dictionary
- * @param text_lid - The ID of the text label to retrieve
- * @param purchaseState - Object containing locale and defaultLocale
- * @param labels - ComponentLocalizations containing the labels
- * @param variableDictionary - Dictionary of variables to replace in the label text
- * @returns The label with variables replaced, or undefined if label not found
- */
-export declare function getLabelAndReplaceVariables({ text_lid, locale, defaultLocale, labels, variableDictionary, }: {
-    text_lid?: string;
-    locale: string;
-    defaultLocale: string;
-    labels: ComponentLocalizations;
-    variableDictionary?: VariableDictionary;
-}): string | undefined;
+export declare function replaceVariables(input?: string, variables?: VariableDictionary): string | undefined;