@djangocfg/layouts 2.1.113 → 2.1.115

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.113",
+  "version": "2.1.115",
   "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.113",
-    "@djangocfg/centrifugo": "^2.1.113",
-    "@djangocfg/i18n": "^2.1.113",
-    "@djangocfg/ui-core": "^2.1.113",
-    "@djangocfg/ui-nextjs": "^2.1.113",
-    "@djangocfg/ui-tools": "^2.1.113",
+    "@djangocfg/api": "^2.1.115",
+    "@djangocfg/centrifugo": "^2.1.115",
+    "@djangocfg/i18n": "^2.1.115",
+    "@djangocfg/ui-core": "^2.1.115",
+    "@djangocfg/ui-nextjs": "^2.1.115",
+    "@djangocfg/ui-tools": "^2.1.115",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -102,13 +102,13 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.113",
-    "@djangocfg/i18n": "^2.1.113",
-    "@djangocfg/centrifugo": "^2.1.113",
-    "@djangocfg/typescript-config": "^2.1.113",
-    "@djangocfg/ui-core": "^2.1.113",
-    "@djangocfg/ui-nextjs": "^2.1.113",
-    "@djangocfg/ui-tools": "^2.1.113",
+    "@djangocfg/api": "^2.1.115",
+    "@djangocfg/i18n": "^2.1.115",
+    "@djangocfg/centrifugo": "^2.1.115",
+    "@djangocfg/typescript-config": "^2.1.115",
+    "@djangocfg/ui-core": "^2.1.115",
+    "@djangocfg/ui-nextjs": "^2.1.115",
+    "@djangocfg/ui-tools": "^2.1.115",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/AppLayout/index.ts

@@ -3,7 +3,7 @@
  */
 
 export { AppLayout } from './AppLayout';
-export type { AppLayoutProps, LayoutMode } from './AppLayout';
+export type { AppLayoutProps, LayoutMode, I18nLayoutConfig } from './AppLayout';
 
 export { BaseApp } from './BaseApp';
 export type { BaseAppProps } from './BaseApp';

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -10,12 +10,12 @@
 import React, { useEffect, useState } from 'react';
 
 import { useCfgRouter } from '@djangocfg/api/auth';
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 
 import { Suspense } 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';
@@ -101,8 +101,11 @@ const AuthSuccess: React.FC<AuthSuccessInlineProps> = ({
   redirectDelay = AUTH.REDIRECT_DELAY,
 }) => {
   const router = useCfgRouter();
+  const t = useTypedT<I18nTranslations>();
   const [isVisible, setIsVisible] = useState(false);
 
+  const successMessage = React.useMemo(() => t('layouts.auth.success.message'), [t]);
+
   useEffect(() => {
     const animTimer = setTimeout(() => setIsVisible(true), AUTH.ANIMATION_START_DELAY);
     const redirectTimer = setTimeout(() => {
@@ -150,7 +153,7 @@ const AuthSuccess: React.FC<AuthSuccessInlineProps> = ({
           className="auth-success-text"
           style={{ opacity: isVisible ? 1 : 0 }}
         >
-          {AUTH_CONTENT.success.message}
+          {successMessage}
         </p>
       </div>
     </div>

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

@@ -1,6 +1,8 @@
 'use client';
 
-import React from 'react';
+import React, { useMemo } from 'react';
+
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 
 export interface AuthDividerProps {
   text?: string;
@@ -11,12 +13,16 @@ export interface AuthDividerProps {
  * AuthDivider - Minimal "or" divider
  */
 export const AuthDivider: React.FC<AuthDividerProps> = ({
-  text = 'or',
+  text,
   className = '',
 }) => {
+  const t = useTypedT<I18nTranslations>();
+  const defaultText = useMemo(() => t('layouts.auth.divider.or'), [t]);
+  const dividerText = text ?? defaultText;
+
   return (
     <div className={`auth-divider ${className}`}>
-      {text}
+      {dividerText}
     </div>
   );
 };

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

@@ -1,6 +1,8 @@
 'use client';
 
-import React from 'react';
+import React, { useMemo } from 'react';
+
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 
 export interface AuthFooterProps {
   termsUrl?: string;
@@ -18,10 +20,17 @@ export const AuthFooter: React.FC<AuthFooterProps> = ({
   supportUrl,
   className = '',
 }) => {
+  const t = useTypedT<I18nTranslations>();
+  const labels = useMemo(() => ({
+    terms: t('layouts.auth.footer.terms'),
+    privacy: t('layouts.auth.footer.privacy'),
+    support: t('layouts.auth.footer.support'),
+  }), [t]);
+
   const links = [
-    termsUrl && { href: termsUrl, label: 'Terms' },
-    privacyUrl && { href: privacyUrl, label: 'Privacy' },
-    supportUrl && { href: supportUrl, label: 'Help' },
+    termsUrl && { href: termsUrl, label: labels.terms },
+    privacyUrl && { href: privacyUrl, label: labels.privacy },
+    supportUrl && { href: supportUrl, label: labels.support },
   ].filter(Boolean) as { href: string; label: string }[];
 
   if (links.length === 0) {

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

@@ -1,7 +1,9 @@
 'use client';
 
 import { Mail, Phone } from 'lucide-react';
-import React from 'react';
+import React, { useMemo } from 'react';
+
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 
 import type { AuthChannel } from '../../types';
 
@@ -21,6 +23,12 @@ export const ChannelToggle: React.FC<ChannelToggleProps> = ({
   disabled = false,
   className = '',
 }) => {
+  const t = useTypedT<I18nTranslations>();
+  const labels = useMemo(() => ({
+    email: t('layouts.auth.identifier.channel.email'),
+    phone: t('layouts.auth.identifier.channel.phone'),
+  }), [t]);
+
   return (
     <div className={`auth-channel-toggle ${className}`}>
       <button
@@ -31,7 +39,7 @@ export const ChannelToggle: React.FC<ChannelToggleProps> = ({
         disabled={disabled}
       >
         <Mail />
-        Email
+        {labels.email}
       </button>
       <button
         type="button"
@@ -41,7 +49,7 @@ export const ChannelToggle: React.FC<ChannelToggleProps> = ({
         disabled={disabled}
       >
         <Phone />
-        Phone
+        {labels.phone}
       </button>
     </div>
   );

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

@@ -1,7 +1,8 @@
 'use client';
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { Checkbox } from '@djangocfg/ui-core/components';
 
 export interface TermsCheckboxProps {
@@ -24,6 +25,14 @@ export const TermsCheckbox: React.FC<TermsCheckboxProps> = ({
   disabled = false,
   className = '',
 }) => {
+  const t = useTypedT<I18nTranslations>();
+  const labels = useMemo(() => ({
+    agree: t('layouts.auth.terms.agree'),
+    and: t('layouts.auth.terms.and'),
+    terms: t('layouts.auth.terms.terms'),
+    privacy: t('layouts.auth.terms.privacy'),
+  }), [t]);
+
   // Don't render if no links provided
   if (!termsUrl && !privacyUrl) {
     return null;
@@ -39,16 +48,16 @@ export const TermsCheckbox: React.FC<TermsCheckboxProps> = ({
         className="auth-terms-checkbox"
       />
       <label htmlFor="auth-terms">
-        I agree to the{' '}
+        {labels.agree}{' '}
         {termsUrl && (
           <a href={termsUrl} target="_blank" rel="noopener noreferrer">
-            Terms
+            {labels.terms}
           </a>
         )}
-        {termsUrl && privacyUrl && ' and '}
+        {termsUrl && privacyUrl && ` ${labels.and} `}
         {privacyUrl && (
           <a href={privacyUrl} target="_blank" rel="noopener noreferrer">
-            Privacy Policy
+            {labels.privacy}
           </a>
         )}
       </label>

package/src/layouts/AuthLayout/components/steps/IdentifierStep.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { Github } from 'lucide-react';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 import { useGithubAuth } from '@djangocfg/api/auth';
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { Input, PhoneInput } from '@djangocfg/ui-core/components';
 
-import { AUTH_CONTENT } from '../../content';
 import { useAuthFormContext } from '../../context';
 import {
   AuthButton,
@@ -52,6 +52,24 @@ export const IdentifierStep: React.FC = () => {
     validateIdentifier,
   } = useAuthFormContext();
 
+  // Translations
+  const t = useTypedT<I18nTranslations>();
+  const content = useMemo(() => ({
+    title: t('layouts.auth.identifier.title'),
+    subtitle: {
+      email: t('layouts.auth.identifier.subtitle.email'),
+      phone: t('layouts.auth.identifier.subtitle.phone'),
+    },
+    placeholder: {
+      email: t('layouts.auth.identifier.placeholder.email'),
+      phone: t('layouts.auth.identifier.placeholder.phone'),
+    },
+    button: t('layouts.auth.identifier.button'),
+    oauth: {
+      github: t('layouts.auth.identifier.oauth.github'),
+    },
+  }), [t]);
+
   // GitHub OAuth
   const { isLoading: isGithubLoading, startGithubAuth } = useGithubAuth({
     sourceUrl,
@@ -87,7 +105,6 @@ export const IdentifierStep: React.FC = () => {
     }
   };
 
-  const content = AUTH_CONTENT.identifier;
   const subtitle = channel === 'phone' ? content.subtitle.phone : content.subtitle.email;
   const hasTerms = Boolean(termsUrl || privacyUrl);
 

package/src/layouts/AuthLayout/components/steps/OTPStep.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 
 import { config } from '../../../../utils';
 import { AUTH } from '../../constants';
-import { AUTH_CONTENT } from '../../content';
 import { useAuthFormContext } from '../../context';
 import {
   AuthButton,
@@ -42,8 +43,20 @@ export const OTPStep: React.FC = () => {
 
   const [submitState, setSubmitState] = useState<SubmitState>('idle');
 
+  // Translations
+  const t = useTypedT<I18nTranslations>();
+  const content = useMemo(() => ({
+    title: t('layouts.auth.otp.title'),
+    subtitle: t('layouts.auth.otp.subtitle'),
+    button: t('layouts.auth.otp.button'),
+    resend: t('layouts.auth.otp.resend'),
+    changeEmail: t('layouts.auth.otp.changeEmail'),
+    changePhone: t('layouts.auth.otp.changePhone'),
+    devMode: t('layouts.auth.dev.anyCodeWorks'),
+  }), [t]);
+
   // Mask identifier for privacy
-  const maskedIdentifier = React.useMemo(() => {
+  const maskedIdentifier = useMemo(() => {
     if (channel === 'phone') {
       return identifier.slice(-4).padStart(identifier.length, '*');
     }
@@ -72,7 +85,7 @@ export const OTPStep: React.FC = () => {
     [handleOTPSubmit, isLoading, isAutoSubmittingFromUrl, submitState]
   );
 
-  const content = AUTH_CONTENT.otp;
+  const changeIdentifierLabel = channel === 'phone' ? content.changePhone : content.changeEmail;
 
   return (
     <AuthContainer step="otp">
@@ -91,7 +104,7 @@ export const OTPStep: React.FC = () => {
         />
 
         {config.isDevelopment && (
-          <div className="auth-dev-notice">{AUTH_CONTENT.dev.anyCodeWorks}</div>
+          <div className="auth-dev-notice">{content.devMode}</div>
         )}
 
         <AuthError message={error} />
@@ -105,7 +118,7 @@ export const OTPStep: React.FC = () => {
             {content.resend}
           </AuthLink>
           <AuthLink onClick={handleBackToIdentifier} disabled={isLoading}>
-            {content.changeIdentifier(channel)}
+            {changeIdentifierLabel}
           </AuthLink>
         </div>
       </form>

package/src/layouts/AuthLayout/components/steps/SetupStep/SetupComplete.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import { Check, Copy } from 'lucide-react';
-import React from 'react';
+import React, { useMemo } from 'react';
+
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 
-import { AUTH_CONTENT } from '../../../content';
 import { useCopyToClipboard } from '../../../hooks';
 import { AuthButton, AuthContainer, AuthHeader } from '../../shared';
 
@@ -22,7 +23,15 @@ export const SetupComplete: React.FC<SetupCompleteProps> = ({
   onDone,
 }) => {
   const { copied, copy } = useCopyToClipboard();
-  const content = AUTH_CONTENT.setup.complete;
+  const t = useTypedT<I18nTranslations>();
+  const content = useMemo(() => ({
+    title: t('layouts.auth.setup.complete.title'),
+    subtitle: t('layouts.auth.setup.complete.subtitle'),
+    instruction: t('layouts.auth.setup.complete.instruction'),
+    copyAll: t('layouts.auth.setup.complete.copyAll'),
+    copied: t('layouts.auth.setup.complete.copied'),
+    done: t('layouts.auth.setup.complete.done'),
+  }), [t]);
 
   const handleCopyAll = () => {
     copy(backupCodes.join('\n'));

package/src/layouts/AuthLayout/components/steps/SetupStep/SetupLoading.tsx

@@ -1,15 +1,20 @@
 'use client';
 
-import React from 'react';
+import React, { useMemo } from 'react';
+
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 
-import { AUTH_CONTENT } from '../../../content';
 import { AuthButton, AuthContainer, AuthHeader } from '../../shared';
 
 /**
  * SetupLoading - Loading state for 2FA setup
  */
 export const SetupLoading: React.FC = () => {
-  const content = AUTH_CONTENT.setup.loading;
+  const t = useTypedT<I18nTranslations>();
+  const content = useMemo(() => ({
+    title: t('layouts.auth.setup.loading.title'),
+    button: t('layouts.auth.setup.loading.button'),
+  }), [t]);
 
   return (
     <AuthContainer step="2fa-setup">

package/src/layouts/AuthLayout/components/steps/SetupStep/SetupQRCode.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import { Check, Copy } from 'lucide-react';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { QRCodeSVG } from 'qrcode.react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import {
   Collapsible,
   CollapsibleContent,
@@ -11,7 +12,6 @@ import {
 } from '@djangocfg/ui-core/components';
 
 import { AUTH } from '../../../constants';
-import { AUTH_CONTENT } from '../../../content';
 import { useCopyToClipboard } from '../../../hooks';
 import {
   AuthButton,
@@ -44,7 +44,17 @@ export const SetupQRCode: React.FC<SetupQRCodeProps> = ({
 }) => {
   const [confirmCode, setConfirmCode] = useState('');
   const { copied, copy } = useCopyToClipboard();
-  const content = AUTH_CONTENT.setup.qrCode;
+  const t = useTypedT<I18nTranslations>();
+  const content = useMemo(() => ({
+    title: t('layouts.auth.setup.qrCode.title'),
+    subtitle: t('layouts.auth.setup.qrCode.subtitle'),
+    manualEntry: t('layouts.auth.setup.qrCode.manualEntry'),
+    confirmPrompt: t('layouts.auth.setup.qrCode.confirmPrompt'),
+    button: t('layouts.auth.setup.qrCode.button'),
+    skip: t('layouts.auth.setup.qrCode.skip'),
+    copied: t('layouts.auth.setup.complete.copied'),
+    copy: 'Copy',
+  }), [t]);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -82,12 +92,12 @@ export const SetupQRCode: React.FC<SetupQRCodeProps> = ({
                 {copied ? (
                   <>
                     <Check className="w-4 h-4" />
-                    {AUTH_CONTENT.setup.complete.copied}
+                    {content.copied}
                   </>
                 ) : (
                   <>
                     <Copy className="w-4 h-4" />
-                    Copy
+                    {content.copy}
                   </>
                 )}
               </AuthLink>

package/src/layouts/AuthLayout/components/steps/TwoFactorStep.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { Input } from '@djangocfg/ui-core/components';
 
 import { AUTH } from '../../constants';
-import { AUTH_CONTENT } from '../../content';
 import { useAuthFormContext } from '../../context';
 import {
   AuthButton,
@@ -37,7 +37,24 @@ export const TwoFactorStep: React.FC = () => {
     handleUseTOTP,
   } = useAuthFormContext();
 
-  const content = AUTH_CONTENT.twoFactor;
+  // Translations
+  const t = useTypedT<I18nTranslations>();
+  const content = useMemo(() => ({
+    title: t('layouts.auth.twoFactor.title'),
+    subtitle: {
+      totp: t('layouts.auth.twoFactor.subtitle.totp'),
+      backup: t('layouts.auth.twoFactor.subtitle.backup'),
+    },
+    placeholder: {
+      backup: t('layouts.auth.twoFactor.placeholder.backup'),
+    },
+    button: t('layouts.auth.twoFactor.button'),
+    toggle: {
+      toBackup: t('layouts.auth.twoFactor.toggle.toBackup'),
+      toTotp: t('layouts.auth.twoFactor.toggle.toTotp'),
+    },
+  }), [t]);
+
   const subtitle = useBackupCode ? content.subtitle.backup : content.subtitle.totp;
 
   return (

package/src/layouts/AuthLayout/content.ts

@@ -1,78 +0,0 @@
-/**
- * AuthLayout Content
- *
- * All UI strings centralized for easy updates and i18n.
- */
-
-export const AUTH_CONTENT = {
-  identifier: {
-    title: 'Sign in',
-    subtitle: {
-      email: 'Enter your email to continue',
-      phone: 'Enter your phone number to continue',
-    },
-    placeholder: {
-      email: 'email@example.com',
-      phone: 'Enter your phone number',
-    },
-    button: 'Continue',
-    oauth: {
-      github: 'Continue with GitHub',
-    },
-  },
-
-  otp: {
-    title: 'Enter code',
-    subtitle: 'We sent a code to',
-    button: 'Verify',
-    resend: 'Resend code',
-    changeIdentifier: (channel: string) => `Change ${channel}`,
-  },
-
-  twoFactor: {
-    title: 'Two-factor authentication',
-    subtitle: {
-      totp: 'Enter the 6-digit code from your authenticator',
-      backup: 'Enter one of your backup codes',
-    },
-    placeholder: {
-      backup: 'XXXXXXXX',
-    },
-    button: 'Verify',
-    toggle: {
-      toBackup: 'Use backup code',
-      toTotp: 'Use authenticator app',
-    },
-  },
-
-  setup: {
-    loading: {
-      title: 'Setting up...',
-      button: 'Loading',
-    },
-    qrCode: {
-      title: 'Set up 2FA',
-      subtitle: 'Scan this QR code with your authenticator app',
-      manualEntry: "Can't scan? Enter manually",
-      confirmPrompt: 'Enter the 6-digit code to confirm',
-      button: 'Enable 2FA',
-      skip: 'Skip for now',
-    },
-    complete: {
-      title: '2FA enabled',
-      subtitle: 'Save these backup codes securely',
-      instruction: 'Each code can only be used once',
-      copyAll: 'Copy all codes',
-      copied: 'Copied',
-      done: 'Done',
-    },
-  },
-
-  success: {
-    message: 'Signed in successfully',
-  },
-
-  dev: {
-    anyCodeWorks: 'Dev Mode: Any code works',
-  },
-} as const;