@nozle-js/react 0.3.0

package/dist/index.cjs

@@ -0,0 +1,1009 @@
+'use strict';
+
+var react = require('react');
+var stripeJs = require('@stripe/stripe-js');
+var centrifuge = require('centrifuge');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/provider.tsx
+
+// src/store.ts
+var BillingStore = class {
+  baseUrl;
+  apiKey;
+  customerId;
+  state = {
+    entitlements: null,
+    credits: null,
+    usage: {},
+    connectionState: "connecting",
+    error: null
+  };
+  listeners = /* @__PURE__ */ new Set();
+  constructor(baseUrl, apiKey, customerId) {
+    this.baseUrl = baseUrl;
+    this.apiKey = apiKey;
+    this.customerId = customerId;
+  }
+  getSnapshot = () => this.state;
+  getServerSnapshot = () => this.state;
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+  emit() {
+    for (const listener of this.listeners) {
+      listener();
+    }
+  }
+  setConnectionState(state) {
+    this.state = { ...this.state, connectionState: state };
+    this.emit();
+  }
+  setError(error) {
+    this.state = { ...this.state, error };
+    this.emit();
+  }
+  updateUsage(metric, used, limit, remaining) {
+    this.state = {
+      ...this.state,
+      usage: {
+        ...this.state.usage,
+        [metric]: { used, limit, remaining }
+      }
+    };
+    this.emit();
+  }
+  async fetchUsage(feature) {
+    try {
+      const res = await fetch(
+        `${this.baseUrl}/v1/can?customer_id=${this.customerId}&feature=${feature}`,
+        { headers: { Authorization: `Bearer ${this.apiKey}` } }
+      );
+      if (!res.ok) return;
+      const data = await res.json();
+      this.updateUsage(feature, data.used, data.limit, data.remaining);
+      this.state = {
+        ...this.state,
+        entitlements: {
+          plan_slug: "pro",
+          subscription_status: "active",
+          features: { [feature]: { enabled: data.allowed } },
+          limits: { [feature]: { limit: data.limit, used: data.used, source: "entitlement" } }
+        }
+      };
+      this.emit();
+    } catch (err) {
+      this.state = {
+        ...this.state,
+        error: err instanceof Error ? err : new Error(String(err))
+      };
+      this.emit();
+    }
+  }
+  async fetchCheckoutSecret(planCode, successUrl) {
+    const res = await fetch(`${this.baseUrl}/v1/checkout`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${this.apiKey}`,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        plan_code: planCode,
+        customer_id: this.customerId,
+        success_url: successUrl || `${window.location.origin}/checkout/complete?session_id={CHECKOUT_SESSION_ID}`
+      })
+    });
+    if (!res.ok) throw new Error("Failed to create checkout session");
+    const data = await res.json();
+    return data.client_secret;
+  }
+  async fetchPlans() {
+    const res = await fetch(`${this.baseUrl}/v1/plans`, {
+      headers: { Authorization: `Bearer ${this.apiKey}` }
+    });
+    if (!res.ok) return [];
+    const data = await res.json();
+    return data.plans || [];
+  }
+  handleEvent(event) {
+    if (event.type === "usage.updated") {
+      const metric = event.metric;
+      const used = event.used;
+      const limit = event.limit;
+      const remaining = event.remaining;
+      this.updateUsage(metric, used, limit, remaining);
+    }
+  }
+};
+function connectCentrifugo(store, customerId, wsUrl) {
+  const centrifuge$1 = new centrifuge.Centrifuge(wsUrl, {});
+  const sub = centrifuge$1.newSubscription(
+    `customer:${customerId}`
+  );
+  sub.on("publication", (ctx) => {
+    store.handleEvent(
+      ctx.data
+    );
+  });
+  sub.on("subscribed", () => {
+    store.setConnectionState("connected");
+  });
+  centrifuge$1.on("connected", () => {
+    store.setConnectionState("connected");
+  });
+  centrifuge$1.on("disconnected", () => {
+    store.setConnectionState("disconnected");
+  });
+  sub.subscribe();
+  centrifuge$1.connect();
+  store.setConnectionState("connecting");
+  return {
+    disconnect: () => {
+      sub.unsubscribe();
+      centrifuge$1.disconnect();
+    }
+  };
+}
+var BillingContext = react.createContext(null);
+function BillingProvider({
+  apiKey,
+  customerId,
+  baseUrl = "http://localhost:8080",
+  wsUrl = "ws://localhost:8001/connection/websocket",
+  stripeKey,
+  features = [],
+  children
+}) {
+  const storeRef = react.useRef(null);
+  if (!storeRef.current) {
+    storeRef.current = new BillingStore(baseUrl, apiKey, customerId);
+  }
+  const stripePromise = react.useMemo(
+    () => stripeKey ? stripeJs.loadStripe(stripeKey) : null,
+    [stripeKey]
+  );
+  react.useEffect(() => {
+    const store = storeRef.current;
+    for (const feature of features) {
+      store.fetchUsage(feature);
+    }
+    const connection = connectCentrifugo(
+      store,
+      customerId,
+      wsUrl
+    );
+    return () => {
+      connection.disconnect();
+    };
+  }, [apiKey, customerId, baseUrl, wsUrl, features]);
+  return /* @__PURE__ */ jsxRuntime.jsx(BillingContext.Provider, { value: { store: storeRef.current, stripePromise }, children });
+}
+function useBillingContext() {
+  const ctx = react.useContext(BillingContext);
+  if (!ctx) {
+    throw new Error("useBillingContext must be used within a BillingProvider");
+  }
+  return ctx;
+}
+function useCan(feature) {
+  const { store } = useBillingContext();
+  const state = react.useSyncExternalStore(
+    store.subscribe,
+    store.getSnapshot,
+    store.getServerSnapshot
+  );
+  if (state.error) {
+    return { allowed: false, isLoading: false, error: state.error };
+  }
+  if (state.entitlements === null) {
+    return { allowed: false, isLoading: true, error: null };
+  }
+  const featureState = state.entitlements.features[feature];
+  return {
+    allowed: featureState?.enabled ?? false,
+    isLoading: false,
+    error: null
+  };
+}
+function useUsage(metric) {
+  const { store } = useBillingContext();
+  const state = react.useSyncExternalStore(
+    store.subscribe,
+    store.getSnapshot,
+    store.getServerSnapshot
+  );
+  if (state.error) {
+    return { data: null, isLoading: false, error: state.error };
+  }
+  if (state.entitlements === null) {
+    return { data: null, isLoading: true, error: null };
+  }
+  const usage = state.usage[metric] ?? null;
+  return { data: usage, isLoading: false, error: null };
+}
+function usePlan() {
+  const { store } = useBillingContext();
+  const state = react.useSyncExternalStore(
+    store.subscribe,
+    store.getSnapshot,
+    store.getServerSnapshot
+  );
+  if (state.error) {
+    return { data: null, isLoading: false, error: state.error };
+  }
+  if (state.entitlements === null) {
+    return { data: null, isLoading: true, error: null };
+  }
+  return {
+    data: {
+      plan_slug: state.entitlements.plan_slug,
+      subscription_status: state.entitlements.subscription_status
+    },
+    isLoading: false,
+    error: null
+  };
+}
+function useCheckout() {
+  const { store, stripePromise } = useBillingContext();
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const fetchClientSecret = react.useCallback(
+    async (planCode, successUrl) => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        return await store.fetchCheckoutSecret(planCode, successUrl);
+      } catch (err) {
+        const e = err instanceof Error ? err : new Error(String(err));
+        setError(e);
+        throw e;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [store]
+  );
+  return { fetchClientSecret, stripePromise, isLoading, error };
+}
+function useSubscribe() {
+  const { store } = useBillingContext();
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const subscribe = react.useCallback(
+    async (planCode) => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const res = await fetch(`${store.baseUrl}/v1/subscribe`, {
+          method: "POST",
+          headers: {
+            Authorization: `Bearer ${store.apiKey}`,
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            plan_code: planCode,
+            customer_id: store.customerId
+          })
+        });
+        if (!res.ok) throw new Error("Failed to create subscription");
+        return await res.json();
+      } catch (err) {
+        const e = err instanceof Error ? err : new Error(String(err));
+        setError(e);
+        throw e;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [store]
+  );
+  return { subscribe, isLoading, error };
+}
+function usePlans() {
+  const { store } = useBillingContext();
+  const [plans, setPlans] = react.useState([]);
+  const [isLoading, setIsLoading] = react.useState(true);
+  react.useEffect(() => {
+    store.fetchPlans().then(setPlans).finally(() => setIsLoading(false));
+  }, [store]);
+  return { plans, isLoading };
+}
+var fontFamily = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+var levelColors = {
+  normal: {
+    fg: "#6366f1",
+    bg: "rgba(99, 102, 241, 0.08)",
+    trackBg: "#e5e7eb"
+  },
+  warning: {
+    fg: "#f59e0b",
+    bg: "rgba(245, 158, 11, 0.08)",
+    trackBg: "#e5e7eb"
+  },
+  critical: {
+    fg: "#ef4444",
+    bg: "rgba(239, 68, 68, 0.08)",
+    trackBg: "#e5e7eb"
+  }
+};
+var skeletonStyleInjected = false;
+function ensureKeyframes() {
+  if (skeletonStyleInjected || typeof document === "undefined") return;
+  const sheet = document.createElement("style");
+  sheet.textContent = `@keyframes nozle-pulse{0%,100%{opacity:1}50%{opacity:.4}}`;
+  document.head.appendChild(sheet);
+  skeletonStyleInjected = true;
+}
+function UsageMeter({
+  metric,
+  variant = "bar",
+  className,
+  style,
+  ...props
+}) {
+  const { data, isLoading, error } = useUsage(metric);
+  if (isLoading) {
+    ensureKeyframes();
+    if (variant === "minimal") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "data-nozle": "usage-meter",
+          "data-variant": "minimal",
+          className,
+          style: {
+            display: "inline-block",
+            width: 80,
+            height: 16,
+            borderRadius: 4,
+            background: "#e5e7eb",
+            animation: "nozle-pulse 1.5s ease-in-out infinite",
+            ...style
+          },
+          ...props
+        }
+      );
+    }
+    if (variant === "ring") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-nozle": "usage-meter",
+          "data-variant": "ring",
+          className,
+          style: {
+            width: 96,
+            height: 96,
+            borderRadius: "50%",
+            background: "#e5e7eb",
+            animation: "nozle-pulse 1.5s ease-in-out infinite",
+            ...style
+          },
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-nozle": "usage-meter",
+        "data-variant": "bar",
+        className,
+        style: {
+          maxWidth: 360,
+          fontFamily,
+          ...style
+        },
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              height: 8,
+              borderRadius: 4,
+              background: "#e5e7eb",
+              animation: "nozle-pulse 1.5s ease-in-out infinite"
+            }
+          }
+        )
+      }
+    );
+  }
+  if (error || !data) return null;
+  const percent = data.limit > 0 ? Math.round(data.used / data.limit * 100) : 0;
+  const level = percent >= 90 ? "critical" : percent >= 75 ? "warning" : "normal";
+  const colors = levelColors[level];
+  if (variant === "minimal") {
+    const minimalStyle = {
+      fontFamily,
+      fontSize: 13,
+      fontWeight: 500,
+      color: colors.fg,
+      background: colors.bg,
+      padding: "3px 8px",
+      borderRadius: 6,
+      whiteSpace: "nowrap",
+      ...style
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        "data-nozle": "usage-meter",
+        "data-variant": "minimal",
+        "data-level": level,
+        className,
+        style: minimalStyle,
+        ...props,
+        children: [
+          data.used.toLocaleString(),
+          "/",
+          data.limit.toLocaleString()
+        ]
+      }
+    );
+  }
+  if (variant === "ring") {
+    const size = 96;
+    const strokeWidth = 7;
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - percent / 100 * circumference;
+    const containerStyle = {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: size,
+      height: size,
+      fontFamily,
+      ...style
+    };
+    const labelStyle2 = {
+      position: "absolute",
+      inset: 0,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      fontWeight: 700,
+      fontSize: 20,
+      lineHeight: 1,
+      color: colors.fg
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-nozle": "usage-meter",
+        "data-variant": "ring",
+        "data-level": level,
+        className,
+        style: containerStyle,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              viewBox: `0 0 ${size} ${size}`,
+              width: size,
+              height: size,
+              style: { display: "block", transform: "rotate(-90deg)" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: size / 2,
+                    cy: size / 2,
+                    r: radius,
+                    fill: "none",
+                    stroke: colors.trackBg,
+                    strokeWidth
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: size / 2,
+                    cy: size / 2,
+                    r: radius,
+                    fill: "none",
+                    stroke: colors.fg,
+                    strokeWidth,
+                    strokeDasharray: circumference,
+                    strokeDashoffset: offset,
+                    strokeLinecap: "round",
+                    style: { transition: "stroke-dashoffset 0.4s ease" }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-nozle": "usage-meter-label", style: labelStyle2, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              percent,
+              "%"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                style: {
+                  fontSize: 10,
+                  fontWeight: 400,
+                  color: "#6b7280",
+                  marginTop: 2
+                },
+                children: "used"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+  const cardStyle = {
+    fontFamily,
+    maxWidth: 360,
+    background: "#ffffff",
+    border: "1px solid #e5e7eb",
+    borderRadius: 12,
+    padding: "16px 20px",
+    boxShadow: "0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02)",
+    ...style
+  };
+  const headerStyle = {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "baseline",
+    marginBottom: 10
+  };
+  const labelStyle = {
+    fontSize: 13,
+    fontWeight: 500,
+    color: "#374151"
+  };
+  const valueStyle = {
+    fontSize: 13,
+    fontWeight: 600,
+    color: colors.fg
+  };
+  const trackStyle = {
+    height: 8,
+    borderRadius: 4,
+    background: colors.trackBg,
+    overflow: "hidden"
+  };
+  const fillStyle = {
+    height: "100%",
+    borderRadius: 4,
+    background: colors.fg,
+    width: `${Math.min(percent, 100)}%`,
+    transition: "width 0.4s ease"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-nozle": "usage-meter",
+      "data-variant": "bar",
+      "data-level": level,
+      className,
+      style: cardStyle,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-nozle": "usage-meter-label", style: labelStyle, children: [
+            data.used.toLocaleString(),
+            " / ",
+            data.limit.toLocaleString()
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: valueStyle, children: [
+            percent,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-nozle": "usage-meter-track", style: trackStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-nozle": "usage-meter-fill", style: fillStyle }) })
+      ]
+    }
+  );
+}
+var fontFamily2 = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+var statusColorMap = {
+  active: { dot: "#22c55e", bg: "rgba(34, 197, 94, 0.08)", text: "#15803d" },
+  trialing: { dot: "#6366f1", bg: "rgba(99, 102, 241, 0.08)", text: "#4f46e5" },
+  past_due: { dot: "#f59e0b", bg: "rgba(245, 158, 11, 0.08)", text: "#b45309" },
+  canceled: { dot: "#6b7280", bg: "rgba(107, 114, 128, 0.08)", text: "#4b5563" },
+  unpaid: { dot: "#ef4444", bg: "rgba(239, 68, 68, 0.08)", text: "#dc2626" },
+  incomplete: { dot: "#f59e0b", bg: "rgba(245, 158, 11, 0.08)", text: "#b45309" }
+};
+var defaultStatusColors = { dot: "#6366f1", bg: "rgba(99, 102, 241, 0.08)", text: "#4f46e5" };
+function getStatusColors(status) {
+  return statusColorMap[status] ?? defaultStatusColors;
+}
+var skeletonStyleInjected2 = false;
+function ensureKeyframes2() {
+  if (skeletonStyleInjected2 || typeof document === "undefined") return;
+  const sheet = document.createElement("style");
+  sheet.textContent = `@keyframes nozle-pulse{0%,100%{opacity:1}50%{opacity:.4}}`;
+  document.head.appendChild(sheet);
+  skeletonStyleInjected2 = true;
+}
+function PlanBadge({
+  variant = "pill",
+  className,
+  style,
+  ...props
+}) {
+  const { data, isLoading, error } = usePlan();
+  if (isLoading) {
+    ensureKeyframes2();
+    if (variant === "icon") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "data-nozle": "plan-badge",
+          "data-variant": "icon",
+          className,
+          style: {
+            display: "inline-block",
+            width: 32,
+            height: 32,
+            borderRadius: "50%",
+            background: "#e5e7eb",
+            animation: "nozle-pulse 1.5s ease-in-out infinite",
+            ...style
+          },
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "data-nozle": "plan-badge",
+        "data-variant": variant,
+        className,
+        style: {
+          display: "inline-block",
+          width: 72,
+          height: 22,
+          borderRadius: variant === "pill" ? 999 : 4,
+          background: "#e5e7eb",
+          animation: "nozle-pulse 1.5s ease-in-out infinite",
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+  if (error || !data) return null;
+  const statusLabel = data.subscription_status.replace(/_/g, " ");
+  const colors = getStatusColors(data.subscription_status);
+  const planName = data.plan_slug;
+  if (variant === "text") {
+    const textStyle = {
+      fontFamily: fontFamily2,
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 6,
+      fontSize: 14,
+      fontWeight: 500,
+      color: "#111827",
+      ...style
+    };
+    const dotStyle2 = {
+      width: 8,
+      height: 8,
+      borderRadius: "50%",
+      background: colors.dot,
+      flexShrink: 0
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        "data-nozle": "plan-badge",
+        "data-variant": "text",
+        "data-status": data.subscription_status,
+        className,
+        style: textStyle,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle2, "aria-hidden": "true" }),
+          planName
+        ]
+      }
+    );
+  }
+  if (variant === "icon") {
+    const iconStyle = {
+      fontFamily: fontFamily2,
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: 32,
+      height: 32,
+      borderRadius: "50%",
+      background: colors.bg,
+      color: colors.text,
+      fontSize: 14,
+      fontWeight: 700,
+      lineHeight: 1,
+      flexShrink: 0,
+      ...style
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "data-nozle": "plan-badge",
+        "data-variant": "icon",
+        "data-status": data.subscription_status,
+        className,
+        style: iconStyle,
+        title: `${planName} (${statusLabel})`,
+        ...props,
+        children: planName.charAt(0).toUpperCase()
+      }
+    );
+  }
+  const pillStyle = {
+    fontFamily: fontFamily2,
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    fontSize: 12,
+    fontWeight: 600,
+    lineHeight: 1.4,
+    color: colors.text,
+    background: colors.bg,
+    padding: "4px 12px",
+    borderRadius: 999,
+    whiteSpace: "nowrap",
+    ...style
+  };
+  const dotStyle = {
+    width: 6,
+    height: 6,
+    borderRadius: "50%",
+    background: colors.dot,
+    flexShrink: 0
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "data-nozle": "plan-badge",
+      "data-variant": "pill",
+      "data-status": data.subscription_status,
+      className,
+      style: pillStyle,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle, "aria-hidden": "true" }),
+        planName
+      ]
+    }
+  );
+}
+var fontFamily3 = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+var primaryColor = "#6366f1";
+var primaryHover = "#4f46e5";
+function UpgradePrompt({
+  feature,
+  variant = "card",
+  upgradeUrl = "/upgrade",
+  message = "Upgrade your plan to unlock this feature",
+  className,
+  style,
+  ...props
+}) {
+  const { allowed, isLoading } = useCan(feature ?? "");
+  if (isLoading || allowed || !feature) return null;
+  if (variant === "inline") {
+    const inlineStyle = {
+      fontFamily: fontFamily3,
+      fontSize: 13,
+      color: "#6b7280",
+      ...style
+    };
+    const linkStyle = {
+      color: primaryColor,
+      fontWeight: 600,
+      textDecoration: "none",
+      marginLeft: 4
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        "data-nozle": "upgrade-prompt",
+        "data-variant": "inline",
+        className,
+        style: inlineStyle,
+        ...props,
+        children: [
+          message,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: upgradeUrl,
+              "data-nozle": "upgrade-prompt-link",
+              style: linkStyle,
+              onMouseEnter: (e) => {
+                e.currentTarget.style.textDecoration = "underline";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.textDecoration = "none";
+              },
+              children: "Upgrade"
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (variant === "banner") {
+    const bannerStyle = {
+      fontFamily: fontFamily3,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: 16,
+      background: "rgba(99, 102, 241, 0.06)",
+      border: "1px solid rgba(99, 102, 241, 0.15)",
+      borderRadius: 10,
+      padding: "12px 20px",
+      ...style
+    };
+    const msgStyle2 = {
+      fontSize: 14,
+      fontWeight: 500,
+      color: "#374151",
+      flex: 1
+    };
+    const btnStyle2 = {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: 13,
+      fontWeight: 600,
+      color: "#ffffff",
+      background: primaryColor,
+      border: "none",
+      borderRadius: 8,
+      padding: "8px 18px",
+      textDecoration: "none",
+      cursor: "pointer",
+      whiteSpace: "nowrap",
+      transition: "background 0.15s ease"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-nozle": "upgrade-prompt",
+        "data-variant": "banner",
+        className,
+        style: bannerStyle,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "data-nozle": "upgrade-prompt-message", style: msgStyle2, children: message }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: upgradeUrl,
+              "data-nozle": "upgrade-prompt-action",
+              style: btnStyle2,
+              onMouseEnter: (e) => {
+                e.currentTarget.style.background = primaryHover;
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.background = primaryColor;
+              },
+              children: "Upgrade"
+            }
+          )
+        ]
+      }
+    );
+  }
+  const cardStyle = {
+    fontFamily: fontFamily3,
+    maxWidth: 400,
+    background: "#ffffff",
+    border: "1px solid #e5e7eb",
+    borderRadius: 16,
+    padding: 24,
+    boxShadow: "0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02)",
+    textAlign: "center",
+    ...style
+  };
+  const iconWrapStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 48,
+    height: 48,
+    borderRadius: 12,
+    background: "rgba(99, 102, 241, 0.08)",
+    marginBottom: 16
+  };
+  const msgStyle = {
+    fontSize: 15,
+    fontWeight: 500,
+    color: "#374151",
+    lineHeight: 1.5,
+    margin: 0,
+    marginBottom: 20
+  };
+  const btnStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: 14,
+    fontWeight: 600,
+    color: "#ffffff",
+    background: primaryColor,
+    border: "none",
+    borderRadius: 10,
+    padding: "10px 24px",
+    textDecoration: "none",
+    cursor: "pointer",
+    transition: "background 0.15s ease",
+    width: "100%"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-nozle": "upgrade-prompt",
+      "data-variant": "card",
+      className,
+      style: cardStyle,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-nozle": "upgrade-prompt-content", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: iconWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: primaryColor,
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { "data-nozle": "upgrade-prompt-message", style: msgStyle, children: message })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: upgradeUrl,
+            "data-nozle": "upgrade-prompt-action",
+            style: btnStyle,
+            onMouseEnter: (e) => {
+              e.currentTarget.style.background = primaryHover;
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.background = primaryColor;
+            },
+            children: "Upgrade Now"
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.BillingProvider = BillingProvider;
+exports.PlanBadge = PlanBadge;
+exports.UpgradePrompt = UpgradePrompt;
+exports.UsageMeter = UsageMeter;
+exports.useBillingContext = useBillingContext;
+exports.useCan = useCan;
+exports.useCheckout = useCheckout;
+exports.usePlan = usePlan;
+exports.usePlans = usePlans;
+exports.useSubscribe = useSubscribe;
+exports.useUsage = useUsage;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map