@billing-io/designs 1.0.0

package/dist/brand.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Full SVG logo badge (the "b." glyph) used in billing.js overlay headers.
+ * This is the production brand mark — use this in all customer-facing contexts.
+ */
+export declare const BRAND_SVG_VIEWBOX = "0 0 1024 1024";
+export declare const BRAND_SVG_PATHS: {
+    background: {
+        fill: string;
+        d: string;
+    };
+    letterB: {
+        fill: string;
+        d: string;
+    };
+    dot: {
+        fill: string;
+        d: string;
+    };
+};
+/**
+ * Build an inline-HTML brand badge at the given size.
+ * This is the full SVG version used in the canonical billing.js.
+ */
+export type BadgeSize = "sm" | "md" | "lg";
+export interface BadgeDimensions {
+    size: number;
+    borderRadius: number;
+}
+export declare const BADGE_DIMENSIONS: Record<BadgeSize, BadgeDimensions>;
+export declare function buildBrandBadgeHTML(size?: BadgeSize): string;
+/**
+ * Get the full SVG markup for the brand logo (no container div).
+ */
+export declare function getBrandSVG(width?: number, height?: number): string;
+//# sourceMappingURL=brand.d.ts.map

package/dist/brand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand.d.ts","sourceRoot":"","sources":["../src/brand.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,iBAAiB,kBAAkB,CAAC;AAEjD,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAU3B,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,eAAe,CAI/D,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,IAAI,GAAE,SAAgB,GAAG,MAAM,CAUlE;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,GAAE,MAAW,EAAE,MAAM,GAAE,MAAW,GAAG,MAAM,CAQ3E"}

package/dist/brand.js

@@ -0,0 +1,43 @@
+// @billing-io/designs — Brand assets
+// Canonical SVG badge and brand constants for billing.io
+/**
+ * Full SVG logo badge (the "b." glyph) used in billing.js overlay headers.
+ * This is the production brand mark — use this in all customer-facing contexts.
+ */
+export const BRAND_SVG_VIEWBOX = "0 0 1024 1024";
+export const BRAND_SVG_PATHS = {
+    background: { fill: "#000", d: "" },
+    letterB: {
+        fill: "#fff",
+        d: "M648.077,530.65c0,46.2-18.34,81.95-55,107.25-25.3,17.239-51.7,25.851-79.2,25.851-10.27,0-25.119-3.301-44.55-9.9-10.27-3.661-18.149-5.5-23.649-5.5-9.9,0-19.989,3.67-30.25,11-2.2,1.461-3.851,2.2-4.95,2.2-2.569,0-4.039-1.101-4.4-3.3-.369-2.2-.55-8.801-.55-19.801v-322.85c0-9.53-1.719-15.761-5.156-18.7-3.438-2.931-10.948-4.4-22.533-4.4-9.771,0-14.66-1.28-14.66-3.85s2.234-3.85,6.694-3.85c41.653,0,77.919-4.581,108.797-13.75l.559,8.8v162.25c14.618-20.161,34.899-30.25,60.853-30.25,31.427,0,57.285,11.095,77.567,33.274,20.281,22.189,30.43,50.695,30.43,85.525ZM566.127,532.851c0-71.131-14.85-106.7-44.55-106.7-16.5,0-28.6,7.7-36.3,23.1-2.939,5.87-4.675,12.745-5.225,20.625-.551,7.89-.825,30.345-.825,67.375v33.551c0,34.469,2.286,57.294,6.875,68.475,4.58,11.189,13.836,16.775,27.774,16.775,19.062,0,32.536-9.351,40.426-28.051,7.88-18.699,11.824-50.41,11.824-95.149Z",
+    },
+    dot: {
+        fill: "#fff",
+        d: "M692.003,642.041c0,7.235-2.336,13.186-7,17.851-4.671,4.665-10.621,7-17.851,7s-13.3-2.396-18.2-7.175c-4.899-4.78-7.35-10.676-7.35-17.676,0-7.229,2.45-13.3,7.35-18.199s10.965-7.351,18.2-7.351c6.765,0,12.601,2.45,17.5,7.351,4.9,4.899,7.351,10.97,7.351,18.199Z",
+    },
+};
+export const BADGE_DIMENSIONS = {
+    sm: { size: 18, borderRadius: 4 },
+    md: { size: 20, borderRadius: 5 },
+    lg: { size: 24, borderRadius: 6 },
+};
+export function buildBrandBadgeHTML(size = "md") {
+    const { size: dim, borderRadius: br } = BADGE_DIMENSIONS[size];
+    return (`<div style="width:${dim}px;height:${dim}px;background:#000;border-radius:${br}px;display:flex;align-items:center;justify-content:center;overflow:hidden;">` +
+        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${BRAND_SVG_VIEWBOX}" width="${dim}" height="${dim}">` +
+        `<rect width="1024" height="1024" fill="#000"/>` +
+        `<path fill="${BRAND_SVG_PATHS.letterB.fill}" d="${BRAND_SVG_PATHS.letterB.d}"/>` +
+        `<path fill="${BRAND_SVG_PATHS.dot.fill}" d="${BRAND_SVG_PATHS.dot.d}"/>` +
+        `</svg></div>`);
+}
+/**
+ * Get the full SVG markup for the brand logo (no container div).
+ */
+export function getBrandSVG(width = 24, height = 24) {
+    return (`<svg xmlns="http://www.w3.org/2000/svg" viewBox="${BRAND_SVG_VIEWBOX}" width="${width}" height="${height}">` +
+        `<rect width="1024" height="1024" fill="#000"/>` +
+        `<path fill="${BRAND_SVG_PATHS.letterB.fill}" d="${BRAND_SVG_PATHS.letterB.d}"/>` +
+        `<path fill="${BRAND_SVG_PATHS.dot.fill}" d="${BRAND_SVG_PATHS.dot.d}"/>` +
+        `</svg>`);
+}
+//# sourceMappingURL=brand.js.map

package/dist/brand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand.js","sourceRoot":"","sources":["../src/brand.ts"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,yDAAyD;AAEzD;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,CAAC;AAEjD,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE;IACnC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;QACZ,CAAC,EAAE,41BAA41B;KACh2B;IACD,GAAG,EAAE;QACH,IAAI,EAAE,MAAM;QACZ,CAAC,EAAE,kQAAkQ;KACtQ;CACF,CAAC;AAaF,MAAM,CAAC,MAAM,gBAAgB,GAAuC;IAClE,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE;IACjC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE;IACjC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE;CAClC,CAAC;AAEF,MAAM,UAAU,mBAAmB,CAAC,OAAkB,IAAI;IACxD,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,YAAY,EAAE,EAAE,EAAE,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC/D,OAAO,CACL,qBAAqB,GAAG,aAAa,GAAG,oCAAoC,EAAE,8EAA8E;QAC5J,oDAAoD,iBAAiB,YAAY,GAAG,aAAa,GAAG,IAAI;QACxG,gDAAgD;QAChD,eAAe,eAAe,CAAC,OAAO,CAAC,IAAI,QAAQ,eAAe,CAAC,OAAO,CAAC,CAAC,KAAK;QACjF,eAAe,eAAe,CAAC,GAAG,CAAC,IAAI,QAAQ,eAAe,CAAC,GAAG,CAAC,CAAC,KAAK;QACzE,cAAc,CACf,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,QAAgB,EAAE,EAAE,SAAiB,EAAE;IACjE,OAAO,CACL,oDAAoD,iBAAiB,YAAY,KAAK,aAAa,MAAM,IAAI;QAC7G,gDAAgD;QAChD,eAAe,eAAe,CAAC,OAAO,CAAC,IAAI,QAAQ,eAAe,CAAC,OAAO,CAAC,CAAC,KAAK;QACjF,eAAe,eAAe,CAAC,GAAG,CAAC,IAAI,QAAQ,eAAe,CAAC,GAAG,CAAC,CAAC,KAAK;QACzE,QAAQ,CACT,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { PLANS, MARKETING_PLANS, MARKETING_SANDBOX, COMPARISON_PLANS, COMPARISON_DATA, PRICING_FAQS, MID_CYCLE_THRESHOLD_USD, PAST_DUE_RESTRICT_HOURS, RESTRICT_SUSPEND_HOURS, USAGE_WARNING_THRESHOLD, BILLING_EMAIL_EVENTS, BILLING_EVENT_TYPES, } from "./plans.js";
+export type { PlanId, BillingStatus, PlanConfig, MarketingPlan, MarketingSandboxPlan, ComparisonValue, ComparisonFeature, ComparisonSection, FaqEntry, } from "./plans.js";
+export { BRAND_SVG_VIEWBOX, BRAND_SVG_PATHS, BADGE_DIMENSIONS, buildBrandBadgeHTML, getBrandSVG, } from "./brand.js";
+export type { BadgeSize, BadgeDimensions } from "./brand.js";
+export { OVERLAY_Z_INDEX, EASING, MSG_PREFIX, VARIATION_ALIASES, VARIATIONS, CLOSE_BUTTON, BACKDROP, CARD, PANEL, BOTTOM_SHEET, POPUP, FULLSCREEN, SUCCESS_AUTO_CLOSE_MS, } from "./overlay/index.js";
+export type { VariationName, VariationMeta } from "./overlay/index.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAYA,OAAO,EACL,KAAK,EACL,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,YAAY,EACZ,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,uBAAuB,EACvB,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,YAAY,CAAC;AAEpB,YAAY,EACV,MAAM,EACN,aAAa,EACb,UAAU,EACV,aAAa,EACb,oBAAoB,EACpB,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,GACT,MAAM,YAAY,CAAC;AAGpB,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,mBAAmB,EACnB,WAAW,GACZ,MAAM,YAAY,CAAC;AAEpB,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAG7D,OAAO,EACL,eAAe,EACf,MAAM,EACN,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,KAAK,EACL,UAAU,EACV,qBAAqB,GACtB,MAAM,oBAAoB,CAAC;AAE5B,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/index.js

@@ -0,0 +1,17 @@
+// @billing-io/designs — Centralized design definitions for billing.io
+//
+// This package is the single source of truth for:
+//   - Plan/pricing definitions and types
+//   - Brand assets (SVG badge, logo)
+//   - Checkout overlay design constants (variations, animations, dimensions)
+//   - Billing system constants (thresholds, event types)
+//
+// All billing.io projects should import from this package instead of
+// duplicating these values.
+// Plans, pricing, and billing constants
+export { PLANS, MARKETING_PLANS, MARKETING_SANDBOX, COMPARISON_PLANS, COMPARISON_DATA, PRICING_FAQS, MID_CYCLE_THRESHOLD_USD, PAST_DUE_RESTRICT_HOURS, RESTRICT_SUSPEND_HOURS, USAGE_WARNING_THRESHOLD, BILLING_EMAIL_EVENTS, BILLING_EVENT_TYPES, } from "./plans.js";
+// Brand assets
+export { BRAND_SVG_VIEWBOX, BRAND_SVG_PATHS, BADGE_DIMENSIONS, buildBrandBadgeHTML, getBrandSVG, } from "./brand.js";
+// Overlay design constants
+export { OVERLAY_Z_INDEX, EASING, MSG_PREFIX, VARIATION_ALIASES, VARIATIONS, CLOSE_BUTTON, BACKDROP, CARD, PANEL, BOTTOM_SHEET, POPUP, FULLSCREEN, SUCCESS_AUTO_CLOSE_MS, } from "./overlay/index.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,EAAE;AACF,kDAAkD;AAClD,yCAAyC;AACzC,qCAAqC;AACrC,6EAA6E;AAC7E,yDAAyD;AACzD,EAAE;AACF,qEAAqE;AACrE,4BAA4B;AAE5B,wCAAwC;AACxC,OAAO,EACL,KAAK,EACL,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,YAAY,EACZ,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,uBAAuB,EACvB,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,YAAY,CAAC;AAcpB,eAAe;AACf,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,mBAAmB,EACnB,WAAW,GACZ,MAAM,YAAY,CAAC;AAIpB,2BAA2B;AAC3B,OAAO,EACL,eAAe,EACf,MAAM,EACN,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,KAAK,EACL,UAAU,EACV,qBAAqB,GACtB,MAAM,oBAAoB,CAAC"}

package/dist/overlay/constants.d.ts

@@ -0,0 +1,60 @@
+export declare const OVERLAY_Z_INDEX = 2147483647;
+export declare const EASING: {
+    readonly OUT_EXPO: "cubic-bezier(0.16, 1, 0.3, 1)";
+    readonly OUT_QUINT: "cubic-bezier(0.22, 1, 0.36, 1)";
+    readonly IN_EXPO: "cubic-bezier(0.7, 0, 0.84, 0)";
+};
+export declare const MSG_PREFIX = "billing:";
+export declare const VARIATION_ALIASES: Record<string, number>;
+export type VariationName = "centered" | "panel" | "bottom" | "fullscreen" | "popup";
+export interface VariationMeta {
+    id: number;
+    name: string;
+    description: string;
+    /** Primary alias for this variation */
+    alias: VariationName;
+}
+export declare const VARIATIONS: VariationMeta[];
+export declare const CLOSE_BUTTON: {
+    readonly size: 32;
+    readonly borderRadius: 10;
+    readonly background: "#f3f4f6";
+    readonly hoverBackground: "#e5e7eb";
+    readonly color: "#6b7280";
+    readonly iconSize: 14;
+};
+export declare const BACKDROP: {
+    readonly color: "rgba(0,0,0,0.4)";
+    readonly blur: "12px";
+    readonly lightColor: "rgba(0,0,0,0.3)";
+    readonly lightBlur: "6px";
+    readonly scrimColor: "rgba(0,0,0,0.08)";
+};
+export declare const CARD: {
+    readonly maxWidth: 460;
+    readonly maxHeight: 680;
+    readonly borderRadius: 20;
+    readonly minIframeHeight: 600;
+};
+export declare const PANEL: {
+    readonly width: 460;
+};
+export declare const BOTTOM_SHEET: {
+    readonly maxWidth: 500;
+    readonly maxHeight: "92vh";
+    readonly minIframeHeight: 580;
+    readonly handleWidth: 36;
+    readonly handleHeight: 4;
+};
+export declare const POPUP: {
+    readonly width: 420;
+    readonly height: 640;
+    readonly offset: 24;
+    readonly borderRadius: 16;
+};
+export declare const FULLSCREEN: {
+    readonly background: "rgba(247,248,250,1)";
+    readonly backgroundTransparent: "rgba(247,248,250,0)";
+};
+export declare const SUCCESS_AUTO_CLOSE_MS = 2500;
+//# sourceMappingURL=constants.d.ts.map

package/dist/overlay/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/overlay/constants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,aAAa,CAAC;AAG1C,eAAO,MAAM,MAAM;;;;CAIT,CAAC;AAGX,eAAO,MAAM,UAAU,aAAa,CAAC;AAGrC,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAMpD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,YAAY,GAAG,OAAO,CAAC;AAErF,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,uCAAuC;IACvC,KAAK,EAAE,aAAa,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,EAAE,aAAa,EAMrC,CAAC;AAGF,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAGX,eAAO,MAAM,QAAQ;;;;;;CAMX,CAAC;AAGX,eAAO,MAAM,IAAI;;;;;CAKP,CAAC;AAGX,eAAO,MAAM,KAAK;;CAER,CAAC;AAGX,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAGX,eAAO,MAAM,KAAK;;;;;CAKR,CAAC;AAGX,eAAO,MAAM,UAAU;;;CAGb,CAAC;AAGX,eAAO,MAAM,qBAAqB,OAAO,CAAC"}

package/dist/overlay/constants.js

@@ -0,0 +1,77 @@
+// @billing-io/designs — Checkout overlay design constants
+// Shared values used across all 5 overlay variations in billing.js
+export const OVERLAY_Z_INDEX = 2147483647;
+// Spring-like easing curves for overlay animations
+export const EASING = {
+    OUT_EXPO: "cubic-bezier(0.16, 1, 0.3, 1)",
+    OUT_QUINT: "cubic-bezier(0.22, 1, 0.36, 1)",
+    IN_EXPO: "cubic-bezier(0.7, 0, 0.84, 0)",
+};
+// PostMessage protocol
+export const MSG_PREFIX = "billing:";
+// Variation name -> number mapping
+export const VARIATION_ALIASES = {
+    centered: 1, card: 1,
+    panel: 2, side: 2, sidepanel: 2,
+    bottom: 3, sheet: 3, bottomsheet: 3,
+    fullscreen: 4, full: 4, takeover: 4,
+    popup: 5, floating: 5, pill: 5,
+};
+export const VARIATIONS = [
+    { id: 1, name: "Centered Card", description: "Classic centered modal, backdrop blur", alias: "centered" },
+    { id: 2, name: "Side Panel", description: "Right-anchored slide-in sheet", alias: "panel" },
+    { id: 3, name: "Bottom Sheet", description: "Mobile-friendly bottom sheet", alias: "bottom" },
+    { id: 4, name: "Fullscreen", description: "Immersive full-screen overlay", alias: "fullscreen" },
+    { id: 5, name: "Floating Popup", description: "Compact bottom-right popup", alias: "popup" },
+];
+// Close button dimensions
+export const CLOSE_BUTTON = {
+    size: 32,
+    borderRadius: 10,
+    background: "#f3f4f6",
+    hoverBackground: "#e5e7eb",
+    color: "#6b7280",
+    iconSize: 14,
+};
+// Backdrop defaults
+export const BACKDROP = {
+    color: "rgba(0,0,0,0.4)",
+    blur: "12px",
+    lightColor: "rgba(0,0,0,0.3)",
+    lightBlur: "6px",
+    scrimColor: "rgba(0,0,0,0.08)",
+};
+// Card dimensions shared across variations
+export const CARD = {
+    maxWidth: 460,
+    maxHeight: 680,
+    borderRadius: 20,
+    minIframeHeight: 600,
+};
+// Side panel dimensions
+export const PANEL = {
+    width: 460,
+};
+// Bottom sheet dimensions
+export const BOTTOM_SHEET = {
+    maxWidth: 500,
+    maxHeight: "92vh",
+    minIframeHeight: 580,
+    handleWidth: 36,
+    handleHeight: 4,
+};
+// Floating popup dimensions
+export const POPUP = {
+    width: 420,
+    height: 640,
+    offset: 24,
+    borderRadius: 16,
+};
+// Fullscreen background
+export const FULLSCREEN = {
+    background: "rgba(247,248,250,1)",
+    backgroundTransparent: "rgba(247,248,250,0)",
+};
+// Auto-close delay after successful payment (ms)
+export const SUCCESS_AUTO_CLOSE_MS = 2500;
+//# sourceMappingURL=constants.js.map

package/dist/overlay/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/overlay/constants.ts"],"names":[],"mappings":"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"}

package/dist/overlay/index.d.ts

@@ -0,0 +1,3 @@
+export { OVERLAY_Z_INDEX, EASING, MSG_PREFIX, VARIATION_ALIASES, VARIATIONS, CLOSE_BUTTON, BACKDROP, CARD, PANEL, BOTTOM_SHEET, POPUP, FULLSCREEN, SUCCESS_AUTO_CLOSE_MS, } from "./constants.js";
+export type { VariationName, VariationMeta } from "./constants.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/overlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,MAAM,EACN,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,KAAK,EACL,UAAU,EACV,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AAExB,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/overlay/index.js

@@ -0,0 +1,2 @@
+export { OVERLAY_Z_INDEX, EASING, MSG_PREFIX, VARIATION_ALIASES, VARIATIONS, CLOSE_BUTTON, BACKDROP, CARD, PANEL, BOTTOM_SHEET, POPUP, FULLSCREEN, SUCCESS_AUTO_CLOSE_MS, } from "./constants.js";
+//# sourceMappingURL=index.js.map

package/dist/overlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,MAAM,EACN,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,KAAK,EACL,UAAU,EACV,qBAAqB,GACtB,MAAM,gBAAgB,CAAC"}

package/dist/plans.d.ts

@@ -0,0 +1,82 @@
+export type PlanId = "free" | "starter" | "growth" | "enterprise";
+export type BillingStatus = "active" | "past_due" | "restricted" | "suspended";
+export interface PlanConfig {
+    id: PlanId;
+    name: string;
+    description: string;
+    monthlyMinimum: number;
+    volumeBps: number;
+    perPaymentFee: number;
+    includedVolumeUsd: number;
+    features: string[];
+    requiresCard: boolean;
+}
+export declare const PLANS: Record<PlanId, PlanConfig>;
+export interface MarketingPlan {
+    id: PlanId;
+    name: string;
+    price: string;
+    period: string;
+    badge?: string;
+    subheadline: string;
+    features: string[];
+    ctaLabel: string;
+    ctaHref: string;
+    ctaExternal?: boolean;
+}
+export declare const MARKETING_PLANS: MarketingPlan[];
+export interface MarketingSandboxPlan {
+    name: string;
+    price: string;
+    period: string;
+    features: string[];
+    ctaLabel: string;
+    ctaHref: string;
+    footnote: string;
+}
+export declare const MARKETING_SANDBOX: MarketingSandboxPlan;
+export type ComparisonValue = boolean | string | Record<string, boolean | string>;
+export interface ComparisonFeature {
+    name: string;
+    value: ComparisonValue;
+}
+export interface ComparisonSection {
+    title: string;
+    features: ComparisonFeature[];
+}
+export declare const COMPARISON_PLANS: readonly ["Sandbox", "Starter", "Growth", "Scale"];
+export declare const COMPARISON_DATA: ComparisonSection[];
+export interface FaqEntry {
+    id: string;
+    question: string;
+    answer: string;
+}
+export declare const PRICING_FAQS: FaqEntry[];
+export declare const MID_CYCLE_THRESHOLD_USD = 100;
+export declare const PAST_DUE_RESTRICT_HOURS = 48;
+export declare const RESTRICT_SUSPEND_HOURS = 168;
+export declare const USAGE_WARNING_THRESHOLD = 0.8;
+export declare const BILLING_EMAIL_EVENTS: {
+    readonly CARD_REQUIRED: "card_required";
+    readonly USAGE_APPROACHING_LIMIT: "usage_approaching_limit";
+    readonly MID_CYCLE_CHARGE: "mid_cycle_charge";
+    readonly PAYMENT_FAILED: "payment_failed";
+    readonly SERVICE_RESTRICTED: "service_restricted";
+    readonly SERVICE_SUSPENDED: "service_suspended";
+    readonly PAYMENT_RECOVERED: "payment_recovered";
+};
+export declare const BILLING_EVENT_TYPES: {
+    readonly PLAN_CHANGED: "plan_changed";
+    readonly SUBSCRIPTION_CREATED: "subscription_created";
+    readonly USAGE_RECORDED: "usage_recorded";
+    readonly INVOICE_CREATED: "invoice_created";
+    readonly INVOICE_PAID: "invoice_paid";
+    readonly INVOICE_FAILED: "invoice_failed";
+    readonly MID_CYCLE_INVOICE: "mid_cycle_invoice";
+    readonly STATUS_CHANGED: "status_changed";
+    readonly PAYMENT_METHOD_UPDATED: "payment_method_updated";
+    readonly ACCOUNT_RESTRICTED: "account_restricted";
+    readonly ACCOUNT_SUSPENDED: "account_suspended";
+    readonly ACCOUNT_RECOVERED: "account_recovered";
+};
+//# sourceMappingURL=plans.d.ts.map

package/dist/plans.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plans.d.ts","sourceRoot":"","sources":["../src/plans.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAC;AAElE,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,YAAY,GAAG,WAAW,CAAC;AAE/E,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAqE5C,CAAC;AAQF,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,eAAe,EAAE,aAAa,EAkD1C,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,iBAAiB,EAAE,oBAe/B,CAAC;AAMF,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAElF,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,eAAe,CAAC;CACxB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,iBAAiB,EAAE,CAAC;CAC/B;AAED,eAAO,MAAM,gBAAgB,oDAAqD,CAAC;AAEnF,eAAO,MAAM,eAAe,EAAE,iBAAiB,EA+D9C,CAAC;AAMF,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,YAAY,EAAE,QAAQ,EAyClC,CAAC;AAMF,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAE3C,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAE3C,eAAO,MAAM,oBAAoB;;;;;;;;CAQvB,CAAC;AAEX,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;CAatB,CAAC"}

package/dist/plans.js

@@ -0,0 +1,277 @@
+// @billing-io/designs — Canonical plan definitions
+// All billing.io projects should import plan data from this package.
+export const PLANS = {
+    free: {
+        id: "free",
+        name: "Free",
+        description: "For development and testing",
+        monthlyMinimum: 0,
+        volumeBps: 0,
+        perPaymentFee: 0,
+        includedVolumeUsd: 2000,
+        features: [
+            "Up to $2,000/month processed",
+            "Limited API rate",
+            "No production SLA",
+            "No webhook retries",
+        ],
+        requiresCard: false,
+    },
+    starter: {
+        id: "starter",
+        name: "Starter",
+        description: "For production applications",
+        monthlyMinimum: 49,
+        volumeBps: 30, // 0.30%
+        perPaymentFee: 0.02,
+        includedVolumeUsd: 5000,
+        features: [
+            "0.30% of settled volume",
+            "$0.02 per successful payment",
+            "First $5,000/month included",
+            "Standard webhooks",
+            "Email support",
+        ],
+        requiresCard: true,
+    },
+    growth: {
+        id: "growth",
+        name: "Growth",
+        description: "For scaling businesses",
+        monthlyMinimum: 199,
+        volumeBps: 20, // 0.20%
+        perPaymentFee: 0.02,
+        includedVolumeUsd: 50000,
+        features: [
+            "0.20% of settled volume",
+            "$0.02 per successful payment",
+            "First $50,000/month included",
+            "Webhook retries + logs",
+            "Team access",
+            "Priority email support",
+        ],
+        requiresCard: true,
+    },
+    enterprise: {
+        id: "enterprise",
+        name: "Enterprise",
+        description: "Custom pricing and SLA",
+        monthlyMinimum: 2000,
+        volumeBps: 10, // 0.10-0.15%, configurable
+        perPaymentFee: 0.02,
+        includedVolumeUsd: 500000,
+        features: [
+            "0.10-0.15% volume rate",
+            "Custom minimums",
+            "SLA guarantee",
+            "Dedicated infrastructure",
+            "Custom confirmations",
+        ],
+        requiresCard: true,
+    },
+};
+export const MARKETING_PLANS = [
+    {
+        id: "starter",
+        name: "Starter",
+        price: `$${PLANS.starter.monthlyMinimum}`,
+        period: "/month",
+        badge: "Most common",
+        subheadline: `${(PLANS.starter.volumeBps / 100).toFixed(2)}% of volume + $${PLANS.starter.perPaymentFee.toFixed(2)} per payment.`,
+        features: [
+            "Branded checkout on your domain",
+            "Embeddable checkout",
+            "SDK access",
+            "Signed webhooks",
+            "Dashboard and analytics",
+            "Email support",
+        ],
+        ctaLabel: "Go live",
+        ctaHref: "https://app.billing.io/signup",
+    },
+    {
+        id: "growth",
+        name: "Growth",
+        price: `$${PLANS.growth.monthlyMinimum}`,
+        period: "/month",
+        subheadline: `${(PLANS.growth.volumeBps / 100).toFixed(2)}% of volume + $${PLANS.growth.perPaymentFee.toFixed(2)} per payment.`,
+        features: [
+            "Everything in Starter",
+            "Webhook retries and logs",
+            "Team access (up to 5)",
+            "Priority support",
+        ],
+        ctaLabel: "Upgrade to Growth",
+        ctaHref: "https://app.billing.io/signup",
+    },
+    {
+        id: "enterprise",
+        name: "Scale",
+        price: `$${PLANS.enterprise.monthlyMinimum}`,
+        period: "/month",
+        subheadline: `${(PLANS.enterprise.volumeBps / 100).toFixed(2)}% of volume + $${PLANS.enterprise.perPaymentFee.toFixed(2)} per payment.`,
+        features: [
+            "Everything in Growth",
+            "Higher throughput and billing caps",
+            "Unlimited team members",
+            "Direct support channel",
+        ],
+        ctaLabel: "Contact sales",
+        ctaHref: "https://wa.me/message/ZTXL4WR3SWZQP1",
+        ctaExternal: true,
+    },
+];
+export const MARKETING_SANDBOX = {
+    name: "Sandbox (development only)",
+    price: "$0",
+    period: "/month",
+    features: [
+        "Testnet access only",
+        "Full SDK access",
+        "Simulated webhooks",
+        "Dashboard preview",
+        "No card required",
+        "No time limit",
+    ],
+    ctaLabel: "Start in sandbox",
+    ctaHref: "https://app.billing.io/signup",
+    footnote: "Production usage requires a paid plan.",
+};
+export const COMPARISON_PLANS = ["Sandbox", "Starter", "Growth", "Scale"];
+export const COMPARISON_DATA = [
+    {
+        title: "Payments",
+        features: [
+            { name: "Testnet access", value: true },
+            {
+                name: "Mainnet payments",
+                value: { Sandbox: false, Starter: true, Growth: true, Scale: true },
+            },
+            {
+                name: "Hosted checkout",
+                value: { Sandbox: false, Starter: true, Growth: true, Scale: true },
+            },
+            {
+                name: "Embeddable checkout",
+                value: { Sandbox: false, Starter: true, Growth: true, Scale: true },
+            },
+        ],
+    },
+    {
+        title: "Developer tools",
+        features: [
+            { name: "SDK access", value: true },
+            {
+                name: "Webhooks",
+                value: { Sandbox: "Simulated", Starter: "Signed", Growth: "Signed", Scale: "Signed" },
+            },
+            {
+                name: "Webhook retries",
+                value: { Sandbox: false, Starter: false, Growth: true, Scale: true },
+            },
+            {
+                name: "Dashboard",
+                value: { Sandbox: "Preview", Starter: true, Growth: true, Scale: true },
+            },
+        ],
+    },
+    {
+        title: "Team and support",
+        features: [
+            {
+                name: "Team members",
+                value: { Sandbox: "1", Starter: "1", Growth: "Up to 5", Scale: "Unlimited" },
+            },
+            {
+                name: "Support level",
+                value: { Sandbox: "Docs only", Starter: "Email", Growth: "Priority", Scale: "Direct channel" },
+            },
+        ],
+    },
+    {
+        title: "Billing and limits",
+        features: [
+            {
+                name: "Billing cap",
+                value: { Sandbox: "N/A", Starter: "$200", Growth: "$500", Scale: "$1,500" },
+            },
+            {
+                name: "Fiat access eligibility",
+                value: { Sandbox: false, Starter: "After volume", Growth: "After volume", Scale: "After volume" },
+            },
+        ],
+    },
+];
+export const PRICING_FAQS = [
+    {
+        id: "faq-1",
+        question: "Do I need a credit card to start?",
+        answer: "Not for sandbox. You can build and test without a card. A payment method is required when you move to production.",
+    },
+    {
+        id: "faq-2",
+        question: "When do I start paying?",
+        answer: "You can build and test for free in sandbox. Production usage is billed according to your plan when you process real payments.",
+    },
+    {
+        id: "faq-3",
+        question: "When do you charge me?",
+        answer: "Your plan fee is charged at the start of each billing cycle. Usage fees are charged when they hit a cap or at month-end.",
+    },
+    {
+        id: "faq-4",
+        question: "What happens if my card fails?",
+        answer: "We notify you and retry. If payment stays unresolved, production features may be paused until it is sorted out.",
+    },
+    {
+        id: "faq-5",
+        question: "Do you hold my funds?",
+        answer: "No. Payments settle directly to your wallet. billing.io is non-custodial.",
+    },
+    {
+        id: "faq-6",
+        question: "Can I upgrade or downgrade plans?",
+        answer: "Yes. We recommend upgrades automatically when they save you money at your current volume.",
+    },
+    {
+        id: "faq-7",
+        question: "When can I access fiat payments?",
+        answer: "Fiat access becomes available after you process meaningful volume. It is not included by default.",
+    },
+    {
+        id: "faq-8",
+        question: "Is billing.io right for low-volume projects?",
+        answer: "If you are still building, use the sandbox. Production plans are designed for businesses processing real payments.",
+    },
+];
+// ---------------------------------------------------------------------------
+// Billing system constants (thresholds, events)
+// ---------------------------------------------------------------------------
+export const MID_CYCLE_THRESHOLD_USD = 100;
+export const PAST_DUE_RESTRICT_HOURS = 48;
+export const RESTRICT_SUSPEND_HOURS = 168; // 7 days
+export const USAGE_WARNING_THRESHOLD = 0.8; // 80%
+export const BILLING_EMAIL_EVENTS = {
+    CARD_REQUIRED: "card_required",
+    USAGE_APPROACHING_LIMIT: "usage_approaching_limit",
+    MID_CYCLE_CHARGE: "mid_cycle_charge",
+    PAYMENT_FAILED: "payment_failed",
+    SERVICE_RESTRICTED: "service_restricted",
+    SERVICE_SUSPENDED: "service_suspended",
+    PAYMENT_RECOVERED: "payment_recovered",
+};
+export const BILLING_EVENT_TYPES = {
+    PLAN_CHANGED: "plan_changed",
+    SUBSCRIPTION_CREATED: "subscription_created",
+    USAGE_RECORDED: "usage_recorded",
+    INVOICE_CREATED: "invoice_created",
+    INVOICE_PAID: "invoice_paid",
+    INVOICE_FAILED: "invoice_failed",
+    MID_CYCLE_INVOICE: "mid_cycle_invoice",
+    STATUS_CHANGED: "status_changed",
+    PAYMENT_METHOD_UPDATED: "payment_method_updated",
+    ACCOUNT_RESTRICTED: "account_restricted",
+    ACCOUNT_SUSPENDED: "account_suspended",
+    ACCOUNT_RECOVERED: "account_recovered",
+};
+//# sourceMappingURL=plans.js.map