@revenuecat/purchases-ui-js 0.0.21 → 0.1.21

package/dist/ui/layout/container.svelte.d.ts

@@ -0,0 +1,24 @@
+import { type Snippet } from "svelte";
+import type { BrandingAppearance } from "../utils/branding";
+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;
+}
+declare const Container: $$__sveltets_2_IsomorphicComponent<{
+    brandingAppearance?: BrandingAppearance | null | undefined;
+    isInElement?: boolean;
+    children: Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Container = InstanceType<typeof Container>;
+export default Container;

package/dist/ui/layout/layout.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { type Snippet } from "svelte";
+
+  export let style = "";
+  export let children: Snippet;
+</script>
+
+<div id="layout-query-container">
+  <div class="rcb-ui-layout" {style}>
+    {@render children?.()}
+  </div>
+</div>
+
+<style>
+  #layout-query-container {
+    width: 100%;
+    height: 100%;
+    container-type: size;
+    container-name: layout-query-container;
+    overflow-y: auto;
+    overscroll-behavior: none;
+  }
+
+  .rcb-ui-layout {
+    width: 100%;
+    min-height: 100%;
+    display: flex;
+    box-sizing: border-box;
+    flex-direction: column;
+    overflow-y: auto;
+    overscroll-behavior: none;
+  }
+
+  @container layout-query-container (width < 768px) {
+    .rcb-ui-layout {
+      flex-grow: 1;
+    }
+  }
+
+  @container layout-query-container (width >= 768px) {
+    .rcb-ui-layout {
+      flex-direction: row;
+    }
+  }
+</style>

package/dist/ui/layout/layout.svelte.d.ts

@@ -0,0 +1,22 @@
+import { type Snippet } from "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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Layout: $$__sveltets_2_IsomorphicComponent<{
+    style?: string;
+    children: Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Layout = InstanceType<typeof Layout>;
+export default Layout;

package/dist/ui/layout/main-block.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { Theme } from "../theme/theme";
+  import { onMount } from "svelte";
+  import SectionLayout from "./section-layout.svelte";
+  import type { BrandingAppearance } from "../utils/branding";
+
+  export let brandingAppearance: BrandingAppearance | null | undefined =
+    undefined;
+  // Make style reactive to changes in brandingAppearance
+  $: style = new Theme(brandingAppearance).formStyleVars;
+
+  export let body;
+  export let header: (() => any) | null = null;
+
+  let showContent = true;
+  // This makes the tests fail
+  onMount(() => {
+    setTimeout(() => (showContent = true), 10);
+  });
+</script>
+
+<div class="rcb-ui-main" {style}>
+  <SectionLayout show={showContent} layoutStyle="" {header} {body} />
+</div>
+
+<style>
+  .rcb-ui-main {
+    flex: 1;
+    display: flex;
+    background-color: var(--rc-color-background);
+  }
+</style>

package/dist/ui/layout/main-block.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { BrandingAppearance } from "../utils/branding";
+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;
+}
+declare const MainBlock: $$__sveltets_2_IsomorphicComponent<{
+    brandingAppearance?: BrandingAppearance | null | undefined;
+    body: any;
+    header?: (() => any) | null;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MainBlock = InstanceType<typeof MainBlock>;
+export default MainBlock;

package/dist/ui/layout/section-layout.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { fade } from "svelte/transition";
+
+  export let show: boolean = true;
+  export let layoutStyle: string | undefined = undefined;
+
+  export let header: (() => any) | null = null;
+  export let body: (() => any) | null = null;
+</script>
+
+<div class="layout-wrapper-outer" style={layoutStyle}>
+  {#if show}
+    <div class="layout-wrapper">
+      <div
+        class="layout-content"
+        transition:fade={{ duration: 500, delay: 50 }}
+      >
+        {#if header}
+          {@render header()}
+        {/if}
+        {#if body}
+          {@render body()}
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .layout-wrapper-outer {
+    flex: 1;
+    display: flex;
+    background-color: var(--rc-color-background);
+  }
+
+  .layout-wrapper {
+    width: 100%;
+  }
+
+  .layout-content {
+    box-sizing: border-box;
+    background-color: var(--rc-color-background);
+    color: var(--rc-color-grey-text-dark);
+    display: flex;
+    flex-direction: column;
+    padding: var(--rc-spacing-outerPadding-mobile);
+  }
+
+  @container layout-query-container (width >= 768px) {
+    .layout-wrapper {
+      min-height: 100vh;
+      flex-basis: 600px;
+    }
+
+    .layout-content {
+      padding: var(--rc-spacing-outerPadding-desktop);
+    }
+  }
+
+  @container layout-query-container (width < 768px) {
+    .layout-wrapper {
+      width: 100%;
+      min-width: 300px;
+      display: flex;
+      flex-grow: 1;
+    }
+
+    .layout-content {
+      flex-grow: 1;
+      height: 100%;
+    }
+  }
+</style>

package/dist/ui/layout/section-layout.svelte.d.ts

@@ -0,0 +1,23 @@
+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;
+}
+declare const SectionLayout: $$__sveltets_2_IsomorphicComponent<{
+    show?: boolean;
+    layoutStyle?: string | undefined;
+    header?: (() => any) | null;
+    body?: (() => any) | null;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SectionLayout = InstanceType<typeof SectionLayout>;
+export default SectionLayout;

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

@@ -0,0 +1,45 @@
+<script module>
+  import { default as Button } from "./button.svelte";
+  import {
+    type Args,
+    defineMeta,
+    setTemplate,
+  } from "@storybook/addon-svelte-csf";
+  import { withLayout } from "../../stories/with-layout";
+
+  let { Story } = defineMeta<typeof Button>({
+    component: Button,
+    title: "Molecules/Button",
+    // @ts-expect-error ignore typing of decorator
+    decorators: [withLayout],
+    argTypes: {
+      intent: {
+        control: "radio",
+        options: ["primary", undefined],
+      },
+    },
+  });
+
+  const args = {
+    intent: "primary" as const,
+    disabled: false,
+    loading: false,
+    onclick: () => {},
+  };
+</script>
+
+<script lang="ts">
+  setTemplate(template);
+</script>
+
+{#snippet template({ ...args }: Args<typeof Story>)}
+  <Button {...args}>
+    {#snippet children()}
+      Click Me
+    {/snippet}
+  </Button>
+{/snippet}
+
+<Story name="Default" {args} />
+<Story name="Disabled" args={{ ...args, disabled: true }} />
+<Story name="Loading" args={{ ...args, loading: true }} />

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

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

package/dist/ui/molecules/button.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { type Snippet } from "svelte";
+  import ProcessingAnimation from "../utils/processing-animation.svelte";
+  import Typography from "../atoms/typography.svelte";
+
+  type Props = {
+    onclick?: () => void;
+    intent?: "primary";
+    disabled?: boolean;
+    testId?: string | undefined;
+    type?: "reset" | "submit" | "button" | null | undefined;
+    loading?: boolean;
+    children: Snippet | undefined;
+  };
+
+  const {
+    onclick,
+    intent = "primary",
+    disabled = false,
+    testId,
+    type,
+    loading = false,
+    children,
+  }: Props = $props();
+</script>
+
+<button
+  {onclick}
+  class={`intent-${intent}`}
+  {disabled}
+  data-testid={testId}
+  {type}
+>
+  {#if loading}
+    <ProcessingAnimation size="small" />
+  {:else}
+    <Typography size="body-base">{@render children?.()}</Typography>
+  {/if}
+</button>
+
+<style>
+  button {
+    border: none;
+    border-radius: var(--rc-shape-input-button-border-radius);
+    cursor: pointer;
+    height: var(--rc-spacing-inputHeight-mobile);
+    color: var(--rc-color-grey-text-dark);
+    background-color: var(--rc-color-grey-ui-dark);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color 0.15s ease-in-out;
+    user-select: none;
+  }
+
+  @container layout-query-container (width >= 768px) {
+    button {
+      height: var(--rc-spacing-inputHeight-desktop);
+    }
+  }
+
+  /* focus-visible is triggered only when focused with keyboard/reader */
+  button:focus-visible {
+    outline: 2px solid var(--rc-color-focus);
+  }
+
+  button.intent-primary {
+    background-color: var(--rc-color-primary);
+    color: var(--rc-color-primary-text);
+  }
+
+  button:disabled {
+    color: var(--rc-color-grey-text-light);
+    background-color: var(--rc-color-grey-ui-dark);
+    outline: none;
+  }
+
+  button.intent-primary:not(:disabled):hover {
+    background-color: var(--rc-color-primary-hover);
+  }
+
+  button.intent-primary:not(:disabled):active,
+  button:active {
+    background-color: var(--rc-color-primary-pressed);
+    outline: none;
+  }
+
+  button.intent-primary:disabled {
+    color: var(--rc-color-grey-text-light);
+    background-color: var(--rc-color-grey-ui-dark);
+  }
+</style>

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

@@ -0,0 +1,13 @@
+import { type Snippet } from "svelte";
+type Props = {
+    onclick?: () => void;
+    intent?: "primary";
+    disabled?: boolean;
+    testId?: string | undefined;
+    type?: "reset" | "submit" | "button" | null | undefined;
+    loading?: boolean;
+    children: Snippet | undefined;
+};
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

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

@@ -0,0 +1,37 @@
+import type { BrandingAppearance } from "../utils/branding";
+/**
+ * All those colors get translated in --rc-color-<property_name> css variables.
+ * i.e. --rc-color-error or --rc-color-input-background
+ */
+export interface Colors {
+    error: string;
+    warning: string;
+    focus: string;
+    accent: string;
+    primary: string;
+    "primary-hover": string;
+    "primary-pressed": string;
+    "primary-text": string;
+    white: string;
+    "grey-text-dark": string;
+    "grey-text-light": string;
+    "grey-ui-dark": string;
+    "grey-ui-light": string;
+    "input-background": string;
+    background: string;
+}
+export declare const DEFAULT_FORM_COLORS: Colors;
+export declare const DEFAULT_INFO_COLORS: Colors;
+/**
+ * Mappings from the colors defined above and the colors downloaded from the BrandingAppearance.
+ * Bear in mind that font colors are calculated dynamically given the resulting background color.
+ */
+export declare const ColorsToBrandingAppearanceMapping: Record<string, keyof BrandingAppearance>;
+export declare const FormColorsToBrandingAppearanceMapping: {
+    "input-background": string;
+    background: string;
+};
+export declare const InfoColorsToBrandingAppearanceMapping: {
+    "input-background": string;
+    background: string;
+};

package/dist/ui/theme/colors.js

@@ -0,0 +1,54 @@
+export const DEFAULT_FORM_COLORS = {
+    error: "#B0171F",
+    warning: "#f4e971",
+    focus: "#1148B8",
+    accent: "#767676",
+    primary: "#576CDB",
+    "primary-hover": "rgba(87, 108, 219, .8)",
+    "primary-pressed": "rgba(87, 108, 219, .9)",
+    "primary-text": "#ffffff",
+    white: "#ffffff",
+    "grey-text-dark": "rgba(0,0,0,1)",
+    "grey-text-light": "rgba(0,0,0,0.7)",
+    "grey-ui-dark": "rgba(0,0,0,0.3)",
+    "grey-ui-light": "rgba(0,0,0,0.1)",
+    "input-background": "white",
+    background: "white",
+};
+export const DEFAULT_INFO_COLORS = {
+    error: "#B0171F",
+    warning: "#f4e971",
+    focus: "#1148B8",
+    accent: "#767676",
+    primary: "#576CDB",
+    "primary-hover": "rgba(87, 108, 219, .8)",
+    "primary-pressed": "rgba(87, 108, 219, .9)",
+    "primary-text": "#ffffff",
+    white: "#ffffff",
+    "grey-text-dark": "rgba(0,0,0,1)",
+    "grey-text-light": "rgba(0,0,0,0.7)",
+    "grey-ui-dark": "rgba(0,0,0,0.3)",
+    "grey-ui-light": "rgba(0,0,0,0.1)",
+    "input-background": "white",
+    background: "#EFF3FA",
+};
+/**
+ * Mappings from the colors defined above and the colors downloaded from the BrandingAppearance.
+ * Bear in mind that font colors are calculated dynamically given the resulting background color.
+ */
+export const ColorsToBrandingAppearanceMapping = {
+    error: "color_error",
+    focus: "color_accent",
+    accent: "color_accent",
+    primary: "color_buttons_primary",
+};
+export const FormColorsToBrandingAppearanceMapping = {
+    ...ColorsToBrandingAppearanceMapping,
+    "input-background": "color_form_bg",
+    background: "color_form_bg",
+};
+export const InfoColorsToBrandingAppearanceMapping = {
+    ...ColorsToBrandingAppearanceMapping,
+    "input-background": "color_product_info_bg",
+    background: "color_product_info_bg",
+};

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

@@ -0,0 +1,8 @@
+export interface Shape {
+    "input-border-radius": string;
+    "input-button-border-radius": string;
+}
+export declare const RoundedShape: Shape;
+export declare const RectangularShape: Shape;
+export declare const PillsShape: Shape;
+export declare const DefaultShape: Shape;

package/dist/ui/theme/shapes.js

@@ -0,0 +1,13 @@
+export const RoundedShape = {
+    "input-border-radius": "4px",
+    "input-button-border-radius": "8px",
+};
+export const RectangularShape = {
+    "input-border-radius": "0px",
+    "input-button-border-radius": "0px",
+};
+export const PillsShape = {
+    "input-border-radius": "12px",
+    "input-button-border-radius": "9999px",
+};
+export const DefaultShape = RoundedShape;

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

@@ -0,0 +1,7 @@
+export interface Spacing {
+    [key: string]: {
+        mobile: string;
+        desktop: string;
+    };
+}
+export declare const DEFAULT_SPACING: Spacing;

package/dist/ui/theme/spacing.js

@@ -0,0 +1,42 @@
+export const DEFAULT_SPACING = {
+    outerPadding: {
+        mobile: "clamp(1.3125rem, 5.6vw, 1.5rem)",
+        desktop: "clamp(1.5rem, 9.44vw, 5rem)",
+    },
+    outerPaddingSmall: {
+        mobile: "clamp(0.75rem, 4.2vw, 1rem)",
+        desktop: "clamp(1.5rem, 9.44vw, 5rem)",
+    },
+    gapSmall: {
+        mobile: "0.25rem",
+        desktop: "0.375rem",
+    },
+    gapMedium: {
+        mobile: "0.5rem",
+        desktop: "0.75rem",
+    },
+    gapLarge: {
+        mobile: "0.75rem",
+        desktop: "0.75rem",
+    },
+    gapXLarge: {
+        mobile: "1rem",
+        desktop: "1.5rem",
+    },
+    gapXXLarge: {
+        mobile: "1.25rem",
+        desktop: "2.25rem",
+    },
+    gapXXXLarge: {
+        mobile: "2.25rem",
+        desktop: "4.5rem",
+    },
+    inputHeight: {
+        mobile: "3rem",
+        desktop: "3rem",
+    },
+    gapStripeElement: {
+        mobile: "0.70rem",
+        desktop: "1rem",
+    },
+};

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

@@ -0,0 +1,19 @@
+/**
+ * All text styles get translated into --rc-text-<property_name> CSS variables.
+ * i.e., --rc-text-title1-font-size or --rc-text-title1-line-height
+ */
+export interface TextStyle {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: string;
+    letterSpacing?: string;
+}
+export type ScreenType = "mobile" | "desktop";
+export type ScreenTextStyle = Record<TextStyleKey, TextStyle>;
+export type TextStyleKey = "heading2xl" | "headingXl" | "headingLg" | "headingMd" | "bodyBase" | "bodySmall" | "labelButton" | "labelDefault" | "captionDefault" | "captionLink";
+export type TextStyles = Record<TextStyleKey, {
+    mobile: TextStyle;
+    desktop: TextStyle;
+}>;
+export declare const DEFAULT_FONT_FAMILY = "-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif";
+export declare const DEFAULT_TEXT_STYLES: TextStyles;