@revenuecat/purchases-ui-js 4.16.0 → 4.17.0

package/dist/utils/cookie-consent.d.ts

@@ -0,0 +1,55 @@
+/** Sizes in CSS pixels. */
+export declare const COOKIE_CONSENT_BANNER: {
+    /** Space between the banner and the screen edges, outside the device safe area. */
+    readonly edgeGap: 12;
+    readonly padding: 16;
+    readonly cornerRadius: 16;
+    readonly fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+    readonly shadow: "0 4px 24px rgb(0 0 0 / 0.18), 0 1px 3px rgb(0 0 0 / 0.12)";
+    readonly title: {
+        readonly fontSize: 16;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.3;
+        readonly marginBottom: 6;
+    };
+    readonly body: {
+        readonly fontSize: 14;
+        readonly lineHeight: 1.45;
+        readonly marginBottom: 14;
+    };
+    readonly buttonGap: 8;
+    readonly button: {
+        readonly minHeight: 44;
+        readonly paddingBlock: 10;
+        readonly paddingInline: 16;
+        readonly fontSize: 15;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.2;
+    };
+};
+/** Used for whatever the funnel's banner style and branding leave unset. */
+export declare const COOKIE_CONSENT_DEFAULT_COLORS: {
+    readonly background: {
+        readonly light: "#FFFFFF";
+        readonly dark: "#1E1E1E";
+    };
+    readonly text: {
+        readonly light: "#1A1A1A";
+        readonly dark: "#F5F5F5";
+    };
+    /** Body text is dimmed slightly unless the funnel sets a text or background color. */
+    readonly bodyText: {
+        readonly light: "#444444";
+        readonly dark: "#C8C8C8";
+    };
+    readonly button: {
+        readonly light: "#1A1A1A";
+        readonly dark: "#F5F5F5";
+    };
+    readonly buttonText: {
+        readonly light: "#FFFFFF";
+        readonly dark: "#1A1A1A";
+    };
+};
+/** Concentric with the banner's corner, but never less than half its radius. */
+export declare function cookieConsentButtonRadius(cornerRadius: number): number;

package/dist/utils/cookie-consent.js

@@ -0,0 +1,36 @@
+// Public surface for `@revenuecat/purchases-ui-js/cookie-consent`. The funnel player
+// renders the cookie consent banner and the dashboard previews it on the canvas;
+// both read these so the preview can't drift from what visitors see.
+/** Sizes in CSS pixels. */
+export const COOKIE_CONSENT_BANNER = {
+    /** Space between the banner and the screen edges, outside the device safe area. */
+    edgeGap: 12,
+    padding: 16,
+    cornerRadius: 16,
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    shadow: "0 4px 24px rgb(0 0 0 / 0.18), 0 1px 3px rgb(0 0 0 / 0.12)",
+    title: { fontSize: 16, fontWeight: 600, lineHeight: 1.3, marginBottom: 6 },
+    body: { fontSize: 14, lineHeight: 1.45, marginBottom: 14 },
+    buttonGap: 8,
+    button: {
+        minHeight: 44,
+        paddingBlock: 10,
+        paddingInline: 16,
+        fontSize: 15,
+        fontWeight: 600,
+        lineHeight: 1.2,
+    },
+};
+/** Used for whatever the funnel's banner style and branding leave unset. */
+export const COOKIE_CONSENT_DEFAULT_COLORS = {
+    background: { light: "#FFFFFF", dark: "#1E1E1E" },
+    text: { light: "#1A1A1A", dark: "#F5F5F5" },
+    /** Body text is dimmed slightly unless the funnel sets a text or background color. */
+    bodyText: { light: "#444444", dark: "#C8C8C8" },
+    button: { light: "#1A1A1A", dark: "#F5F5F5" },
+    buttonText: { light: "#FFFFFF", dark: "#1A1A1A" },
+};
+/** Concentric with the banner's corner, but never less than half its radius. */
+export function cookieConsentButtonRadius(cornerRadius) {
+    return Math.max(cornerRadius - COOKIE_CONSENT_BANNER.padding, cornerRadius / 2);
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "4.16.0",
+  "version": "4.17.0",
   "author": {
     "name": "RevenueCat, Inc."
   },
@@ -68,6 +68,10 @@
     "./safe-area": {
       "types": "./dist/utils/safe-area.d.ts",
       "default": "./dist/utils/safe-area.js"
+    },
+    "./cookie-consent": {
+      "types": "./dist/utils/cookie-consent.d.ts",
+      "default": "./dist/utils/cookie-consent.js"
     }
   },
   "engines": {