@revenuecat/purchases-ui-js 2.0.2 → 2.0.3

package/dist/components/stack/Stack.svelte

@@ -1,157 +1,134 @@
 <script lang="ts">
   import Node from "../paywall/Node.svelte";
-  import {
-    getBadgeStyles,
-    getStackBadgeTextStyles,
-    getStackComponentStyles,
-    getZStackChildStyles,
-  } from "./stack-utils";
-  import Text from "../text/Text.svelte";
-  import type { StackProps } from "../../data/entities";
   import { getColorModeContext } from "../../stores/color-mode";
-  import { getLocalizationContext } from "../../stores/localization";
-  import { getVariablesContext } from "../../stores/variables";
-  import { replaceVariables } from "../../utils/variable-utils";
+  import { getSelectedStateContext } from "../../stores/selected";
+  import type { StackProps } from "../../types/components/stack";
+  import { mapBackground } from "../../utils/background-utils";
+  import {
+    css,
+    mapBorder,
+    mapBorderRadius,
+    mapShadow,
+    mapSize,
+    mapSpacing,
+    px,
+  } from "../../utils/base-utils";
+  import { getActiveStateProps } from "../../utils/style-utils";
+  import { mapBadge, mapDimension, mapLayerAlignment } from "./stack-utils";
 
-  const { id, components, badge, zStackChildStyles, ...restProps }: StackProps =
-    $props();
+  interface MiscProps {
+    onclick?: () => void;
+  }
+
+  const props: StackProps & MiscProps = $props();
+  const selectedState = getSelectedStateContext();
+  const {
+    components,
+    size,
+    dimension,
+    spacing,
+    margin,
+    padding,
+    background_color,
+    background,
+    border,
+    shape,
+    shadow,
+    badge,
+    onclick,
+  } = $derived.by(() => {
+    return {
+      ...props,
+      ...getActiveStateProps($selectedState, props.overrides),
+    };
+  });
 
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
 
-  const stackStyles = $derived(
-    getStackComponentStyles(colorMode, {
-      id,
-      components,
-      zStackChildStyles,
-      ...restProps,
-    }),
-  );
-  const badgeStyles = $derived(
-    getBadgeStyles(colorMode, {
-      id,
-      components,
-      badge,
-      ...restProps,
+  const style = $derived(
+    css({
+      display: "flex",
+      position: "relative",
+      width: mapSize(size.width),
+      height: mapSize(size.height),
+      ...mapDimension(dimension),
+      gap: px(spacing),
+      margin: mapSpacing(margin),
+      padding: mapSpacing(padding),
+      ...mapBackground(colorMode, background_color, background),
+      border: mapBorder(colorMode, border),
+      "border-radius": mapBorderRadius(shape),
+      "box-shadow": mapShadow(colorMode, shadow),
     }),
   );
 
-  const zStackChildrenStyles = $derived(
-    getZStackChildStyles({
-      id,
-      components,
-      ...restProps,
-    }),
-  );
+  const getLayerStyle = (index: number): string => {
+    if (index === 0 || dimension.type !== "zlayer") {
+      return "";
+    }
 
-  const variables = getVariablesContext();
-  const { getLocalizedString } = getLocalizationContext();
-  const label = $derived(
-    replaceVariables(getLocalizedString(badge?.text_lid), $variables),
-  );
+    const { justifyContent, alignItems } = mapLayerAlignment(
+      dimension.alignment,
+    );
+    return css({
+      position: "absolute",
+      inset: 0,
+      display: "flex",
+      "justify-content": justifyContent,
+      "align-items": alignItems,
+      "z-index": index + 1,
+    });
+  };
 
-  const { tagToRender, textStyles } = $derived(
-    getStackBadgeTextStyles(colorMode, {
-      id,
-      components,
-      badge,
-      ...restProps,
-    }),
-  );
+  const badgeStyle = $derived(css(mapBadge(badge, border?.width)));
 </script>
 
-<div {id} class="rc-pw-stack-wrapper" style={stackStyles}>
+<svelte:element
+  this={onclick !== undefined ? "button" : "div"}
+  role={onclick !== undefined ? "button" : undefined}
+  {onclick}
+  {style}
+  class="stack"
+>
   {#if badge}
-    <span class="rc-pw-badge" style={badgeStyles}>
-      <Text styleVariables={textStyles} component={tagToRender}>
-        {label}
-      </Text>
-    </span>
+    <div style={badgeStyle}>
+      <Node nodeData={badge.stack} />
+    </div>
   {/if}
-  <div class="rc-pw-stack">
-    {#each components as component, index}
-      {#if zStackChildrenStyles}
-        <Node
-          nodeData={component}
-          componentState={restProps.componentState}
-          zStackChildStyles={index > 0 ? zStackChildrenStyles : undefined}
-        />
-      {:else}
-        <Node nodeData={component} componentState={restProps.componentState} />
-      {/if}
+
+  {#if dimension.type === "zlayer"}
+    <div style="position: relative; width: 100%; height: 100%;">
+      {#each components as component, index}
+        <div style={getLayerStyle(index)}>
+          <Node nodeData={component} />
+        </div>
+      {/each}
+    </div>
+  {:else}
+    {#each components as component}
+      <Node nodeData={component} />
     {/each}
-  </div>
-</div>
+  {/if}
+</svelte:element>
 
 <style>
-  .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);
-  }
+  .stack {
+    appearance: none;
+    position: relative;
 
-  .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;
-    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);
+    &[role="button"] {
+      cursor: pointer;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: var(--overlay);
+    }
   }
 </style>

package/dist/components/stack/Stack.svelte.d.ts

@@ -1,4 +1,8 @@
-import type { StackProps } from "../../data/entities";
-declare const Stack: import("svelte").Component<StackProps, {}, "">;
+import type { StackProps } from "../../types/components/stack";
+interface MiscProps {
+    onclick?: () => void;
+}
+type $$ComponentProps = StackProps & MiscProps;
+declare const Stack: import("svelte").Component<$$ComponentProps, {}, "">;
 type Stack = ReturnType<typeof Stack>;
 export default Stack;

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

@@ -1,31 +1,11 @@
-import type { StackProps } from "../../data/entities";
-import type { ColorMode } from "../../types";
-/**
- * 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: (colorMode: ColorMode, 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(colorMode: ColorMode, 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(colorMode: ColorMode, props: StackProps): {
-    tagToRender: string;
-    textStyles: string;
-};
-export declare function getZStackChildStyles(props: StackProps): ZStackChildStyles | undefined;
-export type ZStackChildStyles = {
-    "--inset": string;
-    "--transform": string;
-    "--position": string;
+import type { Dimension, ZAlignment } from "../../types/alignment";
+import type { Badge } from "../../types/components/stack";
+import { type CSS } from "../../utils/base-utils";
+export declare function mapDimension(dimension: Dimension): Record<string, string>;
+type JustifyAlign = {
+    justifyContent: string;
+    alignItems: string;
 };
+export declare function mapLayerAlignment(alignment: ZAlignment): JustifyAlign;
+export declare function mapBadge(badge?: Badge | null, parentBorderWidth?: number): CSS;
+export {};

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

@@ -1,261 +1,83 @@
-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 = (colorMode, props) => {
-    const { background_color, margin, padding, spacing, size, border, shape, shadow, dimension, componentState, overrides, 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);
-    Object.assign(stackStyles, getComponentStyles({
-        background_color,
-        margin,
-        padding,
-        border,
-        colorMode,
-        shape,
-        shadow,
-        ...activeStateProps,
-    }), 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(colorMode, 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,
-        background_color: badge.background_color,
-        color: badge.color,
-        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));
+import { px } from "../../utils/base-utils";
+const ALIGNMENT_MAP = Object.freeze({
+    leading: "flex-start",
+    top: "flex-start",
+    center: "center",
+    trailing: "flex-end",
+    bottom: "flex-end",
+});
+const DISTRIBUTION_MAP = Object.freeze({
+    space_between: "space-between",
+    space_around: "space-around",
+    space_evenly: "space-evenly",
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+});
+export function mapDimension(dimension) {
+    if (dimension.type === "zlayer") {
+        return {};
     }
-    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 direction = dimension.type === "vertical" ? "column" : "row";
+    const justify = DISTRIBUTION_MAP[dimension.distribution] || "center";
+    const align = ALIGNMENT_MAP[dimension.alignment] || "center";
+    return {
+        "flex-direction": direction,
+        "justify-content": justify,
+        "align-items": align,
     };
-    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))`;
-        }
+const Z_ALIGNMENT_MAP = Object.freeze({
+    top_leading: { justifyContent: "flex-start", alignItems: "flex-start" },
+    top: { justifyContent: "center", alignItems: "flex-start" },
+    top_trailing: { justifyContent: "flex-end", alignItems: "flex-start" },
+    leading: { justifyContent: "flex-start", alignItems: "center" },
+    center: { justifyContent: "center", alignItems: "center" },
+    trailing: { justifyContent: "flex-end", alignItems: "center" },
+    bottom_leading: { justifyContent: "flex-start", alignItems: "flex-end" },
+    bottom: { justifyContent: "center", alignItems: "flex-end" },
+    bottom_trailing: { justifyContent: "flex-end", alignItems: "flex-end" },
+});
+export function mapLayerAlignment(alignment) {
+    return Z_ALIGNMENT_MAP[alignment];
+}
+export function mapBadge(badge, parentBorderWidth) {
+    if (badge == null) {
+        return {};
     }
-    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))`;
-        }
+    const { style, alignment } = badge;
+    const isTop = alignment.startsWith("top");
+    const isLeading = alignment.endsWith("leading");
+    const isTrailing = alignment.endsWith("trailing");
+    const isCenter = !isLeading && !isTrailing;
+    const offset = parentBorderWidth ?? 0;
+    if (style === "overlay") {
+        const translateX = isCenter ? "translateX(-50%)" : "";
+        const translateY = isTop ? "translateY(-50%)" : "translateY(50%)";
+        return {
+            "z-index": 10,
+            position: "absolute",
+            width: "max-content",
+            top: isTop ? px(-offset / 2) : "initial",
+            bottom: !isTop ? px(-offset / 2) : "initial",
+            left: isLeading ? px(-offset) : isCenter ? "50%" : "initial",
+            right: isTrailing ? px(-offset) : "initial",
+            transform: `${translateX} ${translateY}`,
+        };
     }
-    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(colorMode, props) {
-    const { badge } = props;
-    if (!badge)
-        return { tagToRender: "", textStyles: "" };
-    const { tagToRender, textStyles } = getTextComponentStyles(colorMode, {
-        id: props.id,
-        ...badge,
-        type: "text",
-        size: {
-            width: { type: "fit" },
-            height: { type: "fit" },
-        },
-        color: badge?.color,
-        name: props.name,
-    });
-    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 {
-        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;
+    if (style === "nested") {
+        return {
+            "z-index": 10,
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            top: isTop ? px(offset) : "initial",
+            bottom: !isTop ? px(offset) : "initial",
+            left: isLeading ? px(offset) : isCenter ? "50%" : "initial",
+            right: isTrailing ? px(offset) : "initial",
+            transform: isCenter ? "translateX(-50%)" : "initial",
+        };
+    }
+    // Not supported yet.
+    return {};
 }