@beweco/aurora-ui 0.0.8 → 0.0.9
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/index.cjs.js
CHANGED
|
@@ -294,13 +294,25 @@ var countries = [
|
|
|
294
294
|
{ code: "+971", name: "UAE", flag: "🇦🇪" },
|
|
295
295
|
];
|
|
296
296
|
var uniqueCountries = Array.from(new Map(countries.map(function (item) { return [item.code + item.name, item]; })).values());
|
|
297
|
+
var defaultTranslations = {
|
|
298
|
+
label: "Teléfono",
|
|
299
|
+
placeholder: "Número de teléfono",
|
|
300
|
+
searchPlaceholder: "Buscar país...",
|
|
301
|
+
selectCountryAriaLabel: "Seleccionar país",
|
|
302
|
+
expandListAriaLabel: "Desplegar lista de países",
|
|
303
|
+
noCountriesFound: "No se encontraron países",
|
|
304
|
+
};
|
|
297
305
|
var Phone = function (_a) {
|
|
298
|
-
var
|
|
306
|
+
var label = _a.label, _b = _a.required, required = _b === void 0 ? false : _b, _c = _a.error, error = _c === void 0 ? false : _c, _d = _a.errorText, errorText = _d === void 0 ? "" : _d, _e = _a.value, value = _e === void 0 ? "" : _e, onChange = _a.onChange, onBlur = _a.onBlur, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.name, name = _g === void 0 ? "phone" : _g, _h = _a.translations, translations = _h === void 0 ? {} : _h;
|
|
299
307
|
var _j = React.useState(false), isDropdownOpen = _j[0], setIsDropdownOpen = _j[1];
|
|
300
308
|
var _k = React.useState(uniqueCountries[0]), selectedCountry = _k[0], setSelectedCountry = _k[1];
|
|
301
309
|
var _l = React.useState(""), inputValue = _l[0], setInputValue = _l[1];
|
|
302
310
|
var dropdownRef = React.useRef(null);
|
|
303
311
|
var _m = React.useState(uniqueCountries), filteredCountries = _m[0], setFilteredCountries = _m[1];
|
|
312
|
+
// Combinar traducciones por defecto con las proporcionadas
|
|
313
|
+
var t = __assign(__assign({}, defaultTranslations), translations);
|
|
314
|
+
// Usar la etiqueta de las traducciones si no se proporciona label explícitamente
|
|
315
|
+
var finalLabel = label || t.label;
|
|
304
316
|
// Sincroniza valor externo
|
|
305
317
|
React.useEffect(function () {
|
|
306
318
|
if (value) {
|
|
@@ -351,11 +363,11 @@ var Phone = function (_a) {
|
|
|
351
363
|
onChange(selectedCountry.code + val);
|
|
352
364
|
}
|
|
353
365
|
};
|
|
354
|
-
return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 w-full relative", children: [
|
|
366
|
+
return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 w-full relative", children: [finalLabel && (jsxRuntime.jsxs("label", { htmlFor: "phone-input-".concat(name), className: "text-sm font-medium text-gray-700 dark:text-gray-200 mb-1", children: [finalLabel, " ", required && jsxRuntime.jsx("span", { className: "text-pink-600", children: "*" })] })), jsxRuntime.jsxs("div", { className: "flex items-center w-full min-h-[56px] bg-white dark:bg-gray-900 transition-colors shadow-sm border border-[#E4E4E7] dark:border-gray-700 rounded-2xl focus-within:border-blue-500 dark:focus-within:border-blue-400 ".concat(error
|
|
355
367
|
? "border-pink-500 dark:border-pink-600"
|
|
356
368
|
: "border-[#E4E4E7] dark:border-gray-700").concat(disabled ? " bg-gray-100 dark:bg-gray-800 opacity-60" : ""), children: [jsxRuntime.jsxs("div", { className: "relative ml-2", ref: dropdownRef, children: [jsxRuntime.jsxs("button", { type: "button",
|
|
357
369
|
///bg-gray-100
|
|
358
|
-
className: "flex items-center gap-1 px-4 h-10 rounded-xl dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none transition-colors", onClick: function () { return setIsDropdownOpen(function (v) { return !v; }); }, disabled: disabled, tabIndex: 0, "aria-label":
|
|
370
|
+
className: "flex items-center gap-1 px-4 h-10 rounded-xl dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none transition-colors", onClick: function () { return setIsDropdownOpen(function (v) { return !v; }); }, disabled: disabled, tabIndex: 0, "aria-label": t.selectCountryAriaLabel, children: [jsxRuntime.jsx("span", { className: "text-lg", children: selectedCountry.flag }), jsxRuntime.jsx("span", { className: "text-xs text-gray-700 dark:text-gray-200", children: selectedCountry.code }), jsxRuntime.jsxs("svg", { className: "w-4 h-4 text-gray-400 dark:text-gray-300 ml-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": t.expandListAriaLabel, children: [jsxRuntime.jsx("title", { children: t.expandListAriaLabel }), jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })] })] }), isDropdownOpen && (jsxRuntime.jsxs("div", { className: "absolute z-30 mt-2 w-60 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg", children: [jsxRuntime.jsx("div", { className: "p-2", children: jsxRuntime.jsx("input", { type: "text", className: "w-full px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-gray-100 rounded-lg focus:outline-none focus:border-blue-500 dark:focus:border-blue-400", placeholder: t.searchPlaceholder, onChange: function (e) {
|
|
359
371
|
var searchTerm = e.target.value.toLowerCase();
|
|
360
372
|
var filtered = uniqueCountries.filter(function (country) {
|
|
361
373
|
return country.name.toLowerCase().includes(searchTerm) ||
|
|
@@ -364,7 +376,7 @@ var Phone = function (_a) {
|
|
|
364
376
|
setFilteredCountries(filtered);
|
|
365
377
|
} }) }), jsxRuntime.jsx("div", { className: "max-h-60 overflow-y-auto", children: filteredCountries.length > 0 ? (filteredCountries.map(function (country) { return (jsxRuntime.jsxs("button", { type: "button", className: "flex items-center w-full px-4 py-2.5 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 ".concat(country.code === selectedCountry.code
|
|
366
378
|
? "bg-blue-50 dark:bg-blue-900"
|
|
367
|
-
: ""), onClick: function () { return handleCountrySelect(country); }, children: [jsxRuntime.jsx("span", { className: "mr-3 text-lg", children: country.flag }), jsxRuntime.jsx("span", { className: "flex-1 text-left dark:text-gray-100", children: country.name }), jsxRuntime.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: country.code })] }, country.code)); })) : (jsxRuntime.jsx("div", { className: "px-4 py-2 text-sm text-gray-500 dark:text-gray-400", children:
|
|
379
|
+
: ""), onClick: function () { return handleCountrySelect(country); }, children: [jsxRuntime.jsx("span", { className: "mr-3 text-lg", children: country.flag }), jsxRuntime.jsx("span", { className: "flex-1 text-left dark:text-gray-100", children: country.name }), jsxRuntime.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: country.code })] }, country.code)); })) : (jsxRuntime.jsx("div", { className: "px-4 py-2 text-sm text-gray-500 dark:text-gray-400", children: t.noCountriesFound })) })] }))] }), jsxRuntime.jsx(react.Input, { type: "tel", className: "flex-1 border-none bg-transparent text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 h-10 px-2", placeholder: t.placeholder, value: inputValue, onChange: handleInputChange, onBlur: onBlur, disabled: disabled, name: name, autoComplete: "tel", id: "phone-input-".concat(name) })] }), error && errorText && (jsxRuntime.jsx("span", { className: "text-xs text-pink-600 dark:text-pink-400 mt-1", children: errorText }))] }));
|
|
368
380
|
};
|
|
369
381
|
|
|
370
382
|
var themeColors = {
|
package/dist/index.esm.js
CHANGED
|
@@ -292,13 +292,25 @@ var countries = [
|
|
|
292
292
|
{ code: "+971", name: "UAE", flag: "🇦🇪" },
|
|
293
293
|
];
|
|
294
294
|
var uniqueCountries = Array.from(new Map(countries.map(function (item) { return [item.code + item.name, item]; })).values());
|
|
295
|
+
var defaultTranslations = {
|
|
296
|
+
label: "Teléfono",
|
|
297
|
+
placeholder: "Número de teléfono",
|
|
298
|
+
searchPlaceholder: "Buscar país...",
|
|
299
|
+
selectCountryAriaLabel: "Seleccionar país",
|
|
300
|
+
expandListAriaLabel: "Desplegar lista de países",
|
|
301
|
+
noCountriesFound: "No se encontraron países",
|
|
302
|
+
};
|
|
295
303
|
var Phone = function (_a) {
|
|
296
|
-
var
|
|
304
|
+
var label = _a.label, _b = _a.required, required = _b === void 0 ? false : _b, _c = _a.error, error = _c === void 0 ? false : _c, _d = _a.errorText, errorText = _d === void 0 ? "" : _d, _e = _a.value, value = _e === void 0 ? "" : _e, onChange = _a.onChange, onBlur = _a.onBlur, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.name, name = _g === void 0 ? "phone" : _g, _h = _a.translations, translations = _h === void 0 ? {} : _h;
|
|
297
305
|
var _j = useState(false), isDropdownOpen = _j[0], setIsDropdownOpen = _j[1];
|
|
298
306
|
var _k = useState(uniqueCountries[0]), selectedCountry = _k[0], setSelectedCountry = _k[1];
|
|
299
307
|
var _l = useState(""), inputValue = _l[0], setInputValue = _l[1];
|
|
300
308
|
var dropdownRef = useRef(null);
|
|
301
309
|
var _m = useState(uniqueCountries), filteredCountries = _m[0], setFilteredCountries = _m[1];
|
|
310
|
+
// Combinar traducciones por defecto con las proporcionadas
|
|
311
|
+
var t = __assign(__assign({}, defaultTranslations), translations);
|
|
312
|
+
// Usar la etiqueta de las traducciones si no se proporciona label explícitamente
|
|
313
|
+
var finalLabel = label || t.label;
|
|
302
314
|
// Sincroniza valor externo
|
|
303
315
|
useEffect(function () {
|
|
304
316
|
if (value) {
|
|
@@ -349,11 +361,11 @@ var Phone = function (_a) {
|
|
|
349
361
|
onChange(selectedCountry.code + val);
|
|
350
362
|
}
|
|
351
363
|
};
|
|
352
|
-
return (jsxs("div", { className: "flex flex-col gap-1 w-full relative", children: [
|
|
364
|
+
return (jsxs("div", { className: "flex flex-col gap-1 w-full relative", children: [finalLabel && (jsxs("label", { htmlFor: "phone-input-".concat(name), className: "text-sm font-medium text-gray-700 dark:text-gray-200 mb-1", children: [finalLabel, " ", required && jsx("span", { className: "text-pink-600", children: "*" })] })), jsxs("div", { className: "flex items-center w-full min-h-[56px] bg-white dark:bg-gray-900 transition-colors shadow-sm border border-[#E4E4E7] dark:border-gray-700 rounded-2xl focus-within:border-blue-500 dark:focus-within:border-blue-400 ".concat(error
|
|
353
365
|
? "border-pink-500 dark:border-pink-600"
|
|
354
366
|
: "border-[#E4E4E7] dark:border-gray-700").concat(disabled ? " bg-gray-100 dark:bg-gray-800 opacity-60" : ""), children: [jsxs("div", { className: "relative ml-2", ref: dropdownRef, children: [jsxs("button", { type: "button",
|
|
355
367
|
///bg-gray-100
|
|
356
|
-
className: "flex items-center gap-1 px-4 h-10 rounded-xl dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none transition-colors", onClick: function () { return setIsDropdownOpen(function (v) { return !v; }); }, disabled: disabled, tabIndex: 0, "aria-label":
|
|
368
|
+
className: "flex items-center gap-1 px-4 h-10 rounded-xl dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none transition-colors", onClick: function () { return setIsDropdownOpen(function (v) { return !v; }); }, disabled: disabled, tabIndex: 0, "aria-label": t.selectCountryAriaLabel, children: [jsx("span", { className: "text-lg", children: selectedCountry.flag }), jsx("span", { className: "text-xs text-gray-700 dark:text-gray-200", children: selectedCountry.code }), jsxs("svg", { className: "w-4 h-4 text-gray-400 dark:text-gray-300 ml-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": t.expandListAriaLabel, children: [jsx("title", { children: t.expandListAriaLabel }), jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })] })] }), isDropdownOpen && (jsxs("div", { className: "absolute z-30 mt-2 w-60 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg", children: [jsx("div", { className: "p-2", children: jsx("input", { type: "text", className: "w-full px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-gray-100 rounded-lg focus:outline-none focus:border-blue-500 dark:focus:border-blue-400", placeholder: t.searchPlaceholder, onChange: function (e) {
|
|
357
369
|
var searchTerm = e.target.value.toLowerCase();
|
|
358
370
|
var filtered = uniqueCountries.filter(function (country) {
|
|
359
371
|
return country.name.toLowerCase().includes(searchTerm) ||
|
|
@@ -362,7 +374,7 @@ var Phone = function (_a) {
|
|
|
362
374
|
setFilteredCountries(filtered);
|
|
363
375
|
} }) }), jsx("div", { className: "max-h-60 overflow-y-auto", children: filteredCountries.length > 0 ? (filteredCountries.map(function (country) { return (jsxs("button", { type: "button", className: "flex items-center w-full px-4 py-2.5 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 ".concat(country.code === selectedCountry.code
|
|
364
376
|
? "bg-blue-50 dark:bg-blue-900"
|
|
365
|
-
: ""), onClick: function () { return handleCountrySelect(country); }, children: [jsx("span", { className: "mr-3 text-lg", children: country.flag }), jsx("span", { className: "flex-1 text-left dark:text-gray-100", children: country.name }), jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: country.code })] }, country.code)); })) : (jsx("div", { className: "px-4 py-2 text-sm text-gray-500 dark:text-gray-400", children:
|
|
377
|
+
: ""), onClick: function () { return handleCountrySelect(country); }, children: [jsx("span", { className: "mr-3 text-lg", children: country.flag }), jsx("span", { className: "flex-1 text-left dark:text-gray-100", children: country.name }), jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: country.code })] }, country.code)); })) : (jsx("div", { className: "px-4 py-2 text-sm text-gray-500 dark:text-gray-400", children: t.noCountriesFound })) })] }))] }), jsx(Input, { type: "tel", className: "flex-1 border-none bg-transparent text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 h-10 px-2", placeholder: t.placeholder, value: inputValue, onChange: handleInputChange, onBlur: onBlur, disabled: disabled, name: name, autoComplete: "tel", id: "phone-input-".concat(name) })] }), error && errorText && (jsx("span", { className: "text-xs text-pink-600 dark:text-pink-400 mt-1", children: errorText }))] }));
|
|
366
378
|
};
|
|
367
379
|
|
|
368
380
|
var themeColors = {
|
|
@@ -1,4 +1,12 @@
|
|
|
1
1
|
import type React from "react";
|
|
2
|
+
export interface PhoneTranslations {
|
|
3
|
+
label?: string;
|
|
4
|
+
placeholder?: string;
|
|
5
|
+
searchPlaceholder?: string;
|
|
6
|
+
selectCountryAriaLabel?: string;
|
|
7
|
+
expandListAriaLabel?: string;
|
|
8
|
+
noCountriesFound?: string;
|
|
9
|
+
}
|
|
2
10
|
export interface PhoneInputProps {
|
|
3
11
|
label?: string;
|
|
4
12
|
required?: boolean;
|
|
@@ -6,8 +14,10 @@ export interface PhoneInputProps {
|
|
|
6
14
|
errorText?: string;
|
|
7
15
|
value?: string;
|
|
8
16
|
onChange?: (value: string) => void;
|
|
17
|
+
onBlur?: () => void;
|
|
9
18
|
disabled?: boolean;
|
|
10
19
|
name?: string;
|
|
20
|
+
translations?: PhoneTranslations;
|
|
11
21
|
}
|
|
12
22
|
export declare const Phone: React.FC<PhoneInputProps>;
|
|
13
23
|
export default Phone;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Phone.d.ts","sourceRoot":"","sources":["../../../../src/components/phone/Phone.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Phone.d.ts","sourceRoot":"","sources":["../../../../src/components/phone/Phone.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiD/B,MAAM,WAAW,iBAAiB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B;AAWD,MAAM,WAAW,eAAe;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,iBAAiB,CAAC;CACjC;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwM3C,CAAC;AAEF,eAAe,KAAK,CAAC"}
|