@revenuecat/purchases-ui-js 3.4.1 → 3.5.0

package/dist/components/icon/Icon.svelte

@@ -57,13 +57,13 @@
       overflow: "hidden",
       "background-color": mapColor(colorMode, color),
       "mask-image": `url(${webpUrl})`,
-      "webkit-mask-image": `url(${webpUrl})`,
+      "-webkit-mask-image": `url(${webpUrl})`,
       "mask-size": "contain",
-      "webkit-mask-size": "contain",
+      "-webkit-mask-size": "contain",
       "mask-position": "center",
-      "webkit-mask-position": "center",
+      "-webkit-mask-position": "center",
       "mask-repeat": "no-repeat",
-      "webkit-mask-repeat": "no-repeat",
+      "-webkit-mask-repeat": "no-repeat",
     }),
   );
 </script>

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/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/components/workflows/Screen.svelte

@@ -4,7 +4,6 @@
   } from "../paywall/Paywall.svelte";
   import type { WorkflowScreen } from "../../types/workflow";
   import type { VariableDictionary } from "../../types/variables";
-  import { VARIABLES } from "../paywall/fixtures/variables";
   interface Props {
     paywallComponents: WorkflowScreen | null | undefined;
     selectedLocale?: string;
@@ -15,8 +14,10 @@
       packageId: string,
       actionId: string,
     ) => void | Promise<void>;
+    onBackClicked?: () => void;
     containerId?: string;
     maxContentWidth?: string;
+    variablesPerPackage?: Record<string, VariableDictionary>;
   }
   const {
     paywallComponents,
@@ -25,8 +26,10 @@
     globalVariables = {},
     onActionTriggered,
     onPurchaseClicked,
+    onBackClicked,
     containerId = "screen-container",
     maxContentWidth,
+    variablesPerPackage,
   }: Props = $props();
 </script>
 
@@ -36,12 +39,12 @@
       paywallData={paywallComponents}
       {selectedLocale}
       {uiConfig}
-      variablesPerPackage={VARIABLES}
+      {variablesPerPackage}
       {globalVariables}
       {maxContentWidth}
       onNavigateToUrlClicked={() => {}}
       onVisitCustomerCenterClicked={() => {}}
-      onBackClicked={() => {}}
+      {onBackClicked}
       onRestorePurchasesClicked={() => {}}
       onActionTriggered={(actionId: string) => {
         onActionTriggered?.(actionId);

package/dist/components/workflows/Screen.svelte.d.ts

@@ -8,8 +8,10 @@ interface Props {
     globalVariables?: VariableDictionary;
     onActionTriggered?: (actionId: string) => void;
     onPurchaseClicked?: (packageId: string, actionId: string) => void | Promise<void>;
+    onBackClicked?: () => void;
     containerId?: string;
     maxContentWidth?: string;
+    variablesPerPackage?: Record<string, VariableDictionary>;
 }
 declare const Screen: import("svelte").Component<Props, {}, "">;
 type Screen = ReturnType<typeof Screen>;

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/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.1",
+  "version": "3.5.0",
   "author": {
     "name": "RevenueCat, Inc."
   },