lizaui 9.0.2 → 9.0.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.
- package/dist/button/index.cjs.js +1 -1
- package/dist/button/index.es.js +1 -1
- package/dist/calendar/index.cjs.js +47 -796
- package/dist/calendar/index.cjs.js.map +1 -1
- package/dist/calendar/index.es.js +11 -760
- package/dist/calendar/index.es.js.map +1 -1
- package/dist/checkbox/index.cjs.js +1 -1
- package/dist/checkbox/index.es.js +1 -1
- package/dist/chip/index.cjs.js +9 -9
- package/dist/chip/index.cjs.js.map +1 -1
- package/dist/chip/index.es.js +2 -2
- package/dist/chunks/{button-MKhaqe0K.js → button-B0fpJrMg.js} +3 -3
- package/dist/chunks/{button-MKhaqe0K.js.map → button-B0fpJrMg.js.map} +1 -1
- package/dist/chunks/{button-BKebd9mx.js → button-d5z8H59K.js} +13 -13
- package/dist/chunks/{button-BKebd9mx.js.map → button-d5z8H59K.js.map} +1 -1
- package/dist/chunks/{checkbox-DpLEjjb9.js → checkbox-C1Sssumg.js} +3 -3
- package/dist/chunks/{checkbox-DpLEjjb9.js.map → checkbox-C1Sssumg.js.map} +1 -1
- package/dist/chunks/{checkbox-BoxBfskJ.js → checkbox-ovjcc7jF.js} +15 -15
- package/dist/chunks/{checkbox-BoxBfskJ.js.map → checkbox-ovjcc7jF.js.map} +1 -1
- package/dist/chunks/{index-BHpUy2Ix.js → index-CEKmKomA.js} +2 -2
- package/dist/chunks/{index-BHpUy2Ix.js.map → index-CEKmKomA.js.map} +1 -1
- package/dist/chunks/{index-CATvGmak.js → index-C_sOsPRt.js} +5 -5
- package/dist/chunks/{index-CATvGmak.js.map → index-C_sOsPRt.js.map} +1 -1
- package/dist/chunks/{index-CNDtGisb.js → index-DaMyCNJ8.js} +2 -2
- package/dist/chunks/{index-CNDtGisb.js.map → index-DaMyCNJ8.js.map} +1 -1
- package/dist/chunks/{label-error-DkVGsF5w.js → label-error-BTCuInp7.js} +2 -2
- package/dist/chunks/{label-error-DkVGsF5w.js.map → label-error-BTCuInp7.js.map} +1 -1
- package/dist/chunks/label-error-C8lIsfXu.js +9 -0
- package/dist/chunks/{label-error-2QXnvbxJ.js.map → label-error-C8lIsfXu.js.map} +1 -1
- package/dist/chunks/{ripple-CTAKSntE.js → ripple-Bm6QamOy.js} +4 -4
- package/dist/chunks/{ripple-CTAKSntE.js.map → ripple-Bm6QamOy.js.map} +1 -1
- package/dist/chunks/{scroll-area-CNEU8oOo.js → scroll-area-C0NhSIO2.js} +31 -31
- package/dist/chunks/{scroll-area-CNEU8oOo.js.map → scroll-area-C0NhSIO2.js.map} +1 -1
- package/dist/chunks/{scroll-area-3h3tgoqp.js → scroll-area-JgKF61tc.js} +3 -3
- package/dist/chunks/{scroll-area-3h3tgoqp.js.map → scroll-area-JgKF61tc.js.map} +1 -1
- package/dist/chunks/{select-BW-plZA9.js → select-DGnc8VJi.js} +73 -73
- package/dist/chunks/{select-BW-plZA9.js.map → select-DGnc8VJi.js.map} +1 -1
- package/dist/chunks/{select-wGmz50gN.js → select-Dpyj5dUk.js} +3 -3
- package/dist/chunks/{select-wGmz50gN.js.map → select-Dpyj5dUk.js.map} +1 -1
- package/dist/chunks/{styled-components.browser.esm-DbYXI9h_.js → styled-components.browser.esm-CPR7VH_x.js} +3 -3
- package/dist/chunks/{styled-components.browser.esm-DbYXI9h_.js.map → styled-components.browser.esm-CPR7VH_x.js.map} +1 -1
- package/dist/chunks/{textarea-CPHr2RpC.js → textarea-D2_KC-J4.js} +98 -98
- package/dist/chunks/{textarea-CPHr2RpC.js.map → textarea-D2_KC-J4.js.map} +1 -1
- package/dist/chunks/{textarea-CXQO1MMF.js → textarea-_HQpXiCX.js} +8 -8
- package/dist/chunks/{textarea-CXQO1MMF.js.map → textarea-_HQpXiCX.js.map} +1 -1
- package/dist/chunks/{tooltip-05Mv2hjx.js → tooltip-GGFk8ALK.js} +15 -15
- package/dist/chunks/{tooltip-05Mv2hjx.js.map → tooltip-GGFk8ALK.js.map} +1 -1
- package/dist/chunks/{tooltip-D3J0_sJU.js → tooltip-JwIbppjO.js} +3 -3
- package/dist/chunks/{tooltip-D3J0_sJU.js.map → tooltip-JwIbppjO.js.map} +1 -1
- package/dist/chunks/tv-B0li4IsO.js +41 -0
- package/dist/chunks/tv-B0li4IsO.js.map +1 -0
- package/dist/chunks/tv-CGbWb8zP.js +40 -0
- package/dist/chunks/tv-CGbWb8zP.js.map +1 -0
- package/dist/chunks/utils-H80jjgLf.js +9 -0
- package/dist/chunks/{utils-BnY7EXd5.js.map → utils-H80jjgLf.js.map} +1 -1
- package/dist/chunks/utils-ij3i9zTT.js +8 -0
- package/dist/chunks/{utils-nIKS3WsJ.js.map → utils-ij3i9zTT.js.map} +1 -1
- package/dist/divider/index.cjs.js +4 -4
- package/dist/divider/index.es.js +1 -1
- package/dist/modal/index.cjs.js +17 -17
- package/dist/modal/index.es.js +3 -3
- package/dist/pagination/index.cjs.js +29 -29
- package/dist/pagination/index.cjs.js.map +1 -1
- package/dist/pagination/index.es.js +5 -5
- package/dist/phone-input/index.cjs.js +32 -31
- package/dist/phone-input/index.cjs.js.map +1 -1
- package/dist/phone-input/index.es.js +7 -6
- package/dist/phone-input/index.es.js.map +1 -1
- package/dist/ripple/index.cjs.js +1 -1
- package/dist/select-input/index.cjs.js +39 -39
- package/dist/select-input/index.cjs.js.map +1 -1
- package/dist/select-input/index.es.js +5 -5
- package/dist/table/index.cjs.js +44 -44
- package/dist/table/index.cjs.js.map +1 -1
- package/dist/table/index.es.js +5 -5
- package/dist/time-input/index.cjs.js +53 -53
- package/dist/time-input/index.cjs.js.map +1 -1
- package/dist/time-input/index.es.js +5 -5
- package/dist/tooltip/index.cjs.js +1 -1
- package/dist/tooltip/index.es.js +1 -1
- package/dist/ui/index.cjs.js +324 -324
- package/dist/ui/index.es.js +10 -10
- package/package.json +8 -2
- package/dist/chunks/bundle-mjs-BWLS65yY.js +0 -3003
- package/dist/chunks/bundle-mjs-BWLS65yY.js.map +0 -1
- package/dist/chunks/bundle-mjs-DB1IOBLD.js +0 -3004
- package/dist/chunks/bundle-mjs-DB1IOBLD.js.map +0 -1
- package/dist/chunks/clsx-CBkIpawf.js +0 -16
- package/dist/chunks/clsx-CBkIpawf.js.map +0 -1
- package/dist/chunks/clsx-DgYk2OaC.js +0 -17
- package/dist/chunks/clsx-DgYk2OaC.js.map +0 -1
- package/dist/chunks/label-error-2QXnvbxJ.js +0 -9
- package/dist/chunks/tv-C-wpiWwh.js +0 -274
- package/dist/chunks/tv-C-wpiWwh.js.map +0 -1
- package/dist/chunks/tv-C4gJMNo3.js +0 -275
- package/dist/chunks/tv-C4gJMNo3.js.map +0 -1
- package/dist/chunks/utils-BnY7EXd5.js +0 -9
- package/dist/chunks/utils-nIKS3WsJ.js +0 -8
- package/dist/chunks/v4-BQ42ZlDJ.js +0 -39
- package/dist/chunks/v4-BQ42ZlDJ.js.map +0 -1
- package/dist/chunks/v4-C3omdoBX.js +0 -40
- package/dist/chunks/v4-C3omdoBX.js.map +0 -1
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const React = require("react");
|
|
5
5
|
const libphonenumberJs = require("libphonenumber-js");
|
|
6
|
-
const
|
|
7
|
-
const utils = require("../chunks/utils-
|
|
8
|
-
require("../chunks/textarea-
|
|
9
|
-
const labelError = require("../chunks/label-error-
|
|
10
|
-
|
|
11
|
-
require("../chunks/
|
|
6
|
+
const tailwindMerge = require("tailwind-merge");
|
|
7
|
+
const utils = require("../chunks/utils-ij3i9zTT.js");
|
|
8
|
+
require("../chunks/textarea-D2_KC-J4.js");
|
|
9
|
+
const labelError = require("../chunks/label-error-C8lIsfXu.js");
|
|
10
|
+
require("clsx");
|
|
11
|
+
const scrollArea = require("../chunks/scroll-area-C0NhSIO2.js");
|
|
12
|
+
require("../chunks/button-d5z8H59K.js");
|
|
12
13
|
const framerMotion = require("framer-motion");
|
|
13
14
|
const index = require("../chunks/index-BPW1Qzmi.js");
|
|
14
15
|
const countryData = {
|
|
@@ -163,8 +164,8 @@ const PhoneInput = ({
|
|
|
163
164
|
const currentError = externalError;
|
|
164
165
|
const hasError = isTouched && currentError;
|
|
165
166
|
const isInvalid = !disabled && !!externalError && externalTouched;
|
|
166
|
-
return /* @__PURE__ */
|
|
167
|
-
label && /* @__PURE__ */
|
|
167
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("w-full relative flex flex-col", classNameContainer), children: [
|
|
168
|
+
label && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
168
169
|
"label",
|
|
169
170
|
{
|
|
170
171
|
htmlFor: resolvedId,
|
|
@@ -174,14 +175,14 @@ const PhoneInput = ({
|
|
|
174
175
|
children: [
|
|
175
176
|
label,
|
|
176
177
|
" ",
|
|
177
|
-
required && /* @__PURE__ */
|
|
178
|
+
required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-danger", children: "*" })
|
|
178
179
|
]
|
|
179
180
|
}
|
|
180
181
|
),
|
|
181
|
-
/* @__PURE__ */
|
|
182
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
182
183
|
"div",
|
|
183
184
|
{
|
|
184
|
-
className:
|
|
185
|
+
className: tailwindMerge.twMerge(
|
|
185
186
|
"flex w-full min-w-0 transition-[color,box-shadow] outline-none rounded-md h-input-default",
|
|
186
187
|
"bg-white border border-input",
|
|
187
188
|
"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
|
|
@@ -190,24 +191,24 @@ const PhoneInput = ({
|
|
|
190
191
|
),
|
|
191
192
|
"aria-invalid": isInvalid ? "true" : "false",
|
|
192
193
|
children: [
|
|
193
|
-
/* @__PURE__ */
|
|
194
|
-
/* @__PURE__ */
|
|
194
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: dropdownRef, children: [
|
|
195
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
195
196
|
"button",
|
|
196
197
|
{
|
|
197
198
|
type: "button",
|
|
198
199
|
onClick: handleDropdownToggle,
|
|
199
|
-
className:
|
|
200
|
+
className: tailwindMerge.twMerge(
|
|
200
201
|
"flex items-center gap-2 px-3 border-r border-input h-input-default",
|
|
201
202
|
"hover:bg-muted/20 focus:outline-none rounded-l-md"
|
|
202
203
|
),
|
|
203
204
|
children: [
|
|
204
|
-
/* @__PURE__ */
|
|
205
|
-
/* @__PURE__ */
|
|
206
|
-
/* @__PURE__ */
|
|
205
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: selectedCountry.flag }),
|
|
206
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-foreground", children: selectedCountry.callingCode }),
|
|
207
|
+
/* @__PURE__ */ jsxRuntime.jsx(index.ChevronDown, { className: `w-4 h-4 text-muted-foreground transition-transform ${isDropdownOpen ? "rotate-180" : ""}` })
|
|
207
208
|
]
|
|
208
209
|
}
|
|
209
210
|
),
|
|
210
|
-
/* @__PURE__ */
|
|
211
|
+
/* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isDropdownOpen && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LazyMotion, { features: framerMotion.domAnimation, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
211
212
|
framerMotion.m.div,
|
|
212
213
|
{
|
|
213
214
|
initial: { opacity: 0, y: -8, scale: 0.98 },
|
|
@@ -216,9 +217,9 @@ const PhoneInput = ({
|
|
|
216
217
|
style: { transformOrigin: "top center" },
|
|
217
218
|
className: "absolute top-full left-0 z-50 w-60 mt-1 bg-white border border-input rounded-md shadow-lg max-h-60 overflow-hidden",
|
|
218
219
|
children: [
|
|
219
|
-
/* @__PURE__ */
|
|
220
|
-
/* @__PURE__ */
|
|
221
|
-
/* @__PURE__ */
|
|
220
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 bg-white border-b border-input p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
221
|
+
/* @__PURE__ */ jsxRuntime.jsx(scrollArea.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" }),
|
|
222
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
222
223
|
"input",
|
|
223
224
|
{
|
|
224
225
|
ref: searchInputRef,
|
|
@@ -230,20 +231,20 @@ const PhoneInput = ({
|
|
|
230
231
|
}
|
|
231
232
|
)
|
|
232
233
|
] }) }),
|
|
233
|
-
/* @__PURE__ */
|
|
234
|
+
/* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea, { className: "max-h-48 overflow-y-auto pb-5", children: filteredCountries.map((country) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
234
235
|
"button",
|
|
235
236
|
{
|
|
236
237
|
type: "button",
|
|
237
238
|
onClick: () => handleCountrySelect(country),
|
|
238
|
-
className:
|
|
239
|
+
className: tailwindMerge.twMerge(
|
|
239
240
|
"w-full flex items-center gap-3 px-3 py-1 text-sm transition",
|
|
240
241
|
selectedCountry.code === country.code ? "bg-primary/5 border-l-2 border-primary" : "hover:bg-muted/20"
|
|
241
242
|
),
|
|
242
243
|
children: [
|
|
243
|
-
/* @__PURE__ */
|
|
244
|
-
/* @__PURE__ */
|
|
245
|
-
/* @__PURE__ */
|
|
246
|
-
selectedCountry.code === country.code && /* @__PURE__ */
|
|
244
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: country.flag }),
|
|
245
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left", children: country.name }),
|
|
246
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: country.callingCode }),
|
|
247
|
+
selectedCountry.code === country.code && /* @__PURE__ */ jsxRuntime.jsx(index.Check, { className: "w-4 h-4 text-primary" })
|
|
247
248
|
]
|
|
248
249
|
},
|
|
249
250
|
country.code
|
|
@@ -253,7 +254,7 @@ const PhoneInput = ({
|
|
|
253
254
|
"country-dropdown"
|
|
254
255
|
) }) })
|
|
255
256
|
] }),
|
|
256
|
-
/* @__PURE__ */
|
|
257
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
257
258
|
"input",
|
|
258
259
|
{
|
|
259
260
|
ref: inputRef,
|
|
@@ -266,7 +267,7 @@ const PhoneInput = ({
|
|
|
266
267
|
placeholder,
|
|
267
268
|
disabled,
|
|
268
269
|
...!disabled ? { "aria-invalid": isInvalid } : {},
|
|
269
|
-
className:
|
|
270
|
+
className: tailwindMerge.twMerge(
|
|
270
271
|
"flex-1 px-3 py-1 h-input-default border-0 rounded-r-md bg-transparent focus:outline-none text-foreground text-sm",
|
|
271
272
|
className
|
|
272
273
|
),
|
|
@@ -276,7 +277,7 @@ const PhoneInput = ({
|
|
|
276
277
|
]
|
|
277
278
|
}
|
|
278
279
|
),
|
|
279
|
-
!disabled && externalError && externalTouched && /* @__PURE__ */
|
|
280
|
+
!disabled && externalError && externalTouched && /* @__PURE__ */ jsxRuntime.jsx(labelError.LabelError, { text: externalError || currentError || "" })
|
|
280
281
|
] });
|
|
281
282
|
};
|
|
282
283
|
exports.PhoneInput = PhoneInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../src/components/phone-input/phone-input.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useState, useEffect, useRef, useId } from \"react\";\nimport { getCountryCallingCode, AsYouType, isValidPhoneNumber } from \"libphonenumber-js\";\nimport { ChevronDown, Check, Search } from \"lucide-react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { cn } from \"@/lib/utils\";\nimport { LabelError, ScrollArea } from \"../ui\";\nimport { AnimatePresence } from \"framer-motion\";\nimport { LazyMotion, m, domAnimation } from \"framer-motion\";\n\nconst countryData = {\n\tPE: { name: \"Perú\", flag: \"🇵🇪\" },\n\tUS: { name: \"Estados Unidos\", flag: \"🇺🇸\" },\n\tMX: { name: \"México\", flag: \"🇲🇽\" },\n\tAR: { name: \"Argentina\", flag: \"🇦🇷\" },\n\tCO: { name: \"Colombia\", flag: \"🇨🇴\" },\n\tCL: { name: \"Chile\", flag: \"🇨🇱\" },\n\tBR: { name: \"Brasil\", flag: \"🇧🇷\" },\n\tBO: { name: \"Bolivia\", flag: \"🇧🇴\" },\n\tVE: { name: \"Venezuela\", flag: \"🇻🇪\" },\n};\n\ninterface Country {\n\tcode: string;\n\tname: string;\n\tflag: string;\n\tcallingCode: string;\n}\n\ninterface PhoneInputProps {\n\tid?: string;\n\tname: string;\n\tlabel?: string;\n\tplaceholder?: string;\n\trequired?: boolean;\n\tclassName?: string;\n\tonCountryChange?: (country: Country) => void;\n\tonPhoneChange?: (phone: string, isValid: boolean) => void;\n\ttouched?: boolean;\n\tvalues?: any;\n\tonBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n\terror?: string;\n\tvalue?: string; // para standalone\n\tdefaultCountry?: string;\n\tdisabled?: boolean;\n\tclassNameContainer?: string;\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n\tid,\n\tname,\n\tlabel = \"Teléfono\",\n\tplaceholder = \"Ingrese un número de teléfono\",\n\trequired = false,\n\tclassName = \"\",\n\tclassNameContainer = \"\",\n\tonCountryChange,\n\tonPhoneChange,\n\ttouched: externalTouched,\n\tonBlur: externalOnBlur,\n\terror: externalError,\n\tvalue: externalValue,\n\tdefaultCountry = \"PE\",\n\tdisabled = false,\n}) => {\n\tconst [selectedCountry, setSelectedCountry] = useState<Country>({\n\t\tcode: defaultCountry,\n\t\tname: countryData[defaultCountry as keyof typeof countryData].name,\n\t\tflag: countryData[defaultCountry as keyof typeof countryData].flag,\n\t\tcallingCode: `+${getCountryCallingCode(defaultCountry as keyof typeof countryData)}`,\n\t});\n\n\tconst [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\tconst [phoneValue, setPhoneValue] = useState(\"\");\n\tconst [formattedValue, setFormattedValue] = useState(\"\");\n\tconst [isValid, setIsValid] = useState(false);\n\tconst [countries, setCountries] = useState<Country[]>([]);\n\tconst [searchTerm, setSearchTerm] = useState(\"\");\n\tconst [filteredCountries, setFilteredCountries] = useState<Country[]>([]);\n\n\tconst dropdownRef = useRef<HTMLDivElement>(null);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst searchInputRef = useRef<HTMLInputElement>(null);\n\n\tconst inputId = useId();\n\tconst resolvedId = id || inputId;\n\tconst isControlled = externalValue !== undefined;\n\n\t// Inicializar países en el orden definido en countryData\n\tuseEffect(() => {\n\t\tconst availableCountries = Object.keys(countryData).map((countryCode) => {\n\t\t\tconst data = countryData[countryCode as keyof typeof countryData];\n\t\t\treturn {\n\t\t\t\tcode: countryCode,\n\t\t\t\tname: data.name,\n\t\t\t\tflag: data.flag,\n\t\t\t\tcallingCode: `+${getCountryCallingCode(countryCode as keyof typeof countryData)}`,\n\t\t\t};\n\t\t});\n\t\tsetCountries(availableCountries);\n\t\tsetFilteredCountries(availableCountries);\n\t}, []);\n\n\t// Manejo de click fuera para cerrar dropdown\n\tuseEffect(() => {\n\t\tconst handleClickOutside = (event: MouseEvent) => {\n\t\t\tif (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n\t\t\t\tsetIsDropdownOpen(false);\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener(\"mousedown\", handleClickOutside);\n\t\treturn () => document.removeEventListener(\"mousedown\", handleClickOutside);\n\t}, []);\n\n\t// Sincronizar externalValue con estados internos (incluye reset con \"\")\n\tuseEffect(() => {\n\t\tif (!isControlled || countries.length === 0) return;\n\n\t\t// Si el valor externo es vacío o null, limpiar estados\n\t\tif (externalValue === \"\" || externalValue == null) {\n\t\t\tsetPhoneValue(\"\");\n\t\t\tsetFormattedValue(\"\");\n\t\t\tsetIsValid(false);\n\t\t\treturn;\n\t\t}\n\n\t\tconst value = String(externalValue);\n\t\tlet country = countries.find((c) => value.startsWith(c.callingCode));\n\n\t\t// Si no se detecta país por código, mantener el seleccionado actual\n\t\tif (!country) {\n\t\t\tcountry = selectedCountry;\n\t\t}\n\n\t\tif (country) {\n\t\t\t// Actualizar país si cambió\n\t\t\tif (selectedCountry.code !== country.code) {\n\t\t\t\tsetSelectedCountry(country);\n\t\t\t}\n\n\t\t\tconst raw = value.replace(country.callingCode, \"\").replace(/[^\\d]/g, \"\");\n\t\t\tsetPhoneValue(raw);\n\n\t\t\tconst formatter = new AsYouType(country.code as keyof typeof countryData);\n\t\t\tconst formatted = formatter.input(raw);\n\t\t\tsetFormattedValue(formatted);\n\n\t\t\tconst valid = isValidPhoneNumber(value);\n\t\t\tsetIsValid(valid);\n\t\t} else {\n\t\t\t// Fallback: no país detectado, limpiar formato pero conservar value crudo\n\t\t\tsetPhoneValue(\"\");\n\t\t\tsetFormattedValue(\"\");\n\t\t\tsetIsValid(false);\n\t\t}\n\t}, [externalValue, countries, isControlled, selectedCountry]);\n\n\t// Formatear número al escribir\n\tconst handlePhoneChange = (value: string, event?: React.ChangeEvent<HTMLInputElement>) => {\n\t\tconst cleanValue = value.replace(/[^\\d]/g, \"\");\n\n\t\tif (event?.nativeEvent instanceof InputEvent && event.nativeEvent.inputType === \"deleteContentBackward\" && cleanValue.length < 4) {\n\t\t\tsetPhoneValue(cleanValue);\n\t\t\tsetFormattedValue(cleanValue); // mostrar sin formato\n\t\t\treturn;\n\t\t}\n\t\tconst formatter = new AsYouType(selectedCountry.code as keyof typeof countryData);\n\t\tconst formatted = formatter.input(cleanValue);\n\n\t\tsetPhoneValue(cleanValue);\n\t\tsetFormattedValue(formatted);\n\n\t\tconst fullNumber = selectedCountry.callingCode + cleanValue;\n\t\tconst valid = isValidPhoneNumber(fullNumber);\n\t\tsetIsValid(valid);\n\n\t\tonPhoneChange?.(fullNumber, valid);\n\t};\n\n\t// Seleccionar país\n\tconst handleCountrySelect = (country: Country) => {\n\t\tsetSelectedCountry(country);\n\t\tsetIsDropdownOpen(false);\n\t\tsetSearchTerm(\"\");\n\n\t\tif (phoneValue) {\n\t\t\tconst formatter = new AsYouType(country.code as keyof typeof countryData);\n\t\t\tconst formatted = formatter.input(phoneValue);\n\t\t\tsetFormattedValue(formatted);\n\n\t\t\tconst fullNumber = country.callingCode + phoneValue;\n\t\t\tconst valid = isValidPhoneNumber(fullNumber);\n\t\t\tsetIsValid(valid);\n\n\t\t\tonPhoneChange?.(fullNumber, valid);\n\t\t}\n\n\t\tonCountryChange?.(country);\n\t\tsetTimeout(() => inputRef.current?.focus(), 100);\n\t};\n\n\tconst handleDropdownToggle = () => {\n\t\tsetIsDropdownOpen(!isDropdownOpen);\n\t\tif (!isDropdownOpen) {\n\t\t\tsetTimeout(() => searchInputRef.current?.focus(), 100);\n\t\t}\n\t};\n\n\t// Filtrar países en búsqueda\n\tuseEffect(() => {\n\t\tif (!searchTerm.trim()) {\n\t\t\tsetFilteredCountries(countries);\n\t\t} else {\n\t\t\tconst searchLower = searchTerm.toLowerCase();\n\t\t\tconst filtered = countries.filter(\n\t\t\t\t(country) =>\n\t\t\t\t\tcountry.name.toLowerCase().includes(searchLower) ||\n\t\t\t\t\tcountry.callingCode.includes(searchTerm) ||\n\t\t\t\t\tcountry.code.toLowerCase().includes(searchLower),\n\t\t\t);\n\t\t\tsetFilteredCountries(filtered);\n\t\t}\n\t}, [searchTerm, countries]);\n\n\tconst isTouched = externalTouched;\n\tconst currentError = externalError;\n\tconst hasError = isTouched && currentError;\n\n\tconst isInvalid = !disabled && !!externalError && externalTouched;\n\n\treturn (\n\t\t<div className={twMerge(\"w-full relative flex flex-col\", classNameContainer)}>\n\t\t\t{label && (\n\t\t\t\t<label\n\t\t\t\t\thtmlFor={resolvedId}\n\t\t\t\t\tclassName={cn(\"form-control-label block font-normal text-sm text-foreground mb-1\", {\n\t\t\t\t\t\t\"text-danger\": hasError,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{label} {required && <span className=\"text-danger\">*</span>}\n\t\t\t\t</label>\n\t\t\t)}\n\n\t\t\t<div\n\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\"flex w-full min-w-0 transition-[color,box-shadow] outline-none rounded-md h-input-default\",\n\t\t\t\t\t\"bg-white border border-input\",\n\t\t\t\t\t\"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\thasError\n\t\t\t\t\t\t? \"border-danger aria-invalid:ring-danger/20\"\n\t\t\t\t\t\t: isValid && phoneValue\n\t\t\t\t\t\t? \"focus-within:border-primary focus-within:ring-primary/20\"\n\t\t\t\t\t\t: \"focus-within:border-primary focus-within:ring-primary/20\",\n\t\t\t\t\t\"focus-within:ring-[3px]\",\n\t\t\t\t)}\n\t\t\t\taria-invalid={isInvalid ? \"true\" : \"false\"}\n\t\t\t>\n\t\t\t\t{/* Country selector */}\n\t\t\t\t<div className=\"relative\" ref={dropdownRef}>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={handleDropdownToggle}\n\t\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\t\"flex items-center gap-2 px-3 border-r border-input h-input-default\",\n\t\t\t\t\t\t\t\"hover:bg-muted/20 focus:outline-none rounded-l-md\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"text-lg\">{selectedCountry.flag}</span>\n\t\t\t\t\t\t<span className=\"text-sm font-medium text-foreground\">{selectedCountry.callingCode}</span>\n\t\t\t\t\t\t<ChevronDown className={`w-4 h-4 text-muted-foreground transition-transform ${isDropdownOpen ? \"rotate-180\" : \"\"}`} />\n\t\t\t\t\t</button>\n\n\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t{isDropdownOpen && (\n\t\t\t\t\t\t\t<LazyMotion features={domAnimation}>\n\t\t\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\t\t\tkey=\"country-dropdown\"\n\t\t\t\t\t\t\t\t\tinitial={{ opacity: 0, y: -8, scale: 0.98 }}\n\t\t\t\t\t\t\t\t\tanimate={{ opacity: 1, y: 0, scale: 1, transition: { type: \"spring\", stiffness: 420, damping: 28 } }}\n\t\t\t\t\t\t\t\t\texit={{ opacity: 0, y: -6, scale: 0.98, transition: { duration: 0.15, ease: \"easeOut\" } }}\n\t\t\t\t\t\t\t\t\tstyle={{ transformOrigin: \"top center\" }}\n\t\t\t\t\t\t\t\t\tclassName=\"absolute top-full left-0 z-50 w-60 mt-1 bg-white border border-input rounded-md shadow-lg max-h-60 overflow-hidden\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"sticky top-0 bg-white border-b border-input p-3\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t\t\t\t\t\t\t<Search className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground\" />\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\tref={searchInputRef}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={searchTerm}\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(e) => setSearchTerm(e.target.value)}\n\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"Buscar país o código\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"w-full pl-10 pr-3 py-2 h-9 border border-input rounded-md text-sm focus:outline-none focus:border-primary focus:ring-[3px] focus:ring-primary/20\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<ScrollArea className=\"max-h-48 overflow-y-auto pb-5\">\n\t\t\t\t\t\t\t\t\t\t{filteredCountries.map((country) => (\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tkey={country.code}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => handleCountrySelect(country)}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"w-full flex items-center gap-3 px-3 py-1 text-sm transition\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedCountry.code === country.code\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"bg-primary/5 border-l-2 border-primary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"hover:bg-muted/20\",\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-lg\">{country.flag}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"flex-1 text-left\">{country.name}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-muted-foreground\">{country.callingCode}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t{selectedCountry.code === country.code && <Check className=\"w-4 h-4 text-primary\" />}\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</ScrollArea>\n\t\t\t\t\t\t\t\t</m.div>\n\t\t\t\t\t\t\t</LazyMotion>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Phone input */}\n\t\t\t\t<input\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tid={resolvedId}\n\t\t\t\t\ttype=\"tel\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={formattedValue}\n\t\t\t\t\tonChange={(e) => handlePhoneChange(e.target.value, e)}\n\t\t\t\t\tonBlur={externalOnBlur}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t{...(!disabled ? { \"aria-invalid\": isInvalid } : {})}\n\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\"flex-1 px-3 py-1 h-input-default border-0 rounded-r-md bg-transparent focus:outline-none text-foreground text-sm\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tautoComplete=\"tel\"\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t{!disabled && externalError && externalTouched && <LabelError text={externalError || currentError || \"\"} />}\n\t\t</div>\n\t);\n};\n"],"names":["useState","getCountryCallingCode","useRef","useId","useEffect","AsYouType","isValidPhoneNumber","twMerge","jsxs","cn","jsx","ChevronDown","AnimatePresence","LazyMotion","domAnimation","m","Search","ScrollArea","Check","LabelError"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../src/components/phone-input/phone-input.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useState, useEffect, useRef, useId } from \"react\";\nimport { getCountryCallingCode, AsYouType, isValidPhoneNumber } from \"libphonenumber-js\";\nimport { ChevronDown, Check, Search } from \"lucide-react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { cn } from \"@/lib/utils\";\nimport { LabelError, ScrollArea } from \"../ui\";\nimport { AnimatePresence } from \"framer-motion\";\nimport { LazyMotion, m, domAnimation } from \"framer-motion\";\n\nconst countryData = {\n\tPE: { name: \"Perú\", flag: \"🇵🇪\" },\n\tUS: { name: \"Estados Unidos\", flag: \"🇺🇸\" },\n\tMX: { name: \"México\", flag: \"🇲🇽\" },\n\tAR: { name: \"Argentina\", flag: \"🇦🇷\" },\n\tCO: { name: \"Colombia\", flag: \"🇨🇴\" },\n\tCL: { name: \"Chile\", flag: \"🇨🇱\" },\n\tBR: { name: \"Brasil\", flag: \"🇧🇷\" },\n\tBO: { name: \"Bolivia\", flag: \"🇧🇴\" },\n\tVE: { name: \"Venezuela\", flag: \"🇻🇪\" },\n};\n\ninterface Country {\n\tcode: string;\n\tname: string;\n\tflag: string;\n\tcallingCode: string;\n}\n\ninterface PhoneInputProps {\n\tid?: string;\n\tname: string;\n\tlabel?: string;\n\tplaceholder?: string;\n\trequired?: boolean;\n\tclassName?: string;\n\tonCountryChange?: (country: Country) => void;\n\tonPhoneChange?: (phone: string, isValid: boolean) => void;\n\ttouched?: boolean;\n\tvalues?: any;\n\tonBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n\terror?: string;\n\tvalue?: string; // para standalone\n\tdefaultCountry?: string;\n\tdisabled?: boolean;\n\tclassNameContainer?: string;\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n\tid,\n\tname,\n\tlabel = \"Teléfono\",\n\tplaceholder = \"Ingrese un número de teléfono\",\n\trequired = false,\n\tclassName = \"\",\n\tclassNameContainer = \"\",\n\tonCountryChange,\n\tonPhoneChange,\n\ttouched: externalTouched,\n\tonBlur: externalOnBlur,\n\terror: externalError,\n\tvalue: externalValue,\n\tdefaultCountry = \"PE\",\n\tdisabled = false,\n}) => {\n\tconst [selectedCountry, setSelectedCountry] = useState<Country>({\n\t\tcode: defaultCountry,\n\t\tname: countryData[defaultCountry as keyof typeof countryData].name,\n\t\tflag: countryData[defaultCountry as keyof typeof countryData].flag,\n\t\tcallingCode: `+${getCountryCallingCode(defaultCountry as keyof typeof countryData)}`,\n\t});\n\n\tconst [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\tconst [phoneValue, setPhoneValue] = useState(\"\");\n\tconst [formattedValue, setFormattedValue] = useState(\"\");\n\tconst [isValid, setIsValid] = useState(false);\n\tconst [countries, setCountries] = useState<Country[]>([]);\n\tconst [searchTerm, setSearchTerm] = useState(\"\");\n\tconst [filteredCountries, setFilteredCountries] = useState<Country[]>([]);\n\n\tconst dropdownRef = useRef<HTMLDivElement>(null);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst searchInputRef = useRef<HTMLInputElement>(null);\n\n\tconst inputId = useId();\n\tconst resolvedId = id || inputId;\n\tconst isControlled = externalValue !== undefined;\n\n\t// Inicializar países en el orden definido en countryData\n\tuseEffect(() => {\n\t\tconst availableCountries = Object.keys(countryData).map((countryCode) => {\n\t\t\tconst data = countryData[countryCode as keyof typeof countryData];\n\t\t\treturn {\n\t\t\t\tcode: countryCode,\n\t\t\t\tname: data.name,\n\t\t\t\tflag: data.flag,\n\t\t\t\tcallingCode: `+${getCountryCallingCode(countryCode as keyof typeof countryData)}`,\n\t\t\t};\n\t\t});\n\t\tsetCountries(availableCountries);\n\t\tsetFilteredCountries(availableCountries);\n\t}, []);\n\n\t// Manejo de click fuera para cerrar dropdown\n\tuseEffect(() => {\n\t\tconst handleClickOutside = (event: MouseEvent) => {\n\t\t\tif (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n\t\t\t\tsetIsDropdownOpen(false);\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener(\"mousedown\", handleClickOutside);\n\t\treturn () => document.removeEventListener(\"mousedown\", handleClickOutside);\n\t}, []);\n\n\t// Sincronizar externalValue con estados internos (incluye reset con \"\")\n\tuseEffect(() => {\n\t\tif (!isControlled || countries.length === 0) return;\n\n\t\t// Si el valor externo es vacío o null, limpiar estados\n\t\tif (externalValue === \"\" || externalValue == null) {\n\t\t\tsetPhoneValue(\"\");\n\t\t\tsetFormattedValue(\"\");\n\t\t\tsetIsValid(false);\n\t\t\treturn;\n\t\t}\n\n\t\tconst value = String(externalValue);\n\t\tlet country = countries.find((c) => value.startsWith(c.callingCode));\n\n\t\t// Si no se detecta país por código, mantener el seleccionado actual\n\t\tif (!country) {\n\t\t\tcountry = selectedCountry;\n\t\t}\n\n\t\tif (country) {\n\t\t\t// Actualizar país si cambió\n\t\t\tif (selectedCountry.code !== country.code) {\n\t\t\t\tsetSelectedCountry(country);\n\t\t\t}\n\n\t\t\tconst raw = value.replace(country.callingCode, \"\").replace(/[^\\d]/g, \"\");\n\t\t\tsetPhoneValue(raw);\n\n\t\t\tconst formatter = new AsYouType(country.code as keyof typeof countryData);\n\t\t\tconst formatted = formatter.input(raw);\n\t\t\tsetFormattedValue(formatted);\n\n\t\t\tconst valid = isValidPhoneNumber(value);\n\t\t\tsetIsValid(valid);\n\t\t} else {\n\t\t\t// Fallback: no país detectado, limpiar formato pero conservar value crudo\n\t\t\tsetPhoneValue(\"\");\n\t\t\tsetFormattedValue(\"\");\n\t\t\tsetIsValid(false);\n\t\t}\n\t}, [externalValue, countries, isControlled, selectedCountry]);\n\n\t// Formatear número al escribir\n\tconst handlePhoneChange = (value: string, event?: React.ChangeEvent<HTMLInputElement>) => {\n\t\tconst cleanValue = value.replace(/[^\\d]/g, \"\");\n\n\t\tif (event?.nativeEvent instanceof InputEvent && event.nativeEvent.inputType === \"deleteContentBackward\" && cleanValue.length < 4) {\n\t\t\tsetPhoneValue(cleanValue);\n\t\t\tsetFormattedValue(cleanValue); // mostrar sin formato\n\t\t\treturn;\n\t\t}\n\t\tconst formatter = new AsYouType(selectedCountry.code as keyof typeof countryData);\n\t\tconst formatted = formatter.input(cleanValue);\n\n\t\tsetPhoneValue(cleanValue);\n\t\tsetFormattedValue(formatted);\n\n\t\tconst fullNumber = selectedCountry.callingCode + cleanValue;\n\t\tconst valid = isValidPhoneNumber(fullNumber);\n\t\tsetIsValid(valid);\n\n\t\tonPhoneChange?.(fullNumber, valid);\n\t};\n\n\t// Seleccionar país\n\tconst handleCountrySelect = (country: Country) => {\n\t\tsetSelectedCountry(country);\n\t\tsetIsDropdownOpen(false);\n\t\tsetSearchTerm(\"\");\n\n\t\tif (phoneValue) {\n\t\t\tconst formatter = new AsYouType(country.code as keyof typeof countryData);\n\t\t\tconst formatted = formatter.input(phoneValue);\n\t\t\tsetFormattedValue(formatted);\n\n\t\t\tconst fullNumber = country.callingCode + phoneValue;\n\t\t\tconst valid = isValidPhoneNumber(fullNumber);\n\t\t\tsetIsValid(valid);\n\n\t\t\tonPhoneChange?.(fullNumber, valid);\n\t\t}\n\n\t\tonCountryChange?.(country);\n\t\tsetTimeout(() => inputRef.current?.focus(), 100);\n\t};\n\n\tconst handleDropdownToggle = () => {\n\t\tsetIsDropdownOpen(!isDropdownOpen);\n\t\tif (!isDropdownOpen) {\n\t\t\tsetTimeout(() => searchInputRef.current?.focus(), 100);\n\t\t}\n\t};\n\n\t// Filtrar países en búsqueda\n\tuseEffect(() => {\n\t\tif (!searchTerm.trim()) {\n\t\t\tsetFilteredCountries(countries);\n\t\t} else {\n\t\t\tconst searchLower = searchTerm.toLowerCase();\n\t\t\tconst filtered = countries.filter(\n\t\t\t\t(country) =>\n\t\t\t\t\tcountry.name.toLowerCase().includes(searchLower) ||\n\t\t\t\t\tcountry.callingCode.includes(searchTerm) ||\n\t\t\t\t\tcountry.code.toLowerCase().includes(searchLower),\n\t\t\t);\n\t\t\tsetFilteredCountries(filtered);\n\t\t}\n\t}, [searchTerm, countries]);\n\n\tconst isTouched = externalTouched;\n\tconst currentError = externalError;\n\tconst hasError = isTouched && currentError;\n\n\tconst isInvalid = !disabled && !!externalError && externalTouched;\n\n\treturn (\n\t\t<div className={twMerge(\"w-full relative flex flex-col\", classNameContainer)}>\n\t\t\t{label && (\n\t\t\t\t<label\n\t\t\t\t\thtmlFor={resolvedId}\n\t\t\t\t\tclassName={cn(\"form-control-label block font-normal text-sm text-foreground mb-1\", {\n\t\t\t\t\t\t\"text-danger\": hasError,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{label} {required && <span className=\"text-danger\">*</span>}\n\t\t\t\t</label>\n\t\t\t)}\n\n\t\t\t<div\n\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\"flex w-full min-w-0 transition-[color,box-shadow] outline-none rounded-md h-input-default\",\n\t\t\t\t\t\"bg-white border border-input\",\n\t\t\t\t\t\"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\thasError\n\t\t\t\t\t\t? \"border-danger aria-invalid:ring-danger/20\"\n\t\t\t\t\t\t: isValid && phoneValue\n\t\t\t\t\t\t? \"focus-within:border-primary focus-within:ring-primary/20\"\n\t\t\t\t\t\t: \"focus-within:border-primary focus-within:ring-primary/20\",\n\t\t\t\t\t\"focus-within:ring-[3px]\",\n\t\t\t\t)}\n\t\t\t\taria-invalid={isInvalid ? \"true\" : \"false\"}\n\t\t\t>\n\t\t\t\t{/* Country selector */}\n\t\t\t\t<div className=\"relative\" ref={dropdownRef}>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={handleDropdownToggle}\n\t\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\t\"flex items-center gap-2 px-3 border-r border-input h-input-default\",\n\t\t\t\t\t\t\t\"hover:bg-muted/20 focus:outline-none rounded-l-md\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"text-lg\">{selectedCountry.flag}</span>\n\t\t\t\t\t\t<span className=\"text-sm font-medium text-foreground\">{selectedCountry.callingCode}</span>\n\t\t\t\t\t\t<ChevronDown className={`w-4 h-4 text-muted-foreground transition-transform ${isDropdownOpen ? \"rotate-180\" : \"\"}`} />\n\t\t\t\t\t</button>\n\n\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t{isDropdownOpen && (\n\t\t\t\t\t\t\t<LazyMotion features={domAnimation}>\n\t\t\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\t\t\tkey=\"country-dropdown\"\n\t\t\t\t\t\t\t\t\tinitial={{ opacity: 0, y: -8, scale: 0.98 }}\n\t\t\t\t\t\t\t\t\tanimate={{ opacity: 1, y: 0, scale: 1, transition: { type: \"spring\", stiffness: 420, damping: 28 } }}\n\t\t\t\t\t\t\t\t\texit={{ opacity: 0, y: -6, scale: 0.98, transition: { duration: 0.15, ease: \"easeOut\" } }}\n\t\t\t\t\t\t\t\t\tstyle={{ transformOrigin: \"top center\" }}\n\t\t\t\t\t\t\t\t\tclassName=\"absolute top-full left-0 z-50 w-60 mt-1 bg-white border border-input rounded-md shadow-lg max-h-60 overflow-hidden\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"sticky top-0 bg-white border-b border-input p-3\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t\t\t\t\t\t\t<Search className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground\" />\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\tref={searchInputRef}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={searchTerm}\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(e) => setSearchTerm(e.target.value)}\n\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"Buscar país o código\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"w-full pl-10 pr-3 py-2 h-9 border border-input rounded-md text-sm focus:outline-none focus:border-primary focus:ring-[3px] focus:ring-primary/20\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<ScrollArea className=\"max-h-48 overflow-y-auto pb-5\">\n\t\t\t\t\t\t\t\t\t\t{filteredCountries.map((country) => (\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tkey={country.code}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => handleCountrySelect(country)}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"w-full flex items-center gap-3 px-3 py-1 text-sm transition\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedCountry.code === country.code\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"bg-primary/5 border-l-2 border-primary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"hover:bg-muted/20\",\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-lg\">{country.flag}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"flex-1 text-left\">{country.name}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-muted-foreground\">{country.callingCode}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t{selectedCountry.code === country.code && <Check className=\"w-4 h-4 text-primary\" />}\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</ScrollArea>\n\t\t\t\t\t\t\t\t</m.div>\n\t\t\t\t\t\t\t</LazyMotion>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Phone input */}\n\t\t\t\t<input\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tid={resolvedId}\n\t\t\t\t\ttype=\"tel\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={formattedValue}\n\t\t\t\t\tonChange={(e) => handlePhoneChange(e.target.value, e)}\n\t\t\t\t\tonBlur={externalOnBlur}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t{...(!disabled ? { \"aria-invalid\": isInvalid } : {})}\n\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\"flex-1 px-3 py-1 h-input-default border-0 rounded-r-md bg-transparent focus:outline-none text-foreground text-sm\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tautoComplete=\"tel\"\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t{!disabled && externalError && externalTouched && <LabelError text={externalError || currentError || \"\"} />}\n\t\t</div>\n\t);\n};\n"],"names":["useState","getCountryCallingCode","useRef","useId","useEffect","AsYouType","isValidPhoneNumber","twMerge","jsxs","cn","jsx","ChevronDown","AnimatePresence","LazyMotion","domAnimation","m","Search","ScrollArea","Check","LabelError"],"mappings":"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"}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useState, useRef, useId, useEffect } from "react";
|
|
3
3
|
import { getCountryCallingCode, AsYouType, isValidPhoneNumber } from "libphonenumber-js";
|
|
4
|
-
import {
|
|
5
|
-
import { c as cn } from "../chunks/utils-
|
|
6
|
-
import "../chunks/textarea-
|
|
7
|
-
import { L as LabelError } from "../chunks/label-error-
|
|
8
|
-
import
|
|
9
|
-
import "../chunks/
|
|
4
|
+
import { twMerge } from "tailwind-merge";
|
|
5
|
+
import { c as cn } from "../chunks/utils-H80jjgLf.js";
|
|
6
|
+
import "../chunks/textarea-_HQpXiCX.js";
|
|
7
|
+
import { L as LabelError } from "../chunks/label-error-BTCuInp7.js";
|
|
8
|
+
import "clsx";
|
|
9
|
+
import { S as Search, a as ScrollArea } from "../chunks/scroll-area-JgKF61tc.js";
|
|
10
|
+
import "../chunks/button-B0fpJrMg.js";
|
|
10
11
|
import { AnimatePresence, LazyMotion, domAnimation, m } from "framer-motion";
|
|
11
12
|
import { C as ChevronDown, a as Check } from "../chunks/index-BAHiLt0S.js";
|
|
12
13
|
const countryData = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../src/components/phone-input/phone-input.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useState, useEffect, useRef, useId } from \"react\";\nimport { getCountryCallingCode, AsYouType, isValidPhoneNumber } from \"libphonenumber-js\";\nimport { ChevronDown, Check, Search } from \"lucide-react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { cn } from \"@/lib/utils\";\nimport { LabelError, ScrollArea } from \"../ui\";\nimport { AnimatePresence } from \"framer-motion\";\nimport { LazyMotion, m, domAnimation } from \"framer-motion\";\n\nconst countryData = {\n\tPE: { name: \"Perú\", flag: \"🇵🇪\" },\n\tUS: { name: \"Estados Unidos\", flag: \"🇺🇸\" },\n\tMX: { name: \"México\", flag: \"🇲🇽\" },\n\tAR: { name: \"Argentina\", flag: \"🇦🇷\" },\n\tCO: { name: \"Colombia\", flag: \"🇨🇴\" },\n\tCL: { name: \"Chile\", flag: \"🇨🇱\" },\n\tBR: { name: \"Brasil\", flag: \"🇧🇷\" },\n\tBO: { name: \"Bolivia\", flag: \"🇧🇴\" },\n\tVE: { name: \"Venezuela\", flag: \"🇻🇪\" },\n};\n\ninterface Country {\n\tcode: string;\n\tname: string;\n\tflag: string;\n\tcallingCode: string;\n}\n\ninterface PhoneInputProps {\n\tid?: string;\n\tname: string;\n\tlabel?: string;\n\tplaceholder?: string;\n\trequired?: boolean;\n\tclassName?: string;\n\tonCountryChange?: (country: Country) => void;\n\tonPhoneChange?: (phone: string, isValid: boolean) => void;\n\ttouched?: boolean;\n\tvalues?: any;\n\tonBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n\terror?: string;\n\tvalue?: string; // para standalone\n\tdefaultCountry?: string;\n\tdisabled?: boolean;\n\tclassNameContainer?: string;\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n\tid,\n\tname,\n\tlabel = \"Teléfono\",\n\tplaceholder = \"Ingrese un número de teléfono\",\n\trequired = false,\n\tclassName = \"\",\n\tclassNameContainer = \"\",\n\tonCountryChange,\n\tonPhoneChange,\n\ttouched: externalTouched,\n\tonBlur: externalOnBlur,\n\terror: externalError,\n\tvalue: externalValue,\n\tdefaultCountry = \"PE\",\n\tdisabled = false,\n}) => {\n\tconst [selectedCountry, setSelectedCountry] = useState<Country>({\n\t\tcode: defaultCountry,\n\t\tname: countryData[defaultCountry as keyof typeof countryData].name,\n\t\tflag: countryData[defaultCountry as keyof typeof countryData].flag,\n\t\tcallingCode: `+${getCountryCallingCode(defaultCountry as keyof typeof countryData)}`,\n\t});\n\n\tconst [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\tconst [phoneValue, setPhoneValue] = useState(\"\");\n\tconst [formattedValue, setFormattedValue] = useState(\"\");\n\tconst [isValid, setIsValid] = useState(false);\n\tconst [countries, setCountries] = useState<Country[]>([]);\n\tconst [searchTerm, setSearchTerm] = useState(\"\");\n\tconst [filteredCountries, setFilteredCountries] = useState<Country[]>([]);\n\n\tconst dropdownRef = useRef<HTMLDivElement>(null);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst searchInputRef = useRef<HTMLInputElement>(null);\n\n\tconst inputId = useId();\n\tconst resolvedId = id || inputId;\n\tconst isControlled = externalValue !== undefined;\n\n\t// Inicializar países en el orden definido en countryData\n\tuseEffect(() => {\n\t\tconst availableCountries = Object.keys(countryData).map((countryCode) => {\n\t\t\tconst data = countryData[countryCode as keyof typeof countryData];\n\t\t\treturn {\n\t\t\t\tcode: countryCode,\n\t\t\t\tname: data.name,\n\t\t\t\tflag: data.flag,\n\t\t\t\tcallingCode: `+${getCountryCallingCode(countryCode as keyof typeof countryData)}`,\n\t\t\t};\n\t\t});\n\t\tsetCountries(availableCountries);\n\t\tsetFilteredCountries(availableCountries);\n\t}, []);\n\n\t// Manejo de click fuera para cerrar dropdown\n\tuseEffect(() => {\n\t\tconst handleClickOutside = (event: MouseEvent) => {\n\t\t\tif (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n\t\t\t\tsetIsDropdownOpen(false);\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener(\"mousedown\", handleClickOutside);\n\t\treturn () => document.removeEventListener(\"mousedown\", handleClickOutside);\n\t}, []);\n\n\t// Sincronizar externalValue con estados internos (incluye reset con \"\")\n\tuseEffect(() => {\n\t\tif (!isControlled || countries.length === 0) return;\n\n\t\t// Si el valor externo es vacío o null, limpiar estados\n\t\tif (externalValue === \"\" || externalValue == null) {\n\t\t\tsetPhoneValue(\"\");\n\t\t\tsetFormattedValue(\"\");\n\t\t\tsetIsValid(false);\n\t\t\treturn;\n\t\t}\n\n\t\tconst value = String(externalValue);\n\t\tlet country = countries.find((c) => value.startsWith(c.callingCode));\n\n\t\t// Si no se detecta país por código, mantener el seleccionado actual\n\t\tif (!country) {\n\t\t\tcountry = selectedCountry;\n\t\t}\n\n\t\tif (country) {\n\t\t\t// Actualizar país si cambió\n\t\t\tif (selectedCountry.code !== country.code) {\n\t\t\t\tsetSelectedCountry(country);\n\t\t\t}\n\n\t\t\tconst raw = value.replace(country.callingCode, \"\").replace(/[^\\d]/g, \"\");\n\t\t\tsetPhoneValue(raw);\n\n\t\t\tconst formatter = new AsYouType(country.code as keyof typeof countryData);\n\t\t\tconst formatted = formatter.input(raw);\n\t\t\tsetFormattedValue(formatted);\n\n\t\t\tconst valid = isValidPhoneNumber(value);\n\t\t\tsetIsValid(valid);\n\t\t} else {\n\t\t\t// Fallback: no país detectado, limpiar formato pero conservar value crudo\n\t\t\tsetPhoneValue(\"\");\n\t\t\tsetFormattedValue(\"\");\n\t\t\tsetIsValid(false);\n\t\t}\n\t}, [externalValue, countries, isControlled, selectedCountry]);\n\n\t// Formatear número al escribir\n\tconst handlePhoneChange = (value: string, event?: React.ChangeEvent<HTMLInputElement>) => {\n\t\tconst cleanValue = value.replace(/[^\\d]/g, \"\");\n\n\t\tif (event?.nativeEvent instanceof InputEvent && event.nativeEvent.inputType === \"deleteContentBackward\" && cleanValue.length < 4) {\n\t\t\tsetPhoneValue(cleanValue);\n\t\t\tsetFormattedValue(cleanValue); // mostrar sin formato\n\t\t\treturn;\n\t\t}\n\t\tconst formatter = new AsYouType(selectedCountry.code as keyof typeof countryData);\n\t\tconst formatted = formatter.input(cleanValue);\n\n\t\tsetPhoneValue(cleanValue);\n\t\tsetFormattedValue(formatted);\n\n\t\tconst fullNumber = selectedCountry.callingCode + cleanValue;\n\t\tconst valid = isValidPhoneNumber(fullNumber);\n\t\tsetIsValid(valid);\n\n\t\tonPhoneChange?.(fullNumber, valid);\n\t};\n\n\t// Seleccionar país\n\tconst handleCountrySelect = (country: Country) => {\n\t\tsetSelectedCountry(country);\n\t\tsetIsDropdownOpen(false);\n\t\tsetSearchTerm(\"\");\n\n\t\tif (phoneValue) {\n\t\t\tconst formatter = new AsYouType(country.code as keyof typeof countryData);\n\t\t\tconst formatted = formatter.input(phoneValue);\n\t\t\tsetFormattedValue(formatted);\n\n\t\t\tconst fullNumber = country.callingCode + phoneValue;\n\t\t\tconst valid = isValidPhoneNumber(fullNumber);\n\t\t\tsetIsValid(valid);\n\n\t\t\tonPhoneChange?.(fullNumber, valid);\n\t\t}\n\n\t\tonCountryChange?.(country);\n\t\tsetTimeout(() => inputRef.current?.focus(), 100);\n\t};\n\n\tconst handleDropdownToggle = () => {\n\t\tsetIsDropdownOpen(!isDropdownOpen);\n\t\tif (!isDropdownOpen) {\n\t\t\tsetTimeout(() => searchInputRef.current?.focus(), 100);\n\t\t}\n\t};\n\n\t// Filtrar países en búsqueda\n\tuseEffect(() => {\n\t\tif (!searchTerm.trim()) {\n\t\t\tsetFilteredCountries(countries);\n\t\t} else {\n\t\t\tconst searchLower = searchTerm.toLowerCase();\n\t\t\tconst filtered = countries.filter(\n\t\t\t\t(country) =>\n\t\t\t\t\tcountry.name.toLowerCase().includes(searchLower) ||\n\t\t\t\t\tcountry.callingCode.includes(searchTerm) ||\n\t\t\t\t\tcountry.code.toLowerCase().includes(searchLower),\n\t\t\t);\n\t\t\tsetFilteredCountries(filtered);\n\t\t}\n\t}, [searchTerm, countries]);\n\n\tconst isTouched = externalTouched;\n\tconst currentError = externalError;\n\tconst hasError = isTouched && currentError;\n\n\tconst isInvalid = !disabled && !!externalError && externalTouched;\n\n\treturn (\n\t\t<div className={twMerge(\"w-full relative flex flex-col\", classNameContainer)}>\n\t\t\t{label && (\n\t\t\t\t<label\n\t\t\t\t\thtmlFor={resolvedId}\n\t\t\t\t\tclassName={cn(\"form-control-label block font-normal text-sm text-foreground mb-1\", {\n\t\t\t\t\t\t\"text-danger\": hasError,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{label} {required && <span className=\"text-danger\">*</span>}\n\t\t\t\t</label>\n\t\t\t)}\n\n\t\t\t<div\n\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\"flex w-full min-w-0 transition-[color,box-shadow] outline-none rounded-md h-input-default\",\n\t\t\t\t\t\"bg-white border border-input\",\n\t\t\t\t\t\"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\thasError\n\t\t\t\t\t\t? \"border-danger aria-invalid:ring-danger/20\"\n\t\t\t\t\t\t: isValid && phoneValue\n\t\t\t\t\t\t? \"focus-within:border-primary focus-within:ring-primary/20\"\n\t\t\t\t\t\t: \"focus-within:border-primary focus-within:ring-primary/20\",\n\t\t\t\t\t\"focus-within:ring-[3px]\",\n\t\t\t\t)}\n\t\t\t\taria-invalid={isInvalid ? \"true\" : \"false\"}\n\t\t\t>\n\t\t\t\t{/* Country selector */}\n\t\t\t\t<div className=\"relative\" ref={dropdownRef}>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={handleDropdownToggle}\n\t\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\t\"flex items-center gap-2 px-3 border-r border-input h-input-default\",\n\t\t\t\t\t\t\t\"hover:bg-muted/20 focus:outline-none rounded-l-md\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"text-lg\">{selectedCountry.flag}</span>\n\t\t\t\t\t\t<span className=\"text-sm font-medium text-foreground\">{selectedCountry.callingCode}</span>\n\t\t\t\t\t\t<ChevronDown className={`w-4 h-4 text-muted-foreground transition-transform ${isDropdownOpen ? \"rotate-180\" : \"\"}`} />\n\t\t\t\t\t</button>\n\n\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t{isDropdownOpen && (\n\t\t\t\t\t\t\t<LazyMotion features={domAnimation}>\n\t\t\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\t\t\tkey=\"country-dropdown\"\n\t\t\t\t\t\t\t\t\tinitial={{ opacity: 0, y: -8, scale: 0.98 }}\n\t\t\t\t\t\t\t\t\tanimate={{ opacity: 1, y: 0, scale: 1, transition: { type: \"spring\", stiffness: 420, damping: 28 } }}\n\t\t\t\t\t\t\t\t\texit={{ opacity: 0, y: -6, scale: 0.98, transition: { duration: 0.15, ease: \"easeOut\" } }}\n\t\t\t\t\t\t\t\t\tstyle={{ transformOrigin: \"top center\" }}\n\t\t\t\t\t\t\t\t\tclassName=\"absolute top-full left-0 z-50 w-60 mt-1 bg-white border border-input rounded-md shadow-lg max-h-60 overflow-hidden\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"sticky top-0 bg-white border-b border-input p-3\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t\t\t\t\t\t\t<Search className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground\" />\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\tref={searchInputRef}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={searchTerm}\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(e) => setSearchTerm(e.target.value)}\n\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"Buscar país o código\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"w-full pl-10 pr-3 py-2 h-9 border border-input rounded-md text-sm focus:outline-none focus:border-primary focus:ring-[3px] focus:ring-primary/20\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<ScrollArea className=\"max-h-48 overflow-y-auto pb-5\">\n\t\t\t\t\t\t\t\t\t\t{filteredCountries.map((country) => (\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tkey={country.code}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => handleCountrySelect(country)}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"w-full flex items-center gap-3 px-3 py-1 text-sm transition\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedCountry.code === country.code\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"bg-primary/5 border-l-2 border-primary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"hover:bg-muted/20\",\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-lg\">{country.flag}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"flex-1 text-left\">{country.name}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-muted-foreground\">{country.callingCode}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t{selectedCountry.code === country.code && <Check className=\"w-4 h-4 text-primary\" />}\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</ScrollArea>\n\t\t\t\t\t\t\t\t</m.div>\n\t\t\t\t\t\t\t</LazyMotion>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Phone input */}\n\t\t\t\t<input\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tid={resolvedId}\n\t\t\t\t\ttype=\"tel\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={formattedValue}\n\t\t\t\t\tonChange={(e) => handlePhoneChange(e.target.value, e)}\n\t\t\t\t\tonBlur={externalOnBlur}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t{...(!disabled ? { \"aria-invalid\": isInvalid } : {})}\n\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\"flex-1 px-3 py-1 h-input-default border-0 rounded-r-md bg-transparent focus:outline-none text-foreground text-sm\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tautoComplete=\"tel\"\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t{!disabled && externalError && externalTouched && <LabelError text={externalError || currentError || \"\"} />}\n\t\t</div>\n\t);\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../src/components/phone-input/phone-input.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useState, useEffect, useRef, useId } from \"react\";\nimport { getCountryCallingCode, AsYouType, isValidPhoneNumber } from \"libphonenumber-js\";\nimport { ChevronDown, Check, Search } from \"lucide-react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { cn } from \"@/lib/utils\";\nimport { LabelError, ScrollArea } from \"../ui\";\nimport { AnimatePresence } from \"framer-motion\";\nimport { LazyMotion, m, domAnimation } from \"framer-motion\";\n\nconst countryData = {\n\tPE: { name: \"Perú\", flag: \"🇵🇪\" },\n\tUS: { name: \"Estados Unidos\", flag: \"🇺🇸\" },\n\tMX: { name: \"México\", flag: \"🇲🇽\" },\n\tAR: { name: \"Argentina\", flag: \"🇦🇷\" },\n\tCO: { name: \"Colombia\", flag: \"🇨🇴\" },\n\tCL: { name: \"Chile\", flag: \"🇨🇱\" },\n\tBR: { name: \"Brasil\", flag: \"🇧🇷\" },\n\tBO: { name: \"Bolivia\", flag: \"🇧🇴\" },\n\tVE: { name: \"Venezuela\", flag: \"🇻🇪\" },\n};\n\ninterface Country {\n\tcode: string;\n\tname: string;\n\tflag: string;\n\tcallingCode: string;\n}\n\ninterface PhoneInputProps {\n\tid?: string;\n\tname: string;\n\tlabel?: string;\n\tplaceholder?: string;\n\trequired?: boolean;\n\tclassName?: string;\n\tonCountryChange?: (country: Country) => void;\n\tonPhoneChange?: (phone: string, isValid: boolean) => void;\n\ttouched?: boolean;\n\tvalues?: any;\n\tonBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n\terror?: string;\n\tvalue?: string; // para standalone\n\tdefaultCountry?: string;\n\tdisabled?: boolean;\n\tclassNameContainer?: string;\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n\tid,\n\tname,\n\tlabel = \"Teléfono\",\n\tplaceholder = \"Ingrese un número de teléfono\",\n\trequired = false,\n\tclassName = \"\",\n\tclassNameContainer = \"\",\n\tonCountryChange,\n\tonPhoneChange,\n\ttouched: externalTouched,\n\tonBlur: externalOnBlur,\n\terror: externalError,\n\tvalue: externalValue,\n\tdefaultCountry = \"PE\",\n\tdisabled = false,\n}) => {\n\tconst [selectedCountry, setSelectedCountry] = useState<Country>({\n\t\tcode: defaultCountry,\n\t\tname: countryData[defaultCountry as keyof typeof countryData].name,\n\t\tflag: countryData[defaultCountry as keyof typeof countryData].flag,\n\t\tcallingCode: `+${getCountryCallingCode(defaultCountry as keyof typeof countryData)}`,\n\t});\n\n\tconst [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\tconst [phoneValue, setPhoneValue] = useState(\"\");\n\tconst [formattedValue, setFormattedValue] = useState(\"\");\n\tconst [isValid, setIsValid] = useState(false);\n\tconst [countries, setCountries] = useState<Country[]>([]);\n\tconst [searchTerm, setSearchTerm] = useState(\"\");\n\tconst [filteredCountries, setFilteredCountries] = useState<Country[]>([]);\n\n\tconst dropdownRef = useRef<HTMLDivElement>(null);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst searchInputRef = useRef<HTMLInputElement>(null);\n\n\tconst inputId = useId();\n\tconst resolvedId = id || inputId;\n\tconst isControlled = externalValue !== undefined;\n\n\t// Inicializar países en el orden definido en countryData\n\tuseEffect(() => {\n\t\tconst availableCountries = Object.keys(countryData).map((countryCode) => {\n\t\t\tconst data = countryData[countryCode as keyof typeof countryData];\n\t\t\treturn {\n\t\t\t\tcode: countryCode,\n\t\t\t\tname: data.name,\n\t\t\t\tflag: data.flag,\n\t\t\t\tcallingCode: `+${getCountryCallingCode(countryCode as keyof typeof countryData)}`,\n\t\t\t};\n\t\t});\n\t\tsetCountries(availableCountries);\n\t\tsetFilteredCountries(availableCountries);\n\t}, []);\n\n\t// Manejo de click fuera para cerrar dropdown\n\tuseEffect(() => {\n\t\tconst handleClickOutside = (event: MouseEvent) => {\n\t\t\tif (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n\t\t\t\tsetIsDropdownOpen(false);\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener(\"mousedown\", handleClickOutside);\n\t\treturn () => document.removeEventListener(\"mousedown\", handleClickOutside);\n\t}, []);\n\n\t// Sincronizar externalValue con estados internos (incluye reset con \"\")\n\tuseEffect(() => {\n\t\tif (!isControlled || countries.length === 0) return;\n\n\t\t// Si el valor externo es vacío o null, limpiar estados\n\t\tif (externalValue === \"\" || externalValue == null) {\n\t\t\tsetPhoneValue(\"\");\n\t\t\tsetFormattedValue(\"\");\n\t\t\tsetIsValid(false);\n\t\t\treturn;\n\t\t}\n\n\t\tconst value = String(externalValue);\n\t\tlet country = countries.find((c) => value.startsWith(c.callingCode));\n\n\t\t// Si no se detecta país por código, mantener el seleccionado actual\n\t\tif (!country) {\n\t\t\tcountry = selectedCountry;\n\t\t}\n\n\t\tif (country) {\n\t\t\t// Actualizar país si cambió\n\t\t\tif (selectedCountry.code !== country.code) {\n\t\t\t\tsetSelectedCountry(country);\n\t\t\t}\n\n\t\t\tconst raw = value.replace(country.callingCode, \"\").replace(/[^\\d]/g, \"\");\n\t\t\tsetPhoneValue(raw);\n\n\t\t\tconst formatter = new AsYouType(country.code as keyof typeof countryData);\n\t\t\tconst formatted = formatter.input(raw);\n\t\t\tsetFormattedValue(formatted);\n\n\t\t\tconst valid = isValidPhoneNumber(value);\n\t\t\tsetIsValid(valid);\n\t\t} else {\n\t\t\t// Fallback: no país detectado, limpiar formato pero conservar value crudo\n\t\t\tsetPhoneValue(\"\");\n\t\t\tsetFormattedValue(\"\");\n\t\t\tsetIsValid(false);\n\t\t}\n\t}, [externalValue, countries, isControlled, selectedCountry]);\n\n\t// Formatear número al escribir\n\tconst handlePhoneChange = (value: string, event?: React.ChangeEvent<HTMLInputElement>) => {\n\t\tconst cleanValue = value.replace(/[^\\d]/g, \"\");\n\n\t\tif (event?.nativeEvent instanceof InputEvent && event.nativeEvent.inputType === \"deleteContentBackward\" && cleanValue.length < 4) {\n\t\t\tsetPhoneValue(cleanValue);\n\t\t\tsetFormattedValue(cleanValue); // mostrar sin formato\n\t\t\treturn;\n\t\t}\n\t\tconst formatter = new AsYouType(selectedCountry.code as keyof typeof countryData);\n\t\tconst formatted = formatter.input(cleanValue);\n\n\t\tsetPhoneValue(cleanValue);\n\t\tsetFormattedValue(formatted);\n\n\t\tconst fullNumber = selectedCountry.callingCode + cleanValue;\n\t\tconst valid = isValidPhoneNumber(fullNumber);\n\t\tsetIsValid(valid);\n\n\t\tonPhoneChange?.(fullNumber, valid);\n\t};\n\n\t// Seleccionar país\n\tconst handleCountrySelect = (country: Country) => {\n\t\tsetSelectedCountry(country);\n\t\tsetIsDropdownOpen(false);\n\t\tsetSearchTerm(\"\");\n\n\t\tif (phoneValue) {\n\t\t\tconst formatter = new AsYouType(country.code as keyof typeof countryData);\n\t\t\tconst formatted = formatter.input(phoneValue);\n\t\t\tsetFormattedValue(formatted);\n\n\t\t\tconst fullNumber = country.callingCode + phoneValue;\n\t\t\tconst valid = isValidPhoneNumber(fullNumber);\n\t\t\tsetIsValid(valid);\n\n\t\t\tonPhoneChange?.(fullNumber, valid);\n\t\t}\n\n\t\tonCountryChange?.(country);\n\t\tsetTimeout(() => inputRef.current?.focus(), 100);\n\t};\n\n\tconst handleDropdownToggle = () => {\n\t\tsetIsDropdownOpen(!isDropdownOpen);\n\t\tif (!isDropdownOpen) {\n\t\t\tsetTimeout(() => searchInputRef.current?.focus(), 100);\n\t\t}\n\t};\n\n\t// Filtrar países en búsqueda\n\tuseEffect(() => {\n\t\tif (!searchTerm.trim()) {\n\t\t\tsetFilteredCountries(countries);\n\t\t} else {\n\t\t\tconst searchLower = searchTerm.toLowerCase();\n\t\t\tconst filtered = countries.filter(\n\t\t\t\t(country) =>\n\t\t\t\t\tcountry.name.toLowerCase().includes(searchLower) ||\n\t\t\t\t\tcountry.callingCode.includes(searchTerm) ||\n\t\t\t\t\tcountry.code.toLowerCase().includes(searchLower),\n\t\t\t);\n\t\t\tsetFilteredCountries(filtered);\n\t\t}\n\t}, [searchTerm, countries]);\n\n\tconst isTouched = externalTouched;\n\tconst currentError = externalError;\n\tconst hasError = isTouched && currentError;\n\n\tconst isInvalid = !disabled && !!externalError && externalTouched;\n\n\treturn (\n\t\t<div className={twMerge(\"w-full relative flex flex-col\", classNameContainer)}>\n\t\t\t{label && (\n\t\t\t\t<label\n\t\t\t\t\thtmlFor={resolvedId}\n\t\t\t\t\tclassName={cn(\"form-control-label block font-normal text-sm text-foreground mb-1\", {\n\t\t\t\t\t\t\"text-danger\": hasError,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{label} {required && <span className=\"text-danger\">*</span>}\n\t\t\t\t</label>\n\t\t\t)}\n\n\t\t\t<div\n\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\"flex w-full min-w-0 transition-[color,box-shadow] outline-none rounded-md h-input-default\",\n\t\t\t\t\t\"bg-white border border-input\",\n\t\t\t\t\t\"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\thasError\n\t\t\t\t\t\t? \"border-danger aria-invalid:ring-danger/20\"\n\t\t\t\t\t\t: isValid && phoneValue\n\t\t\t\t\t\t? \"focus-within:border-primary focus-within:ring-primary/20\"\n\t\t\t\t\t\t: \"focus-within:border-primary focus-within:ring-primary/20\",\n\t\t\t\t\t\"focus-within:ring-[3px]\",\n\t\t\t\t)}\n\t\t\t\taria-invalid={isInvalid ? \"true\" : \"false\"}\n\t\t\t>\n\t\t\t\t{/* Country selector */}\n\t\t\t\t<div className=\"relative\" ref={dropdownRef}>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={handleDropdownToggle}\n\t\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\t\"flex items-center gap-2 px-3 border-r border-input h-input-default\",\n\t\t\t\t\t\t\t\"hover:bg-muted/20 focus:outline-none rounded-l-md\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"text-lg\">{selectedCountry.flag}</span>\n\t\t\t\t\t\t<span className=\"text-sm font-medium text-foreground\">{selectedCountry.callingCode}</span>\n\t\t\t\t\t\t<ChevronDown className={`w-4 h-4 text-muted-foreground transition-transform ${isDropdownOpen ? \"rotate-180\" : \"\"}`} />\n\t\t\t\t\t</button>\n\n\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t{isDropdownOpen && (\n\t\t\t\t\t\t\t<LazyMotion features={domAnimation}>\n\t\t\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\t\t\tkey=\"country-dropdown\"\n\t\t\t\t\t\t\t\t\tinitial={{ opacity: 0, y: -8, scale: 0.98 }}\n\t\t\t\t\t\t\t\t\tanimate={{ opacity: 1, y: 0, scale: 1, transition: { type: \"spring\", stiffness: 420, damping: 28 } }}\n\t\t\t\t\t\t\t\t\texit={{ opacity: 0, y: -6, scale: 0.98, transition: { duration: 0.15, ease: \"easeOut\" } }}\n\t\t\t\t\t\t\t\t\tstyle={{ transformOrigin: \"top center\" }}\n\t\t\t\t\t\t\t\t\tclassName=\"absolute top-full left-0 z-50 w-60 mt-1 bg-white border border-input rounded-md shadow-lg max-h-60 overflow-hidden\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"sticky top-0 bg-white border-b border-input p-3\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t\t\t\t\t\t\t<Search className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground\" />\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\tref={searchInputRef}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={searchTerm}\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(e) => setSearchTerm(e.target.value)}\n\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"Buscar país o código\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"w-full pl-10 pr-3 py-2 h-9 border border-input rounded-md text-sm focus:outline-none focus:border-primary focus:ring-[3px] focus:ring-primary/20\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<ScrollArea className=\"max-h-48 overflow-y-auto pb-5\">\n\t\t\t\t\t\t\t\t\t\t{filteredCountries.map((country) => (\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tkey={country.code}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => handleCountrySelect(country)}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"w-full flex items-center gap-3 px-3 py-1 text-sm transition\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedCountry.code === country.code\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"bg-primary/5 border-l-2 border-primary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"hover:bg-muted/20\",\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-lg\">{country.flag}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"flex-1 text-left\">{country.name}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-muted-foreground\">{country.callingCode}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t{selectedCountry.code === country.code && <Check className=\"w-4 h-4 text-primary\" />}\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</ScrollArea>\n\t\t\t\t\t\t\t\t</m.div>\n\t\t\t\t\t\t\t</LazyMotion>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Phone input */}\n\t\t\t\t<input\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tid={resolvedId}\n\t\t\t\t\ttype=\"tel\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={formattedValue}\n\t\t\t\t\tonChange={(e) => handlePhoneChange(e.target.value, e)}\n\t\t\t\t\tonBlur={externalOnBlur}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t{...(!disabled ? { \"aria-invalid\": isInvalid } : {})}\n\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\"flex-1 px-3 py-1 h-input-default border-0 rounded-r-md bg-transparent focus:outline-none text-foreground text-sm\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tautoComplete=\"tel\"\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t{!disabled && externalError && externalTouched && <LabelError text={externalError || currentError || \"\"} />}\n\t\t</div>\n\t);\n};\n"],"names":[],"mappings":"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"}
|
package/dist/ripple/index.cjs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const ripple = require("../chunks/ripple-
|
|
3
|
+
const ripple = require("../chunks/ripple-Bm6QamOy.js");
|
|
4
4
|
exports.Ripple = ripple.Ripple;
|
|
5
5
|
exports.useRipple = ripple.useRipple;
|
|
6
6
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const React = require("react");
|
|
5
5
|
const ReactDOM = require("react-dom");
|
|
6
6
|
const floatingUi_dom = require("../chunks/floating-ui.dom-DsMDyTcd.js");
|
|
7
7
|
const index$1 = require("../chunks/index-COxPsg-F.js");
|
|
8
8
|
const iconBase = require("../chunks/iconBase-BDCKtYly.js");
|
|
9
|
-
const checkbox = require("../chunks/checkbox-
|
|
10
|
-
const
|
|
9
|
+
const checkbox = require("../chunks/checkbox-ovjcc7jF.js");
|
|
10
|
+
const tailwindMerge = require("tailwind-merge");
|
|
11
11
|
const pattern = require("../chunks/pattern-D0UCtvgZ.js");
|
|
12
12
|
require("../chunks/assertion-C4-_LOAB.js");
|
|
13
|
-
const clsx = require("
|
|
14
|
-
const labelError = require("../chunks/label-error-
|
|
15
|
-
const utils = require("../chunks/utils-
|
|
13
|
+
const clsx = require("clsx");
|
|
14
|
+
const labelError = require("../chunks/label-error-C8lIsfXu.js");
|
|
15
|
+
const utils = require("../chunks/utils-ij3i9zTT.js");
|
|
16
16
|
function _interopNamespaceDefault(e) {
|
|
17
17
|
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
18
18
|
if (e) {
|
|
@@ -5192,15 +5192,15 @@ var StateManagedSelect$1 = StateManagedSelect;
|
|
|
5192
5192
|
const CustomDropdownIndicator = (props) => {
|
|
5193
5193
|
const { selectProps } = props;
|
|
5194
5194
|
const { menuIsOpen } = selectProps;
|
|
5195
|
-
return /* @__PURE__ */
|
|
5195
|
+
return /* @__PURE__ */ jsxRuntime.jsx(components.DropdownIndicator, { ...props, className: "cursor-pointer", children: menuIsOpen ? /* @__PURE__ */ jsxRuntime.jsx(index$1.IoIosArrowUp, {}) : /* @__PURE__ */ jsxRuntime.jsx(index$1.IoIosArrowDown, {}) });
|
|
5196
5196
|
};
|
|
5197
5197
|
function IoCloseSharp(props) {
|
|
5198
5198
|
return iconBase.GenIcon({ "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49z" }, "child": [] }] })(props);
|
|
5199
5199
|
}
|
|
5200
5200
|
const CustomClearIndicator = (props) => {
|
|
5201
|
-
return /* @__PURE__ */
|
|
5201
|
+
return /* @__PURE__ */ jsxRuntime.jsx(components.ClearIndicator, { className: "cursor-pointer", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IoCloseSharp, {}) });
|
|
5202
5202
|
};
|
|
5203
|
-
const CheckIcon = (props) => /* @__PURE__ */
|
|
5203
|
+
const CheckIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: 16, height: 16, "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z", fill: "currentColor" }) });
|
|
5204
5204
|
const CustomOption = (props) => {
|
|
5205
5205
|
const { label, data, isMulti, isSelected } = props;
|
|
5206
5206
|
const {
|
|
@@ -5219,9 +5219,9 @@ const CustomOption = (props) => {
|
|
|
5219
5219
|
const RightAdornment = () => {
|
|
5220
5220
|
if (isMulti && isCheckMultiOptions) return null;
|
|
5221
5221
|
if (!showCheckItemSelected) return null;
|
|
5222
|
-
return /* @__PURE__ */
|
|
5222
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex w-4 shrink-0 justify-center", children: isSelected ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) : null });
|
|
5223
5223
|
};
|
|
5224
|
-
const LeftCheckbox = () => isMulti && isCheckMultiOptions ? /* @__PURE__ */
|
|
5224
|
+
const LeftCheckbox = () => isMulti && isCheckMultiOptions ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
5225
5225
|
checkbox.Checkbox,
|
|
5226
5226
|
{
|
|
5227
5227
|
id: data.id,
|
|
@@ -5233,21 +5233,21 @@ const CustomOption = (props) => {
|
|
|
5233
5233
|
size: "sm"
|
|
5234
5234
|
}
|
|
5235
5235
|
) : null;
|
|
5236
|
-
return /* @__PURE__ */
|
|
5237
|
-
/* @__PURE__ */
|
|
5238
|
-
childrenOption ? /* @__PURE__ */
|
|
5239
|
-
/* @__PURE__ */
|
|
5240
|
-
/* @__PURE__ */
|
|
5241
|
-
] }) : /* @__PURE__ */
|
|
5242
|
-
/* @__PURE__ */
|
|
5243
|
-
/* @__PURE__ */
|
|
5236
|
+
return /* @__PURE__ */ jsxRuntime.jsx(components.Option, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center w-full gap-2", children: [
|
|
5237
|
+
/* @__PURE__ */ jsxRuntime.jsx(LeftCheckbox, {}),
|
|
5238
|
+
childrenOption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full gap-2", children: [
|
|
5239
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: childrenOption({ data, isSelected }) }),
|
|
5240
|
+
/* @__PURE__ */ jsxRuntime.jsx(RightAdornment, {})
|
|
5241
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full gap-2", children: [
|
|
5242
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: label }),
|
|
5243
|
+
/* @__PURE__ */ jsxRuntime.jsx(RightAdornment, {})
|
|
5244
5244
|
] })
|
|
5245
5245
|
] }) });
|
|
5246
5246
|
};
|
|
5247
5247
|
const CustomsControlStart = ({ children, ...props }) => {
|
|
5248
5248
|
const { childrenValueStart } = props.selectProps;
|
|
5249
|
-
return /* @__PURE__ */
|
|
5250
|
-
childrenValueStart ? /* @__PURE__ */
|
|
5249
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(components.Control, { ...props, children: [
|
|
5250
|
+
childrenValueStart ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-2", children: childrenValueStart }) : null,
|
|
5251
5251
|
children
|
|
5252
5252
|
] });
|
|
5253
5253
|
};
|
|
@@ -5255,21 +5255,21 @@ function LuLoaderCircle(props) {
|
|
|
5255
5255
|
return iconBase.GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M21 12a9 9 0 1 1-6.219-8.56" }, "child": [] }] })(props);
|
|
5256
5256
|
}
|
|
5257
5257
|
const CustomLoadingIndicator = ({ innerProps, ...rest }) => {
|
|
5258
|
-
return /* @__PURE__ */
|
|
5258
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ...innerProps, children: /* @__PURE__ */ jsxRuntime.jsx(LuLoaderCircle, { className: "animate-spin fill-transparent text-gray-500" }) });
|
|
5259
5259
|
};
|
|
5260
5260
|
function GoCircleSlash(props) {
|
|
5261
5261
|
return iconBase.GenIcon({ "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM5.834 19.227A9.464 9.464 0 0 0 12 21.5a9.5 9.5 0 0 0 9.5-9.5 9.464 9.464 0 0 0-2.273-6.166ZM2.5 12a9.464 9.464 0 0 0 2.273 6.166L18.166 4.773A9.463 9.463 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z" }, "child": [] }] })(props);
|
|
5262
5262
|
}
|
|
5263
5263
|
const CustomNoOptionsMessage = (props) => {
|
|
5264
|
-
return /* @__PURE__ */
|
|
5264
|
+
return /* @__PURE__ */ jsxRuntime.jsx(components.NoOptionsMessage, { ...props, className: "h-16 flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(GoCircleSlash, { className: "w-6 h-6 text-text-700" }) });
|
|
5265
5265
|
};
|
|
5266
5266
|
const CustomLoadingMessage = ({ innerProps }) => {
|
|
5267
|
-
return /* @__PURE__ */
|
|
5267
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ...innerProps, className: "h-16 flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(LuLoaderCircle, { className: "animate-spin fill-transparent w-6 h-6 text-gray-500" }) });
|
|
5268
5268
|
};
|
|
5269
5269
|
const CustomSingleValue = ({ children, ...props }) => {
|
|
5270
5270
|
const { data, selectProps } = props;
|
|
5271
5271
|
const { childrenSingleValue } = selectProps;
|
|
5272
|
-
return /* @__PURE__ */
|
|
5272
|
+
return /* @__PURE__ */ jsxRuntime.jsx(components.SingleValue, { ...props, children: childrenSingleValue ? childrenSingleValue({ data }) : children });
|
|
5273
5273
|
};
|
|
5274
5274
|
const CustomInput = (props) => {
|
|
5275
5275
|
const { pattern: pattern$1 } = props.selectProps;
|
|
@@ -5278,12 +5278,12 @@ const CustomInput = (props) => {
|
|
|
5278
5278
|
e.preventDefault();
|
|
5279
5279
|
}
|
|
5280
5280
|
};
|
|
5281
|
-
return /* @__PURE__ */
|
|
5281
|
+
return /* @__PURE__ */ jsxRuntime.jsx(components.Input, { ...props, onKeyDown: handleKeyDown, autoComplete: "off", autoCapitalize: "off" });
|
|
5282
5282
|
};
|
|
5283
5283
|
const fcSelectStyles = ({ color, widthMenu, error, touched, size }) => {
|
|
5284
|
-
const optionHover = clsx
|
|
5285
|
-
const optionSelected = clsx
|
|
5286
|
-
const multiValueColor = clsx
|
|
5284
|
+
const optionHover = clsx(color === "default" && "var(--accent)", color === "success" && "var(--color-success-100)");
|
|
5285
|
+
const optionSelected = clsx(color === "default" && "var(--accent)", color === "success" && "var(--color-success-200)");
|
|
5286
|
+
const multiValueColor = clsx(color === "default" && "var(--color-default)", color === "success" && "var(--color-success-500)");
|
|
5287
5287
|
const colorStyles = {
|
|
5288
5288
|
option: (styles, { isFocused, isSelected, isMulti }) => {
|
|
5289
5289
|
const backgroundColor = isFocused && !isSelected ? optionHover : isSelected ? optionSelected : "var(--color-content1-default)";
|
|
@@ -5508,13 +5508,13 @@ const SelectInput = React.forwardRef(
|
|
|
5508
5508
|
onChange2({ item, data: itemAll, action });
|
|
5509
5509
|
}
|
|
5510
5510
|
};
|
|
5511
|
-
return /* @__PURE__ */
|
|
5512
|
-
label && /* @__PURE__ */
|
|
5511
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("w-full relative flex flex-col", classNameContainer), children: [
|
|
5512
|
+
label && /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: resolvedId, className: labelClass, children: [
|
|
5513
5513
|
label,
|
|
5514
5514
|
" ",
|
|
5515
|
-
required && /* @__PURE__ */
|
|
5515
|
+
required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-danger", children: "*" })
|
|
5516
5516
|
] }),
|
|
5517
|
-
/* @__PURE__ */
|
|
5517
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5518
5518
|
StateManagedSelect$1,
|
|
5519
5519
|
{
|
|
5520
5520
|
ref,
|
|
@@ -5576,7 +5576,7 @@ const SelectInput = React.forwardRef(
|
|
|
5576
5576
|
}
|
|
5577
5577
|
}
|
|
5578
5578
|
) }),
|
|
5579
|
-
!disabled && error && touched ? /* @__PURE__ */
|
|
5579
|
+
!disabled && error && touched ? /* @__PURE__ */ jsxRuntime.jsx(labelError.LabelError, { text: error.toString() }) : null
|
|
5580
5580
|
] });
|
|
5581
5581
|
}
|
|
5582
5582
|
);
|
|
@@ -5826,13 +5826,13 @@ const Autocomplete = React.forwardRef(
|
|
|
5826
5826
|
}
|
|
5827
5827
|
}
|
|
5828
5828
|
};
|
|
5829
|
-
return /* @__PURE__ */
|
|
5830
|
-
label && /* @__PURE__ */
|
|
5829
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("w-full relative flex flex-col", classNameContainer), children: [
|
|
5830
|
+
label && /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: resolvedId, className: labelClass, children: [
|
|
5831
5831
|
label,
|
|
5832
5832
|
" ",
|
|
5833
|
-
required && /* @__PURE__ */
|
|
5833
|
+
required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-danger", children: "*" })
|
|
5834
5834
|
] }),
|
|
5835
|
-
/* @__PURE__ */
|
|
5835
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5836
5836
|
AsyncSelect$1,
|
|
5837
5837
|
{
|
|
5838
5838
|
ref,
|
|
@@ -5892,7 +5892,7 @@ const Autocomplete = React.forwardRef(
|
|
|
5892
5892
|
}
|
|
5893
5893
|
}
|
|
5894
5894
|
) }),
|
|
5895
|
-
!disabled && error && touched ? /* @__PURE__ */
|
|
5895
|
+
!disabled && error && touched ? /* @__PURE__ */ jsxRuntime.jsx(labelError.LabelError, { text: error.toString() }) : null
|
|
5896
5896
|
] });
|
|
5897
5897
|
}
|
|
5898
5898
|
);
|