@insforge/react 0.3.4 → 0.4.0

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 } from './types.js';
+import { OAuthProvidersSchema } from '@insforge/shared-schemas';
 
 /**
  * Insforge branding component for authentication pages.
@@ -24,24 +24,13 @@ 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 }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
 
 /**
  * Header component for authentication forms displaying title and optional subtitle.
@@ -49,44 +38,26 @@ declare function AuthContainer({ children, appearance }: AuthContainerProps): re
  * @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 }: {
+    title: string;
+    subtitle?: string;
+}): react_jsx_runtime.JSX.Element;
 
 /**
  * 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;
 
 /**
  * Standard form input field with label for authentication forms.
@@ -94,107 +65,43 @@ declare function AuthErrorBanner({ error, className }: AuthErrorBannerProps): re
  * @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 }: {
+    label: string;
+    id: string;
+} & InputHTMLAttributes<HTMLInputElement>): 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;
 
 /**
  * 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, }: {
+    password: string;
+    config: AuthConfig;
+}): react_jsx_runtime.JSX.Element;
 
 /**
  * Primary submit button for authentication forms with loading and confirmed states.
@@ -202,24 +109,22 @@ declare function validatePasswordStrength(password: string, config: AuthConfig):
  * @component
  * @example
  * ```tsx
- * // Basic usage
  * <AuthSubmitButton isLoading={loading}>
  *   Sign In
  * </AuthSubmitButton>
- *
- * // With custom styling
- * <AuthSubmitButton className="bg-purple-600 hover:bg-purple-700">
- *   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
- * @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, }: {
+    children: ReactNode;
+    isLoading?: boolean;
+    confirmed?: boolean;
+    disabled?: boolean;
+}): react_jsx_runtime.JSX.Element;
 
 /**
  * Call-to-action link component for navigation between auth pages.
@@ -232,63 +137,44 @@ 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, }: {
+    text?: string;
+    linkText: string;
+    href: string;
+}): react_jsx_runtime.JSX.Element;
 
 /**
  * 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 }: {
+    text?: string;
+}): 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,72 +182,21 @@ 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 {
@@ -384,4 +219,4 @@ interface AuthEmailVerificationStepProps {
  */
 declare function AuthEmailVerificationStep({ email, description, method, onVerifyCode, }: AuthEmailVerificationStepProps): react_jsx_runtime.JSX.Element;
 
-export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthSubmitButton, AuthVerificationCodeInput, validatePasswordStrength };
+export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthSubmitButton, AuthVerificationCodeInput };