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