@revenuecat/purchases-ui-js 4.12.4 → 4.12.5

package/dist/components/icon/Icon.svelte

@@ -7,6 +7,7 @@
     mapBorder,
     mapBorderRadius,
     mapColor,
+    mapFillBounds,
     mapShadow,
     mapSize,
     mapSpacing,
@@ -38,6 +39,7 @@
     css({
       width: mapSize(size.width),
       height: mapSize(size.height),
+      ...mapFillBounds(size),
       margin: mapSpacing(margin),
       padding: mapSpacing(padding),
       "background-color": mapColor(colorMode, background?.color),

package/dist/components/image/Image.svelte

@@ -4,9 +4,11 @@
   import { getLocalizationContext } from "../../stores/localization";
   import type { ImageProps } from "../../types/components/image";
   import {
+    clampFillSize,
     css,
     mapColor,
     mapColorMode,
+    mapFillBounds,
     mapFitMode,
     mapSize,
     mapSpacing,
@@ -86,7 +88,10 @@
     if (size.height.type === "fixed") {
       return size.height.value;
     }
-    return Math.round(wrapperWidth * (imageSize.height / imageSize.width));
+    const aspectHeight = Math.round(
+      wrapperWidth * (imageSize.height / imageSize.width),
+    );
+    return clampFillSize(aspectHeight, size.height);
   });
 
   const style = $derived(
@@ -102,6 +107,7 @@
       ...(size.width.type === "fixed"
         ? {}
         : { "min-width": 0, "min-height": 0 }),
+      ...mapFillBounds(size),
     }),
   );
 

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

@@ -16,6 +16,7 @@
     css,
     mapBorder,
     mapBorderRadius,
+    mapFillBounds,
     mapShadow,
     mapSize,
     mapSpacing,
@@ -221,6 +222,7 @@
       "flex-direction": "column",
       width: mapSize(size.width),
       ...(heightOnContainer ? { height: mapSize(size.height) } : {}),
+      ...mapFillBounds(size),
       margin: mapSpacing(margin),
     }),
   );

package/dist/components/loader-animation/LoaderAnimation.stories.svelte

@@ -5,7 +5,9 @@
   import { setLoaderContext } from "../../stores/loader";
   import type { LoaderAnimationProps } from "../../types/components/loader-animation";
   import { defineMeta } from "@storybook/addon-svelte-csf";
+  import type { ComponentProps } from "svelte";
   import { writable } from "svelte/store";
+  import { expect } from "storybook/test";
   import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
 
   /**
@@ -64,6 +66,12 @@
   });
 </script>
 
+{#snippet linearClampTemplate(props: ComponentProps<typeof LoaderAnimation>)}
+  <div class="linear-clamp-stage">
+    <LoaderAnimation {...props} />
+  </div>
+{/snippet}
+
 <Story
   name="Circular — In progress"
   decorators={[staticLoaderDecorator(0.7)]}
@@ -94,3 +102,39 @@
   decorators={[staticLoaderDecorator(1)]}
   args={linearArgs}
 />
+
+<Story
+  name="Linear — Clamped fill height"
+  decorators={[staticLoaderDecorator(0.5)]}
+  template={linearClampTemplate}
+  play={async ({ canvasElement }) => {
+    const loader = canvasElement.querySelector(
+      ".rc-loader-animation--linear",
+    );
+    await expect(loader?.getBoundingClientRect().height).toBe(48);
+  }}
+  args={{
+    ...linearArgs,
+    track: {
+      ...linearArgs.track,
+      size: {
+        width: { type: "fill", min: 200, max: 320 },
+        height: { type: "fill", min: 24, max: 48 },
+      },
+    },
+    fill: {
+      ...linearArgs.fill,
+      size: {
+        width: { type: "fill", min: 200, max: 320 },
+        height: { type: "fill", min: 24, max: 48 },
+      },
+    },
+  }}
+/>
+
+<style>
+  .linear-clamp-stage {
+    width: 400px;
+    height: 80px;
+  }
+</style>

package/dist/components/loader-animation/LoaderAnimation.svelte

@@ -20,6 +20,7 @@
     mapColor,
     mapColorInfo,
     mapColorMode,
+    mapFillBounds,
     mapShadow,
     mapSize,
     mapSpacing,
@@ -71,8 +72,12 @@
   const pillWidth = (layer: LinearAnimationLayer) =>
     layer.size.width.type === "fill" ? "100%" : mapSize(layer.size.width);
 
+  const pillHeight = (layer: LinearAnimationLayer) =>
+    layer.size.height.type === "fill" ? "100%" : mapSize(layer.size.height);
+
   const pillLayerStyle = (layer: LinearAnimationLayer) => ({
-    height: mapSize(layer.size.height),
+    height: pillHeight(layer),
+    ...mapFillBounds({ height: layer.size.height }),
     "border-radius": mapBorderRadius(layer.shape ?? null),
     background: mapColor(colorMode, layer.color),
     ...mapBorder(colorMode, layer.border ?? null),
@@ -119,6 +124,7 @@
       "aspect-ratio": "1",
       "flex-shrink": "0",
       width: diameterWidth(actualProps.track),
+      ...mapFillBounds({ width: actualProps.track.diameter }),
       margin: mapSpacing(actualProps.margin ?? null),
       padding: mapSpacing(actualProps.padding ?? null),
     })}
@@ -169,6 +175,11 @@
       display: "block",
       "flex-shrink": "0",
       width: pillWidth(actualProps.track),
+      ...(actualProps.track.size.height.type === "fill"
+        ? { height: "100%" }
+        : {}),
+      ...mapFillBounds({ width: actualProps.track.size.width }),
+      ...mapFillBounds({ height: actualProps.track.size.height }),
       margin: mapSpacing(actualProps.margin ?? null),
       padding: mapSpacing(actualProps.padding ?? null),
     })}

package/dist/components/loader-group/LoaderGroup.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
   import {
     mapDimension,
-    mapFillHeight,
-    mapFixedHeightBounds,
-    mapFixedWidthBounds,
     mapLayerAlignment,
+    mapStackSize,
   } from "../stack/stack-utils";
   import { setStackDimensionContext } from "../stack/stack-dimension-context";
   import BackgroundVideoSurface from "../paywall/BackgroundVideoSurface.svelte";
@@ -21,7 +19,6 @@
     mapBorder,
     mapBorderRadius,
     mapShadow,
-    mapSize,
     mapSpacing,
     px,
   } from "../../utils/base-utils";
@@ -59,18 +56,11 @@
   });
 
   const borderRadiusCss = $derived(mapBorderRadius(actualProps.shape));
-  const heightFill = $derived(actualProps.size.height.type === "fill");
-
   const containerStyle = $derived(
     css({
       display: "flex",
       position: "relative",
-      width: mapSize(actualProps.size.width),
-      ...(heightFill
-        ? mapFillHeight(getParentStackDimension?.())
-        : { height: mapSize(actualProps.size.height) }),
-      ...mapFixedWidthBounds(actualProps.size.width),
-      ...mapFixedHeightBounds(actualProps.size.height),
+      ...mapStackSize(actualProps.size, getParentStackDimension?.()),
       ...mapDimension(actualProps.dimension),
       gap: px(actualProps.spacing),
       margin: mapSpacing(actualProps.margin),

package/dist/components/loader-progress-components/LoaderProgressComponents.svelte

@@ -4,7 +4,12 @@
   import { useConditionContext } from "../../stores/condition-context.svelte";
   import { getRequiredLoaderContext } from "../../stores/loader";
   import type { LoaderProgressComponentsProps } from "../../types/components/loader-progress-components";
-  import { css, mapSize, mapSpacing } from "../../utils/base-utils";
+  import {
+    css,
+    mapFillBounds,
+    mapSize,
+    mapSpacing,
+  } from "../../utils/base-utils";
   import { resolveOverrideProperties } from "../../utils/style-utils";
 
   const props: LoaderProgressComponentsProps = $props();
@@ -49,6 +54,7 @@
       "justify-content": "center",
       width: mapSize(actualProps.size.width),
       height: mapSize(actualProps.size.height),
+      ...mapFillBounds(actualProps.size),
       padding: mapSpacing(actualProps.padding),
       margin: mapSpacing(actualProps.margin),
     }),

package/dist/components/paywall/Sheet.svelte

@@ -12,7 +12,7 @@
     rcVideoBackgroundHostClass,
     videoBackgroundHostStyles,
   } from "../../utils/video-background-host";
-  import { css, mapSize } from "../../utils/base-utils";
+  import { css, mapFillBounds, mapSize } from "../../utils/base-utils";
   import { resolveOverrideProperties } from "../../utils/style-utils";
   import { onMount } from "svelte";
   import Stack from "../stack/Stack.svelte";
@@ -48,6 +48,7 @@
   const sheetStyle = $derived(
     css({
       height: mapSize(size.height),
+      ...mapFillBounds({ height: size.height }),
       ...videoBackgroundHostStyles({
         hasVideoBg,
         clipOverflow: true,

package/dist/components/skeleton-loader/SkeletonLoader.svelte

@@ -4,6 +4,7 @@
     css,
     mapBorder,
     mapBorderRadius,
+    mapFillBounds,
     mapShadow,
     mapSize,
     mapSpacing,
@@ -51,6 +52,7 @@
     position: "relative",
     width: mapSize(size.width),
     height: mapSize(size.height),
+    ...mapFillBounds(size),
     ...mapDimension(dimension),
     gap: px(spacing),
     margin: mapSpacing({

package/dist/components/stack/Stack.stories.svelte

@@ -10,6 +10,8 @@
   import { STORY_BACKGROUND_VIDEO_FILL } from "../../stories/video-background-story-fixture";
   import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
   import { defineMeta } from "@storybook/addon-svelte-csf";
+  import type { ComponentProps } from "svelte";
+  import { expect } from "storybook/test";
 
   const defaultLocale = Object.keys(localizations)[0];
 
@@ -198,6 +200,23 @@
   });
 </script>
 
+{#snippet fillClampTemplate(props: ComponentProps<typeof Stack>)}
+  <div class="fill-clamp-layouts">
+    <Stack {...props} testId="vertical-fill-clamp" />
+    <Stack
+      {...props}
+      id="horizontal-fill-clamp"
+      name="Horizontal fill clamp"
+      testId="horizontal-fill-clamp"
+      dimension={{
+        type: "horizontal",
+        alignment: "center",
+        distribution: "start",
+      }}
+    />
+  </div>
+{/snippet}
+
 <Story name="Vertical Stack" />
 
 <Story
@@ -211,6 +230,56 @@
   }}
 />
 
+<Story
+  name="Fill min/max clamps"
+  template={fillClampTemplate}
+  play={async ({ canvasElement }) => {
+    for (const testId of ["vertical-fill-clamp", "horizontal-fill-clamp"]) {
+      const child = canvasElement.querySelector(
+        `[data-testid="${testId}"] > .stack`,
+      );
+      const bounds = child?.getBoundingClientRect();
+      await expect(bounds?.width).toBe(220);
+      await expect(bounds?.height).toBe(140);
+    }
+  }}
+  args={{
+    size: {
+      width: { type: "fixed", value: 360 },
+      height: { type: "fixed", value: 240 },
+    },
+    components: [
+      {
+        type: "stack",
+        id: "clamped-child",
+        name: "Clamped child",
+        components: [],
+        size: {
+          width: { type: "fill", min: 120, max: 220 },
+          height: { type: "fill", min: 80, max: 140 },
+        },
+        dimension: {
+          type: "vertical",
+          alignment: "center",
+          distribution: "center",
+        },
+        spacing: 0,
+        margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+        padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+        background: {
+          type: "color",
+          value: { light: { type: "hex", value: "#6C63FF" } },
+        },
+        background_color: null,
+        border: null,
+        shape: null,
+        shadow: null,
+        badge: null,
+      },
+    ],
+  }}
+/>
+
 <Story
   name="Surface — video background"
   parameters={{
@@ -284,6 +353,14 @@
   }}
 />
 
+<style>
+  .fill-clamp-layouts {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+  }
+</style>
+
 <Story
   name="Z Layer"
   args={{

package/dist/components/stack/Stack.svelte

@@ -17,7 +17,6 @@
     mapBorder,
     mapBorderRadius,
     mapShadow,
-    mapSize,
     mapSpacing,
     px,
     type CSS,
@@ -27,10 +26,8 @@
   import {
     mapBadge,
     mapDimension,
-    mapFillHeight,
-    mapFixedHeightBounds,
-    mapFixedWidthBounds,
     mapLayerAlignment,
+    mapStackSize,
   } from "./stack-utils";
   import { setStackDimensionContext } from "./stack-dimension-context";
 
@@ -85,20 +82,11 @@
   });
   const borderRadiusCss = $derived(mapBorderRadius(shape));
 
-  const heightFill = $derived(size.height.type === "fill");
-
   const stackStyle = $derived(
     css({
       display: "flex",
       position: "relative",
-      width: mapSize(size.width),
-      // Fill height: definite height + growth in columns; stretch in rows
-      // (see mapFillHeight). Lets nested fill children (e.g. web_view) resolve.
-      ...(heightFill
-        ? mapFillHeight(getParentStackDimension?.())
-        : { height: mapSize(size.height) }),
-      ...mapFixedWidthBounds(size.width),
-      ...mapFixedHeightBounds(size.height),
+      ...mapStackSize(size, getParentStackDimension?.()),
       ...mapDimension(dimension),
       gap: px(spacing),
       margin: mapSpacing(margin),

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

@@ -1,10 +1,12 @@
-import type { Size } from "../../types";
+import type { Size, SizeType } from "../../types";
 import type { Dimension, ZAlignment } from "../../types/alignment";
 import type { Badge } from "../../types/components/stack";
 import { type CSS } from "../../utils/base-utils";
 export declare function mapFixedWidthBounds(width: Size): CSS;
 export declare function mapFixedHeightBounds(height: Size): CSS;
 export declare function mapFillHeight(parentDimension?: Dimension["type"]): CSS;
+/** Fill clamps must follow the flex min-size reset so authored bounds win. */
+export declare function mapStackSize(size: SizeType, parentDimension?: Dimension["type"]): CSS;
 export declare function mapDimension(dimension: Dimension): Record<string, string>;
 type JustifyAlign = {
     justifyContent: string;

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

@@ -1,4 +1,4 @@
-import { px } from "../../utils/base-utils";
+import { mapFillBounds, mapSize, px } from "../../utils/base-utils";
 const ALIGNMENT_MAP = Object.freeze({
     leading: "flex-start",
     top: "flex-start",
@@ -50,6 +50,18 @@ export function mapFillHeight(parentDimension) {
             : {}),
     };
 }
+/** Fill clamps must follow the flex min-size reset so authored bounds win. */
+export function mapStackSize(size, parentDimension) {
+    return {
+        width: mapSize(size.width),
+        ...(size.height.type === "fill"
+            ? mapFillHeight(parentDimension)
+            : { height: mapSize(size.height) }),
+        ...mapFixedWidthBounds(size.width),
+        ...mapFixedHeightBounds(size.height),
+        ...mapFillBounds(size),
+    };
+}
 export function mapDimension(dimension) {
     if (dimension.type === "zlayer") {
         return {};

package/dist/components/tabs/Tabs.svelte

@@ -15,6 +15,7 @@
     css,
     mapBorder,
     mapBorderRadius,
+    mapFillBounds,
     mapShadow,
     mapSize,
     mapSpacing,
@@ -64,6 +65,7 @@
       position: "relative",
       width: mapSize(size.width),
       height: mapSize(size.height),
+      ...mapFillBounds(size),
       margin: mapSpacing(margin),
       padding: mapSpacing(padding),
       ...videoBackgroundHostStyles({

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

@@ -1,6 +1,6 @@
 import { FontSizes, FontWeights, TextAlignments, } from "../../types";
 import { mapBackground } from "../../utils/background-utils";
-import { css, mapColorInfo, mapColorMode, mapSize, mapSpacing, } from "../../utils/base-utils";
+import { css, mapColorInfo, mapColorMode, mapFillBounds, mapSize, mapSpacing, } from "../../utils/base-utils";
 import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
 import { getScopedFontFamily, isFontRCFMManaged } from "../../utils/font-utils";
 export const defaultColor = {
@@ -81,6 +81,7 @@ export function getTextWrapperInlineStyles(colorMode, _restProps, size, backgrou
         position: "relative",
         width: mapSize(size.width),
         height: mapSize(size.height),
+        ...mapFillBounds(size),
         ...mapBackground(colorMode, background_color, null),
     });
 }

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

@@ -1,6 +1,8 @@
 import type { TimelineProps } from "../../types/components/timeline";
 import type { ColorMode } from "../../types";
 export declare function getTimelineInlineStyles(props: TimelineProps): {
+    padding: string;
+    margin: string;
     display: string;
     "grid-template-columns": string;
     "column-gap": string;
@@ -9,8 +11,6 @@ export declare function getTimelineInlineStyles(props: TimelineProps): {
     flex: string;
     width: string;
     height: string;
-    padding: string;
-    margin: string;
 };
 export declare function getTimelineItemContentInlineStyles(_colorMode: ColorMode, timelineSpacing: {
     text_spacing: number;

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

@@ -1,4 +1,4 @@
-import { mapSize, mapSpacing } from "../../utils/base-utils";
+import { mapFillBounds, mapSize, mapSpacing } from "../../utils/base-utils";
 export function getTimelineInlineStyles(props) {
     return {
         display: "grid",
@@ -9,6 +9,7 @@ export function getTimelineInlineStyles(props) {
         flex: "0 1 auto",
         width: mapSize(props.size.width),
         height: mapSize(props.size.height),
+        ...mapFillBounds(props.size),
         padding: mapSpacing(props.padding),
         margin: mapSpacing(props.margin),
     };

package/dist/components/video/Video.svelte

@@ -5,10 +5,12 @@
   import type { VideoProps } from "../../types/components/video";
   import type { VideoFiles, ImageFiles } from "../../types/media";
   import {
+    clampFillSize,
     css,
     mapBorderRadius,
     mapColor,
     mapColorMode,
+    mapFillBounds,
     mapFitMode,
     mapSize,
     mapSpacing,
@@ -145,9 +147,12 @@
     const h = videoSize.height;
     if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) {
       // Avoid 0-height box and NaN before metadata (`NaN <= 0` is false); 16:9 placeholder until dimensions resolve.
-      return wrapperWidth > 0 ? Math.round(wrapperWidth * (9 / 16)) : 200;
+      const placeholderHeight =
+        wrapperWidth > 0 ? Math.round(wrapperWidth * (9 / 16)) : 200;
+      return clampFillSize(placeholderHeight, size.height);
     }
-    return Math.round(wrapperWidth * (h / w));
+    const aspectHeight = Math.round(wrapperWidth * (h / w));
+    return clampFillSize(aspectHeight, size.height);
   });
 
   const style = $derived(
@@ -161,6 +166,7 @@
       ...(size.width.type === "fixed"
         ? {}
         : { "min-width": 0, "min-height": 0 }),
+      ...mapFillBounds(size),
     }),
   );
 

package/dist/components/wallet-button/WalletButton.svelte

@@ -4,7 +4,13 @@
   import { getColorModeContext } from "../../stores/color-mode";
   import { getPaywallContext } from "../../stores/paywall";
   import type { WalletButtonProps } from "../../types/components/wallet-button";
-  import { css, mapSize, mapSpacing, px } from "../../utils/base-utils";
+  import {
+    css,
+    mapFillBounds,
+    mapSize,
+    mapSpacing,
+    px,
+  } from "../../utils/base-utils";
   import { DEFAULT_SPACING } from "../../utils/constants";
   import { onDestroy } from "svelte";
 
@@ -62,6 +68,7 @@
     position: "relative",
     width: mapSize(size.width),
     height: mapSize(size.height),
+    ...mapFillBounds(size),
     ...mapDimension(dimension),
     gap: px(spacing),
     margin: mapSpacing({

package/dist/components/web-view/WebView.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import type { WebViewProps } from "../../types/components/web-view";
-  import { css, mapSize, px } from "../../utils/base-utils";
+  import { css, mapFillBounds, mapSize, px } from "../../utils/base-utils";
   import { getStackDimensionContext } from "../stack/stack-dimension-context";
   import { mapFillHeight } from "../stack/stack-utils";
   import { isSameOriginAsHost, sanitizeWebViewUrl } from "./web-view-utils";
@@ -126,6 +126,7 @@
               width.type === "fixed" || widthFit || heightFit ? 0 : 1,
           }),
       "line-height": 0,
+      ...mapFillBounds(props.size),
       // No transition: the iframe is height:100% of this box, so animating the
       // resize would flash the iframe's own scrollbar mid-change.
     });

package/dist/types.d.ts

@@ -57,6 +57,9 @@ type FitSize = {
 type FillSize = {
     type: "fill";
     value?: null;
+    /** Optional px clamps on the filled axis. */
+    min?: number | null;
+    max?: number | null;
 };
 export type Size = FixedSize | RelativeSize | FitSize | FillSize;
 export type SizeType = {

package/dist/utils/base-utils.d.ts

@@ -1,4 +1,4 @@
-import type { BorderType, CircleShape, ColorMode, ConcaveShape, ConvexShape, PillShape, RectangleShape, ShadowType, Size, Spacing } from "../types";
+import type { BorderType, CircleShape, ColorMode, ConcaveShape, ConvexShape, PillShape, RectangleShape, ShadowType, Size, SizeType, Spacing } from "../types";
 import type { ColorGradientInfo, ColorGradientScheme, ColorScheme } from "../types/colors";
 import type { FitMode } from "../types/media";
 export type CSS = Record<string, string | number>;
@@ -9,6 +9,10 @@ export declare function mapColorMode<T>(colorMode: ColorMode, value: {
     dark?: T | null;
 }): T;
 export declare function mapSize(size: Size): string;
+/** Spread after flex min-size resets so authored fill bounds win. */
+export declare function mapFillBounds(size: Partial<SizeType>): CSS;
+/** Apply fill bounds to a layout-derived size before the browser measures it. */
+export declare function clampFillSize(value: number, size: Size): number;
 export declare function mapSpacing(spacing?: Spacing | null): string;
 export declare function mapColorInfo(info: ColorGradientInfo): string;
 export declare function mapColor(colorMode: ColorMode, scheme: ColorScheme | ColorGradientScheme | null | undefined): string;

package/dist/utils/base-utils.js

@@ -33,6 +33,30 @@ export function mapSize(size) {
         }
     }
 }
+function mapAxisFillBounds(size, axis) {
+    if (size.type !== "fill") {
+        return {};
+    }
+    return {
+        ...(size.min != null ? { [`min-${axis}`]: px(size.min) } : {}),
+        ...(size.max != null ? { [`max-${axis}`]: px(size.max) } : {}),
+    };
+}
+/** Spread after flex min-size resets so authored fill bounds win. */
+export function mapFillBounds(size) {
+    return {
+        ...(size.width ? mapAxisFillBounds(size.width, "width") : {}),
+        ...(size.height ? mapAxisFillBounds(size.height, "height") : {}),
+    };
+}
+/** Apply fill bounds to a layout-derived size before the browser measures it. */
+export function clampFillSize(value, size) {
+    if (size.type !== "fill") {
+        return value;
+    }
+    const maxClamped = size.max == null ? value : Math.min(value, size.max);
+    return size.min == null ? maxClamped : Math.max(maxClamped, size.min);
+}
 export function mapSpacing(spacing) {
     const { top = 0, bottom = 0, leading = 0, trailing = 0, } = spacing ?? DEFAULT_SPACING;
     return mapTuple(top, trailing, bottom, leading);

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "4.12.4",
+  "version": "4.12.5",
   "author": {
     "name": "RevenueCat, Inc."
   },