@insforge/react 0.3.5 → 0.4.5

package/dist/atoms.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { AuthContainerProps, AuthHeaderProps, AuthErrorBannerProps, AuthFormFieldProps, AuthPasswordFieldProps, AuthPasswordStrengthIndicatorProps, AuthConfig, AuthSubmitButtonProps, AuthLinkProps, AuthDividerProps, AuthOAuthButtonProps, AuthOAuthProvidersProps, AuthVerificationCodeInputProps } from './types.js';
-import 'react';
-import '@insforge/shared-schemas';
+import { ReactNode, InputHTMLAttributes, CSSProperties } from 'react';
+import { AuthConfig, EmailVerificationMethod } from './types.js';
+import { OAuthProvidersSchema } from '@insforge/shared-schemas';
 
 /**
  * Insforge branding component for authentication pages.
@@ -14,6 +14,9 @@ import '@insforge/shared-schemas';
  */
 declare function AuthBranding(): react_jsx_runtime.JSX.Element;
 
+interface AuthContainerProps {
+    children: ReactNode;
+}
 /**
  * Main container component for authentication forms.
  *
@@ -24,203 +27,125 @@ declare function AuthBranding(): react_jsx_runtime.JSX.Element;
  *   <AuthHeader title="Sign In" />
  *   <form>...</form>
  * </AuthContainer>
- *
- * // With custom styling
- * <AuthContainer
- *   appearance={{
- *     cardClassName: "bg-gray-50"
- *   }}
- * >
- *   <AuthHeader title="Sign In" />
- *   <form>...</form>
- * </AuthContainer>
  * ```
  *
  * @param {ReactNode} children - Form content
- * @param {object} [appearance] - Tailwind CSS classes for styling
- *   - `appearance.containerClassName`: Outer container element
- *   - `appearance.cardClassName`: Inner card element (white background area)
  */
-declare function AuthContainer({ children, appearance }: AuthContainerProps): react_jsx_runtime.JSX.Element;
+declare function AuthContainer({ children }: AuthContainerProps): react_jsx_runtime.JSX.Element;
 
+interface AuthHeaderProps {
+    title: string;
+    subtitle?: string;
+}
 /**
  * Header component for authentication forms displaying title and optional subtitle.
  *
  * @component
  * @example
  * ```tsx
- * // Basic usage
  * <AuthHeader
  *   title="Welcome Back"
  *   subtitle="Sign in to continue"
  * />
- *
- * // With custom styling
- * <AuthHeader
- *   title="Welcome Back"
- *   appearance={{
- *     titleClassName: "text-purple-900 text-3xl",
- *     subtitleClassName: "text-purple-700"
- *   }}
- * />
  * ```
  *
  * @param {string} title - Main heading text
  * @param {string} [subtitle] - Optional subheading text
- * @param {object} [appearance] - Tailwind CSS classes for styling
- *   - `appearance.containerClassName`: Container element
- *   - `appearance.titleClassName`: Title element
- *   - `appearance.subtitleClassName`: Subtitle element
  */
-declare function AuthHeader({ title, subtitle, appearance }: AuthHeaderProps): react_jsx_runtime.JSX.Element;
+declare function AuthHeader({ title, subtitle }: AuthHeaderProps): react_jsx_runtime.JSX.Element;
 
+interface AuthErrorBannerProps {
+    error: string;
+}
 /**
  * Error message banner for authentication forms.
- *
- * @component
- * @example
- * ```tsx
- * <AuthErrorBanner error={error} />
- * ```
- *
- * @param {string} error - Error message to display
- * @param {string} [className] - Banner element classes
  */
-declare function AuthErrorBanner({ error, className }: AuthErrorBannerProps): react_jsx_runtime.JSX.Element | null;
+declare function AuthErrorBanner({ error }: {
+    error?: string;
+}): react_jsx_runtime.JSX.Element | null;
 
+interface AuthFormFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+    label: string;
+    id: string;
+}
 /**
  * Standard form input field with label for authentication forms.
  *
  * @component
  * @example
  * ```tsx
- * // Basic usage
  * <AuthFormField
  *   id="email"
  *   type="email"
  *   label="Email Address"
  * />
- *
- * // With custom styling
- * <AuthFormField
- *   id="email"
- *   label="Email"
- *   appearance={{
- *     containerClassName: "flex flex-col justify-center items-stretch gap-1",
- *     inputClassName: "border-blue-500 focus:ring-blue-500",
- *     labelClassName: "text-blue-900 font-semibold"
- *   }}
- * />
  * ```
  *
  * @param {string} label - Label text
  * @param {string} id - Input element ID
- * @param {object} [appearance] - Tailwind CSS classes for styling
- *   - `appearance.containerClassName`: Container element
- *   - `appearance.labelClassName`: Label element
- *   - `appearance.inputClassName`: Input element
  */
-declare function AuthFormField({ label, id, appearance, ...props }: AuthFormFieldProps): react_jsx_runtime.JSX.Element;
+declare function AuthFormField({ label, id, ...props }: AuthFormFieldProps): react_jsx_runtime.JSX.Element;
 
+interface AuthPasswordFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    id: string;
+    showStrengthIndicator?: boolean;
+    authConfig: AuthConfig;
+    forgotPasswordLink?: {
+        href: string;
+        text?: string;
+    };
+}
 /**
  * Password input field with visibility toggle and optional strength indicator.
- *
- * @component
- * @example
- * ```tsx
- * // With forgot password link
- * <AuthPasswordField
- *   id="password"
- *   label="Password"
- *   forgotPasswordLink={{ href: '/forgot-password' }}
- *   authConfig={config}
- * />
- *
- * // With custom styling
- * <AuthPasswordField
- *   id="password"
- *   label="Password"
- *   authConfig={config}
- *   appearance={{
- *     inputClassName: "border-blue-500",
- *     labelClassName: "text-blue-900"
- *   }}
- * />
- * ```
- *
- * @param {string} label - Label text
- * @param {string} id - Input element ID
- * @param {boolean} [showStrengthIndicator] - Show password strength requirements
- * @param {object} [forgotPasswordLink] - Forgot password link config
- * @param {object} [appearance] - Tailwind CSS classes for styling
- *   - `appearance.containerClassName`: Container element
- *   - `appearance.labelClassName`: Label element
- *   - `appearance.inputClassName`: Input element
  */
-declare function AuthPasswordField({ label, id, showStrengthIndicator, authConfig, forgotPasswordLink, value, appearance, onFocus, ...props }: AuthPasswordFieldProps): react_jsx_runtime.JSX.Element;
+declare function AuthPasswordField({ label, id, showStrengthIndicator, authConfig, forgotPasswordLink, value, onFocus, ...props }: AuthPasswordFieldProps): react_jsx_runtime.JSX.Element;
 
+interface AuthPasswordStrengthIndicatorProps {
+    password: string;
+    config: AuthConfig;
+}
 /**
  * Password strength indicator showing requirement checklist.
- *
- * @component
- * @example
- * ```tsx
- * <AuthPasswordStrengthIndicator
- *   password={password}
- *   config={authConfig}
- * />
- *
- * // With custom styling
- * <AuthPasswordStrengthIndicator
- *   password={password}
- *   config={authConfig}
- *   appearance={{
- *     requirementClassName: "text-lg"
- *   }}
- * />
- * ```
- *
- * @param {string} password - Current password value
- * @param {object} config - Email auth configuration
- * @param {object} [appearance] - Tailwind CSS classes for styling
- *   - `appearance.containerClassName`: Container element
- *   - `appearance.requirementClassName`: Requirement text elements
- */
-declare function AuthPasswordStrengthIndicator({ password, config, appearance, }: AuthPasswordStrengthIndicatorProps): react_jsx_runtime.JSX.Element;
-/**
- * Validates that a password meets all strength requirements based on email auth configuration.
- *
- * @param password - The password string to validate
- * @param config - Email authentication configuration from backend
- * @returns true if all requirements are met, false otherwise
  */
-declare function validatePasswordStrength(password: string, config: AuthConfig): boolean;
+declare function AuthPasswordStrengthIndicator({ password, config, }: AuthPasswordStrengthIndicatorProps): react_jsx_runtime.JSX.Element;
 
+interface AuthSubmitButtonProps {
+    children: ReactNode;
+    isLoading?: boolean;
+    confirmed?: boolean;
+    disabled?: boolean;
+    type?: 'button' | 'submit';
+    onClick?: () => void;
+}
 /**
- * Primary submit button for authentication forms with loading and confirmed states.
+ * Primary button for authentication forms with loading and confirmed states.
+ *
+ * Supports two modes:
+ * - **Form submit** (default): type="submit" - triggers form's onSubmit handler
+ * - **Action button**: type="button" + onClick - executes custom logic without form submission
  *
  * @component
  * @example
  * ```tsx
- * // Basic usage
+ * // Form submit button (default)
  * <AuthSubmitButton isLoading={loading}>
  *   Sign In
  * </AuthSubmitButton>
  *
- * // With custom styling
- * <AuthSubmitButton className="bg-purple-600 hover:bg-purple-700">
- *   Sign In
+ * // Action button with click handler
+ * <AuthSubmitButton type="button" onClick={handleClick} isLoading={loading}>
+ *   Verify Code
  * </AuthSubmitButton>
  * ```
- *
- * @param {ReactNode} children - Button text
- * @param {boolean} [isLoading] - Loading state (shows spinner)
- * @param {boolean} [confirmed] - Confirmed state (shows checkmark)
- * @param {boolean} [disabled] - Disabled state
- * @param {string} [className] - Button element classes
  */
-declare function AuthSubmitButton({ children, isLoading, confirmed, disabled, className, }: AuthSubmitButtonProps): react_jsx_runtime.JSX.Element;
+declare function AuthSubmitButton({ children, isLoading, confirmed, disabled, type, onClick, }: AuthSubmitButtonProps): react_jsx_runtime.JSX.Element;
 
+interface AuthLinkProps {
+    text: string;
+    linkText: string;
+    href: string;
+}
 /**
  * Call-to-action link component for navigation between auth pages.
  *
@@ -232,63 +157,41 @@ declare function AuthSubmitButton({ children, isLoading, confirmed, disabled, cl
  *   linkText="Sign up"
  *   href="/sign-up"
  * />
- *
- * // With custom styling
- * <AuthLink
- *   text="Don't have an account?"
- *   linkText="Sign up"
- *   href="/sign-up"
- *   appearance={{
- *     linkClassName: "text-blue-500"
- *   }}
- * />
  * ```
  *
  * @param {string} text - Regular text before the link
  * @param {string} linkText - Clickable link text
  * @param {string} href - Link URL
- * @param {object} [appearance] - Tailwind CSS classes for styling
- *   - `appearance.containerClassName`: Container element
- *   - `appearance.linkClassName`: Link element
  */
-declare function AuthLink({ text, linkText, href, appearance }: AuthLinkProps): react_jsx_runtime.JSX.Element;
+declare function AuthLink({ text, linkText, href }: AuthLinkProps): react_jsx_runtime.JSX.Element;
 
+interface AuthDividerProps {
+    text?: string;
+}
 /**
  * Visual divider with optional centered text for auth forms.
- *
- * @component
- * @example
- * ```tsx
- * <AuthDivider text="or" />
- * ```
- *
- * @param {string} [text='or'] - Centered text
- * @param {string} [className] - Divider element classes
  */
-declare function AuthDivider({ text, className }: AuthDividerProps): react_jsx_runtime.JSX.Element;
+declare function AuthDivider({ text }: AuthDividerProps): react_jsx_runtime.JSX.Element;
 
+interface AuthOAuthButtonProps {
+    provider: OAuthProvidersSchema;
+    onClick: (provider: OAuthProvidersSchema) => void;
+    disabled?: boolean;
+    loading?: boolean;
+    displayMode?: 'full' | 'short' | 'icon';
+    style?: CSSProperties;
+}
 /**
  * OAuth provider button with adaptive display modes.
- *
- * @component
- * @example
- * ```tsx
- * <AuthOAuthButton
- *   provider="google"
- *   onClick={handleOAuth}
- *   displayMode="full"
- * />
- * ```
- *
- * @param {OAuthProvider} provider - Provider identifier (e.g., 'google', 'github')
- * @param {function} onClick - Click handler
- * @param {boolean} [disabled] - Disabled state
- * @param {boolean} [loading] - Loading state (shows spinner)
- * @param {string} [displayMode='full'] - Display mode ('full' | 'short' | 'icon')
- * @param {string} [className] - Button element classes
  */
-declare function AuthOAuthButton({ provider, onClick, disabled, loading, displayMode, style, className }: AuthOAuthButtonProps): react_jsx_runtime.JSX.Element | null;
+declare function AuthOAuthButton({ provider, onClick, disabled, loading, displayMode, style, }: AuthOAuthButtonProps): react_jsx_runtime.JSX.Element | null;
 
+interface AuthOAuthProvidersProps {
+    providers: OAuthProvidersSchema[];
+    onClick: (provider: OAuthProvidersSchema) => void;
+    disabled?: boolean;
+    loading?: OAuthProvidersSchema | null;
+}
 /**
  * Smart OAuth provider grid with adaptive layout.
  *
@@ -296,78 +199,25 @@ declare function AuthOAuthButton({ provider, onClick, disabled, loading, display
  * - 1 provider: Full-width
  * - 2 or 4 providers: Two columns
  * - 3+ providers: Three columns
- *
- * @component
- * @example
- * ```tsx
- * <AuthOAuthProviders
- *   providers={['google', 'github', 'discord']}
- *   onClick={handleOAuth}
- *   loading={currentProvider}
- * />
- *
- * // With custom styling
- * <AuthOAuthProviders
- *   providers={['google', 'github']}
- *   onClick={handleOAuth}
- *   loading={currentProvider}
- *   appearance={{
- *     buttonClassName: "hover:bg-blue-50"
- *   }}
- * />
- * ```
- *
- * @param {OAuthProvider[]} providers - Provider identifiers array
- * @param {function} onClick - Provider click handler
- * @param {boolean} [disabled] - Disabled state for all buttons
- * @param {OAuthProvider | null} loading - Currently loading provider
- * @param {object} [appearance] - Tailwind CSS classes for styling
- *   - `appearance.containerClassName`: Grid container element
- *   - `appearance.buttonClassName`: OAuth button elements
  */
-declare function AuthOAuthProviders({ providers, onClick, disabled, loading, appearance, }: AuthOAuthProvidersProps): react_jsx_runtime.JSX.Element | null;
+declare function AuthOAuthProviders({ providers, onClick, disabled, loading, }: AuthOAuthProvidersProps): react_jsx_runtime.JSX.Element | null;
 
+interface AuthVerificationCodeInputProps {
+    length?: number;
+    value: string;
+    email: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    onComplete?: (code: string) => void;
+}
 /**
  * 6-digit verification code input component with auto-focus and paste support.
- *
- * @component
- * @example
- * ```tsx
- * const [code, setCode] = useState('');
- *
- * <AuthVerificationCodeInput
- *   email="user@example.com"
- *   value={code}
- *   onChange={setCode}
- * />
- *
- * // With custom styling
- * <AuthVerificationCodeInput
- *   email="user@example.com"
- *   value={code}
- *   onChange={setCode}
- *   appearance={{
- *     inputClassName: "border-blue-500"
- *   }}
- * />
- * ```
- *
- * @param {string} email - Email address to display in instructions
- * @param {string} value - Current code value
- * @param {function} onChange - Code change handler
- * @param {number} [length=6] - Number of digits
- * @param {boolean} [disabled] - Disabled state
- * @param {object} [appearance] - Tailwind CSS classes for styling
- *   - `appearance.containerClassName`: Container element
- *   - `appearance.inputClassName`: Input elements
  */
-declare function AuthVerificationCodeInput({ length, value, email, onChange, disabled, onComplete, appearance, }: AuthVerificationCodeInputProps): react_jsx_runtime.JSX.Element;
+declare function AuthVerificationCodeInput({ length, value, email, onChange, disabled, onComplete, }: AuthVerificationCodeInputProps): react_jsx_runtime.JSX.Element;
 
-type VerificationMethod = 'code' | 'link';
 interface AuthEmailVerificationStepProps {
     email: string;
-    description?: string;
-    method?: VerificationMethod;
+    method?: EmailVerificationMethod;
     onVerifyCode?: (code: string) => Promise<void>;
 }
 /**
@@ -382,6 +232,22 @@ interface AuthEmailVerificationStepProps {
  *
  * @param method - 'code' for OTP input, 'link' for magic link (default: 'code')
  */
-declare function AuthEmailVerificationStep({ email, description, method, onVerifyCode, }: AuthEmailVerificationStepProps): react_jsx_runtime.JSX.Element;
+declare function AuthEmailVerificationStep({ email, method, onVerifyCode, }: AuthEmailVerificationStepProps): react_jsx_runtime.JSX.Element;
+
+interface AuthResetPasswordVerificationStepProps {
+    email: string;
+    method: EmailVerificationMethod;
+    onVerifyCode?: (code: string) => Promise<void>;
+    onResendEmail: () => Promise<void>;
+}
+/**
+ * Reset password verification step component
+ *
+ * Handles the verification flow for password reset:
+ * - Shows appropriate UI based on method (code input or link message)
+ * - Manages countdown timer for resend functionality
+ * - Handles code verification for code method
+ */
+declare function AuthResetPasswordVerificationStep({ email, method, onVerifyCode, onResendEmail, }: AuthResetPasswordVerificationStepProps): react_jsx_runtime.JSX.Element;
 
-export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthSubmitButton, AuthVerificationCodeInput, validatePasswordStrength };
+export { AuthBranding, AuthContainer, type AuthContainerProps, AuthDivider, type AuthDividerProps, AuthEmailVerificationStep, AuthErrorBanner, type AuthErrorBannerProps, AuthFormField, type AuthFormFieldProps, AuthHeader, type AuthHeaderProps, AuthLink, type AuthLinkProps, AuthOAuthButton, type AuthOAuthButtonProps, AuthOAuthProviders, type AuthOAuthProvidersProps, AuthPasswordField, type AuthPasswordFieldProps, AuthPasswordStrengthIndicator, type AuthPasswordStrengthIndicatorProps, AuthResetPasswordVerificationStep, AuthSubmitButton, type AuthSubmitButtonProps, AuthVerificationCodeInput, type AuthVerificationCodeInputProps };