@djangocfg/layouts 2.1.303 → 2.1.307

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>
+  );
+});

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

@@ -0,0 +1,128 @@
+'use client';
+
+import * as React from 'react';
+import { Search, X } from 'lucide-react';
+
+import { Input } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { LocaleCard } from './LocaleCard';
+import { getLocaleMeta, type LocaleMeta } from './localeMeta';
+
+export interface LocaleGridProps {
+  locale: string;
+  locales: string[];
+  onSelect: (locale: string) => void;
+  labels?: Record<string, string>;
+  searchPlaceholder?: string;
+  emptyResults?: string;
+  /** Force compact (single-column list) layout. @default false (grid on ≥sm) */
+  compact?: boolean;
+  /** Search input visibility. Auto-shown when more than `searchThreshold` locales. */
+  searchThreshold?: number;
+}
+
+interface LocaleEntry {
+  code: string;
+  meta: LocaleMeta;
+}
+
+const DEFAULT_SEARCH_THRESHOLD = 8;
+
+export function LocaleGrid({
+  locale,
+  locales,
+  onSelect,
+  labels,
+  searchPlaceholder = 'Search language…',
+  emptyResults = 'No languages found',
+  compact = false,
+  searchThreshold = DEFAULT_SEARCH_THRESHOLD,
+}: LocaleGridProps) {
+  const [query, setQuery] = React.useState('');
+
+  const entries = React.useMemo<LocaleEntry[]>(
+    () =>
+      locales.map((code) => ({
+        code,
+        meta: getLocaleMeta(code, labels),
+      })),
+    [locales, labels],
+  );
+
+  const showSearch = entries.length > searchThreshold;
+
+  const filtered = React.useMemo(() => {
+    if (!query.trim()) return entries;
+    const q = query.trim().toLowerCase();
+    return entries.filter(
+      (e) =>
+        e.code.toLowerCase().includes(q) ||
+        e.meta.native.toLowerCase().includes(q) ||
+        e.meta.english.toLowerCase().includes(q),
+    );
+  }, [entries, query]);
+
+  return (
+    <div className="flex h-full min-h-0 flex-col gap-4">
+      {showSearch && (
+        // `p-px` reserves the focus-ring offset so it isn't clipped by the
+        // scroll container below.
+        <div className="relative shrink-0 p-px">
+          <Search
+            className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
+            aria-hidden
+          />
+          <Input
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={searchPlaceholder}
+            className="h-11 rounded-xl pl-10 pr-9"
+            // Avoid forcing the keyboard open on mobile.
+            autoFocus={false}
+          />
+          {query && (
+            <button
+              type="button"
+              onClick={() => setQuery('')}
+              aria-label="Clear search"
+              className="absolute right-2.5 top-1/2 inline-flex h-7 w-7 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground"
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* `p-px` reserves the focus / active ring offset around cards. */}
+      <div className="flex-1 min-h-0 overflow-y-auto p-px">
+        {filtered.length === 0 ? (
+          <div className="flex h-full items-center justify-center py-12 text-sm text-muted-foreground">
+            {emptyResults}
+          </div>
+        ) : (
+          <div
+            className={cn(
+              'grid gap-2.5',
+              compact
+                ? 'grid-cols-1'
+                : 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+            )}
+          >
+            {filtered.map(({ code, meta }) => (
+              <LocaleCard
+                key={code}
+                code={code}
+                meta={meta}
+                active={code === locale}
+                onSelect={onSelect}
+                compact={compact}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,100 @@
+'use client';
+
+import * as React from 'react';
+
+import { useLayoutI18n } from '../../AppLayout/LayoutI18nProvider';
+
+import { LocaleSwitcherDialog } from './LocaleSwitcherDialog';
+import { LocaleSwitcherDropdown } from './LocaleSwitcherDropdown';
+import { LocaleSwitcherTrigger } from './LocaleSwitcherTrigger';
+import type { LocaleSwitcherVariant } from './types';
+
+export interface LocaleSwitcherProps {
+  /**
+   * UI flavour.
+   * - `dialog` (default): fullscreen language picker with brand header, search, grid.
+   * - `dropdown`: compact dropdown menu — best for navbars and dense rails.
+   */
+  variant?: LocaleSwitcherVariant;
+  /** Override / add native names per locale (`{ es: 'Español' }`). */
+  labels?: Record<string, string>;
+
+  // Trigger styling — applies to both variants.
+  showCode?: boolean;
+  buttonVariant?: 'ghost' | 'outline' | 'default';
+  size?: 'sm' | 'default' | 'lg' | 'icon';
+  /** Show the leading Globe icon when no flag is rendered. @default true */
+  showIcon?: boolean;
+  /** Show the country flag in the trigger. @default true */
+  showFlag?: boolean;
+  /** Show the label text in the trigger. @default true */
+  showTriggerLabel?: boolean;
+  /** Extra trigger className. */
+  className?: string;
+}
+
+/**
+ * Locale switcher with two flavours: a compact dropdown and a fullscreen
+ * dialog. Pulls `locale` / `locales` / `onChange` / `brand` / `dialogLabels`
+ * from `LayoutI18nProvider` (mounted by `BaseApp`) — no need to thread them
+ * through props.
+ */
+export function LocaleSwitcher({
+  variant = 'dialog',
+  labels,
+  className,
+  showCode = false,
+  buttonVariant = 'ghost',
+  size = 'sm',
+  showIcon = true,
+  showFlag = true,
+  showTriggerLabel = true,
+}: LocaleSwitcherProps) {
+  const i18n = useLayoutI18n();
+  const [open, setOpen] = React.useState(false);
+
+  if (variant === 'dropdown') {
+    return (
+      <LocaleSwitcherDropdown
+        locale={i18n.locale}
+        locales={i18n.locales}
+        onChange={i18n.onLocaleChange}
+        labels={labels}
+        className={className}
+        showCode={showCode}
+        variant={buttonVariant}
+        size={size}
+        showIcon={showIcon}
+        showFlag={showFlag}
+        showTriggerLabel={showTriggerLabel}
+      />
+    );
+  }
+
+  return (
+    <>
+      <LocaleSwitcherTrigger
+        locale={i18n.locale}
+        labels={labels}
+        showFlag={showFlag}
+        showLabel={showTriggerLabel}
+        showCode={showCode}
+        variant={buttonVariant}
+        size={size}
+        className={className}
+        ariaLabel={i18n.dialogLabels?.triggerLabel ?? 'Change language'}
+        onClick={() => setOpen(true)}
+      />
+      <LocaleSwitcherDialog
+        locale={i18n.locale}
+        locales={i18n.locales}
+        onChange={i18n.onLocaleChange}
+        labels={labels}
+        i18nLabels={i18n.dialogLabels}
+        brand={i18n.brand}
+        open={open}
+        onOpenChange={setOpen}
+      />
+    </>
+  );
+}