@djangocfg/ui-core 2.1.147 → 2.1.148

package/package.json

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

package/src/components/country-select.tsx

@@ -4,7 +4,6 @@ import { Check, ChevronsUpDown, Search, X } from 'lucide-react';
 import * as React from 'react';
 import { countries, getEmojiFlag, type TCountryCode } from 'countries-list';
 
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { cn } from '../lib/utils';
 import { Badge } from './badge';
 import { Button } from './button';
@@ -34,11 +33,11 @@ export interface CountrySelectProps {
   multiple?: boolean;
   /** Display variant: dropdown (popover) or inline (scrollable list) */
   variant?: CountrySelectVariant;
-  /** Placeholder text */
+  /** Placeholder text (default: "Select country...") */
   placeholder?: string;
-  /** Search placeholder text */
+  /** Search placeholder text (default: "Search...") */
   searchPlaceholder?: string;
-  /** Empty results text */
+  /** Empty results text (default: "No countries found") */
   emptyText?: string;
   /** Additional CSS class */
   className?: string;
@@ -58,6 +57,10 @@ export interface CountrySelectProps {
   maxHeight?: number;
   /** Show search input */
   showSearch?: boolean;
+  /** Custom label for selected count (receives count as param). Example: (count) => `${count} selected` */
+  selectedCountLabel?: (count: number) => string;
+  /** Custom label for "more items" badge (receives count as param). Example: (count) => `+${count} more` */
+  moreItemsLabel?: (count: number) => string;
 }
 
 /**
@@ -125,15 +128,16 @@ export function CountrySelect({
   excludedCountries,
   maxHeight = 300,
   showSearch = true,
+  selectedCountLabel = (count: number) => `${count} selected`,
+  moreItemsLabel = (count: number) => `+${count} more`,
 }: CountrySelectProps) {
-  const t = useTypedT<I18nTranslations>()
   const [open, setOpen] = React.useState(false)
   const [search, setSearch] = React.useState("")
 
-  // Resolve translations
-  const resolvedPlaceholder = placeholder ?? t('ui.select.placeholder')
-  const resolvedSearchPlaceholder = searchPlaceholder ?? t('ui.select.search')
-  const resolvedEmptyText = emptyText ?? t('ui.select.noResults')
+  // Resolve defaults
+  const resolvedPlaceholder = placeholder ?? 'Select country...'
+  const resolvedSearchPlaceholder = searchPlaceholder ?? 'Search...'
+  const resolvedEmptyText = emptyText ?? 'No countries found'
 
   // Build country options
   const allCountries = React.useMemo<CountryOption[]>(() => {
@@ -214,12 +218,12 @@ export function CountrySelect({
         {/* Selected count */}
         {multiple && selectedCountries.length > 0 && (
           <p className="text-sm text-muted-foreground">
-            {selectedCountries.length} {t('ui.table.selected')}
+            {selectedCountLabel(selectedCountries.length)}
           </p>
         )}
 
         {/* Country list */}
-        <ScrollArea style={{ maxHeight }} className="rounded-md border">
+        <ScrollArea style={{ height: maxHeight }} className="rounded-md border">
           <div className="p-1">
             {filteredCountries.length === 0 ? (
               <p className="text-sm text-muted-foreground text-center py-4">
@@ -306,7 +310,7 @@ export function CountrySelect({
               className="ml-1 rounded-full hover:bg-muted-foreground/20"
               onClick={(e) => handleRemove(country.code, e)}
               disabled={disabled}
-              aria-label={t('ui.actions.remove', { item: country.name })}
+              aria-label={`Remove ${country.name}`}
             >
               <X className="h-3 w-3" />
             </button>
@@ -314,12 +318,12 @@ export function CountrySelect({
         ))}
         {remaining > 0 && (
           <Badge variant="outline" className="text-xs">
-            {t('ui.select.moreItems', { count: remaining })}
+            {moreItemsLabel(remaining)}
           </Badge>
         )}
       </div>
     )
-  }, [selectedCountries, maxDisplay, resolvedPlaceholder, disabled, t, multiple, handleRemove])
+  }, [selectedCountries, maxDisplay, resolvedPlaceholder, disabled, multiple, handleRemove, moreItemsLabel])
 
   return (
     <Popover