@revenuecat/purchases-ui-js 0.0.17 → 0.0.18

package/dist/components/stack/Stack.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
   import type { StackProps } from "../../data/entities";
   import Node from "../paywall/Node.svelte";
-  import { getStackComponentStyles } from "./stack-utils";
-  import { stringifyStyles } from "../../utils/style-utils";
+  import {
+    getBadgeStyles,
+    getStackBadgeTextStyles,
+    getStackComponentStyles,
+    getZStackChildStyles,
+  } from "./stack-utils";
+  import Text from "../text/Text.svelte";
+  import { getLabelAndReplaceVariables } from "../../utils/variable-utils";
 
   const {
     id,
@@ -11,60 +17,169 @@
     onAction,
     purchaseState,
     variableDictionary,
+    badge,
+    zStackChildStyles,
     ...restProps
   }: StackProps = $props();
 
   const stackStyles = $derived(
-    stringifyStyles(
-      getStackComponentStyles({
-        id,
-        components,
-        labels,
-        onAction,
-        purchaseState,
-        ...restProps,
-      }),
-    ),
+    getStackComponentStyles({
+      id,
+      components,
+      labels,
+      onAction,
+      purchaseState,
+      zStackChildStyles,
+      ...restProps,
+    }),
+  );
+  const badgeStyles = $derived(
+    getBadgeStyles({
+      id,
+      components,
+      labels,
+      onAction,
+      purchaseState,
+      badge,
+      ...restProps,
+    }),
+  );
+
+  const zStackChildrenStyles = $derived(
+    getZStackChildStyles({
+      id,
+      components,
+      labels,
+      onAction,
+      purchaseState,
+      ...restProps,
+    }),
+  );
+  const label = $derived(
+    getLabelAndReplaceVariables({
+      defaultLocale: purchaseState.defaultLocale,
+      locale: purchaseState.locale,
+      labels,
+      variableDictionary,
+      text_lid: badge?.text_lid,
+    }),
+  );
+
+  const { tagToRender, textStyles } = $derived(
+    getStackBadgeTextStyles({
+      id,
+      components,
+      labels,
+      onAction,
+      purchaseState,
+      variableDictionary,
+      badge,
+      ...restProps,
+    }),
   );
 </script>
 
-<div {id} style={stackStyles} class="stack">
-  {#each components as component}
-    <Node
-      nodeData={component}
-      {labels}
-      {onAction}
-      {purchaseState}
-      {variableDictionary}
-    />
-  {/each}
+<div {id} class="rc-pw-stack-wrapper" style={stackStyles}>
+  {#if badge}
+    <span class="rc-pw-badge" style={badgeStyles}>
+      <Text styleVariables={textStyles} component={tagToRender}>
+        {label}
+      </Text>
+    </span>
+  {/if}
+  <div class="rc-pw-stack">
+    {#each components as component, index}
+      {#if zStackChildrenStyles}
+        <Node
+          nodeData={component}
+          {labels}
+          {onAction}
+          {purchaseState}
+          {variableDictionary}
+          zStackChildStyles={index > 0 ? zStackChildrenStyles : undefined}
+        />
+      {:else}
+        <Node
+          nodeData={component}
+          {labels}
+          {onAction}
+          {purchaseState}
+          {variableDictionary}
+        />
+      {/if}
+    {/each}
+  </div>
 </div>
 
 <style>
-  .stack {
+  .rc-pw-stack-wrapper {
+    display: block;
+    box-sizing: border-box;
+    width: var(--stack-width, unset);
+    height: var(--stack-height, unset);
+    box-shadow: var(--stack-shadow, none);
+    background: var(--stack-background, unset);
+    position: var(--stack-position, relative);
+    transform: var(--stack-transform, initial);
+    inset: var(--stack-inset, initial);
+    margin-block-start: var(--stack-margin-block-start, 0);
+    margin-inline-end: var(--stack-margin-inline-end, 0);
+    margin-block-end: var(--stack-margin-block-end, 0);
+    margin-inline-start: var(--stack-margin-inline-start, 0);
+    border: var(--stack-border, none);
+    border-end-start-radius: var(--stack-border-end-start-radius, 0px);
+    border-end-end-radius: var(--stack-border-end-end-radius, 0px);
+    border-start-start-radius: var(--stack-border-start-start-radius, 0px);
+    border-start-end-radius: var(--stack-border-start-end-radius, 0px);
+  }
+
+  .rc-pw-stack {
+    background: none;
+    overflow: hidden;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    gap: var(--stack-spacing, 0);
+    flex: var(--stack-flex, 0 1 auto);
+    flex-direction: var(--stack-direction, unset);
+    justify-content: var(--stack-distribution, flex-start);
+    align-items: var(--stack-alignment, flex-start);
+    padding-block-start: var(--stack-padding-block-start, 0);
+    padding-inline-end: var(--stack-padding-inline-end, 0);
+    padding-block-end: var(--stack-padding-block-end, 0);
+    padding-inline-start: var(--stack-padding-inline-start, 0);
+  }
+  .rc-pw-badge {
     box-sizing: border-box;
+    font-family: var(--stack-badge-font-family, sans-serif);
+    position: absolute;
+    inset: var(--stack-badge-inset, unset);
+    transform: var(--stack-badge-transform, initial);
+    margin-block-start: var(--stack-badge-margin-block-start, 0px);
+    margin-inline-end: var(--stack-badge-margin-inline-end, 0px);
+    margin-block-end: var(--stack-badge-margin-block-end, 0px);
+    margin-inline-start: var(--stack-badge-margin-inline-start, 0px);
+    padding-block-start: var(--stack-badge-padding-block-start, 0px);
+    padding-inline-end: var(--stack-badge-padding-inline-end, 0px);
+    padding-block-end: var(--stack-badge-padding-block-end, 0px);
+    padding-inline-start: var(--stack-badge-padding-inline-start, 0px);
+    background: var(--stack-badge-background, initial);
+    color: var(--stack-badge-text-color, inherit);
+    border: var(--stack-badge-border, none);
+    border-end-start-radius: var(--stack-badge-border-end-start-radius, 0px);
+    border-end-end-radius: var(--stack-badge-border-end-end-radius, 0px);
+    border-start-start-radius: var(
+      --stack-badge-border-start-start-radius,
+      0px
+    );
+    border-start-end-radius: var(--stack-badge-border-start-end-radius, 0px);
+    box-shadow: var(--stack-badge-shadow, none);
     display: flex;
-    flex-direction: var(--direction, unset);
-    width: var(--width, unset);
-    height: var(--height, unset);
-    gap: var(--spacing, 0);
-    background: var(--background, none);
-    border: var(--border, none);
-    border-radius: var(--border-radius, 0);
-    box-shadow: var(--shadow, none);
-    justify-content: var(--distribution, flex-start);
-    align-items: var(--alignment, flex-start);
-    padding-block-start: var(--padding-block-start, 0);
-    padding-inline-end: var(--padding-inline-end, 0);
-    padding-block-end: var(--padding-block-end, 0);
-    padding-inline-start: var(--padding-inline-start, 0);
-    margin-block-start: var(--margin-block-start, 0);
-    margin-inline-end: var(--margin-inline-end, 0);
-    margin-block-end: var(--margin-block-end, 0);
-    margin-inline-start: var(--margin-inline-start, 0);
-    flex: var(--flex, 0 1 auto);
-    position: var(--position, relative);
-    inset: var(--inset, initial);
-    transform: var(--transform, initial);
+    align-items: center;
+    justify-content: center;
+    width: var(--stack-badge-badge-width, max-content);
+    height: var(--stack-badge-badge-height, max-content);
+    z-index: var(--stack-badge-z-index, 1);
   }
 </style>

package/dist/components/stack/stack-utils.d.ts

@@ -1,30 +1,30 @@
 import type { StackProps } from "../../data/entities";
-type StackStyleVariables = {
-    "--flex": string;
-    "--height": string;
-    "--width": string;
-    "--spacing": string;
-    "--direction": string;
-    "--alignment": string;
-    "--distribution": string;
-    "--margin-block-start": string;
-    "--margin-inline-end": string;
-    "--margin-block-end": string;
-    "--margin-inline-start": string;
-    "--padding-block-start": string;
-    "--padding-inline-end": string;
-    "--padding-block-end": string;
-    "--padding-inline-start": string;
-    "--background": string;
-    "--text-color": string;
-    "--border": string;
-    "--border-radius": string;
-    "--shadow": string;
-};
 /**
  * Generates comprehensive styles for stack components by combining component, dimension and size styles
  * @param props - Stack component properties including background, spacing, size, border etc.
  * @returns CSS style variables object with all stack-specific styles
  */
-export declare const getStackComponentStyles: (props: StackProps) => StackStyleVariables;
-export {};
+export declare const getStackComponentStyles: (props: StackProps) => string;
+/**
+ * Generates styles for badge component within a stack
+ * @param props - Stack component properties containing badge configuration
+ * @returns CSS style object with badge-specific styles including positioning, dimensions and appearance
+ */
+export declare function getBadgeStyles(props: StackProps): string;
+/**
+ * Generates text styles and HTML tag for a stack's badge component
+ * @param props - Stack component properties containing badge configuration
+ * @returns Object containing:
+ * - tagToRender: HTML tag to use for the badge text
+ * - textStyles: CSS styles string for the badge text
+ */
+export declare function getStackBadgeTextStyles(props: StackProps): {
+    tagToRender: string;
+    textStyles: string;
+};
+export type ZStackChildStyles = {
+    "--inset": string;
+    "--transform": string;
+    "--position": string;
+};
+export declare function getZStackChildStyles(props: StackProps): ZStackChildStyles | undefined;

package/dist/components/stack/stack-utils.js

@@ -1,13 +1,42 @@
-import { getActiveStateProps, getComponentStyles, getDimensionStyle, getSizeStyle, } from "../../utils/style-utils";
+import { getTextComponentStyles } from "../text/text-utils";
+import { getActiveStateProps, getComponentStyles, getDimensionStyle, getInsetStyles, getSizeStyle, prefixObject, stringifyStyles, } from "../../utils/style-utils";
 /**
  * Generates comprehensive styles for stack components by combining component, dimension and size styles
  * @param props - Stack component properties including background, spacing, size, border etc.
  * @returns CSS style variables object with all stack-specific styles
  */
 export const getStackComponentStyles = (props) => {
-    const { background_color, margin, padding, spacing, size, border, shape, shadow, dimension, componentState, overrides, purchaseState, } = props;
+    const { background_color, margin, padding, spacing, size, border, shape, shadow, dimension, componentState, overrides, purchaseState, zStackChildStyles, } = props;
+    const stackStyles = {
+        "--flex": "0 1 auto",
+        "--height": "initial",
+        "--width": "initial",
+        "--spacing": `${spacing || 0}px`,
+        "--direction": "unset",
+        "--alignment": "unset",
+        "--distribution": "flex-start",
+        "--margin-block-start": "0px",
+        "--margin-inline-end": "0px",
+        "--margin-block-end": "0px",
+        "--margin-inline-start": "0px",
+        "--padding-block-start": "0px",
+        "--padding-inline-end": "0px",
+        "--padding-block-end": "0px",
+        "--padding-inline-start": "0px",
+        "--background": "unset",
+        "--text-color": "inherit",
+        "--border": "none",
+        "--border-end-start-radius": "0px",
+        "--border-end-end-radius": "0px",
+        "--border-start-start-radius": "0px",
+        "--border-start-end-radius": "0px",
+        "--shadow": "none",
+        "--position": "relative",
+        "--transform": "initial",
+        "--inset": "initial",
+    };
     const activeStateProps = getActiveStateProps(overrides, componentState);
-    const componentStyles = getComponentStyles({
+    Object.assign(stackStyles, getComponentStyles({
         backgroundColor: background_color,
         margin,
         padding,
@@ -16,16 +45,220 @@ export const getStackComponentStyles = (props) => {
         shape,
         shadow,
         ...activeStateProps,
-    });
-    const dimensionStyles = getDimensionStyle({
+    }), getDimensionStyle({
         ...dimension,
         ...activeStateProps,
+    }), getSizeStyle({ ...size, ...activeStateProps }));
+    Object.assign(stackStyles, zStackChildStyles);
+    const prefixedStyles = prefixObject(stackStyles, "stack");
+    return stringifyStyles(prefixedStyles);
+};
+/**
+ * Generates styles for badge component within a stack
+ * @param props - Stack component properties containing badge configuration
+ * @returns CSS style object with badge-specific styles including positioning, dimensions and appearance
+ */
+export function getBadgeStyles(props) {
+    const { badge } = props;
+    if (!badge)
+        return "";
+    const styles = {
+        "--inset": "unset",
+        "--transform": "unset",
+        "--margin-block-start": "0px",
+        "--margin-inline-end": "0px",
+        "--margin-block-end": "0px",
+        "--margin-inline-start": "0px",
+        "--padding-block-start": "0px",
+        "--padding-inline-end": "0px",
+        "--padding-block-end": "0px",
+        "--padding-inline-start": "0px",
+        "--background": "unset",
+        "--text-color": "inherit",
+        "--border": "none",
+        "--border-end-start-radius": "0px",
+        "--border-end-end-radius": "0px",
+        "--border-start-start-radius": "0px",
+        "--border-start-end-radius": "0px",
+        "--shadow": "none",
+        "--badge-width": "unset",
+        "--z-index": "unset",
+    };
+    // Calculating this as a zIndex alignment since it behaves in the same way
+    // except there's no center alignment
+    Object.assign(styles, getInsetStyles({
+        type: "zlayer",
+        alignment: badge.alignment,
+    }), getComponentStyles({
+        ...badge,
+        backgroundColor: badge.background_color,
+        textColor: badge.color,
+        colorMode: props.purchaseState.colorMode,
+    }));
+    if (badge.style === "overlay") {
+        // Disable vertical margin for nested & center aligned badges
+        styles["--margin-block-start"] = "0px";
+        styles["--margin-block-end"] = "0px";
+        // Vertically center the badge to the edge of the stack
+        styles["--transform"] = getBadgeTransformStyles(badge, 0, -(props.border?.width || 0));
+    }
+    if (badge.style === "edge_to_edge") {
+        styles["--margin-block-start"] = "0px";
+        styles["--margin-block-end"] = "0px";
+        styles["--margin-inline-start"] = "0px";
+        styles["--margin-inline-end"] = "0px";
+        // Shared props between top and bottom
+        if (badge.alignment === "top" || badge.alignment === "bottom") {
+            styles["--badge-width"] =
+                `calc(100% + ${(props.border?.width || 0) * 2}px)`;
+            styles["--z-index"] = "-1";
+            const highestRadius = Math.max(props.shape?.corners?.top_leading || 0, props.shape?.corners?.top_trailing || 0);
+            // one offs for top and bottom
+            if (badge.alignment === "top") {
+                styles["--padding-block-end"] =
+                    `${highestRadius + badge.padding.bottom}px`;
+                styles["--transform"] = getBadgeTransformStyles(badge, highestRadius);
+            }
+            if (badge.alignment === "bottom") {
+                styles["--padding-block-start"] =
+                    `${highestRadius + badge.padding.top}px`;
+                styles["--transform"] = getBadgeTransformStyles(badge, -highestRadius);
+            }
+        }
+        else {
+            styles["--transform"] = getBadgeTransformStyles(badge);
+            Object.assign(styles, getBadgeBorderRadiusStyles(props));
+        }
+    }
+    const prefixedStyles = prefixObject(styles, "stack-badge");
+    return stringifyStyles(prefixedStyles);
+}
+const oppositeCornerDictionary = {
+    top_leading: "bottom_trailing",
+    top_trailing: "bottom_leading",
+    bottom_leading: "top_trailing",
+    bottom_trailing: "top_leading",
+};
+const propToCssPropDictionary = {
+    top_leading: "--border-start-start-radius",
+    top_trailing: "--border-start-end-radius",
+    bottom_leading: "--border-end-start-radius",
+    bottom_trailing: "--border-end-end-radius",
+};
+function getBadgeBorderRadiusStyles(props) {
+    const styles = {
+        "--border-end-start-radius": "0px",
+        "--border-end-end-radius": "0px",
+        "--border-start-start-radius": "0px",
+        "--border-start-end-radius": "0px",
+    };
+    const { badge } = props;
+    if (!badge)
+        return styles;
+    const borderWidth = props.border?.width || 0;
+    const badgeAlignment = badge.alignment;
+    // badge inner radius
+    styles[propToCssPropDictionary[oppositeCornerDictionary[badgeAlignment]]] =
+        `${badge.shape?.corners[oppositeCornerDictionary[badgeAlignment]]}px`;
+    // badge outer radius
+    styles[propToCssPropDictionary[badgeAlignment]] =
+        `${props.shape?.corners[badgeAlignment] - borderWidth}px`;
+    return styles;
+}
+/**
+ * Generates CSS transform styles for badge positioning
+ * @param badge - Badge configuration from StackProps
+ * @param verticalOffset - Optional vertical offset in pixels for edge-to-edge badges
+ * @returns CSS transform string for badge positioning
+ */
+function getBadgeTransformStyles(badge, verticalOffset = 0, horizontalOffset = 0) {
+    if (!badge)
+        return "";
+    if (badge.style === "overlay") {
+        if (badge.alignment === "top_leading") {
+            return `translate(${horizontalOffset}px, calc(-50% + ${verticalOffset}px))`;
+        }
+        if (badge.alignment === "top_trailing") {
+            return `translate(calc(0% - ${horizontalOffset}px), calc(-50% + ${verticalOffset}px))`;
+        }
+        if (badge.alignment === "bottom_leading") {
+            return `translate(${horizontalOffset}px, calc(50% + ${verticalOffset}px))`;
+        }
+        if (badge.alignment === "bottom_trailing") {
+            return `translate(calc(0% - ${horizontalOffset}px), calc(50% + ${verticalOffset}px))`;
+        }
+        if (badge.alignment === "top") {
+            return `translate(calc(-50% + ${horizontalOffset}px), calc(-50% + ${verticalOffset}px))`;
+        }
+        if (badge.alignment === "bottom") {
+            return `translate(calc(50% + ${horizontalOffset}px), calc(50% + ${verticalOffset}px))`;
+        }
+    }
+    if (badge.style === "edge_to_edge") {
+        if (badge.alignment === "top") {
+            return `translate(calc(-50% + ${horizontalOffset}px), calc(-100% - ${verticalOffset}px + 16px))`;
+        }
+        else if (badge.alignment === "bottom") {
+            return `translate(calc(50% + ${horizontalOffset}px), calc(100% + ${verticalOffset}px))`;
+        }
+    }
+    return "";
+}
+/**
+ * Generates text styles and HTML tag for a stack's badge component
+ * @param props - Stack component properties containing badge configuration
+ * @returns Object containing:
+ * - tagToRender: HTML tag to use for the badge text
+ * - textStyles: CSS styles string for the badge text
+ */
+export function getStackBadgeTextStyles(props) {
+    const { badge } = props;
+    if (!badge)
+        return { tagToRender: "", textStyles: "" };
+    const { tagToRender, textStyles } = getTextComponentStyles({
+        id: props.id,
+        labels: props.labels,
+        purchaseState: props.purchaseState,
+        ...badge,
+        components: [],
+        type: "text",
+        size: {
+            width: { type: "fit" },
+            height: { type: "fit" },
+        },
+        color: badge?.color,
+        name: props.name,
     });
-    const sizeStyles = getSizeStyle({ ...size, ...activeStateProps }, dimension.type === "zlayer");
+    const resetSpacing = {
+        "--text-margin-block-start": "0px",
+        "--text-margin-inline-end": "0px",
+        "--text-margin-block-end": "0px",
+        "--text-margin-inline-start": "0px",
+        "--text-padding-block-start": "0px",
+        "--text-padding-inline-end": "0px",
+        "--text-padding-block-end": "0px",
+        "--text-padding-inline-start": "0px",
+    };
+    const stylesObject = {
+        ...textStyles,
+        ...resetSpacing,
+    };
+    const stringifiedStyles = stringifyStyles(stylesObject);
     return {
-        ...sizeStyles,
-        ...dimensionStyles,
-        ...componentStyles,
-        "--spacing": `${spacing || 0}px`,
+        tagToRender,
+        textStyles: stringifiedStyles,
     };
-};
+}
+export function getZStackChildStyles(props) {
+    const { dimension } = props;
+    const baseStyles = {
+        "--inset": "initial",
+        "--transform": "initial",
+        "--position": "relative",
+    };
+    if (dimension.type !== "zlayer")
+        return;
+    const insetStyles = getInsetStyles({ ...dimension, type: "zlayer" });
+    Object.assign(baseStyles, { ...insetStyles, "--position": "absolute" });
+    return baseStyles;
+}

package/dist/components/text/Text.svelte

@@ -16,29 +16,34 @@
   }: TextProps = $props();
 </script>
 
-<svelte:element this={component} {id} style={styleVariables} class="text-block">
+<svelte:element
+  this={component}
+  {id}
+  style={styleVariables}
+  class="rc-pw-text-block"
+>
   {@render children?.()}
 </svelte:element>
 
 <style>
-  .text-block {
+  .rc-pw-text-block {
     display: block;
-    padding-block-start: var(--padding-block-start, unset);
-    padding-inline-end: var(--padding-inline-end, unset);
-    padding-block-end: var(--padding-block-end, unset);
-    padding-inline-start: var(--padding-inline-start, unset);
-    margin-block-start: var(--margin-block-start, unset);
-    margin-inline-end: var(--margin-inline-end, unset);
-    margin-block-end: var(--margin-block-end, unset);
-    margin-inline-start: var(--margin-inline-start, unset);
-    color: var(--text-color, #ffffff);
-    background: var(--background, none);
-    font-size: var(--font-size, 1rem);
-    font-weight: var(--font-weight, normal);
-    text-align: var(--text-align, center);
-    font-family: var(--font-family, sans-serif);
-    -webkit-background-clip: var(--background-clip, initial);
-    background-clip: var(--background-clip, initial);
-    -webkit-text-fill-color: var(--text-fill-color, initial);
+    padding-block-start: var(--text-padding-block-start, initial);
+    padding-inline-end: var(--text-padding-inline-end, initial);
+    padding-block-end: var(--text-padding-block-end, initial);
+    padding-inline-start: var(--text-padding-inline-start, initial);
+    margin-block-start: var(--text-margin-block-start, initial);
+    margin-inline-end: var(--text-margin-inline-end, initial);
+    margin-block-end: var(--text-margin-block-end, initial);
+    margin-inline-start: var(--text-margin-inline-start, initial);
+    color: var(--text-text-color, #ffffff);
+    background: var(--text-background, none);
+    font-size: var(--text-font-size, 1rem);
+    font-weight: var(--text-font-weight, normal);
+    text-align: var(--text-text-align, center);
+    font-family: var(--text-font-family, sans-serif);
+    -webkit-background-clip: var(--text-background-clip, initial);
+    background-clip: var(--text-background-clip, initial);
+    -webkit-text-fill-color: var(--text-text-fill-color, initial);
   }
 </style>