@revenuecat/purchases-ui-js 2.0.1 → 2.0.3

package/dist/components/stack/Stack.svelte

@@ -1,177 +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";
 
+  interface MiscProps {
+    onclick?: () => void;
+  }
+
+  const props: StackProps & MiscProps = $props();
+  const selectedState = getSelectedStateContext();
   const {
-    id,
     components,
-    labels,
-    purchaseState,
+    size,
+    dimension,
+    spacing,
+    margin,
+    padding,
+    background_color,
+    background,
+    border,
+    shape,
+    shadow,
     badge,
-    zStackChildStyles,
-    ...restProps
-  }: StackProps = $props();
+    onclick,
+  } = $derived.by(() => {
+    return {
+      ...props,
+      ...getActiveStateProps($selectedState, props.overrides),
+    };
+  });
 
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
 
-  const stackStyles = $derived(
-    getStackComponentStyles(colorMode, {
-      id,
-      components,
-      labels,
-      purchaseState,
-      zStackChildStyles,
-      ...restProps,
-    }),
-  );
-  const badgeStyles = $derived(
-    getBadgeStyles(colorMode, {
-      id,
-      components,
-      labels,
-      purchaseState,
-      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,
-      labels,
-      purchaseState,
-      ...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,
-      labels,
-      purchaseState,
-      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}
-          {purchaseState}
-          componentState={restProps.componentState}
-          zStackChildStyles={index > 0 ? zStackChildrenStyles : undefined}
-        />
-      {:else}
-        <Node
-          nodeData={component}
-          {purchaseState}
-          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 {};