@insforge/react 0.3.4 → 0.4.0

package/dist/{types.d.mts → types.d.cts}

@@ -1,5 +1,5 @@
-import { ReactNode, FormEvent, InputHTMLAttributes, CSSProperties } from 'react';
-import { OAuthProvidersSchema, GetPublicAuthConfigResponse } from '@insforge/shared-schemas';
+import { ReactNode, InputHTMLAttributes, CSSProperties, FormEvent } from 'react';
+import { GetPublicAuthConfigResponse, OAuthProvidersSchema } from '@insforge/shared-schemas';
 
 type OAuthProvider = OAuthProvidersSchema;
 type AuthConfig = GetPublicAuthConfigResponse;

package/dist/types.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode, FormEvent, InputHTMLAttributes, CSSProperties } from 'react';
-import { OAuthProvidersSchema, GetPublicAuthConfigResponse } from '@insforge/shared-schemas';
+import { ReactNode, InputHTMLAttributes, CSSProperties, FormEvent } from 'react';
+import { GetPublicAuthConfigResponse, OAuthProvidersSchema } from '@insforge/shared-schemas';
 
 type OAuthProvider = OAuthProvidersSchema;
 type AuthConfig = GetPublicAuthConfigResponse;

package/dist/types.js

@@ -1,4 +1,3 @@
-'use strict';
 
 //# sourceMappingURL=types.js.map
 //# sourceMappingURL=types.js.map

package/package.json

@@ -1,98 +1,106 @@
-{
-  "name": "@insforge/react",
-  "version": "0.3.4",
-  "description": "Framework-agnostic React authentication UI components for Insforge - reusable across all frameworks",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
-    "./atoms": {
-      "types": "./dist/atoms.d.ts",
-      "import": "./dist/atoms.mjs",
-      "require": "./dist/atoms.js"
-    },
-    "./forms": {
-      "types": "./dist/forms.d.ts",
-      "import": "./dist/forms.mjs",
-      "require": "./dist/forms.js"
-    },
-    "./components": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.mjs",
-      "require": "./dist/components.js"
-    },
-    "./hooks": {
-      "types": "./dist/hooks.d.ts",
-      "import": "./dist/hooks.mjs",
-      "require": "./dist/hooks.js"
-    },
-    "./lib": {
-      "types": "./dist/lib.d.ts",
-      "import": "./dist/lib.mjs",
-      "require": "./dist/lib.js"
-    },
-    "./types": {
-      "types": "./dist/types.d.ts",
-      "import": "./dist/types.mjs",
-      "require": "./dist/types.js"
-    },
-    "./router": {
-      "types": "./dist/router.d.ts",
-      "import": "./dist/router.mjs",
-      "require": "./dist/router.js"
-    },
-    "./styles.css": "./src/styles.css"
-  },
-  "files": [
-    "dist",
-    "src/styles.css",
-    "README.md"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "concurrently \"npx @tailwindcss/cli -i ./src/styles.css -o ./dist/styles.css --watch\" \"tsup --watch\"",
-    "type-check": "tsc --noEmit",
-    "clean": "rimraf dist"
-  },
-  "keywords": [
-    "insforge",
-    "react",
-    "authentication",
-    "auth",
-    "ui",
-    "components",
-    "headless",
-    "framework-agnostic"
-  ],
-  "author": "Insforge",
-  "license": "MIT",
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-router-dom": "^7.9.5"
-  },
-  "dependencies": {
-    "@insforge/sdk": "^0.0.58-dev.14",
-    "@insforge/shared-schemas": "^1.1.18",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.552.0",
-    "tailwind-merge": "^3.3.1",
-    "zod": "^4.1.12"
-  },
-  "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.16",
-    "@types/node": "^24.9.2",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
-    "concurrently": "^9.2.1",
-    "rimraf": "^6.1.0",
-    "tailwindcss": "^4.1.16",
-    "tsup": "^8.5.0",
-    "typescript": "^5.9.3"
-  }
-}
+{
+  "name": "@insforge/react",
+  "version": "0.4.0",
+  "type": "module",
+  "description": "Framework-agnostic React authentication UI components for Insforge - reusable across all frameworks",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./atoms": {
+      "types": "./dist/atoms.d.ts",
+      "import": "./dist/atoms.js",
+      "require": "./dist/atoms.cjs"
+    },
+    "./forms": {
+      "types": "./dist/forms.d.ts",
+      "import": "./dist/forms.js",
+      "require": "./dist/forms.cjs"
+    },
+    "./components": {
+      "types": "./dist/components.d.ts",
+      "import": "./dist/components.js",
+      "require": "./dist/components.cjs"
+    },
+    "./hooks": {
+      "types": "./dist/hooks.d.ts",
+      "import": "./dist/hooks.js",
+      "require": "./dist/hooks.cjs"
+    },
+    "./lib": {
+      "types": "./dist/lib.d.ts",
+      "import": "./dist/lib.js",
+      "require": "./dist/lib.cjs"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/types.js",
+      "require": "./dist/types.cjs"
+    },
+    "./router": {
+      "types": "./dist/router.d.ts",
+      "import": "./dist/router.js",
+      "require": "./dist/router.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx --max-warnings 0",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,css}\"",
+    "clean": "rimraf dist"
+  },
+  "keywords": [
+    "insforge",
+    "react",
+    "authentication",
+    "auth",
+    "ui",
+    "components",
+    "headless",
+    "framework-agnostic"
+  ],
+  "author": "Insforge",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.9.5"
+  },
+  "dependencies": {
+    "@insforge/sdk": "^0.0.58-dev.14",
+    "@insforge/shared-schemas": "^1.1.18",
+    "lucide-react": "^0.552.0",
+    "zod": "^4.1.12"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@types/node": "^24.9.2",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "eslint": "^9.21.0",
+    "eslint-config-prettier": "^10.0.2",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.1.2",
+    "globals": "^15.12.0",
+    "prettier": "^3.4.2",
+    "rimraf": "^6.1.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.23.0"
+  }
+}

package/dist/atoms.d.mts

@@ -1,387 +0,0 @@
-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.mjs';
-import 'react';
-import '@insforge/shared-schemas';
-
-/**
- * Insforge branding component for authentication pages.
- *
- * @component
- * @example
- * ```tsx
- * <AuthBranding />
- * ```
- */
-declare function AuthBranding(): react_jsx_runtime.JSX.Element;
-
-/**
- * Main container component for authentication forms.
- *
- * @component
- * @example
- * ```tsx
- * <AuthContainer>
- *   <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;
-
-/**
- * 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;
-
-/**
- * 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;
-
-/**
- * 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;
-
-/**
- * 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;
-
-/**
- * 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;
-
-/**
- * Primary submit button for authentication forms with loading and confirmed states.
- *
- * @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;
-
-/**
- * Call-to-action link component for navigation between auth pages.
- *
- * @component
- * @example
- * ```tsx
- * <AuthLink
- *   text="Don't have an account?"
- *   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;
-
-/**
- * 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;
-
-/**
- * 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;
-
-/**
- * Smart OAuth provider grid with adaptive layout.
- *
- * Automatically adjusts layout based on provider count:
- * - 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;
-
-/**
- * 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;
-
-type VerificationMethod = 'code' | 'link';
-interface AuthEmailVerificationStepProps {
-    email: string;
-    description?: string;
-    method?: VerificationMethod;
-    onVerifyCode?: (code: string) => Promise<void>;
-}
-/**
- * Email verification step component (pure UI, no container)
- *
- * Designed to be embedded within a form container.
- * Handles the email verification flow:
- * - Automatically sends verification email on mount
- * - Shows countdown timer for resend functionality
- * - Manages rate limiting for resend attempts
- * - Supports both code and link verification methods
- *
- * @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;
-
-export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthSubmitButton, AuthVerificationCodeInput, validatePasswordStrength };