@djangocfg/ui-core 2.1.307 → 2.1.308

package/README.md

@@ -113,7 +113,7 @@ import { Button, Dialog, Table } from '@djangocfg/ui-core';
 ### Specialized (9)
 `Kbd` `TokenIcon` `Item` `Portal` `ImageWithFallback` `CopyButton` `CopyField` `Flag` `LanguageFlag`
 
-**`Flag`** / **`LanguageFlag`** — SVG country flags (3:2 aspect) backed by `country-flag-icons`. `Flag` takes an ISO 3166-1 alpha-2 `countryCode`; `LanguageFlag` resolves a locale (`'en'`, `'pt-BR'`, `'zh_CN'`) to a country and renders the flag. Both render `null` for unknown codes.
+**`Flag`** / **`LanguageFlag`** — SVG country flags (3:2 aspect) backed by `country-flag-icons`. `Flag` takes an ISO 3166-1 alpha-2 `countryCode` and covers every ISO country (~270 entries); `LanguageFlag` resolves a locale (`'en'`, `'pt-BR'`, `'zh_CN'`) to a country and renders the flag. Both render `null` for unknown codes. Used by `LocaleSwitcher`, `PhoneInput`, and `CountrySelect` — no emoji fallbacks anywhere.
 
 ```tsx
 <Flag countryCode="JP" rounded className="h-3 w-4" />

package/package.json

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

package/src/components/forms/phone-input/index.tsx

@@ -13,13 +13,7 @@ import { cn } from '../../../lib';
 import {
     DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger
 } from '../../navigation/dropdown-menu';
-
-// Generate country flag emoji from country code
-const getCountryFlag = (countryCode: CountryCode): string => {
-  return countryCode
-    .toUpperCase()
-    .replace(/./g, char => String.fromCodePoint(char.charCodeAt(0) + 127397))
-}
+import { Flag } from '../../specialized/flag';
 
 // Get country name from country code using browser's built-in Intl.DisplayNames
 const getCountryName = (countryCode: CountryCode): string => {
@@ -37,7 +31,6 @@ const getAllCountries = () => {
   return getCountries().map(countryCode => ({
     code: countryCode,
     name: getCountryName(countryCode),
-    flag: getCountryFlag(countryCode),
     dialCode: `+${getCountryCallingCode(countryCode)}`
   })).sort((a, b) => a.name.localeCompare(b.name))
 }
@@ -215,7 +208,7 @@ const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
               className="h-10 px-3 rounded-r-none border-r-0 flex items-center gap-2"
               disabled={disabled}
             >
-              <span className="text-base">{currentCountry.flag}</span>
+              <Flag countryCode={currentCountry.code} rounded className="h-3 w-4" />
               <span className="text-sm font-mono">{currentCountry.dialCode}</span>
               <ChevronDown className="h-3 w-3 opacity-50" />
             </Button>
@@ -251,7 +244,7 @@ const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
                       index === highlightedIndex && "bg-accent"
                     )}
                   >
-                    <span className="text-base">{country.flag}</span>
+                    <Flag countryCode={country.code} rounded className="h-3 w-4" />
                     <span className="flex-1 text-sm">{country.name}</span>
                     <span className="text-sm font-mono text-muted-foreground">
                       {country.dialCode}

package/src/components/select/country-select.tsx

@@ -2,7 +2,7 @@
 
 import { Check, ChevronsUpDown, Search, X } from 'lucide-react';
 import * as React from 'react';
-import { countries, getEmojiFlag, type TCountryCode } from 'countries-list';
+import { countries, type TCountryCode } from 'countries-list';
 
 import { cn } from '../../lib/utils';
 import { Badge } from '../data/badge';
@@ -14,12 +14,12 @@ import {
 import { Input } from '../forms/input';
 import { Popover, PopoverContent, PopoverTrigger } from '../overlay/popover';
 import { ScrollArea } from '../layout/scroll-area';
+import { Flag } from '../specialized/flag';
 
 export interface CountryOption {
   code: TCountryCode;
   name: string;
   native: string;
-  emoji: string;
 }
 
 export type CountrySelectVariant = 'dropdown' | 'inline';
@@ -64,7 +64,7 @@ export interface CountrySelectProps {
 }
 
 /**
- * Country Select component with emoji flags
+ * Country Select component with SVG flags
  *
  * Supports:
  * - Single and multiple selection
@@ -156,7 +156,6 @@ export function CountrySelect({
         code,
         name: getCountryName?.(code) ?? countries[code].name,
         native: countries[code].native,
-        emoji: getEmojiFlag(code),
       }))
       .sort((a, b) => a.name.localeCompare(b.name));
   }, [getCountryName, allowedCountries, excludedCountries]);
@@ -256,7 +255,7 @@ export function CountrySelect({
                         {isSelected && <div className="h-2 w-2 rounded-full bg-primary-foreground" />}
                       </div>
                     )}
-                    <span className="text-lg">{country.emoji}</span>
+                    <Flag countryCode={country.code} rounded className="h-4 w-6 shrink-0" />
                     <div className="flex flex-col flex-1 min-w-0">
                       <span className={cn('text-sm', isSelected && 'font-medium')}>
                         {country.name}
@@ -287,7 +286,7 @@ export function CountrySelect({
       const country = selectedCountries[0]!;
       return (
         <div className="flex items-center gap-2">
-          <span>{country.emoji}</span>
+          <Flag countryCode={country.code} rounded className="h-3 w-4 shrink-0" />
           <span>{country.name}</span>
         </div>
       );
@@ -304,7 +303,7 @@ export function CountrySelect({
             variant="secondary"
             className="mr-1 text-xs"
           >
-            <span className="mr-1">{country.emoji}</span>
+            <Flag countryCode={country.code} rounded className="mr-1 h-3 w-4 shrink-0" />
             {country.name}
             <button
               className="ml-1 rounded-full hover:bg-muted-foreground/20"
@@ -379,7 +378,7 @@ export function CountrySelect({
                           isSelected ? "opacity-100" : "opacity-0"
                         )}
                       />
-                      <span className="mr-2 text-lg">{country.emoji}</span>
+                      <Flag countryCode={country.code} rounded className="mr-2 h-4 w-6 shrink-0" />
                       <div className="flex flex-col flex-1 min-w-0">
                         <span className="truncate">{country.name}</span>
                         {showNativeName && country.native !== country.name && (
@@ -402,4 +401,3 @@ export function CountrySelect({
 
 // Re-export types for convenience
 export type { TCountryCode } from 'countries-list';
-export { getEmojiFlag } from 'countries-list';

package/src/components/specialized/flag/flag-map.ts

@@ -1,38 +1,15 @@
 /**
  * Static map: ISO 3166-1 alpha-2 country code → SVG React component.
  *
- * Only the country codes referenced by `LANGUAGE_TO_COUNTRY` are imported
- * — keeps bundle size predictable while covering every locale supported
- * by the language picker. Add an entry here when a new locale joins the
- * mapping and its country code is not already in the list.
+ * Re-exports every flag from `country-flag-icons` (~270 entries) so the
+ * `Flag` component covers every consumer — locale switchers, phone-input
+ * country picker, country select, etc. Tree-shaking keeps unused flags out
+ * of the final bundle when consumers reach for `<Flag countryCode>`
+ * directly with a constant code.
  */
 
 import type * as React from 'react';
-
-import {
-  AF, AL, AM, AZ,
-  BA, BD, BE, BG, BI, BO, BR, BT, BW, BY,
-  CA, CD, CF, CH, CN, CZ,
-  DE, DK,
-  EE, ER, ES, ET,
-  FI, FJ, FO, FR,
-  GB, GE, GH, GL, GR, GU,
-  HR, HT, HU,
-  ID, IE, IL, IM, IN, IQ, IR, IS, IT,
-  JP,
-  KE, KG, KH, KR, KZ,
-  LA, LK, LT, LU, LV,
-  MD, MG, MH, MK, ML, MM, MN, MT, MV, MW, MY,
-  NA, NE, NG, NL, NO, NP, NR, NZ,
-  PE, PF, PG, PH, PK, PL, PY,
-  RO, RS, RU, RW,
-  SA, SE, SI, SK, SN, SO, SZ,
-  TH, TJ, TM, TO, TR,
-  UA, UG, US, UZ,
-  VA, VN, VU,
-  WS,
-  ZA, ZW,
-} from 'country-flag-icons/react/3x2';
+import * as Flags from 'country-flag-icons/react/3x2';
 
 /**
  * `country-flag-icons` types its components against `HTMLSVGElement`
@@ -42,27 +19,4 @@ import {
  */
 export type FlagSvgComponent = (props: React.SVGProps<SVGSVGElement> & React.HTMLAttributes<SVGSVGElement>) => React.JSX.Element;
 
-export const FLAG_COMPONENTS = {
-  AF, AL, AM, AZ,
-  BA, BD, BE, BG, BI, BO, BR, BT, BW, BY,
-  CA, CD, CF, CH, CN, CZ,
-  DE, DK,
-  EE, ER, ES, ET,
-  FI, FJ, FO, FR,
-  GB, GE, GH, GL, GR, GU,
-  HR, HT, HU,
-  ID, IE, IL, IM, IN, IQ, IR, IS, IT,
-  JP,
-  KE, KG, KH, KR, KZ,
-  LA, LK, LT, LU, LV,
-  MD, MG, MH, MK, ML, MM, MN, MT, MV, MW, MY,
-  NA, NE, NG, NL, NO, NP, NR, NZ,
-  PE, PF, PG, PH, PK, PL, PY,
-  RO, RS, RU, RW,
-  SA, SE, SI, SK, SN, SO, SZ,
-  TH, TJ, TM, TO, TR,
-  UA, UG, US, UZ,
-  VA, VN, VU,
-  WS,
-  ZA, ZW,
-} as unknown as Record<string, FlagSvgComponent>;
+export const FLAG_COMPONENTS = Flags as unknown as Record<string, FlagSvgComponent>;