@hyperyai/sdk 1.0.0

package/LICENSE

@@ -0,0 +1,13 @@
+Pay It Forward License (PIF)
+
+Copyright (c) 2026 The Hypery Project Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+This license includes a perpetual, worldwide, non-exclusive, royalty-free, irrevocable (except as stated below) grant for patent claims necessarily infringed by the use of the Software or any contributions submitted to it; terminating automatically when an entity initiates patent litigation (including a cross-claim or counterclaim) alleging that the Software or any portion thereof infringes a patent.
+
+The software is provided "as is," without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and non-infringement. In no event shall the authors or copyright holders be liable for any claim, damages, or other liability, whether in an action of contract, tort, or otherwise, arising from, out of, or in connection with the software or the use or other dealings in the software.
+
+Recipients of the Software should pay it forward by contributing to the open-source community through actions including but not limited to providing code, documentation, tutorials, guides, support, feedback, or promoting open-source projects through advocacy or related efforts that advance innovation and community growth.

package/README.md

@@ -0,0 +1,391 @@
+# @hyperyai/sdk
+
+Drop-in authentication and error handling library for Hypery apps. Simple, secure, and built for React.
+
+This package provides everything you need for OAuth authentication, user management, and structured error handling (spending limits, insufficient credits, etc.) in your Hypery applications.
+
+Inspired by [Clerk](https://clerk.com/react-authentication), but purpose-built for Hypery's OAuth system.
+
+## 📸 Component gallery
+
+See **[docs/COMPONENTS.md](./docs/COMPONENTS.md)** for a visual reference of every component with live screenshots and usage.
+
+![Auth components — SignInForm and AuthModal](./docs/screenshots/authmodal-open.png)
+
+## Features
+
+- 🔐 **Secure OAuth 2.0 + PKCE** - Industry-standard authentication
+- ⚛️ **React-first** - Hooks and components that feel natural
+- 🎨 **Customizable** - Bring your own UI or use our defaults
+- 📦 **Tiny** - Minimal dependencies, maximum performance
+- 🔄 **Auto-refresh** - Seamless token management
+- 💾 **Flexible storage** - localStorage, sessionStorage, or memory
+
+## Installation
+
+```bash
+npm install @hyperyai/sdk
+```
+
+The package ships compiled JavaScript with type declarations (plus the TypeScript
+source under `src/` for reference), so it works out of the box — no
+`transpilePackages` or build configuration needed.
+
+## Local development against this repo
+
+To develop `@hyperyai/sdk` alongside a consuming app, use
+[yalc](https://github.com/wclr/yalc) (npm link duplicates React and breaks hooks):
+
+```bash
+# in hypery-sdk
+npm i -g yalc
+yalc publish            # builds via prepack and stores the real pack output
+# in your app
+yalc add @hyperyai/sdk && npm install
+
+# iterate: rebuild + push updates into consumers
+yalc push               # in hypery-sdk, after changes
+
+# before committing your app
+yalc remove --all && npm install
+```
+
+## Quick Start
+
+### 1. Wrap your app with `HyperyProvider`
+
+```tsx
+import { HyperyProvider } from '@hyperyai/sdk';
+
+function App() {
+  return (
+    <HyperyProvider
+      config={{
+        clientId: 'your-client-id',
+        redirectUri: 'http://localhost:3000/callback',
+        gatewayUrl: 'https://api.hypery.ai',
+        // Optional: defaults to ['read', 'write', 'ai:chat', 'ai:completions', 'ai:models', 'billing:read']
+        scopes: ['read', 'write', 'ai:chat', 'ai:completions', 'ai:models', 'billing:read'],
+      }}
+    >
+      <YourApp />
+    </HyperyProvider>
+  );
+}
+```
+
+### 2. Use authentication components
+
+```tsx
+import { SignedIn, SignedOut, SignIn, UserButton } from '@hyperyai/sdk';
+
+function YourApp() {
+  return (
+    <>
+      <SignedIn>
+        <header>
+          <h1>Welcome!</h1>
+          <UserButton showUserInfo />
+        </header>
+        <Dashboard />
+      </SignedIn>
+
+      <SignedOut>
+        <div className="login-page">
+          <h1>Sign in to continue</h1>
+          <SignIn buttonText="Sign in with Hypery" />
+        </div>
+      </SignedOut>
+    </>
+  );
+}
+```
+
+### 3. Access user data with hooks
+
+```tsx
+import { useUser, useHyperyAuth } from '@hyperyai/sdk';
+
+function Dashboard() {
+  const { user, isLoading } = useUser();
+  const { logout } = useHyperyAuth();
+
+  if (isLoading) return <div>Loading...</div>;
+
+  return (
+    <div>
+      <h1>Welcome, {user?.name}!</h1>
+      <p>Email: {user?.email}</p>
+      <button onClick={logout}>Sign out</button>
+    </div>
+  );
+}
+```
+
+## Components
+
+### `<HyperyProvider />`
+
+The main provider component. Wrap your app with this.
+
+```tsx
+<HyperyProvider
+  config={{
+    clientId: string;           // Your OAuth client ID
+    redirectUri: string;        // Callback URL after auth
+    gatewayUrl: string;         // Hypery API URL
+    scopes?: string[];          // OAuth scopes (default: ['read', 'write'])
+    storage?: 'localStorage' | 'sessionStorage' | 'memory'; // Storage type
+  }}
+>
+  {children}
+</HyperyProvider>
+```
+
+### Authentication Components
+
+**`<SignIn />`** - Sign-in button
+
+```tsx
+<SignIn 
+  buttonText="Sign in with Hypery"
+  variant="primary"  // 'primary' | 'secondary' | 'outline'
+  className="custom-button-class"
+/>
+```
+
+**`<SignUp />`** - Sign-up button
+
+```tsx
+<SignUp 
+  buttonText="Get Started"
+  variant="primary"
+  onSignUpStart={() => console.log('Starting signup')}
+/>
+```
+
+**`<SignInForm />`** - Embedded login form with social OAuth
+
+Full-featured login form with GitHub, Google, and email/password authentication.
+
+```tsx
+<SignInForm 
+  showCard
+  showTitle
+  showSocial  // Show GitHub and Google buttons
+  showEmailPassword  // Show email/password form
+  title="Welcome back"
+  description="Sign in to your account"
+  onSuccess={() => console.log('Logged in!')}
+  onError={(error) => console.error(error)}
+/>
+```
+
+```tsx
+// Social auth only (no email/password)
+<SignInForm 
+  showCard
+  showSocial={true}
+  showEmailPassword={false}
+/>
+```
+
+**`<UserButton />`** - User avatar with dropdown menu
+
+```tsx
+<UserButton 
+  showUserInfo
+  size="md"  // 'sm' | 'md' | 'lg'
+  renderDropdown={(user, logout) => (
+    <div>
+      <p>{user.name}</p>
+      <button onClick={logout}>Sign out</button>
+    </div>
+  )}
+/>
+```
+
+**`<UserProfile />`** - User profile card
+
+```tsx
+<UserProfile 
+  showExtended
+  showLoading
+/>
+```
+
+### Control Components
+
+**`<SignedIn>`** - Only renders when user is authenticated
+
+```tsx
+<SignedIn>
+  <Dashboard />
+</SignedIn>
+```
+
+**`<SignedOut>`** - Only renders when user is NOT authenticated
+
+```tsx
+<SignedOut>
+  <SignIn />
+</SignedOut>
+```
+
+**`<Protect>`** - Protects content and redirects if needed
+
+```tsx
+<Protect fallback={<SignIn />}>
+  <ProtectedContent />
+</Protect>
+```
+
+**`<RedirectToSignIn />`** - Immediately redirects to sign in
+
+```tsx
+<RedirectToSignIn />
+```
+
+## Hooks
+
+### `useAuth()` (Alias for `useHyperyAuth()`)
+
+Full auth context with methods. Matches Clerk's API pattern.
+
+```tsx
+const {
+  user,                    // Current user
+  isAuthenticated,         // Auth status
+  isLoading,               // Loading state
+  error,                   // Error message
+  login,                   // Initiate login
+  logout,                  // Sign out
+  refreshAuth,             // Manually refresh
+  getAccessToken,          // Get valid access token
+} = useAuth();
+```
+
+### `useUser()`
+
+Access current user data only.
+
+```tsx
+const { user, isLoading } = useUser();
+
+// user object contains:
+// - id: string
+// - name: string
+// - email: string
+// - image?: string
+```
+
+### `useHyperyAuth()`
+
+Same as `useAuth()`, but with explicit naming.
+
+```tsx
+const auth = useHyperyAuth();
+```
+
+## Advanced Usage
+
+### Custom storage
+
+```tsx
+<HyperyProvider
+  config={{
+    // ...other config
+    storage: 'sessionStorage', // or 'memory' for SSR
+  }}
+>
+```
+
+### Manual token management
+
+```tsx
+import { useHyperyAuth } from '@hyperyai/sdk';
+
+function MyComponent() {
+  const { getAccessToken } = useHyperyAuth();
+
+  const makeAuthenticatedRequest = async () => {
+    const token = await getAccessToken();
+    
+    const response = await fetch('/api/data', {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    
+    return response.json();
+  };
+}
+```
+
+### Custom UI
+
+Build your own UI using the hooks:
+
+```tsx
+import { useHyperyAuth } from '@hyperyai/sdk';
+
+function CustomLoginButton() {
+  const { login, isLoading } = useHyperyAuth();
+
+  return (
+    <button
+      onClick={login}
+      disabled={isLoading}
+      className="my-custom-button"
+    >
+      {isLoading ? 'Loading...' : 'Sign in'}
+    </button>
+  );
+}
+```
+
+## Environment Variables
+
+Create a `.env.local` file:
+
+```env
+NEXT_PUBLIC_OAUTH_CLIENT_ID=your_client_id
+NEXT_PUBLIC_REDIRECT_URI=http://localhost:3000/callback
+NEXT_PUBLIC_AUTH_URL=https://api.hypery.ai
+```
+
+## Error handling: payment & auth modals
+
+When a gateway request is blocked mid-flow, the SDK lets you pop a **payment**
+modal (out of credits / spending limit / card issue) or trigger **re-auth**
+(expired/invalid token). This is **opt-in** — the SDK does not install a global
+fetch interceptor, so you wire it into your own API calls.
+
+Errors arrive as a JSON envelope. Classify on `error.code` (status is a
+fallback only — spending-limit is `429`, insufficient-credits/payment is `402`,
+auth is `401`):
+
+```jsonc
+{ "error": { "code": "INSUFFICIENT_CREDITS",    "type": "insufficient_credits_error" } }
+{ "error": { "code": "SPENDING_LIMIT_EXCEEDED",  "type": "spending_limit_error" } }
+{ "error": { "code": "PAYMENT_METHOD_REQUIRED",  "type": "payment_method_required_error" } }
+{ "error": { "code": "PAYMENT_DECLINED",         "type": "payment_declined_error" } }
+{ "error": { "code": "UNAUTHENTICATED",          "type": "authentication_error" } }
+```
+
+`useError().setError(body)` accepts the raw `{ error: { code } }` envelope **or**
+an already-unwrapped object, and falls back to the HTTP status (`402`/`401`) when
+the body has no recognized `code`. It exposes `isBillingRestriction` (any of the
+payment/credit/limit cases) and `isAuth` (a `401`) so you can drive
+`RestrictionModal` and `AuthModal` respectively. The guards
+`isBillingRestriction(body)` and `isAuthError(body)` are also exported for use
+outside the hook.
+
+## Examples
+
+See the `/apps/chat` and `/apps/imagine` directories for complete working examples.
+
+## License
+
+MIT
+

package/dist/components/AuthButton.d.ts

@@ -0,0 +1,51 @@
+/**
+ * AuthButton Component
+ * Simple button that triggers authentication modal
+ * Drop this anywhere in your app for instant auth
+ */
+import React from 'react';
+export interface AuthButtonProps {
+    /** Button text */
+    children?: React.ReactNode;
+    /** Button variant */
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+    /** Button size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Custom className */
+    className?: string;
+    /** Initial auth mode */
+    mode?: 'signin' | 'signup';
+    /** Callback after successful auth */
+    onSuccess?: () => void;
+    /** Show social login options */
+    showSocial?: boolean;
+    /** Show email/password form */
+    showEmailPassword?: boolean;
+    /** Custom branding for modal */
+    branding?: {
+        logo?: string;
+        appName?: string;
+        primaryColor?: string;
+    };
+}
+/**
+ * Button that opens authentication modal
+ * Perfect for navbar, landing pages, or anywhere you need auth
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * <AuthButton>Sign In</AuthButton>
+ *
+ * // With customization
+ * <AuthButton
+ *   variant="primary"
+ *   mode="signup"
+ *   onSuccess={() => router.push('/dashboard')}
+ *   branding={{ appName: 'My App', primaryColor: '#8b5cf6' }}
+ * >
+ *   Get Started
+ * </AuthButton>
+ * ```
+ */
+export declare function AuthButton({ children, variant, size, className, mode, onSuccess, showSocial, showEmailPassword, branding, }: AuthButtonProps): React.JSX.Element;

package/dist/components/AuthButton.js

@@ -0,0 +1,60 @@
+/**
+ * AuthButton Component
+ * Simple button that triggers authentication modal
+ * Drop this anywhere in your app for instant auth
+ */
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { AuthModal } from './AuthModal';
+/**
+ * Button that opens authentication modal
+ * Perfect for navbar, landing pages, or anywhere you need auth
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * <AuthButton>Sign In</AuthButton>
+ *
+ * // With customization
+ * <AuthButton
+ *   variant="primary"
+ *   mode="signup"
+ *   onSuccess={() => router.push('/dashboard')}
+ *   branding={{ appName: 'My App', primaryColor: '#8b5cf6' }}
+ * >
+ *   Get Started
+ * </AuthButton>
+ * ```
+ */
+export function AuthButton({ children = 'Sign In', variant = 'primary', size = 'md', className = '', mode = 'signin', onSuccess, showSocial = true, showEmailPassword = true, branding, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const sizeClasses = {
+        sm: 'px-4 py-2 text-sm',
+        md: 'px-6 py-2.5 text-base',
+        lg: 'px-8 py-3 text-lg',
+    };
+    const variantClasses = {
+        primary: 'bg-purple-600 hover:bg-purple-700 text-white shadow-md hover:shadow-lg',
+        secondary: 'bg-gray-600 hover:bg-gray-700 text-white shadow-md hover:shadow-lg',
+        outline: 'border-2 border-purple-600 text-purple-600 hover:bg-purple-50 dark:hover:bg-purple-950/30',
+        ghost: 'hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300',
+    };
+    const handleClick = () => {
+        console.log('AuthButton clicked! Opening modal...', { isOpen, mode });
+        setIsOpen(true);
+    };
+    console.log('AuthButton render:', { isOpen, mode, variant, size });
+    return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: handleClick, type: "button", className: `
+          ${sizeClasses[size]}
+          ${variantClasses[variant]}
+          rounded-lg font-medium transition-all
+          ${className}
+        `, children: children }), _jsx(AuthModal, { isOpen: isOpen, onClose: () => {
+                    console.log('AuthModal closing...');
+                    setIsOpen(false);
+                }, initialMode: mode, onSuccess: () => {
+                    setIsOpen(false);
+                    onSuccess?.();
+                }, showSocial: showSocial, showEmailPassword: showEmailPassword, branding: branding })] }));
+}

package/dist/components/AuthModal.d.ts

@@ -0,0 +1,20 @@
+/**
+ * AuthModal Component
+ * Modal dialog for authentication using shadcn Dialog
+ */
+import React from 'react';
+export interface AuthModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    initialMode?: 'signin' | 'signup';
+    onSuccess?: () => void;
+    onError?: (error: string) => void;
+    showSocial?: boolean;
+    showEmailPassword?: boolean;
+    branding?: {
+        logo?: string;
+        appName?: string;
+        primaryColor?: string;
+    };
+}
+export declare function AuthModal({ isOpen, onClose, initialMode, onSuccess, onError, showSocial, showEmailPassword, branding, }: AuthModalProps): React.JSX.Element;

package/dist/components/AuthModal.js

@@ -0,0 +1,62 @@
+/**
+ * AuthModal Component
+ * Modal dialog for authentication using shadcn Dialog
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './ui/dialog';
+import { useHyperyAuth } from '../lib/context';
+export function AuthModal({ isOpen, onClose, initialMode = 'signin', onSuccess, onError, showSocial = true, showEmailPassword = false, branding, }) {
+    const { login } = useHyperyAuth();
+    const [mode, setMode] = useState(initialMode);
+    const [isLoading, setIsLoading] = useState(false);
+    const [loadingProvider, setLoadingProvider] = useState(null);
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [name, setName] = useState('');
+    const [error, setError] = useState('');
+    const handleSocialSignIn = async (provider) => {
+        console.log('[AuthModal] Social button clicked:', provider);
+        setLoadingProvider(provider);
+        setError('');
+        try {
+            console.log('[AuthModal] Calling login()...');
+            await login();
+            console.log('[AuthModal] Login completed');
+            if (onSuccess) {
+                onSuccess();
+            }
+        }
+        catch (err) {
+            console.error('[AuthModal] Login failed:', err);
+            const errorMessage = err instanceof Error ? err.message : `${provider} sign in failed`;
+            setError(errorMessage);
+            if (onError) {
+                onError(errorMessage);
+            }
+            setLoadingProvider(null);
+        }
+    };
+    const handleEmailSubmit = (e) => {
+        e.preventDefault();
+        setError('');
+        setIsLoading(true);
+        if (!email || !password) {
+            setError('Please fill in all fields');
+            setIsLoading(false);
+            return;
+        }
+        if (mode === 'signup' && !name) {
+            setError('Please enter your name');
+            setIsLoading(false);
+            return;
+        }
+        setError('Direct email authentication coming soon. Please use social sign-in.');
+        setIsLoading(false);
+    };
+    const primaryColor = branding?.primaryColor || '#8b5cf6';
+    return (_jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: _jsxs(DialogContent, { className: "sm:max-w-md bg-white dark:bg-gray-900 text-gray-900 dark:text-white", children: [_jsxs(DialogHeader, { children: [branding?.logo && (_jsx("img", { src: branding.logo, alt: "Logo", className: "h-12 mx-auto mb-4" })), _jsx(DialogTitle, { className: "text-center text-2xl text-gray-900 dark:text-white", children: mode === 'signin' ? 'Welcome back' : 'Create your account' }), _jsx(DialogDescription, { className: "text-center text-sm text-gray-600 dark:text-gray-400", children: mode === 'signin'
+                                ? `Sign in to ${branding?.appName || 'continue'}`
+                                : `Get started with ${branding?.appName || 'your account'}` })] }), _jsxs("div", { className: "space-y-6 py-4", children: [error && (_jsx("div", { className: "p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 text-sm", children: error })), showSocial && (_jsxs("div", { className: "space-y-2", children: [_jsxs("button", { onClick: () => handleSocialSignIn('google'), disabled: !!loadingProvider, className: "w-full bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-750 border border-gray-300 dark:border-gray-700 text-gray-900 dark:text-white py-2 px-3 rounded flex items-center justify-center gap-2 text-sm font-medium transition-all disabled:opacity-50", children: [loadingProvider === 'google' ? (_jsx("div", { className: "w-4 h-4 border-2 border-gray-300 border-t-transparent rounded-full animate-spin" })) : (_jsxs("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", children: [_jsx("path", { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }), _jsx("path", { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }), _jsx("path", { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }), _jsx("path", { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })] })), _jsx("span", { children: "Continue with Google" })] }), _jsxs("button", { onClick: () => handleSocialSignIn('github'), disabled: !!loadingProvider, className: "w-full bg-gray-900 dark:bg-gray-800 hover:bg-gray-800 dark:hover:bg-gray-750 text-white py-2 px-3 rounded flex items-center justify-center gap-2 text-sm font-medium transition-all disabled:opacity-50", children: [loadingProvider === 'github' ? (_jsx("div", { className: "w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" })) : (_jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { fillRule: "evenodd", d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z", clipRule: "evenodd" }) })), _jsx("span", { children: "Continue with GitHub" })] })] })), showSocial && showEmailPassword && (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute inset-0 flex items-center", children: _jsx("div", { className: "w-full border-t border-gray-300 dark:border-gray-700" }) }), _jsx("div", { className: "relative flex justify-center text-xs uppercase", children: _jsx("span", { className: "bg-white dark:bg-gray-900 px-2 text-gray-500 dark:text-gray-400", children: "Or continue with email" }) })] })), showEmailPassword && (_jsxs("form", { onSubmit: handleEmailSubmit, className: "space-y-4", children: [mode === 'signup' && (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Full name" }), _jsx("input", { type: "text", value: name, onChange: (e) => setName(e.target.value), className: "w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white", placeholder: "John Doe", disabled: isLoading })] })), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Email" }), _jsx("input", { type: "email", value: email, onChange: (e) => setEmail(e.target.value), className: "w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white", placeholder: "you@example.com", disabled: isLoading })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Password" }), _jsx("input", { type: "password", value: password, onChange: (e) => setPassword(e.target.value), className: "w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", disabled: isLoading })] }), _jsx("button", { type: "submit", disabled: isLoading, className: "w-full py-2 px-4 rounded-md font-medium text-white transition-all", style: { backgroundColor: primaryColor }, children: isLoading ? 'Processing...' : mode === 'signin' ? 'Sign in' : 'Create account' })] })), _jsxs("div", { className: "text-center text-sm", children: [_jsx("span", { className: "text-gray-600 dark:text-gray-400", children: mode === 'signin' ? "Don't have an account?" : 'Already have an account?' }), ' ', _jsx("button", { onClick: () => setMode(mode === 'signin' ? 'signup' : 'signin'), className: "font-medium hover:underline", style: { color: primaryColor }, children: mode === 'signin' ? 'Sign up' : 'Sign in' })] })] })] }) }));
+}

package/dist/components/BuyButton.d.ts

@@ -0,0 +1,47 @@
+/**
+ * BuyButton — "buy with Hypery" marketplace checkout button.
+ *
+ * On click it runs the full auth+charge flow via {@link useCheckout}: it logs
+ * the buyer in if needed, charges, and adds a card if none is on file — each
+ * step as a popup or a redirect per `config.interactionMode` (`auto` by default).
+ * So an unauthenticated visitor can click Buy and be walked through login → card
+ * → charge without leaving the page (popup mode). Never throws.
+ */
+import type React from "react";
+import { type BuySuccess } from "../hooks/useMarketplace";
+import type { BrandingConfig, ParsedError } from "../types";
+export interface BuyButtonProps {
+    /** Seller app the purchase is credited to. */
+    appId: string;
+    /** Amount to charge the buyer, in cents. */
+    amountCents: number;
+    /** Optional human-readable description of the purchase. */
+    description?: string;
+    /** Button label. Defaults to a price-formatted "Buy · $X.XX". */
+    label?: React.ReactNode;
+    /**
+     * Require an explicit per-transaction confirmation before charging (the card
+     * is charged off-session, so this gives the buyer a clear "yes"). Defaults to
+     * true: the first click arms the button ("Confirm · $X.XX" + Cancel), the
+     * second click charges. Set false to charge on a single click.
+     */
+    requireConfirmation?: boolean;
+    /** Called with the successful checkout result. */
+    onSuccess?: (result: BuySuccess) => void;
+    /** Called with a classified error for failures other than needs-a-card. */
+    onError?: (error: ParsedError) => void;
+    /** Custom className appended to the button. */
+    className?: string;
+    /** Optional branding (primaryColor is used as the button color). */
+    branding?: BrandingConfig;
+}
+/**
+ * Drop-in checkout button for the Hypery marketplace.
+ *
+ * @example
+ * ```tsx
+ * <BuyButton appId="app_123" amountCents={499} description="Pro upgrade"
+ *   onSuccess={(r) => console.log('paid', r.paymentIntentId)} />
+ * ```
+ */
+export declare function BuyButton({ appId, amountCents, description, label, onSuccess, onError, className, branding, requireConfirmation, }: BuyButtonProps): React.JSX.Element;