@revenuecat/purchases-ui-js 0.1.21 → 1.0.1

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./types";
+export * from "./ui/globals";
 export { type PaywallData as PaywallData } from "./data/entities";
 export { type VariableDictionary } from "./utils/variable-utils";
 export { default as Paywall } from "./components/paywall/Paywall.svelte";

package/dist/index.js

@@ -1,5 +1,6 @@
 // Reexport your entry components here
 export * from "./types";
+export * from "./ui/globals";
 export {} from "./data/entities";
 export {} from "./utils/variable-utils";
 export { default as Paywall } from "./components/paywall/Paywall.svelte";

package/dist/ui/globals.d.ts

@@ -0,0 +1,9 @@
+import type { UIButtonProps } from "./molecules/types";
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "ui-button": UIButtonProps;
+        }
+    }
+}
+export {};

package/dist/ui/globals.js

@@ -0,0 +1,3 @@
+// Namespacing is the only supported method to augment JSX.IntrinsicElements
+/* eslint-disable @typescript-eslint/no-namespace */
+export {};

package/dist/ui/index.d.ts

@@ -0,0 +1,2 @@
+import Button from "./molecules/button.svelte";
+export { Button };

package/dist/ui/index.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Hide misleading 'missing type declaration' build error.
+import Button from "./molecules/button.svelte";
+export { Button };

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

@@ -1,9 +1,11 @@
 <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";
 
@@ -32,12 +34,14 @@
   setTemplate(template);
 </script>
 
-{#snippet template({ ...args }: Args<typeof Story>)}
-  <Button {...args}>
-    {#snippet children()}
-      Click Me
-    {/snippet}
-  </Button>
+{#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} />

package/dist/ui/molecules/button.svelte

@@ -1,17 +1,10 @@
+<svelte:options customElement="ui-button" />
+
 <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;
-  };
+  import { Theme } from "../theme/theme";
+  import type { UIButtonProps } from "./types";
 
   const {
     onclick,
@@ -20,8 +13,21 @@
     testId,
     type,
     loading = false,
-    children,
-  }: Props = $props();
+    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
@@ -30,11 +36,12 @@
   {disabled}
   data-testid={testId}
   {type}
+  style={combinedStyle}
 >
   {#if loading}
     <ProcessingAnimation size="small" />
   {:else}
-    <Typography size="body-base">{@render children?.()}</Typography>
+    <Typography size="body-base"><slot></slot></Typography>
   {/if}
 </button>
 

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

@@ -1,13 +1,28 @@
-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>;
+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?: unknown;
+    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 {};