@bricks-toolkit/toolkit 0.1.14 → 0.1.16
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/dist/chunk-AGAOODRL.mjs +441 -0
- package/dist/chunk-TBI5ZOJJ.cjs +443 -0
- package/dist/index.cjs +2 -2
- package/dist/index.mjs +1 -1
- package/dist/phone/index.cjs +2 -2
- package/dist/phone/index.d.mts +2 -3
- package/dist/phone/index.d.ts +2 -3
- package/dist/phone/index.mjs +1 -1
- package/package.json +1 -1
- package/dist/chunk-AJM3NV5N.cjs +0 -528
- package/dist/chunk-G6CGG4QD.mjs +0 -526
|
@@ -0,0 +1,441 @@
|
|
|
1
|
+
import { cn } from './chunk-OCPFOFJ4.mjs';
|
|
2
|
+
import { forwardRef, useId, useState, useRef, useMemo } from 'react';
|
|
3
|
+
import { ChevronDownIcon, XMarkIcon } from '@heroicons/react/20/solid';
|
|
4
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
// src/components/Phone/countries.ts
|
|
7
|
+
var COUNTRIES = [
|
|
8
|
+
{ name: "Afghanistan", id: "AF", dialCode: "+93", maxLength: 9, flag: "\u{1F1E6}\u{1F1EB}" },
|
|
9
|
+
{ name: "Albania", id: "AL", dialCode: "+355", maxLength: 9, flag: "\u{1F1E6}\u{1F1F1}" },
|
|
10
|
+
{ name: "Algeria", id: "DZ", dialCode: "+213", maxLength: 9, flag: "\u{1F1E9}\u{1F1FF}" },
|
|
11
|
+
{ name: "Andorra", id: "AD", dialCode: "+376", maxLength: 6, flag: "\u{1F1E6}\u{1F1E9}" },
|
|
12
|
+
{ name: "Angola", id: "AO", dialCode: "+244", maxLength: 9, flag: "\u{1F1E6}\u{1F1F4}" },
|
|
13
|
+
{ name: "Argentina", id: "AR", dialCode: "+54", maxLength: 10, flag: "\u{1F1E6}\u{1F1F7}" },
|
|
14
|
+
{ name: "Armenia", id: "AM", dialCode: "+374", maxLength: 8, flag: "\u{1F1E6}\u{1F1F2}" },
|
|
15
|
+
{ name: "Australia", id: "AU", dialCode: "+61", maxLength: 9, flag: "\u{1F1E6}\u{1F1FA}" },
|
|
16
|
+
{ name: "Austria", id: "AT", dialCode: "+43", maxLength: 13, flag: "\u{1F1E6}\u{1F1F9}" },
|
|
17
|
+
{ name: "Azerbaijan", id: "AZ", dialCode: "+994", maxLength: 9, flag: "\u{1F1E6}\u{1F1FF}" },
|
|
18
|
+
{ name: "Bahrain", id: "BH", dialCode: "+973", maxLength: 8, flag: "\u{1F1E7}\u{1F1ED}" },
|
|
19
|
+
{ name: "Bangladesh", id: "BD", dialCode: "+880", maxLength: 10, flag: "\u{1F1E7}\u{1F1E9}" },
|
|
20
|
+
{ name: "Belarus", id: "BY", dialCode: "+375", maxLength: 9, flag: "\u{1F1E7}\u{1F1FE}" },
|
|
21
|
+
{ name: "Belgium", id: "BE", dialCode: "+32", maxLength: 9, flag: "\u{1F1E7}\u{1F1EA}" },
|
|
22
|
+
{ name: "Bolivia", id: "BO", dialCode: "+591", maxLength: 8, flag: "\u{1F1E7}\u{1F1F4}" },
|
|
23
|
+
{ name: "Bosnia and Herzegovina", id: "BA", dialCode: "+387", maxLength: 8, flag: "\u{1F1E7}\u{1F1E6}" },
|
|
24
|
+
{ name: "Brazil", id: "BR", dialCode: "+55", maxLength: 11, flag: "\u{1F1E7}\u{1F1F7}" },
|
|
25
|
+
{ name: "Bulgaria", id: "BG", dialCode: "+359", maxLength: 9, flag: "\u{1F1E7}\u{1F1EC}" },
|
|
26
|
+
{ name: "Cambodia", id: "KH", dialCode: "+855", maxLength: 9, flag: "\u{1F1F0}\u{1F1ED}" },
|
|
27
|
+
{ name: "Canada", id: "CA", dialCode: "+1", maxLength: 10, flag: "\u{1F1E8}\u{1F1E6}" },
|
|
28
|
+
{ name: "Chile", id: "CL", dialCode: "+56", maxLength: 9, flag: "\u{1F1E8}\u{1F1F1}" },
|
|
29
|
+
{ name: "China", id: "CN", dialCode: "+86", maxLength: 11, flag: "\u{1F1E8}\u{1F1F3}" },
|
|
30
|
+
{ name: "Colombia", id: "CO", dialCode: "+57", maxLength: 10, flag: "\u{1F1E8}\u{1F1F4}" },
|
|
31
|
+
{ name: "Costa Rica", id: "CR", dialCode: "+506", maxLength: 8, flag: "\u{1F1E8}\u{1F1F7}" },
|
|
32
|
+
{ name: "Croatia", id: "HR", dialCode: "+385", maxLength: 9, flag: "\u{1F1ED}\u{1F1F7}" },
|
|
33
|
+
{ name: "Cuba", id: "CU", dialCode: "+53", maxLength: 8, flag: "\u{1F1E8}\u{1F1FA}" },
|
|
34
|
+
{ name: "Cyprus", id: "CY", dialCode: "+357", maxLength: 8, flag: "\u{1F1E8}\u{1F1FE}" },
|
|
35
|
+
{ name: "Czech Republic", id: "CZ", dialCode: "+420", maxLength: 9, flag: "\u{1F1E8}\u{1F1FF}" },
|
|
36
|
+
{ name: "Denmark", id: "DK", dialCode: "+45", maxLength: 8, flag: "\u{1F1E9}\u{1F1F0}" },
|
|
37
|
+
{ name: "Ecuador", id: "EC", dialCode: "+593", maxLength: 9, flag: "\u{1F1EA}\u{1F1E8}" },
|
|
38
|
+
{ name: "Egypt", id: "EG", dialCode: "+20", maxLength: 10, flag: "\u{1F1EA}\u{1F1EC}" },
|
|
39
|
+
{ name: "Estonia", id: "EE", dialCode: "+372", maxLength: 8, flag: "\u{1F1EA}\u{1F1EA}" },
|
|
40
|
+
{ name: "Ethiopia", id: "ET", dialCode: "+251", maxLength: 9, flag: "\u{1F1EA}\u{1F1F9}" },
|
|
41
|
+
{ name: "Finland", id: "FI", dialCode: "+358", maxLength: 10, flag: "\u{1F1EB}\u{1F1EE}" },
|
|
42
|
+
{ name: "France", id: "FR", dialCode: "+33", maxLength: 9, flag: "\u{1F1EB}\u{1F1F7}" },
|
|
43
|
+
{ name: "Georgia", id: "GE", dialCode: "+995", maxLength: 9, flag: "\u{1F1EC}\u{1F1EA}" },
|
|
44
|
+
{ name: "Germany", id: "DE", dialCode: "+49", maxLength: 11, flag: "\u{1F1E9}\u{1F1EA}" },
|
|
45
|
+
{ name: "Ghana", id: "GH", dialCode: "+233", maxLength: 9, flag: "\u{1F1EC}\u{1F1ED}" },
|
|
46
|
+
{ name: "Greece", id: "GR", dialCode: "+30", maxLength: 10, flag: "\u{1F1EC}\u{1F1F7}" },
|
|
47
|
+
{ name: "Guatemala", id: "GT", dialCode: "+502", maxLength: 8, flag: "\u{1F1EC}\u{1F1F9}" },
|
|
48
|
+
{ name: "Hong Kong", id: "HK", dialCode: "+852", maxLength: 8, flag: "\u{1F1ED}\u{1F1F0}" },
|
|
49
|
+
{ name: "Hungary", id: "HU", dialCode: "+36", maxLength: 9, flag: "\u{1F1ED}\u{1F1FA}" },
|
|
50
|
+
{ name: "Iceland", id: "IS", dialCode: "+354", maxLength: 7, flag: "\u{1F1EE}\u{1F1F8}" },
|
|
51
|
+
{ name: "India", id: "IN", dialCode: "+91", maxLength: 10, flag: "\u{1F1EE}\u{1F1F3}" },
|
|
52
|
+
{ name: "Indonesia", id: "ID", dialCode: "+62", maxLength: 12, flag: "\u{1F1EE}\u{1F1E9}" },
|
|
53
|
+
{ name: "Iran", id: "IR", dialCode: "+98", maxLength: 10, flag: "\u{1F1EE}\u{1F1F7}" },
|
|
54
|
+
{ name: "Iraq", id: "IQ", dialCode: "+964", maxLength: 10, flag: "\u{1F1EE}\u{1F1F6}" },
|
|
55
|
+
{ name: "Ireland", id: "IE", dialCode: "+353", maxLength: 9, flag: "\u{1F1EE}\u{1F1EA}" },
|
|
56
|
+
{ name: "Israel", id: "IL", dialCode: "+972", maxLength: 9, flag: "\u{1F1EE}\u{1F1F1}" },
|
|
57
|
+
{ name: "Italy", id: "IT", dialCode: "+39", maxLength: 10, flag: "\u{1F1EE}\u{1F1F9}" },
|
|
58
|
+
{ name: "Japan", id: "JP", dialCode: "+81", maxLength: 10, flag: "\u{1F1EF}\u{1F1F5}" },
|
|
59
|
+
{ name: "Jordan", id: "JO", dialCode: "+962", maxLength: 9, flag: "\u{1F1EF}\u{1F1F4}" },
|
|
60
|
+
{ name: "Kazakhstan", id: "KZ", dialCode: "+7", maxLength: 10, flag: "\u{1F1F0}\u{1F1FF}" },
|
|
61
|
+
{ name: "Kenya", id: "KE", dialCode: "+254", maxLength: 9, flag: "\u{1F1F0}\u{1F1EA}" },
|
|
62
|
+
{ name: "Kuwait", id: "KW", dialCode: "+965", maxLength: 8, flag: "\u{1F1F0}\u{1F1FC}" },
|
|
63
|
+
{ name: "Latvia", id: "LV", dialCode: "+371", maxLength: 8, flag: "\u{1F1F1}\u{1F1FB}" },
|
|
64
|
+
{ name: "Lebanon", id: "LB", dialCode: "+961", maxLength: 8, flag: "\u{1F1F1}\u{1F1E7}" },
|
|
65
|
+
{ name: "Lithuania", id: "LT", dialCode: "+370", maxLength: 8, flag: "\u{1F1F1}\u{1F1F9}" },
|
|
66
|
+
{ name: "Luxembourg", id: "LU", dialCode: "+352", maxLength: 9, flag: "\u{1F1F1}\u{1F1FA}" },
|
|
67
|
+
{ name: "Macau", id: "MO", dialCode: "+853", maxLength: 8, flag: "\u{1F1F2}\u{1F1F4}" },
|
|
68
|
+
{ name: "Malaysia", id: "MY", dialCode: "+60", maxLength: 10, flag: "\u{1F1F2}\u{1F1FE}" },
|
|
69
|
+
{ name: "Mexico", id: "MX", dialCode: "+52", maxLength: 10, flag: "\u{1F1F2}\u{1F1FD}" },
|
|
70
|
+
{ name: "Morocco", id: "MA", dialCode: "+212", maxLength: 9, flag: "\u{1F1F2}\u{1F1E6}" },
|
|
71
|
+
{ name: "Myanmar", id: "MM", dialCode: "+95", maxLength: 9, flag: "\u{1F1F2}\u{1F1F2}" },
|
|
72
|
+
{ name: "Nepal", id: "NP", dialCode: "+977", maxLength: 10, flag: "\u{1F1F3}\u{1F1F5}" },
|
|
73
|
+
{ name: "Netherlands", id: "NL", dialCode: "+31", maxLength: 9, flag: "\u{1F1F3}\u{1F1F1}" },
|
|
74
|
+
{ name: "New Zealand", id: "NZ", dialCode: "+64", maxLength: 9, flag: "\u{1F1F3}\u{1F1FF}" },
|
|
75
|
+
{ name: "Nigeria", id: "NG", dialCode: "+234", maxLength: 10, flag: "\u{1F1F3}\u{1F1EC}" },
|
|
76
|
+
{ name: "Norway", id: "NO", dialCode: "+47", maxLength: 8, flag: "\u{1F1F3}\u{1F1F4}" },
|
|
77
|
+
{ name: "Oman", id: "OM", dialCode: "+968", maxLength: 8, flag: "\u{1F1F4}\u{1F1F2}" },
|
|
78
|
+
{ name: "Pakistan", id: "PK", dialCode: "+92", maxLength: 10, flag: "\u{1F1F5}\u{1F1F0}" },
|
|
79
|
+
{ name: "Panama", id: "PA", dialCode: "+507", maxLength: 8, flag: "\u{1F1F5}\u{1F1E6}" },
|
|
80
|
+
{ name: "Paraguay", id: "PY", dialCode: "+595", maxLength: 9, flag: "\u{1F1F5}\u{1F1FE}" },
|
|
81
|
+
{ name: "Peru", id: "PE", dialCode: "+51", maxLength: 9, flag: "\u{1F1F5}\u{1F1EA}" },
|
|
82
|
+
{ name: "Philippines", id: "PH", dialCode: "+63", maxLength: 10, flag: "\u{1F1F5}\u{1F1ED}" },
|
|
83
|
+
{ name: "Poland", id: "PL", dialCode: "+48", maxLength: 9, flag: "\u{1F1F5}\u{1F1F1}" },
|
|
84
|
+
{ name: "Portugal", id: "PT", dialCode: "+351", maxLength: 9, flag: "\u{1F1F5}\u{1F1F9}" },
|
|
85
|
+
{ name: "Qatar", id: "QA", dialCode: "+974", maxLength: 8, flag: "\u{1F1F6}\u{1F1E6}" },
|
|
86
|
+
{ name: "Romania", id: "RO", dialCode: "+40", maxLength: 9, flag: "\u{1F1F7}\u{1F1F4}" },
|
|
87
|
+
{ name: "Russia", id: "RU", dialCode: "+7", maxLength: 10, flag: "\u{1F1F7}\u{1F1FA}" },
|
|
88
|
+
{ name: "Saudi Arabia", id: "SA", dialCode: "+966", maxLength: 9, flag: "\u{1F1F8}\u{1F1E6}" },
|
|
89
|
+
{ name: "Serbia", id: "RS", dialCode: "+381", maxLength: 9, flag: "\u{1F1F7}\u{1F1F8}" },
|
|
90
|
+
{ name: "Singapore", id: "SG", dialCode: "+65", maxLength: 8, flag: "\u{1F1F8}\u{1F1EC}" },
|
|
91
|
+
{ name: "Slovakia", id: "SK", dialCode: "+421", maxLength: 9, flag: "\u{1F1F8}\u{1F1F0}" },
|
|
92
|
+
{ name: "Slovenia", id: "SI", dialCode: "+386", maxLength: 8, flag: "\u{1F1F8}\u{1F1EE}" },
|
|
93
|
+
{ name: "South Africa", id: "ZA", dialCode: "+27", maxLength: 9, flag: "\u{1F1FF}\u{1F1E6}" },
|
|
94
|
+
{ name: "South Korea", id: "KR", dialCode: "+82", maxLength: 10, flag: "\u{1F1F0}\u{1F1F7}" },
|
|
95
|
+
{ name: "Spain", id: "ES", dialCode: "+34", maxLength: 9, flag: "\u{1F1EA}\u{1F1F8}" },
|
|
96
|
+
{ name: "Sri Lanka", id: "LK", dialCode: "+94", maxLength: 9, flag: "\u{1F1F1}\u{1F1F0}" },
|
|
97
|
+
{ name: "Sweden", id: "SE", dialCode: "+46", maxLength: 9, flag: "\u{1F1F8}\u{1F1EA}" },
|
|
98
|
+
{ name: "Switzerland", id: "CH", dialCode: "+41", maxLength: 9, flag: "\u{1F1E8}\u{1F1ED}" },
|
|
99
|
+
{ name: "Syria", id: "SY", dialCode: "+963", maxLength: 9, flag: "\u{1F1F8}\u{1F1FE}" },
|
|
100
|
+
{ name: "Taiwan", id: "TW", dialCode: "+886", maxLength: 9, flag: "\u{1F1F9}\u{1F1FC}" },
|
|
101
|
+
{ name: "Thailand", id: "TH", dialCode: "+66", maxLength: 9, flag: "\u{1F1F9}\u{1F1ED}" },
|
|
102
|
+
{ name: "Tunisia", id: "TN", dialCode: "+216", maxLength: 8, flag: "\u{1F1F9}\u{1F1F3}" },
|
|
103
|
+
{ name: "Turkey", id: "TR", dialCode: "+90", maxLength: 10, flag: "\u{1F1F9}\u{1F1F7}" },
|
|
104
|
+
{ name: "Ukraine", id: "UA", dialCode: "+380", maxLength: 9, flag: "\u{1F1FA}\u{1F1E6}" },
|
|
105
|
+
{ name: "United Arab Emirates", id: "AE", dialCode: "+971", maxLength: 9, flag: "\u{1F1E6}\u{1F1EA}" },
|
|
106
|
+
{ name: "United Kingdom", id: "GB", dialCode: "+44", maxLength: 10, flag: "\u{1F1EC}\u{1F1E7}" },
|
|
107
|
+
{ name: "United States", id: "US", dialCode: "+1", maxLength: 10, flag: "\u{1F1FA}\u{1F1F8}" },
|
|
108
|
+
{ name: "Uruguay", id: "UY", dialCode: "+598", maxLength: 8, flag: "\u{1F1FA}\u{1F1FE}" },
|
|
109
|
+
{ name: "Uzbekistan", id: "UZ", dialCode: "+998", maxLength: 9, flag: "\u{1F1FA}\u{1F1FF}" },
|
|
110
|
+
{ name: "Venezuela", id: "VE", dialCode: "+58", maxLength: 10, flag: "\u{1F1FB}\u{1F1EA}" },
|
|
111
|
+
{ name: "Vietnam", id: "VN", dialCode: "+84", maxLength: 9, flag: "\u{1F1FB}\u{1F1F3}" },
|
|
112
|
+
{ name: "Yemen", id: "YE", dialCode: "+967", maxLength: 9, flag: "\u{1F1FE}\u{1F1EA}" }
|
|
113
|
+
];
|
|
114
|
+
var wrapperSizeClasses = {
|
|
115
|
+
xs: "h-6 text-xs",
|
|
116
|
+
sm: "h-8 text-sm",
|
|
117
|
+
md: "h-10 text-sm",
|
|
118
|
+
lg: "h-12 text-base",
|
|
119
|
+
xl: "h-14 text-lg"
|
|
120
|
+
};
|
|
121
|
+
var labelSizeClasses = {
|
|
122
|
+
xs: "text-[10px]",
|
|
123
|
+
sm: "text-xs",
|
|
124
|
+
md: "text-sm",
|
|
125
|
+
lg: "text-base",
|
|
126
|
+
xl: "text-lg"
|
|
127
|
+
};
|
|
128
|
+
var variantClasses = {
|
|
129
|
+
default: "border border-border bg-surface-primary shadow-sm focus-within:ring-2 focus-within:ring-primary focus-within:border-primary",
|
|
130
|
+
filled: "border-transparent bg-surface-secondary focus-within:bg-surface-primary focus-within:ring-2 focus-within:ring-primary focus-within:border-primary",
|
|
131
|
+
flushed: "border-b border-border bg-transparent rounded-none focus-within:border-primary",
|
|
132
|
+
unstyled: "border-none bg-transparent shadow-none p-0 h-auto focus-within:ring-0"
|
|
133
|
+
};
|
|
134
|
+
var stateVariantClasses = {
|
|
135
|
+
default: {
|
|
136
|
+
default: "",
|
|
137
|
+
filled: "",
|
|
138
|
+
flushed: "",
|
|
139
|
+
unstyled: ""
|
|
140
|
+
},
|
|
141
|
+
error: {
|
|
142
|
+
default: "border-error focus-within:ring-error/20 focus-within:border-error",
|
|
143
|
+
filled: "border-error bg-error/5 focus-within:bg-error/10 focus-within:ring-error/20 focus-within:border-error",
|
|
144
|
+
flushed: "border-error focus-within:border-error",
|
|
145
|
+
unstyled: ""
|
|
146
|
+
},
|
|
147
|
+
success: {
|
|
148
|
+
default: "border-success focus-within:ring-success/20 focus-within:border-success",
|
|
149
|
+
filled: "border-success bg-success/5 focus-within:bg-success/10 focus-within:ring-success/20 focus-within:border-success",
|
|
150
|
+
flushed: "border-success focus-within:border-success",
|
|
151
|
+
unstyled: ""
|
|
152
|
+
},
|
|
153
|
+
warning: {
|
|
154
|
+
default: "border-warning focus-within:ring-warning/20 focus-within:border-warning",
|
|
155
|
+
filled: "border-warning bg-warning/5 focus-within:bg-warning/10 focus-within:ring-warning/20 focus-within:border-warning",
|
|
156
|
+
flushed: "border-warning focus-within:border-warning",
|
|
157
|
+
unstyled: ""
|
|
158
|
+
}
|
|
159
|
+
};
|
|
160
|
+
var disabledClasses = "opacity-50 cursor-not-allowed bg-surface-secondary grayscale-[0.5]";
|
|
161
|
+
var Phone = forwardRef(
|
|
162
|
+
({
|
|
163
|
+
id: idProp,
|
|
164
|
+
label,
|
|
165
|
+
required,
|
|
166
|
+
helperText,
|
|
167
|
+
errorMessage,
|
|
168
|
+
successMessage,
|
|
169
|
+
warningMessage,
|
|
170
|
+
variant = "default",
|
|
171
|
+
size = "md",
|
|
172
|
+
state: stateProp = "default",
|
|
173
|
+
fullWidth = false,
|
|
174
|
+
leftElement,
|
|
175
|
+
rightElement,
|
|
176
|
+
prefix,
|
|
177
|
+
suffix,
|
|
178
|
+
wrapperClassName,
|
|
179
|
+
inputGroupClassName,
|
|
180
|
+
inputClassName,
|
|
181
|
+
labelClassName,
|
|
182
|
+
helperClassName,
|
|
183
|
+
clearable = false,
|
|
184
|
+
isLoading = false,
|
|
185
|
+
disabled,
|
|
186
|
+
className,
|
|
187
|
+
value,
|
|
188
|
+
defaultValue,
|
|
189
|
+
onChange,
|
|
190
|
+
showFlag = true,
|
|
191
|
+
defaultCountryCode = "+91",
|
|
192
|
+
autoComplete = "tel",
|
|
193
|
+
...rest
|
|
194
|
+
}, ref) => {
|
|
195
|
+
const generatedId = useId();
|
|
196
|
+
const inputId = idProp ?? generatedId;
|
|
197
|
+
const helperId = `${inputId}-helper`;
|
|
198
|
+
const stateMessageId = `${inputId}-state`;
|
|
199
|
+
const [internalError, setInternalError] = useState(null);
|
|
200
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
201
|
+
const [searchTerm, setSearchTerm] = useState("");
|
|
202
|
+
const dropdownRef = useRef(null);
|
|
203
|
+
const [internalPhone, setInternalPhone] = useState(
|
|
204
|
+
defaultValue ?? { countryCode: defaultCountryCode, phoneNumber: "" }
|
|
205
|
+
);
|
|
206
|
+
const isControlled = value !== void 0;
|
|
207
|
+
const currentPhone = isControlled ? value : internalPhone;
|
|
208
|
+
const activeCountry = COUNTRIES.find((c) => c.dialCode === currentPhone.countryCode) ?? COUNTRIES[0];
|
|
209
|
+
const mergedState = errorMessage || internalError ? "error" : stateProp;
|
|
210
|
+
const currentMessage = errorMessage || internalError || successMessage || warningMessage || helperText;
|
|
211
|
+
const triggerChange = (newValue) => {
|
|
212
|
+
if (!isControlled) {
|
|
213
|
+
setInternalPhone(newValue);
|
|
214
|
+
}
|
|
215
|
+
onChange?.(newValue);
|
|
216
|
+
};
|
|
217
|
+
const handleChange = (e) => {
|
|
218
|
+
const input = e.target.value;
|
|
219
|
+
const cleanValue = input.replace(/[^\d\s-()]/g, "");
|
|
220
|
+
const newValue = { ...currentPhone, phoneNumber: cleanValue };
|
|
221
|
+
triggerChange(newValue);
|
|
222
|
+
};
|
|
223
|
+
const handleClear = () => {
|
|
224
|
+
triggerChange({ ...currentPhone, phoneNumber: "" });
|
|
225
|
+
setInternalError(null);
|
|
226
|
+
};
|
|
227
|
+
useState(() => {
|
|
228
|
+
if (typeof window === "undefined") return;
|
|
229
|
+
const handler = (e) => {
|
|
230
|
+
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
|
231
|
+
setIsOpen(false);
|
|
232
|
+
}
|
|
233
|
+
};
|
|
234
|
+
document.addEventListener("mousedown", handler);
|
|
235
|
+
return () => document.removeEventListener("mousedown", handler);
|
|
236
|
+
});
|
|
237
|
+
const filteredCountries = useMemo(() => {
|
|
238
|
+
return COUNTRIES.filter(
|
|
239
|
+
(c) => c.name.toLowerCase().includes(searchTerm.toLowerCase()) || c.dialCode.includes(searchTerm) || c.id.toLowerCase().includes(searchTerm.toLowerCase())
|
|
240
|
+
);
|
|
241
|
+
}, [searchTerm]);
|
|
242
|
+
const hasLeftElement = leftElement !== void 0;
|
|
243
|
+
const hasRightElement = rightElement !== void 0 || clearable && currentPhone.phoneNumber;
|
|
244
|
+
const leftRadiusClass = prefix !== void 0 ? "" : "rounded-l-md";
|
|
245
|
+
const describedBy = `${helperText ? helperId : ""} ${currentMessage ? stateMessageId : ""}`.trim();
|
|
246
|
+
return /* @__PURE__ */ jsxs(
|
|
247
|
+
"div",
|
|
248
|
+
{
|
|
249
|
+
className: cn(
|
|
250
|
+
"flex flex-col gap-1",
|
|
251
|
+
fullWidth ? "w-full" : "w-fit",
|
|
252
|
+
wrapperClassName,
|
|
253
|
+
className
|
|
254
|
+
),
|
|
255
|
+
children: [
|
|
256
|
+
label !== void 0 && /* @__PURE__ */ jsxs(
|
|
257
|
+
"label",
|
|
258
|
+
{
|
|
259
|
+
htmlFor: inputId,
|
|
260
|
+
className: cn(
|
|
261
|
+
"font-black leading-none text-text mb-2 uppercase tracking-widest",
|
|
262
|
+
labelSizeClasses[size],
|
|
263
|
+
labelClassName
|
|
264
|
+
),
|
|
265
|
+
children: [
|
|
266
|
+
label,
|
|
267
|
+
required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-1 text-error", children: "*" })
|
|
268
|
+
]
|
|
269
|
+
}
|
|
270
|
+
),
|
|
271
|
+
/* @__PURE__ */ jsxs(
|
|
272
|
+
"div",
|
|
273
|
+
{
|
|
274
|
+
className: cn("flex items-stretch", fullWidth ? "w-full" : "w-fit", inputGroupClassName),
|
|
275
|
+
children: [
|
|
276
|
+
prefix !== void 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-l-md border border-r-0 border-border bg-surface-secondary px-3 text-sm text-text-secondary select-none", children: prefix }),
|
|
277
|
+
/* @__PURE__ */ jsxs(
|
|
278
|
+
"div",
|
|
279
|
+
{
|
|
280
|
+
ref: dropdownRef,
|
|
281
|
+
className: cn(
|
|
282
|
+
"relative flex flex-1 items-stretch",
|
|
283
|
+
wrapperSizeClasses[size],
|
|
284
|
+
variantClasses[variant],
|
|
285
|
+
stateVariantClasses[mergedState][variant],
|
|
286
|
+
disabled ? disabledClasses : "",
|
|
287
|
+
prefix !== void 0 && suffix !== void 0 ? "rounded-none" : prefix !== void 0 ? "rounded-l-none" : suffix !== void 0 ? "rounded-r-none" : ""
|
|
288
|
+
),
|
|
289
|
+
children: [
|
|
290
|
+
/* @__PURE__ */ jsxs(
|
|
291
|
+
"button",
|
|
292
|
+
{
|
|
293
|
+
type: "button",
|
|
294
|
+
onClick: () => {
|
|
295
|
+
setIsOpen(!isOpen);
|
|
296
|
+
},
|
|
297
|
+
disabled: Boolean(disabled) || Boolean(isLoading),
|
|
298
|
+
className: cn(
|
|
299
|
+
"relative flex items-center justify-center flex-shrink-0 px-2 sm:px-3 text-text bg-surface-secondary border-r border-border hover:bg-hover active:bg-active transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:z-10 disabled:cursor-not-allowed",
|
|
300
|
+
leftRadiusClass
|
|
301
|
+
),
|
|
302
|
+
children: [
|
|
303
|
+
showFlag && activeCountry && /* @__PURE__ */ jsx("span", { className: "mr-1.5 text-base sm:text-lg opacity-90", children: activeCountry.flag }),
|
|
304
|
+
/* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: activeCountry?.dialCode ?? defaultCountryCode }),
|
|
305
|
+
/* @__PURE__ */ jsx(
|
|
306
|
+
ChevronDownIcon,
|
|
307
|
+
{
|
|
308
|
+
className: cn(
|
|
309
|
+
"w-3.5 h-3.5 ml-1.5 text-text-secondary transition-transform",
|
|
310
|
+
isOpen && "rotate-180"
|
|
311
|
+
)
|
|
312
|
+
}
|
|
313
|
+
)
|
|
314
|
+
]
|
|
315
|
+
}
|
|
316
|
+
),
|
|
317
|
+
isOpen && /* @__PURE__ */ jsxs("div", { className: "absolute left-0 top-full z-[100] mt-1 w-64 max-h-80 overflow-hidden rounded-md border border-border bg-surface-primary shadow-lg animate-in fade-in zoom-in-95 duration-100", children: [
|
|
318
|
+
/* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 border-b border-border bg-surface-primary p-2", children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
|
|
319
|
+
/* @__PURE__ */ jsx(
|
|
320
|
+
"input",
|
|
321
|
+
{
|
|
322
|
+
autoFocus: true,
|
|
323
|
+
type: "text",
|
|
324
|
+
placeholder: "Search country...",
|
|
325
|
+
className: "w-full rounded-sm border border-border bg-surface-secondary px-2 py-1 text-sm outline-none focus:border-primary",
|
|
326
|
+
value: searchTerm,
|
|
327
|
+
onChange: (e) => setSearchTerm(e.target.value)
|
|
328
|
+
}
|
|
329
|
+
),
|
|
330
|
+
searchTerm && /* @__PURE__ */ jsx(
|
|
331
|
+
"button",
|
|
332
|
+
{
|
|
333
|
+
type: "button",
|
|
334
|
+
onClick: () => setSearchTerm(""),
|
|
335
|
+
className: "absolute right-2 text-text-muted hover:text-text",
|
|
336
|
+
children: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-4 w-4" })
|
|
337
|
+
}
|
|
338
|
+
)
|
|
339
|
+
] }) }),
|
|
340
|
+
/* @__PURE__ */ jsx("ul", { className: "overflow-y-auto p-1 max-h-64 scrollbar-thin", children: filteredCountries.length > 0 ? filteredCountries.map((c) => /* @__PURE__ */ jsxs(
|
|
341
|
+
"li",
|
|
342
|
+
{
|
|
343
|
+
role: "option",
|
|
344
|
+
tabIndex: 0,
|
|
345
|
+
"aria-selected": currentPhone.countryCode === c.dialCode,
|
|
346
|
+
className: cn(
|
|
347
|
+
"flex items-center px-2 py-1.5 text-sm rounded-sm cursor-pointer transition-colors outline-none focus:bg-hover active:bg-active",
|
|
348
|
+
currentPhone.countryCode === c.dialCode ? "bg-primary/10 text-primary font-medium" : "text-text"
|
|
349
|
+
),
|
|
350
|
+
onKeyDown: (e) => {
|
|
351
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
352
|
+
e.preventDefault();
|
|
353
|
+
triggerChange({ ...currentPhone, countryCode: c.dialCode });
|
|
354
|
+
setIsOpen(false);
|
|
355
|
+
setSearchTerm("");
|
|
356
|
+
}
|
|
357
|
+
},
|
|
358
|
+
onClick: () => {
|
|
359
|
+
triggerChange({ ...currentPhone, countryCode: c.dialCode });
|
|
360
|
+
setIsOpen(false);
|
|
361
|
+
setSearchTerm("");
|
|
362
|
+
},
|
|
363
|
+
children: [
|
|
364
|
+
/* @__PURE__ */ jsx("span", { className: "mr-2 text-base", children: c.flag }),
|
|
365
|
+
/* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: c.name }),
|
|
366
|
+
/* @__PURE__ */ jsx(
|
|
367
|
+
"span",
|
|
368
|
+
{
|
|
369
|
+
className: cn(
|
|
370
|
+
"text-xs ml-2",
|
|
371
|
+
currentPhone.countryCode === c.dialCode ? "text-primary/70" : "text-text-muted"
|
|
372
|
+
),
|
|
373
|
+
children: c.dialCode
|
|
374
|
+
}
|
|
375
|
+
)
|
|
376
|
+
]
|
|
377
|
+
},
|
|
378
|
+
c.id
|
|
379
|
+
)) : /* @__PURE__ */ jsx("li", { className: "px-2 py-3 text-center text-sm text-text-muted", children: "No countries found" }) })
|
|
380
|
+
] }),
|
|
381
|
+
hasLeftElement && /* @__PURE__ */ jsx("div", { className: "flex items-center pl-3", children: /* @__PURE__ */ jsx("span", { className: "text-text-secondary flex items-center justify-center", children: leftElement }) }),
|
|
382
|
+
/* @__PURE__ */ jsx(
|
|
383
|
+
"input",
|
|
384
|
+
{
|
|
385
|
+
ref,
|
|
386
|
+
...rest,
|
|
387
|
+
id: inputId,
|
|
388
|
+
disabled: Boolean(disabled) || Boolean(isLoading),
|
|
389
|
+
type: "tel",
|
|
390
|
+
inputMode: "numeric",
|
|
391
|
+
value: currentPhone.phoneNumber,
|
|
392
|
+
onChange: handleChange,
|
|
393
|
+
autoComplete,
|
|
394
|
+
"aria-invalid": mergedState === "error" ? true : void 0,
|
|
395
|
+
"aria-describedby": describedBy,
|
|
396
|
+
"aria-required": required,
|
|
397
|
+
className: cn(
|
|
398
|
+
"flex h-full w-full bg-transparent px-3 py-1 text-sm outline-none transition-colors placeholder:text-text-muted disabled:cursor-not-allowed",
|
|
399
|
+
inputClassName
|
|
400
|
+
)
|
|
401
|
+
}
|
|
402
|
+
),
|
|
403
|
+
hasRightElement && /* @__PURE__ */ jsxs("div", { className: "flex items-center pr-2 space-x-1", children: [
|
|
404
|
+
clearable && currentPhone.phoneNumber && !disabled && !isLoading && /* @__PURE__ */ jsx(
|
|
405
|
+
"button",
|
|
406
|
+
{
|
|
407
|
+
type: "button",
|
|
408
|
+
onClick: handleClear,
|
|
409
|
+
className: "p-0.5 rounded-full text-text-muted hover:text-text hover:bg-hover transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary",
|
|
410
|
+
children: /* @__PURE__ */ jsx(XMarkIcon, { className: "w-4 h-4" })
|
|
411
|
+
}
|
|
412
|
+
),
|
|
413
|
+
rightElement && /* @__PURE__ */ jsx("span", { className: "text-text-secondary flex items-center justify-center", children: rightElement })
|
|
414
|
+
] })
|
|
415
|
+
]
|
|
416
|
+
}
|
|
417
|
+
),
|
|
418
|
+
suffix !== void 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-r-md border border-l-0 border-border bg-surface-secondary px-3 text-sm text-text-secondary select-none", children: suffix })
|
|
419
|
+
]
|
|
420
|
+
}
|
|
421
|
+
),
|
|
422
|
+
currentMessage && /* @__PURE__ */ jsx(
|
|
423
|
+
"p",
|
|
424
|
+
{
|
|
425
|
+
id: stateMessageId,
|
|
426
|
+
className: cn(
|
|
427
|
+
"text-xs mt-1",
|
|
428
|
+
mergedState === "error" ? "text-error" : mergedState === "success" ? "text-success" : mergedState === "warning" ? "text-warning" : "text-text-muted",
|
|
429
|
+
helperClassName
|
|
430
|
+
),
|
|
431
|
+
children: currentMessage
|
|
432
|
+
}
|
|
433
|
+
)
|
|
434
|
+
]
|
|
435
|
+
}
|
|
436
|
+
);
|
|
437
|
+
}
|
|
438
|
+
);
|
|
439
|
+
Phone.displayName = "Phone";
|
|
440
|
+
|
|
441
|
+
export { Phone };
|