@nozle-js/react 0.5.1 → 0.5.3

package/README.md

@@ -169,6 +169,92 @@ function AfterPayment({ planCode }: { planCode: string }) {
 
 Pre-built UI components with built-in styling. No CSS imports needed.
 
+### `PricingTable`
+
+Renders plan cards in a responsive grid with monthly/annual toggle, current plan detection, and CSS variable theming. Auto-fetches plans from the API if none are provided.
+
+```tsx
+import { PricingTable } from "@nozle-js/react";
+
+// Auto-fetch plans from API
+<PricingTable
+  customerId="cust_123"
+  highlightPlan="pro"
+  onSelect={(plan) => handleUpgrade(plan)}
+/>
+
+// Or pass plans explicitly
+<PricingTable
+  plans={[
+    { code: "starter", name: "Starter", amount_cents: 2900, amount_currency: "USD", interval: "monthly" },
+    { code: "pro", name: "Pro", amount_cents: 9900, amount_currency: "USD", interval: "monthly" },
+  ]}
+  features={[
+    ["10K API calls", "Email support"],
+    ["100K API calls", "Priority support", "Analytics"],
+  ]}
+  currentPlanCode="starter"
+  highlightPlan="pro"
+  onSelect={(plan) => console.log("Selected:", plan.code)}
+  showToggle={true}
+  enterpriseEmail="sales@example.com"
+  className="my-pricing"
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `customerId` | `string` | -- | Customer ID for auto-detecting current plan |
+| `currentPlanCode` | `string` | -- | Explicitly set current plan (overrides auto-detect) |
+| `plans` | `PricingPlan[]` | -- | Plans to display (auto-fetched from API if omitted) |
+| `features` | `string[][]` | -- | Feature lists per plan (index-matched to plans array) |
+| `onSelect` | `(plan: PricingPlan) => void` | -- | Called when a plan's CTA is clicked |
+| `highlightPlan` | `string` | -- | Plan code to highlight as "Most Popular" |
+| `enterpriseEmail` | `string` | -- | Email for enterprise plan "Contact Sales" button |
+| `showToggle` | `boolean` | `true` | Show monthly/annual toggle (only when annual plans exist) |
+| `className` | `string` | -- | CSS class for the outer wrapper |
+
+#### PricingPlan type
+
+```ts
+interface PricingPlan {
+  code: string;
+  name: string;
+  amount_cents: number;
+  amount_currency: string;
+  interval: string;
+  description?: string;
+}
+```
+
+#### CSS Variable Theming
+
+PricingTable uses CSS custom properties for full theming control. Set these on a parent element or `:root`:
+
+```css
+:root {
+  /* Component-specific overrides */
+  --nozle-pricing-bg: #ffffff;
+  --nozle-pricing-card-bg: #ffffff;
+  --nozle-pricing-highlight: #6366f1;
+  --nozle-pricing-border: #e5e7eb;
+  --nozle-pricing-radius: 12px;
+
+  /* Or use global Nozle variables (PricingTable falls back to these) */
+  --nozle-background: #ffffff;
+  --nozle-card: #ffffff;
+  --nozle-primary: #6366f1;
+  --nozle-border: #e5e7eb;
+  --nozle-radius: 12px;
+  --nozle-foreground: #111827;
+  --nozle-muted-foreground: #6b7280;
+  --nozle-muted: #f3f4f6;
+  --nozle-primary-foreground: #ffffff;
+}
+```
+
+The component-specific variables (`--nozle-pricing-*`) take precedence over the global ones (`--nozle-*`), which fall back to sensible defaults.
+
 ### `UsageMeter`
 
 Displays usage with bar, ring, or minimal variants.
@@ -230,6 +316,8 @@ import type {
   UsePlanResult,
   UseCheckoutResult,
   Plan,
+  PricingPlan,
+  PricingTableProps,
   UsageMeterProps,
   PlanBadgeProps,
   UpgradePromptProps,

package/dist/index.cjs

@@ -303,6 +303,335 @@ function BillingPortalProvider({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(BillingPortalContext.Provider, { value: { customerId, apiKey }, children });
 }
+var SYMBOLS = { USD: "$", EUR: "\u20AC", GBP: "\xA3", JPY: "\xA5" };
+function fmtPrice(cents, cur) {
+  const s = SYMBOLS[cur] ?? cur + " ";
+  const val = cents % 100 === 0 ? String(cents / 100) : (cents / 100).toFixed(2);
+  return `${s}${val}`;
+}
+function isEnterprise(p) {
+  return /enterprise|custom/i.test(p.name + p.code);
+}
+function v(name, fb) {
+  return `var(${name}, ${fb})`;
+}
+var C = {
+  bg: v("--nozle-pricing-bg", v("--nozle-background", "#ffffff")),
+  cardBg: v("--nozle-pricing-card-bg", v("--nozle-card", "#ffffff")),
+  hl: v("--nozle-pricing-highlight", v("--nozle-primary", "#6366f1")),
+  border: v("--nozle-pricing-border", v("--nozle-border", "#e5e7eb")),
+  radius: v("--nozle-pricing-radius", v("--nozle-radius", "12px")),
+  text: v("--nozle-foreground", "#111827"),
+  muted: v("--nozle-muted-foreground", "#6b7280"),
+  mutedBg: v("--nozle-muted", "#f3f4f6"),
+  hlFg: v("--nozle-primary-foreground", "#ffffff")
+};
+function Check() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.5 8.5L6.5 11.5L12.5 4.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function Toggle({ isAnnual, onChange }) {
+  const pill = {
+    display: "inline-flex",
+    borderRadius: "9999px",
+    padding: "4px",
+    background: C.mutedBg,
+    gap: "2px"
+  };
+  const tab = (active) => ({
+    padding: "8px 20px",
+    borderRadius: "9999px",
+    border: "none",
+    background: active ? C.cardBg : "transparent",
+    color: active ? C.text : C.muted,
+    fontWeight: active ? 600 : 400,
+    fontSize: "0.875rem",
+    cursor: "pointer",
+    boxShadow: active ? "0 1px 3px rgba(0,0,0,0.08)" : "none",
+    transition: "all 0.15s ease"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "center", marginBottom: "2.5rem" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: pill, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => onChange(false), style: tab(!isAnnual), "aria-pressed": !isAnnual, children: "Monthly" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: () => onChange(true), style: tab(isAnnual), "aria-pressed": isAnnual, children: [
+      "Annual",
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+        marginLeft: "6px",
+        fontSize: "0.7rem",
+        fontWeight: 600,
+        color: isAnnual ? C.hl : C.muted
+      }, children: "Save 20%" })
+    ] })
+  ] }) });
+}
+function Card({
+  plan,
+  features,
+  isCurrent,
+  isHighlighted,
+  isEnt,
+  enterpriseEmail,
+  onSelect
+}) {
+  const [hover, setHover] = React.useState(false);
+  const shadow = isHighlighted ? "0 8px 28px rgba(99,102,241,0.12), 0 2px 8px rgba(99,102,241,0.06)" : hover ? "0 8px 24px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.03)" : "0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03)";
+  const interval = plan.interval === "yearly" ? "/year" : "/month";
+  const handleClick = () => {
+    if (isCurrent) return;
+    if (isEnt && enterpriseEmail) {
+      window.location.href = `mailto:${enterpriseEmail}?subject=Enterprise Plan Inquiry`;
+      return;
+    }
+    onSelect?.();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      style: {
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        background: C.cardBg,
+        border: `1px solid ${isHighlighted ? C.hl : C.border}`,
+        borderTopWidth: isHighlighted ? "3px" : "1px",
+        borderRadius: C.radius,
+        padding: "2rem",
+        transition: "box-shadow 0.2s ease, transform 0.2s ease",
+        boxShadow: shadow,
+        transform: hover && !isCurrent ? "translateY(-2px)" : "none"
+      },
+      children: [
+        isHighlighted && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          position: "absolute",
+          top: "-1px",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          background: C.hl,
+          color: C.hlFg,
+          fontSize: "0.7rem",
+          fontWeight: 700,
+          padding: "4px 12px",
+          borderRadius: "9999px",
+          letterSpacing: "0.025em",
+          textTransform: "uppercase",
+          whiteSpace: "nowrap"
+        }, children: isCurrent ? "Current Plan" : "Most Popular" }),
+        isCurrent && !isHighlighted && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          position: "absolute",
+          top: "0",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          background: C.mutedBg,
+          color: C.muted,
+          fontSize: "0.7rem",
+          fontWeight: 700,
+          padding: "4px 12px",
+          borderRadius: "9999px",
+          letterSpacing: "0.025em",
+          textTransform: "uppercase",
+          whiteSpace: "nowrap"
+        }, children: "Current Plan" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "1.25rem", marginTop: isHighlighted || isCurrent ? "0.5rem" : 0 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { style: {
+            fontSize: "1.25rem",
+            fontWeight: 700,
+            color: C.text,
+            margin: 0,
+            lineHeight: 1.3
+          }, children: plan.name }),
+          plan.description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+            fontSize: "0.875rem",
+            color: C.muted,
+            margin: "6px 0 0",
+            lineHeight: 1.5
+          }, children: plan.description })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "1.5rem" }, children: isEnt ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "2.25rem", fontWeight: 700, color: C.text, lineHeight: 1 }, children: "Custom" }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "2px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "2.75rem", fontWeight: 700, color: C.text, lineHeight: 1, letterSpacing: "-0.025em" }, children: fmtPrice(plan.amount_cents, plan.amount_currency) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.9375rem", color: C.muted, marginLeft: "4px" }, children: interval })
+        ] }) }),
+        features && features.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { style: {
+          listStyle: "none",
+          padding: 0,
+          margin: "0 0 2rem",
+          display: "flex",
+          flexDirection: "column",
+          gap: "0.75rem",
+          flex: 1
+        }, children: features.map((feat) => /* @__PURE__ */ jsxRuntime.jsxs("li", { style: {
+          display: "flex",
+          alignItems: "flex-start",
+          gap: "10px",
+          fontSize: "0.875rem",
+          color: C.text,
+          lineHeight: 1.5
+        }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: C.hl, marginTop: "2px" }, children: /* @__PURE__ */ jsxRuntime.jsx(Check, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: feat })
+        ] }, feat)) }),
+        (!features || features.length === 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
+        onSelect && /* @__PURE__ */ jsxRuntime.jsx(
+          CTAButton,
+          {
+            onClick: handleClick,
+            disabled: isCurrent,
+            variant: isCurrent ? "current" : isEnt ? "outline" : isHighlighted ? "primary" : "secondary",
+            children: isCurrent ? "Current Plan" : isEnt ? "Contact Sales" : `Get ${plan.name}`
+          }
+        )
+      ]
+    }
+  );
+}
+function CTAButton({
+  children,
+  onClick,
+  disabled,
+  variant
+}) {
+  const [hover, setHover] = React.useState(false);
+  const base = {
+    width: "100%",
+    padding: "12px 24px",
+    borderRadius: "10px",
+    fontSize: "0.9375rem",
+    fontWeight: 600,
+    cursor: disabled ? "default" : "pointer",
+    border: "none",
+    transition: "all 0.15s ease",
+    lineHeight: 1.4
+  };
+  const variants = {
+    primary: {
+      background: hover && !disabled ? "#4f46e5" : C.hl,
+      color: C.hlFg
+    },
+    secondary: {
+      background: hover && !disabled ? "#f0f0f3" : C.mutedBg,
+      color: C.text,
+      border: `1px solid ${C.border}`
+    },
+    outline: {
+      background: hover && !disabled ? "rgba(99,102,241,0.04)" : "transparent",
+      color: C.hl,
+      border: `1.5px solid ${C.hl}`
+    },
+    current: {
+      background: C.mutedBg,
+      color: C.muted
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick: disabled ? void 0 : onClick,
+      disabled,
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      style: { ...base, ...variants[variant] },
+      children
+    }
+  );
+}
+function Skeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
+    gap: "1.5rem"
+  }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+    background: C.cardBg,
+    border: `1px solid ${C.border}`,
+    borderRadius: C.radius,
+    padding: "2rem",
+    height: "380px"
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 20, width: "40%", borderRadius: 6, background: "#f0f0f0", marginBottom: 12 } }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 40, width: "50%", borderRadius: 6, background: "#f0f0f0", marginBottom: 24 } }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 14, width: "80%", borderRadius: 6, background: "#f0f0f0", marginBottom: 10 } }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 14, width: "70%", borderRadius: 6, background: "#f0f0f0", marginBottom: 10 } }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 14, width: "60%", borderRadius: 6, background: "#f0f0f0" } })
+  ] }, i)) });
+}
+function PricingTable({
+  customerId,
+  currentPlanCode,
+  plans: propPlans,
+  features,
+  onSelect,
+  showToggle = true,
+  highlightPlan,
+  className,
+  enterpriseEmail
+}) {
+  const client = useNozleClient();
+  const [plans, setPlans] = React.useState(propPlans ?? []);
+  const [currentPlan, setCurrentPlan] = React.useState(currentPlanCode ?? null);
+  const [isAnnual, setIsAnnual] = React.useState(false);
+  const [loading, setLoading] = React.useState(!propPlans);
+  React.useEffect(() => {
+    if (propPlans) {
+      setPlans(propPlans);
+      return;
+    }
+    let cancelled = false;
+    client.fetch("/api/v1/plans").then(async (res) => {
+      if (!cancelled && res.ok) {
+        const data = await res.json();
+        setPlans(data.plans || []);
+      }
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, propPlans]);
+  React.useEffect(() => {
+    if (currentPlanCode !== void 0) {
+      setCurrentPlan(currentPlanCode);
+      return;
+    }
+    if (!customerId) return;
+    let cancelled = false;
+    client.fetch(`/api/v1/billing/status?customer_id=${encodeURIComponent(customerId)}`).then(async (res) => {
+      if (!cancelled && res.ok) {
+        const data = await res.json();
+        setCurrentPlan(data.plan ?? data.planName ?? null);
+      }
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, customerId, currentPlanCode]);
+  const hasAnnual = plans.some((p) => p.interval === "yearly");
+  const filtered = showToggle && hasAnnual ? plans.filter((p) => p.interval === (isAnnual ? "yearly" : "monthly") || isEnterprise(p)) : plans;
+  if (loading) return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, {});
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: {
+    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    color: C.text,
+    background: C.bg
+  }, children: [
+    showToggle && hasAnnual && /* @__PURE__ */ jsxRuntime.jsx(Toggle, { isAnnual, onChange: setIsAnnual }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
+      gap: "1.5rem"
+    }, children: filtered.map((plan, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      Card,
+      {
+        plan,
+        features: features?.[i],
+        isCurrent: currentPlan === plan.code,
+        isHighlighted: highlightPlan === plan.code,
+        isEnt: isEnterprise(plan),
+        enterpriseEmail,
+        onSelect: onSelect ? () => onSelect(plan) : void 0
+      },
+      plan.code
+    )) })
+  ] });
+}
 function PlanCard({
   id,
   name,
@@ -447,91 +776,6 @@ function PlanCard({
     }
   );
 }
-function PricingTable({
-  plans,
-  currentPlanId,
-  onSelect
-}) {
-  const [isAnnual, setIsAnnual] = React.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      style: {
-        background: "var(--nozle-background, var(--background))",
-        color: "var(--nozle-foreground, var(--foreground))"
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              gap: "0.5rem",
-              justifyContent: "center",
-              marginBottom: "1.5rem"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: () => setIsAnnual(false),
-                  style: {
-                    padding: "0.5rem 1rem",
-                    borderRadius: "var(--nozle-radius, 0.5rem)",
-                    border: "1px solid var(--nozle-border, var(--border))",
-                    background: !isAnnual ? "var(--nozle-primary, var(--primary))" : "transparent",
-                    color: !isAnnual ? "var(--nozle-primary-foreground, var(--primary-foreground))" : "var(--nozle-foreground, var(--foreground))",
-                    cursor: "pointer",
-                    fontWeight: !isAnnual ? 600 : 400
-                  },
-                  "aria-pressed": !isAnnual,
-                  children: "Monthly"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: () => setIsAnnual(true),
-                  style: {
-                    padding: "0.5rem 1rem",
-                    borderRadius: "var(--nozle-radius, 0.5rem)",
-                    border: "1px solid var(--nozle-border, var(--border))",
-                    background: isAnnual ? "var(--nozle-primary, var(--primary))" : "transparent",
-                    color: isAnnual ? "var(--nozle-primary-foreground, var(--primary-foreground))" : "var(--nozle-foreground, var(--foreground))",
-                    cursor: "pointer",
-                    fontWeight: isAnnual ? 600 : 400
-                  },
-                  "aria-pressed": isAnnual,
-                  children: "Annual"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            style: {
-              display: "grid",
-              gridTemplateColumns: `repeat(${Math.min(plans.length, 3)}, 1fr)`,
-              gap: "1rem"
-            },
-            children: plans.map((plan) => /* @__PURE__ */ jsxRuntime.jsx(
-              PlanCard,
-              {
-                ...plan,
-                isAnnual,
-                isCurrent: plan.id === currentPlanId,
-                onSelect: onSelect ? () => onSelect(plan.id) : void 0
-              },
-              plan.id
-            ))
-          }
-        )
-      ]
-    }
-  );
-}
 function PlanComparison({
   plans,
   features