@djangocfg/ui-core 2.1.162 → 2.1.164

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.162",
+  "version": "2.1.164",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -76,7 +76,7 @@
     "playground": "playground dev"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.162",
+    "@djangocfg/i18n": "^2.1.164",
     "react-device-detect": "^2.2.3",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -138,9 +138,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.162",
+    "@djangocfg/i18n": "^2.1.164",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.162",
+    "@djangocfg/typescript-config": "^2.1.164",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/index.ts

@@ -23,7 +23,7 @@ export { MultiSelectPro } from './multi-select-pro';
 export type { MultiSelectProOption, MultiSelectProGroup, MultiSelectProProps, MultiSelectProRef, AnimationConfig, ResponsiveConfig } from './multi-select-pro';
 export { CountrySelect, getEmojiFlag } from './country-select';
 export type { CountrySelectProps, CountrySelectVariant, CountryOption, TCountryCode } from './country-select';
-export { LanguageSelect } from './language-select';
+export { LanguageSelect, getLanguageFlag, LANGUAGE_TO_COUNTRY } from './language-select';
 export type { LanguageSelectProps, LanguageSelectVariant, LanguageOption, TLanguageCode } from './language-select';
 export { MultiSelectProAsync } from './multi-select-pro/async';
 export type { MultiSelectProAsyncProps } from './multi-select-pro/async';
@@ -48,7 +48,7 @@ export type { PortalProps } from './portal';
 // Overlay Components
 export { Dialog, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from './dialog';
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from './alert-dialog';
-export { Popover, PopoverContent, PopoverTrigger } from './popover';
+export { Popover, PopoverContent, PopoverTrigger, PopoverAnchor, PopoverArrow } from './popover';
 export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription } from './sheet';
 export { Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription } from './drawer';
 export { ResponsiveSheet, ResponsiveSheetContent, ResponsiveSheetHeader, ResponsiveSheetTitle, ResponsiveSheetDescription, ResponsiveSheetFooter } from './responsive-sheet';

package/src/components/language-select.tsx

@@ -2,9 +2,274 @@
 
 import { Check, ChevronsUpDown, Search, X } from 'lucide-react';
 import * as React from 'react';
-import { languages, type TLanguageCode } from 'countries-list';
+import { languages, getEmojiFlag, type TLanguageCode, type TCountryCode } from 'countries-list';
 
 import { cn } from '../lib/utils';
+
+/**
+ * Mapping of language codes (ISO 639-1) to primary country codes (ISO 3166-1 alpha-2)
+ * Used to display country flag emoji for each language
+ *
+ * Note: Some languages are spoken in multiple countries, we pick the most representative one.
+ */
+const LANGUAGE_TO_COUNTRY: Partial<Record<TLanguageCode, TCountryCode>> = {
+  // Major world languages
+  en: 'US', // English → United States
+  zh: 'CN', // Chinese → China
+  es: 'ES', // Spanish → Spain
+  ar: 'SA', // Arabic → Saudi Arabia
+  hi: 'IN', // Hindi → India
+  bn: 'BD', // Bengali → Bangladesh
+  pt: 'BR', // Portuguese → Brazil
+  ru: 'RU', // Russian → Russia
+  ja: 'JP', // Japanese → Japan
+  de: 'DE', // German → Germany
+  fr: 'FR', // French → France
+  ko: 'KR', // Korean → South Korea
+  it: 'IT', // Italian → Italy
+  tr: 'TR', // Turkish → Turkey
+  vi: 'VN', // Vietnamese → Vietnam
+  pl: 'PL', // Polish → Poland
+  uk: 'UA', // Ukrainian → Ukraine
+  nl: 'NL', // Dutch → Netherlands
+
+  // European languages
+  el: 'GR', // Greek → Greece
+  cs: 'CZ', // Czech → Czech Republic
+  sv: 'SE', // Swedish → Sweden
+  hu: 'HU', // Hungarian → Hungary
+  ro: 'RO', // Romanian → Romania
+  da: 'DK', // Danish → Denmark
+  fi: 'FI', // Finnish → Finland
+  no: 'NO', // Norwegian → Norway
+  nb: 'NO', // Norwegian Bokmål → Norway
+  nn: 'NO', // Norwegian Nynorsk → Norway
+  sk: 'SK', // Slovak → Slovakia
+  bg: 'BG', // Bulgarian → Bulgaria
+  hr: 'HR', // Croatian → Croatia
+  sr: 'RS', // Serbian → Serbia
+  sl: 'SI', // Slovenian → Slovenia
+  et: 'EE', // Estonian → Estonia
+  lv: 'LV', // Latvian → Latvia
+  lt: 'LT', // Lithuanian → Lithuania
+  be: 'BY', // Belarusian → Belarus
+  mk: 'MK', // Macedonian → North Macedonia
+  sq: 'AL', // Albanian → Albania
+  is: 'IS', // Icelandic → Iceland
+  mt: 'MT', // Maltese → Malta
+  ga: 'IE', // Irish → Ireland
+  cy: 'GB', // Welsh → United Kingdom
+  gd: 'GB', // Scottish Gaelic → United Kingdom
+  br: 'FR', // Breton → France
+  lb: 'LU', // Luxembourgish → Luxembourg
+  fo: 'FO', // Faroese → Faroe Islands
+  bs: 'BA', // Bosnian → Bosnia
+
+  // Spanish regional
+  eu: 'ES', // Basque → Spain
+  ca: 'ES', // Catalan → Spain
+  gl: 'ES', // Galician → Spain
+
+  // Asian languages
+  th: 'TH', // Thai → Thailand
+  id: 'ID', // Indonesian → Indonesia
+  ms: 'MY', // Malay → Malaysia
+  tl: 'PH', // Tagalog → Philippines
+  jv: 'ID', // Javanese → Indonesia
+  su: 'ID', // Sundanese → Indonesia
+
+  // South Asian languages
+  ta: 'IN', // Tamil → India
+  te: 'IN', // Telugu → India
+  mr: 'IN', // Marathi → India
+  gu: 'IN', // Gujarati → India
+  kn: 'IN', // Kannada → India
+  ml: 'IN', // Malayalam → India
+  pa: 'IN', // Punjabi → India
+  or: 'IN', // Odia → India
+  as: 'IN', // Assamese → India
+  ne: 'NP', // Nepali → Nepal
+  si: 'LK', // Sinhala → Sri Lanka
+  dz: 'BT', // Dzongkha → Bhutan
+
+  // Middle East & Central Asia
+  fa: 'IR', // Persian/Farsi → Iran
+  ur: 'PK', // Urdu → Pakistan
+  ps: 'AF', // Pashto → Afghanistan
+  he: 'IL', // Hebrew → Israel
+  ku: 'IQ', // Kurdish → Iraq
+  hy: 'AM', // Armenian → Armenia
+  ka: 'GE', // Georgian → Georgia
+  az: 'AZ', // Azerbaijani → Azerbaijan
+  kk: 'KZ', // Kazakh → Kazakhstan
+  uz: 'UZ', // Uzbek → Uzbekistan
+  tg: 'TJ', // Tajik → Tajikistan
+  ky: 'KG', // Kyrgyz → Kyrgyzstan
+  tk: 'TM', // Turkmen → Turkmenistan
+  mn: 'MN', // Mongolian → Mongolia
+
+  // Southeast Asian
+  my: 'MM', // Burmese → Myanmar
+  km: 'KH', // Khmer → Cambodia
+  lo: 'LA', // Lao → Laos
+
+  // African languages
+  sw: 'KE', // Swahili → Kenya
+  am: 'ET', // Amharic → Ethiopia
+  ha: 'NG', // Hausa → Nigeria
+  yo: 'NG', // Yoruba → Nigeria
+  ig: 'NG', // Igbo → Nigeria
+  zu: 'ZA', // Zulu → South Africa
+  xh: 'ZA', // Xhosa → South Africa
+  af: 'ZA', // Afrikaans → South Africa
+  st: 'ZA', // Southern Sotho → South Africa
+  tn: 'BW', // Tswana → Botswana
+  sn: 'ZW', // Shona → Zimbabwe
+  rw: 'RW', // Kinyarwanda → Rwanda
+  rn: 'BI', // Kirundi → Burundi
+  so: 'SO', // Somali → Somalia
+  ti: 'ER', // Tigrinya → Eritrea
+  mg: 'MG', // Malagasy → Madagascar
+  ny: 'MW', // Chichewa → Malawi
+  lg: 'UG', // Luganda → Uganda
+  wo: 'SN', // Wolof → Senegal
+  ff: 'SN', // Fulah → Senegal
+  bm: 'ML', // Bambara → Mali
+
+  // Caribbean & Creole
+  ht: 'HT', // Haitian Creole → Haiti
+
+  // Pacific
+  mi: 'NZ', // Maori → New Zealand
+  sm: 'WS', // Samoan → Samoa
+  to: 'TO', // Tongan → Tonga
+  fj: 'FJ', // Fijian → Fiji
+  mh: 'MH', // Marshallese → Marshall Islands
+  ty: 'PF', // Tahitian → French Polynesia
+  na: 'NR', // Nauruan → Nauru
+  bi: 'VU', // Bislama → Vanuatu
+  ch: 'GU', // Chamorro → Guam
+
+  // Other constructed/historical
+  // Note: Constructed languages have no country, using symbolic mappings
+  // eo: Esperanto - no country flag available
+  la: 'VA', // Latin → Vatican
+  // ia: Interlingua - no country flag available
+  // ie: Interlingue - no country flag available
+  // io: Ido - no country flag available
+  // vo: Volapük - no country flag available
+
+  // China minority languages
+  bo: 'CN', // Tibetan → China
+  ug: 'CN', // Uyghur → China
+  za: 'CN', // Zhuang → China
+  ii: 'CN', // Sichuan Yi → China
+
+  // South Asia
+  dv: 'MV', // Dhivehi → Maldives
+  ks: 'IN', // Kashmiri → India
+  sd: 'PK', // Sindhi → Pakistan
+  sa: 'IN', // Sanskrit → India
+  pi: 'IN', // Pali → India (historical Buddhist)
+
+  // Baltic-Finnic
+  fy: 'NL', // Western Frisian → Netherlands
+
+  // Caucasian
+  os: 'RU', // Ossetic → Russia
+  ce: 'RU', // Chechen → Russia
+  av: 'RU', // Avar → Russia
+  ab: 'GE', // Abkhazian → Georgia
+
+  // Turkic in Russia
+  tt: 'RU', // Tatar → Russia
+  ba: 'RU', // Bashkir → Russia
+  cv: 'RU', // Chuvash → Russia
+
+  // Russia minority
+  kv: 'RU', // Komi → Russia
+
+  // Africa additional
+  aa: 'ET', // Afar → Ethiopia
+  ak: 'GH', // Akan → Ghana
+  ee: 'GH', // Ewe → Ghana
+  tw: 'GH', // Twi → Ghana
+  ln: 'CD', // Lingala → DR Congo
+  lu: 'CD', // Luba-Katanga → DR Congo
+  kg: 'CD', // Kongo → DR Congo
+  sg: 'CF', // Sango → Central African Republic
+  ki: 'KE', // Kikuyu → Kenya
+  om: 'ET', // Oromo → Ethiopia
+  kr: 'NE', // Kanuri → Niger
+  kj: 'NA', // Kuanyama → Namibia
+  hz: 'NA', // Herero → Namibia
+  ng: 'NA', // Ndonga → Namibia
+  nd: 'ZW', // North Ndebele → Zimbabwe
+  nr: 'ZA', // South Ndebele → South Africa
+  ss: 'SZ', // Swati → Eswatini (Swaziland)
+  ts: 'ZA', // Tsonga → South Africa
+  ve: 'ZA', // Venda → South Africa
+
+  // Americas indigenous
+  gn: 'PY', // Guarani → Paraguay
+  qu: 'PE', // Quechua → Peru
+  ay: 'BO', // Aymara → Bolivia
+  nv: 'US', // Navajo → United States
+  oj: 'CA', // Ojibwa → Canada
+  cr: 'CA', // Cree → Canada
+  iu: 'CA', // Inuktitut → Canada
+  ik: 'US', // Inupiak → United States (Alaska)
+
+  // Greenland
+  kl: 'GL', // Greenlandic → Greenland
+
+  // Other European
+  an: 'ES', // Aragonese → Spain
+  wa: 'BE', // Walloon → Belgium
+  li: 'NL', // Limburgian → Netherlands
+
+  // Slavic historical
+  cu: 'BG', // Old Church Slavonic → Bulgaria
+  mo: 'MD', // Moldovan → Moldova
+
+  // Jewish
+  yi: 'IL', // Yiddish → Israel
+
+  // Bihari (group)
+  bh: 'IN', // Bihari → India
+
+  // Papua New Guinea
+  ho: 'PG', // Hiri Motu → Papua New Guinea
+
+  // Other Slavic
+  sh: 'RS', // Serbo-Croatian → Serbia
+
+  // Romance
+  oc: 'FR', // Occitan → France
+  co: 'FR', // Corsican → France
+  sc: 'IT', // Sardinian → Italy
+  rm: 'CH', // Romansh → Switzerland
+
+  // Germanic
+  gv: 'IM', // Manx → Isle of Man
+  kw: 'GB', // Cornish → United Kingdom
+
+  // Uralic
+  se: 'NO', // Northern Sami → Norway
+
+  // Note: ch (Chamorro) already defined above in Pacific section
+};
+
+/**
+ * Get emoji flag for a language code
+ * @param languageCode - ISO 639-1 language code (e.g., 'en', 'ru', 'ko')
+ * @returns Emoji flag string or empty string if no mapping exists
+ */
+export function getLanguageFlag(languageCode: TLanguageCode | string): string {
+  const countryCode = LANGUAGE_TO_COUNTRY[languageCode as TLanguageCode];
+  if (!countryCode) return '';
+  return getEmojiFlag(countryCode);
+}
 import { Badge } from './badge';
 import { Button } from './button';
 import { Checkbox } from './checkbox';
@@ -19,6 +284,8 @@ export interface LanguageOption {
   code: TLanguageCode;
   name: string;
   native: string;
+  /** Emoji flag (if available) */
+  flag: string;
 }
 
 export type LanguageSelectVariant = 'dropdown' | 'inline';
@@ -52,6 +319,10 @@ export interface LanguageSelectProps {
   allowedLanguages?: TLanguageCode[];
   /** Exclude specific language codes */
   excludedLanguages?: TLanguageCode[];
+  /** Show flag emoji (default: true) */
+  showFlag?: boolean;
+  /** Show language code (default: false) */
+  showCode?: boolean;
   /** Max height for inline variant */
   maxHeight?: number;
   /** Show search input */
@@ -125,6 +396,8 @@ export function LanguageSelect({
   showNativeName = false,
   allowedLanguages,
   excludedLanguages,
+  showFlag = true,
+  showCode = false,
   maxHeight = 300,
   showSearch = true,
   selectedCountLabel = (count: number) => `${count} selected`,
@@ -155,6 +428,7 @@ export function LanguageSelect({
         code,
         name: getLanguageName?.(code) ?? languages[code].name,
         native: languages[code].native,
+        flag: getLanguageFlag(code),
       }))
       .sort((a, b) => a.name.localeCompare(b.name));
   }, [getLanguageName, allowedLanguages, excludedLanguages]);
@@ -231,8 +505,17 @@ export function LanguageSelect({
               filteredLanguages.map((language) => {
                 const isSelected = value.includes(language.code);
                 return (
-                  <label
+                  <div
                     key={language.code}
+                    role="button"
+                    tabIndex={disabled ? -1 : 0}
+                    onClick={() => !disabled && handleSelect(language.code)}
+                    onKeyDown={(e) => {
+                      if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
+                        e.preventDefault();
+                        handleSelect(language.code);
+                      }
+                    }}
                     className={cn(
                       'flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer',
                       'hover:bg-accent/50 transition-colors',
@@ -245,6 +528,7 @@ export function LanguageSelect({
                         checked={isSelected}
                         onCheckedChange={() => !disabled && handleSelect(language.code)}
                         disabled={disabled}
+                        onClick={(e) => e.stopPropagation()}
                       />
                     ) : (
                       <div className={cn(
@@ -254,6 +538,9 @@ export function LanguageSelect({
                         {isSelected && <div className="h-2 w-2 rounded-full bg-primary-foreground" />}
                       </div>
                     )}
+                    {showFlag && language.flag && (
+                      <span className="text-lg">{language.flag}</span>
+                    )}
                     <div className="flex flex-col flex-1 min-w-0">
                       <span className={cn('text-sm', isSelected && 'font-medium')}>
                         {language.name}
@@ -264,10 +551,12 @@ export function LanguageSelect({
                         </span>
                       )}
                     </div>
-                    <span className="text-xs text-muted-foreground uppercase">
-                      {language.code}
-                    </span>
-                  </label>
+                    {showCode && (
+                      <span className="text-xs text-muted-foreground uppercase">
+                        {language.code}
+                      </span>
+                    )}
+                  </div>
                 );
               })
             )}
@@ -287,7 +576,8 @@ export function LanguageSelect({
       const language = selectedLanguages[0]!;
       return (
         <div className="flex items-center gap-2">
-          <span className="text-xs text-muted-foreground uppercase">{language.code}</span>
+          {showFlag && language.flag && <span>{language.flag}</span>}
+          {showCode && <span className="text-xs text-muted-foreground uppercase">{language.code}</span>}
           <span>{language.name}</span>
         </div>
       );
@@ -304,7 +594,8 @@ export function LanguageSelect({
             variant="secondary"
             className="mr-1 text-xs"
           >
-            <span className="mr-1 text-muted-foreground uppercase">{language.code}</span>
+            {showFlag && language.flag && <span className="mr-1">{language.flag}</span>}
+            {showCode && <span className="mr-1 text-muted-foreground uppercase">{language.code}</span>}
             {language.name}
             <button
               className="ml-1 rounded-full hover:bg-muted-foreground/20"
@@ -323,7 +614,7 @@ export function LanguageSelect({
         )}
       </div>
     )
-  }, [selectedLanguages, maxDisplay, resolvedPlaceholder, disabled, multiple, handleRemove, moreItemsLabel])
+  }, [selectedLanguages, maxDisplay, resolvedPlaceholder, disabled, multiple, handleRemove, moreItemsLabel, showFlag, showCode])
 
   return (
     <Popover
@@ -379,6 +670,9 @@ export function LanguageSelect({
                           isSelected ? "opacity-100" : "opacity-0"
                         )}
                       />
+                      {showFlag && language.flag && (
+                        <span className="mr-2 text-lg">{language.flag}</span>
+                      )}
                       <div className="flex flex-col flex-1 min-w-0">
                         <span className="truncate">{language.name}</span>
                         {showNativeName && language.native !== language.name && (
@@ -387,9 +681,11 @@ export function LanguageSelect({
                           </span>
                         )}
                       </div>
-                      <span className="text-xs text-muted-foreground uppercase ml-2">
-                        {language.code}
-                      </span>
+                      {showCode && (
+                        <span className="text-xs text-muted-foreground uppercase ml-2">
+                          {language.code}
+                        </span>
+                      )}
                     </CommandItem>
                   )
                 })}
@@ -404,3 +700,4 @@ export function LanguageSelect({
 
 // Re-export types for convenience
 export type { TLanguageCode } from 'countries-list';
+export { LANGUAGE_TO_COUNTRY };

package/src/components/popover.tsx

@@ -31,4 +31,16 @@ const PopoverContent = React.forwardRef<
 ))
 PopoverContent.displayName = PopoverPrimitive.Content.displayName
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+const PopoverArrow = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Arrow>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>
+>(({ className, ...props }, ref) => (
+  <PopoverPrimitive.Arrow
+    ref={ref}
+    className={cn('fill-popover', className)}
+    {...props}
+  />
+))
+PopoverArrow.displayName = PopoverPrimitive.Arrow.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverArrow }