@djangocfg/layouts 2.1.304 → 2.1.308

package/src/layouts/PublicLayout/primitives/NavControls.tsx

@@ -7,12 +7,10 @@ import { Button } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 import { useThemeContext } from '@djangocfg/ui-nextjs/theme';
 
-import type { I18nLayoutConfig } from '../../types';
 import { LocaleSwitcher } from '../../_components/LocaleSwitcher';
+import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
 
 export interface NavControlsProps {
-  /** Optional i18n config. Required to render the locale switcher. */
-  i18n?: I18nLayoutConfig;
   /** Show the theme (light / system / dark) pill. @default false */
   showThemeSwitcher?: boolean;
   /** Show the locale dropdown. Requires `i18n`. @default false */
@@ -81,12 +79,12 @@ function ThemeModeControl({ size }: { size: 'compact' | 'default' }) {
  * to a navbar config.
  */
 export function NavControls({
-  i18n,
   showThemeSwitcher = false,
   showLocaleSwitcher = false,
   size = 'compact',
   className,
 }: NavControlsProps) {
+  const i18n = useLayoutI18nOptional();
   const renderLocale = showLocaleSwitcher && Boolean(i18n);
   if (!showThemeSwitcher && !renderLocale) return null;
 
@@ -98,12 +96,10 @@ export function NavControls({
   return (
     <div className={cn('inline-flex items-center gap-1.5', className)}>
       {showThemeSwitcher && <ThemeModeControl size={size} />}
-      {renderLocale && i18n && (
+      {renderLocale && (
         <LocaleSwitcher
-          locale={i18n.locale}
-          locales={i18n.locales}
-          onChange={i18n.onLocaleChange}
-          variant="outline"
+          variant="dialog"
+          buttonVariant="outline"
           size={size === 'compact' ? 'sm' : 'default'}
           showTriggerLabel={false}
           className={localeBtnClass}

package/src/layouts/PublicLayout/shared/MobileDrawerShell.tsx

@@ -22,7 +22,7 @@ import { usePublicLayoutOptional } from '../context';
 import { useMobileNavPanel } from '../hooks';
 import { NavControls } from '../primitives/NavControls';
 
-import type { I18nLayoutConfig, NavigationItem, UserMenuConfig } from '../../types';
+import type { NavigationItem, UserMenuConfig } from '../../types';
 
 export interface MobileDrawerShellProps {
   isOpen?: boolean;
@@ -38,8 +38,6 @@ export interface MobileDrawerShellProps {
     showThemeSwitcher?: boolean;
     showLocaleSwitcher?: boolean;
   };
-  /** i18n config — required for the locale switcher row. */
-  i18n?: I18nLayoutConfig;
 }
 
 export function MobileDrawerShell(props: MobileDrawerShellProps) {
@@ -81,8 +79,7 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
   const hasSessionUser = Boolean(isAuthenticated && user);
   const showSignInFooter = !hasSessionUser;
   const showThemeSwitcher = props.controls?.showThemeSwitcher === true;
-  const showLocaleSwitcher =
-    props.controls?.showLocaleSwitcher === true && Boolean(props.i18n);
+  const showLocaleSwitcher = props.controls?.showLocaleSwitcher === true;
   const showControlsRow = showThemeSwitcher || showLocaleSwitcher;
 
   return (
@@ -199,7 +196,6 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
           {showControlsRow && (
             <div className="shrink-0 border-t border-border/50 px-4 py-3 flex items-center justify-center gap-2">
               <NavControls
-                i18n={props.i18n}
                 showThemeSwitcher={showThemeSwitcher}
                 showLocaleSwitcher={showLocaleSwitcher}
                 size="default"

package/src/layouts/PublicLayout/shared/NavbarShell.tsx

@@ -50,8 +50,6 @@ import { NavBrand } from '../primitives/NavBrand';
 import { NavControls } from '../primitives/NavControls';
 import { NavDesktopItems } from '../primitives/NavDesktopItems';
 
-import type { I18nLayoutConfig } from '../../types';
-
 const heightCls: Record<PublicNavbarHeight, string> = {
   sm: 'py-2',
   md: 'py-3.5',
@@ -136,8 +134,6 @@ export interface NavbarShellProps {
   actionsTrailingSlot?: ReactNode;
 
   // ── Theme + locale controls (rendered next to UserMenu on desktop) ────────
-  /** i18n config — enables the locale switcher. Same type as `DefaultFooter`. */
-  i18n?: I18nLayoutConfig;
   /** Toggle individual controls. Locale switcher also requires `i18n`. */
   controls?: {
     /** Light / system / dark pill. @default false */
@@ -267,12 +263,10 @@ export function NavbarShell(props: NavbarShellProps) {
   ) : null;
 
   const showThemeSwitcher = props.controls?.showThemeSwitcher === true;
-  const showLocaleSwitcher =
-    props.controls?.showLocaleSwitcher === true && Boolean(props.i18n);
+  const showLocaleSwitcher = props.controls?.showLocaleSwitcher === true;
   const hasControls = showThemeSwitcher || showLocaleSwitcher;
   const controlsNode = hasControls ? (
     <NavControls
-      i18n={props.i18n}
       showThemeSwitcher={showThemeSwitcher}
       showLocaleSwitcher={showLocaleSwitcher}
     />

package/src/layouts/_components/LocaleSwitcher.tsx

@@ -1,185 +1,47 @@
 /**
- * LocaleSwitcher Component (Presentational)
+ * Re-export shim — kept for backwards compatibility with code that imports
+ * `LocaleSwitcher` / `LOCALE_LABELS` from this path.
  *
- * "Dumb" locale switcher that receives data via props.
- * For the "smart" version with next-intl hooks, use @djangocfg/nextjs/i18n/components
- *
- * @example
- * ```tsx
- * <LocaleSwitcher
- *   locale="en"
- *   locales={['en', 'ru', 'ko']}
- *   onChange={(locale) => router.push(`/${locale}`)}
- * />
- * ```
+ * The implementation now lives in `./locale-switcher/`.
  */
 
 'use client';
 
-import { Globe } from 'lucide-react';
-
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  getLanguageFlag,
-} from '@djangocfg/ui-core/components';
-
-// Default locale labels (supports both simple codes and regional variants)
-export const LOCALE_LABELS: Record<string, string> = {
-  // Major languages
-  en: 'English',
-  ru: 'Русский',
-  ko: '한국어',
-  zh: '中文',
-  ja: '日本語',
-  es: 'Español',
-  fr: 'Français',
-  de: 'Deutsch',
-  pt: 'Português',
-  it: 'Italiano',
-  ar: 'العربية',
-  hi: 'हिन्दी',
-  tr: 'Türkçe',
-  pl: 'Polski',
-  nl: 'Nederlands',
-  uk: 'Українська',
-
-  // Regional variants
-  'pt-br': 'Português (Brasil)',
-  'pt-BR': 'Português (Brasil)',
-  'pt-pt': 'Português (Portugal)',
-  'pt-PT': 'Português (Portugal)',
-  'zh-cn': '简体中文',
-  'zh-CN': '简体中文',
-  'zh-tw': '繁體中文',
-  'zh-TW': '繁體中文',
-  'en-us': 'English (US)',
-  'en-US': 'English (US)',
-  'en-gb': 'English (UK)',
-  'en-GB': 'English (UK)',
-  'es-mx': 'Español (México)',
-  'es-MX': 'Español (México)',
-  'es-es': 'Español (España)',
-  'es-ES': 'Español (España)',
-  'fr-ca': 'Français (Canada)',
-  'fr-CA': 'Français (Canada)',
-
-  // Scandinavian languages
-  sv: 'Svenska',
-  no: 'Norsk',
-  nb: 'Norsk Bokmål',
-  nn: 'Norsk Nynorsk',
-  da: 'Dansk',
-  fi: 'Suomi',
-  is: 'Íslenska',
-
-  // Other European
-  cs: 'Čeština',
-  sk: 'Slovenčina',
-  hu: 'Magyar',
-  ro: 'Română',
-  bg: 'Български',
-  hr: 'Hrvatski',
-  sr: 'Српски',
-  sl: 'Slovenščina',
-  et: 'Eesti',
-  lv: 'Latviešu',
-  lt: 'Lietuvių',
-  el: 'Ελληνικά',
-
-  // Other
-  th: 'ไทย',
-  vi: 'Tiếng Việt',
-  id: 'Indonesia',
-  ms: 'Bahasa Melayu',
-  he: 'עברית',
-  fa: 'فارسی',
-};
+export {
+  LocaleSwitcher,
+  LocaleSwitcherDialog,
+  LocaleSwitcherDropdown,
+  LocaleSwitcherTrigger,
+  LocaleGrid,
+  LocaleCard,
+  getLocaleMeta,
+} from './locale-switcher';
+export type {
+  LocaleSwitcherProps,
+  LocaleSwitcherDialogProps,
+  LocaleSwitcherDropdownProps,
+  LocaleSwitcherTriggerProps,
+  LocaleGridProps,
+  LocaleCardProps,
+  LocaleMeta,
+  LocaleSwitcherBrand,
+  LocaleSwitcherLabels,
+  LocaleSwitcherSharedProps,
+  LocaleSwitcherVariant,
+} from './locale-switcher';
+
+import { getLocaleMeta as _getLocaleMeta } from './locale-switcher';
 
-export interface LocaleSwitcherProps {
-  /** Current locale */
-  locale: string;
-  /** Available locales */
-  locales: string[];
-  /** Callback when locale changes */
-  onChange: (locale: string) => void;
-  /** Custom labels for locales */
-  labels?: Record<string, string>;
-  /** Show locale code instead of/with label */
-  showCode?: boolean;
-  /** Button variant */
-  variant?: 'ghost' | 'outline' | 'default';
-  /** Button size */
-  size?: 'sm' | 'default' | 'lg' | 'icon';
-  /** Show icon (Globe icon, default: true) */
-  showIcon?: boolean;
-  /** Show flag emoji (default: true) */
-  showFlag?: boolean;
-  /** Show label text in trigger button (default: true) */
-  showTriggerLabel?: boolean;
-  /** Custom className */
-  className?: string;
-}
-
-export function LocaleSwitcher({
-  locale,
-  locales,
-  onChange,
-  labels = {},
-  showCode = false,
-  variant = 'ghost',
-  size = 'sm',
-  showIcon = true,
-  showFlag = true,
-  showTriggerLabel = true,
-  className,
-}: LocaleSwitcherProps) {
-  const allLabels = { ...LOCALE_LABELS, ...labels };
-
-  const getLabel = (code: string) => {
-    const label = allLabels[code] || code.toUpperCase();
-    if (showCode) {
-      return `${code.toUpperCase()} - ${label}`;
-    }
-    return label;
-  };
-
-  const getFlag = (code: string) => {
-    if (!showFlag) return null;
-    const flag = getLanguageFlag(code);
-    return flag || null;
-  };
-
-  const currentLabel = showCode ? locale.toUpperCase() : getLabel(locale);
-  const currentFlag = getFlag(locale);
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant={variant} size={size} className={className}>
-          {showIcon && !currentFlag && <Globe className={showTriggerLabel ? "h-4 w-4 mr-1" : "h-4 w-4"} />}
-          {currentFlag && <span className={showTriggerLabel ? "mr-1" : ""}>{currentFlag}</span>}
-          {showTriggerLabel && <span>{currentLabel}</span>}
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        {locales.map((code) => {
-          const flag = getFlag(code);
-          return (
-            <DropdownMenuItem
-              key={code}
-              onClick={() => onChange(code)}
-              className={code === locale ? 'bg-accent' : ''}
-            >
-              {flag && <span className="mr-2">{flag}</span>}
-              {getLabel(code)}
-            </DropdownMenuItem>
-          );
-        })}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
+/**
+ * Native-name labels for common locales. Built from the central locale-meta
+ * registry — kept as a `Record` for legacy callers that index it directly.
+ */
+export const LOCALE_LABELS: Record<string, string> = new Proxy(
+  {} as Record<string, string>,
+  {
+    get(_target, prop: string) {
+      if (typeof prop !== 'string') return undefined;
+      return _getLocaleMeta(prop).native;
+    },
+  },
+);

package/src/layouts/_components/PrivateSidebarAccount.tsx

@@ -26,8 +26,8 @@ import { ThemeToggle } from '@djangocfg/ui-nextjs/theme';
 
 import { useLogout } from '../../hooks';
 import { LocaleSwitcher } from './LocaleSwitcher';
+import { useLayoutI18nOptional } from '../AppLayout/LayoutI18nProvider';
 
-import type { I18nLayoutConfig } from '../types';
 import type { HeaderConfig } from '../PrivateLayout/PrivateLayout';
 
 /** Radix portals (dropdown, select, popover) render outside the account node — ignore those clicks for “outside”. */
@@ -43,13 +43,13 @@ function isPointerFromRadixOverlay(target: EventTarget | null): boolean {
 
 interface PrivateSidebarAccountProps {
   header?: HeaderConfig;
-  i18n?: I18nLayoutConfig;
 }
 
-export function PrivateSidebarAccount({ header, i18n }: PrivateSidebarAccountProps) {
+export function PrivateSidebarAccount({ header }: PrivateSidebarAccountProps) {
   const { user } = useAuth();
   const handleLogout = useLogout();
   const t = useAppT();
+  const layoutI18n = useLayoutI18nOptional();
   const { state, setOpen: setSidebarOpen } = useSidebar();
   const [accountOpen, setAccountOpen] = React.useState(false);
   const accountRootRef = React.useRef<HTMLDivElement>(null);
@@ -150,12 +150,10 @@ export function PrivateSidebarAccount({ header, i18n }: PrivateSidebarAccountPro
     </>
   );
 
-  const localeThemeGroup = i18n ? (
+  const localeThemeGroup = layoutI18n ? (
     <LocaleSwitcher
-      locale={i18n.locale}
-      locales={i18n.locales}
-      onChange={i18n.onLocaleChange}
-      variant="ghost"
+      variant="dropdown"
+      buttonVariant="ghost"
       size="icon"
       showTriggerLabel={false}
       showIcon={false}

package/src/layouts/_components/UserMenu.tsx

@@ -50,7 +50,7 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-  getLanguageFlag,
+  LanguageFlag,
 } from '@djangocfg/ui-core/components';
 
 import { LOCALE_LABELS } from './LocaleSwitcher';
@@ -224,20 +224,19 @@ export function UserMenu({
               </p>
               <div className="mt-2 flex flex-wrap gap-2">
                 {localeMenu.codes.map((code) => {
-                  const flag = getLanguageFlag(code);
                   const active = code === localeMenu.current;
                   return (
                     <button
                       key={code}
                       type="button"
                       onClick={() => localeMenu.onChange(code)}
-                      className={`rounded-md border px-2.5 py-1.5 text-sm font-medium transition-colors ${
+                      className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-sm font-medium transition-colors ${
                         active
                           ? 'border-primary bg-accent text-foreground'
                           : 'border-border/60 text-muted-foreground hover:bg-accent hover:text-foreground'
                       }`}
                     >
-                      {flag ? <span className="mr-1.5">{flag}</span> : null}
+                      <LanguageFlag code={code} className="h-3 w-4" rounded />
                       {localeLabel(code)}
                     </button>
                   );
@@ -333,21 +332,18 @@ export function UserMenu({
                 <span>{labels.language}</span>
               </DropdownMenuSubTrigger>
               <DropdownMenuSubContent>
-                {localeMenu.codes.map((code) => {
-                  const flag = getLanguageFlag(code);
-                  return (
-                    <DropdownMenuItem
-                      key={code}
-                      onSelect={() => {
-                        localeMenu.onChange(code);
-                      }}
-                      className={code === localeMenu.current ? 'bg-accent' : ''}
-                    >
-                      {flag ? <span className="mr-2">{flag}</span> : null}
-                      {localeLabel(code)}
-                    </DropdownMenuItem>
-                  );
-                })}
+                {localeMenu.codes.map((code) => (
+                  <DropdownMenuItem
+                    key={code}
+                    onSelect={() => {
+                      localeMenu.onChange(code);
+                    }}
+                    className={code === localeMenu.current ? 'bg-accent' : ''}
+                  >
+                    <LanguageFlag code={code} className="mr-2 h-3 w-4" rounded />
+                    {localeLabel(code)}
+                  </DropdownMenuItem>
+                ))}
               </DropdownMenuSubContent>
             </DropdownMenuSub>
           </>

package/src/layouts/_components/index.ts

@@ -2,8 +2,29 @@
  * Shared Layout Components
  */
 
-export { LocaleSwitcher, LOCALE_LABELS } from './LocaleSwitcher';
-export type { LocaleSwitcherProps } from './LocaleSwitcher';
+export {
+  LocaleSwitcher,
+  LocaleSwitcherDialog,
+  LocaleSwitcherDropdown,
+  LocaleSwitcherTrigger,
+  LocaleGrid,
+  LocaleCard,
+  getLocaleMeta,
+  LOCALE_LABELS,
+} from './LocaleSwitcher';
+export type {
+  LocaleSwitcherProps,
+  LocaleSwitcherDialogProps,
+  LocaleSwitcherDropdownProps,
+  LocaleSwitcherTriggerProps,
+  LocaleGridProps,
+  LocaleCardProps,
+  LocaleMeta,
+  LocaleSwitcherBrand,
+  LocaleSwitcherLabels,
+  LocaleSwitcherSharedProps,
+  LocaleSwitcherVariant,
+} from './LocaleSwitcher';
 
 export { UserMenu } from './UserMenu';
 export type { UserMenuProps } from './UserMenu';

package/src/layouts/_components/locale-switcher/LocaleCard.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import * as React from 'react';
+import { Check } from 'lucide-react';
+
+import { LanguageFlag } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import type { LocaleMeta } from './localeMeta';
+
+export interface LocaleCardProps {
+  code: string;
+  meta: LocaleMeta;
+  active: boolean;
+  onSelect: (code: string) => void;
+  /** Compact list-row layout used on small viewports. @default false (grid tile) */
+  compact?: boolean;
+}
+
+/**
+ * One locale tile. Two flavours: spacious grid tile (desktop) and compact
+ * list row (mobile). Both share the same flag + native + english structure.
+ */
+export const LocaleCard = React.memo(function LocaleCard({
+  code,
+  meta,
+  active,
+  onSelect,
+  compact = false,
+}: LocaleCardProps) {
+  const handleClick = React.useCallback(() => {
+    onSelect(code);
+  }, [code, onSelect]);
+
+  const baseClass = cn(
+    'group relative flex w-full cursor-pointer items-center gap-3 rounded-xl border text-left transition-colors',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-1 focus-visible:ring-offset-background',
+    active
+      ? 'border-primary bg-primary/[0.06] ring-1 ring-primary/25'
+      : 'border-border/60 bg-card hover:border-primary/40 hover:bg-accent/40',
+  );
+
+  if (compact) {
+    return (
+      <button
+        type="button"
+        onClick={handleClick}
+        aria-current={active ? 'true' : undefined}
+        className={cn(baseClass, 'min-h-[56px] px-3.5 py-2.5')}
+      >
+        <LanguageFlag
+          code={code}
+          rounded
+          className="h-5 w-7 shrink-0 shadow-[0_0_0_1px_rgb(0_0_0/0.06)]"
+        />
+        <div className="min-w-0 flex-1">
+          <div className="truncate text-sm font-medium text-foreground">{meta.native}</div>
+          {meta.english && meta.english !== meta.native && (
+            <div className="truncate text-xs text-muted-foreground">{meta.english}</div>
+          )}
+        </div>
+        {active && <Check className="h-4 w-4 shrink-0 text-primary" aria-hidden />}
+      </button>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      aria-current={active ? 'true' : undefined}
+      dir={meta.rtl ? 'rtl' : undefined}
+      className={cn(baseClass, 'min-h-[88px] flex-col items-start gap-2 px-4 py-3.5 sm:min-h-[96px]')}
+    >
+      <div className="flex w-full items-center justify-between">
+        <LanguageFlag
+          code={code}
+          rounded
+          className="h-6 w-9 shadow-[0_0_0_1px_rgb(0_0_0/0.08)]"
+        />
+        {active && <Check className="h-4 w-4 text-primary" aria-hidden />}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-sm font-semibold text-foreground">{meta.native}</div>
+        {meta.english && meta.english !== meta.native && (
+          <div className="truncate text-xs text-muted-foreground">{meta.english}</div>
+        )}
+      </div>
+    </button>
+  );
+});