@revenuecat/purchases-ui-js 3.5.3 → 3.5.4

package/dist/components/express-purchase-button/ExpressPurchaseButton.stories.svelte

@@ -233,7 +233,17 @@
       type: "express_purchase_button",
       id: "express_purchase_button",
       name: "ExpressPurchaseButton",
-
+      size: {
+        width: { type: "fill" },
+        height: { type: "fit" },
+      },
+      padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+      margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+      shape: null,
+      shadow: null,
+      background: null,
+      border: null,
+      overrides: [],
       wallet_available_stack: {
         type: "stack",
         id: "wallet-available-stack",
@@ -366,3 +376,43 @@
   ]}
   args={{}}
 />
+
+<Story
+  name="Parent Stack Props"
+  decorators={[
+    paywallDecorator(
+      createWalletButtonRender({ available: false, delay: 1000 }),
+      "some-package-id",
+    ),
+  ]}
+  args={{
+    background: {
+      type: "color",
+      value: {
+        light: {
+          type: "hex",
+          value: "#a229d2",
+        },
+      },
+    },
+    padding: { top: 10, leading: 20, bottom: 30, trailing: 40 },
+    margin: { top: 10, leading: 20, bottom: 30, trailing: 40 },
+    shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 10,
+        top_trailing: 20,
+        bottom_leading: 30,
+        bottom_trailing: 40,
+      },
+    },
+    border: { width: 3, color: { light: { type: "hex", value: "#000000" } } },
+    shadow: {
+      x: 10,
+      y: 20,
+      radius: 20,
+      color: { light: { type: "hex", value: "#000000" } },
+    },
+    size: { width: { type: "fixed", value: 500 }, height: { type: "fit" } },
+  }}
+/>

package/dist/components/express-purchase-button/ExpressPurchaseButton.svelte

@@ -2,12 +2,15 @@
   import Stack from "../stack/Stack.svelte";
   import { getPaywallContext, setPaywallContext } from "../../stores/paywall";
   import type { ExpressPurchaseButtonProps } from "../../types/components/express-purchase-button-props";
+  import type { StackProps } from "../../types/components/stack";
 
   const props: ExpressPurchaseButtonProps = $props();
   const {
     wallet_unknown_stack,
     wallet_available_stack,
     wallet_unavailable_stack,
+    type,
+    ...partialStackProps
   } = props;
 
   const { walletButtonRender, ...rest } = getPaywallContext();
@@ -32,12 +35,30 @@
         !shouldShowWalletSkeleton,
     ),
   );
+
+  const wrapperStackProps: StackProps = {
+    components: [],
+    type: "stack",
+    visible: null,
+    dimension: {
+      type: "vertical",
+      distribution: "start",
+      alignment: "center",
+    },
+    background_color: null,
+    spacing: 0,
+    ...partialStackProps,
+  };
 </script>
 
-<Stack {...{ ...wallet_available_stack, visible: shouldShowAvailableStack }} />
+<Stack {...wrapperStackProps}>
+  <Stack
+    {...{ ...wallet_available_stack, visible: shouldShowAvailableStack }}
+  />
 
-{#if shouldShowWalletSkeleton}
-  <Stack {...wallet_unknown_stack} />
-{:else if shouldShowUnavailableStack}
-  <Stack {...wallet_unavailable_stack} />
-{/if}
+  {#if shouldShowWalletSkeleton}
+    <Stack {...wallet_unknown_stack} />
+  {:else if shouldShowUnavailableStack}
+    <Stack {...wallet_unavailable_stack} />
+  {/if}
+</Stack>

package/dist/components/paywall/fixtures/express-purchase-button-paywall.d.ts

@@ -1207,6 +1207,31 @@ export declare const DUELINGUE_PAYWALL: {
                             type: "express_purchase_button";
                             id: string;
                             name: string;
+                            size: {
+                                width: {
+                                    type: "fill";
+                                };
+                                height: {
+                                    type: "fit";
+                                };
+                            };
+                            padding: {
+                                top: number;
+                                leading: number;
+                                trailing: number;
+                                bottom: number;
+                            };
+                            margin: {
+                                top: number;
+                                trailing: number;
+                                bottom: number;
+                                leading: number;
+                            };
+                            shape: null;
+                            shadow: null;
+                            background: null;
+                            border: null;
+                            overrides: never[];
                             wallet_available_stack: {
                                 type: "stack";
                                 id: string;

package/dist/components/paywall/fixtures/express-purchase-button-paywall.js

@@ -1226,6 +1226,31 @@ export const DUELINGUE_PAYWALL = {
                                         type: "express_purchase_button",
                                         id: "express_purchase_button",
                                         name: "ExpressPurchaseButton",
+                                        size: {
+                                            width: {
+                                                type: "fill",
+                                            },
+                                            height: {
+                                                type: "fit",
+                                            },
+                                        },
+                                        padding: {
+                                            top: 0,
+                                            leading: 0,
+                                            trailing: 0,
+                                            bottom: 0,
+                                        },
+                                        margin: {
+                                            top: 0,
+                                            trailing: 0,
+                                            bottom: 0,
+                                            leading: 0,
+                                        },
+                                        shape: null,
+                                        shadow: null,
+                                        background: null,
+                                        border: null,
+                                        overrides: [],
                                         wallet_available_stack: {
                                             type: "stack",
                                             id: "wallet-available-stack",

package/dist/types/components/express-purchase-button-props.d.ts

@@ -1,8 +1,19 @@
 import type { BaseComponent } from "../base";
 import type { StackProps } from "./stack";
+import type { BorderType, ShadowType, ShapeType, SizeType, Spacing } from "../..";
+import type { Background } from "../background";
+import type { Overrides } from "../overrides";
 export interface ExpressPurchaseButtonProps extends BaseComponent {
     type: "express_purchase_button";
     wallet_unknown_stack: StackProps;
     wallet_available_stack: StackProps;
     wallet_unavailable_stack: StackProps;
+    size: SizeType;
+    padding: Spacing;
+    margin: Spacing;
+    shape: ShapeType | null;
+    shadow: ShadowType | null;
+    background: Background | null;
+    border: BorderType | null;
+    overrides?: Overrides<StackProps>;
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "3.5.3",
+  "version": "3.5.4",
   "author": {
     "name": "RevenueCat, Inc."
   },