@revenuecat/purchases-ui-js 2.0.0 → 2.0.2

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

@@ -0,0 +1,3 @@
+import { type LocalizationContextProps } from "../stores/localization";
+import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
+export declare function localizationDecorator<TRenderer extends Renderer, TArgs>(props: LocalizationContextProps): DecoratorFunction<TRenderer, TArgs>;

package/dist/stories/localization-decorator.js

@@ -0,0 +1,7 @@
+import { setLocalizationContext, } from "../stores/localization";
+export function localizationDecorator(props) {
+    return (Story) => {
+        setLocalizationContext(() => props);
+        return Story();
+    };
+}

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

@@ -0,0 +1,2 @@
+import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
+export declare function paywallDecorator<TRenderer extends Renderer, TArgs>(): DecoratorFunction<TRenderer, TArgs>;

package/dist/stories/paywall-decorator.js

@@ -0,0 +1,19 @@
+import { setPaywallContext } from "../stores/paywall";
+import { readable, 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,
+            variablesPerPackage: readable(undefined),
+            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,10 +1,10 @@
-<script module>
-  import { brandingAppearances } from "./fixtures";
-  import { toProductInfoStyleVar } from "../ui/theme/utils";
+<script module lang="ts">
+  import type { Snippet } from "svelte";
   import Container from "../ui/layout/container.svelte";
   import Layout from "../ui/layout/layout.svelte";
   import Main from "../ui/layout/main-block.svelte";
-  import type { Snippet } from "svelte";
+  import { toProductInfoStyleVar } from "../ui/theme/utils";
+  import { brandingAppearances } from "./fixtures";
 </script>
 
 <script lang="ts">

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/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/component.d.ts

@@ -0,0 +1,6 @@
+import type { ImageProps, StackProps, TextNodeProps, TimelineProps } from "../data/entities";
+import type { ButtonProps } from "./components/button";
+import type { FooterProps } from "./components/footer";
+import type { PackageProps } from "./components/package";
+import type { PurchaseButtonProps } from "./components/purchase-button";
+export type Component = ButtonProps | FooterProps | ImageProps | PackageProps | PurchaseButtonProps | StackProps | TextNodeProps | TimelineProps;

package/dist/types/component.js

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

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

@@ -0,0 +1,36 @@
+import type { BaseComponent, 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 BaseComponent {
+    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 { BaseComponent, StackProps } from "../../data/entities";
+export interface FooterProps extends BaseComponent {
+    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 { BaseComponent, StackProps } from "../../data/entities";
+export interface PackageProps extends BaseComponent {
+    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 { BaseComponent, StackProps } from "../../data/entities";
+export interface PurchaseButtonProps extends BaseComponent {
+    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";
+<script module lang="ts">
   import { withLayout } from "../../stories/with-layout";
+  import { default as Typography } from "./typography.svelte";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { type ComponentProps } from "svelte";
   import { brandingViewportModes } from "../../../../.storybook/modes";
 
-  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.stories.svelte.d.ts

@@ -1,4 +1,4 @@
-import { default as Typography } from "../../ui/atoms/typography.svelte";
+import { default as Typography } from "./typography.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;

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/layout/main-block.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { Theme } from "../theme/theme";
   import { onMount } from "svelte";
-  import SectionLayout from "./section-layout.svelte";
+  import { Theme } from "../theme/theme";
   import type { BrandingAppearance } from "../utils/branding";
+  import SectionLayout from "./section-layout.svelte";
 
   export let brandingAppearance: BrandingAppearance | null | undefined =
     undefined;

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

@@ -1,15 +1,11 @@
-<script module>
+<script module lang="ts">
   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 { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
+  import type { ComponentProps } from "svelte";
+  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

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import ProcessingAnimation from "../utils/processing-animation.svelte";
   import Typography from "../atoms/typography.svelte";
   import { Theme } from "../theme/theme";
+  import ProcessingAnimation from "../utils/processing-animation.svelte";
   import type { UIButtonProps } from "./types";
 
   const {
@@ -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/ui/theme/theme.d.ts

@@ -1,6 +1,6 @@
-import type { Shape } from "./shapes";
-import type { Colors } from "./colors";
 import type { BrandingAppearance } from "../utils/branding";
+import type { Colors } from "./colors";
+import type { Shape } from "./shapes";
 export declare class Theme {
     private readonly brandingAppearance;
     constructor(brandingAppearance?: BrandingAppearance | null | undefined);

package/dist/ui/theme/theme.js

@@ -1,6 +1,6 @@
-import { toFormColors, toFormStyleVar, toProductInfoStyleVar, toShape, toSpacingVars, toTextStyleVar, } from "./utils";
-import { DEFAULT_TEXT_STYLES } from "./text";
 import { DEFAULT_SPACING } from "./spacing";
+import { DEFAULT_TEXT_STYLES } from "./text";
+import { toFormColors, toFormStyleVar, toProductInfoStyleVar, toShape, toSpacingVars, toTextStyleVar, } from "./utils";
 export class Theme {
     brandingAppearance;
     constructor(brandingAppearance) {

package/dist/ui/theme/utils.d.ts

@@ -1,8 +1,8 @@
+import type { BrandingAppearance } from "../utils/branding";
 import { type Colors } from "./colors";
 import { type Shape } from "./shapes";
-import { type TextStyles } from "./text";
 import type { Spacing } from "./spacing";
-import type { BrandingAppearance } from "../utils/branding";
+import { type TextStyles } from "./text";
 export declare const DEFAULT_LUMINANCE_THRESHOLD = 0.37;
 /**
  * Applies an alpha value to a color.

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;