@insforge/react 0.1.6 → 0.2.0

package/dist/components.d.mts

@@ -0,0 +1,190 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SignInProps, SignUpProps, UserButtonProps, ProtectProps, ConditionalProps } from './types.mjs';
+import * as react from 'react';
+import { ReactNode } from 'react';
+export { ForgotPasswordForm, ResetPasswordForm, SignInForm, SignUpForm, VerifyEmailStatus } from './forms.mjs';
+export { AuthBranding, AuthContainer, AuthDivider, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthSubmitButton, AuthVerificationCodeInput, validatePasswordStrength } from './atoms.mjs';
+import '@insforge/shared-schemas';
+
+/**
+ * Pre-built sign-in component with full authentication logic.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SignIn afterSignInUrl="/dashboard" />
+ *
+ * // With custom callbacks
+ * <SignIn
+ *   onSuccess={(user) => console.log('Signed in:', user)}
+ *   onError={(error) => console.error('Error:', error)}
+ * />
+ * ```
+ */
+declare function SignIn({ afterSignInUrl, onSuccess, onError, onRedirect, ...uiProps }: SignInProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Pre-built sign-up component with full authentication logic.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SignUp afterSignUpUrl="/onboarding" />
+ *
+ * // With custom callbacks
+ * <SignUp
+ *   onSuccess={(user) => console.log('Signed up:', user)}
+ *   onError={(error) => console.error('Error:', error)}
+ * />
+ * ```
+ */
+declare function SignUp({ afterSignUpUrl, onSuccess, onError, onRedirect, ...uiProps }: SignUpProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * User profile button with dropdown menu and sign-out functionality.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <UserButton afterSignOutUrl="/" />
+ *
+ * // Simple mode
+ * <UserButton mode="simple" />
+ *
+ * // With custom styling
+ * <UserButton
+ *   appearance={{
+ *     buttonClassName: "hover:bg-white/10",
+ *     dropdownClassName: "bg-gray-900"
+ *   }}
+ * />
+ * ```
+ *
+ * @param {string} [afterSignOutUrl='/'] - URL to redirect to after sign-out
+ * @param {'detailed'|'simple'} [mode='detailed'] - Display mode
+ * @param {object} [appearance] - Custom Tailwind classes
+ */
+declare function UserButton({ afterSignOutUrl, mode, appearance, }: UserButtonProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Protected route component that redirects unauthenticated users.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Protect redirectTo="/sign-in">
+ *   <Dashboard />
+ * </Protect>
+ *
+ * // With custom redirect handler (e.g., for Next.js router)
+ * <Protect
+ *   redirectTo="/sign-in"
+ *   onRedirect={(url) => router.push(url)}
+ * >
+ *   <AdminPanel />
+ * </Protect>
+ *
+ * // With custom condition (role-based access)
+ * <Protect
+ *   redirectTo="/unauthorized"
+ *   condition={(user) => user.role === 'admin'}
+ * >
+ *   <AdminContent />
+ * </Protect>
+ * ```
+ *
+ * @param {ReactNode} children - Content to protect
+ * @param {ReactNode} [fallback] - Fallback UI while loading
+ * @param {string} [redirectTo='/sign-in'] - Redirect URL
+ * @param {function} [condition] - Custom access condition
+ * @param {function} [onRedirect] - Custom redirect handler (default: window.location)
+ */
+declare function Protect({ children, fallback, redirectTo, condition, onRedirect, }: ProtectProps): string | number | bigint | true | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Conditional component that renders children only when user is signed in.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SignedIn>
+ *   <Dashboard />
+ * </SignedIn>
+ * ```
+ *
+ * @param {ReactNode} children - React nodes to render when user is authenticated
+ * @returns {JSX.Element | null} Renders children when signed in, null otherwise
+ */
+declare function SignedIn({ children }: ConditionalProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Conditional component that renders children only when user is signed out.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SignedOut>
+ *   <SignIn />
+ * </SignedOut>
+ * ```
+ *
+ * @param {ReactNode} children - React nodes to render when user is not authenticated
+ * @returns {JSX.Element | null} Renders children when signed out, null otherwise
+ */
+declare function SignedOut({ children }: ConditionalProps): react_jsx_runtime.JSX.Element | null;
+
+interface InsforgeCallbackProps {
+    /**
+     * Redirect destination after successful authentication
+     */
+    redirectTo?: string;
+    /**
+     * Callback fired on successful authentication
+     */
+    onSuccess?: () => void;
+    /**
+     * Callback fired on authentication error
+     */
+    onError?: (error: string) => void;
+    /**
+     * Custom loading component
+     */
+    loadingComponent?: ReactNode;
+    /**
+     * Custom redirect handler (default: window.location)
+     */
+    onRedirect?: (url: string) => void;
+}
+/**
+ * InsforgeCallback - Handles OAuth and email/password authentication callbacks
+ *
+ * Place this component on your `/auth/callback` page.
+ *
+ * @example
+ * ```tsx
+ * // Minimal usage
+ * export default function CallbackPage() {
+ *   return <InsforgeCallback />;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With Next.js router
+ * import { useRouter } from 'next/navigation';
+ *
+ * export default function CallbackPage() {
+ *   const router = useRouter();
+ *   return (
+ *     <InsforgeCallback
+ *       redirectTo="/dashboard"
+ *       onRedirect={(url) => router.push(url)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function InsforgeCallback({ redirectTo, onSuccess, onError, loadingComponent, onRedirect, }: InsforgeCallbackProps): string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element;
+
+export { InsforgeCallback, type InsforgeCallbackProps, Protect, SignIn, SignUp, SignedIn, SignedOut, UserButton };

package/dist/components.d.ts

@@ -0,0 +1,190 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SignInProps, SignUpProps, UserButtonProps, ProtectProps, ConditionalProps } from './types.js';
+import * as react from 'react';
+import { ReactNode } from 'react';
+export { ForgotPasswordForm, ResetPasswordForm, SignInForm, SignUpForm, VerifyEmailStatus } from './forms.js';
+export { AuthBranding, AuthContainer, AuthDivider, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthSubmitButton, AuthVerificationCodeInput, validatePasswordStrength } from './atoms.js';
+import '@insforge/shared-schemas';
+
+/**
+ * Pre-built sign-in component with full authentication logic.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SignIn afterSignInUrl="/dashboard" />
+ *
+ * // With custom callbacks
+ * <SignIn
+ *   onSuccess={(user) => console.log('Signed in:', user)}
+ *   onError={(error) => console.error('Error:', error)}
+ * />
+ * ```
+ */
+declare function SignIn({ afterSignInUrl, onSuccess, onError, onRedirect, ...uiProps }: SignInProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Pre-built sign-up component with full authentication logic.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SignUp afterSignUpUrl="/onboarding" />
+ *
+ * // With custom callbacks
+ * <SignUp
+ *   onSuccess={(user) => console.log('Signed up:', user)}
+ *   onError={(error) => console.error('Error:', error)}
+ * />
+ * ```
+ */
+declare function SignUp({ afterSignUpUrl, onSuccess, onError, onRedirect, ...uiProps }: SignUpProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * User profile button with dropdown menu and sign-out functionality.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <UserButton afterSignOutUrl="/" />
+ *
+ * // Simple mode
+ * <UserButton mode="simple" />
+ *
+ * // With custom styling
+ * <UserButton
+ *   appearance={{
+ *     buttonClassName: "hover:bg-white/10",
+ *     dropdownClassName: "bg-gray-900"
+ *   }}
+ * />
+ * ```
+ *
+ * @param {string} [afterSignOutUrl='/'] - URL to redirect to after sign-out
+ * @param {'detailed'|'simple'} [mode='detailed'] - Display mode
+ * @param {object} [appearance] - Custom Tailwind classes
+ */
+declare function UserButton({ afterSignOutUrl, mode, appearance, }: UserButtonProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Protected route component that redirects unauthenticated users.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Protect redirectTo="/sign-in">
+ *   <Dashboard />
+ * </Protect>
+ *
+ * // With custom redirect handler (e.g., for Next.js router)
+ * <Protect
+ *   redirectTo="/sign-in"
+ *   onRedirect={(url) => router.push(url)}
+ * >
+ *   <AdminPanel />
+ * </Protect>
+ *
+ * // With custom condition (role-based access)
+ * <Protect
+ *   redirectTo="/unauthorized"
+ *   condition={(user) => user.role === 'admin'}
+ * >
+ *   <AdminContent />
+ * </Protect>
+ * ```
+ *
+ * @param {ReactNode} children - Content to protect
+ * @param {ReactNode} [fallback] - Fallback UI while loading
+ * @param {string} [redirectTo='/sign-in'] - Redirect URL
+ * @param {function} [condition] - Custom access condition
+ * @param {function} [onRedirect] - Custom redirect handler (default: window.location)
+ */
+declare function Protect({ children, fallback, redirectTo, condition, onRedirect, }: ProtectProps): string | number | bigint | true | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Conditional component that renders children only when user is signed in.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SignedIn>
+ *   <Dashboard />
+ * </SignedIn>
+ * ```
+ *
+ * @param {ReactNode} children - React nodes to render when user is authenticated
+ * @returns {JSX.Element | null} Renders children when signed in, null otherwise
+ */
+declare function SignedIn({ children }: ConditionalProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Conditional component that renders children only when user is signed out.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SignedOut>
+ *   <SignIn />
+ * </SignedOut>
+ * ```
+ *
+ * @param {ReactNode} children - React nodes to render when user is not authenticated
+ * @returns {JSX.Element | null} Renders children when signed out, null otherwise
+ */
+declare function SignedOut({ children }: ConditionalProps): react_jsx_runtime.JSX.Element | null;
+
+interface InsforgeCallbackProps {
+    /**
+     * Redirect destination after successful authentication
+     */
+    redirectTo?: string;
+    /**
+     * Callback fired on successful authentication
+     */
+    onSuccess?: () => void;
+    /**
+     * Callback fired on authentication error
+     */
+    onError?: (error: string) => void;
+    /**
+     * Custom loading component
+     */
+    loadingComponent?: ReactNode;
+    /**
+     * Custom redirect handler (default: window.location)
+     */
+    onRedirect?: (url: string) => void;
+}
+/**
+ * InsforgeCallback - Handles OAuth and email/password authentication callbacks
+ *
+ * Place this component on your `/auth/callback` page.
+ *
+ * @example
+ * ```tsx
+ * // Minimal usage
+ * export default function CallbackPage() {
+ *   return <InsforgeCallback />;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With Next.js router
+ * import { useRouter } from 'next/navigation';
+ *
+ * export default function CallbackPage() {
+ *   const router = useRouter();
+ *   return (
+ *     <InsforgeCallback
+ *       redirectTo="/dashboard"
+ *       onRedirect={(url) => router.push(url)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function InsforgeCallback({ redirectTo, onSuccess, onError, loadingComponent, onRedirect, }: InsforgeCallbackProps): string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element;
+
+export { InsforgeCallback, type InsforgeCallbackProps, Protect, SignIn, SignUp, SignedIn, SignedOut, UserButton };