@djangocfg/ui-core 2.1.145 → 2.1.147

package/README.md

@@ -1,6 +1,6 @@
 # @djangocfg/ui-core
 
-Pure React UI library with 60 components built on Radix UI + Tailwind CSS v4.
+Pure React UI library with 61 components built on Radix UI + Tailwind CSS v4.
 
 **No Next.js dependencies** — works with Electron, Vite, CRA, and any React environment.
 
@@ -23,8 +23,8 @@ pnpm add @djangocfg/ui-core
 
 ## Components (60)
 
-### Forms (16)
-`Label` `Button` `ButtonLink` `Input` `Checkbox` `RadioGroup` `Select` `Textarea` `Switch` `Slider` `Combobox` `MultiSelect` `InputOTP` `PhoneInput` `Form` `Field`
+### Forms (17)
+`Label` `Button` `ButtonLink` `Input` `Checkbox` `RadioGroup` `Select` `Textarea` `Switch` `Slider` `Combobox` `MultiSelect` `CountrySelect` `InputOTP` `PhoneInput` `Form` `Field`
 
 ### Layout (8)
 `Card` `Separator` `Skeleton` `AspectRatio` `Sticky` `ScrollArea` `Resizable` `Section`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.145",
+  "version": "2.1.147",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -66,7 +66,8 @@
     "playground": "playground dev"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.145",
+    "@djangocfg/i18n": "^2.1.147",
+    "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
     "react": "^19.0.0",
@@ -74,8 +75,7 @@
     "react-hook-form": "^7.69.0",
     "tailwindcss": "^4.1.18",
     "zod": "^4.0.0",
-    "zustand": "^5.0.0",
-    "consola": "^3.4.2"
+    "zustand": "^5.0.0"
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
@@ -111,8 +111,10 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "1.1.1",
+    "countries-list": "^3.2.2",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "8.6.0",
+    "i18n-iso-countries": "^7.14.0",
     "input-otp": "1.4.2",
     "libphonenumber-js": "^1.12.24",
     "react-day-picker": "9.11.1",
@@ -124,9 +126,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.145",
+    "@djangocfg/i18n": "^2.1.147",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.145",
+    "@djangocfg/typescript-config": "^2.1.147",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

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

@@ -0,0 +1,261 @@
+import { useState } from 'react';
+import { defineStory } from '@djangocfg/playground';
+import { CountrySelect, type TCountryCode } from './country-select';
+import { Label } from './label';
+
+export default defineStory({
+  title: 'Core/CountrySelect',
+  component: CountrySelect,
+  description: 'Country selector with emoji flags. Supports dropdown and inline variants, single and multiple selection.',
+});
+
+// ============================================================================
+// Dropdown Variants
+// ============================================================================
+
+export const SingleDropdown = () => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Select country</Label>
+      <CountrySelect
+        value={value}
+        onChange={setValue}
+        placeholder="Choose a country..."
+      />
+      {value.length > 0 && (
+        <p className="text-sm text-muted-foreground">Selected: {value[0]}</p>
+      )}
+    </div>
+  );
+};
+
+export const MultipleDropdown = () => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Select countries</Label>
+      <CountrySelect
+        multiple
+        value={value}
+        onChange={setValue}
+        placeholder="Choose countries..."
+      />
+      {value.length > 0 && (
+        <p className="text-sm text-muted-foreground">Selected: {value.join(', ')}</p>
+      )}
+    </div>
+  );
+};
+
+export const WithDefaultValue = () => {
+  const [value, setValue] = useState<string[]>(['US', 'GB', 'DE']);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Preselected countries</Label>
+      <CountrySelect
+        multiple
+        value={value}
+        onChange={setValue}
+      />
+    </div>
+  );
+};
+
+export const WithNativeNames = () => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>With native names</Label>
+      <CountrySelect
+        multiple
+        value={value}
+        onChange={setValue}
+        showNativeName
+      />
+    </div>
+  );
+};
+
+// ============================================================================
+// Inline Variants
+// ============================================================================
+
+export const InlineSingle = () => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Select your country</Label>
+      <CountrySelect
+        variant="inline"
+        value={value}
+        onChange={setValue}
+        maxHeight={250}
+      />
+      {value.length > 0 && (
+        <p className="text-sm text-muted-foreground">Selected: {value[0]}</p>
+      )}
+    </div>
+  );
+};
+
+export const InlineMultiple = () => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Select target markets</Label>
+      <CountrySelect
+        variant="inline"
+        multiple
+        value={value}
+        onChange={setValue}
+        maxHeight={300}
+      />
+    </div>
+  );
+};
+
+export const InlineWithNativeNames = () => {
+  const [value, setValue] = useState<string[]>(['KR', 'JP']);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Countries with native names</Label>
+      <CountrySelect
+        variant="inline"
+        multiple
+        value={value}
+        onChange={setValue}
+        showNativeName
+        maxHeight={300}
+      />
+    </div>
+  );
+};
+
+export const InlineNoSearch = () => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Without search</Label>
+      <CountrySelect
+        variant="inline"
+        multiple
+        value={value}
+        onChange={setValue}
+        showSearch={false}
+        maxHeight={200}
+      />
+    </div>
+  );
+};
+
+// ============================================================================
+// Filtered Countries
+// ============================================================================
+
+const CIS_COUNTRIES: TCountryCode[] = ['RU', 'KZ', 'UZ', 'KG', 'TJ', 'TM', 'AZ', 'AM', 'GE', 'BY', 'MD', 'UA'];
+const ASIAN_AUTO_MARKETS: TCountryCode[] = ['KR', 'JP', 'CN', 'TH', 'MY', 'ID', 'VN', 'PH'];
+
+export const FilteredCISCountries = () => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>CIS Countries only</Label>
+      <CountrySelect
+        variant="inline"
+        multiple
+        value={value}
+        onChange={setValue}
+        allowedCountries={CIS_COUNTRIES}
+        maxHeight={300}
+      />
+    </div>
+  );
+};
+
+export const FilteredAsianMarkets = () => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Asian Auto Markets</Label>
+      <CountrySelect
+        multiple
+        value={value}
+        onChange={setValue}
+        allowedCountries={ASIAN_AUTO_MARKETS}
+        showNativeName
+      />
+    </div>
+  );
+};
+
+export const ExcludeSanctioned = () => {
+  const [value, setValue] = useState<string[]>([]);
+  const excluded: TCountryCode[] = ['KP', 'IR', 'SY', 'CU'];
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>All except sanctioned</Label>
+      <CountrySelect
+        multiple
+        value={value}
+        onChange={setValue}
+        excludedCountries={excluded}
+      />
+    </div>
+  );
+};
+
+// ============================================================================
+// States
+// ============================================================================
+
+export const Disabled = () => (
+  <div className="max-w-sm space-y-4">
+    <div className="space-y-2">
+      <Label>Disabled dropdown</Label>
+      <CountrySelect
+        value={['US']}
+        onChange={() => {}}
+        disabled
+      />
+    </div>
+    <div className="space-y-2">
+      <Label>Disabled inline</Label>
+      <CountrySelect
+        variant="inline"
+        multiple
+        value={['US', 'GB']}
+        onChange={() => {}}
+        disabled
+        maxHeight={150}
+      />
+    </div>
+  </div>
+);
+
+export const MaxDisplayBadges = () => {
+  const [value, setValue] = useState<string[]>(['US', 'GB', 'DE', 'FR', 'IT', 'ES']);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Max 2 badges displayed</Label>
+      <CountrySelect
+        multiple
+        value={value}
+        onChange={setValue}
+        maxDisplay={2}
+      />
+    </div>
+  );
+};

package/src/components/country-select.tsx

@@ -0,0 +1,401 @@
+"use client"
+
+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';
+import { Checkbox } from './checkbox';
+import {
+  Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList
+} from './command';
+import { Input } from './input';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import { ScrollArea } from './scroll-area';
+
+export interface CountryOption {
+  code: TCountryCode;
+  name: string;
+  native: string;
+  emoji: string;
+}
+
+export type CountrySelectVariant = 'dropdown' | 'inline';
+
+export interface CountrySelectProps {
+  /** Selected country codes (ISO 3166-1 alpha-2) */
+  value?: string[];
+  /** Callback when selection changes */
+  onChange?: (value: string[]) => void;
+  /** Allow multiple selection */
+  multiple?: boolean;
+  /** Display variant: dropdown (popover) or inline (scrollable list) */
+  variant?: CountrySelectVariant;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Search placeholder text */
+  searchPlaceholder?: string;
+  /** Empty results text */
+  emptyText?: string;
+  /** Additional CSS class */
+  className?: string;
+  /** Disable the component */
+  disabled?: boolean;
+  /** Max badges to display (for multiple dropdown mode) */
+  maxDisplay?: number;
+  /** Custom country name resolver (for i18n) */
+  getCountryName?: (code: TCountryCode) => string;
+  /** Show native name alongside translated name */
+  showNativeName?: boolean;
+  /** Filter to specific country codes */
+  allowedCountries?: TCountryCode[];
+  /** Exclude specific country codes */
+  excludedCountries?: TCountryCode[];
+  /** Max height for inline variant */
+  maxHeight?: number;
+  /** Show search input */
+  showSearch?: boolean;
+}
+
+/**
+ * Country Select component with emoji flags
+ *
+ * Supports:
+ * - Single and multiple selection
+ * - Dropdown (popover) and inline (scrollable list) variants
+ * - Custom country name translations via getCountryName prop
+ * - Country filtering via allowedCountries/excludedCountries
+ *
+ * Uses ISO 3166-1 alpha-2 country codes.
+ *
+ * @example Single dropdown
+ * ```tsx
+ * <CountrySelect
+ *   value={country ? [country] : []}
+ *   onChange={(codes) => setCountry(codes[0])}
+ * />
+ * ```
+ *
+ * @example Multiple dropdown
+ * ```tsx
+ * <CountrySelect
+ *   multiple
+ *   value={countries}
+ *   onChange={setCountries}
+ * />
+ * ```
+ *
+ * @example Inline list with checkboxes
+ * ```tsx
+ * <CountrySelect
+ *   variant="inline"
+ *   multiple
+ *   value={countries}
+ *   onChange={setCountries}
+ *   maxHeight={300}
+ * />
+ * ```
+ *
+ * @example With i18n translations
+ * ```tsx
+ * <CountrySelect
+ *   value={value}
+ *   onChange={onChange}
+ *   getCountryName={(code) => i18nCountries.getName(code, locale)}
+ * />
+ * ```
+ */
+export function CountrySelect({
+  value = [],
+  onChange,
+  multiple = false,
+  variant = 'dropdown',
+  placeholder,
+  searchPlaceholder,
+  emptyText,
+  className,
+  disabled = false,
+  maxDisplay = 3,
+  getCountryName,
+  showNativeName = false,
+  allowedCountries,
+  excludedCountries,
+  maxHeight = 300,
+  showSearch = true,
+}: 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')
+
+  // Build country options
+  const allCountries = React.useMemo<CountryOption[]>(() => {
+    let codes = Object.keys(countries) as TCountryCode[];
+
+    // Apply filters
+    if (allowedCountries?.length) {
+      codes = codes.filter(code => allowedCountries.includes(code));
+    }
+    if (excludedCountries?.length) {
+      codes = codes.filter(code => !excludedCountries.includes(code));
+    }
+
+    return codes
+      .map((code) => ({
+        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]);
+
+  const selectedCountries = React.useMemo(
+    () => allCountries.filter((c) => value.includes(c.code)),
+    [allCountries, value]
+  )
+
+  const filteredCountries = React.useMemo(() => {
+    if (!search) return allCountries
+    const searchLower = search.toLowerCase()
+    return allCountries.filter(
+      (c) =>
+        c.name.toLowerCase().includes(searchLower) ||
+        c.native.toLowerCase().includes(searchLower) ||
+        c.code.toLowerCase().includes(searchLower)
+    )
+  }, [allCountries, search])
+
+  const handleSelect = React.useCallback((code: string) => {
+    if (multiple) {
+      const newValue = value.includes(code)
+        ? value.filter((v) => v !== code)
+        : [...value, code]
+      onChange?.(newValue)
+    } else {
+      onChange?.([code])
+      if (variant === 'dropdown') {
+        setOpen(false)
+      }
+    }
+  }, [multiple, value, onChange, variant])
+
+  const handleRemove = React.useCallback((code: string, e: React.MouseEvent) => {
+    e.stopPropagation()
+    onChange?.(value.filter((v) => v !== code))
+  }, [value, onChange])
+
+  // Inline variant
+  if (variant === 'inline') {
+    return (
+      <div className={cn("space-y-3", className)}>
+        {/* Search input */}
+        {showSearch && (
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              type="text"
+              placeholder={resolvedSearchPlaceholder}
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="pl-9"
+              disabled={disabled}
+            />
+          </div>
+        )}
+
+        {/* Selected count */}
+        {multiple && selectedCountries.length > 0 && (
+          <p className="text-sm text-muted-foreground">
+            {selectedCountries.length} {t('ui.table.selected')}
+          </p>
+        )}
+
+        {/* Country list */}
+        <ScrollArea style={{ maxHeight }} className="rounded-md border">
+          <div className="p-1">
+            {filteredCountries.length === 0 ? (
+              <p className="text-sm text-muted-foreground text-center py-4">
+                {resolvedEmptyText}
+              </p>
+            ) : (
+              filteredCountries.map((country) => {
+                const isSelected = value.includes(country.code);
+                return (
+                  <label
+                    key={country.code}
+                    className={cn(
+                      'flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer',
+                      'hover:bg-accent/50 transition-colors',
+                      isSelected && 'bg-primary/5',
+                      disabled && 'opacity-50 cursor-not-allowed',
+                    )}
+                  >
+                    {multiple ? (
+                      <Checkbox
+                        checked={isSelected}
+                        onCheckedChange={() => !disabled && handleSelect(country.code)}
+                        disabled={disabled}
+                      />
+                    ) : (
+                      <div className={cn(
+                        "h-4 w-4 rounded-full border-2 flex items-center justify-center",
+                        isSelected ? "border-primary bg-primary" : "border-muted-foreground"
+                      )}>
+                        {isSelected && <div className="h-2 w-2 rounded-full bg-primary-foreground" />}
+                      </div>
+                    )}
+                    <span className="text-lg">{country.emoji}</span>
+                    <div className="flex flex-col flex-1 min-w-0">
+                      <span className={cn('text-sm', isSelected && 'font-medium')}>
+                        {country.name}
+                      </span>
+                      {showNativeName && country.native !== country.name && (
+                        <span className="text-xs text-muted-foreground">
+                          {country.native}
+                        </span>
+                      )}
+                    </div>
+                  </label>
+                );
+              })
+            )}
+          </div>
+        </ScrollArea>
+      </div>
+    );
+  }
+
+  // Dropdown variant
+  const displayValue = React.useMemo(() => {
+    if (selectedCountries.length === 0) {
+      return <span className="text-muted-foreground">{resolvedPlaceholder}</span>
+    }
+
+    if (!multiple && selectedCountries.length === 1) {
+      const country = selectedCountries[0];
+      return (
+        <div className="flex items-center gap-2">
+          <span>{country.emoji}</span>
+          <span>{country.name}</span>
+        </div>
+      );
+    }
+
+    const displayed = selectedCountries.slice(0, maxDisplay)
+    const remaining = selectedCountries.length - maxDisplay
+
+    return (
+      <div className="flex flex-wrap gap-1">
+        {displayed.map((country) => (
+          <Badge
+            key={country.code}
+            variant="secondary"
+            className="mr-1 text-xs"
+          >
+            <span className="mr-1">{country.emoji}</span>
+            {country.name}
+            <button
+              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 })}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          </Badge>
+        ))}
+        {remaining > 0 && (
+          <Badge variant="outline" className="text-xs">
+            {t('ui.select.moreItems', { count: remaining })}
+          </Badge>
+        )}
+      </div>
+    )
+  }, [selectedCountries, maxDisplay, resolvedPlaceholder, disabled, t, multiple, handleRemove])
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(isOpen) => {
+        setOpen(isOpen)
+        if (!isOpen) {
+          setSearch("")
+        }
+      }}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={cn(
+            "w-full justify-between min-h-10 h-auto py-2",
+            className
+          )}
+          disabled={disabled}
+        >
+          <div className="flex-1 text-left overflow-hidden">
+            {displayValue}
+          </div>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+        <Command shouldFilter={false} className="flex flex-col">
+          <CommandInput
+            placeholder={resolvedSearchPlaceholder}
+            className="shrink-0"
+            value={search}
+            onValueChange={setSearch}
+          />
+          <CommandList className="max-h-[300px]">
+            {filteredCountries.length === 0 ? (
+              <CommandEmpty>{resolvedEmptyText}</CommandEmpty>
+            ) : (
+              <CommandGroup>
+                {filteredCountries.map((country) => {
+                  const isSelected = value.includes(country.code)
+                  return (
+                    <CommandItem
+                      key={country.code}
+                      value={country.code}
+                      onSelect={() => handleSelect(country.code)}
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-4 w-4 shrink-0",
+                          isSelected ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                      <span className="mr-2 text-lg">{country.emoji}</span>
+                      <div className="flex flex-col flex-1 min-w-0">
+                        <span className="truncate">{country.name}</span>
+                        {showNativeName && country.native !== country.name && (
+                          <span className="text-xs text-muted-foreground truncate">
+                            {country.native}
+                          </span>
+                        )}
+                      </div>
+                    </CommandItem>
+                  )
+                })}
+              </CommandGroup>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+// Re-export types for convenience
+export type { TCountryCode } from 'countries-list';
+export { getEmojiFlag } from 'countries-list';

package/src/components/index.ts

@@ -21,6 +21,8 @@ export { MultiSelect } from './multi-select';
 export type { MultiSelectOption, MultiSelectProps } from './multi-select';
 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 { MultiSelectProAsync } from './multi-select-pro/async';
 export type { MultiSelectProAsyncProps } from './multi-select-pro/async';
 export { Switch } from './switch';