@revenuecat/purchases-ui-js 3.11.2 → 3.11.4

package/dist/components/icon/Icon.stories.svelte

@@ -98,3 +98,25 @@
     },
   }}
 />
+
+<Story
+  name="Border"
+  args={{
+    icon_background: {
+      ...icon_background,
+      border: {
+        width: 10,
+        color: {
+          light: {
+            type: "linear",
+            degrees: 90,
+            points: [
+              { color: "#000000", percent: 0 },
+              { color: "#FF0000", percent: 100 },
+            ],
+          },
+        },
+      },
+    },
+  }}
+/>

package/dist/components/icon/Icon.svelte

@@ -40,7 +40,7 @@
       margin: mapSpacing(margin),
       padding: mapSpacing(padding),
       "background-color": mapColor(colorMode, background?.color),
-      border: mapBorder(colorMode, background?.border),
+      ...mapBorder(colorMode, background?.border),
       "border-radius": mapBorderRadius(background?.shape),
       "box-shadow": mapShadow(colorMode, background?.shadow),
       flex: "0 0 auto",
@@ -68,6 +68,6 @@
   );
 </script>
 
-<div style={container}>
+<div class="rc-gradient-border" style={container}>
   <div style={icon}></div>
 </div>

package/dist/components/image/Image.stories.svelte

@@ -183,3 +183,22 @@
     },
   }}
 />
+
+<Story
+  name="Border"
+  args={{
+    border: {
+      width: 10,
+      color: {
+        light: {
+          type: "linear",
+          degrees: 90,
+          points: [
+            { color: "#000000", percent: 0 },
+            { color: "#FF0000", percent: 100 },
+          ],
+        },
+      },
+    },
+  }}
+/>

package/dist/components/image/Image.svelte

@@ -132,6 +132,12 @@
       </g>
 
       <Overlay id={`${id}-overlay`} {overlay} />
+      {#if border && border.width > 0}
+        <Overlay
+          id={`${id}-border-color`}
+          overlay={mapColorMode(colorMode, border.color)}
+        />
+      {/if}
     </defs>
 
     {#if border && border.width > 0}
@@ -161,8 +167,8 @@
         <use
           href={`#${id}-border`}
           fill="none"
-          stroke={mapColor(colorMode, border.color)}
-          stroke-width={border.width}
+          stroke={`url(#${id}-border-color)`}
+          stroke-width={border.width * 2}
         />
       {/if}
     </g>

package/dist/components/input-text/InputText.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   import { getColorModeContext } from "../../stores/color-mode";
-  import { getHoverStateContext } from "../../stores/hover";
   import { getLocalizationContext } from "../../stores/localization";
-  import { getPackageInfoContext } from "../../stores/packageInfo";
   import { getPaywallContext } from "../../stores/paywall";
-  import { getSelectedStateContext } from "../../stores/selected";
   import { getVariablesContext } from "../../stores/variables";
   import { FontWeights, TextAlignments } from "../../types";
-  import type { InputTextProps } from "../../types/components/input-text";
+  import type {
+    InputTextKeyboardType,
+    InputTextProps,
+  } from "../../types/components/input-text";
   import { mapBackground } from "../../utils/background-utils";
   import {
     css,
@@ -22,20 +22,18 @@
     isFontRCFMManaged,
   } from "../../utils/font-utils";
   import {
-    evaluateVisibilityConditions,
-    getActiveStateProps,
-    getHoverStateProps,
+    getErrorStateProps,
+    getFocusStateProps,
   } from "../../utils/style-utils";
   import { replaceVariables } from "../../utils/variable-utils";
-  import type { HTMLInputAttributes } from "svelte/elements";
+  import type { FormEventHandler, HTMLInputAttributes } from "svelte/elements";
   import { mapTextColor } from "../text/text-utils";
 
   const props: InputTextProps = $props();
 
-  console.log("Hello");
+  let focused = $state(false);
+  let error = $state(false);
 
-  const selectedState = getSelectedStateContext();
-  const hoverState = getHoverStateContext();
   const {
     placeholder_lid,
     keyboard_type,
@@ -62,15 +60,49 @@
   } = $derived.by(() => {
     return {
       ...props,
-      ...getHoverStateProps($hoverState, props.overrides),
-      ...getActiveStateProps($selectedState, props.overrides),
+      ...getFocusStateProps(focused, props.overrides),
+      ...getErrorStateProps(error, props.overrides),
     };
   });
 
+  function handleValueChange(input: HTMLInputElement) {
+    error = !input.validity.valid;
+    if (error) {
+      return;
+    }
+
+    const value = input.value.trim();
+    onInputChanged?.(field_id, value);
+  }
+
+  const oninput: FormEventHandler<HTMLInputElement> = (event) => {
+    if (error) {
+      handleValueChange(event.currentTarget);
+    }
+  };
+
+  const onblur: FormEventHandler<HTMLInputElement> = (event) => {
+    focused = false;
+    handleValueChange(event.currentTarget);
+  };
+
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
   const { uiConfig, onInputChanged } = getPaywallContext();
 
+  const wrapperStyle = $derived(
+    css({
+      display: props.visible === false ? "none" : "flex",
+      width: mapSize(size.width),
+      height: mapSize(size.height),
+      margin: mapSpacing(margin),
+      ...mapBackground(colorMode, background_color, null),
+      ...mapBorder(colorMode, border),
+      "border-radius": mapBorderRadius(shape),
+      "box-shadow": mapShadow(colorMode, shadow),
+    }),
+  );
+
   const inputStyle = $derived.by(() => {
     const font = uiConfig.app.fonts[font_name ?? ""];
     const fontFamily = font?.web?.family;
@@ -79,17 +111,7 @@
     const placeholderColor = mapTextColor(colorMode, placeholder_color);
 
     return css({
-      display: props.visible === false ? "none" : "flex",
-      position: "relative",
-      width: mapSize(size.width),
-      height: mapSize(size.height),
-      margin: mapSpacing(margin),
       padding: mapSpacing(padding),
-      ...mapBackground(colorMode, background_color, null),
-      border: mapBorder(colorMode, border),
-      "border-radius": mapBorderRadius(shape),
-      "box-shadow": mapShadow(colorMode, shadow),
-
       ...mapTextColor(colorMode, color),
       "text-align":
         TextAlignments[horizontal_alignment] || TextAlignments.leading,
@@ -135,21 +157,39 @@
         return "tel";
       case "text":
         return "text";
+      case "url":
+        return "url";
     }
   });
 </script>
 
-<input
-  {type}
-  {placeholder}
-  {required}
-  inputmode={keyboard_type}
-  autocapitalize={capitalize}
-  style={inputStyle}
-  oninput={(event) => onInputChanged?.(field_id, event.currentTarget.value)}
-/>
+<div class="rc-gradient-border" style={wrapperStyle}>
+  <input
+    {type}
+    {placeholder}
+    {required}
+    inputmode={keyboard_type}
+    autocapitalize={capitalize}
+    style={inputStyle}
+    {oninput}
+    onfocus={() => (focused = true)}
+    {onblur}
+  />
+</div>
 
 <style>
+  input {
+    width: 100%;
+    height: 100%;
+    border: none;
+    background: transparent;
+    border-radius: inherit;
+  }
+
+  input:focus-visible {
+    outline: none;
+  }
+
   input::placeholder {
     color: var(--placeholder-color);
     background: var(--placeholder-background);

package/dist/components/options/InputMultipleChoice.stories.svelte

@@ -72,10 +72,16 @@
         },
         background: null,
         border: {
-          width: 1,
+          width: 10,
           color: {
-            light: { type: "hex", value: "#E0E0E0" },
-            dark: { type: "hex", value: "#404040" },
+            light: {
+              type: "linear",
+              degrees: 90,
+              points: [
+                { color: "#000000", percent: 0 },
+                { color: "#FF0000", percent: 100 },
+              ],
+            },
           },
         },
         shape: {

package/dist/components/options/InputOption.stories.svelte

@@ -233,7 +233,19 @@
           light: { type: "hex", value: "#4A90E2" },
         },
       },
-      border: null,
+      border: {
+        width: 10,
+        color: {
+          light: {
+            type: "linear",
+            degrees: 90,
+            points: [
+              { color: "#000000", percent: 0 },
+              { color: "#FF0000", percent: 100 },
+            ],
+          },
+        },
+      },
       shape: {
         type: "pill",
       },

package/dist/components/options/InputOption.svelte

@@ -10,7 +10,7 @@
   const props: InputOptionProps = $props();
   const { stack, option_id } = props;
 
-  const { onButtonAction, onInputChanged } = getPaywallContext();
+  const { onButtonAction } = getPaywallContext();
   const inputChoiceContext = getInputChoiceContext();
 
   // Derive selected state from context (similar to Package)
@@ -41,13 +41,6 @@
     // Update selection state
     inputChoiceContext?.selectOption(option_id);
 
-    // Notify host (e.g. workflows) so selections can be persisted when every option shares
-    // the same workflow `on_press` id (e.g. `btn_*`); `onActionTriggered` alone is ambiguous.
-    const fieldId = inputChoiceContext?.fieldId;
-    if (fieldId) {
-      onInputChanged?.(fieldId, option_id);
-    }
-
     // Trigger navigation
     onButtonAction({ type: "workflow" }, actionId);
   };

package/dist/components/options/InputSingleChoice.stories.svelte

@@ -72,10 +72,16 @@
         },
         background: null,
         border: {
-          width: 1,
+          width: 10,
           color: {
-            light: { type: "hex", value: "#E0E0E0" },
-            dark: { type: "hex", value: "#404040" },
+            light: {
+              type: "linear",
+              degrees: 90,
+              points: [
+                { color: "#000000", percent: 0 },
+                { color: "#FF0000", percent: 100 },
+              ],
+            },
           },
         },
         shape: {

package/dist/components/package/Package.stories.svelte

@@ -55,13 +55,17 @@
         },
       },
       border: {
+        width: 10,
         color: {
           light: {
-            type: "hex",
-            value: "#3b393f",
+            type: "linear",
+            degrees: 90,
+            points: [
+              { color: "#000000", percent: 0 },
+              { color: "#FF0000", percent: 100 },
+            ],
           },
         },
-        width: 1,
       },
       components: [
         {

package/dist/components/package/Package.svelte

@@ -13,10 +13,14 @@
     getPackageInfoContext,
     setPackageInfoContext,
   } from "../../stores/packageInfo";
+  import type { PackageInfo, VariableDictionary } from "../../types/variables";
 
-  const { stack, package_id, is_selected_by_default }: PackageProps = $props();
+  const { stack, package_id, is_selected_by_default, name }: PackageProps =
+    $props();
 
   const {
+    defaultPackageId,
+    emitComponentInteraction,
     selectedPackageId,
     variablesPerPackage,
     baseVariables,
@@ -40,7 +44,21 @@
   setSelectedStateContext(selectedStateStore);
 
   const onPackageClick = () => {
+    const originPackageId = $selectedPackageId;
+    if (originPackageId === package_id) {
+      return;
+    }
+
     $selectedPackageId = package_id;
+
+    emitComponentInteraction({
+      componentType: "package",
+      componentName: name,
+      componentValue: package_id,
+      originPackageIdentifier: originPackageId,
+      destinationPackageIdentifier: package_id,
+      defaultPackageIdentifier: defaultPackageId,
+    });
   };
 
   // Use $derived to make variables reactive to package_id changes
@@ -56,7 +74,9 @@
       ...packageVariables,
     };
   });
-  const variablesStore = writable(computedVariables);
+  const variablesStore = writable<VariableDictionary | undefined>(
+    computedVariables,
+  );
   $effect(() => {
     variablesStore.set(computedVariables);
   });
@@ -67,7 +87,9 @@
   const computedPackageInfo = $derived(
     $infoPerPackage?.[package_id] ?? $fallbackPackageInfo,
   );
-  const packageInfoStore = writable(computedPackageInfo);
+  const packageInfoStore = writable<PackageInfo | undefined>(
+    computedPackageInfo,
+  );
   $effect(() => {
     packageInfoStore.set(computedPackageInfo);
   });

package/dist/components/paywall/Paywall.svelte

@@ -19,6 +19,10 @@
     Action,
     CompleteWorkflowNavigateArgs,
   } from "../../types/components/button";
+  import type {
+    ComponentInteractionData,
+    OnComponentInteraction,
+  } from "../../types/paywall-component-interaction";
   import type { SheetProps } from "../../types/components/sheet";
   import type { PaywallData } from "../../types/paywall";
   import type { UIConfig } from "../../types/ui-config";
@@ -74,6 +78,7 @@
       args: CompleteWorkflowNavigateArgs,
     ) => void | Promise<void>;
     onActionTriggered?: (actionId: string) => void;
+    onComponentInteraction?: OnComponentInteraction;
     onError?: (error: unknown) => void;
     hideBackButtons?: boolean;
     walletButtonRender?: WalletButtonRender;
@@ -110,6 +115,7 @@
     onNavigateToUrlClicked,
     onCompleteWorkflowNavigate,
     onActionTriggered,
+    onComponentInteraction,
     onError,
     uiConfig,
     walletButtonRender,
@@ -126,6 +132,7 @@
   const { default_locale, components_config, components_localizations } =
     paywallData;
   const { base } = components_config;
+  const defaultPackageId = findSelectedPackageId(base);
 
   const { getLocalizedString } = setLocalizationContext(() => ({
     defaultLocale: default_locale,
@@ -133,10 +140,22 @@
     localizations: components_localizations!,
   }));
 
-  const selectedPackageId = writable<string | undefined>(
-    findSelectedPackageId(base),
-  );
+  const selectedPackageId = writable<string | undefined>(defaultPackageId);
+
+  const normalizeComponentName = (name?: string) => {
+    if (name === undefined) {
+      return undefined;
+    }
 
+    return name.trim().length > 0 ? name : undefined;
+  };
+
+  const emitComponentInteraction = (data: ComponentInteractionData) => {
+    onComponentInteraction?.({
+      ...data,
+      componentName: normalizeComponentName(data.componentName),
+    });
+  };
   const onPurchase = (actionId?: string) => {
     const packageId = $selectedPackageId;
     if (packageId !== undefined) {
@@ -144,7 +163,10 @@
     }
   };
 
-  let sheet = $state<SheetProps>();
+  let sheet = $state<{
+    props: SheetProps;
+    rootSelectedPackageIdentifier?: string;
+  }>();
 
   const onButtonAction = (action: Action, actionId?: string) => {
     switch (action.type) {
@@ -189,7 +211,26 @@
         }
         return;
       case "sheet":
-        sheet = action.sheet ?? undefined;
+        if (action.sheet) {
+          sheet = {
+            props: action.sheet,
+            rootSelectedPackageIdentifier: $selectedPackageId,
+          };
+        } else {
+          if (sheet) {
+            const resultingPackageIdentifier =
+              sheet.rootSelectedPackageIdentifier;
+            emitComponentInteraction({
+              componentType: "package_selection_sheet",
+              componentName: sheet.props.name,
+              componentValue: "close",
+              currentPackageIdentifier: $selectedPackageId,
+              resultingPackageIdentifier,
+            });
+            selectedPackageId.set(resultingPackageIdentifier);
+          }
+          sheet = undefined;
+        }
         return;
       case "offer_code":
       case "web_paywall_link":
@@ -201,6 +242,7 @@
   const mergedCustomVars = mergeCustomVariables(customVariables, uiConfig);
 
   setPaywallContext({
+    defaultPackageId,
     selectedPackageId,
     variablesPerPackage: readable(variablesPerPackage),
     baseVariables: readable({
@@ -209,6 +251,8 @@
     }),
     infoPerPackage: readable(infoPerPackage),
     onPurchase,
+    emitComponentInteraction,
+    onNavigateToUrl: onNavigateToUrlClicked,
     onButtonAction,
     onInputChanged,
     walletButtonRender,
@@ -287,7 +331,7 @@
   </div>
 
   {#if sheet}
-    <Sheet {...sheet} />
+    <Sheet {...sheet.props} />
   {/if}
 </svelte:boundary>
 
@@ -304,6 +348,18 @@
     transition-timing-function: ease-in-out;
     transform-origin: center;
 
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: var(--overlay);
+      pointer-events: none;
+      z-index: 1;
+    }
+
     &:global(.blur) {
       filter: blur(10px) brightness(0.8);
       transform: scale(1.045);
@@ -317,6 +373,7 @@
   }
 
   .paywall-content {
+    z-index: 2;
     width: 100%;
     flex: 1;
     display: flex;
@@ -384,5 +441,28 @@
     .paywall h6 {
       text-wrap: balance;
     }
+
+    .paywall .rc-gradient-border {
+      position: relative;
+    }
+
+    .paywall .rc-gradient-border::after {
+      content: "";
+      display: var(--rc-border-display, none);
+      position: absolute;
+      inset: calc(-1 * var(--rc-border-width, 0px));
+      border-radius: inherit;
+      padding: var(--rc-border-width, 0px);
+      background: var(--rc-border-bg, transparent);
+      mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      -webkit-mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      mask-composite: exclude;
+      -webkit-mask-composite: xor;
+      pointer-events: none;
+    }
   }
 </style>

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

@@ -1,6 +1,7 @@
 import { type InitialInputSelections } from "../../stores/inputValidation";
 import type { ColorMode } from "../../types";
 import type { CompleteWorkflowNavigateArgs } from "../../types/components/button";
+import type { OnComponentInteraction } from "../../types/paywall-component-interaction";
 import type { PaywallData } from "../../types/paywall";
 import type { UIConfig } from "../../types/ui-config";
 import { type CustomVariables, type PackageInfo, type VariableDictionary } from "../../types/variables";
@@ -34,6 +35,7 @@ interface Props {
      */
     onCompleteWorkflowNavigate?: (args: CompleteWorkflowNavigateArgs) => void | Promise<void>;
     onActionTriggered?: (actionId: string) => void;
+    onComponentInteraction?: OnComponentInteraction;
     onError?: (error: unknown) => void;
     hideBackButtons?: boolean;
     walletButtonRender?: WalletButtonRender;

package/dist/components/purchase-button/PurchaseButton.stories.svelte

@@ -108,7 +108,19 @@
         top: 16,
         trailing: 16,
       },
-      border: null,
+      border: {
+        width: 10,
+        color: {
+          light: {
+            type: "linear",
+            degrees: 90,
+            points: [
+              { color: "#000000", percent: 0 },
+              { color: "#FF0000", percent: 100 },
+            ],
+          },
+        },
+      },
       shadow: null,
       shape: {
         corners: {