@revenuecat/purchases-ui-js 2.0.5 → 2.0.6

package/dist/components/button/ButtonNode.svelte

@@ -29,8 +29,10 @@
         return true;
     }
   });
+
+  const style = $derived({
+    visibility: visible ? "visible" : "hidden",
+  });
 </script>
 
-{#if visible}
-  <Stack {...props.stack} {onclick} />
-{/if}
+<Stack {...props.stack} {onclick} {style} />

package/dist/components/paywall/Node.svelte

@@ -6,6 +6,7 @@
     PurchaseButton,
     Stack,
     Timeline,
+    Video,
   } from "../..";
   import ButtonNode from "../button/ButtonNode.svelte";
   import TextNode from "../text/TextNode.svelte";
@@ -15,6 +16,7 @@
   import Icon from "../icon/Icon.svelte";
   import TabControl from "../tabs/TabControl.svelte";
   import TabControlButton from "../tabs/TabControlButton.svelte";
+  import TabControlToggle from "../tabs/TabControlToggle.svelte";
   import Tabs from "../tabs/Tabs.svelte";
 
   interface Props {
@@ -31,10 +33,12 @@
     purchase_button: PurchaseButton,
     stack: Stack,
     tab_control_button: TabControlButton,
+    tab_control_toggle: TabControlToggle,
     tab_control: TabControl,
     tabs: Tabs,
     text: TextNode,
     timeline: Timeline,
+    video: Video,
   } satisfies {
     [key in Component["type"]]: SvelteComponent<
       Extract<Component, { type: key }>

package/dist/components/paywall/Paywall.svelte

@@ -19,8 +19,8 @@
   import { findSelectedPackageId } from "../../utils/style-utils";
   import { onMount } from "svelte";
   import { derived, readable, writable } from "svelte/store";
-  import Sheet from "./Sheet.svelte";
   import Stack from "../stack/Stack.svelte";
+  import Sheet from "./Sheet.svelte";
 
   interface Props {
     paywallData: PaywallData;
@@ -139,7 +139,7 @@
 </script>
 
 <svelte:boundary onerror={onError}>
-  <div id="paywall" class={paywallClass} {style}>
+  <div class={paywallClass} {style}>
     <Stack {...stack} />
 
     {#if sticky_footer}
@@ -159,9 +159,8 @@
     flex-direction: column;
     align-items: stretch;
     height: 100%;
-    overflow: hidden;
 
-    transition-property: filter transform;
+    transition-property: filter, transform;
     transition-duration: 0.1s;
     transition-timing-function: ease-in-out;
     transform-origin: center;

package/dist/components/stack/Stack.svelte

@@ -12,6 +12,7 @@
     mapSize,
     mapSpacing,
     px,
+    type CSS,
   } from "../../utils/base-utils";
   import { getActiveStateProps } from "../../utils/style-utils";
   import type { Snippet } from "svelte";
@@ -20,10 +21,11 @@
   interface MiscProps {
     onclick?: () => void;
     children?: Snippet;
+    style?: CSS;
   }
 
   const props: StackProps & MiscProps = $props();
-  const { onclick, children } = props;
+  const { onclick, children, style } = props;
 
   const selectedState = getSelectedStateContext();
   const {
@@ -49,8 +51,9 @@
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
 
-  const style = $derived(
+  const stackStyle = $derived(
     css({
+      ...style,
       display: "flex",
       position: "relative",
       width: mapSize(size.width),
@@ -91,7 +94,7 @@
   this={onclick !== undefined ? "button" : "div"}
   role={onclick !== undefined ? "button" : undefined}
   {onclick}
-  {style}
+  style={stackStyle}
   class="stack"
 >
   {#if badge}

package/dist/components/stack/Stack.svelte.d.ts

@@ -1,8 +1,10 @@
 import type { StackProps } from "../../types/components/stack";
+import { type CSS } from "../../utils/base-utils";
 import type { Snippet } from "svelte";
 interface MiscProps {
     onclick?: () => void;
     children?: Snippet;
+    style?: CSS;
 }
 type $$ComponentProps = StackProps & MiscProps;
 declare const Stack: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/tabs/TabControlToggle.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import { getColorModeContext } from "../../stores/color-mode";
+  import {
+    getSelectedStateContext,
+    setSelectedStateContext,
+  } from "../../stores/selected";
+  import type { TabControlToggleProps } from "../../types/components/tabs";
+  import { css, mapColor } from "../../utils/base-utils";
+  import { getActiveStateProps } from "../../utils/style-utils";
+  import { getTabsContext } from "./tabs-context";
+
+  const props: TabControlToggleProps = $props();
+
+  const selectedState = getSelectedStateContext();
+  const {
+    default_value,
+    thumb_color_on,
+    thumb_color_off,
+    track_color_on,
+    track_color_off,
+  } = $derived.by(() => {
+    return {
+      ...props,
+      ...getActiveStateProps($selectedState, props.overrides),
+    };
+  });
+
+  const { isActive, selectTab } = getTabsContext();
+  setSelectedStateContext(isActive);
+
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
+
+  const toggleStyle = $derived(
+    css({
+      background: $isActive
+        ? mapColor(colorMode, track_color_on)
+        : mapColor(colorMode, track_color_off),
+    }),
+  );
+
+  const thumbStyle = $derived(
+    css({
+      left: $isActive ? "22px" : "2px",
+      background: $isActive
+        ? mapColor(colorMode, thumb_color_on)
+        : mapColor(colorMode, thumb_color_off),
+    }),
+  );
+
+  const onclick = () => {
+    selectTab("", $isActive ? 0 : 1);
+  };
+
+  const onkeydown = (event: KeyboardEvent) => {
+    if (event.code === "Enter" || event.code === "Space") {
+      onclick();
+    }
+  };
+</script>
+
+<div
+  role="button"
+  tabindex="0"
+  aria-label="Toggle"
+  class="toggle"
+  style={toggleStyle}
+  {onclick}
+  {onkeydown}
+>
+  <div class="thumb" style={thumbStyle}></div>
+</div>
+
+<style>
+  .toggle {
+    appearance: none;
+
+    --height: 31px;
+
+    position: relative;
+    width: 51px;
+    height: var(--height);
+    border-radius: calc(var(--height) / 2);
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 300ms ease;
+  }
+
+  .thumb {
+    --size: 27px;
+    position: absolute;
+    top: 2px;
+    width: var(--size);
+    height: var(--size);
+    border-radius: 50%;
+    box-shadow:
+      0 1px 3px rgba(0, 0, 0, 0.2),
+      0 1px 2px rgba(0, 0, 0, 0.12);
+    transition:
+      left 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
+      background-color 300ms ease;
+  }
+</style>

package/dist/components/tabs/TabControlToggle.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TabControlToggleProps } from "../../types/components/tabs";
+declare const TabControlToggle: import("svelte").Component<TabControlToggleProps, {}, "">;
+type TabControlToggle = ReturnType<typeof TabControlToggle>;
+export default TabControlToggle;

package/dist/components/tabs/Tabs.stories.svelte

@@ -927,3 +927,442 @@
     type: "tabs",
   }}
 />
+
+<Story
+  name="Toggle"
+  decorators={[
+    componentDecorator(),
+    localizationDecorator({
+      defaultLocale,
+      localizations: {
+        [defaultLocale]: {
+          "9snr-lp9lS": "Show family plans",
+          izPmeYOm4j: "Show family plans",
+        },
+      },
+    }),
+  ]}
+  args={{
+    background: null,
+    control: {
+      stack: {
+        background: null,
+        background_color: null,
+        badge: null,
+        border: null,
+        components: [
+          {
+            default_value: true,
+            id: "gVAl7ORI44",
+            name: "",
+            thumb_color_off: {
+              light: {
+                type: "hex",
+                value: "#FFFFFF",
+              },
+            },
+            thumb_color_on: {
+              light: {
+                type: "hex",
+                value: "#FFFFFF",
+              },
+            },
+            track_color_off: {
+              light: {
+                type: "hex",
+                value: "#e1e1e5ff",
+              },
+            },
+            track_color_on: {
+              light: {
+                type: "hex",
+                value: "#576CDBff",
+              },
+            },
+            type: "tab_control_toggle",
+          },
+        ],
+        dimension: {
+          alignment: "leading",
+          distribution: "start",
+          type: "vertical",
+        },
+        id: "hIpAw5JTtG",
+        margin: {
+          bottom: 0,
+          leading: 0,
+          top: 0,
+          trailing: 0,
+        },
+        name: "",
+        padding: {
+          bottom: 0,
+          leading: 0,
+          top: 0,
+          trailing: 0,
+        },
+        shadow: null,
+        shape: {
+          corners: {
+            bottom_leading: 0,
+            bottom_trailing: 0,
+            top_leading: 0,
+            top_trailing: 0,
+          },
+          type: "rectangle",
+        },
+        size: {
+          height: {
+            type: "fit",
+            value: null,
+          },
+          width: {
+            type: "fit",
+            value: null,
+          },
+        },
+        spacing: 0,
+        type: "stack",
+      },
+      type: "toggle",
+    },
+    default_tab_id: "gi3qRZrSKa",
+    id: "zRnUSrsOhj",
+    margin: {
+      bottom: 0,
+      leading: 0,
+      top: 0,
+      trailing: 0,
+    },
+    name: "",
+    padding: {
+      bottom: 16,
+      leading: 16,
+      top: 16,
+      trailing: 16,
+    },
+    shape: {
+      corners: {
+        bottom_leading: 0,
+        bottom_trailing: 0,
+        top_leading: 0,
+        top_trailing: 0,
+      },
+      type: "rectangle",
+    },
+    size: {
+      height: {
+        type: "fit",
+        value: null,
+      },
+      width: {
+        type: "fill",
+        value: null,
+      },
+    },
+    tabs: [
+      {
+        id: "MEOs13s6G8",
+        name: "OFF",
+        stack: {
+          background: null,
+          background_color: null,
+          badge: null,
+          border: null,
+          components: [
+            {
+              background: {
+                type: "color",
+                value: {
+                  light: {
+                    type: "hex",
+                    value: "#f7f7faff",
+                  },
+                },
+              },
+              background_color: null,
+              badge: null,
+              border: null,
+              components: [
+                {
+                  background_color: null,
+                  color: {
+                    light: {
+                      type: "hex",
+                      value: "#000000e6",
+                    },
+                  },
+                  font_name: null,
+                  font_size: 14,
+                  font_weight: "regular",
+                  font_weight_int: 400,
+                  horizontal_alignment: "leading",
+                  id: "By5e8IBSbf",
+                  margin: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                  },
+                  name: "",
+                  padding: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                  },
+                  size: {
+                    height: {
+                      type: "fit",
+                      value: null,
+                    },
+                    width: {
+                      type: "fit",
+                      value: null,
+                    },
+                  },
+                  text_lid: "9snr-lp9lS",
+                  type: "text",
+                },
+                {
+                  id: "ZRerJx5wLi",
+                  name: "",
+                  type: "tab_control",
+                },
+              ],
+              dimension: {
+                alignment: "center",
+                distribution: "space_between",
+                type: "horizontal",
+              },
+              id: "ATrU9MBBJx",
+              margin: {
+                bottom: 0,
+                leading: 16,
+                top: 0,
+                trailing: 16,
+              },
+              name: "Switch stack",
+              padding: {
+                bottom: 8,
+                leading: 24,
+                top: 8,
+                trailing: 8,
+              },
+              shadow: null,
+              shape: {
+                corners: null,
+                type: "pill",
+              },
+              size: {
+                height: {
+                  type: "fit",
+                  value: null,
+                },
+                width: {
+                  type: "fit",
+                  value: null,
+                },
+              },
+              spacing: 24,
+              type: "stack",
+            },
+          ],
+          dimension: {
+            alignment: "center",
+            distribution: "center",
+            type: "vertical",
+          },
+          id: "tj1QOsrpFb",
+          margin: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          name: "Tab",
+          padding: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          shadow: null,
+          shape: {
+            corners: {
+              bottom_leading: 0,
+              bottom_trailing: 0,
+              top_leading: 0,
+              top_trailing: 0,
+            },
+            type: "rectangle",
+          },
+          size: {
+            height: {
+              type: "fit",
+              value: null,
+            },
+            width: {
+              type: "fill",
+              value: null,
+            },
+          },
+          spacing: 16,
+          type: "stack",
+        },
+        type: "tab",
+      },
+      {
+        id: "gi3qRZrSKa",
+        name: "ON",
+        stack: {
+          background: null,
+          background_color: null,
+          border: null,
+          components: [
+            {
+              background: {
+                type: "color",
+                value: {
+                  light: {
+                    type: "hex",
+                    value: "#f7f7faff",
+                  },
+                },
+              },
+              background_color: null,
+              badge: null,
+              border: null,
+              components: [
+                {
+                  background_color: null,
+                  color: {
+                    light: {
+                      type: "hex",
+                      value: "#000000e6",
+                    },
+                  },
+                  font_name: null,
+                  font_size: 14,
+                  font_weight: "regular",
+                  font_weight_int: 400,
+                  horizontal_alignment: "leading",
+                  id: "xs9GkrXsl9",
+                  margin: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                  },
+                  name: "",
+                  padding: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                  },
+                  size: {
+                    height: {
+                      type: "fit",
+                      value: null,
+                    },
+                    width: {
+                      type: "fit",
+                      value: null,
+                    },
+                  },
+                  text_lid: "izPmeYOm4j",
+                  type: "text",
+                },
+                {
+                  id: "XMUc_WOeWO",
+                  name: "",
+                  type: "tab_control",
+                },
+              ],
+              dimension: {
+                alignment: "center",
+                distribution: "space_between",
+                type: "horizontal",
+              },
+              id: "PNnFNzZU4M",
+              margin: {
+                bottom: 0,
+                leading: 16,
+                top: 0,
+                trailing: 16,
+              },
+              name: "Switch stack",
+              padding: {
+                bottom: 8,
+                leading: 24,
+                top: 8,
+                trailing: 8,
+              },
+              shadow: null,
+              shape: {
+                corners: null,
+                type: "pill",
+              },
+              size: {
+                height: {
+                  type: "fit",
+                  value: null,
+                },
+                width: {
+                  type: "fit",
+                  value: null,
+                },
+              },
+              spacing: 24,
+              type: "stack",
+            },
+          ],
+          dimension: {
+            alignment: "center",
+            distribution: "center",
+            type: "vertical",
+          },
+          id: "Q6oIOhxGOB",
+          margin: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          name: "Tab",
+          padding: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          shadow: null,
+          shape: {
+            corners: {
+              bottom_leading: 0,
+              bottom_trailing: 0,
+              top_leading: 0,
+              top_trailing: 0,
+            },
+            type: "rectangle",
+          },
+          size: {
+            height: {
+              type: "fit",
+              value: null,
+            },
+            width: {
+              type: "fill",
+              value: null,
+            },
+          },
+          spacing: 16,
+          type: "stack",
+        },
+        type: "tab",
+      },
+    ],
+    type: "tabs",
+  }}
+/>

package/dist/components/tabs/Tabs.svelte

@@ -44,14 +44,20 @@
     }),
   );
 
-  const tab = writable(
-    tabs.find((tab) => tab.id === default_tab_id) ?? tabs.at(0),
+  const selectedTabIndex = writable(
+    Math.max(
+      0,
+      tabs.findIndex((tab) => tab.id === default_tab_id),
+    ),
   );
 
+  const tab = derived(selectedTabIndex, (value) => tabs[value]);
+
   const selectTab: SelectTab = (tabId, tabIndex) => {
-    const nextTab = tabs.find((tab) => tab.id === tabId) ?? tabs.at(tabIndex);
-    if (nextTab !== undefined) {
-      tab.set(nextTab);
+    const foundIndex = tabs.findIndex((tab) => tab.id === tabId);
+    const nextIndex = foundIndex !== -1 ? foundIndex : tabIndex;
+    if (nextIndex >= 0 && nextIndex < tabs.length) {
+      selectedTabIndex.set(tabIndex);
     }
   };
 
@@ -59,6 +65,7 @@
     control: readable(control),
     selectedTabId: derived(tab, (tab) => tab.id),
     selectTab,
+    isActive: derived(selectedTabIndex, (value) => value === 1),
   });
 </script>