@cedros/login-react 0.0.1

package/dist/components/email/PasswordInput.d.ts

@@ -0,0 +1,14 @@
+import { InputHTMLAttributes } from 'react';
+import { PasswordValidation } from '../../types';
+export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: string;
+    /** Action element shown on the right side of the label (e.g., "Forgot password?" link) */
+    labelAction?: React.ReactNode;
+    showStrengthMeter?: boolean;
+    onValidationChange?: (validation: PasswordValidation) => void;
+    error?: string;
+}
+/**
+ * Password input with visibility toggle and optional strength meter
+ */
+export declare function PasswordInput({ label, labelAction, showStrengthMeter, onValidationChange, error, className, onChange, value, ...props }: PasswordInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/email/ResetPasswordForm.d.ts

@@ -0,0 +1,22 @@
+export interface ResetPasswordFormProps {
+    token: string;
+    onSuccess?: () => void;
+    onLoginClick?: () => void;
+    className?: string;
+}
+/**
+ * Form for resetting password using a reset token.
+ *
+ * @example
+ * ```tsx
+ * // Get token from URL params
+ * const token = new URLSearchParams(location.search).get('token');
+ *
+ * <ResetPasswordForm
+ *   token={token}
+ *   onSuccess={() => navigate('/login')}
+ *   onLoginClick={() => navigate('/login')}
+ * />
+ * ```
+ */
+export declare function ResetPasswordForm({ token, onSuccess, onLoginClick, className, }: ResetPasswordFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/google/GoogleLoginButton.d.ts

@@ -0,0 +1,12 @@
+export interface GoogleLoginButtonProps {
+    onSuccess?: () => void;
+    onError?: (error: Error) => void;
+    className?: string;
+    variant?: 'default' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+}
+/**
+ * Google OAuth login button
+ */
+export declare function GoogleLoginButton({ onSuccess, onError, className, variant, size, disabled, }: GoogleLoginButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/invites/InviteForm.d.ts

@@ -0,0 +1,38 @@
+import { OrgRole, DisplayError } from '../../types';
+type InviteRole = Exclude<OrgRole, 'owner'>;
+export interface InviteFormProps {
+    /** Callback when invite is submitted */
+    onSubmit: (email: string, role: InviteRole) => Promise<void>;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Error message */
+    error?: DisplayError;
+    /** Available roles for invite (default: admin, member, viewer) */
+    availableRoles?: InviteRole[];
+    /** Default role for new invites */
+    defaultRole?: InviteRole;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Form for inviting new members to an organization.
+ *
+ * @example
+ * ```tsx
+ * function InviteManager() {
+ *   const { activeOrg } = useOrgs();
+ *   const { createInvite, isLoading, error } = useInvites(activeOrg?.id);
+ *
+ *   return (
+ *     <InviteForm
+ *       onSubmit={createInvite}
+ *       isLoading={isLoading}
+ *       error={error?.message}
+ *       defaultRole="member"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function InviteForm({ onSubmit, isLoading, error, availableRoles, defaultRole, className, }: InviteFormProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/invites/InviteList.d.ts

@@ -0,0 +1,40 @@
+import { Invite, DisplayError } from '../../types';
+export interface InviteListProps {
+    /** List of pending invites */
+    invites: Invite[];
+    /** Loading state */
+    isLoading?: boolean;
+    /** Error message */
+    error?: DisplayError;
+    /** Whether the current user can manage invites */
+    canManage?: boolean;
+    /** Callback when invite is cancelled */
+    onCancel?: (inviteId: string) => Promise<void>;
+    /** Callback when invite is resent */
+    onResend?: (inviteId: string) => Promise<void>;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Display and manage pending organization invites.
+ *
+ * @example
+ * ```tsx
+ * function PendingInvites() {
+ *   const { activeOrg, hasPermission } = useOrgs();
+ *   const { invites, isLoading, error, cancelInvite, resendInvite } = useInvites(activeOrg?.id);
+ *
+ *   return (
+ *     <InviteList
+ *       invites={invites}
+ *       isLoading={isLoading}
+ *       error={error?.message}
+ *       canManage={hasPermission('invite:cancel')}
+ *       onCancel={cancelInvite}
+ *       onResend={resendInvite}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function InviteList({ invites, isLoading, error, canManage, onCancel, onResend, className, }: InviteListProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/members/MemberList.d.ts

@@ -0,0 +1,47 @@
+import { Member, OrgRole, DisplayError } from '../../types';
+export interface MemberListProps {
+    /** List of members to display */
+    members: Member[];
+    /** Current user's ID (to prevent self-actions) */
+    currentUserId?: string;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Error message */
+    error?: DisplayError;
+    /** Whether the current user can manage members */
+    canManage?: boolean;
+    /** Whether the current user can change roles */
+    canChangeRoles?: boolean;
+    /** Callback when role is updated */
+    onUpdateRole?: (userId: string, role: OrgRole) => Promise<void>;
+    /** Callback when member is removed */
+    onRemove?: (userId: string) => Promise<void>;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Display and manage organization members.
+ *
+ * @example
+ * ```tsx
+ * function TeamMembers() {
+ *   const { activeOrg, hasPermission } = useOrgs();
+ *   const { members, isLoading, error, updateMemberRole, removeMember } = useMembers(activeOrg?.id);
+ *   const { user } = useAuth();
+ *
+ *   return (
+ *     <MemberList
+ *       members={members}
+ *       currentUserId={user?.id}
+ *       isLoading={isLoading}
+ *       error={error?.message}
+ *       canManage={hasPermission('member:remove')}
+ *       canChangeRoles={hasPermission('member:role_change')}
+ *       onUpdateRole={updateMemberRole}
+ *       onRemove={removeMember}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function MemberList({ members, currentUserId, isLoading, error, canManage, canChangeRoles, onUpdateRole, onRemove, className, }: MemberListProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/org/CreateOrgForm.d.ts

@@ -0,0 +1,7 @@
+import { CreateOrgRequest } from '../../types';
+export interface CreateOrgFormProps {
+    isLoading: boolean;
+    onSubmit: (data: CreateOrgRequest) => Promise<void>;
+    onCancel: () => void;
+}
+export declare function CreateOrgForm({ isLoading, onSubmit, onCancel }: CreateOrgFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/org/OrgAvatar.d.ts

@@ -0,0 +1,7 @@
+import { OrgWithMembership } from '../../types';
+export interface OrgAvatarProps {
+    org: OrgWithMembership;
+    size?: 'sm' | 'lg';
+    className?: string;
+}
+export declare function OrgAvatar({ org, size, className }: OrgAvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/org/OrgListView.d.ts

@@ -0,0 +1,9 @@
+import { OrgWithMembership } from '../../types';
+export interface OrgListViewProps {
+    orgs: OrgWithMembership[];
+    activeOrg: OrgWithMembership | null;
+    isLoading: boolean;
+    onSelect: (orgId: string) => void;
+    onCreateClick?: () => void;
+}
+export declare function OrgListView({ orgs, activeOrg, isLoading, onSelect, onCreateClick, }: OrgListViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/org/OrgSelector.d.ts

@@ -0,0 +1,51 @@
+import { OrgWithMembership } from '../../types';
+export interface OrgSelectorProps {
+    /** List of organizations to display */
+    orgs: OrgWithMembership[];
+    /** Currently active organization */
+    activeOrg: OrgWithMembership | null;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Callback when organization is selected */
+    onSelect: (orgId: string) => void;
+    /** Callback when "Create organization" is clicked */
+    onCreateClick?: () => void;
+    /** Additional CSS class */
+    className?: string;
+    /** Placeholder when no orgs */
+    placeholder?: string;
+}
+/**
+ * Dropdown selector for switching between organizations.
+ *
+ * ## A11Y-02: Keyboard Navigation Limitation
+ *
+ * Currently supports:
+ * - Tab/Shift+Tab: Move focus between trigger and items
+ * - Escape: Close dropdown
+ * - Enter/Space: Select focused item
+ *
+ * TODO: Implement arrow key navigation for better accessibility:
+ * - ArrowUp/ArrowDown: Navigate between items in the list
+ * - Home/End: Jump to first/last item
+ * - Type-ahead: Focus item starting with typed character
+ *
+ * See WAI-ARIA Listbox Pattern for reference implementation.
+ *
+ * @example
+ * ```tsx
+ * function Header() {
+ *   const { orgs, activeOrg, switchOrg } = useOrgs();
+ *
+ *   return (
+ *     <OrgSelector
+ *       orgs={orgs}
+ *       activeOrg={activeOrg}
+ *       onSelect={switchOrg}
+ *       onCreateClick={() => setShowCreateModal(true)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function OrgSelector({ orgs, activeOrg, isLoading, onSelect, onCreateClick, className, placeholder, }: OrgSelectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/org/OrgSwitcher.d.ts

@@ -0,0 +1,47 @@
+import { OrgWithMembership, CreateOrgRequest, DisplayError } from '../../types';
+export interface OrgSwitcherProps {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Callback to close the modal */
+    onClose: () => void;
+    /** List of organizations */
+    orgs: OrgWithMembership[];
+    /** Currently active organization */
+    activeOrg: OrgWithMembership | null;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Error message */
+    error?: DisplayError;
+    /** Callback when organization is selected */
+    onSelect: (orgId: string) => void;
+    /** Callback when new organization is created */
+    onCreate?: (data: CreateOrgRequest) => Promise<void>;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Modal for switching organizations and creating new ones.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *   const { orgs, activeOrg, switchOrg, createOrg } = useOrgs();
+ *
+ *   return (
+ *     <>
+ *       <button onClick={() => setIsOpen(true)}>Switch org</button>
+ *       <OrgSwitcher
+ *         isOpen={isOpen}
+ *         onClose={() => setIsOpen(false)}
+ *         orgs={orgs}
+ *         activeOrg={activeOrg}
+ *         onSelect={switchOrg}
+ *         onCreate={createOrg}
+ *       />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function OrgSwitcher({ isOpen, onClose, orgs, activeOrg, isLoading, error, onSelect, onCreate, className, }: OrgSwitcherProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/org/icons.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Icon components for organization UI
+ *
+ * Extracted from OrgSwitcher.tsx (F-02)
+ */
+export declare function CloseIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function CheckIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function PlusIcon(): import("react/jsx-runtime").JSX.Element;

package/dist/components/sessions/SessionList.d.ts

@@ -0,0 +1,33 @@
+import { Session, DisplayError } from '../../types';
+export interface SessionListProps {
+    /** List of active sessions */
+    sessions: Session[];
+    /** Loading state */
+    isLoading?: boolean;
+    /** Error message */
+    error?: DisplayError;
+    /** Callback to revoke all other sessions */
+    onRevokeAll?: () => Promise<void>;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Display active sessions and allow revoking all other sessions.
+ *
+ * @example
+ * ```tsx
+ * function SecuritySettings() {
+ *   const { sessions, isLoading, error, revokeAllSessions } = useSessions();
+ *
+ *   return (
+ *     <SessionList
+ *       sessions={sessions}
+ *       isLoading={isLoading}
+ *       error={error?.message}
+ *       onRevokeAll={revokeAllSessions}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function SessionList({ sessions, isLoading, error, onRevokeAll, className, }: SessionListProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/ErrorBoundary.d.ts

@@ -0,0 +1,38 @@
+import { Component, ReactNode, ErrorInfo } from 'react';
+export interface ErrorBoundaryProps {
+    /** Child components to render */
+    children: ReactNode;
+    /** Custom fallback UI to show when an error occurs */
+    fallback?: ReactNode;
+    /** Callback when an error is caught */
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    /** Whether to show error details (useful for development) */
+    showDetails?: boolean;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+    errorInfo: ErrorInfo | null;
+}
+/**
+ * Error Boundary component that catches JavaScript errors in child components.
+ * Prevents the entire app from crashing and shows a fallback UI.
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary
+ *   fallback={<div>Something went wrong</div>}
+ *   onError={(error) => logError(error)}
+ * >
+ *   <LoginForm />
+ * </ErrorBoundary>
+ * ```
+ */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState>;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    handleRetry: () => void;
+    render(): ReactNode;
+}
+export {};

package/dist/components/shared/ErrorMessage.d.ts

@@ -0,0 +1,14 @@
+import { DisplayError } from '../../types';
+export interface ErrorMessageProps {
+    error: DisplayError;
+    className?: string;
+    onDismiss?: () => void;
+    /** If true, focus the error message when it appears (for accessibility) */
+    autoFocus?: boolean;
+}
+/**
+ * Error message display component with accessibility support.
+ * Announces errors to screen readers and optionally focuses the message.
+ * Wrapped with React.memo to prevent unnecessary re-renders.
+ */
+export declare const ErrorMessage: import('react').NamedExoticComponent<ErrorMessageProps>;

package/dist/components/shared/LoadingSpinner.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+export interface LoadingSpinnerProps {
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+    style?: CSSProperties;
+    /** Custom label for screen readers (default: "Loading") */
+    label?: string;
+    /** If true, announce the loading state to screen readers */
+    announce?: boolean;
+}
+/**
+ * Accessible loading spinner component.
+ * Announces loading state to screen readers when announce prop is true.
+ * Wrapped with React.memo to prevent unnecessary re-renders.
+ */
+export declare const LoadingSpinner: import('react').NamedExoticComponent<LoadingSpinnerProps>;

package/dist/components/solana/SolanaLoginButton.d.ts

@@ -0,0 +1,49 @@
+export interface SolanaLoginButtonProps {
+    onSuccess?: () => void;
+    onError?: (error: Error) => void;
+    className?: string;
+    variant?: 'default' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    /**
+     * Hide the button if no Solana wallets are detected.
+     * When true (default), button renders nothing if no wallets are installed.
+     * When false, button always renders (useful for showing "install wallet" prompts).
+     * @default true
+     */
+    hideIfNoWallet?: boolean;
+    /**
+     * Solana wallet adapter context. Pass this from @solana/wallet-adapter-react's useWallet().
+     * The button will handle connection and signing automatically for a one-click experience.
+     */
+    walletContext?: {
+        publicKey: {
+            toBase58: () => string;
+        } | null;
+        signMessage: ((message: Uint8Array) => Promise<Uint8Array>) | null;
+        connected: boolean;
+        connecting: boolean;
+        connect: () => Promise<void>;
+        wallet: {
+            adapter: {
+                name: string;
+            };
+        } | null;
+        select: (walletName: string) => void;
+        wallets: Array<{
+            adapter: {
+                name: string;
+                icon: string;
+                readyState: string;
+            };
+        }>;
+    };
+}
+/**
+ * Solana wallet login button with one-click authentication.
+ *
+ * Handles wallet connection and message signing automatically.
+ * If wallet is already connected, signs immediately.
+ * If not connected, connects first then auto-signs.
+ */
+export declare function SolanaLoginButton({ onSuccess, onError, className, variant, size, disabled, hideIfNoWallet, walletContext, }: SolanaLoginButtonProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/templates/FullPageLayout.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+export interface FullPageLayoutProps {
+    /** Brand logo element (e.g., an img or svg) */
+    brandLogo?: ReactNode;
+    /** Brand name displayed next to the logo */
+    brandName?: string;
+    /** Title displayed above the form. @default "Welcome back" */
+    title?: string;
+    /** Subtitle displayed below the title. @default "Login with your Apple or Google account" */
+    subtitle?: string;
+    /** Terms/legal text displayed below the card */
+    termsText?: ReactNode;
+    /** Called when login/register succeeds */
+    onSuccess?: () => void;
+    /** Default tab for the form. @default "login" */
+    defaultTab?: 'login' | 'register';
+    /** Custom content to render instead of LoginForm */
+    children?: ReactNode;
+    /** Additional CSS class for the outer container */
+    className?: string;
+}
+/**
+ * Full page login layout with centered card on gradient background.
+ * Follows shadcn/ui login block pattern.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <FullPageLayout onSuccess={() => navigate('/dashboard')} />
+ *
+ * // With branding and terms
+ * <FullPageLayout
+ *   brandLogo={<img src="/logo.svg" alt="" />}
+ *   brandName="Acme Inc."
+ *   termsText={<>By clicking continue, you agree to our <a href="/terms">Terms</a>.</>}
+ *   onSuccess={handleSuccess}
+ * />
+ * ```
+ */
+export declare function FullPageLayout({ brandLogo, brandName, title, subtitle, termsText, onSuccess, defaultTab, children, className, }: FullPageLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/templates/SplitPageLayout.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+export interface SplitPageLayoutProps {
+    /** Brand name or logo text displayed on the left panel */
+    brandName?: string;
+    /** Brand logo element (replaces default logo) */
+    brandLogo?: ReactNode;
+    /** Tagline displayed below the brand name */
+    tagline?: string;
+    /** Title displayed above the form. @default "Sign in" */
+    title?: string;
+    /** Subtitle displayed below the title */
+    subtitle?: string;
+    /** Called when login/register succeeds */
+    onSuccess?: () => void;
+    /** Default tab for the form. @default "login" */
+    defaultTab?: 'login' | 'register';
+    /** Custom content to render instead of LoginForm */
+    children?: ReactNode;
+    /** Additional CSS class for the outer container */
+    className?: string;
+}
+/**
+ * Split page login layout with branding on the left and form on the right.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <SplitPageLayout
+ *   brandName="MyApp"
+ *   tagline="The best app for everything"
+ *   onSuccess={() => navigate('/dashboard')}
+ * />
+ *
+ * // With custom logo
+ * <SplitPageLayout
+ *   brandLogo={<img src="/logo.svg" alt="MyApp" />}
+ *   brandName="MyApp"
+ *   tagline="Enterprise-grade solutions"
+ *   title="Welcome back"
+ *   subtitle="Sign in to continue"
+ * />
+ * ```
+ */
+export declare function SplitPageLayout({ brandName, brandLogo, tagline, title, subtitle, onSuccess, defaultTab, children, className, }: SplitPageLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/templates/index.d.ts

@@ -0,0 +1,4 @@
+export { FullPageLayout } from './FullPageLayout';
+export type { FullPageLayoutProps } from './FullPageLayout';
+export { SplitPageLayout } from './SplitPageLayout';
+export type { SplitPageLayoutProps } from './SplitPageLayout';

package/dist/components/totp/OtpInput.d.ts

@@ -0,0 +1,32 @@
+/**
+ * OTP Input component (shadcn-style)
+ *
+ * A 6-digit input with separate boxes for each digit,
+ * designed for TOTP verification codes.
+ */
+export interface OtpInputProps {
+    /** Current value (up to 6 digits) */
+    value?: string;
+    /** Called when the value changes */
+    onChange?: (value: string) => void;
+    /** Called when all 6 digits are entered */
+    onComplete?: (value: string) => void;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Auto-focus the first input on mount */
+    autoFocus?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * OTP input with separate boxes for each digit (shadcn pattern)
+ *
+ * Features:
+ * - Auto-advances to next input on digit entry
+ * - Backspace moves to previous input
+ * - Supports paste of full code
+ * - Numeric keyboard on mobile
+ */
+export declare function OtpInput({ value, onChange, onComplete, disabled, error, autoFocus, className, }: OtpInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/totp/QrCode.d.ts

@@ -0,0 +1,21 @@
+/**
+ * QR Code component for TOTP setup
+ *
+ * Generates QR codes client-side using the qrcode library.
+ * SECURITY: Never sends the TOTP secret to external services.
+ */
+export interface QrCodeProps {
+    /** The data to encode in the QR code (e.g., otpauth:// URL) */
+    value: string;
+    /** Size in pixels (width and height) */
+    size?: number;
+    /** Alt text for accessibility */
+    alt?: string;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Renders a QR code as a canvas element.
+ * Generated entirely client-side for security.
+ */
+export declare function QrCode({ value, size, alt, className }: QrCodeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/totp/TotpSettings.d.ts

@@ -0,0 +1,38 @@
+/**
+ * TOTP Settings component for managing two-factor authentication
+ *
+ * Allows users to:
+ * - View current 2FA status
+ * - Enable 2FA (via TotpSetup wizard)
+ * - Disable 2FA (requires verification)
+ * - Regenerate backup codes
+ */
+export interface TotpSettingsProps {
+    /** Called when 2FA status changes */
+    onStatusChange?: (enabled: boolean) => void;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Two-factor authentication settings panel.
+ *
+ * Shows current 2FA status and provides controls for
+ * enabling, disabling, and managing backup codes.
+ *
+ * @example
+ * ```tsx
+ * function SecuritySettings() {
+ *   return (
+ *     <div>
+ *       <h2>Security</h2>
+ *       <TotpSettings
+ *         onStatusChange={(enabled) => {
+ *           console.log('2FA is now', enabled ? 'enabled' : 'disabled');
+ *         }}
+ *       />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function TotpSettings({ onStatusChange, className }: TotpSettingsProps): import("react/jsx-runtime").JSX.Element;