react-country-kit-ui 1.1.2 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +83 -0
- package/package.json +3 -2
package/README.md
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
# react-country-kit-ui
|
|
2
|
+
|
|
3
|
+
Premium, accessible, and highly customizable React components for countries, currencies, timezones, and more. Built on top of **Radix UI** and styled with **Tailwind CSS**.
|
|
4
|
+
|
|
5
|
+
Part of the [react-country-kit](https://github.com/kishormainali/react-country-kit) ecosystem.
|
|
6
|
+
|
|
7
|
+
## 🚀 Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install react-country-kit-ui react-country-kit-core
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### Peer Dependencies
|
|
14
|
+
Ensure you have the following installed in your project:
|
|
15
|
+
```bash
|
|
16
|
+
npm install lucide-react clsx tailwind-merge class-variance-authority @radix-ui/react-popover
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## 🎨 Components
|
|
20
|
+
|
|
21
|
+
### CountryPicker
|
|
22
|
+
A searchable country selection component with flag support.
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import { CountryPicker } from 'react-country-kit-ui';
|
|
26
|
+
|
|
27
|
+
function App() {
|
|
28
|
+
return (
|
|
29
|
+
<CountryPicker
|
|
30
|
+
label="Country"
|
|
31
|
+
placeholder="Select a country..."
|
|
32
|
+
showFlag={true}
|
|
33
|
+
showPhoneCode={true}
|
|
34
|
+
onChange={(country) => console.log(country)}
|
|
35
|
+
/>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### PhoneInput
|
|
41
|
+
International phone number input with automatic formatting and country detection.
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
import { PhoneInput } from 'react-country-kit-ui';
|
|
45
|
+
|
|
46
|
+
function App() {
|
|
47
|
+
return (
|
|
48
|
+
<PhoneInput
|
|
49
|
+
label="Phone Number"
|
|
50
|
+
defaultCountryIso2="US"
|
|
51
|
+
onChange={(value) => console.log(value)}
|
|
52
|
+
/>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Other Components
|
|
58
|
+
- `CurrencyPicker`: Select currencies with localized symbols.
|
|
59
|
+
- `TimezonePicker`: Search and select timezones by IANA name or offset.
|
|
60
|
+
- `LanguagePicker`: Support for 180+ languages with native names.
|
|
61
|
+
- `DivisionPicker`: State/Province picker filtered by country.
|
|
62
|
+
- `CountryMultiSelect`: Select multiple countries with chips/badges.
|
|
63
|
+
|
|
64
|
+
## 🛠 Primitives
|
|
65
|
+
|
|
66
|
+
You can also use the underlying primitives to build your own custom pickers:
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
import {
|
|
70
|
+
Popover,
|
|
71
|
+
PopoverContent,
|
|
72
|
+
PopoverTrigger,
|
|
73
|
+
CommandRoot,
|
|
74
|
+
CommandInput,
|
|
75
|
+
CommandList,
|
|
76
|
+
CommandItem,
|
|
77
|
+
Flag
|
|
78
|
+
} from 'react-country-kit-ui';
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## 📄 License
|
|
82
|
+
|
|
83
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-country-kit-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
|
+
"type": "module",
|
|
4
5
|
"description": "Premium Shadcn/UI (Tailwind CSS + Radix UI) components for react-country-kit.",
|
|
5
6
|
"author": "Kishor Mainali",
|
|
6
7
|
"license": "MIT",
|
|
@@ -24,7 +25,7 @@
|
|
|
24
25
|
"tailwindcss": ">=3.0.0"
|
|
25
26
|
},
|
|
26
27
|
"dependencies": {
|
|
27
|
-
"react-country-kit-core": "^1.
|
|
28
|
+
"react-country-kit-core": "^1.2.0",
|
|
28
29
|
"libphonenumber-js": "^1.12.42"
|
|
29
30
|
},
|
|
30
31
|
"devDependencies": {
|