@insforge/react 0.4.0 → 0.4.5

package/dist/atoms.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, InputHTMLAttributes, CSSProperties } from 'react';
-import { AuthConfig } from './types.cjs';
+import { AuthConfig, EmailVerificationMethod } from './types.cjs';
 import { OAuthProvidersSchema } from '@insforge/shared-schemas';
 
 /**
@@ -14,6 +14,9 @@ import { OAuthProvidersSchema } from '@insforge/shared-schemas';
  */
 declare function AuthBranding(): react_jsx_runtime.JSX.Element;
 
+interface AuthContainerProps {
+    children: ReactNode;
+}
 /**
  * Main container component for authentication forms.
  *
@@ -28,10 +31,12 @@ declare function AuthBranding(): react_jsx_runtime.JSX.Element;
  *
  * @param {ReactNode} children - Form content
  */
-declare function AuthContainer({ children }: {
-    children: ReactNode;
-}): 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.
  *
@@ -47,11 +52,11 @@ declare function AuthContainer({ children }: {
  * @param {string} title - Main heading text
  * @param {string} [subtitle] - Optional subheading text
  */
-declare function AuthHeader({ title, subtitle }: {
-    title: string;
-    subtitle?: string;
-}): 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.
  */
@@ -59,6 +64,10 @@ 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.
  *
@@ -75,10 +84,7 @@ declare function AuthErrorBanner({ error }: {
  * @param {string} label - Label text
  * @param {string} id - Input element ID
  */
-declare function AuthFormField({ label, id, ...props }: {
-    label: string;
-    id: string;
-} & InputHTMLAttributes<HTMLInputElement>): react_jsx_runtime.JSX.Element;
+declare function AuthFormField({ label, id, ...props }: AuthFormFieldProps): react_jsx_runtime.JSX.Element;
 
 interface AuthPasswordFieldProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: string;
@@ -95,37 +101,51 @@ interface AuthPasswordFieldProps extends InputHTMLAttributes<HTMLInputElement> {
  */
 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.
  */
-declare function AuthPasswordStrengthIndicator({ password, config, }: {
-    password: string;
-    config: AuthConfig;
-}): react_jsx_runtime.JSX.Element;
+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
+ * // Form submit button (default)
  * <AuthSubmitButton isLoading={loading}>
  *   Sign In
  * </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
+ * // Action button with click handler
+ * <AuthSubmitButton type="button" onClick={handleClick} isLoading={loading}>
+ *   Verify Code
+ * </AuthSubmitButton>
+ * ```
  */
-declare function AuthSubmitButton({ children, isLoading, confirmed, disabled, }: {
-    children: ReactNode;
-    isLoading?: boolean;
-    confirmed?: boolean;
-    disabled?: boolean;
-}): 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.
  *
@@ -143,18 +163,15 @@ declare function AuthSubmitButton({ children, isLoading, confirmed, disabled, }:
  * @param {string} linkText - Clickable link text
  * @param {string} href - Link URL
  */
-declare function AuthLink({ text, linkText, href, }: {
-    text?: string;
-    linkText: string;
-    href: string;
-}): 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.
  */
-declare function AuthDivider({ text }: {
-    text?: string;
-}): react_jsx_runtime.JSX.Element;
+declare function AuthDivider({ text }: AuthDividerProps): react_jsx_runtime.JSX.Element;
 
 interface AuthOAuthButtonProps {
     provider: OAuthProvidersSchema;
@@ -198,11 +215,9 @@ interface AuthVerificationCodeInputProps {
  */
 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>;
 }
 /**
@@ -217,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 };
+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 };

package/dist/atoms.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, InputHTMLAttributes, CSSProperties } from 'react';
-import { AuthConfig } from './types.js';
+import { AuthConfig, EmailVerificationMethod } from './types.js';
 import { OAuthProvidersSchema } from '@insforge/shared-schemas';
 
 /**
@@ -14,6 +14,9 @@ import { OAuthProvidersSchema } from '@insforge/shared-schemas';
  */
 declare function AuthBranding(): react_jsx_runtime.JSX.Element;
 
+interface AuthContainerProps {
+    children: ReactNode;
+}
 /**
  * Main container component for authentication forms.
  *
@@ -28,10 +31,12 @@ declare function AuthBranding(): react_jsx_runtime.JSX.Element;
  *
  * @param {ReactNode} children - Form content
  */
-declare function AuthContainer({ children }: {
-    children: ReactNode;
-}): 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.
  *
@@ -47,11 +52,11 @@ declare function AuthContainer({ children }: {
  * @param {string} title - Main heading text
  * @param {string} [subtitle] - Optional subheading text
  */
-declare function AuthHeader({ title, subtitle }: {
-    title: string;
-    subtitle?: string;
-}): 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.
  */
@@ -59,6 +64,10 @@ 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.
  *
@@ -75,10 +84,7 @@ declare function AuthErrorBanner({ error }: {
  * @param {string} label - Label text
  * @param {string} id - Input element ID
  */
-declare function AuthFormField({ label, id, ...props }: {
-    label: string;
-    id: string;
-} & InputHTMLAttributes<HTMLInputElement>): react_jsx_runtime.JSX.Element;
+declare function AuthFormField({ label, id, ...props }: AuthFormFieldProps): react_jsx_runtime.JSX.Element;
 
 interface AuthPasswordFieldProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: string;
@@ -95,37 +101,51 @@ interface AuthPasswordFieldProps extends InputHTMLAttributes<HTMLInputElement> {
  */
 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.
  */
-declare function AuthPasswordStrengthIndicator({ password, config, }: {
-    password: string;
-    config: AuthConfig;
-}): react_jsx_runtime.JSX.Element;
+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
+ * // Form submit button (default)
  * <AuthSubmitButton isLoading={loading}>
  *   Sign In
  * </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
+ * // Action button with click handler
+ * <AuthSubmitButton type="button" onClick={handleClick} isLoading={loading}>
+ *   Verify Code
+ * </AuthSubmitButton>
+ * ```
  */
-declare function AuthSubmitButton({ children, isLoading, confirmed, disabled, }: {
-    children: ReactNode;
-    isLoading?: boolean;
-    confirmed?: boolean;
-    disabled?: boolean;
-}): 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.
  *
@@ -143,18 +163,15 @@ declare function AuthSubmitButton({ children, isLoading, confirmed, disabled, }:
  * @param {string} linkText - Clickable link text
  * @param {string} href - Link URL
  */
-declare function AuthLink({ text, linkText, href, }: {
-    text?: string;
-    linkText: string;
-    href: string;
-}): 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.
  */
-declare function AuthDivider({ text }: {
-    text?: string;
-}): react_jsx_runtime.JSX.Element;
+declare function AuthDivider({ text }: AuthDividerProps): react_jsx_runtime.JSX.Element;
 
 interface AuthOAuthButtonProps {
     provider: OAuthProvidersSchema;
@@ -198,11 +215,9 @@ interface AuthVerificationCodeInputProps {
  */
 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>;
 }
 /**
@@ -217,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 };
+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 };