@revenuecat/purchases-ui-js 0.0.21 → 1.0.0

package/dist/ui/layout/container.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { type Snippet } from "svelte";
+  import { Theme } from "../theme/theme";
+
+  import type { BrandingAppearance } from "../utils/branding";
+
+  export let brandingAppearance: BrandingAppearance | null | undefined =
+    undefined;
+  export let isInElement: boolean = false;
+
+  // Make styles reactive to changes in brandingAppearance
+  $: textStyle = new Theme(brandingAppearance).textStyleVars;
+  $: spacingStyle = new Theme(brandingAppearance).spacingStyleVars;
+  // $: formStyle = new Theme(brandingAppearance).formStyleVars;
+
+  $: style = [textStyle, spacingStyle].join("; ");
+
+  export let children: Snippet;
+</script>
+
+<div
+  class="rcb-ui-container"
+  class:fullscreen={!isInElement}
+  class:inside={isInElement}
+  {style}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  .rcb-ui-container {
+    display: flex;
+    flex-direction: column;
+    inset: 0;
+    color-scheme: none;
+    line-height: 1.5em;
+    font-family:
+      -apple-system,
+      BlinkMacSystemFont,
+      avenir next,
+      avenir,
+      segoe ui,
+      helvetica neue,
+      helvetica,
+      Cantarell,
+      Ubuntu,
+      roboto,
+      noto,
+      arial,
+      sans-serif;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .rcb-ui-container.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overscroll-behavior: none;
+    z-index: 1000001;
+  }
+
+  .rcb-ui-container.inside {
+    position: relative;
+    width: 100%;
+    z-index: unset;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+</style>

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,49 @@
+<script module>
+  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";
+
+  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>,
+  context: StoryContext<typeof Story>,
+)}
+  {@const brandingInfo = brandingAppearances[context.globals.brandingName]}
+  <Button {...args} brandingAppearance={brandingInfo ?? undefined}
+    >Click Me</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,101 @@
+<svelte:options customElement="ui-button" />
+
+<script lang="ts">
+  import ProcessingAnimation from "../utils/processing-animation.svelte";
+  import Typography from "../atoms/typography.svelte";
+  import { Theme } from "../theme/theme";
+  import type { UIButtonProps } from "./types";
+
+  const {
+    onclick,
+    intent = "primary",
+    disabled = false,
+    testId,
+    type,
+    loading = false,
+    brandingAppearance,
+    styleOverrides,
+  }: UIButtonProps = $props();
+
+  const theme = $derived(new Theme(brandingAppearance));
+  const textStyle = $derived(theme.textStyleVars);
+  const spacingStyle = $derived(theme.spacingStyleVars);
+  const productInfoStyle = $derived(theme.productInfoStyleVars);
+  const formStyle = $derived(theme.formStyleVars);
+
+  const combinedStyle = $derived(
+    [styleOverrides, textStyle, spacingStyle, productInfoStyle, formStyle].join(
+      "; ",
+    ),
+  );
+</script>
+
+<button
+  {onclick}
+  class={`intent-${intent}`}
+  {disabled}
+  data-testid={testId}
+  {type}
+  style={combinedStyle}
+>
+  {#if loading}
+    <ProcessingAnimation size="small" />
+  {:else}
+    <Typography size="body-base"><slot></slot></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,28 @@
+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>;
+export default Button;

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

@@ -0,0 +1,13 @@
+import type { BrandingAppearance } from "../utils/branding";
+export interface UIButtonProps {
+    onclick?: (event: any) => void;
+    children?: React.ReactNode;
+    intent?: "primary";
+    disabled?: boolean;
+    testId?: string | undefined;
+    type?: "reset" | "submit" | "button" | null | undefined;
+    loading?: boolean;
+    brandingAppearance?: BrandingAppearance;
+    styleOverrides?: string;
+    style?: Record<string, string> | string | undefined;
+}

package/dist/ui/molecules/types.js

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

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;