@lumnsh/react 0.1.1

package/dist/index.js

@@ -0,0 +1,697 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  LumnCheckout: () => LumnCheckout,
+  LumnGate: () => LumnGate,
+  LumnPricing: () => LumnPricing,
+  LumnProvider: () => LumnProvider,
+  formatIntervalPrice: () => formatIntervalPrice,
+  useEntitlements: () => useEntitlements,
+  useLumn: () => useLumn,
+  useLumnContext: () => useLumnContext,
+  usePricing: () => usePricing,
+  useSubscriptions: () => useSubscriptions
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/LumnProvider.tsx
+var import_react = require("react");
+var import_node = require("@lumnsh/node");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ENV_TO_INTERNAL = {
+  sandbox: "development",
+  live: "production"
+};
+var LumnContext = (0, import_react.createContext)(null);
+var THEME_VARS_DARK = {
+  ["--lumn-bg"]: "hsl(220 13% 8%)",
+  ["--lumn-bg-elevated"]: "hsl(220 13% 12%)",
+  ["--lumn-text"]: "hsl(0 0% 98%)",
+  ["--lumn-text-muted"]: "hsl(215 10% 75%)",
+  ["--lumn-border"]: "hsl(220 10% 18%)",
+  ["--lumn-border-light"]: "hsl(220 10% 15%)",
+  ["--lumn-error"]: "hsl(0 63% 50%)"
+};
+var THEME_VARS_LIGHT = {
+  ["--lumn-bg"]: "hsl(0 0% 98%)",
+  ["--lumn-bg-elevated"]: "hsl(0 0% 96%)",
+  ["--lumn-text"]: "hsl(220 13% 8%)",
+  ["--lumn-text-muted"]: "hsl(220 10% 45%)",
+  ["--lumn-border"]: "hsl(220 10% 85%)",
+  ["--lumn-border-light"]: "hsl(220 10% 75%)",
+  ["--lumn-error"]: "hsl(0 63% 45%)"
+};
+var DEFAULT_BASE_URL = "https://app.lumn.dev";
+var DEFAULT_ACCENT = "#22c55e";
+function LumnProvider({
+  apiKey,
+  baseUrl = DEFAULT_BASE_URL,
+  environment,
+  accentColor = DEFAULT_ACCENT,
+  theme = "dark",
+  children
+}) {
+  const lumn = (0, import_react.useMemo)(() => new import_node.Lumn({ apiKey, baseUrl }), [apiKey, baseUrl]);
+  const value = (0, import_react.useMemo)(
+    () => ({
+      lumn,
+      environment: environment ? ENV_TO_INTERNAL[environment] : void 0,
+      accentColor,
+      theme
+    }),
+    [lumn, environment, accentColor, theme]
+  );
+  const themeVars = theme === "light" ? THEME_VARS_LIGHT : THEME_VARS_DARK;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LumnContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: themeVars, children }) });
+}
+function useLumnContext() {
+  const ctx = (0, import_react.useContext)(LumnContext);
+  if (!ctx) {
+    throw new Error("useLumnContext must be used within LumnProvider");
+  }
+  return ctx;
+}
+
+// src/components/LumnCheckout.tsx
+var import_react2 = require("react");
+var import_stripe_js = require("@stripe/stripe-js");
+var import_react_stripe_js = require("@stripe/react-stripe-js");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var stripePromiseCache = /* @__PURE__ */ new Map();
+function getStripePromise(publishableKey) {
+  let p = stripePromiseCache.get(publishableKey);
+  if (!p) {
+    p = (0, import_stripe_js.loadStripe)(publishableKey);
+    stripePromiseCache.set(publishableKey, p);
+  }
+  return p;
+}
+function LumnCheckout({
+  customerId,
+  productSlug,
+  priceInterval = "monthly",
+  branding,
+  onComplete,
+  className = ""
+}) {
+  const { lumn } = useLumnContext();
+  const [session, setSession] = (0, import_react2.useState)(null);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const brandingKey = JSON.stringify(branding ?? {});
+  (0, import_react2.useEffect)(() => {
+    if (!customerId || !productSlug) return;
+    let cancelled = false;
+    setError(null);
+    setSession(null);
+    const returnUrl = typeof window !== "undefined" ? window.location.href : "";
+    const brandingPayload = branding && Object.keys(branding).length > 0 ? branding : void 0;
+    lumn.checkout.create({
+      customer_id: customerId,
+      product_slug: productSlug,
+      price_interval: priceInterval,
+      ui_mode: "embedded",
+      return_url: returnUrl,
+      ...brandingPayload && { branding_settings: brandingPayload }
+    }).then((d) => {
+      if (cancelled) return;
+      if (!d?.publishable_key) {
+        throw new Error("Missing publishable_key \u2014 configure a publishable key on your Stripe connection");
+      }
+      if (!d?.client_secret) {
+        throw new Error("Missing client_secret from checkout session");
+      }
+      setSession({
+        clientSecret: d.client_secret,
+        publishableKey: d.publishable_key
+      });
+    }).catch((e) => {
+      if (!cancelled) {
+        setError(e instanceof Error ? e.message : "Checkout failed");
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [lumn, customerId, productSlug, priceInterval, brandingKey]);
+  const stripePromise = session?.publishableKey ? getStripePromise(session.publishableKey) : null;
+  const fetchClientSecret = (0, import_react2.useMemo)(() => {
+    const secret = session?.clientSecret?.trim();
+    if (!secret) return void 0;
+    return () => Promise.resolve(secret);
+  }, [session?.clientSecret]);
+  if (!customerId || !productSlug) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className,
+        style: { color: "#ef4444", fontSize: "0.875rem" },
+        children: "customerId and productSlug are required"
+      }
+    );
+  }
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className,
+        style: { color: "#ef4444", fontSize: "0.875rem" },
+        children: error
+      }
+    );
+  }
+  if (!session || !stripePromise || !fetchClientSecret) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className,
+        style: { color: "#737373", fontSize: "0.875rem" },
+        children: "Loading checkout\u2026"
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_stripe_js.EmbeddedCheckoutProvider,
+    {
+      stripe: stripePromise,
+      options: {
+        fetchClientSecret,
+        onComplete: onComplete ?? void 0
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_stripe_js.EmbeddedCheckout, {})
+    }
+  ) });
+}
+
+// src/components/LumnPricing.tsx
+var import_react4 = require("react");
+
+// src/hooks/usePricing.ts
+var import_react3 = require("react");
+function formatIntervalPrice(plan, _interval, options) {
+  const locale = options?.locale ?? "en-US";
+  const opts = { style: "currency", currency: plan.currency || "usd" };
+  if (plan.tiers && plan.tiers.length > 0) {
+    const first = plan.tiers[0];
+    const amt = first?.unitAmount ?? 0;
+    if (amt === 0) return "From Free";
+    return `From ${(amt / 100).toLocaleString(locale, opts)}`;
+  }
+  if (plan.amount != null) {
+    if (plan.amount === 0) return "Free";
+    return (plan.amount / 100).toLocaleString(locale, opts);
+  }
+  return "Custom";
+}
+function usePricing(options) {
+  const { lumn } = useLumnContext();
+  const [products, setProducts] = (0, import_react3.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react3.useState)(!options?.skip);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const fetchProducts = (0, import_react3.useCallback)(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await lumn.products.list({ limit: 50, active: true });
+      setProducts(result.data ?? []);
+    } catch (e) {
+      setError(e instanceof Error ? e : new Error("Failed to fetch products"));
+      setProducts([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [lumn]);
+  (0, import_react3.useEffect)(() => {
+    if (options?.skip) return;
+    fetchProducts();
+  }, [fetchProducts, options?.skip]);
+  return { products, isLoading: options?.skip ? false : isLoading, error: options?.skip ? null : error, refetch: fetchProducts };
+}
+
+// src/components/IntervalSwitcher.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function IntervalSwitcher({
+  intervals,
+  selected,
+  onSelect,
+  accentColor = "#22c55e"
+}) {
+  if (intervals.length <= 1) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { marginBottom: "1rem", display: "flex", gap: "0.5rem" }, children: intervals.map((iv) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: () => onSelect(iv),
+      style: {
+        padding: "0.375rem 0.75rem",
+        fontSize: "0.875rem",
+        fontFamily: "Inter, system-ui, sans-serif",
+        border: selected === iv ? `1px solid ${accentColor}` : "1px solid var(--lumn-border-light, hsl(220 10% 15%))",
+        borderRadius: "0.5rem",
+        background: selected === iv ? `${accentColor}1a` : "var(--lumn-bg-elevated, hsl(220 13% 12%))",
+        color: selected === iv ? accentColor : "var(--lumn-text, hsl(0 0% 98%))",
+        cursor: "pointer"
+      },
+      children: iv.charAt(0).toUpperCase() + iv.slice(1)
+    },
+    iv
+  )) });
+}
+
+// src/components/PricingCard.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function formatTierRange(tierIndex, tiers) {
+  const tier = tiers[tierIndex];
+  const prevUpTo = tierIndex === 0 ? 0 : tiers[tierIndex - 1].upTo ?? 0;
+  if (tier.upTo === null) return `${prevUpTo + 1}+`;
+  if (prevUpTo === 0) return `1\u2013${tier.upTo}`;
+  return `${prevUpTo + 1}\u2013${tier.upTo}`;
+}
+function PricingCard({
+  product,
+  priceInterval,
+  plan,
+  priceStr,
+  period,
+  trialDays,
+  isCheckoutLoading,
+  checkoutError,
+  cardStyle,
+  accentColor,
+  locale,
+  canSubscribe,
+  onCtaClick
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      style: {
+        background: "var(--lumn-bg, hsl(220 13% 8%))",
+        border: `1px solid ${cardStyle.borderColor}`,
+        borderRadius: "0.5rem",
+        padding: "1.5rem",
+        display: "flex",
+        flexDirection: "column",
+        boxShadow: "0 0 20px hsl(90 100% 50% / 0.05)"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0.5rem" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontWeight: 600, fontSize: "1.125rem", color: "var(--lumn-text, hsl(0 0% 98%))" }, children: product.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "span",
+            {
+              style: {
+                fontSize: "0.65rem",
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: "0.05em",
+                padding: "0.2rem 0.5rem",
+                borderRadius: "0.25rem",
+                background: cardStyle.badgeBg,
+                color: cardStyle.badgeColor
+              },
+              children: product.type ?? "recurring"
+            }
+          )
+        ] }),
+        product.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { marginBottom: "1rem", fontSize: "0.875rem", color: "var(--lumn-text-muted, hsl(215 10% 75%))" }, children: product.description }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginTop: "auto", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { fontSize: "1.5rem", fontWeight: 600, color: "var(--lumn-text, hsl(0 0% 98%))" }, children: [
+            priceStr,
+            period && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: "0.875rem", fontWeight: 400, color: "var(--lumn-text-muted, hsl(215 10% 75%))" }, children: period })
+          ] }),
+          plan?.tiers && plan.tiers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "div",
+            {
+              style: {
+                marginTop: "0.25rem",
+                padding: "0.5rem 0.75rem",
+                borderRadius: "0.375rem",
+                background: "var(--lumn-bg-elevated, hsl(220 13% 12%))",
+                border: "1px solid var(--lumn-border, hsl(220 10% 18%))"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "0.65rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.04em", color: "var(--lumn-text-muted, hsl(215 10% 65%))", marginBottom: "0.375rem" }, children: "Tiers" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 0 }, children: plan.tiers.map((tier, i) => {
+                  const range = formatTierRange(i, plan.tiers);
+                  const currency = plan.currency ?? "usd";
+                  const isFree = tier.unitAmount === 0;
+                  const perUnit = isFree ? "Free" : (tier.unitAmount / 100).toLocaleString(locale ?? "en-US", { style: "currency", currency });
+                  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                        padding: "0.25rem 0",
+                        fontSize: "0.8125rem",
+                        color: "var(--lumn-text-muted, hsl(215 10% 75%))",
+                        borderBottom: i < plan.tiers.length - 1 ? "1px solid var(--lumn-border, hsl(220 10% 18%))" : "none"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontFamily: "JetBrains Mono, monospace" }, children: range }),
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { fontWeight: 500, color: "var(--lumn-text, hsl(0 0% 92%))" }, children: [
+                          perUnit,
+                          !isFree && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontWeight: 400, color: "var(--lumn-text-muted, hsl(215 10% 65%))", fontSize: "0.75rem" }, children: "/unit" })
+                        ] })
+                      ]
+                    },
+                    i
+                  );
+                }) })
+              ]
+            }
+          ),
+          trialDays != null && trialDays > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { fontSize: "0.75rem", color: accentColor }, children: [
+            trialDays,
+            "-day free trial"
+          ] }),
+          canSubscribe ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => priceInterval && onCtaClick(product, priceInterval),
+                disabled: !!isCheckoutLoading || !priceInterval,
+                style: {
+                  padding: "0.5rem 1rem",
+                  fontSize: "0.875rem",
+                  fontWeight: 500,
+                  fontFamily: "Inter, system-ui, sans-serif",
+                  border: `1px solid ${accentColor}`,
+                  borderRadius: "0.5rem",
+                  background: `${accentColor}1a`,
+                  color: accentColor,
+                  cursor: isCheckoutLoading ? "wait" : "pointer"
+                },
+                children: isCheckoutLoading ? "Loading\u2026" : "Subscribe"
+              }
+            ),
+            checkoutError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "0.75rem", color: "var(--lumn-error, hsl(0 63% 50%))" }, children: checkoutError })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "0.75rem", color: "var(--lumn-text-muted, hsl(215 10% 75%))" }, children: "Sign in to subscribe" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/LumnPricing.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var DEFAULT_INTERVALS = ["monthly", "yearly"];
+var intervalPeriod = {
+  monthly: "/month",
+  quarterly: "/quarter",
+  yearly: "/year"
+};
+var CARD_STYLE_BY_TYPE = {
+  recurring: { borderColor: "hsl(90 100% 50% / 0.5)", badgeBg: "hsl(90 100% 50% / 0.15)", badgeColor: "hsl(90 100% 55%)" },
+  one_time: { borderColor: "hsl(199 89% 48% / 0.5)", badgeBg: "hsl(199 89% 48% / 0.15)", badgeColor: "hsl(199 89% 55%)" },
+  usage_based: { borderColor: "hsl(45 93% 47% / 0.5)", badgeBg: "hsl(45 93% 47% / 0.15)", badgeColor: "hsl(45 93% 55%)" },
+  seat_based: { borderColor: "hsl(280 65% 60% / 0.5)", badgeBg: "hsl(280 65% 60% / 0.15)", badgeColor: "hsl(280 65% 70%)" },
+  tiered: { borderColor: "hsl(340 75% 55% / 0.5)", badgeBg: "hsl(340 75% 55% / 0.15)", badgeColor: "hsl(340 75% 65%)" }
+};
+function getCardStyle(type) {
+  const key = type ?? "recurring";
+  return CARD_STYLE_BY_TYPE[key] ?? CARD_STYLE_BY_TYPE.recurring;
+}
+function getPriceInterval(product, selectedInterval, intervals) {
+  const idx = intervals.indexOf(selectedInterval);
+  if (idx === -1) return void 0;
+  for (let i = idx; i >= 0; i--) {
+    const iv = intervals[i];
+    if (product.pricing?.[iv]) return iv;
+  }
+  return void 0;
+}
+function LumnPricing({
+  customerId,
+  products: productsProp,
+  intervals = DEFAULT_INTERVALS,
+  defaultInterval = "monthly",
+  locale,
+  onSelectPlan,
+  renderCard,
+  formatPrice,
+  loadingComponent,
+  emptyComponent,
+  errorComponent,
+  className = ""
+}) {
+  const { lumn, accentColor = "#22c55e" } = useLumnContext();
+  const priceFormatter = formatPrice ?? ((plan, interval) => formatIntervalPrice(plan, interval, locale ? { locale } : void 0));
+  const { products: fetchedProducts, isLoading, error } = usePricing({ skip: productsProp !== void 0 });
+  const products = productsProp ?? fetchedProducts;
+  const [selectedInterval, setSelectedInterval] = (0, import_react4.useState)(defaultInterval);
+  const [checkoutLoading, setCheckoutLoading] = (0, import_react4.useState)(null);
+  const [checkoutErrorBySlug, setCheckoutErrorBySlug] = (0, import_react4.useState)({});
+  const createCheckout = (0, import_react4.useCallback)(
+    async (productSlug, priceInterval) => {
+      if (!customerId) return;
+      const fallbackUrl = typeof window !== "undefined" ? window.location.href : "";
+      const session = await lumn.checkout.create({
+        customer_id: customerId,
+        product_slug: productSlug,
+        price_interval: priceInterval,
+        ui_mode: "hosted",
+        success_url: fallbackUrl,
+        cancel_url: fallbackUrl
+      });
+      const checkoutUrl = session?.checkout_url;
+      if (checkoutUrl && typeof window !== "undefined") {
+        window.location.href = checkoutUrl;
+      }
+    },
+    [lumn, customerId]
+  );
+  const handleCtaClick = (0, import_react4.useCallback)(
+    async (product, interval) => {
+      if (!customerId) return;
+      const plan = product.pricing?.[interval];
+      if (!plan) return;
+      const checkout = () => {
+        setCheckoutLoading(product.slug);
+        setCheckoutErrorBySlug((prev) => ({ ...prev, [product.slug]: "" }));
+        createCheckout(product.slug, interval).catch((err) => {
+          const msg = err instanceof Error ? err.message : "Checkout failed";
+          setCheckoutErrorBySlug((prev) => ({ ...prev, [product.slug]: msg }));
+        }).finally(() => setCheckoutLoading(null));
+      };
+      if (onSelectPlan) {
+        onSelectPlan({ product, interval, checkout });
+      } else {
+        checkout();
+      }
+    },
+    [customerId, createCheckout, onSelectPlan]
+  );
+  const filteredProducts = products.filter((p) => p.active);
+  const effectiveInterval = intervals.includes(selectedInterval) ? selectedInterval : intervals[0];
+  if (isLoading && !productsProp?.length) {
+    if (loadingComponent) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, children: loadingComponent });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, style: { padding: "1.5rem", color: "var(--lumn-text-muted, hsl(215 10% 75%))", fontSize: "0.875rem", fontFamily: "Inter, system-ui, sans-serif" }, children: "Loading\u2026" });
+  }
+  if (error && !productsProp?.length) {
+    if (errorComponent) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, children: errorComponent(error) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, style: { padding: "1.5rem", color: "var(--lumn-error, hsl(0 63% 50%))", fontSize: "0.875rem", fontFamily: "Inter, system-ui, sans-serif" }, children: error?.message ?? "Failed to load products" });
+  }
+  if (filteredProducts.length === 0) {
+    if (emptyComponent) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, children: emptyComponent });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, style: { padding: "1.5rem", color: "var(--lumn-text-muted, hsl(215 10% 75%))", fontSize: "0.875rem", fontFamily: "Inter, system-ui, sans-serif" }, children: "No products available." });
+  }
+  if (renderCard) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        IntervalSwitcher,
+        {
+          intervals,
+          selected: selectedInterval,
+          onSelect: setSelectedInterval,
+          accentColor
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: "1.5rem" }, children: filteredProducts.map((p) => renderCard(p, effectiveInterval)) })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className, style: { fontFamily: "Inter, system-ui, sans-serif" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      IntervalSwitcher,
+      {
+        intervals,
+        selected: selectedInterval,
+        onSelect: setSelectedInterval,
+        accentColor
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: "1.5rem" }, children: filteredProducts.map((product) => {
+      const priceInterval = getPriceInterval(product, effectiveInterval, intervals);
+      const plan = priceInterval ? product.pricing?.[priceInterval] : void 0;
+      const priceStr = plan && priceInterval ? priceFormatter(plan, priceInterval) : "Custom";
+      const period = priceInterval ? intervalPeriod[priceInterval] : "";
+      const trialDays = product.pricing?.trial?.days;
+      const isCheckoutLoading = checkoutLoading === product.slug;
+      const checkoutError = checkoutErrorBySlug[product.slug];
+      const cardStyle = getCardStyle(product.type);
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        PricingCard,
+        {
+          product,
+          priceInterval,
+          plan,
+          priceStr,
+          period,
+          trialDays,
+          isCheckoutLoading: !!isCheckoutLoading,
+          checkoutError,
+          cardStyle,
+          accentColor,
+          locale,
+          canSubscribe: !!customerId,
+          onCtaClick: handleCtaClick
+        },
+        product.id
+      );
+    }) })
+  ] });
+}
+
+// src/components/LumnGate.tsx
+var import_react6 = require("react");
+
+// src/hooks/useEntitlements.ts
+var import_react5 = require("react");
+function useEntitlements() {
+  const { lumn } = useLumnContext();
+  const checkEntitlement = (0, import_react5.useCallback)(
+    async (featureKey, customerId) => {
+      if (!customerId) {
+        return { entitled: false, feature_key: featureKey };
+      }
+      return lumn.entitlements.check({
+        customer_id: customerId,
+        feature_key: featureKey
+      });
+    },
+    [lumn]
+  );
+  const getUsageBalance = (0, import_react5.useCallback)(
+    async (featureKey, customerId) => {
+      const result = await checkEntitlement(featureKey, customerId);
+      return {
+        entitled: result.entitled,
+        feature_key: result.feature_key,
+        limit: result.limit,
+        unit_price_cents: result.unit_price_cents,
+        feature_type: result.feature_type,
+        used: result.used,
+        remaining: result.remaining,
+        reset_at: result.reset_at
+      };
+    },
+    [checkEntitlement]
+  );
+  return {
+    checkEntitlement,
+    getUsageBalance
+  };
+}
+
+// src/components/LumnGate.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function LumnGate({
+  feature,
+  customerId,
+  fallback = null,
+  loadingFallback,
+  renderUsage,
+  children
+}) {
+  const { checkEntitlement } = useEntitlements();
+  const [result, setResult] = (0, import_react6.useState)(null);
+  (0, import_react6.useEffect)(() => {
+    let cancelled = false;
+    setResult(null);
+    checkEntitlement(feature, customerId).then((res) => {
+      if (cancelled) return;
+      setResult(res);
+    }).catch(() => {
+      if (cancelled) return;
+      setResult({ entitled: false, feature_key: feature });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [feature, customerId, checkEntitlement]);
+  if (result === null) {
+    return loadingFallback ?? null;
+  }
+  const entitled = result.entitled;
+  const hasRemaining = result.remaining === void 0 || result.remaining === null || result.remaining > 0;
+  const allowed = entitled && hasRemaining;
+  const usageData = result.used != null && result.remaining != null && result.reset_at != null ? { used: result.used, remaining: result.remaining, reset_at: result.reset_at } : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    renderUsage && usageData ? renderUsage(usageData) : null,
+    allowed ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: fallback })
+  ] });
+}
+
+// src/hooks/useSubscriptions.ts
+var import_react7 = require("react");
+function useSubscriptions() {
+  const { lumn } = useLumnContext();
+  const getSubscriptionState = (0, import_react7.useCallback)(
+    async (customerId, productId) => {
+      const result = await lumn.subscriptions.list({
+        customer_id: customerId,
+        ...productId && { product_id: productId }
+      });
+      return result.data;
+    },
+    [lumn]
+  );
+  return {
+    getSubscriptionState
+  };
+}
+
+// src/hooks/useLumn.ts
+function useLumn() {
+  const { checkEntitlement, getUsageBalance } = useEntitlements();
+  const { getSubscriptionState } = useSubscriptions();
+  return {
+    checkEntitlement,
+    getUsageBalance,
+    getSubscriptionState
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LumnCheckout,
+  LumnGate,
+  LumnPricing,
+  LumnProvider,
+  formatIntervalPrice,
+  useEntitlements,
+  useLumn,
+  useLumnContext,
+  usePricing,
+  useSubscriptions
+});