@usequota/nextjs 0.1.0 → 0.2.1

package/README.md

@@ -1,6 +1,6 @@
 # @usequota/nextjs
 
-Next.js SDK for [Quota](https://quota.io) - AI credit wallet and multi-provider inference API.
+Next.js SDK for [Quota](https://usequota.app) - AI credit wallet and multi-provider inference API.
 
 ## Installation
 
@@ -106,7 +106,7 @@ export function MyComponent() {
   return (
     <div>
       <p>Welcome, {user.email}!</p>
-      <p>Balance: {user.balance} credits</p>
+      <p>Balance: ${(user.balance / 1_000_000).toFixed(2)}</p>
     </div>
   );
 }

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import { NextRequest, NextResponse } from 'next/server';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { QuotaUser } from '@usequota/types';
+import { QuotaUser, CreditPackage } from '@usequota/types';
 export { ChatCompletionRequest, ChatCompletionResponse, ChatMessage, CreditPackage, QuotaError as QuotaErrorResponse, QuotaMetadata, QuotaSession, QuotaUser, Tool, ToolCall } from '@usequota/types';
 export { Q as QuotaError, a as QuotaInsufficientCreditsError, b as QuotaNotConnectedError, d as QuotaRateLimitError, c as QuotaTokenExpiredError } from './errors-CmNx3kSz.mjs';
 
@@ -115,8 +115,19 @@ interface QuotaContextValue {
      * Refetches user data from the server
      */
     refetch: () => Promise<void>;
+    /**
+     * Quota API base URL
+     */
+    baseUrl: string;
 }
 declare const QuotaContext: react.Context<QuotaContextValue | null>;
+/**
+ * Controls when the provider fetches user data.
+ *
+ * - `"eager"` — fetches on mount (default, current behavior)
+ * - `"lazy"` — does NOT fetch on mount; only fetches when `refetch()` is called
+ */
+type QuotaFetchStrategy = "eager" | "lazy";
 interface QuotaProviderProps {
     children: ReactNode;
     /**
@@ -138,6 +149,15 @@ interface QuotaProviderProps {
      * @default '/api/quota/me'
      */
     apiPath?: string;
+    /**
+     * Controls when user data is fetched.
+     *
+     * - `"eager"` (default) — fetches on mount
+     * - `"lazy"` — does NOT fetch on mount; only fetches when `refetch()` is called
+     *
+     * @default 'eager'
+     */
+    fetchStrategy?: "eager" | "lazy";
 }
 /**
  * React context provider for Quota authentication
@@ -160,7 +180,7 @@ interface QuotaProviderProps {
  * }
  * ```
  */
-declare function QuotaProvider({ children, clientId, baseUrl, callbackPath, apiPath, }: QuotaProviderProps): react_jsx_runtime.JSX.Element;
+declare function QuotaProvider({ children, clientId, baseUrl, callbackPath, apiPath, fetchStrategy, }: QuotaProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook to access Quota authentication context
  *
@@ -203,7 +223,7 @@ declare function useQuota(): QuotaContextValue;
  *   return (
  *     <div>
  *       <p>Email: {user.email}</p>
- *       <p>Balance: {user.balance} credits</p>
+ *       <p>Balance: ${(user.balance / 1_000_000).toFixed(2)}</p>
  *     </div>
  *   );
  * }
@@ -235,7 +255,9 @@ declare function useQuotaAuth(): {
     logout: () => Promise<void>;
 };
 /**
- * Hook to get user's credit balance
+ * Hook to get user's credit balance.
+ * Balance is in micro-dollars (1 unit = $0.000001).
+ * To convert to USD: balance / 1_000_000
  *
  * @example
  * ```tsx
@@ -250,7 +272,7 @@ declare function useQuotaAuth(): {
  *
  *   return (
  *     <div>
- *       Balance: {balance} credits (${(balance / 100).toFixed(2)})
+ *       Balance: ${(balance / 1_000_000).toFixed(2)}
  *     </div>
  *   );
  * }
@@ -262,6 +284,42 @@ declare function useQuotaBalance(): {
     error: Error | null;
     refetch: () => Promise<void>;
 };
+/**
+ * Hook to fetch available credit packages from the Quota API
+ *
+ * Fetches from the public `/v1/packages` endpoint (no auth required).
+ * Results are cached for the lifetime of the component — subsequent calls
+ * return the cached data without re-fetching.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { useQuotaPackages } from '@usequota/nextjs';
+ *
+ * export function BuyCredits() {
+ *   const { packages, isLoading, error, refetch } = useQuotaPackages();
+ *
+ *   if (isLoading) return <div>Loading packages...</div>;
+ *   if (error) return <div>Error: {error.message}</div>;
+ *
+ *   return (
+ *     <ul>
+ *       {packages.map((pkg) => (
+ *         <li key={pkg.id}>
+ *           {pkg.credits} credits — {pkg.price_display}
+ *         </li>
+ *       ))}
+ *     </ul>
+ *   );
+ * }
+ * ```
+ */
+declare function useQuotaPackages(): {
+    packages: CreditPackage[];
+    isLoading: boolean;
+    error: Error | null;
+    refetch: () => Promise<void>;
+};
 
 interface QuotaConnectButtonProps {
     /**
@@ -582,4 +640,4 @@ declare function parseWebhook(req: Request, secret: string): Promise<WebhookEven
  */
 declare function createWebhookHandler(secret: string, handlers: Partial<Record<WebhookEvent["type"], (event: WebhookEvent) => Promise<void>>>): (req: Request) => Promise<Response>;
 
-export { QuotaBalance, type QuotaBalanceProps, QuotaBuyCredits, type QuotaBuyCreditsProps, type QuotaConfig, QuotaConnectButton, type QuotaConnectButtonProps, QuotaContext, type QuotaContextValue, QuotaProvider, type QuotaProviderProps, QuotaUserMenu, type QuotaUserMenuProps, type VerifyWebhookOptions, type WebhookEvent, createQuotaMiddleware, createWebhookHandler, parseWebhook, useQuota, useQuotaAuth, useQuotaBalance, useQuotaUser, verifyWebhookSignature };
+export { QuotaBalance, type QuotaBalanceProps, QuotaBuyCredits, type QuotaBuyCreditsProps, type QuotaConfig, QuotaConnectButton, type QuotaConnectButtonProps, QuotaContext, type QuotaContextValue, type QuotaFetchStrategy, QuotaProvider, type QuotaProviderProps, QuotaUserMenu, type QuotaUserMenuProps, type VerifyWebhookOptions, type WebhookEvent, createQuotaMiddleware, createWebhookHandler, parseWebhook, useQuota, useQuotaAuth, useQuotaBalance, useQuotaPackages, useQuotaUser, verifyWebhookSignature };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { NextRequest, NextResponse } from 'next/server';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { QuotaUser } from '@usequota/types';
+import { QuotaUser, CreditPackage } from '@usequota/types';
 export { ChatCompletionRequest, ChatCompletionResponse, ChatMessage, CreditPackage, QuotaError as QuotaErrorResponse, QuotaMetadata, QuotaSession, QuotaUser, Tool, ToolCall } from '@usequota/types';
 export { Q as QuotaError, a as QuotaInsufficientCreditsError, b as QuotaNotConnectedError, d as QuotaRateLimitError, c as QuotaTokenExpiredError } from './errors-CmNx3kSz.js';
 
@@ -115,8 +115,19 @@ interface QuotaContextValue {
      * Refetches user data from the server
      */
     refetch: () => Promise<void>;
+    /**
+     * Quota API base URL
+     */
+    baseUrl: string;
 }
 declare const QuotaContext: react.Context<QuotaContextValue | null>;
+/**
+ * Controls when the provider fetches user data.
+ *
+ * - `"eager"` — fetches on mount (default, current behavior)
+ * - `"lazy"` — does NOT fetch on mount; only fetches when `refetch()` is called
+ */
+type QuotaFetchStrategy = "eager" | "lazy";
 interface QuotaProviderProps {
     children: ReactNode;
     /**
@@ -138,6 +149,15 @@ interface QuotaProviderProps {
      * @default '/api/quota/me'
      */
     apiPath?: string;
+    /**
+     * Controls when user data is fetched.
+     *
+     * - `"eager"` (default) — fetches on mount
+     * - `"lazy"` — does NOT fetch on mount; only fetches when `refetch()` is called
+     *
+     * @default 'eager'
+     */
+    fetchStrategy?: "eager" | "lazy";
 }
 /**
  * React context provider for Quota authentication
@@ -160,7 +180,7 @@ interface QuotaProviderProps {
  * }
  * ```
  */
-declare function QuotaProvider({ children, clientId, baseUrl, callbackPath, apiPath, }: QuotaProviderProps): react_jsx_runtime.JSX.Element;
+declare function QuotaProvider({ children, clientId, baseUrl, callbackPath, apiPath, fetchStrategy, }: QuotaProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook to access Quota authentication context
  *
@@ -203,7 +223,7 @@ declare function useQuota(): QuotaContextValue;
  *   return (
  *     <div>
  *       <p>Email: {user.email}</p>
- *       <p>Balance: {user.balance} credits</p>
+ *       <p>Balance: ${(user.balance / 1_000_000).toFixed(2)}</p>
  *     </div>
  *   );
  * }
@@ -235,7 +255,9 @@ declare function useQuotaAuth(): {
     logout: () => Promise<void>;
 };
 /**
- * Hook to get user's credit balance
+ * Hook to get user's credit balance.
+ * Balance is in micro-dollars (1 unit = $0.000001).
+ * To convert to USD: balance / 1_000_000
  *
  * @example
  * ```tsx
@@ -250,7 +272,7 @@ declare function useQuotaAuth(): {
  *
  *   return (
  *     <div>
- *       Balance: {balance} credits (${(balance / 100).toFixed(2)})
+ *       Balance: ${(balance / 1_000_000).toFixed(2)}
  *     </div>
  *   );
  * }
@@ -262,6 +284,42 @@ declare function useQuotaBalance(): {
     error: Error | null;
     refetch: () => Promise<void>;
 };
+/**
+ * Hook to fetch available credit packages from the Quota API
+ *
+ * Fetches from the public `/v1/packages` endpoint (no auth required).
+ * Results are cached for the lifetime of the component — subsequent calls
+ * return the cached data without re-fetching.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { useQuotaPackages } from '@usequota/nextjs';
+ *
+ * export function BuyCredits() {
+ *   const { packages, isLoading, error, refetch } = useQuotaPackages();
+ *
+ *   if (isLoading) return <div>Loading packages...</div>;
+ *   if (error) return <div>Error: {error.message}</div>;
+ *
+ *   return (
+ *     <ul>
+ *       {packages.map((pkg) => (
+ *         <li key={pkg.id}>
+ *           {pkg.credits} credits — {pkg.price_display}
+ *         </li>
+ *       ))}
+ *     </ul>
+ *   );
+ * }
+ * ```
+ */
+declare function useQuotaPackages(): {
+    packages: CreditPackage[];
+    isLoading: boolean;
+    error: Error | null;
+    refetch: () => Promise<void>;
+};
 
 interface QuotaConnectButtonProps {
     /**
@@ -582,4 +640,4 @@ declare function parseWebhook(req: Request, secret: string): Promise<WebhookEven
  */
 declare function createWebhookHandler(secret: string, handlers: Partial<Record<WebhookEvent["type"], (event: WebhookEvent) => Promise<void>>>): (req: Request) => Promise<Response>;
 
-export { QuotaBalance, type QuotaBalanceProps, QuotaBuyCredits, type QuotaBuyCreditsProps, type QuotaConfig, QuotaConnectButton, type QuotaConnectButtonProps, QuotaContext, type QuotaContextValue, QuotaProvider, type QuotaProviderProps, QuotaUserMenu, type QuotaUserMenuProps, type VerifyWebhookOptions, type WebhookEvent, createQuotaMiddleware, createWebhookHandler, parseWebhook, useQuota, useQuotaAuth, useQuotaBalance, useQuotaUser, verifyWebhookSignature };
+export { QuotaBalance, type QuotaBalanceProps, QuotaBuyCredits, type QuotaBuyCreditsProps, type QuotaConfig, QuotaConnectButton, type QuotaConnectButtonProps, QuotaContext, type QuotaContextValue, type QuotaFetchStrategy, QuotaProvider, type QuotaProviderProps, QuotaUserMenu, type QuotaUserMenuProps, type VerifyWebhookOptions, type WebhookEvent, createQuotaMiddleware, createWebhookHandler, parseWebhook, useQuota, useQuotaAuth, useQuotaBalance, useQuotaPackages, useQuotaUser, verifyWebhookSignature };

package/dist/index.js

@@ -47,6 +47,7 @@ __export(index_exports, {
   useQuota: () => useQuota,
   useQuotaAuth: () => useQuotaAuth,
   useQuotaBalance: () => useQuotaBalance,
+  useQuotaPackages: () => useQuotaPackages,
   useQuotaUser: () => useQuotaUser,
   verifyWebhookSignature: () => verifyWebhookSignature
 });
@@ -210,10 +211,12 @@ function QuotaProvider({
   clientId,
   baseUrl = DEFAULT_BASE_URL2,
   callbackPath = DEFAULT_CALLBACK_PATH2,
-  apiPath = DEFAULT_API_PATH
+  apiPath = DEFAULT_API_PATH,
+  fetchStrategy = "eager"
 }) {
+  const isLazy = fetchStrategy === "lazy";
   const [user, setUser] = (0, import_react.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react.useState)(true);
+  const [isLoading, setIsLoading] = (0, import_react.useState)(!isLazy);
   const [error, setError] = (0, import_react.useState)(null);
   const fetchUser = (0, import_react.useCallback)(async () => {
     try {
@@ -240,8 +243,9 @@ function QuotaProvider({
     }
   }, [apiPath]);
   (0, import_react.useEffect)(() => {
+    if (isLazy) return;
     void fetchUser();
-  }, [fetchUser]);
+  }, [fetchUser, isLazy]);
   const login = (0, import_react.useCallback)(() => {
     const state = generateRandomState();
     if (typeof window !== "undefined") {
@@ -283,7 +287,8 @@ function QuotaProvider({
     error,
     login,
     logout,
-    refetch
+    refetch,
+    baseUrl
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(QuotaContext.Provider, { value, children });
 }
@@ -311,6 +316,7 @@ function getRedirectUri(callbackPath) {
 }
 
 // src/hooks.ts
+var import_react2 = require("react");
 function useQuotaUser() {
   const { user } = useQuota();
   return user;
@@ -333,9 +339,42 @@ function useQuotaBalance() {
     refetch
   };
 }
+function useQuotaPackages() {
+  const { baseUrl } = useQuota();
+  const [packages, setPackages] = (0, import_react2.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const hasFetched = (0, import_react2.useRef)(false);
+  const fetchPackages = (0, import_react2.useCallback)(async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      const response = await fetch(`${baseUrl}/v1/packages`);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch packages: ${response.statusText}`);
+      }
+      const data = await response.json();
+      setPackages(data.packages);
+      hasFetched.current = true;
+    } catch (err) {
+      const errorObj = err instanceof Error ? err : new Error("Unknown error");
+      setError(errorObj);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [baseUrl]);
+  if (!hasFetched.current && !isLoading && error === null) {
+    void fetchPackages();
+  }
+  const refetch = (0, import_react2.useCallback)(async () => {
+    hasFetched.current = false;
+    await fetchPackages();
+  }, [fetchPackages]);
+  return { packages, isLoading, error, refetch };
+}
 
 // src/components/QuotaConnectButton.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function QuotaConnectButton({
   children,
@@ -347,9 +386,9 @@ function QuotaConnectButton({
   showWhenConnected = false
 }) {
   const { user, login, isLoading, error } = useQuota();
-  const wasLoadingRef = (0, import_react2.useRef)(isLoading);
-  const hadUserRef = (0, import_react2.useRef)(!!user);
-  (0, import_react2.useEffect)(() => {
+  const wasLoadingRef = (0, import_react3.useRef)(isLoading);
+  const hadUserRef = (0, import_react3.useRef)(!!user);
+  (0, import_react3.useEffect)(() => {
     const wasLoading = wasLoadingRef.current;
     const hadUser = hadUserRef.current;
     wasLoadingRef.current = isLoading;
@@ -358,7 +397,7 @@ function QuotaConnectButton({
       onSuccess?.();
     }
   }, [user, isLoading, onSuccess]);
-  const handleClick = (0, import_react2.useCallback)(() => {
+  const handleClick = (0, import_react3.useCallback)(() => {
     try {
       login();
     } catch (err) {
@@ -595,7 +634,7 @@ function ErrorIcon() {
 }
 
 // src/components/QuotaBuyCredits.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function QuotaBuyCredits({
   packageId,
@@ -609,9 +648,9 @@ function QuotaBuyCredits({
   disabled = false
 }) {
   const { user } = useQuota();
-  const [isLoading, setIsLoading] = (0, import_react3.useState)(false);
-  const [error, setError] = (0, import_react3.useState)(null);
-  const handlePurchase = (0, import_react3.useCallback)(async () => {
+  const [isLoading, setIsLoading] = (0, import_react4.useState)(false);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const handlePurchase = (0, import_react4.useCallback)(async () => {
     if (!user) {
       const err = new Error("Must be logged in to purchase credits");
       setError(err);
@@ -704,7 +743,7 @@ function CartIcon() {
 }
 
 // src/components/QuotaUserMenu.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function QuotaUserMenu({
   className,
@@ -715,11 +754,11 @@ function QuotaUserMenu({
 }) {
   const { user, logout, isLoading: authLoading } = useQuota();
   const { balance } = useQuotaBalance();
-  const [isOpen, setIsOpen] = (0, import_react4.useState)(false);
-  const [isLoggingOut, setIsLoggingOut] = (0, import_react4.useState)(false);
-  const menuRef = (0, import_react4.useRef)(null);
-  const triggerRef = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
+  const [isLoggingOut, setIsLoggingOut] = (0, import_react5.useState)(false);
+  const menuRef = (0, import_react5.useRef)(null);
+  const triggerRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
     if (!isOpen) return;
     const handleClickOutside = (event) => {
       if (menuRef.current && !menuRef.current.contains(event.target)) {
@@ -739,10 +778,10 @@ function QuotaUserMenu({
       document.removeEventListener("keydown", handleEscape);
     };
   }, [isOpen]);
-  const handleToggle = (0, import_react4.useCallback)(() => {
+  const handleToggle = (0, import_react5.useCallback)(() => {
     setIsOpen((prev) => !prev);
   }, []);
-  const handleKeyDown = (0, import_react4.useCallback)(
+  const handleKeyDown = (0, import_react5.useCallback)(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
@@ -755,7 +794,7 @@ function QuotaUserMenu({
     },
     [isOpen]
   );
-  const handleLogout = (0, import_react4.useCallback)(async () => {
+  const handleLogout = (0, import_react5.useCallback)(async () => {
     setIsLoggingOut(true);
     try {
       await logout();
@@ -765,7 +804,7 @@ function QuotaUserMenu({
       setIsOpen(false);
     }
   }, [logout, onLogout]);
-  const handleBuyCredits = (0, import_react4.useCallback)(() => {
+  const handleBuyCredits = (0, import_react5.useCallback)(() => {
     setIsOpen(false);
     onBuyCredits?.();
   }, [onBuyCredits]);
@@ -1074,6 +1113,7 @@ function createWebhookHandler(secret, handlers) {
   useQuota,
   useQuotaAuth,
   useQuotaBalance,
+  useQuotaPackages,
   useQuotaUser,
   verifyWebhookSignature
 });

package/dist/index.mjs

@@ -170,10 +170,12 @@ function QuotaProvider({
   clientId,
   baseUrl = DEFAULT_BASE_URL2,
   callbackPath = DEFAULT_CALLBACK_PATH2,
-  apiPath = DEFAULT_API_PATH
+  apiPath = DEFAULT_API_PATH,
+  fetchStrategy = "eager"
 }) {
+  const isLazy = fetchStrategy === "lazy";
   const [user, setUser] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(!isLazy);
   const [error, setError] = useState(null);
   const fetchUser = useCallback(async () => {
     try {
@@ -200,8 +202,9 @@ function QuotaProvider({
     }
   }, [apiPath]);
   useEffect(() => {
+    if (isLazy) return;
     void fetchUser();
-  }, [fetchUser]);
+  }, [fetchUser, isLazy]);
   const login = useCallback(() => {
     const state = generateRandomState();
     if (typeof window !== "undefined") {
@@ -243,7 +246,8 @@ function QuotaProvider({
     error,
     login,
     logout,
-    refetch
+    refetch,
+    baseUrl
   };
   return /* @__PURE__ */ jsx(QuotaContext.Provider, { value, children });
 }
@@ -271,6 +275,7 @@ function getRedirectUri(callbackPath) {
 }
 
 // src/hooks.ts
+import { useState as useState2, useCallback as useCallback2, useRef } from "react";
 function useQuotaUser() {
   const { user } = useQuota();
   return user;
@@ -293,9 +298,42 @@ function useQuotaBalance() {
     refetch
   };
 }
+function useQuotaPackages() {
+  const { baseUrl } = useQuota();
+  const [packages, setPackages] = useState2([]);
+  const [isLoading, setIsLoading] = useState2(false);
+  const [error, setError] = useState2(null);
+  const hasFetched = useRef(false);
+  const fetchPackages = useCallback2(async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      const response = await fetch(`${baseUrl}/v1/packages`);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch packages: ${response.statusText}`);
+      }
+      const data = await response.json();
+      setPackages(data.packages);
+      hasFetched.current = true;
+    } catch (err) {
+      const errorObj = err instanceof Error ? err : new Error("Unknown error");
+      setError(errorObj);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [baseUrl]);
+  if (!hasFetched.current && !isLoading && error === null) {
+    void fetchPackages();
+  }
+  const refetch = useCallback2(async () => {
+    hasFetched.current = false;
+    await fetchPackages();
+  }, [fetchPackages]);
+  return { packages, isLoading, error, refetch };
+}
 
 // src/components/QuotaConnectButton.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useRef } from "react";
+import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2 } from "react";
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 function QuotaConnectButton({
   children,
@@ -307,8 +345,8 @@ function QuotaConnectButton({
   showWhenConnected = false
 }) {
   const { user, login, isLoading, error } = useQuota();
-  const wasLoadingRef = useRef(isLoading);
-  const hadUserRef = useRef(!!user);
+  const wasLoadingRef = useRef2(isLoading);
+  const hadUserRef = useRef2(!!user);
   useEffect2(() => {
     const wasLoading = wasLoadingRef.current;
     const hadUser = hadUserRef.current;
@@ -318,7 +356,7 @@ function QuotaConnectButton({
       onSuccess?.();
     }
   }, [user, isLoading, onSuccess]);
-  const handleClick = useCallback2(() => {
+  const handleClick = useCallback3(() => {
     try {
       login();
     } catch (err) {
@@ -555,7 +593,7 @@ function ErrorIcon() {
 }
 
 // src/components/QuotaBuyCredits.tsx
-import { useState as useState2, useCallback as useCallback3 } from "react";
+import { useState as useState3, useCallback as useCallback4 } from "react";
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function QuotaBuyCredits({
   packageId,
@@ -569,9 +607,9 @@ function QuotaBuyCredits({
   disabled = false
 }) {
   const { user } = useQuota();
-  const [isLoading, setIsLoading] = useState2(false);
-  const [error, setError] = useState2(null);
-  const handlePurchase = useCallback3(async () => {
+  const [isLoading, setIsLoading] = useState3(false);
+  const [error, setError] = useState3(null);
+  const handlePurchase = useCallback4(async () => {
     if (!user) {
       const err = new Error("Must be logged in to purchase credits");
       setError(err);
@@ -665,9 +703,9 @@ function CartIcon() {
 
 // src/components/QuotaUserMenu.tsx
 import {
-  useState as useState3,
-  useCallback as useCallback4,
-  useRef as useRef2,
+  useState as useState4,
+  useCallback as useCallback5,
+  useRef as useRef3,
   useEffect as useEffect3
 } from "react";
 import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -680,10 +718,10 @@ function QuotaUserMenu({
 }) {
   const { user, logout, isLoading: authLoading } = useQuota();
   const { balance } = useQuotaBalance();
-  const [isOpen, setIsOpen] = useState3(false);
-  const [isLoggingOut, setIsLoggingOut] = useState3(false);
-  const menuRef = useRef2(null);
-  const triggerRef = useRef2(null);
+  const [isOpen, setIsOpen] = useState4(false);
+  const [isLoggingOut, setIsLoggingOut] = useState4(false);
+  const menuRef = useRef3(null);
+  const triggerRef = useRef3(null);
   useEffect3(() => {
     if (!isOpen) return;
     const handleClickOutside = (event) => {
@@ -704,10 +742,10 @@ function QuotaUserMenu({
       document.removeEventListener("keydown", handleEscape);
     };
   }, [isOpen]);
-  const handleToggle = useCallback4(() => {
+  const handleToggle = useCallback5(() => {
     setIsOpen((prev) => !prev);
   }, []);
-  const handleKeyDown = useCallback4(
+  const handleKeyDown = useCallback5(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
@@ -720,7 +758,7 @@ function QuotaUserMenu({
     },
     [isOpen]
   );
-  const handleLogout = useCallback4(async () => {
+  const handleLogout = useCallback5(async () => {
     setIsLoggingOut(true);
     try {
       await logout();
@@ -730,7 +768,7 @@ function QuotaUserMenu({
       setIsOpen(false);
     }
   }, [logout, onLogout]);
-  const handleBuyCredits = useCallback4(() => {
+  const handleBuyCredits = useCallback5(() => {
     setIsOpen(false);
     onBuyCredits?.();
   }, [onBuyCredits]);
@@ -963,6 +1001,7 @@ export {
   useQuota,
   useQuotaAuth,
   useQuotaBalance,
+  useQuotaPackages,
   useQuotaUser,
   verifyWebhookSignature
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usequota/nextjs",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Next.js SDK for Quota — AI credit billing middleware, hooks, and components",
   "license": "MIT",
   "repository": {