react-country-kit 1.0.0

package/README.md

@@ -0,0 +1,258 @@
+# react-country-kit 🌍
+
+A comprehensive, accessible, and beautifully designed React component library for picking **countries**, **currencies**, **timezones**, **languages**, **country divisions** (states/provinces), and **phone numbers**.
+
+Built for modern React applications, it supports both **Vanilla CSS** and **shadcn/Tailwind CSS** variants out of the box.
+
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue)](https://www.typescriptlang.org/)
+[![React](https://img.shields.io/badge/React-17%2B-blue)](https://reactjs.org/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green)](LICENSE)
+[![NPM Version](https://img.shields.io/npm/v/react-country-kit)](https://www.npmjs.com/package/react-country-kit)
+
+---
+
+## ✨ Features
+
+- 🎯 **8+ Premium Pickers** — Country, Currency, Timezone, Language, Division, PhoneInput, and Multi-select.
+- 🌐 **Global Database** — 250 countries with ISO data, flags, phone formats, and localized divisions.
+- 🎨 **Dual-Path Styling**:
+  - **Vanilla Path** (`react-country-kit`): Zero-config, self-contained CSS.
+  - **shadcn/UI Path** (`react-country-kit/ui`): Radix-powered, fully Tailwind-driven.
+- 📞 **Smart PhoneInput**: Automatic validation, dial code sync, and standard formatting.
+- 🌍 **MultiSelect**: High-performance multi-selection with smart overflow management.
+- ⚡ **Auto-Selection**: Intelligent dependent fields (select country → auto-select currency/timezone).
+- 🔍 **Fuzzy Search**: Blazing fast search across all pickers (names, codes, symbols).
+- 🎣 **Headless Hooks**: Logic-only hooks to build your own unique UI.
+- 🌙 **Theme Ready**: Native dark mode support for both CSS and Tailwind.
+- ♿ **A11y**: Fully keyboard navigable and ARIA-compliant.
+
+---
+
+## 📦 Installation
+
+```bash
+npm install react-country-kit
+```
+
+### Choose Your Style
+
+#### 1. The Vanilla Path (Quickest)
+Best for projects without Tailwind or when you want our curated design.
+
+```ts
+import 'react-country-kit/styles';
+```
+
+#### 2. The shadcn/Tailwind Path (Full Control)
+Best for projects using Tailwind CSS. It integrates seamlessly with your existing shadcn/ui tokens.
+
+```bash
+npm install @radix-ui/react-popover cmdk tailwind-merge clsx
+```
+*No CSS import required for the `/ui` path.*
+
+---
+
+## 🚀 Usage Examples
+
+### Dependent Pickers (The Power Trio)
+Select a country and watch the currency and timezone pickers update automatically.
+
+```tsx
+import { useState } from 'react';
+import { CountryPicker, CurrencyPicker, TimezonePicker } from 'react-country-kit';
+import 'react-country-kit/styles';
+
+function RegistrationForm() {
+  const [country, setCountry] = useState(null);
+  const [currency, setCurrency] = useState(null);
+  const [timezone, setTimezone] = useState(null);
+
+  return (
+    <div className="space-y-4">
+      <CountryPicker 
+        label="Select Country"
+        value={country} 
+        onChange={(c) => {
+          setCountry(c);
+          setCurrency(null); // Triggers auto-select
+          setTimezone(null); // Triggers auto-select
+        }} 
+      />
+
+      <CurrencyPicker 
+        label="Preferred Currency"
+        countryIso2={country?.iso2} 
+        value={currency} 
+        onChange={setCurrency} 
+      />
+
+      <TimezonePicker 
+        label="Local Timezone"
+        countryIso2={country?.iso2} 
+        value={timezone} 
+        onChange={setTimezone} 
+      />
+    </div>
+  );
+}
+```
+
+### Smart Phone Input
+Includes country selection, dial code prefix, and number input with standard patterns.
+
+```tsx
+import { PhoneInput } from 'react-country-kit/ui';
+
+function ContactForm() {
+  const [phone, setPhone] = useState(null);
+
+  return (
+    <PhoneInput 
+      value={phone} 
+      onChange={setPhone} 
+      defaultCountryIso2="US"
+      label="Mobile Number"
+      className="w-full"
+    />
+  );
+}
+// phone value: { country, dialCode: "+1", number: "5550123", full: "+15550123" }
+```
+
+---
+
+## 📖 Component API
+
+### Common Props
+All pickers share these core props:
+- `value`: Current selection object (see [Interfaces](#📐-typescript-interfaces)).
+- `onChange`: Callback function when a selection is made.
+- `label`: Optional floating/field label.
+- `placeholder`: Custom placeholder text.
+- `disabled`: Boolean to disable interactions.
+- `searchable`: Enable/disable the search input (default: `true`).
+
+### Picker-Specific Props
+
+| Component | Unique Props | Description |
+|---|---|---|
+| `<CountryPicker />` | `showFlag`, `showPhoneCode` | Toggle flag and dial code visibility. |
+| `<CurrencyPicker />` | `countryIso2`, `autoSelect`, `showSymbol` | Filters by country and auto-selects primary currency. |
+| `<TimezonePicker />` | `countryIso2`, `autoSelect` | Filters by country and auto-selects primary timezone. |
+| `<LanguagePicker />` | `showNativeName` | Display "Español" alongside "Spanish". |
+| `<DivisionPicker />` | `countryIso2` (Required) | Dynamically loads states/provinces for the country. |
+
+---
+
+## 🎣 Headless Hooks
+
+Need a completely different UI? Use our logic hooks:
+
+```tsx
+import { useCountryPicker } from 'react-country-kit';
+
+function MyCustomPicker() {
+  const {
+    isOpen, toggle, 
+    filteredItems, searchQuery, 
+    setSearchQuery, selectItem 
+  } = useCountryPicker();
+
+  return (
+    <div>
+      <button onClick={toggle}>Open</button>
+      {isOpen && (
+        <ul>
+          {filteredItems.map(country => (
+            <li key={country.iso2} onClick={() => selectItem(country)}>
+              {country.name}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+```
+
+---
+
+## 📐 TypeScript Interfaces
+
+```ts
+export interface Country {
+  name: string;
+  iso2: string;
+  iso3: string;
+  phone_code: string;
+  flag: string;
+  currency: Currency;
+  timezones: Timezone[];
+  division_type: string;
+  divisions: Division[];
+}
+
+export interface Currency {
+  code: string;
+  name: string;
+  symbol: string;
+}
+
+export interface Timezone {
+  name: string;
+  offset: number;
+  offset_name: string;
+  abbreviation: string;
+  tzName: string;
+}
+```
+
+---
+
+## 🛠️ Utility Functions
+
+We export several helper functions for data manipulation:
+
+```ts
+import { 
+  getCountryByIso2, 
+  getAllCurrencies, 
+  getTimezonesByCountry, 
+  iso2ToFlag 
+} from 'react-country-kit';
+
+const uk = getCountryByIso2('GB');
+const flag = iso2ToFlag('CA'); // 🇨🇦
+const timezones = getTimezonesByCountry('US');
+```
+
+---
+
+## 🌙 Customization & Theming
+
+### Vanilla CSS
+Target the CSS variables in your global stylesheet:
+```css
+:root {
+  --rck-primary: #6366f1;
+  --rck-background: #ffffff;
+  --rck-foreground: #0f172a;
+  --rck-radius: 0.75rem;
+}
+```
+
+### shadcn / Tailwind
+The components automatically use your `tailwind.config.js` and CSS variables:
+- `bg-background` / `text-foreground`
+- `border-input`
+- `bg-primary` / `text-primary-foreground`
+- `bg-accent` / `text-accent-foreground`
+
+---
+
+## 📄 License
+
+MIT © [Kishor Mainali](https://github.com/kishormainali)
+
+Data sourced from [country_division_database](https://github.com/kishormainali/country_division_database).

package/dist/components/CountryMultiSelect/CountryMultiSelect.d.ts

@@ -0,0 +1,3 @@
+import type { CountryMultiSelectProps } from '../../types';
+import '../../styles/picker.css';
+export declare function CountryMultiSelect({ value, onChange, placeholder, maxItems, showFlags, searchable, disabled, className, label, }: CountryMultiSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CountryPicker/CountryPicker.d.ts

@@ -0,0 +1,3 @@
+import type { CountryPickerProps } from '../../types';
+import '../../styles/picker.css';
+export declare function CountryPicker({ value, onChange, placeholder, searchable, showFlag, showPhoneCode, disabled, className, label, }: CountryPickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CurrencyMultiSelect/CurrencyMultiSelect.d.ts

@@ -0,0 +1,3 @@
+import type { CurrencyMultiSelectProps } from '../../types';
+import '../../styles/picker.css';
+export declare function CurrencyMultiSelect({ value, onChange, placeholder, maxItems, showSymbol, searchable, disabled, className, label, }: CurrencyMultiSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CurrencyPicker/CurrencyPicker.d.ts

@@ -0,0 +1,3 @@
+import type { CurrencyPickerProps } from '../../types';
+import '../../styles/picker.css';
+export declare function CurrencyPicker({ value, onChange, placeholder, searchable, showSymbol, disabled, className, label, }: CurrencyPickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DivisionPicker/DivisionPicker.d.ts

@@ -0,0 +1,3 @@
+import type { DivisionPickerProps } from '../../types';
+import '../../styles/picker.css';
+export declare function DivisionPicker({ countryIso2, value, onChange, placeholder, searchable, disabled, className, label, }: DivisionPickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/LanguagePicker/LanguagePicker.d.ts

@@ -0,0 +1,3 @@
+import type { LanguagePickerProps } from '../../types';
+import '../../styles/picker.css';
+export declare function LanguagePicker({ value, onChange, placeholder, searchable, showNativeName, disabled, className, label, }: LanguagePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,3 @@
+import type { PhoneInputProps } from '../../types';
+import '../../styles/picker.css';
+export declare function PhoneInput({ value, onChange, defaultCountryIso2, placeholder, showFlag, disabled, className, label, }: PhoneInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TimezonePicker/TimezonePicker.d.ts

@@ -0,0 +1,3 @@
+import type { TimezonePickerProps } from '../../types';
+import '../../styles/picker.css';
+export declare function TimezonePicker({ value, onChange, placeholder, searchable, countryIso2, disabled, className, label, }: TimezonePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/PickerBase.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface PickerBaseProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onToggle: () => void;
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+    triggerContent: React.ReactNode;
+    children: React.ReactNode;
+    id?: string;
+}
+export declare function PickerBase({ isOpen, onClose, onToggle, label, disabled, className, triggerContent, children, id, }: PickerBaseProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/shared/SearchInput.d.ts

@@ -0,0 +1,8 @@
+interface SearchInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    autoFocus?: boolean;
+}
+export declare function SearchInput({ value, onChange, placeholder, autoFocus }: SearchInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/data/countries.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Auto-generated country dataset — DO NOT EDIT MANUALLY.
+ * Source: https://raw.githubusercontent.com/kishormainali/country_division_database/refs/heads/main/countries.json
+ * Generated: 2026-04-19T05:48:30.758Z
+ * Countries: 250
+ */
+export declare function iso2ToFlag(iso2: string): string;
+import type { Country } from '../types';
+export declare const COUNTRIES: Country[];
+export default COUNTRIES;

package/dist/data/languages.d.ts

@@ -0,0 +1,3 @@
+import type { Language } from '../types';
+declare const languages: Language[];
+export default languages;

package/dist/hooks/useBasePicker.d.ts

@@ -0,0 +1,6 @@
+import type { UsePickerReturn } from '../types';
+/**
+ * Generic base hook for all pickers.
+ * Handles open/close state, search query, and item selection.
+ */
+export declare function useBasePicker<T>(allItems: T[], filterFn: (items: T[], query: string) => T[], initialValue?: T | null, onChange?: (item: T) => void): UsePickerReturn<T>;

package/dist/hooks/useCountryPicker.d.ts

@@ -0,0 +1,2 @@
+import type { Country, UsePickerReturn } from '../types';
+export declare function useCountryPicker(initialValue?: Country | null, onChange?: (country: Country) => void): UsePickerReturn<Country>;

package/dist/hooks/useCurrencyPicker.d.ts

@@ -0,0 +1,2 @@
+import type { Currency, UsePickerReturn } from '../types';
+export declare function useCurrencyPicker(initialValue?: Currency | null, onChange?: (currency: Currency) => void): UsePickerReturn<Currency>;

package/dist/hooks/useDivisionPicker.d.ts

@@ -0,0 +1,2 @@
+import type { Division, UsePickerReturn } from '../types';
+export declare function useDivisionPicker(countryIso2: string, initialValue?: Division | null, onChange?: (division: Division) => void): UsePickerReturn<Division>;

package/dist/hooks/useLanguagePicker.d.ts

@@ -0,0 +1,2 @@
+import type { Language, UsePickerReturn } from '../types';
+export declare function useLanguagePicker(initialValue?: Language | null, onChange?: (language: Language) => void): UsePickerReturn<Language>;

package/dist/hooks/useMultiSelect.d.ts

@@ -0,0 +1,6 @@
+import type { UseMultiSelectReturn } from '../types';
+/**
+ * Generic multi-selection hook.
+ * Handles open/close, search, and toggle-selection of multiple items.
+ */
+export declare function useMultiSelect<T>(allItems: T[], filterFn: (items: T[], query: string) => T[], keyFn: (item: T) => string, initialValue?: T[], onChange?: (items: T[]) => void, maxItems?: number): UseMultiSelectReturn<T>;

package/dist/hooks/usePhoneInput.d.ts

@@ -0,0 +1,17 @@
+import type { Country, PhoneValue } from '../types';
+export interface UsePhoneInputReturn {
+    country: Country | null;
+    number: string;
+    value: PhoneValue | null;
+    isOpen: boolean;
+    searchQuery: string;
+    filteredCountries: Country[];
+    minLength?: number;
+    maxLength?: number;
+    setSearchQuery: (q: string) => void;
+    selectCountry: (country: Country) => void;
+    setNumber: (num: string) => void;
+    toggle: () => void;
+    close: () => void;
+}
+export declare function usePhoneInput(initialValue?: PhoneValue | null, onChange?: (value: PhoneValue) => void, defaultCountryIso2?: string): UsePhoneInputReturn;

package/dist/hooks/useTimezonePicker.d.ts

@@ -0,0 +1,2 @@
+import type { Timezone, UsePickerReturn } from '../types';
+export declare function useTimezonePicker(initialValue?: Timezone | null, onChange?: (timezone: Timezone) => void, countryIso2?: string): UsePickerReturn<Timezone>;

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+export { CountryMultiSelect } from './components/CountryMultiSelect/CountryMultiSelect';
+export { CountryPicker } from './components/CountryPicker/CountryPicker';
+export { CurrencyMultiSelect } from './components/CurrencyMultiSelect/CurrencyMultiSelect';
+export { CurrencyPicker } from './components/CurrencyPicker/CurrencyPicker';
+export { DivisionPicker } from './components/DivisionPicker/DivisionPicker';
+export { LanguagePicker } from './components/LanguagePicker/LanguagePicker';
+export { PhoneInput } from './components/PhoneInput/PhoneInput';
+export { TimezonePicker } from './components/TimezonePicker/TimezonePicker';
+export { useBasePicker } from './hooks/useBasePicker';
+export { useCountryPicker } from './hooks/useCountryPicker';
+export { useCurrencyPicker } from './hooks/useCurrencyPicker';
+export { useDivisionPicker } from './hooks/useDivisionPicker';
+export { useLanguagePicker } from './hooks/useLanguagePicker';
+export { useMultiSelect } from './hooks/useMultiSelect';
+export { usePhoneInput } from './hooks/usePhoneInput';
+export { useTimezonePicker } from './hooks/useTimezonePicker';
+export { getAllCountries, getCountryByIso2, getCountryByIso3, getCountryByName, getCurrencyByCountry, getDivisionsByCountry, getTimezonesByCountry, iso2ToFlag, searchCountries } from './utils/countries';
+export { getAllCurrencies, getCurrencyByCode, searchCurrencies } from './utils/currencies';
+export { getAllTimezones, getTimezoneByName, searchTimezones } from './utils/timezones';
+export { getAllLanguages, getLanguageByCode, searchLanguages } from './utils/languages';
+export type { Country, CountryMultiSelectProps, CountryPickerProps, Currency, CurrencyMultiSelectProps, CurrencyPickerProps, Division, DivisionPickerProps, Language, LanguagePickerProps, PhoneFormat, PhoneInputProps, PhoneValue, Timezone, TimezonePickerProps, UseMultiSelectReturn, UsePickerReturn } from './types';

package/dist/react-country-kit.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),l=require("./useTimezonePicker-zHCM2pUC.js");function j({value:n,onChange:o,placeholder:u="Search...",autoFocus:h=!0}){const m=g.useRef(null);return g.useEffect(()=>{h&&setTimeout(()=>{var d;return(d=m.current)==null?void 0:d.focus()},50)},[h]),e.jsx("div",{className:"rck-search-wrapper",children:e.jsxs("div",{className:"rck-search",children:[e.jsxs("svg",{className:"rck-search-icon",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("circle",{cx:"8.5",cy:"8.5",r:"5.5"}),e.jsx("path",{d:"M17 17l-4-4",strokeLinecap:"round"})]}),e.jsx("input",{ref:m,type:"text",value:n,onChange:d=>o(d.target.value),placeholder:u,"aria-label":"Search"}),n&&e.jsx("button",{style:{background:"none",border:"none",cursor:"pointer",color:"var(--rck-text-placeholder)",padding:0,display:"flex"},onClick:()=>o(""),"aria-label":"Clear search",type:"button",children:e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{d:"M6 6l8 8M14 6l-8 8",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",fill:"none"})})})]})})}const f=3;function b(){return e.jsx("svg",{viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:e.jsx("polyline",{points:"4 10 8 14 16 6"})})}function v({value:n,onChange:o,placeholder:u="Select countries...",maxItems:h,showFlags:m=!0,searchable:d=!0,disabled:x=!1,className:p,label:s}){const r=l.useMultiSelect(l.getAllCountries(),(i,a)=>a?l.searchCountries(a):i,i=>i.iso2,n,o,h),c=g.useRef(null);g.useEffect(()=>{if(!r.isOpen)return;const i=a=>{c.current&&!c.current.contains(a.target)&&r.close()};return document.addEventListener("mousedown",i),()=>document.removeEventListener("mousedown",i)},[r.isOpen,r.close]),g.useEffect(()=>{if(!r.isOpen)return;const i=a=>{a.key==="Escape"&&r.close()};return document.addEventListener("keydown",i),()=>document.removeEventListener("keydown",i)},[r.isOpen,r.close]);const t=n.slice(0,f),k=n.length-f;return e.jsxs("div",{ref:c,className:`rck-picker${p?` ${p}`:""}`,children:[s&&e.jsx("span",{className:"rck-label",children:s}),e.jsxs("button",{type:"button",className:`rck-multiselect-trigger${r.isOpen?" rck-open":""}`,disabled:x,onClick:r.toggle,"aria-haspopup":"listbox","aria-expanded":r.isOpen,children:[e.jsx("div",{className:"rck-chips-area",children:n.length===0?e.jsx("span",{style:{color:"var(--rck-text-placeholder)",fontSize:"0.9375rem"},children:u}):e.jsxs(e.Fragment,{children:[t.map(i=>e.jsxs("span",{className:"rck-chip",children:[m&&e.jsx("span",{children:i.flag}),e.jsx("span",{className:"rck-chip-label",children:i.name}),e.jsx("button",{type:"button",className:"rck-chip-remove",onClick:a=>{a.stopPropagation(),r.removeItem(i),o(n.filter(N=>N.iso2!==i.iso2))},"aria-label":`Remove ${i.name}`,children:e.jsxs("svg",{width:"10",height:"10",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",children:[e.jsx("line",{x1:"5",y1:"5",x2:"15",y2:"15"}),e.jsx("line",{x1:"15",y1:"5",x2:"5",y2:"15"})]})})]},i.iso2)),k>0&&e.jsxs("span",{className:"rck-chip-overflow",children:["+",k," more"]})]})}),n.length>0&&e.jsx("button",{type:"button",className:"rck-multiselect-clear",onClick:i=>{i.stopPropagation(),r.clearAll(),o([])},"aria-label":"Clear all",children:e.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",children:[e.jsx("line",{x1:"5",y1:"5",x2:"15",y2:"15"}),e.jsx("line",{x1:"15",y1:"5",x2:"5",y2:"15"})]})}),e.jsx("svg",{className:"rck-chevron",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",children:e.jsx("polyline",{points:"5 8 10 13 15 8"})})]}),r.isOpen&&e.jsxs("div",{className:"rck-dropdown",role:"listbox","aria-multiselectable":"true",children:[d&&e.jsx(j,{value:r.searchQuery,onChange:r.setSearchQuery,placeholder:"Search countries..."}),e.jsx("ul",{className:"rck-list",children:r.filteredItems.length===0?e.jsxs("li",{className:"rck-empty",children:[e.jsx("span",{className:"rck-empty-icon",children:"🌍"}),e.jsx("span",{children:"No countries found"})]}):r.filteredItems.map(i=>{const a=r.isSelected(i);return e.jsxs("li",{role:"option","aria-selected":a,className:`rck-item${a?" rck-item-selected":""}`,onClick:()=>r.toggleItem(i),tabIndex:0,onKeyDown:N=>N.key==="Enter"&&r.toggleItem(i),children:[e.jsx("div",{className:a?"rck-item-check-multi":"rck-item-check-empty",children:a&&e.jsx(b,{})}),m&&e.jsx("span",{className:"rck-item-flag",children:i.flag}),e.jsxs("div",{className:"rck-item-main",children:[e.jsx("span",{className:"rck-item-name",children:i.name}),e.jsxs("span",{className:"rck-item-sub",children:[i.iso3," · +",i.phone_code]})]})]},i.iso2)})})]})]})}const I=()=>e.jsx("svg",{className:"rck-chevron",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e.jsx("polyline",{points:"5 8 10 13 15 8"})});function y({isOpen:n,onClose:o,onToggle:u,label:h,disabled:m,className:d,triggerContent:x,children:p,id:s}){const r=g.useRef(null);return g.useEffect(()=>{if(!n)return;const c=t=>{r.current&&!r.current.contains(t.target)&&o()};return document.addEventListener("mousedown",c),()=>document.removeEventListener("mousedown",c)},[n,o]),g.useEffect(()=>{if(!n)return;const c=t=>{t.key==="Escape"&&o()};return document.addEventListener("keydown",c),()=>document.removeEventListener("keydown",c)},[n,o]),e.jsxs("div",{ref:r,className:`rck-picker${d?` ${d}`:""}`,children:[h&&e.jsx("span",{className:"rck-label",id:s?`${s}-label`:void 0,children:h}),e.jsxs("button",{type:"button",className:`rck-trigger${n?" rck-open":""}`,disabled:m,"aria-haspopup":"listbox","aria-expanded":n,"aria-labelledby":s&&h?`${s}-label`:void 0,id:s,onClick:u,children:[x,e.jsx(I,{})]}),n&&e.jsx("div",{className:"rck-dropdown",role:"listbox",children:p})]})}const L=()=>e.jsx("svg",{className:"rck-item-check",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:e.jsx("polyline",{points:"4 10 8 14 16 6"})});function w({value:n,onChange:o,placeholder:u="Select a country",searchable:h=!0,showFlag:m=!0,showPhoneCode:d=!1,disabled:x=!1,className:p,label:s}){const r=l.useCountryPicker(n,o),c=e.jsx("div",{className:"rck-trigger-content",children:n?e.jsxs(e.Fragment,{children:[m&&e.jsx("span",{className:"rck-flag",children:n.flag}),e.jsx("span",{className:"rck-trigger-text",children:n.name}),d&&e.jsxs("span",{className:"rck-badge",children:["+",n.phone_code]})]}):e.jsx("span",{className:"rck-trigger-text rck-placeholder",children:u})});return e.jsxs(y,{isOpen:r.isOpen,onClose:r.close,onToggle:r.toggle,label:s,disabled:x,className:p,triggerContent:c,id:"rck-country-picker",children:[h&&e.jsx(j,{value:r.searchQuery,onChange:r.setSearchQuery,placeholder:"Search country..."}),e.jsx("ul",{className:"rck-list",role:"listbox","aria-label":"Countries",children:r.filteredItems.length===0?e.jsxs("li",{className:"rck-empty",children:[e.jsx("span",{className:"rck-empty-icon",children:"🌍"}),e.jsx("span",{children:"No countries found"})]}):r.filteredItems.map(t=>{const k=(n==null?void 0:n.iso2)===t.iso2;return e.jsxs("li",{role:"option","aria-selected":k,className:`rck-item${k?" rck-item-selected":""}`,onClick:()=>r.selectItem(t),tabIndex:0,onKeyDown:i=>i.key==="Enter"&&r.selectItem(t),children:[m&&e.jsx("span",{className:"rck-item-flag",children:t.flag}),e.jsxs("div",{className:"rck-item-main",children:[e.jsx("span",{className:"rck-item-name",children:t.name}),e.jsxs("span",{className:"rck-item-sub",children:[t.iso3," · ",t.division_type]})]}),e.jsxs("div",{className:"rck-item-right",children:[d&&e.jsxs("span",{className:"rck-item-phone",children:["+",t.phone_code]}),k&&e.jsx(L,{})]})]},t.iso2)})})]})}const C=3;function S(){return e.jsx("svg",{viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:e.jsx("polyline",{points:"4 10 8 14 16 6"})})}function P({value:n,onChange:o,placeholder:u="Select currencies...",maxItems:h,showSymbol:m=!0,searchable:d=!0,disabled:x=!1,className:p,label:s}){const r=l.useMultiSelect(l.getAllCurrencies(),(i,a)=>a?l.searchCurrencies(a):i,i=>i.code,n,o,h),c=g.useRef(null);g.useEffect(()=>{if(!r.isOpen)return;const i=a=>{c.current&&!c.current.contains(a.target)&&r.close()};return document.addEventListener("mousedown",i),()=>document.removeEventListener("mousedown",i)},[r.isOpen,r.close]),g.useEffect(()=>{if(!r.isOpen)return;const i=a=>{a.key==="Escape"&&r.close()};return document.addEventListener("keydown",i),()=>document.removeEventListener("keydown",i)},[r.isOpen,r.close]);const t=n.slice(0,C),k=n.length-C;return e.jsxs("div",{ref:c,className:`rck-picker${p?` ${p}`:""}`,children:[s&&e.jsx("span",{className:"rck-label",children:s}),e.jsxs("button",{type:"button",className:`rck-multiselect-trigger${r.isOpen?" rck-open":""}`,disabled:x,onClick:r.toggle,"aria-haspopup":"listbox","aria-expanded":r.isOpen,children:[e.jsx("div",{className:"rck-chips-area",children:n.length===0?e.jsx("span",{style:{color:"var(--rck-text-placeholder)",fontSize:"0.9375rem"},children:u}):e.jsxs(e.Fragment,{children:[t.map(i=>e.jsxs("span",{className:"rck-chip",children:[m&&e.jsx("span",{children:i.symbol}),e.jsx("span",{className:"rck-chip-label",children:i.code}),e.jsx("button",{type:"button",className:"rck-chip-remove",onClick:a=>{a.stopPropagation(),o(n.filter(N=>N.code!==i.code))},"aria-label":`Remove ${i.code}`,children:e.jsxs("svg",{width:"10",height:"10",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",children:[e.jsx("line",{x1:"5",y1:"5",x2:"15",y2:"15"}),e.jsx("line",{x1:"15",y1:"5",x2:"5",y2:"15"})]})})]},i.code)),k>0&&e.jsxs("span",{className:"rck-chip-overflow",children:["+",k," more"]})]})}),n.length>0&&e.jsx("button",{type:"button",className:"rck-multiselect-clear",onClick:i=>{i.stopPropagation(),r.clearAll(),o([])},"aria-label":"Clear all",children:e.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",children:[e.jsx("line",{x1:"5",y1:"5",x2:"15",y2:"15"}),e.jsx("line",{x1:"15",y1:"5",x2:"5",y2:"15"})]})}),e.jsx("svg",{className:"rck-chevron",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",children:e.jsx("polyline",{points:"5 8 10 13 15 8"})})]}),r.isOpen&&e.jsxs("div",{className:"rck-dropdown",role:"listbox","aria-multiselectable":"true",children:[d&&e.jsx(j,{value:r.searchQuery,onChange:r.setSearchQuery,placeholder:"Search currencies..."}),e.jsx("ul",{className:"rck-list",children:r.filteredItems.length===0?e.jsxs("li",{className:"rck-empty",children:[e.jsx("span",{className:"rck-empty-icon",children:"💰"}),e.jsx("span",{children:"No currencies found"})]}):r.filteredItems.map(i=>{const a=r.isSelected(i);return e.jsxs("li",{role:"option","aria-selected":a,className:`rck-item${a?" rck-item-selected":""}`,onClick:()=>r.toggleItem(i),tabIndex:0,onKeyDown:N=>N.key==="Enter"&&r.toggleItem(i),children:[e.jsx("div",{className:a?"rck-item-check-multi":"rck-item-check-empty",children:a&&e.jsx(S,{})}),m&&e.jsx("span",{className:"rck-item-symbol",children:i.symbol}),e.jsxs("div",{className:"rck-item-main",children:[e.jsx("span",{className:"rck-item-name",children:i.name}),e.jsx("span",{className:"rck-item-sub",children:i.code})]})]},i.code)})})]})]})}const B=()=>e.jsx("svg",{className:"rck-item-check",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:e.jsx("polyline",{points:"4 10 8 14 16 6"})});function E({value:n,onChange:o,placeholder:u="Select a currency",searchable:h=!0,showSymbol:m=!0,disabled:d=!1,className:x,label:p}){const s=l.useCurrencyPicker(n,o),r=e.jsx("div",{className:"rck-trigger-content",children:n?e.jsxs(e.Fragment,{children:[m&&e.jsx("span",{className:"rck-item-symbol",children:n.symbol}),e.jsxs("span",{className:"rck-trigger-text",children:[n.code," — ",n.name]})]}):e.jsx("span",{className:"rck-trigger-text rck-placeholder",children:u})});return e.jsxs(y,{isOpen:s.isOpen,onClose:s.close,onToggle:s.toggle,label:p,disabled:d,className:x,triggerContent:r,id:"rck-currency-picker",children:[h&&e.jsx(j,{value:s.searchQuery,onChange:s.setSearchQuery,placeholder:"Search currency..."}),e.jsx("ul",{className:"rck-list",role:"listbox","aria-label":"Currencies",children:s.filteredItems.length===0?e.jsxs("li",{className:"rck-empty",children:[e.jsx("span",{className:"rck-empty-icon",children:"💰"}),e.jsx("span",{children:"No currencies found"})]}):s.filteredItems.map(c=>{const t=(n==null?void 0:n.code)===c.code;return e.jsxs("li",{role:"option","aria-selected":t,className:`rck-item${t?" rck-item-selected":""}`,onClick:()=>s.selectItem(c),tabIndex:0,onKeyDown:k=>k.key==="Enter"&&s.selectItem(c),children:[m&&e.jsx("span",{className:"rck-item-symbol",children:c.symbol}),e.jsxs("div",{className:"rck-item-main",children:[e.jsx("span",{className:"rck-item-name",children:c.name}),e.jsx("span",{className:"rck-item-sub",children:c.code})]}),t&&e.jsx(B,{})]},c.code)})})]})}const $=()=>e.jsx("svg",{className:"rck-item-check",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:e.jsx("polyline",{points:"4 10 8 14 16 6"})});function O({countryIso2:n,value:o,onChange:u,placeholder:h="Select a division",searchable:m=!0,disabled:d=!1,className:x,label:p}){const s=l.useDivisionPicker(n,o,u),r=e.jsx("div",{className:"rck-trigger-content",children:o?e.jsxs(e.Fragment,{children:[e.jsx("span",{className:"rck-trigger-text",children:o.name}),e.jsx("span",{className:"rck-badge",children:o.iso2})]}):e.jsx("span",{className:"rck-trigger-text rck-placeholder",children:h})}),c=d||!n;return e.jsxs(y,{isOpen:s.isOpen,onClose:s.close,onToggle:s.toggle,label:p,disabled:c,className:x,triggerContent:r,id:"rck-division-picker",children:[m&&e.jsx(j,{value:s.searchQuery,onChange:s.setSearchQuery,placeholder:"Search division..."}),e.jsx("ul",{className:"rck-list",role:"listbox","aria-label":"Divisions",children:s.filteredItems.length===0?e.jsxs("li",{className:"rck-empty",children:[e.jsx("span",{className:"rck-empty-icon",children:"🗺️"}),e.jsx("span",{children:"No divisions found"})]}):s.filteredItems.map(t=>{const k=(o==null?void 0:o.iso2)===t.iso2&&(o==null?void 0:o.name)===t.name;return e.jsxs("li",{role:"option","aria-selected":k,className:`rck-item${k?" rck-item-selected":""}`,onClick:()=>s.selectItem(t),tabIndex:0,onKeyDown:i=>i.key==="Enter"&&s.selectItem(t),children:[e.jsxs("div",{className:"rck-item-main",children:[e.jsx("span",{className:"rck-item-name",children:t.name}),e.jsx("span",{className:"rck-item-sub",children:t.timezone})]}),e.jsxs("div",{className:"rck-item-right",children:[e.jsx("span",{className:"rck-badge",children:t.iso2}),k&&e.jsx($,{})]})]},`${t.iso2}-${t.name}`)})})]})}const T=()=>e.jsx("svg",{className:"rck-item-check",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:e.jsx("polyline",{points:"4 10 8 14 16 6"})});function _({value:n,onChange:o,placeholder:u="Select a language",searchable:h=!0,showNativeName:m=!0,disabled:d=!1,className:x,label:p}){const s=l.useLanguagePicker(n,o),r=e.jsx("div",{className:"rck-trigger-content",children:n?e.jsxs(e.Fragment,{children:[e.jsx("span",{className:"rck-trigger-text",children:n.english_name}),m&&n.native_name!==n.english_name&&e.jsx("span",{className:"rck-native-name",children:n.native_name})]}):e.jsx("span",{className:"rck-trigger-text rck-placeholder",children:u})});return e.jsxs(y,{isOpen:s.isOpen,onClose:s.close,onToggle:s.toggle,label:p,disabled:d,className:x,triggerContent:r,id:"rck-language-picker",children:[h&&e.jsx(j,{value:s.searchQuery,onChange:s.setSearchQuery,placeholder:"Search language..."}),e.jsx("ul",{className:"rck-list",role:"listbox","aria-label":"Languages",children:s.filteredItems.length===0?e.jsxs("li",{className:"rck-empty",children:[e.jsx("span",{className:"rck-empty-icon",children:"🌐"}),e.jsx("span",{children:"No languages found"})]}):s.filteredItems.map(c=>{const t=(n==null?void 0:n.code)===c.code;return e.jsxs("li",{role:"option","aria-selected":t,className:`rck-item${t?" rck-item-selected":""}`,onClick:()=>s.selectItem(c),tabIndex:0,onKeyDown:k=>k.key==="Enter"&&s.selectItem(c),children:[e.jsxs("div",{className:"rck-item-main",children:[e.jsx("span",{className:"rck-item-name",children:c.english_name}),m&&c.native_name!==c.english_name&&e.jsx("span",{className:"rck-item-sub",children:c.native_name})]}),e.jsxs("div",{className:"rck-item-right",children:[e.jsx("span",{className:"rck-badge",style:{fontSize:"0.68rem"},children:c.code}),t&&e.jsx(T,{})]})]},c.code)})})]})}function z({value:n,onChange:o,defaultCountryIso2:u="US",placeholder:h="Phone number",showFlag:m=!0,disabled:d=!1,className:x,label:p}){const s=l.usePhoneInput(n,o,u),r=g.useRef(null);return g.useEffect(()=>{if(!s.isOpen)return;const c=t=>{r.current&&!r.current.contains(t.target)&&s.close()};return document.addEventListener("mousedown",c),()=>document.removeEventListener("mousedown",c)},[s.isOpen,s.close]),g.useEffect(()=>{if(!s.isOpen)return;const c=t=>{t.key==="Escape"&&s.close()};return document.addEventListener("keydown",c),()=>document.removeEventListener("keydown",c)},[s.isOpen,s.close]),e.jsxs("div",{ref:r,className:`rck-phone-wrapper${x?` ${x}`:""}`,children:[p&&e.jsx("span",{className:"rck-label",children:p}),e.jsxs("div",{className:`rck-phone-field${d?" rck-phone-disabled":""}`,children:[e.jsxs("button",{type:"button",className:"rck-phone-country-btn",onClick:s.toggle,"aria-expanded":s.isOpen,"aria-label":"Select country code",disabled:d,children:[m&&s.country&&e.jsx("span",{className:"rck-phone-flag",children:s.country.flag}),e.jsx("span",{className:"rck-phone-dial",children:s.country?`+${s.country.phone_code}`:"+?"}),e.jsx("svg",{className:"rck-phone-chevron",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",children:e.jsx("polyline",{points:"5 8 10 13 15 8"})})]}),e.jsx("input",{type:"tel",className:"rck-phone-input",value:s.number,onChange:c=>s.setNumber(c.target.value),placeholder:h,disabled:d,inputMode:"numeric",autoComplete:"tel-national"}),s.isOpen&&e.jsxs("div",{className:"rck-phone-dropdown",children:[e.jsx(j,{value:s.searchQuery,onChange:s.setSearchQuery,placeholder:"Search country or dial code..."}),e.jsx("ul",{className:"rck-list",role:"listbox","aria-label":"Countries",children:s.filteredCountries.length===0?e.jsxs("li",{className:"rck-empty",children:[e.jsx("span",{className:"rck-empty-icon",children:"🌍"}),e.jsx("span",{children:"No countries found"})]}):s.filteredCountries.map(c=>{var k;const t=((k=s.country)==null?void 0:k.iso2)===c.iso2;return e.jsxs("li",{role:"option","aria-selected":t,className:`rck-item${t?" rck-item-selected":""}`,onClick:()=>s.selectCountry(c),tabIndex:0,onKeyDown:i=>i.key==="Enter"&&s.selectCountry(c),children:[e.jsx("span",{className:"rck-item-flag",children:c.flag}),e.jsxs("div",{className:"rck-item-main",children:[e.jsx("span",{className:"rck-item-name",children:c.name}),e.jsx("span",{className:"rck-item-sub",children:c.iso2})]}),e.jsxs("span",{className:"rck-item-phone",children:["+",c.phone_code]})]},c.iso2)})})]})]})]})}const D=()=>e.jsx("svg",{className:"rck-item-check",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:e.jsx("polyline",{points:"4 10 8 14 16 6"})});function W({value:n,onChange:o,placeholder:u="Select a timezone",searchable:h=!0,countryIso2:m,disabled:d=!1,className:x,label:p}){const s=l.useTimezonePicker(n,o,m),r=e.jsx("div",{className:"rck-trigger-content",children:n?e.jsxs(e.Fragment,{children:[e.jsx("span",{className:"rck-trigger-text",children:n.name}),e.jsx("span",{className:"rck-badge",children:n.offset_name})]}):e.jsx("span",{className:"rck-trigger-text rck-placeholder",children:u})});return e.jsxs(y,{isOpen:s.isOpen,onClose:s.close,onToggle:s.toggle,label:p,disabled:d,className:x,triggerContent:r,id:"rck-timezone-picker",children:[h&&e.jsx(j,{value:s.searchQuery,onChange:s.setSearchQuery,placeholder:"Search timezone..."}),e.jsx("ul",{className:"rck-list",role:"listbox","aria-label":"Timezones",children:s.filteredItems.length===0?e.jsxs("li",{className:"rck-empty",children:[e.jsx("span",{className:"rck-empty-icon",children:"🕐"}),e.jsx("span",{children:"No timezones found"})]}):s.filteredItems.map(c=>{const t=(n==null?void 0:n.name)===c.name;return e.jsxs("li",{role:"option","aria-selected":t,className:`rck-item${t?" rck-item-selected":""}`,onClick:()=>s.selectItem(c),tabIndex:0,onKeyDown:k=>k.key==="Enter"&&s.selectItem(c),children:[e.jsxs("div",{className:"rck-item-main",children:[e.jsx("span",{className:"rck-item-name",children:c.name}),e.jsxs("span",{className:"rck-item-sub",children:[c.tzName," · ",c.abbreviation]})]}),e.jsxs("div",{className:"rck-item-right",children:[e.jsx("span",{className:"rck-offset-badge",children:c.offset_name}),t&&e.jsx(D,{})]})]},c.name)})})]})}exports.getAllCountries=l.getAllCountries;exports.getAllCurrencies=l.getAllCurrencies;exports.getAllLanguages=l.getAllLanguages;exports.getAllTimezones=l.getAllTimezones;exports.getCountryByIso2=l.getCountryByIso2;exports.getCountryByIso3=l.getCountryByIso3;exports.getCountryByName=l.getCountryByName;exports.getCurrencyByCode=l.getCurrencyByCode;exports.getCurrencyByCountry=l.getCurrencyByCountry;exports.getDivisionsByCountry=l.getDivisionsByCountry;exports.getLanguageByCode=l.getLanguageByCode;exports.getTimezoneByName=l.getTimezoneByName;exports.getTimezonesByCountry=l.getTimezonesByCountry;exports.iso2ToFlag=l.iso2ToFlag;exports.searchCountries=l.searchCountries;exports.searchCurrencies=l.searchCurrencies;exports.searchLanguages=l.searchLanguages;exports.searchTimezones=l.searchTimezones;exports.useBasePicker=l.useBasePicker;exports.useCountryPicker=l.useCountryPicker;exports.useCurrencyPicker=l.useCurrencyPicker;exports.useDivisionPicker=l.useDivisionPicker;exports.useLanguagePicker=l.useLanguagePicker;exports.useMultiSelect=l.useMultiSelect;exports.usePhoneInput=l.usePhoneInput;exports.useTimezonePicker=l.useTimezonePicker;exports.CountryMultiSelect=v;exports.CountryPicker=w;exports.CurrencyMultiSelect=P;exports.CurrencyPicker=E;exports.DivisionPicker=O;exports.LanguagePicker=_;exports.PhoneInput=z;exports.TimezonePicker=W;
+//# sourceMappingURL=react-country-kit.cjs.js.map