@revenuecat/purchases-ui-js 2.0.2 → 2.0.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "2.0.2",
+  "version": "2.0.3",
   "author": {
     "name": "RevenueCat, Inc."
   },
@@ -24,6 +24,7 @@
   ],
   "scripts": {
     "dev": "vite dev",
+    "sync": "svelte-kit sync",
     "build": "npm run build:kit && npm run build:components && publint",
     "build:components": "vite build --config vite.components.config.ts",
     "build:kit": "vite build && npm run package",
@@ -39,7 +40,10 @@
     "format": "prettier --write .",
     "typecheck": "tsc --noEmit",
     "test": "vitest --config vitest.config.ts",
-    "lint": "eslint --config eslint.config.js src/**/*"
+    "integration-test:install-deps": "playwright install --with-deps",
+    "integration-test:run": "playwright test",
+    "lint": "eslint --config eslint.config.js src/**/*",
+    "knip": "knip"
   },
   "files": [
     "dist",
@@ -68,33 +72,36 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "4.1.1",
-    "@eslint/js": "9.34.0",
-    "@storybook/addon-docs": "9.1.3",
-    "@storybook/addon-links": "9.1.3",
+    "@eslint/js": "9.36.0",
+    "@playwright/test": "1.55.1",
+    "@storybook/addon-docs": "9.1.8",
+    "@storybook/addon-links": "9.1.8",
     "@storybook/addon-svelte-csf": "5.0.8",
-    "@storybook/sveltekit": "9.1.3",
-    "@sveltejs/adapter-node": "5.3.1",
-    "@sveltejs/kit": "2.37.0",
-    "@sveltejs/package": "2.5.0",
-    "@sveltejs/vite-plugin-svelte": "5.1.1",
-    "@typescript-eslint/parser": "8.41.0",
-    "chromatic": "13.1.3",
-    "eslint": "9.34.0",
-    "eslint-plugin-storybook": "9.1.3",
-    "eslint-plugin-svelte": "3.11.0",
-    "globals": "16.3.0",
+    "@storybook/sveltekit": "9.1.8",
+    "@sveltejs/adapter-node": "5.3.2",
+    "@sveltejs/kit": "2.43.5",
+    "@sveltejs/package": "2.5.4",
+    "@sveltejs/vite-plugin-svelte": "6.2.1",
+    "@types/node": "24.5.2",
+    "@typescript-eslint/parser": "8.45.0",
+    "chromatic": "13.3.0",
+    "eslint": "9.36.0",
+    "eslint-plugin-storybook": "9.1.8",
+    "eslint-plugin-svelte": "3.12.4",
+    "globals": "16.4.0",
     "husky": "9.1.7",
-    "jsdom": "26.1.0",
-    "lint-staged": "16.1.5",
+    "jsdom": "27.0.0",
+    "knip": "5.64.1",
+    "lint-staged": "16.2.3",
     "prettier": "3.6.2",
     "prettier-plugin-svelte": "3.4.0",
-    "publint": "0.3.12",
-    "storybook": "9.1.3",
-    "svelte": "5.14.3",
-    "svelte-check": "4.3.1",
+    "publint": "0.3.13",
+    "storybook": "9.1.8",
+    "svelte": "5.39.6",
+    "svelte-check": "4.3.2",
     "typescript": "5.9.2",
-    "typescript-eslint": "8.41.0",
-    "vite": "6.3.5",
+    "typescript-eslint": "8.45.0",
+    "vite": "7.1.7",
     "vite-plugin-dts": "4.5.4",
     "vitest": "3.2.4"
   },
@@ -104,5 +111,8 @@
       "eslint --fix"
     ]
   },
+  "engines": {
+    "node": "^22.18"
+  },
   "packageManager": "npm@11.5.2+sha512.aac1241cfc3f41dc38780d64295c6c6b917a41e24288b33519a7b11adfc5a54a5f881c642d7557215b6c70e01e55655ed7ba666300fd0238bc75fb17478afaf3"
 }

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

@@ -1,2 +0,0 @@
-import type { ButtonProps } from "../../types/components/button";
-export declare function getButtonStyles({ stack, zStackChildStyles }: ButtonProps): string;

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

@@ -1,19 +0,0 @@
-import { prefixObject, stringifyStyles } from "../../utils/style-utils";
-export function getButtonStyles({ stack, zStackChildStyles }) {
-    // Get the width of the inner stack to adjust to the outer button wrapper
-    const width = stack?.size?.width?.type === "fill" ? "100%" : "fit-content";
-    // Define set of variables to be assigned to the button
-    // Define width as an inline style
-    const prefixedObject = prefixObject(zStackChildStyles || {}, "button");
-    const assignedVariables = {
-        position: "var(--button-position, relative)",
-        inset: "var(--button-inset, 0)",
-        transform: "var(--button-transform, initial)",
-        width,
-    };
-    const buttonInlineStyles = stringifyStyles({
-        ...prefixedObject,
-        ...assignedVariables,
-    });
-    return buttonInlineStyles;
-}

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

@@ -1,19 +0,0 @@
-import type { ImageProps } from "../../data/entities";
-import type { ColorMode } from "../../types";
-/**
- * Generates comprehensive styles for image components by combining gradient and size styles
- * @param props - Image component properties including gradient, mask and size
- * @returns Object containing image style variables and gradient style variables
- */
-export declare const getImageComponentStyles: (colorMode: ColorMode, props: ImageProps & {
-    imageAspectRatio: number;
-}) => {
-    imageStyles: string;
-    maskPath: string;
-    linearGradientAngle: {
-        x1: string;
-        y1: string;
-        x2: string;
-        y2: string;
-    };
-};

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

@@ -1,33 +0,0 @@
-import { getActiveStateProps, getLinearGradientAngle, getMaskPath, getMaskStyle, getSizeStyle, prefixObject, stringifyStyles, } from "../../utils/style-utils";
-/**
- * Generates comprehensive styles for image components by combining gradient and size styles
- * @param props - Image component properties including gradient, mask and size
- * @returns Object containing image style variables and gradient style variables
- */
-export const getImageComponentStyles = (colorMode, props) => {
-    const { size, overrides, componentState, zStackChildStyles } = props;
-    const imageStyles = {
-        "--height": "unset",
-        "--width": "unset",
-        "--clip-path": "none",
-        "--border-end-start-radius": "unset",
-        "--border-end-end-radius": "unset",
-        "--border-start-start-radius": "unset",
-        "--border-start-end-radius": "unset",
-        "--position": "relative",
-        "--inset": "0",
-        "--transform": "initial",
-    };
-    const activeStateProps = getActiveStateProps(overrides, componentState);
-    Object.assign(imageStyles, zStackChildStyles);
-    Object.assign(imageStyles, getSizeStyle({ ...size, ...activeStateProps }));
-    Object.assign(imageStyles, getMaskStyle(props.mask_shape));
-    const prefixedImageStyles = prefixObject(imageStyles, "image");
-    const maskPath = getMaskPath(props);
-    const linearGradientAngle = getLinearGradientAngle(colorMode, props);
-    return {
-        imageStyles: stringifyStyles(prefixedImageStyles),
-        maskPath,
-        linearGradientAngle,
-    };
-};

package/dist/components/purchase-button/purchase-button-utils.d.ts

@@ -1,2 +0,0 @@
-import type { PurchaseButtonProps } from "../../types/components/purchase-button";
-export declare function getPurchaseButtonStyles({ stack, zStackChildStyles, }: PurchaseButtonProps): string;

package/dist/components/purchase-button/purchase-button-utils.js

@@ -1,20 +0,0 @@
-import { prefixObject, stringifyStyles } from "../../utils/style-utils";
-export function getPurchaseButtonStyles({ stack, zStackChildStyles, }) {
-    // Get the width of the inner stack to adjust to the outer button wrapper
-    const width = stack.size.width.type === "fill" ? "100%" : "fit-content";
-    // Prefix zStack child styles with purchase-button to prevent class overlap conflicts
-    const prefixedObject = prefixObject(zStackChildStyles || {}, "purchase-button");
-    // Define set of variables to be assigned to the purchase button
-    // Define width as an inline style
-    const assignedVariables = {
-        position: "var(--purchase-button-position, relative)",
-        inset: "var(--purchase-button-inset, 0)",
-        transform: "var(--purchase-button-transform, initial)",
-        width,
-    };
-    const purchaseButtonInlineStyles = stringifyStyles({
-        ...prefixedObject,
-        ...assignedVariables,
-    });
-    return purchaseButtonInlineStyles;
-}

package/dist/stories/meta-templates.d.ts

@@ -1,12 +0,0 @@
-import type { InputType } from "storybook/internal/types";
-export declare const getSpacingStoryMeta: (description: string) => InputType;
-export declare const getColorStoryMeta: (description: string) => InputType;
-export declare const stackDimensionStoryMeta: InputType;
-export declare const getTextControlStoryMeta: (description: string) => InputType;
-export declare const fontWeightStoryMeta: InputType;
-export declare const fontSizeStoryMeta: InputType;
-export declare const textStyleStoryMeta: InputType;
-export declare const horizontalAlignmentStoryMeta: InputType;
-export declare const shadowStoryMeta: InputType;
-export declare const borderStoryMeta: InputType;
-export declare const sizeStoryMeta: InputType;

package/dist/stories/meta-templates.js

@@ -1,155 +0,0 @@
-import { DEFAULT_BACKGROUND_COLOR, DEFAULT_TEXT_COLOR, } from "../utils/constants";
-export const getSpacingStoryMeta = (description) => ({
-    description,
-    control: { type: "object" },
-    defaultValue: { top: 0, trailing: 0, bottom: 0, leading: 0 },
-    table: {
-        type: {
-            summary: "object",
-            detail: "{ top: number, trailing: number, bottom: number, leading: number }",
-        },
-    },
-});
-export const getColorStoryMeta = (description) => ({
-    description,
-    control: {
-        type: "object",
-        fields: {
-            light: { type: "color" },
-            dark: { type: "color" },
-        },
-    },
-    defaultValue: {
-        dark: DEFAULT_BACKGROUND_COLOR,
-        light: DEFAULT_BACKGROUND_COLOR,
-    },
-    table: {
-        type: {
-            summary: "object",
-            detail: "{ dark: string, light: string }",
-        },
-    },
-});
-export const stackDimensionStoryMeta = {
-    control: { type: "object" },
-    description: "Stack dimension configuration",
-    table: {
-        type: {
-            summary: "object",
-            detail: `{
-        type: "vertical" | "horizontal" | "zlayer",
-        alignment: "start" | "center" | "end" | "top" | "bottom",
-        distribution: "start" | "center" | "end" | "space_between" | "space_around" | "space_evenly"
-      }`,
-        },
-    },
-};
-export const getTextControlStoryMeta = (description) => ({
-    control: { type: "text" },
-    description,
-});
-export const fontWeightStoryMeta = {
-    control: { type: "select" },
-    options: [
-        "black",
-        "extra-bold",
-        "bold",
-        "semi-bold",
-        "medium",
-        "regular",
-        "light",
-        "extra-light",
-        "thin",
-    ],
-    description: "Font weight to be used",
-};
-export const fontSizeStoryMeta = {
-    control: { type: "select" },
-    options: [
-        "body_s",
-        "body_m",
-        "body_l",
-        "body_xl",
-        "heading_xs",
-        "heading_s",
-        "heading_m",
-        "heading_l",
-        "heading_xl",
-        "heading_xxl",
-    ],
-    description: "Font size to be used",
-};
-export const textStyleStoryMeta = {
-    control: { type: "select" },
-    options: ["normal", "bold", "italic", "strikethrough", "link", "monospace"],
-    description: "Text style to be used",
-};
-export const horizontalAlignmentStoryMeta = {
-    control: { type: "select" },
-    options: ["center", "start", "end"],
-    description: "Text horizontal alignment",
-};
-export const shadowStoryMeta = {
-    control: {
-        type: "object",
-        fields: {
-            x: { type: "number" },
-            y: { type: "number" },
-            radius: { type: "number" },
-            color: { type: "color" },
-        },
-    },
-    defaultValue: {
-        x: 0,
-        y: 0,
-        radius: 0,
-        color: { dark: DEFAULT_TEXT_COLOR, light: DEFAULT_TEXT_COLOR },
-    },
-    table: {
-        type: {
-            summary: "object",
-            detail: "{ x: number, y: number, radius: number, color: { dark: string, light: string } }",
-        },
-    },
-    description: "Shadow properties including x, y, radius, and color",
-};
-export const borderStoryMeta = {
-    control: {
-        type: "object",
-        fields: {
-            width: { type: "number" },
-            color: { type: "color" },
-        },
-    },
-    defaultValue: {
-        width: 0,
-        color: { dark: DEFAULT_TEXT_COLOR, light: DEFAULT_TEXT_COLOR },
-    },
-    description: "Border properties including width, color, style, and radius",
-};
-export const sizeStoryMeta = {
-    control: {
-        type: "object",
-        fields: {
-            width: {
-                type: "object",
-                fields: {
-                    type: { type: "select", options: ["fit", "fill", "fixed"] },
-                    value: { type: "number" },
-                },
-            },
-            height: {
-                type: "object",
-                fields: {
-                    type: { type: "select", options: ["fit", "fill", "fixed"] },
-                    value: { type: "number" },
-                },
-            },
-        },
-    },
-    defaultValue: {
-        width: { type: "fill" },
-        height: { type: "fill" },
-    },
-    description: "Size properties including width and height",
-};