@bricks-toolkit/toolkit 0.1.15 → 0.1.17
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-4GCC6FV4.cjs +449 -0
- package/dist/chunk-E6HGGSXQ.mjs +447 -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-C2MMUQPD.mjs +0 -526
- package/dist/chunk-MP3GFB25.cjs +0 -528
|
@@ -0,0 +1,447 @@
|
|
|
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
|
+
if (defaultValue) {
|
|
205
|
+
return {
|
|
206
|
+
countryCode: defaultValue.countryCode || defaultCountryCode,
|
|
207
|
+
phoneNumber: defaultValue.phoneNumber || ""
|
|
208
|
+
};
|
|
209
|
+
}
|
|
210
|
+
return { countryCode: defaultCountryCode, phoneNumber: "" };
|
|
211
|
+
});
|
|
212
|
+
const isControlled = value !== void 0;
|
|
213
|
+
const currentPhone = isControlled ? value : internalPhone;
|
|
214
|
+
const activeCountry = COUNTRIES.find((c) => c.dialCode === currentPhone.countryCode) ?? COUNTRIES[0];
|
|
215
|
+
const mergedState = errorMessage || internalError ? "error" : stateProp;
|
|
216
|
+
const currentMessage = errorMessage || internalError || successMessage || warningMessage || helperText;
|
|
217
|
+
const triggerChange = (newValue) => {
|
|
218
|
+
if (!isControlled) {
|
|
219
|
+
setInternalPhone(newValue);
|
|
220
|
+
}
|
|
221
|
+
onChange?.(newValue);
|
|
222
|
+
};
|
|
223
|
+
const handleChange = (e) => {
|
|
224
|
+
const input = e.target.value;
|
|
225
|
+
const cleanValue = input.replace(/[^\d\s-()]/g, "");
|
|
226
|
+
const newValue = { ...currentPhone, phoneNumber: cleanValue };
|
|
227
|
+
triggerChange(newValue);
|
|
228
|
+
};
|
|
229
|
+
const handleClear = () => {
|
|
230
|
+
triggerChange({ ...currentPhone, phoneNumber: "" });
|
|
231
|
+
setInternalError(null);
|
|
232
|
+
};
|
|
233
|
+
useState(() => {
|
|
234
|
+
if (typeof window === "undefined") return;
|
|
235
|
+
const handler = (e) => {
|
|
236
|
+
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
|
237
|
+
setIsOpen(false);
|
|
238
|
+
}
|
|
239
|
+
};
|
|
240
|
+
document.addEventListener("mousedown", handler);
|
|
241
|
+
return () => document.removeEventListener("mousedown", handler);
|
|
242
|
+
});
|
|
243
|
+
const filteredCountries = useMemo(() => {
|
|
244
|
+
return COUNTRIES.filter(
|
|
245
|
+
(c) => c.name.toLowerCase().includes(searchTerm.toLowerCase()) || c.dialCode.includes(searchTerm) || c.id.toLowerCase().includes(searchTerm.toLowerCase())
|
|
246
|
+
);
|
|
247
|
+
}, [searchTerm]);
|
|
248
|
+
const hasLeftElement = leftElement !== void 0;
|
|
249
|
+
const hasRightElement = rightElement !== void 0 || clearable && currentPhone.phoneNumber;
|
|
250
|
+
const leftRadiusClass = prefix !== void 0 ? "" : "rounded-l-md";
|
|
251
|
+
const describedBy = `${helperText ? helperId : ""} ${currentMessage ? stateMessageId : ""}`.trim();
|
|
252
|
+
return /* @__PURE__ */ jsxs(
|
|
253
|
+
"div",
|
|
254
|
+
{
|
|
255
|
+
className: cn(
|
|
256
|
+
"flex flex-col gap-1",
|
|
257
|
+
fullWidth ? "w-full" : "w-fit",
|
|
258
|
+
wrapperClassName,
|
|
259
|
+
className
|
|
260
|
+
),
|
|
261
|
+
children: [
|
|
262
|
+
label !== void 0 && /* @__PURE__ */ jsxs(
|
|
263
|
+
"label",
|
|
264
|
+
{
|
|
265
|
+
htmlFor: inputId,
|
|
266
|
+
className: cn(
|
|
267
|
+
"font-black leading-none text-text mb-2 uppercase tracking-widest",
|
|
268
|
+
labelSizeClasses[size],
|
|
269
|
+
labelClassName
|
|
270
|
+
),
|
|
271
|
+
children: [
|
|
272
|
+
label,
|
|
273
|
+
required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-1 text-error", children: "*" })
|
|
274
|
+
]
|
|
275
|
+
}
|
|
276
|
+
),
|
|
277
|
+
/* @__PURE__ */ jsxs(
|
|
278
|
+
"div",
|
|
279
|
+
{
|
|
280
|
+
className: cn("flex items-stretch", fullWidth ? "w-full" : "w-fit", inputGroupClassName),
|
|
281
|
+
children: [
|
|
282
|
+
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 }),
|
|
283
|
+
/* @__PURE__ */ jsxs(
|
|
284
|
+
"div",
|
|
285
|
+
{
|
|
286
|
+
ref: dropdownRef,
|
|
287
|
+
className: cn(
|
|
288
|
+
"relative flex flex-1 items-stretch",
|
|
289
|
+
wrapperSizeClasses[size],
|
|
290
|
+
variantClasses[variant],
|
|
291
|
+
stateVariantClasses[mergedState][variant],
|
|
292
|
+
disabled ? disabledClasses : "",
|
|
293
|
+
prefix !== void 0 && suffix !== void 0 ? "rounded-none" : prefix !== void 0 ? "rounded-l-none" : suffix !== void 0 ? "rounded-r-none" : ""
|
|
294
|
+
),
|
|
295
|
+
children: [
|
|
296
|
+
/* @__PURE__ */ jsxs(
|
|
297
|
+
"button",
|
|
298
|
+
{
|
|
299
|
+
type: "button",
|
|
300
|
+
onClick: () => {
|
|
301
|
+
setIsOpen(!isOpen);
|
|
302
|
+
},
|
|
303
|
+
disabled: Boolean(disabled) || Boolean(isLoading),
|
|
304
|
+
className: cn(
|
|
305
|
+
"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",
|
|
306
|
+
leftRadiusClass
|
|
307
|
+
),
|
|
308
|
+
children: [
|
|
309
|
+
showFlag && activeCountry && /* @__PURE__ */ jsx("span", { className: "mr-1.5 text-base sm:text-lg opacity-90", children: activeCountry.flag }),
|
|
310
|
+
/* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: activeCountry?.dialCode ?? defaultCountryCode }),
|
|
311
|
+
/* @__PURE__ */ jsx(
|
|
312
|
+
ChevronDownIcon,
|
|
313
|
+
{
|
|
314
|
+
className: cn(
|
|
315
|
+
"w-3.5 h-3.5 ml-1.5 text-text-secondary transition-transform",
|
|
316
|
+
isOpen && "rotate-180"
|
|
317
|
+
)
|
|
318
|
+
}
|
|
319
|
+
)
|
|
320
|
+
]
|
|
321
|
+
}
|
|
322
|
+
),
|
|
323
|
+
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: [
|
|
324
|
+
/* @__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: [
|
|
325
|
+
/* @__PURE__ */ jsx(
|
|
326
|
+
"input",
|
|
327
|
+
{
|
|
328
|
+
autoFocus: true,
|
|
329
|
+
type: "text",
|
|
330
|
+
placeholder: "Search country...",
|
|
331
|
+
className: "w-full rounded-sm border border-border bg-surface-secondary px-2 py-1 text-sm outline-none focus:border-primary",
|
|
332
|
+
value: searchTerm,
|
|
333
|
+
onChange: (e) => setSearchTerm(e.target.value)
|
|
334
|
+
}
|
|
335
|
+
),
|
|
336
|
+
searchTerm && /* @__PURE__ */ jsx(
|
|
337
|
+
"button",
|
|
338
|
+
{
|
|
339
|
+
type: "button",
|
|
340
|
+
onClick: () => setSearchTerm(""),
|
|
341
|
+
className: "absolute right-2 text-text-muted hover:text-text",
|
|
342
|
+
children: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-4 w-4" })
|
|
343
|
+
}
|
|
344
|
+
)
|
|
345
|
+
] }) }),
|
|
346
|
+
/* @__PURE__ */ jsx("ul", { className: "overflow-y-auto p-1 max-h-64 scrollbar-thin", children: filteredCountries.length > 0 ? filteredCountries.map((c) => /* @__PURE__ */ jsxs(
|
|
347
|
+
"li",
|
|
348
|
+
{
|
|
349
|
+
role: "option",
|
|
350
|
+
tabIndex: 0,
|
|
351
|
+
"aria-selected": currentPhone.countryCode === c.dialCode,
|
|
352
|
+
className: cn(
|
|
353
|
+
"flex items-center px-2 py-1.5 text-sm rounded-sm cursor-pointer transition-colors outline-none focus:bg-hover active:bg-active",
|
|
354
|
+
currentPhone.countryCode === c.dialCode ? "bg-primary/10 text-primary font-medium" : "text-text"
|
|
355
|
+
),
|
|
356
|
+
onKeyDown: (e) => {
|
|
357
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
358
|
+
e.preventDefault();
|
|
359
|
+
triggerChange({ ...currentPhone, countryCode: c.dialCode });
|
|
360
|
+
setIsOpen(false);
|
|
361
|
+
setSearchTerm("");
|
|
362
|
+
}
|
|
363
|
+
},
|
|
364
|
+
onClick: () => {
|
|
365
|
+
triggerChange({ ...currentPhone, countryCode: c.dialCode });
|
|
366
|
+
setIsOpen(false);
|
|
367
|
+
setSearchTerm("");
|
|
368
|
+
},
|
|
369
|
+
children: [
|
|
370
|
+
/* @__PURE__ */ jsx("span", { className: "mr-2 text-base", children: c.flag }),
|
|
371
|
+
/* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: c.name }),
|
|
372
|
+
/* @__PURE__ */ jsx(
|
|
373
|
+
"span",
|
|
374
|
+
{
|
|
375
|
+
className: cn(
|
|
376
|
+
"text-xs ml-2",
|
|
377
|
+
currentPhone.countryCode === c.dialCode ? "text-primary/70" : "text-text-muted"
|
|
378
|
+
),
|
|
379
|
+
children: c.dialCode
|
|
380
|
+
}
|
|
381
|
+
)
|
|
382
|
+
]
|
|
383
|
+
},
|
|
384
|
+
c.id
|
|
385
|
+
)) : /* @__PURE__ */ jsx("li", { className: "px-2 py-3 text-center text-sm text-text-muted", children: "No countries found" }) })
|
|
386
|
+
] }),
|
|
387
|
+
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 }) }),
|
|
388
|
+
/* @__PURE__ */ jsx(
|
|
389
|
+
"input",
|
|
390
|
+
{
|
|
391
|
+
ref,
|
|
392
|
+
...rest,
|
|
393
|
+
id: inputId,
|
|
394
|
+
disabled: Boolean(disabled) || Boolean(isLoading),
|
|
395
|
+
type: "tel",
|
|
396
|
+
inputMode: "numeric",
|
|
397
|
+
value: currentPhone.phoneNumber,
|
|
398
|
+
onChange: handleChange,
|
|
399
|
+
autoComplete,
|
|
400
|
+
"aria-invalid": mergedState === "error" ? true : void 0,
|
|
401
|
+
"aria-describedby": describedBy,
|
|
402
|
+
"aria-required": required,
|
|
403
|
+
className: cn(
|
|
404
|
+
"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",
|
|
405
|
+
inputClassName
|
|
406
|
+
)
|
|
407
|
+
}
|
|
408
|
+
),
|
|
409
|
+
hasRightElement && /* @__PURE__ */ jsxs("div", { className: "flex items-center pr-2 space-x-1", children: [
|
|
410
|
+
clearable && currentPhone.phoneNumber && !disabled && !isLoading && /* @__PURE__ */ jsx(
|
|
411
|
+
"button",
|
|
412
|
+
{
|
|
413
|
+
type: "button",
|
|
414
|
+
onClick: handleClear,
|
|
415
|
+
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",
|
|
416
|
+
children: /* @__PURE__ */ jsx(XMarkIcon, { className: "w-4 h-4" })
|
|
417
|
+
}
|
|
418
|
+
),
|
|
419
|
+
rightElement && /* @__PURE__ */ jsx("span", { className: "text-text-secondary flex items-center justify-center", children: rightElement })
|
|
420
|
+
] })
|
|
421
|
+
]
|
|
422
|
+
}
|
|
423
|
+
),
|
|
424
|
+
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 })
|
|
425
|
+
]
|
|
426
|
+
}
|
|
427
|
+
),
|
|
428
|
+
currentMessage && /* @__PURE__ */ jsx(
|
|
429
|
+
"p",
|
|
430
|
+
{
|
|
431
|
+
id: stateMessageId,
|
|
432
|
+
className: cn(
|
|
433
|
+
"text-xs mt-1",
|
|
434
|
+
mergedState === "error" ? "text-error" : mergedState === "success" ? "text-success" : mergedState === "warning" ? "text-warning" : "text-text-muted",
|
|
435
|
+
helperClassName
|
|
436
|
+
),
|
|
437
|
+
children: currentMessage
|
|
438
|
+
}
|
|
439
|
+
)
|
|
440
|
+
]
|
|
441
|
+
}
|
|
442
|
+
);
|
|
443
|
+
}
|
|
444
|
+
);
|
|
445
|
+
Phone.displayName = "Phone";
|
|
446
|
+
|
|
447
|
+
export { Phone };
|
package/dist/index.cjs
CHANGED
|
@@ -16,7 +16,7 @@ var chunkS7VEND5Z_cjs = require('./chunk-S7VEND5Z.cjs');
|
|
|
16
16
|
var chunk56ILK7Y4_cjs = require('./chunk-56ILK7Y4.cjs');
|
|
17
17
|
var chunkNRZIXK35_cjs = require('./chunk-NRZIXK35.cjs');
|
|
18
18
|
var chunk5RKET2JO_cjs = require('./chunk-5RKET2JO.cjs');
|
|
19
|
-
var
|
|
19
|
+
var chunk4GCC6FV4_cjs = require('./chunk-4GCC6FV4.cjs');
|
|
20
20
|
var chunkVRZFAKSV_cjs = require('./chunk-VRZFAKSV.cjs');
|
|
21
21
|
var chunk7R5JRJ2W_cjs = require('./chunk-7R5JRJ2W.cjs');
|
|
22
22
|
var chunkOEU5VG3D_cjs = require('./chunk-OEU5VG3D.cjs');
|
|
@@ -697,7 +697,7 @@ Object.defineProperty(exports, "PasswordInput", {
|
|
|
697
697
|
});
|
|
698
698
|
Object.defineProperty(exports, "Phone", {
|
|
699
699
|
enumerable: true,
|
|
700
|
-
get: function () { return
|
|
700
|
+
get: function () { return chunk4GCC6FV4_cjs.Phone; }
|
|
701
701
|
});
|
|
702
702
|
Object.defineProperty(exports, "RadioButton", {
|
|
703
703
|
enumerable: true,
|
package/dist/index.mjs
CHANGED
|
@@ -14,7 +14,7 @@ export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTable, SkeletonText } f
|
|
|
14
14
|
export { MultiSelect } from './chunk-JKPNJ4PZ.mjs';
|
|
15
15
|
export { OtpInput } from './chunk-RYWDZHKG.mjs';
|
|
16
16
|
export { PasswordInput } from './chunk-446OJWC6.mjs';
|
|
17
|
-
export { Phone } from './chunk-
|
|
17
|
+
export { Phone } from './chunk-E6HGGSXQ.mjs';
|
|
18
18
|
export { RadioButton } from './chunk-DN2GFJF4.mjs';
|
|
19
19
|
export { Select } from './chunk-TIVSMCXZ.mjs';
|
|
20
20
|
export { Pagination, Table } from './chunk-7364SUK6.mjs';
|
package/dist/phone/index.cjs
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunk4GCC6FV4_cjs = require('../chunk-4GCC6FV4.cjs');
|
|
4
4
|
require('../chunk-L5VQZZVR.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
Object.defineProperty(exports, "Phone", {
|
|
9
9
|
enumerable: true,
|
|
10
|
-
get: function () { return
|
|
10
|
+
get: function () { return chunk4GCC6FV4_cjs.Phone; }
|
|
11
11
|
});
|
package/dist/phone/index.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { InputHTMLAttributes, ReactNode } from 'react';
|
|
1
|
+
import React__default, { InputHTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
|
|
3
3
|
type PhoneVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
|
|
4
4
|
type PhoneSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
@@ -13,7 +13,6 @@ interface PhoneProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'
|
|
|
13
13
|
onChange?: (value: PhoneValue) => void;
|
|
14
14
|
showFlag?: boolean;
|
|
15
15
|
defaultCountryCode?: string;
|
|
16
|
-
defaultCountry?: string;
|
|
17
16
|
label?: string;
|
|
18
17
|
required?: boolean;
|
|
19
18
|
helperText?: string;
|
|
@@ -37,6 +36,6 @@ interface PhoneProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'
|
|
|
37
36
|
isLoading?: boolean;
|
|
38
37
|
}
|
|
39
38
|
|
|
40
|
-
declare const Phone:
|
|
39
|
+
declare const Phone: React__default.ForwardRefExoticComponent<PhoneProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
41
40
|
|
|
42
41
|
export { Phone, type PhoneProps, type PhoneSize, type PhoneState, type PhoneValue, type PhoneVariant };
|
package/dist/phone/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { InputHTMLAttributes, ReactNode } from 'react';
|
|
1
|
+
import React__default, { InputHTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
|
|
3
3
|
type PhoneVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
|
|
4
4
|
type PhoneSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
@@ -13,7 +13,6 @@ interface PhoneProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'
|
|
|
13
13
|
onChange?: (value: PhoneValue) => void;
|
|
14
14
|
showFlag?: boolean;
|
|
15
15
|
defaultCountryCode?: string;
|
|
16
|
-
defaultCountry?: string;
|
|
17
16
|
label?: string;
|
|
18
17
|
required?: boolean;
|
|
19
18
|
helperText?: string;
|
|
@@ -37,6 +36,6 @@ interface PhoneProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'
|
|
|
37
36
|
isLoading?: boolean;
|
|
38
37
|
}
|
|
39
38
|
|
|
40
|
-
declare const Phone:
|
|
39
|
+
declare const Phone: React__default.ForwardRefExoticComponent<PhoneProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
41
40
|
|
|
42
41
|
export { Phone, type PhoneProps, type PhoneSize, type PhoneState, type PhoneValue, type PhoneVariant };
|
package/dist/phone/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { Phone } from '../chunk-
|
|
1
|
+
export { Phone } from '../chunk-E6HGGSXQ.mjs';
|
|
2
2
|
import '../chunk-OCPFOFJ4.mjs';
|