@revenuecat/purchases-ui-js 3.4.0 → 3.4.2

package/dist/components/options/InputMultipleChoice.svelte

@@ -1,9 +1,19 @@
 <script lang="ts">
   import Node from "../paywall/Node.svelte";
+  import {
+    createInputChoiceContext,
+    setInputChoiceContext,
+  } from "../../stores/inputChoice";
   import type { InputMultipleChoiceProps } from "../../types/components/options";
 
   const props: InputMultipleChoiceProps = $props();
-  const { stack } = props;
+  const { stack, field_id } = props;
+
+  const initialInputChoiceContext = createInputChoiceContext(
+    field_id,
+    "multiple",
+  );
+  setInputChoiceContext(initialInputChoiceContext);
 </script>
 
 <Node nodeData={stack} />

package/dist/components/options/InputOption.svelte

@@ -1,18 +1,45 @@
 <script lang="ts">
   import Stack from "../stack/Stack.svelte";
+  import { setHoverStateContext } from "../../stores/hover";
+  import { getInputChoiceContext } from "../../stores/inputChoice";
   import { getPaywallContext } from "../../stores/paywall";
+  import { setSelectedStateContext } from "../../stores/selected";
   import type { InputOptionProps } from "../../types/components/options";
+  import { derived, readable, writable } from "svelte/store";
 
   const props: InputOptionProps = $props();
-  const { stack } = props;
+  const { stack, option_id } = props;
 
   const { onButtonAction } = getPaywallContext();
+  const inputChoiceContext = getInputChoiceContext();
+
+  // Derive selected state from context (similar to Package)
+  const isSelected = inputChoiceContext
+    ? derived(inputChoiceContext.selectedOptionIds, (ids) => ids.has(option_id))
+    : readable(false);
+  setSelectedStateContext(isSelected);
+
+  const isHovered = writable(false);
+  setHoverStateContext(isHovered);
+
+  const onmouseenter = () => isHovered.set(true);
+  const onmouseleave = () => isHovered.set(false);
 
   const onclick = () => {
     const actionId = props.triggers?.on_press;
     // Create a workflow action to pass up through the callback
     onButtonAction({ type: "workflow" }, actionId);
+    inputChoiceContext?.selectOption(option_id);
   };
 </script>
 
-<Stack {...stack} {onclick} />
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="option-wrapper" {onmouseenter} {onmouseleave}>
+  <Stack {...stack} {onclick} />
+</div>
+
+<style>
+  .option-wrapper {
+    display: contents;
+  }
+</style>

package/dist/components/options/InputSingleChoice.svelte

@@ -1,9 +1,19 @@
 <script lang="ts">
   import Node from "../paywall/Node.svelte";
+  import {
+    createInputChoiceContext,
+    setInputChoiceContext,
+  } from "../../stores/inputChoice";
   import type { InputSingleChoiceProps } from "../../types/components/options";
 
   const props: InputSingleChoiceProps = $props();
-  const { stack } = props;
+  const { stack, field_id } = props;
+
+  const initialInputChoiceContext = createInputChoiceContext(
+    field_id,
+    "single",
+  );
+  setInputChoiceContext(initialInputChoiceContext);
 </script>
 
 <Node nodeData={stack} />

package/dist/components/paywall/Paywall.svelte

@@ -56,7 +56,10 @@
       },
     ) => {
       destroy?: () => void;
-      update?: (selectedPackageId: string) => void;
+      update?: (updateParams: {
+        selectedPackageId: string;
+        onReady?: () => void;
+      }) => void;
     };
     maxContentWidth?: string;
   }

package/dist/components/paywall/Paywall.svelte.d.ts

@@ -29,7 +29,10 @@ interface Props {
         onReady?: () => void;
     }) => {
         destroy?: () => void;
-        update?: (selectedPackageId: string) => void;
+        update?: (updateParams: {
+            selectedPackageId: string;
+            onReady?: () => void;
+        }) => void;
     };
     maxContentWidth?: string;
 }

package/dist/components/stack/Stack.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Node from "../paywall/Node.svelte";
   import { getColorModeContext } from "../../stores/color-mode";
+  import { getHoverStateContext } from "../../stores/hover";
   import { getSelectedStateContext } from "../../stores/selected";
   import type { StackProps } from "../../types/components/stack";
   import { mapBackground } from "../../utils/background-utils";
@@ -14,7 +15,10 @@
     px,
     type CSS,
   } from "../../utils/base-utils";
-  import { getActiveStateProps } from "../../utils/style-utils";
+  import {
+    getActiveStateProps,
+    getHoverStateProps,
+  } from "../../utils/style-utils";
   import type { Snippet } from "svelte";
   import { mapBadge, mapDimension, mapLayerAlignment } from "./stack-utils";
 
@@ -28,6 +32,7 @@
   const { onclick, children, style } = props;
 
   const selectedState = getSelectedStateContext();
+  const hoverState = getHoverStateContext();
   const {
     components,
     size,
@@ -44,6 +49,7 @@
   } = $derived.by(() => {
     return {
       ...props,
+      ...getHoverStateProps($hoverState, props.overrides),
       ...getActiveStateProps($selectedState, props.overrides),
     };
   });

package/dist/stores/hover.d.ts

@@ -0,0 +1,5 @@
+import { type Readable } from "svelte/store";
+type HoverContext = Readable<boolean>;
+export declare function setHoverStateContext(context: HoverContext): void;
+export declare function getHoverStateContext(): HoverContext;
+export {};

package/dist/stores/hover.js

@@ -0,0 +1,10 @@
+import { getContext, setContext } from "svelte";
+import { readable } from "svelte/store";
+const key = Symbol("hover");
+export function setHoverStateContext(context) {
+    setContext(key, context);
+}
+export function getHoverStateContext() {
+    const context = getContext(key);
+    return context ?? readable(false);
+}

package/dist/stores/inputChoice.d.ts

@@ -0,0 +1,12 @@
+import { type Readable } from "svelte/store";
+type SelectionMode = "single" | "multiple";
+interface InputChoiceContext {
+    fieldId: string;
+    mode: SelectionMode;
+    selectedOptionIds: Readable<Set<string>>;
+    selectOption: (optionId: string) => void;
+}
+export declare function createInputChoiceContext(fieldId: string, mode: SelectionMode): InputChoiceContext;
+export declare function setInputChoiceContext(context: InputChoiceContext): void;
+export declare function getInputChoiceContext(): InputChoiceContext | undefined;
+export {};

package/dist/stores/inputChoice.js

@@ -0,0 +1,37 @@
+import { getContext, setContext } from "svelte";
+import { writable } from "svelte/store";
+const key = Symbol("inputChoice");
+export function createInputChoiceContext(fieldId, mode) {
+    const selectedOptionIds = writable(new Set());
+    const selectOption = (optionId) => {
+        selectedOptionIds.update((current) => {
+            if (mode === "single") {
+                // Single select: replace with new selection
+                return new Set([optionId]);
+            }
+            else {
+                // Multiple select: toggle the option
+                const next = new Set(current);
+                if (next.has(optionId)) {
+                    next.delete(optionId);
+                }
+                else {
+                    next.add(optionId);
+                }
+                return next;
+            }
+        });
+    };
+    return {
+        fieldId,
+        mode,
+        selectedOptionIds,
+        selectOption,
+    };
+}
+export function setInputChoiceContext(context) {
+    setContext(key, context);
+}
+export function getInputChoiceContext() {
+    return getContext(key);
+}

package/dist/stores/paywall.d.ts

@@ -12,7 +12,10 @@ type PaywallContext = Readonly<{
         onReady?: () => void;
     }) => {
         destroy?: () => void;
-        update?: (selectedPackageId: string) => void;
+        update?: (params: {
+            selectedPackageId: string;
+            onReady?: () => void;
+        }) => void;
     };
     onButtonAction: (action: Action, actionId?: string) => void;
     uiConfig: UIConfig;

package/dist/stories/paywall-decorator.d.ts

@@ -4,5 +4,8 @@ export declare function paywallDecorator<TRenderer extends Renderer, TArgs>(wall
     onReady?: () => void;
 }) => {
     destroy?: () => void;
-    update?: (selectedPackageId: string) => void;
+    update?: (updateParams: {
+        selectedPackageId: string;
+        onReady?: () => void;
+    }) => void;
 }): DecoratorFunction<TRenderer, TArgs>;

package/dist/types/overrides.d.ts

@@ -11,6 +11,9 @@ type MultipleIntroOffersCondition = {
 type SelectedCondition = {
     type: "selected";
 };
+type HoverCondition = {
+    type: "hover";
+};
 type ScreenSizeCondition = {
     type: "screen_size";
     operator: ArrayOperator;
@@ -34,7 +37,7 @@ type SelectedPackageCondition = {
 type PromoOfferCondition = {
     type: "promo_offer";
 };
-type OverrideCondition = IntroOfferCondition | MultipleIntroOffersCondition | SelectedCondition | ScreenSizeCondition | OrientationCondition | IntroductoryOfferCondition | SelectedPackageCondition | PromoOfferCondition;
+type OverrideCondition = IntroOfferCondition | MultipleIntroOffersCondition | SelectedCondition | HoverCondition | ScreenSizeCondition | OrientationCondition | IntroductoryOfferCondition | SelectedPackageCondition | PromoOfferCondition;
 /**
  * The reserved properties of an override that should not be included in the override properties
  */

package/dist/utils/style-utils.d.ts

@@ -8,4 +8,5 @@ import type { RootPaywall } from "../types/paywall.js";
  */
 export declare function findSelectedPackageId({ stack, sticky_footer, }: RootPaywall): string | undefined;
 export declare const getActiveStateProps: <T extends Component>(selectedState: boolean, overrides?: Overrides<T>) => Partial<T>;
+export declare const getHoverStateProps: <T extends Component>(hoverState: boolean, overrides?: Overrides<T>) => Partial<T>;
 export declare const getIntroOfferStateProps: <T extends Component>(hasIntroOffer: boolean, overrides?: Overrides<T>) => Partial<T>;

package/dist/utils/style-utils.js

@@ -43,6 +43,13 @@ export const getActiveStateProps = (selectedState, overrides) => {
     const override = overrides?.find((override) => override.conditions.find((condition) => condition.type === "selected"));
     return override?.properties ?? {};
 };
+export const getHoverStateProps = (hoverState, overrides) => {
+    if (!hoverState) {
+        return {};
+    }
+    const override = overrides?.find((override) => override.conditions.find((condition) => condition.type === "hover"));
+    return override?.properties ?? {};
+};
 export const getIntroOfferStateProps = (hasIntroOffer, overrides) => {
     if (!hasIntroOffer) {
         return {};

package/package.json

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