react-country-kit 1.1.2 → 1.1.3

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.
Files changed (2) hide show
  1. package/README.md +33 -58
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,88 +1,63 @@
1
1
  # react-country-kit
2
2
 
3
- Beautiful, accessible, and performant React components for choosing countries, currencies, timezones, and more.
3
+ Simple, accessible, and high-performance React components for choosing countries, currencies, timezones, and more. This package provides the **Vanilla CSS** version of the components, which are zero-dependency (other than React and core data).
4
4
 
5
- ## Features
5
+ ## 🚀 Features
6
6
 
7
- - **Standard & Shadcn Variants**: Comes with two pre-built styles.
8
- - **Accessible**: Built with accessibility in mind (ARIA roles, keyboard navigation).
9
- - **Responsive**: Works perfectly on mobile and desktop.
10
- - **Reliable Flags**: Automatic image fallback for Windows users.
11
- - **Tree-shakeable**: Only bundle what you use.
7
+ - **Zero-Config**: Works out of the box with any React project.
8
+ - **Accessible**: Full keyboard navigation and ARIA support.
9
+ - **Responsive**: Optimized for both mobile and desktop views.
10
+ - **Reliable Flags**: Automatic image fallback for Windows and older systems.
11
+ - **Lightweight**: Tree-shakeable and optimized for bundle size.
12
12
 
13
- ## Installation
13
+ ## 📦 Installation
14
14
 
15
15
  ```bash
16
16
  npm install react-country-kit react-country-kit-core
17
17
  ```
18
18
 
19
- ## Usage
19
+ ## 🛠 Usage
20
20
 
21
- ### 1. Standard UI (Vanilla CSS)
22
-
23
- Simple, clean components with no external styling dependencies.
21
+ ### Import Styles
22
+ To use the vanilla components, you must import the bundled CSS:
24
23
 
25
24
  ```tsx
26
- import { CountryPicker, PhoneInput } from 'react-country-kit';
27
- import 'react-country-kit/styles'; // Don't forget the CSS!
28
-
29
- function StandardApp() {
30
- return (
31
- <div className="space-y-4">
32
- <CountryPicker onChange={console.log} label="Select Country" />
33
- <PhoneInput onChange={console.log} label="Phone Number" />
34
- </div>
35
- );
36
- }
25
+ import 'react-country-kit/dist/style.css';
37
26
  ```
38
27
 
39
- ### 2. Shadcn/UI Variant (Tailwind + Radix)
40
-
41
- Premium, modern components that blend perfectly with your Shadcn/UI project.
28
+ ### Basic Component Usage
42
29
 
43
30
  ```tsx
44
- import { CountryPicker } from 'react-country-kit/ui';
31
+ import { CountryPicker, PhoneInput } from 'react-country-kit';
45
32
 
46
- function ShadcnApp() {
33
+ function App() {
47
34
  return (
48
- <div className="p-10 max-w-md">
35
+ <div className="form-group">
49
36
  <CountryPicker
50
- onChange={console.log}
51
- label="Destination"
52
- showFlag={true}
53
- showPhoneCode={true}
37
+ label="Select Country"
38
+ onChange={(c) => console.log(c)}
39
+ />
40
+
41
+ <PhoneInput
42
+ label="Phone Number"
43
+ onChange={(v) => console.log(v)}
54
44
  />
55
45
  </div>
56
46
  );
57
47
  }
58
48
  ```
59
49
 
60
- > **Note**: The Shadcn variant requires `tailwindcss`, `clsx`, `tailwind-merge`, and `@radix-ui/react-popover` as peer dependencies.
61
-
62
- ## Components List
63
-
64
- - `CountryPicker`
65
- - `CountryMultiSelect`
66
- - `PhoneInput`
67
- - `CurrencyPicker`
68
- - `CurrencyMultiSelect`
69
- - `TimezonePicker`
70
- - `LanguagePicker`
71
- - `DivisionPicker`
72
-
73
- ## Props
74
-
75
- Most components share a similar API:
50
+ ## 🎨 Available Components
76
51
 
77
- | Prop | Type | Description |
78
- | :--- | :--- | :--- |
79
- | `value` | `T` | The current selected value. |
80
- | `onChange` | `(val: T) => void` | Callback when value changes. |
81
- | `label` | `string` | Optional field label. |
82
- | `placeholder` | `string` | Input placeholder. |
83
- | `showFlag` | `boolean` | Whether to show the country flag (default: true). |
84
- | `disabled` | `boolean` | Disable the component. |
52
+ - `CountryPicker`: Single country selector.
53
+ - `CountryMultiSelect`: Multiple country selector with badges.
54
+ - `PhoneInput`: Localized phone input with country selector.
55
+ - `CurrencyPicker`: Currency selector with symbols.
56
+ - `CurrencyMultiSelect`: Multiple currency selector.
57
+ - `TimezonePicker`: Searchable timezone selector.
58
+ - `LanguagePicker`: Language selector (supports native names).
59
+ - `DivisionPicker`: State/Province selector filtered by country.
85
60
 
86
- ## License
61
+ ## 📄 License
87
62
 
88
63
  MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-country-kit",
3
- "version": "1.1.2",
3
+ "version": "1.1.3",
4
4
  "description": "A comprehensive React component library for country, currency, timezone, language, and division picking. Supports both vanilla CSS and shadcn/Tailwind CSS variants.",
5
5
  "author": "Kishor Mainali",
6
6
  "license": "MIT",
@@ -83,7 +83,7 @@
83
83
  "vite-plugin-dts": "^3.7.0"
84
84
  },
85
85
  "dependencies": {
86
- "react-country-kit-core": "^1.1.2",
86
+ "react-country-kit-core": "^1.1.3",
87
87
  "libphonenumber-js": "^1.12.42"
88
88
  },
89
89
  "repository": {
@@ -94,4 +94,4 @@
94
94
  "publishConfig": {
95
95
  "access": "public"
96
96
  }
97
- }
97
+ }