@revenuecat/purchases-ui-js 2.0.4 → 2.0.6

package/dist/components/paywall/fixtures/sheet-paywall.js

@@ -0,0 +1,325 @@
+export const SHEET_PAYWALL = {
+    default_locale: "en_US",
+    components_localizations: {
+        en_US: {
+            "5GWqi3MXpt": "Sheet",
+            E6CK5Xd1cE: "Sheet button",
+        },
+    },
+    components_config: {
+        base: {
+            background: {
+                type: "color",
+                value: {
+                    light: {
+                        type: "hex",
+                        value: "#ffffffff",
+                    },
+                },
+            },
+            stack: {
+                background: null,
+                background_color: null,
+                badge: null,
+                border: null,
+                components: [
+                    {
+                        action: {
+                            destination: "sheet",
+                            sheet: {
+                                background: null,
+                                background_blur: true,
+                                id: "ByNqcHZCBa",
+                                name: "",
+                                position: "bottom",
+                                size: {
+                                    height: {
+                                        type: "relative",
+                                        value: 0.5,
+                                    },
+                                    width: {
+                                        type: "fill",
+                                        value: null,
+                                    },
+                                },
+                                stack: {
+                                    background: {
+                                        type: "color",
+                                        value: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#ddffddff",
+                                            },
+                                        },
+                                    },
+                                    background_color: null,
+                                    badge: null,
+                                    border: {
+                                        color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#00aa00ff",
+                                            },
+                                        },
+                                        width: 3,
+                                    },
+                                    components: [
+                                        {
+                                            background_color: null,
+                                            color: {
+                                                light: {
+                                                    type: "hex",
+                                                    value: "#000000",
+                                                },
+                                            },
+                                            font_name: null,
+                                            font_size: 32,
+                                            font_weight: "regular",
+                                            font_weight_int: 400,
+                                            horizontal_alignment: "leading",
+                                            id: "_SFE-Jfx2H",
+                                            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: "5GWqi3MXpt",
+                                            type: "text",
+                                        },
+                                    ],
+                                    dimension: {
+                                        alignment: "center",
+                                        distribution: "center",
+                                        type: "vertical",
+                                    },
+                                    id: "vtyGD4yg8U",
+                                    margin: {
+                                        bottom: 0,
+                                        leading: 32,
+                                        top: 0,
+                                        trailing: 32,
+                                    },
+                                    name: "Sheet Content",
+                                    padding: {
+                                        bottom: 32,
+                                        leading: 32,
+                                        top: 32,
+                                        trailing: 32,
+                                    },
+                                    shadow: {
+                                        color: {
+                                            light: {
+                                                type: "hex",
+                                                value: "#ff000040",
+                                            },
+                                        },
+                                        radius: 16,
+                                        x: 0,
+                                        y: -8,
+                                    },
+                                    shape: {
+                                        corners: {
+                                            bottom_leading: 0,
+                                            bottom_trailing: 0,
+                                            top_leading: 32,
+                                            top_trailing: 32,
+                                        },
+                                        type: "rectangle",
+                                    },
+                                    size: {
+                                        height: {
+                                            type: "fill",
+                                            value: null,
+                                        },
+                                        width: {
+                                            type: "fill",
+                                            value: null,
+                                        },
+                                    },
+                                    spacing: 0,
+                                    type: "stack",
+                                },
+                                type: "sheet",
+                            },
+                            type: "navigate_to",
+                        },
+                        id: "dTnaiaphr5",
+                        name: "",
+                        stack: {
+                            background: {
+                                type: "color",
+                                value: {
+                                    light: {
+                                        type: "hex",
+                                        value: "#ddffddff",
+                                    },
+                                },
+                            },
+                            background_color: null,
+                            badge: null,
+                            border: {
+                                color: {
+                                    light: {
+                                        type: "hex",
+                                        value: "#00aa00ff",
+                                    },
+                                },
+                                width: 1,
+                            },
+                            components: [
+                                {
+                                    background_color: null,
+                                    color: {
+                                        light: {
+                                            type: "hex",
+                                            value: "#000000",
+                                        },
+                                    },
+                                    font_name: null,
+                                    font_size: 14,
+                                    font_weight: "regular",
+                                    font_weight_int: 400,
+                                    horizontal_alignment: "leading",
+                                    id: "o7XZa4SJLW",
+                                    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: "E6CK5Xd1cE",
+                                    type: "text",
+                                },
+                            ],
+                            dimension: {
+                                alignment: "leading",
+                                distribution: "start",
+                                type: "vertical",
+                            },
+                            id: "el3qmQd6hR",
+                            margin: {
+                                bottom: 0,
+                                leading: 0,
+                                top: 0,
+                                trailing: 0,
+                            },
+                            name: "",
+                            padding: {
+                                bottom: 16,
+                                leading: 16,
+                                top: 16,
+                                trailing: 16,
+                            },
+                            shadow: {
+                                color: {
+                                    light: {
+                                        type: "hex",
+                                        value: "#ff000040",
+                                    },
+                                },
+                                radius: 16,
+                                x: 8,
+                                y: 8,
+                            },
+                            shape: {
+                                corners: null,
+                                type: "pill",
+                            },
+                            size: {
+                                height: {
+                                    type: "fit",
+                                    value: null,
+                                },
+                                width: {
+                                    type: "fit",
+                                    value: null,
+                                },
+                            },
+                            spacing: 0,
+                            type: "stack",
+                        },
+                        transition: null,
+                        type: "button",
+                    },
+                ],
+                dimension: {
+                    alignment: "center",
+                    distribution: "start",
+                    type: "vertical",
+                },
+                id: "rocJhuHfiP",
+                margin: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                },
+                name: "Content",
+                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",
+            },
+            sticky_footer: null,
+        },
+    },
+};

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/TabControl.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { TabControlProps } from "../../types/components/tabs";
+  import Stack from "../stack/Stack.svelte";
+  import { getTabsContext } from "./tabs-context";
+
+  const _: TabControlProps = $props();
+
+  const { control } = getTabsContext();
+</script>
+
+<Stack {...$control.stack} />

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

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

package/dist/components/tabs/TabControlButton.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { setSelectedStateContext } from "../../stores/selected";
+  import type { TabControlButtonProps } from "../../types/components/tabs";
+  import { derived } from "svelte/store";
+  import Stack from "../stack/Stack.svelte";
+  import { getTabsContext } from "./tabs-context";
+
+  const { stack, tab_id, tab_index }: TabControlButtonProps = $props();
+
+  const { selectedTabId, selectTab } = getTabsContext();
+
+  setSelectedStateContext(derived(selectedTabId, (value) => value === tab_id));
+
+  const onclick = () => {
+    selectTab(tab_id, tab_index);
+  };
+</script>
+
+<Stack {...stack} {onclick}></Stack>

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

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

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;