@revenuecat/purchases-ui-js 0.0.16 → 0.0.18

package/dist/components/button/Button.svelte

@@ -18,16 +18,3 @@
 <button onclick={handleClick} class={clz} disabled={!onclick} {style}>
   {@render children?.()}
 </button>
-
-<style>
-  button {
-    border: none;
-    cursor: pointer;
-    background: transparent;
-    padding: 0;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-</style>

package/dist/components/button/Button.svelte.d.ts

@@ -1,8 +1,10 @@
 import type { Snippet } from "svelte";
-declare const Button: import("svelte").Component<{
+interface ButtonProps {
     onclick?: () => void;
     children?: Snippet;
     style?: string;
     class?: string;
-}, {}, "">;
+}
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/button/ButtonNode.stories.svelte

@@ -1,8 +1,13 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import ButtonNode from "./ButtonNode.svelte";
-  import { colorModeStoryMeta } from "../../stories/meta-templates";
-  import type { SupportedActions, TextNodeProps } from "../../data/entities";
+  import type {
+    ComponentTypes,
+    StackProps,
+    SupportedActions,
+  } from "../../data/entities";
+  import type { PurchaseState } from "../../data/state";
+  import type { ColorMode } from "../../types";
 
   const onAction = (action: SupportedActions) => {
     alert(action.type);
@@ -30,7 +35,6 @@
           },
         },
       },
-      colorMode: colorModeStoryMeta,
       stack: {
         control: { type: "object" },
         description: "Stack configuration for button content",
@@ -44,9 +48,10 @@
     },
   });
 
-  const purchaseState = {
+  const purchaseState: PurchaseState = {
     locale: "en_US",
     defaultLocale: "en_US",
+    colorMode: "light" as ColorMode,
   };
 
   export const labelsData = {
@@ -59,7 +64,7 @@
   };
 
   const textProps = (id: number) => ({
-    type: "text",
+    type: "text" as ComponentTypes,
     name: "Button Text",
     components: [],
     id: "button-text-1",
@@ -78,14 +83,13 @@
     margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
     padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
     labels: labelsData,
-    colorMode: "light",
     size: {
       width: { type: "fit" },
       height: { type: "fit" },
     },
   });
 
-  const baseStackProps = {
+  const baseStackProps: Partial<StackProps> = {
     type: "stack",
     size: { width: { type: "fill" }, height: { type: "fill" } },
     labels: labelsData,
@@ -118,7 +122,8 @@
     stack: {
       ...baseStackProps,
       components: [textProps(1)],
-    },
+      purchaseState,
+    } as StackProps,
     purchaseState: purchaseState,
     onAction,
   }}
@@ -148,7 +153,7 @@
         light: { type: "hex", value: "#2E7D32" },
       },
       components: [textProps(2)],
-    },
+    } as StackProps,
     purchaseState: purchaseState,
   }}
 />
@@ -180,7 +185,7 @@
         light: { type: "hex", value: "#D32F2F" },
       },
       components: [textProps(3)],
-    },
+    } as StackProps,
     purchaseState: purchaseState,
   }}
 />
@@ -207,7 +212,7 @@
         light: { type: "hex", value: "#4A90E2" },
       },
       components: [textProps(4)],
-    },
+    } as StackProps,
     purchaseState: purchaseState,
   }}
 />

package/dist/components/button/ButtonNode.svelte

@@ -2,6 +2,7 @@
   import Button from "./Button.svelte";
   import type { ButtonNodeProps } from "../../data/entities";
   import Stack from "../stack/Stack.svelte";
+  import { getButtonStyles } from "./button-utils";
 
   const {
     stack,
@@ -10,12 +11,36 @@
     labels,
     purchaseState,
     variableDictionary,
+    ...restProps
   }: ButtonNodeProps = $props();
   const onClick = () => {
     onAction && onAction(action);
   };
+
+  const buttonStyles = $derived(
+    getButtonStyles({
+      stack,
+      action,
+      onAction,
+      labels,
+      purchaseState,
+      variableDictionary,
+      ...restProps,
+    }),
+  );
 </script>
 
-<Button onclick={onClick}>
+<Button onclick={onClick} style={buttonStyles} class={"rc-pw-button"}>
   <Stack {...stack} {labels} {purchaseState} {variableDictionary} />
 </Button>
+
+<style>
+  .rc-pw-button {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    background: initial;
+    border: initial;
+    text-align: initial;
+  }
+</style>

package/dist/components/button/ButtonNode.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { ButtonNodeProps } from "../../data/entities";
 declare const ButtonNode: import("svelte").Component<ButtonNodeProps, {}, "">;
+type ButtonNode = ReturnType<typeof ButtonNode>;
 export default ButtonNode;

package/dist/components/button/button-utils.d.ts

@@ -0,0 +1,2 @@
+import type { ButtonNodeProps } from "../../data/entities";
+export declare function getButtonStyles({ stack, zStackChildStyles }: ButtonNodeProps): string;

package/dist/components/button/button-utils.js

@@ -0,0 +1,19 @@
+import { prefixObject, stringifyStyles } from "../../utils/style-utils";
+export function getButtonStyles({ stack, zStackChildStyles }) {
+    // Get the width of the inner stack to adjust to the outer button wrapper
+    const width = stack?.size?.width?.type === "fill" ? "100%" : "fit-content";
+    // Define set of variables to be assigned to the button
+    // Define width as an inline style
+    const prefixedObject = prefixObject(zStackChildStyles || {}, "button");
+    const assignedVariables = {
+        position: "var(--button-position, relative)",
+        inset: "var(--button-inset, 0)",
+        transform: "var(--button-transform, initial)",
+        width,
+    };
+    const buttonInlineStyles = stringifyStyles({
+        ...prefixedObject,
+        ...assignedVariables,
+    });
+    return buttonInlineStyles;
+}

package/dist/components/footer/Footer.stories.svelte

@@ -1,96 +1,70 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import Footer from "./Footer.svelte";
-  import { colorModeStoryMeta } from "../../stories/meta-templates";
+  import type { ColorMode } from "../../types";
 
   const purchaseState = {
     locale: "en_US",
     defaultLocale: "en_US",
+    colorMode: "light" as ColorMode,
   };
 
   const { Story } = defineMeta({
     title: "Components/Footer",
     component: Footer,
     tags: ["autodocs"],
-    argTypes: {
-      colorMode: colorModeStoryMeta,
-
-      stack: {
-        control: { type: "object" },
-        description: "Stack configuration for package content",
-        table: {
-          type: {
-            summary: "object",
-            detail: "StackProps",
-          },
-        },
-      },
-    },
+    argTypes: {},
   });
 
   export const labelsData = {
     en_US: {
-      "BcX-6YwhoV": "Monthly",
-      QZ4ZmYsqjN: "$1.99",
+      GM2Sytqd5p: "Do it now before you regret it!",
     },
   };
 </script>
 
 <!-- Default  -->
 <Story
-  name="Default Package"
+  name="Footer component"
   args={{
-    id: "6rQSD5e2Kz",
-    is_selected_by_default: false,
-    name: "Package - Monthly",
-    package_id: "$rc_annual",
-    purchaseState: purchaseState,
+    id: "kHhCWlo9au",
+    name: "",
     stack: {
-      purchaseState: purchaseState,
       background_color: {
         light: {
           type: "hex",
-          value: "#09090b",
+          value: "#6c6c6cFF",
         },
       },
       labels: labelsData,
-      border: {
-        color: {
-          light: {
-            type: "hex",
-            value: "#3b393f",
-          },
-        },
-        width: 1,
-      },
+      purchaseState,
+      border: undefined,
       components: [
         {
           background_color: null,
           color: {
             light: {
               type: "hex",
-              value: "#ffffff",
+              value: "#ffffffFF",
             },
           },
-          labels: labelsData,
-          components: [],
           font_name: null,
-          font_size: "heading_s",
-          font_weight: "bold",
+          font_size: "body_m",
+          font_weight: "extra_bold",
           horizontal_alignment: "center",
-          id: "aSK4Jf1zd4",
+          id: "pFC3qrx4-c",
           margin: {
             bottom: 0,
             leading: 0,
             top: 0,
             trailing: 0,
           },
-          name: "Text",
+          name: "",
           padding: {
-            bottom: 0,
-            leading: 0,
-            top: 0,
-            trailing: 0,
+            bottom: 10,
+            leading: 10,
+            top: 10,
+            trailing: 10,
           },
           size: {
             height: {
@@ -98,124 +72,43 @@
               value: null,
             },
             width: {
-              type: "fit",
+              type: "fill",
               value: null,
             },
           },
-          text_lid: "BcX-6YwhoV",
+          text_lid: "GM2Sytqd5p",
           type: "text",
         },
-        {
-          background_color: {
-            light: {
-              type: "hex",
-              value: "#292631",
-            },
-          },
-          labels: labelsData,
-          border: null,
-          components: [
-            {
-              background_color: null,
-              color: {
-                light: {
-                  type: "hex",
-                  value: "#ffffff",
-                },
-              },
-              components: [],
-              font_name: null,
-              font_size: "body_m",
-              font_weight: "extra_bold",
-              horizontal_alignment: "center",
-              id: "unosKAXGp4",
-              margin: {
-                bottom: 0,
-                leading: 0,
-                top: 0,
-                trailing: 0,
-              },
-              name: "Text",
-              padding: {
-                bottom: 8,
-                leading: 16,
-                top: 8,
-                trailing: 16,
-              },
-              size: {
-                height: {
-                  type: "fit",
-                  value: null,
-                },
-                width: {
-                  type: "fit",
-                  value: null,
-                },
-              },
-              text_lid: "QZ4ZmYsqjN",
-              type: "text",
-            },
-          ],
-          dimension: {
-            alignment: "leading",
-            distribution: "space_between",
-            type: "vertical",
-          },
-          id: "-41AkrT2Ha",
-          margin: {
-            bottom: 0,
-            leading: 0,
-            top: 0,
-            trailing: 0,
-          },
-          name: "Stack",
-          padding: {
-            bottom: 0,
-            leading: 0,
-            top: 0,
-            trailing: 0,
-          },
-          shape: {
-            corners: {
-              bottom_leading: 8,
-              bottom_trailing: 8,
-              top_leading: 8,
-              top_trailing: 8,
-            },
-            type: "rectangle",
-          },
-          size: {
-            height: {
-              type: "fit",
-              value: null,
-            },
-            width: {
-              type: "fit",
-              value: null,
-            },
-          },
-          spacing: 8,
-          type: "stack",
-        },
       ],
       dimension: {
-        alignment: "center",
+        alignment: "top",
         distribution: "space_between",
-        type: "horizontal",
+        type: "vertical",
       },
-      id: "u0KZLUZTQT",
+      id: "yI_0xF4hlJ",
       margin: {
         bottom: 0,
-        leading: 16,
-        top: 16,
-        trailing: 16,
+        leading: 0,
+        top: 0,
+        trailing: 0,
       },
-      name: "Stack",
+      name: "Footer",
       padding: {
-        bottom: 16,
-        leading: 16,
-        top: 16,
-        trailing: 16,
+        bottom: 0,
+        leading: 0,
+        top: 0,
+        trailing: 0,
+      },
+      shadow: {
+        color: {
+          light: {
+            type: "hex",
+            value: "#00000033",
+          },
+        },
+        radius: 16,
+        x: 0,
+        y: -4,
       },
       shape: {
         corners: {
@@ -229,17 +122,16 @@
       size: {
         height: {
           type: "fit",
-          value: null,
         },
         width: {
-          type: "fixed",
-          value: 500,
+          type: "fill",
         },
       },
-      spacing: 8,
+      spacing: 0,
       type: "stack",
     },
+    type: "footer",
+    purchaseState: purchaseState,
     labels: labelsData,
-    type: "package",
   }}
 />

package/dist/components/footer/Footer.stories.svelte.d.ts

@@ -1,8 +1,7 @@
 import Footer from "./Footer.svelte";
 export declare const labelsData: {
     en_US: {
-        "BcX-6YwhoV": string;
-        QZ4ZmYsqjN: string;
+        GM2Sytqd5p: string;
     };
 };
 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> {

package/dist/components/footer/Footer.svelte

@@ -6,6 +6,15 @@
     $props();
 </script>
 
-<div class="footer" {id}>
+<div class="rc-pw-footer" {id}>
   <Stack {...stack} {labels} {purchaseState} {variableDictionary} />
 </div>
+
+<style>
+  .rc-pw-footer {
+    position: sticky;
+    bottom: 0;
+    transform: translateY(50%);
+    width: 100%;
+  }
+</style>

package/dist/components/footer/Footer.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { FooterProps } from "../../data/entities";
 declare const Footer: import("svelte").Component<FooterProps, {}, "">;
+type Footer = ReturnType<typeof Footer>;
 export default Footer;

package/dist/components/image/Image.stories.svelte

@@ -1,7 +1,14 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import Image from "./Image.svelte";
-  import { colorModeStoryMeta } from "../../stories/meta-templates";
+  import type { PurchaseState } from "../../data/state";
+  import type { ColorMode } from "../../types";
+
+  const purchaseState: PurchaseState = {
+    colorMode: "light" as ColorMode,
+    locale: "en_US",
+    defaultLocale: "en_US",
+  };
 
   const { Story } = defineMeta({
     title: "Components/Image",
@@ -13,7 +20,6 @@
         control: "object",
         description: "Gradient colors for the overlay",
       },
-      colorMode: colorModeStoryMeta,
       size: {
         control: "object",
         description: "Size configuration for the image",
@@ -39,6 +45,7 @@
 <Story
   name="Rectangle"
   args={{
+    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -54,7 +61,6 @@
         webp_low_res: "https://placehold.co/600x400",
       },
     },
-    colorMode: "light",
     mask_shape: { type: "rectangle" },
   }}
 />
@@ -62,6 +68,7 @@
 <Story
   name="Circle"
   args={{
+    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -77,7 +84,6 @@
         webp_low_res: "https://placehold.co/600x400",
       },
     },
-    colorMode: "light",
     mask_shape: { type: "circle" },
   }}
 />
@@ -85,6 +91,7 @@
 <Story
   name="Concave"
   args={{
+    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -100,7 +107,6 @@
         webp_low_res: "https://placehold.co/600x400",
       },
     },
-    colorMode: "light",
     mask_shape: { type: "concave" },
   }}
 />
@@ -108,6 +114,7 @@
 <Story
   name="Convex"
   args={{
+    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -123,7 +130,6 @@
         webp_low_res: "https://placehold.co/600x400",
       },
     },
-    colorMode: "light",
     mask_shape: { type: "convex" },
   }}
 />
@@ -131,6 +137,7 @@
 <Story
   name="Background Gradient"
   args={{
+    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -146,7 +153,6 @@
         webp_low_res: "https://placehold.co/600x400",
       },
     },
-    colorMode: "light",
     gradient_colors: [
       {
         dark: { type: "hex", value: "#FFFFFF80" },