@djangocfg/layouts 2.1.109 → 2.1.110

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.109",
+  "version": "2.1.110",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -74,12 +74,12 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.109",
-    "@djangocfg/centrifugo": "^2.1.109",
-    "@djangocfg/ui-core": "^2.1.109",
-    "@djangocfg/ui-nextjs": "^2.1.109",
-    "@djangocfg/ui-tools": "^2.1.109",
-    "@hookform/resolvers": "^5.2.0",
+    "@djangocfg/api": "^2.1.110",
+    "@djangocfg/centrifugo": "^2.1.110",
+    "@djangocfg/ui-core": "^2.1.110",
+    "@djangocfg/ui-nextjs": "^2.1.110",
+    "@djangocfg/ui-tools": "^2.1.110",
+    "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -92,7 +92,7 @@
     "swr": "^2.3.7",
     "tailwindcss": "^4.1.14",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^4.1.13"
+    "zod": "^4.3.4"
   },
   "dependencies": {
     "nextjs-toploader": "^3.9.17",
@@ -101,12 +101,12 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.109",
-    "@djangocfg/centrifugo": "^2.1.109",
-    "@djangocfg/typescript-config": "^2.1.109",
-    "@djangocfg/ui-core": "^2.1.109",
-    "@djangocfg/ui-nextjs": "^2.1.109",
-    "@djangocfg/ui-tools": "^2.1.109",
+    "@djangocfg/api": "^2.1.110",
+    "@djangocfg/centrifugo": "^2.1.110",
+    "@djangocfg/typescript-config": "^2.1.110",
+    "@djangocfg/ui-core": "^2.1.110",
+    "@djangocfg/ui-nextjs": "^2.1.110",
+    "@djangocfg/ui-tools": "^2.1.110",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -1,24 +1,31 @@
 /**
- * Auth Layout
+ * Auth Layout - Apple Style
  *
- * Layout for authentication pages with OTP (email/phone), OAuth (GitHub), and 2FA support.
- * Supports multi-step authentication flow: identifier → OTP → 2FA (if enabled)
+ * Minimal, clean authentication layout with smooth animations.
+ * Supports: email/phone OTP, OAuth (GitHub), 2FA (TOTP + backup codes)
  */
 
 'use client';
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+
+import { useCfgRouter } from '@djangocfg/api/auth';
 
 import { Suspense } from '../../components';
-import { AuthSuccess, IdentifierForm, OAuthCallback, OTPForm, TwoFactorForm, TwoFactorSetup } from './components';
+import { OAuthCallback } from './components/oauth';
+import { IdentifierStep, OTPStep, SetupStep, TwoFactorStep } from './components/steps';
+import { AUTH } from './constants';
+import { AUTH_CONTENT } from './content';
 import { AuthFormProvider, useAuthFormContext } from './context';
 
+import './styles/auth.css';
+
 import type { AuthLayoutProps } from './types';
 
 export type { AuthLayoutProps };
 
 export const AuthLayout: React.FC<AuthLayoutProps> = (props) => {
-  const { enableGithubAuth, redirectUrl = '/dashboard', onOAuthSuccess, onError, className } = props;
+  const { enableGithubAuth, redirectUrl = AUTH.DEFAULT_REDIRECT, onOAuthSuccess, onError, className } = props;
 
   return (
     <Suspense>
@@ -26,9 +33,7 @@ export const AuthLayout: React.FC<AuthLayoutProps> = (props) => {
         {/* Full-screen success overlay */}
         <AuthSuccessOverlay />
 
-        <div
-          className={`min-h-screen flex flex-col items-center justify-center bg-background py-6 px-4 sm:py-12 sm:px-6 lg:px-8 ${className || ''}`}
-        >
+        <div className={`auth-layout ${className || ''}`}>
           {/* Handle OAuth callback when GitHub auth is enabled */}
           {enableGithubAuth && (
             <Suspense fallback={null}>
@@ -40,10 +45,8 @@ export const AuthLayout: React.FC<AuthLayoutProps> = (props) => {
             </Suspense>
           )}
 
-          <div className="w-full sm:max-w-md space-y-8">
-            {props.children}
-            <AuthContent />
-          </div>
+          {props.children}
+          <AuthContent />
         </div>
       </AuthFormProvider>
     </Suspense>
@@ -55,14 +58,14 @@ const AuthContent: React.FC = () => {
 
   switch (step) {
     case 'identifier':
-      return <IdentifierForm />;
+      return <IdentifierStep />;
     case 'otp':
-      return <OTPForm />;
+      return <OTPStep />;
     case '2fa':
-      return <TwoFactorForm />;
+      return <TwoFactorStep />;
     case '2fa-setup':
       return (
-        <TwoFactorSetup
+        <SetupStep
           onComplete={() => setStep('success')}
           onSkip={() => setStep('success')}
         />
@@ -71,16 +74,85 @@ const AuthContent: React.FC = () => {
       // Success is rendered as full-screen overlay, return null here
       return null;
     default:
-      return <IdentifierForm />;
+      return <IdentifierStep />;
   }
 };
 
 const AuthSuccessOverlay: React.FC = () => {
-  const { step } = useAuthFormContext();
+  const { step, logoUrl, redirectUrl } = useAuthFormContext();
 
   if (step !== 'success') {
     return null;
   }
 
-  return <AuthSuccess />;
+  return <AuthSuccess logoUrl={logoUrl} redirectUrl={redirectUrl} />;
+};
+
+// AuthSuccess component - Apple-style success screen
+interface AuthSuccessInlineProps {
+  logoUrl?: string;
+  redirectUrl?: string;
+  redirectDelay?: number;
+}
+
+const AuthSuccess: React.FC<AuthSuccessInlineProps> = ({
+  logoUrl,
+  redirectUrl,
+  redirectDelay = AUTH.REDIRECT_DELAY,
+}) => {
+  const router = useCfgRouter();
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const animTimer = setTimeout(() => setIsVisible(true), AUTH.ANIMATION_START_DELAY);
+    const redirectTimer = setTimeout(() => {
+      const finalUrl = redirectUrl || AUTH.DEFAULT_REDIRECT;
+      router.hardPush(finalUrl);
+    }, redirectDelay);
+
+    return () => {
+      clearTimeout(animTimer);
+      clearTimeout(redirectTimer);
+    };
+  }, [redirectUrl, redirectDelay, router]);
+
+  return (
+    <div className="auth-success-overlay">
+      <div className="auth-success-content">
+        {logoUrl ? (
+          <img
+            src={logoUrl}
+            alt=""
+            className="auth-success-logo"
+            style={{ opacity: isVisible ? 1 : 0 }}
+          />
+        ) : (
+          <div
+            className="auth-success-check"
+            style={{ opacity: isVisible ? 1 : 0 }}
+          >
+            <svg
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2.5}
+                d="M5 13l4 4L19 7"
+              />
+            </svg>
+          </div>
+        )}
+        <p
+          className="auth-success-text"
+          style={{ opacity: isVisible ? 1 : 0 }}
+        >
+          {AUTH_CONTENT.success.message}
+        </p>
+      </div>
+    </div>
+  );
 };

package/src/layouts/AuthLayout/components/index.ts

@@ -1,7 +1,11 @@
-export { IdentifierForm } from './IdentifierForm';
-export { OTPForm } from './OTPForm';
-export { AuthHelp } from './AuthHelp';
-export { OAuthProviders, OAuthCallback, type OAuthCallbackProps } from './oauth';
-export { TwoFactorForm } from './TwoFactorForm';
-export { TwoFactorSetup, type TwoFactorSetupProps } from './TwoFactorSetup';
-export { AuthSuccess, type AuthSuccessProps } from './AuthSuccess';
+// Apple-style step components
+export { IdentifierStep } from './steps/IdentifierStep';
+export { OTPStep } from './steps/OTPStep';
+export { TwoFactorStep } from './steps/TwoFactorStep';
+export { SetupStep, type SetupStepProps } from './steps/SetupStep';
+
+// Shared UI components
+export * from './shared';
+
+// OAuth
+export { OAuthCallback, type OAuthCallbackProps } from './oauth';

package/src/layouts/AuthLayout/components/oauth/index.ts

@@ -1,2 +1 @@
-export { OAuthProviders } from './OAuthProviders';
 export { OAuthCallback, type OAuthCallbackProps } from './OAuthCallback';

package/src/layouts/AuthLayout/components/shared/AuthButton.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import React from 'react';
+
+export interface AuthButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary';
+  loading?: boolean;
+  children: React.ReactNode;
+}
+
+/**
+ * AuthButton - Apple-style button with loading state
+ */
+export const AuthButton: React.FC<AuthButtonProps> = ({
+  variant = 'primary',
+  loading = false,
+  disabled,
+  children,
+  className = '',
+  ...props
+}) => {
+  const variantClass = variant === 'primary' ? 'auth-button-primary' : 'auth-button-secondary';
+  const loadingClass = loading ? 'auth-button-loading' : '';
+
+  return (
+    <button
+      type="submit"
+      className={`auth-button ${variantClass} ${loadingClass} ${className}`}
+      disabled={disabled || loading}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};

package/src/layouts/AuthLayout/components/shared/AuthContainer.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+import { AUTH } from '../../constants';
+import type { AuthStep } from '../../types';
+
+export interface AuthContainerProps {
+  children: React.ReactNode;
+  step: AuthStep;
+  className?: string;
+}
+
+/**
+ * AuthContainer - Apple-style minimal container with step animations
+ *
+ * Features:
+ * - Full viewport centering
+ * - Max-width constraint (400px)
+ * - Animate-in on step change
+ * - No visible card/border
+ */
+export const AuthContainer: React.FC<AuthContainerProps> = ({
+  children,
+  step,
+  className = '',
+}) => {
+  const [isEntering, setIsEntering] = useState(true);
+  const [currentStep, setCurrentStep] = useState(step);
+
+  // Trigger animation on step change
+  useEffect(() => {
+    if (step !== currentStep) {
+      setIsEntering(true);
+      setCurrentStep(step);
+    }
+  }, [step, currentStep]);
+
+  // Reset entering state after animation
+  useEffect(() => {
+    if (isEntering) {
+      const timer = setTimeout(() => setIsEntering(false), AUTH.ANIMATION_DURATION);
+      return () => clearTimeout(timer);
+    }
+  }, [isEntering]);
+
+  return (
+    <div
+      className={`auth-container ${className}`}
+      data-entering={isEntering}
+      data-step={step}
+    >
+      {children}
+    </div>
+  );
+};

package/src/layouts/AuthLayout/components/shared/AuthDivider.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import React from 'react';
+
+export interface AuthDividerProps {
+  text?: string;
+  className?: string;
+}
+
+/**
+ * AuthDivider - Minimal "or" divider
+ */
+export const AuthDivider: React.FC<AuthDividerProps> = ({
+  text = 'or',
+  className = '',
+}) => {
+  return (
+    <div className={`auth-divider ${className}`}>
+      {text}
+    </div>
+  );
+};

package/src/layouts/AuthLayout/components/shared/AuthError.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import React from 'react';
+
+export interface AuthErrorProps {
+  message?: string | null;
+  className?: string;
+}
+
+/**
+ * AuthError - Subtle error display with shake animation
+ */
+export const AuthError: React.FC<AuthErrorProps> = ({
+  message,
+  className = '',
+}) => {
+  if (!message) {
+    return null;
+  }
+
+  return (
+    <div className={`auth-error ${className}`} role="alert">
+      {message}
+    </div>
+  );
+};

package/src/layouts/AuthLayout/components/shared/AuthFooter.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import React from 'react';
+
+export interface AuthFooterProps {
+  termsUrl?: string;
+  privacyUrl?: string;
+  supportUrl?: string;
+  className?: string;
+}
+
+/**
+ * AuthFooter - Minimal link row for terms, privacy, and support
+ */
+export const AuthFooter: React.FC<AuthFooterProps> = ({
+  termsUrl,
+  privacyUrl,
+  supportUrl,
+  className = '',
+}) => {
+  const links = [
+    termsUrl && { href: termsUrl, label: 'Terms' },
+    privacyUrl && { href: privacyUrl, label: 'Privacy' },
+    supportUrl && { href: supportUrl, label: 'Help' },
+  ].filter(Boolean) as { href: string; label: string }[];
+
+  if (links.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={`auth-footer ${className}`}>
+      {links.map((link, index) => (
+        <React.Fragment key={link.href}>
+          {index > 0 && <span className="auth-footer-dot">&middot;</span>}
+          <a
+            href={link.href}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {link.label}
+          </a>
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};

package/src/layouts/AuthLayout/components/shared/AuthHeader.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import React from 'react';
+
+export interface AuthHeaderProps {
+  logo?: string;
+  title: string;
+  subtitle?: string;
+  identifier?: string;
+  className?: string;
+}
+
+/**
+ * AuthHeader - Apple-style header with logo, title, and subtitle
+ *
+ * Features:
+ * - Optional logo with scale animation
+ * - Large, bold title
+ * - Muted subtitle
+ * - Optional highlighted identifier
+ */
+export const AuthHeader: React.FC<AuthHeaderProps> = ({
+  logo,
+  title,
+  subtitle,
+  identifier,
+  className = '',
+}) => {
+  return (
+    <div className={`auth-header ${className}`}>
+      {logo && (
+        <img
+          src={logo}
+          alt=""
+          className="auth-logo"
+          aria-hidden="true"
+        />
+      )}
+      <h1 className="auth-title">{title}</h1>
+      {subtitle && (
+        <p className="auth-subtitle">
+          {subtitle}
+          {identifier && (
+            <>
+              <br />
+              <span className="auth-identifier">{identifier}</span>
+            </>
+          )}
+        </p>
+      )}
+    </div>
+  );
+};

package/src/layouts/AuthLayout/components/shared/AuthLink.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import React from 'react';
+
+export interface AuthLinkProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  href?: string;
+}
+
+/**
+ * AuthLink - Text link styled button/anchor
+ */
+export const AuthLink: React.FC<AuthLinkProps> = ({
+  children,
+  href,
+  className = '',
+  ...props
+}) => {
+  if (href) {
+    return (
+      <a
+        href={href}
+        className={`auth-link ${className}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={`auth-link ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};

package/src/layouts/AuthLayout/components/shared/AuthOTPInput.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import React from 'react';
+
+import { OTPInput } from '@djangocfg/ui-core/components';
+
+import { AUTH } from '../../constants';
+
+export interface AuthOTPInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onComplete?: (value: string) => void;
+  disabled?: boolean;
+  autoFocus?: boolean;
+}
+
+/**
+ * AuthOTPInput - Reusable OTP input with consistent styling
+ *
+ * Used in: OTPStep, TwoFactorStep, SetupStep
+ */
+export const AuthOTPInput: React.FC<AuthOTPInputProps> = ({
+  value,
+  onChange,
+  onComplete,
+  disabled = false,
+  autoFocus = true,
+}) => (
+  <div className="auth-otp-container auth-otp-wrapper">
+    <OTPInput
+      length={AUTH.OTP_LENGTH}
+      validationMode="numeric"
+      pasteBehavior="clean"
+      value={value}
+      onChange={onChange}
+      onComplete={onComplete}
+      disabled={disabled}
+      autoFocus={autoFocus}
+      size="lg"
+    />
+  </div>
+);

package/src/layouts/AuthLayout/components/shared/ChannelToggle.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { Mail, Phone } from 'lucide-react';
+import React from 'react';
+
+import type { AuthChannel } from '../../types';
+
+export interface ChannelToggleProps {
+  channel: AuthChannel;
+  onChange: (channel: AuthChannel) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * ChannelToggle - Apple-style segmented control for email/phone
+ */
+export const ChannelToggle: React.FC<ChannelToggleProps> = ({
+  channel,
+  onChange,
+  disabled = false,
+  className = '',
+}) => {
+  return (
+    <div className={`auth-channel-toggle ${className}`}>
+      <button
+        type="button"
+        className="auth-channel-option"
+        data-active={channel === 'email'}
+        onClick={() => onChange('email')}
+        disabled={disabled}
+      >
+        <Mail />
+        Email
+      </button>
+      <button
+        type="button"
+        className="auth-channel-option"
+        data-active={channel === 'phone'}
+        onClick={() => onChange('phone')}
+        disabled={disabled}
+      >
+        <Phone />
+        Phone
+      </button>
+    </div>
+  );
+};

package/src/layouts/AuthLayout/components/shared/TermsCheckbox.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import React from 'react';
+
+import { Checkbox } from '@djangocfg/ui-core/components';
+
+export interface TermsCheckboxProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  termsUrl?: string;
+  privacyUrl?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * TermsCheckbox - Compact terms acceptance checkbox
+ */
+export const TermsCheckbox: React.FC<TermsCheckboxProps> = ({
+  checked,
+  onChange,
+  termsUrl,
+  privacyUrl,
+  disabled = false,
+  className = '',
+}) => {
+  // Don't render if no links provided
+  if (!termsUrl && !privacyUrl) {
+    return null;
+  }
+
+  return (
+    <div className={`auth-terms ${className}`}>
+      <Checkbox
+        id="auth-terms"
+        checked={checked}
+        onCheckedChange={onChange}
+        disabled={disabled}
+        className="auth-terms-checkbox"
+      />
+      <label htmlFor="auth-terms">
+        I agree to the{' '}
+        {termsUrl && (
+          <a href={termsUrl} target="_blank" rel="noopener noreferrer">
+            Terms
+          </a>
+        )}
+        {termsUrl && privacyUrl && ' and '}
+        {privacyUrl && (
+          <a href={privacyUrl} target="_blank" rel="noopener noreferrer">
+            Privacy Policy
+          </a>
+        )}
+      </label>
+    </div>
+  );
+};