@revenuecat/purchases-ui-js 0.0.21 → 0.1.21

package/dist/components/button/Button.svelte

@@ -18,3 +18,12 @@
 <button onclick={handleClick} class={clz} disabled={!onclick} {style}>
   {@render children?.()}
 </button>
+
+<style>
+  button {
+    border: none;
+    cursor: pointer;
+    background: transparent;
+    width: fit-content;
+  }
+</style>

package/dist/components/button/ButtonNode.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Button from "./Button.svelte";
+  import { ButtonDeprecated } from "../../index";
   import type { ButtonNodeProps } from "../../data/entities";
   import Stack from "../stack/Stack.svelte";
   import { getButtonStyles } from "./button-utils";
@@ -30,17 +30,19 @@
   );
 </script>
 
-<Button onclick={onClick} style={buttonStyles} class={"rc-pw-button"}>
+<ButtonDeprecated onclick={onClick} style={buttonStyles} class={"rc-pw-button"}>
   <Stack {...stack} {labels} {purchaseState} {variableDictionary} />
-</Button>
+</ButtonDeprecated>
 
 <style>
   .rc-pw-button {
     display: flex;
     margin: 0;
     padding: 0;
-    background: initial;
-    border: initial;
     text-align: initial;
+    border: none;
+    cursor: pointer;
+    background: transparent;
+    width: fit-content;
   }
 </style>

package/dist/components/paywall/Paywall.svelte

@@ -223,13 +223,6 @@
     select {
       font: inherit;
     }
-    button {
-      border: none;
-      cursor: pointer;
-      background: transparent;
-      width: fit-content;
-    }
-
     p,
     h1,
     h2,

package/dist/components/purchase-button/PurchaseButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { PurchaseButtonProps } from "../../data/entities";
   import Stack from "../stack/Stack.svelte";
-  import { Button } from "../../index";
+  import { ButtonDeprecated } from "../../index";
   import { getPurchaseButtonStyles } from "./purchase-button-utils";
 
   const {
@@ -30,13 +30,13 @@
   );
 </script>
 
-<Button
+<ButtonDeprecated
   onclick={handleClick}
   class="rc-pw-purchase-button"
   style={buttonStyles}
 >
   <Stack {...stack} {labels} {purchaseState} {variableDictionary} />
-</Button>
+</ButtonDeprecated>
 
 <style>
   .rc-pw-purchase-button {

package/dist/index.d.ts

@@ -3,7 +3,8 @@ export { type PaywallData as PaywallData } from "./data/entities";
 export { type VariableDictionary } from "./utils/variable-utils";
 export { default as Paywall } from "./components/paywall/Paywall.svelte";
 export { default as Stack } from "./components/stack/Stack.svelte";
-export { default as Button } from "./components/button/Button.svelte";
+export { default as ButtonDeprecated } from "./components/button/Button.svelte";
+export { default as Button } from "./ui/molecules/button.svelte";
 export { default as Text } from "./components/text/Text.svelte";
 export { default as Image } from "./components/image/Image.svelte";
 export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";

package/dist/index.js

@@ -4,7 +4,8 @@ export {} from "./data/entities";
 export {} from "./utils/variable-utils";
 export { default as Paywall } from "./components/paywall/Paywall.svelte";
 export { default as Stack } from "./components/stack/Stack.svelte";
-export { default as Button } from "./components/button/Button.svelte";
+export { default as ButtonDeprecated } from "./components/button/Button.svelte";
+export { default as Button } from "./ui/molecules/button.svelte";
 export { default as Text } from "./components/text/Text.svelte";
 export { default as Image } from "./components/image/Image.svelte";
 export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";

package/dist/stories/fixtures.d.ts

@@ -1,4 +1,5 @@
 import type { PaywallData } from "../data/entities";
+import type { BrandingAppearance } from "../ui/utils/branding";
 export declare const paywallData: PaywallData;
 export declare const alignmentPaywallData: PaywallData;
 export declare const fontsPaywallData: PaywallData;
@@ -22,3 +23,4 @@ export declare const paywallWithFooter: PaywallData;
 export declare const errorPaywallData: PaywallData;
 export declare const fallbackPaywallData: PaywallData;
 export declare const e2eTestTemplate: PaywallData;
+export declare const brandingAppearances: Record<string, BrandingAppearance | null>;

package/dist/stories/fixtures.js

@@ -24333,3 +24333,39 @@ export const e2eTestTemplate = {
         google: ["TW", "KZ", "MX", "PH", "TH"],
     },
 };
+export const brandingAppearances = {
+    None: null,
+    Fantastic: {
+        shapes: "rectangle",
+        color_form_bg: "#313131",
+        color_error: "#E79462",
+        color_product_info_bg: "#ffffff",
+        color_buttons_primary: "#AC7DE3",
+        color_accent: "#99BB37",
+        color_page_bg: "#ffffff",
+        font: "sans-serif",
+        show_product_description: true,
+    },
+    Igify: {
+        color_accent: "#969696",
+        color_buttons_primary: "#000000",
+        color_error: "#e61054",
+        color_form_bg: "#FFFFFF",
+        color_page_bg: "#114ab8",
+        color_product_info_bg: "#114ab8",
+        font: "default",
+        shapes: "default",
+        show_product_description: true,
+    },
+    Dipsea: {
+        color_accent: "#DF5539",
+        color_buttons_primary: "#DF5539",
+        color_error: "#F2545B",
+        color_form_bg: "#372CBC",
+        color_page_bg: "#26122F",
+        color_product_info_bg: "#26122F",
+        font: "default",
+        shapes: "pill",
+        show_product_description: false,
+    },
+};

package/dist/stories/with-layout.d.ts

@@ -0,0 +1,10 @@
+export declare function withLayout(Story: unknown, context: unknown): {
+    Component: import("svelte").Component<import("./with-layout.svelte").Props, {}, "">;
+    props: {
+        globals: any;
+        children: () => {
+            Component: unknown;
+            props: any;
+        };
+    };
+};

package/dist/stories/with-layout.js

@@ -0,0 +1,15 @@
+import WithLayout from "./with-layout.svelte";
+export function withLayout(Story, context) {
+    return {
+        Component: WithLayout,
+        props: {
+            // @ts-expect-error too hard to get the type right
+            globals: context.globals,
+            children: () => ({
+                Component: Story,
+                // @ts-expect-error too hard to get the type right
+                props: context.args,
+            }),
+        },
+    };
+}

package/dist/stories/with-layout.svelte

@@ -0,0 +1,33 @@
+<script module>
+  import { brandingAppearances } from "./fixtures";
+  import { toProductInfoStyleVar } from "../ui/theme/utils";
+  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";
+</script>
+
+<script lang="ts">
+  export interface Props {
+    children: Snippet<[]>;
+    globals: {
+      brandingName: string;
+    };
+  }
+
+  const { children, globals }: Props = $props();
+  const brandingAppearance = $derived(
+    brandingAppearances[globals.brandingName],
+  );
+  const colorVariables = $derived(toProductInfoStyleVar(brandingAppearance));
+</script>
+
+<Container {brandingAppearance}>
+  <Layout style={colorVariables}>
+    <Main {brandingAppearance}>
+      {#snippet body()}
+        {@render children()}
+      {/snippet}
+    </Main>
+  </Layout>
+</Container>

package/dist/stories/with-layout.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+export interface Props {
+    children: Snippet<[]>;
+    globals: {
+        brandingName: string;
+    };
+}
+declare const WithLayout: import("svelte").Component<Props, {}, "">;
+type WithLayout = ReturnType<typeof WithLayout>;
+export default WithLayout;

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

@@ -0,0 +1,202 @@
+<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";
+  import { brandingViewportModes } from "../../../../.storybook/modes";
+
+  let { Story } = defineMeta<typeof Typography>({
+    component: Typography,
+    title: "Atoms/Typography",
+    // @ts-expect-error ignore typing of decorator
+    decorators: [withLayout],
+    argTypes: {
+      size: {
+        control: "select",
+        options: [
+          "heading-2xl",
+          "heading-xl",
+          "heading-lg",
+          "heading-md",
+          "body-base",
+          "body-small",
+          "label-button",
+          "label-default",
+          "caption-default",
+          "caption-link",
+        ],
+      },
+    },
+    parameters: {
+      chromatic: {
+        modes: brandingViewportModes,
+      },
+    },
+  });
+
+  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>)}
+  <Typography {size}>
+    {#snippet children()}
+      Default text
+    {/snippet}
+  </Typography>
+{/snippet}
+
+<!-- Stories for each typography variant -->
+<Story name="Heading 2XL">
+  <Typography size="heading-2xl">
+    Heading 2XL - {baseContent}
+  </Typography>
+</Story>
+
+<Story name="Heading XL">
+  <Typography size="heading-xl">
+    Heading XL - {baseContent}
+  </Typography>
+</Story>
+
+<Story name="Heading LG">
+  <Typography size="heading-lg">
+    Heading LG - {baseContent}
+  </Typography>
+</Story>
+
+<Story name="Heading MD">
+  <Typography size="heading-md">
+    Heading MD - {baseContent}
+  </Typography>
+</Story>
+
+<Story name="Body Base">
+  <Typography size="body-base">
+    Body Base - {baseContent}
+  </Typography>
+</Story>
+
+<Story name="Body Small">
+  <Typography size="body-small">
+    Body Small - {baseContent}
+  </Typography>
+</Story>
+
+<Story name="Label Button">
+  <Typography size="label-button">
+    Label Button - {baseContent}
+  </Typography>
+</Story>
+
+<Story name="Label Default">
+  <Typography size="label-default">
+    Label Default - {baseContent}
+  </Typography>
+</Story>
+
+<Story name="Caption Default">
+  <Typography size="caption-default">
+    Caption Default - {baseContent}
+  </Typography>
+</Story>
+
+<Story name="Caption Link">
+  <Typography size="caption-link">
+    Caption Link - {baseContent}
+  </Typography>
+</Story>
+
+<!-- Story showing all variants -->
+<Story name="All Variants">
+  <div class="story-container">
+    <div class="variant-row">
+      <div class="variant-name">heading-2xl</div>
+      <Typography size="heading-2xl">
+        Heading 2XL - {baseContent}
+      </Typography>
+    </div>
+    <div class="variant-row">
+      <div class="variant-name">heading-xl</div>
+      <Typography size="heading-xl">
+        Heading XL - {baseContent}
+      </Typography>
+    </div>
+    <div class="variant-row">
+      <div class="variant-name">heading-lg</div>
+      <Typography size="heading-lg">
+        Heading LG - {baseContent}
+      </Typography>
+    </div>
+    <div class="variant-row">
+      <div class="variant-name">heading-md</div>
+      <Typography size="heading-md">
+        Heading MD - {baseContent}
+      </Typography>
+    </div>
+    <div class="variant-row">
+      <div class="variant-name">body-base</div>
+      <Typography size="body-base">
+        Body Base - {baseContent}
+      </Typography>
+    </div>
+    <div class="variant-row">
+      <div class="variant-name">body-small</div>
+      <Typography size="body-small">
+        Body Small - {baseContent}
+      </Typography>
+    </div>
+    <div class="variant-row">
+      <div class="variant-name">label-button</div>
+      <Typography size="label-button">
+        Label Button - {baseContent}
+      </Typography>
+    </div>
+    <div class="variant-row">
+      <div class="variant-name">label-default</div>
+      <Typography size="label-default">
+        Label Default - {baseContent}
+      </Typography>
+    </div>
+    <div class="variant-row">
+      <div class="variant-name">caption-default</div>
+      <Typography size="caption-default">
+        Caption Default - {baseContent}
+      </Typography>
+    </div>
+    <div class="variant-row">
+      <div class="variant-name">caption-link</div>
+      <Typography size="caption-link">
+        Caption Link - {baseContent}
+      </Typography>
+    </div>
+  </div>
+</Story>
+
+<style>
+  .story-container {
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .variant-row {
+    display: grid;
+    grid-template-columns: 200px 1fr;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .variant-name {
+    color: #666;
+    font-family: monospace;
+    font-size: 14px;
+  }
+</style>

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

@@ -0,0 +1,19 @@
+import { default as Typography } from "../../ui/atoms/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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Typography: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Typography = InstanceType<typeof Typography>;
+export default Typography;

package/dist/ui/atoms/typography.svelte

@@ -0,0 +1,132 @@
+<script module>
+  import { type Snippet } from "svelte";
+
+  type Size =
+    | "heading-2xl"
+    | "heading-xl"
+    | "heading-lg"
+    | "heading-md"
+    | "body-base"
+    | "body-small"
+    | "label-button"
+    | "label-default"
+    | "caption-default"
+    | "caption-link";
+
+  type Props = {
+    size?: Size;
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  const { children, size = "body-base" }: Props = $props();
+</script>
+
+<span class="rcb-typography rcb-typography-{size}">
+  {@render children?.()}
+</span>
+
+<style>
+  /* svelte-ignore css-unused-selector */
+  .rcb-typography-heading-2xl {
+    font: var(--rc-text-heading2xl-mobile);
+  }
+
+  /* svelte-ignore css-unused-selector */
+  .rcb-typography-heading-xl {
+    font: var(--rc-text-headingXl-mobile);
+  }
+
+  /* svelte-ignore css-unused-selector */
+  .rcb-typography-heading-lg {
+    font: var(--rc-text-headingLg-mobile);
+  }
+
+  /* svelte-ignore css-unused-selector */
+  .rcb-typography-heading-md {
+    font: var(--rc-text-headingMd-mobile);
+  }
+
+  /* svelte-ignore css-unused-selector */
+  .rcb-typography-body-base {
+    font: var(--rc-text-bodyBase-mobile);
+  }
+
+  /* svelte-ignore css-unused-selector */
+  .rcb-typography-body-small {
+    font: var(--rc-text-bodySmall-mobile);
+  }
+
+  /* svelte-ignore css-unused-selector */
+  .rcb-typography-label-button {
+    font: var(--rc-text-labelButton-mobile);
+  }
+
+  /* svelte-ignore css-unused-selector */
+  .rcb-typography-label-default {
+    font: var(--rc-text-labelDefault-mobile);
+  }
+
+  /* svelte-ignore css-unused-selector */
+  .rcb-typography-caption-default {
+    font: var(--rc-text-captionDefault-mobile);
+  }
+
+  /* svelte-ignore css-unused-selector */
+  .rcb-typography-caption-link {
+    font: var(--rc-text-captionLink-mobile);
+  }
+
+  @container layout-query-container (width >= 768px) {
+    /* svelte-ignore css-unused-selector */
+    .rcb-typography-heading-2xl {
+      font: var(--rc-text-heading2xl-desktop);
+    }
+
+    /* svelte-ignore css-unused-selector */
+    .rcb-typography-heading-xl {
+      font: var(--rc-text-headingXl-desktop);
+    }
+
+    /* svelte-ignore css-unused-selector */
+    .rcb-typography-heading-lg {
+      font: var(--rc-text-headingLg-desktop);
+    }
+
+    /* svelte-ignore css-unused-selector */
+    .rcb-typography-heading-md {
+      font: var(--rc-text-headingMd-desktop);
+    }
+
+    /* svelte-ignore css-unused-selector */
+    .rcb-typography-body-base {
+      font: var(--rc-text-bodyBase-desktop);
+    }
+
+    /* svelte-ignore css-unused-selector */
+    .rcb-typography-body-small {
+      font: var(--rc-text-bodySmall-desktop);
+    }
+
+    /* svelte-ignore css-unused-selector */
+    .rcb-typography-label-button {
+      font: var(--rc-text-labelButton-desktop);
+    }
+
+    /* svelte-ignore css-unused-selector */
+    .rcb-typography-label-default {
+      font: var(--rc-text-labelDefault-desktop);
+    }
+
+    /* svelte-ignore css-unused-selector */
+    .rcb-typography-caption-default {
+      font: var(--rc-text-captionDefault-desktop);
+    }
+
+    /* svelte-ignore css-unused-selector */
+    .rcb-typography-caption-link {
+      font: var(--rc-text-captionLink-desktop);
+    }
+  }
+</style>

package/dist/ui/atoms/typography.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type Snippet } from "svelte";
+type Size = "heading-2xl" | "heading-xl" | "heading-lg" | "heading-md" | "body-base" | "body-small" | "label-button" | "label-default" | "caption-default" | "caption-link";
+type Props = {
+    size?: Size;
+    children?: Snippet;
+};
+declare const Typography: import("svelte").Component<Props, {}, "">;
+type Typography = ReturnType<typeof Typography>;
+export default Typography;

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>