@beweco/aurora-ui 0.1.5 → 0.1.6

package/dist/index.cjs.js

@@ -4,6 +4,7 @@ var react = require('@heroui/react');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var react$1 = require('@iconify/react');
+var reactDom = require('react-dom');
 var useTheme = require('@heroui/use-theme');
 
 /******************************************************************************
@@ -465,42 +466,50 @@ var defaultTranslations$2 = {
     expandListAriaLabel: "Desplegar lista de países",
     noCountriesFound: "No se encontraron países",
 };
+
 var Phone = function (_a) {
-    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;
-    var _j = React.useState(false), isDropdownOpen = _j[0], setIsDropdownOpen = _j[1];
-    var _k = React.useState(uniqueCountries[0]), selectedCountry = _k[0], setSelectedCountry = _k[1];
-    var _l = React.useState(""), inputValue = _l[0], setInputValue = _l[1];
+    var id = _a.id, 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, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.name, name = _f === void 0 ? "phone" : _f, _g = _a.translations, translations = _g === void 0 ? {} : _g;
+    var _h = React.useState(false), isDropdownOpen = _h[0], setIsDropdownOpen = _h[1];
+    var _j = React.useState(uniqueCountries[0]), selectedCountry = _j[0], setSelectedCountry = _j[1];
+    var _k = React.useState(""), inputValue = _k[0], setInputValue = _k[1];
     var dropdownRef = React.useRef(null);
+    var portalDropdownRef = React.useRef(null);
+    var _l = React.useState({}), dropdownPosition = _l[0], setDropdownPosition = _l[1];
     var _m = React.useState(uniqueCountries), filteredCountries = _m[0], setFilteredCountries = _m[1];
-    // Combinar traducciones por defecto con las proporcionadas
     var t = __assign(__assign({}, defaultTranslations$2), translations);
-    // Usar la etiqueta de las traducciones si no se proporciona label explícitamente
     var finalLabel = label || t.label;
-    // Sincroniza valor externo
     React.useEffect(function () {
         if (value) {
-            // Si value incluye el código, lo separamos
-            var found = uniqueCountries.find(function (c) { return value.startsWith(c.code); });
+            var found = uniqueCountries.find(function (c) { return c.code === value.countryCode; });
             if (found) {
                 setSelectedCountry(found);
-                setInputValue(value.replace(found.code, "").trim());
-            }
-            else {
-                setInputValue(value);
             }
+            setInputValue(value.phoneNumber);
         }
     }, [value]);
-    // Open dropdown: reset filteredCountries
     React.useEffect(function () {
         if (isDropdownOpen) {
             setFilteredCountries(uniqueCountries);
         }
     }, [isDropdownOpen]);
-    // Cierra dropdown al hacer click fuera
+    React.useLayoutEffect(function () {
+        if (isDropdownOpen && dropdownRef.current) {
+            var rect = dropdownRef.current.getBoundingClientRect();
+            setDropdownPosition({
+                position: "absolute",
+                top: "".concat(rect.bottom + window.scrollY + 4, "px"),
+                left: "".concat(rect.left + window.scrollX, "px"),
+                width: "15rem",
+                zIndex: 50,
+            });
+        }
+    }, [isDropdownOpen]);
     React.useEffect(function () {
         var handleClickOutside = function (event) {
             if (dropdownRef.current &&
-                !dropdownRef.current.contains(event.target)) {
+                !dropdownRef.current.contains(event.target) &&
+                portalDropdownRef.current &&
+                !portalDropdownRef.current.contains(event.target)) {
                 setIsDropdownOpen(false);
             }
         };
@@ -515,31 +524,27 @@ var Phone = function (_a) {
         setSelectedCountry(country);
         setIsDropdownOpen(false);
         if (onChange) {
-            onChange(country.code + inputValue);
+            onChange({ countryCode: country.code, phoneNumber: inputValue });
         }
     };
     var handleInputChange = function (e) {
-        // Solo números
         var val = e.target.value.replace(/\D/g, "");
         setInputValue(val);
         if (onChange) {
-            onChange(selectedCountry.code + val);
+            onChange({ countryCode: selectedCountry.code, phoneNumber: val });
         }
     };
-    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-tiny text-default-600 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
-                    ? "border-pink-500 dark:border-pink-600"
-                    : "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", 
-                                ///bg-gray-100
-                                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) {
-                                                var searchTerm = e.target.value.toLowerCase();
-                                                var filtered = uniqueCountries.filter(function (country) {
-                                                    return country.name.toLowerCase().includes(searchTerm) ||
-                                                        country.code.toLowerCase().includes(searchTerm);
-                                                });
-                                                setFilteredCountries(filtered);
-                                            } }) }), 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
-                                                ? "bg-blue-50 dark:bg-blue-900"
-                                                : ""), 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 }))] }));
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 w-full relative", id: id, children: [finalLabel && (jsxRuntime.jsxs("label", { htmlFor: "phone-input-".concat(name), className: "text-tiny text-default-500 mb-1", children: [finalLabel, " ", required && jsxRuntime.jsx("span", { className: "text-danger-500", children: "*" })] })), jsxRuntime.jsxs("div", { className: "flex items-center w-full min-h-[56px]  transition-colors shadow-sm border-medium border-default-200 rounded-xl focus-within:border-primary-500 dark:focus-within:border-primary-500 ".concat(error ? "border-danger-500 " : "border-default-200").concat(disabled ? "opacity-60" : ""), children: [jsxRuntime.jsx("div", { className: "relative ml-2", ref: dropdownRef, children: jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-1 px-4 h-10 rounded-xl  bg-default-100  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-default-500", children: selectedCountry.code }), jsxRuntime.jsxs("svg", { className: "w-4 h-4 text-default-500 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" })] })] }) }), jsxRuntime.jsx(react.Input, { type: "tel", className: "flex-1 border-none bg-transparent text-default-500  placeholder-default-500 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-danger-500 mt-1", children: errorText })), isDropdownOpen &&
+                reactDom.createPortal(jsxRuntime.jsxs("div", { ref: portalDropdownRef, style: dropdownPosition, className: "bg-content1 border border-default-200 rounded-lg shadow-lg z-50", children: [jsxRuntime.jsx("div", { className: "p-2", children: jsxRuntime.jsx("input", { type: "text", className: "w-full px-3 py-2 text-sm bg-default-100 border-medium border-default-200 text-default-500 rounded-lg focus:outline-none focus:border-primary-500", placeholder: t.searchPlaceholder, onChange: function (e) {
+                                    var searchTerm = e.target.value.toLowerCase();
+                                    var filtered = uniqueCountries.filter(function (country) {
+                                        return country.name.toLowerCase().includes(searchTerm) ||
+                                            country.code.toLowerCase().includes(searchTerm);
+                                    });
+                                    setFilteredCountries(filtered);
+                                } }) }), 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-default-200 ".concat(country.code === selectedCountry.code
+                                    ? "bg-primary-50"
+                                    : ""), 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 text-default-500", children: country.name }), jsxRuntime.jsx("span", { className: "text-xs text-default-500", children: country.code })] }, country.code)); })) : (jsxRuntime.jsx("div", { className: "px-4 py-2 text-sm text-default-500", children: t.noCountriesFound })) })] }), document.body)] }));
 };
 
 /**
@@ -895,7 +900,9 @@ var ThemePicker = function (_a) {
             previewContent: (jsxRuntime.jsxs("div", { className: "rounded-lg border border-[#3F3F46] p-3 mt-4 flex flex-col gap-2", children: [jsxRuntime.jsx("div", { className: "h-3 w-1/2 bg-[#3F3F46] rounded mb-2" }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "h-3 w-3 rounded-full bg-[#3F3F46]" }), jsxRuntime.jsx("div", { className: "h-3 w-1/3 rounded bg-[#3F3F46]" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "h-3 w-3 rounded-full bg-[#3F3F46]" }), jsxRuntime.jsx("div", { className: "h-3 w-1/4 rounded bg-[#3F3F46]" })] })] }), jsxRuntime.jsx("div", { className: "h-8 w-2/3 bg-[#27272A] rounded-lg mt-2" })] })),
         },
     ];
-    return (jsxRuntime.jsx(react.RadioGroup, { value: value, onChange: function (e) { return onChange(e.target.value); }, className: "flex gap-6 w-full ".concat(className || ""), style: { gap: 16 }, children: themes.map(function (theme) { return (jsxRuntime.jsxs("div", { className: "relative rounded-[14px] ".concat(theme.cardClass, " p-6 w-1/2 min-h-[180px] transition-all duration-200 flex flex-col justify-start"), children: [jsxRuntime.jsx("div", { className: "absolute top-6 right-6", children: jsxRuntime.jsx(react.Radio, { "aria-label": theme.label, color: theme.radioColor, size: "sm", value: theme.key }) }), jsxRuntime.jsx("span", { className: theme.labelClass, children: theme.label }), theme.previewContent] }, theme.key)); }) }));
+    return (jsxRuntime.jsx(react.RadioGroup, { value: value, onChange: function (e) { return onChange(e.target.value); }, className: "flex justify-center ".concat(className || ""), orientation: "horizontal", classNames: {
+            wrapper: "gap-3",
+        }, children: themes.map(function (theme) { return (jsxRuntime.jsxs("div", { className: "relative rounded-2xl ".concat(theme.cardClass, " p-4 flex-1 transition-all duration-200 flex flex-col justify-start"), children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsxRuntime.jsx("span", { className: theme.labelClass, children: theme.label }), jsxRuntime.jsx(react.Radio, { "aria-label": theme.label, color: theme.radioColor, size: "sm", value: theme.key })] }), theme.previewContent] }, theme.key)); }) }));
 };
 
 var ConfigMenu = function (_a) {

package/dist/index.esm.js

@@ -1,8 +1,9 @@
 import { Autocomplete, Button as Button$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, Input as Input$1, RadioGroup, Radio, cn, ListboxItem, Popover, PopoverTrigger, Tooltip, PopoverContent, Listbox, Accordion, AccordionItem, ListboxSection, Spacer, Avatar, Card as Card$1, CardBody, CardFooter, Select as Select$1, Switch as Switch$1, TimeInput as TimeInput$1, Chip, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Textarea as Textarea$1, Dropdown, DropdownTrigger, DropdownMenu, DropdownSection, DropdownItem, Alert, Modal as Modal$1, ModalContent as ModalContent$1, ModalHeader as ModalHeader$1, ModalBody as ModalBody$1, Slider, ModalFooter as ModalFooter$1, Pagination as Pagination$1 } from '@heroui/react';
 export * from '@heroui/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useId, useState, useCallback, createElement, useRef, useEffect, createContext, useContext, useMemo } from 'react';
+import React, { useId, useState, useCallback, createElement, useRef, useEffect, useLayoutEffect, createContext, useContext, useMemo } from 'react';
 import { Icon } from '@iconify/react';
+import { createPortal } from 'react-dom';
 import { useTheme } from '@heroui/use-theme';
 
 /******************************************************************************
@@ -464,42 +465,50 @@ var defaultTranslations$2 = {
     expandListAriaLabel: "Desplegar lista de países",
     noCountriesFound: "No se encontraron países",
 };
+
 var Phone = function (_a) {
-    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;
-    var _j = useState(false), isDropdownOpen = _j[0], setIsDropdownOpen = _j[1];
-    var _k = useState(uniqueCountries[0]), selectedCountry = _k[0], setSelectedCountry = _k[1];
-    var _l = useState(""), inputValue = _l[0], setInputValue = _l[1];
+    var id = _a.id, 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, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.name, name = _f === void 0 ? "phone" : _f, _g = _a.translations, translations = _g === void 0 ? {} : _g;
+    var _h = useState(false), isDropdownOpen = _h[0], setIsDropdownOpen = _h[1];
+    var _j = useState(uniqueCountries[0]), selectedCountry = _j[0], setSelectedCountry = _j[1];
+    var _k = useState(""), inputValue = _k[0], setInputValue = _k[1];
     var dropdownRef = useRef(null);
+    var portalDropdownRef = useRef(null);
+    var _l = useState({}), dropdownPosition = _l[0], setDropdownPosition = _l[1];
     var _m = useState(uniqueCountries), filteredCountries = _m[0], setFilteredCountries = _m[1];
-    // Combinar traducciones por defecto con las proporcionadas
     var t = __assign(__assign({}, defaultTranslations$2), translations);
-    // Usar la etiqueta de las traducciones si no se proporciona label explícitamente
     var finalLabel = label || t.label;
-    // Sincroniza valor externo
     useEffect(function () {
         if (value) {
-            // Si value incluye el código, lo separamos
-            var found = uniqueCountries.find(function (c) { return value.startsWith(c.code); });
+            var found = uniqueCountries.find(function (c) { return c.code === value.countryCode; });
             if (found) {
                 setSelectedCountry(found);
-                setInputValue(value.replace(found.code, "").trim());
-            }
-            else {
-                setInputValue(value);
             }
+            setInputValue(value.phoneNumber);
         }
     }, [value]);
-    // Open dropdown: reset filteredCountries
     useEffect(function () {
         if (isDropdownOpen) {
             setFilteredCountries(uniqueCountries);
         }
     }, [isDropdownOpen]);
-    // Cierra dropdown al hacer click fuera
+    useLayoutEffect(function () {
+        if (isDropdownOpen && dropdownRef.current) {
+            var rect = dropdownRef.current.getBoundingClientRect();
+            setDropdownPosition({
+                position: "absolute",
+                top: "".concat(rect.bottom + window.scrollY + 4, "px"),
+                left: "".concat(rect.left + window.scrollX, "px"),
+                width: "15rem",
+                zIndex: 50,
+            });
+        }
+    }, [isDropdownOpen]);
     useEffect(function () {
         var handleClickOutside = function (event) {
             if (dropdownRef.current &&
-                !dropdownRef.current.contains(event.target)) {
+                !dropdownRef.current.contains(event.target) &&
+                portalDropdownRef.current &&
+                !portalDropdownRef.current.contains(event.target)) {
                 setIsDropdownOpen(false);
             }
         };
@@ -514,31 +523,27 @@ var Phone = function (_a) {
         setSelectedCountry(country);
         setIsDropdownOpen(false);
         if (onChange) {
-            onChange(country.code + inputValue);
+            onChange({ countryCode: country.code, phoneNumber: inputValue });
         }
     };
     var handleInputChange = function (e) {
-        // Solo números
         var val = e.target.value.replace(/\D/g, "");
         setInputValue(val);
         if (onChange) {
-            onChange(selectedCountry.code + val);
+            onChange({ countryCode: selectedCountry.code, phoneNumber: val });
         }
     };
-    return (jsxs("div", { className: "flex flex-col gap-1 w-full relative", children: [finalLabel && (jsxs("label", { htmlFor: "phone-input-".concat(name), className: "text-tiny text-default-600 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
-                    ? "border-pink-500 dark:border-pink-600"
-                    : "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", 
-                                ///bg-gray-100
-                                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) {
-                                                var searchTerm = e.target.value.toLowerCase();
-                                                var filtered = uniqueCountries.filter(function (country) {
-                                                    return country.name.toLowerCase().includes(searchTerm) ||
-                                                        country.code.toLowerCase().includes(searchTerm);
-                                                });
-                                                setFilteredCountries(filtered);
-                                            } }) }), 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
-                                                ? "bg-blue-50 dark:bg-blue-900"
-                                                : ""), 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$1, { 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 }))] }));
+    return (jsxs("div", { className: "flex flex-col gap-1 w-full relative", id: id, children: [finalLabel && (jsxs("label", { htmlFor: "phone-input-".concat(name), className: "text-tiny text-default-500 mb-1", children: [finalLabel, " ", required && jsx("span", { className: "text-danger-500", children: "*" })] })), jsxs("div", { className: "flex items-center w-full min-h-[56px]  transition-colors shadow-sm border-medium border-default-200 rounded-xl focus-within:border-primary-500 dark:focus-within:border-primary-500 ".concat(error ? "border-danger-500 " : "border-default-200").concat(disabled ? "opacity-60" : ""), children: [jsx("div", { className: "relative ml-2", ref: dropdownRef, children: jsxs("button", { type: "button", className: "flex items-center gap-1 px-4 h-10 rounded-xl  bg-default-100  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-default-500", children: selectedCountry.code }), jsxs("svg", { className: "w-4 h-4 text-default-500 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" })] })] }) }), jsx(Input$1, { type: "tel", className: "flex-1 border-none bg-transparent text-default-500  placeholder-default-500 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-danger-500 mt-1", children: errorText })), isDropdownOpen &&
+                createPortal(jsxs("div", { ref: portalDropdownRef, style: dropdownPosition, className: "bg-content1 border border-default-200 rounded-lg shadow-lg z-50", children: [jsx("div", { className: "p-2", children: jsx("input", { type: "text", className: "w-full px-3 py-2 text-sm bg-default-100 border-medium border-default-200 text-default-500 rounded-lg focus:outline-none focus:border-primary-500", placeholder: t.searchPlaceholder, onChange: function (e) {
+                                    var searchTerm = e.target.value.toLowerCase();
+                                    var filtered = uniqueCountries.filter(function (country) {
+                                        return country.name.toLowerCase().includes(searchTerm) ||
+                                            country.code.toLowerCase().includes(searchTerm);
+                                    });
+                                    setFilteredCountries(filtered);
+                                } }) }), 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-default-200 ".concat(country.code === selectedCountry.code
+                                    ? "bg-primary-50"
+                                    : ""), onClick: function () { return handleCountrySelect(country); }, children: [jsx("span", { className: "mr-3 text-lg", children: country.flag }), jsx("span", { className: "flex-1 text-left text-default-500", children: country.name }), jsx("span", { className: "text-xs text-default-500", children: country.code })] }, country.code)); })) : (jsx("div", { className: "px-4 py-2 text-sm text-default-500", children: t.noCountriesFound })) })] }), document.body)] }));
 };
 
 /**
@@ -894,7 +899,9 @@ var ThemePicker = function (_a) {
             previewContent: (jsxs("div", { className: "rounded-lg border border-[#3F3F46] p-3 mt-4 flex flex-col gap-2", children: [jsx("div", { className: "h-3 w-1/2 bg-[#3F3F46] rounded mb-2" }), jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "h-3 w-3 rounded-full bg-[#3F3F46]" }), jsx("div", { className: "h-3 w-1/3 rounded bg-[#3F3F46]" })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "h-3 w-3 rounded-full bg-[#3F3F46]" }), jsx("div", { className: "h-3 w-1/4 rounded bg-[#3F3F46]" })] })] }), jsx("div", { className: "h-8 w-2/3 bg-[#27272A] rounded-lg mt-2" })] })),
         },
     ];
-    return (jsx(RadioGroup, { value: value, onChange: function (e) { return onChange(e.target.value); }, className: "flex gap-6 w-full ".concat(className || ""), style: { gap: 16 }, children: themes.map(function (theme) { return (jsxs("div", { className: "relative rounded-[14px] ".concat(theme.cardClass, " p-6 w-1/2 min-h-[180px] transition-all duration-200 flex flex-col justify-start"), children: [jsx("div", { className: "absolute top-6 right-6", children: jsx(Radio, { "aria-label": theme.label, color: theme.radioColor, size: "sm", value: theme.key }) }), jsx("span", { className: theme.labelClass, children: theme.label }), theme.previewContent] }, theme.key)); }) }));
+    return (jsx(RadioGroup, { value: value, onChange: function (e) { return onChange(e.target.value); }, className: "flex justify-center ".concat(className || ""), orientation: "horizontal", classNames: {
+            wrapper: "gap-3",
+        }, children: themes.map(function (theme) { return (jsxs("div", { className: "relative rounded-2xl ".concat(theme.cardClass, " p-4 flex-1 transition-all duration-200 flex flex-col justify-start"), children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: theme.labelClass, children: theme.label }), jsx(Radio, { "aria-label": theme.label, color: theme.radioColor, size: "sm", value: theme.key })] }), theme.previewContent] }, theme.key)); }) }));
 };
 
 var ConfigMenu = function (_a) {

package/dist/types/components/daterangepicker/DateRangePicker.d.ts

@@ -1,5 +1,4 @@
 import type React from "react";
 import type { DateRangePickerProps } from "./DateRangePicker.types";
-import "./DateRangePicker.scss";
 export declare const DateRangePicker: React.FC<DateRangePickerProps>;
 //# sourceMappingURL=DateRangePicker.d.ts.map

package/dist/types/components/daterangepicker/DateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/daterangepicker/DateRangePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,wBAAwB,CAAC;AAEhC,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsB1D,CAAC"}
+{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/daterangepicker/DateRangePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpE,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsB1D,CAAC"}

package/dist/types/components/phone/Phone.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Phone.d.ts","sourceRoot":"","sources":["../../../../src/components/phone/Phone.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,eAAe,CAAC;AAyDxE,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwM3C,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Phone.d.ts","sourceRoot":"","sources":["../../../../src/components/phone/Phone.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkN3C,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/types/components/phone/Phone.types.d.ts

@@ -6,13 +6,24 @@ export interface PhoneTranslations {
     expandListAriaLabel?: string;
     noCountriesFound?: string;
 }
+export interface Country {
+    code: string;
+    name: string;
+    flag: string;
+}
+export interface PhoneValue {
+    countryCode?: string;
+    phoneNumber: string;
+    country?: string;
+}
 export interface PhoneInputProps {
+    id?: string;
     label?: string;
     required?: boolean;
     error?: boolean;
     errorText?: string;
-    value?: string;
-    onChange?: (value: string) => void;
+    value?: PhoneValue;
+    onChange?: (value: PhoneValue) => void;
     onBlur?: () => void;
     disabled?: boolean;
     name?: string;

package/dist/types/components/phone/Phone.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Phone.types.d.ts","sourceRoot":"","sources":["../../../../src/components/phone/Phone.types.ts"],"names":[],"mappings":"AAAA,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;AAED,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"}
+{"version":3,"file":"Phone.types.d.ts","sourceRoot":"","sources":["../../../../src/components/phone/Phone.types.ts"],"names":[],"mappings":"AAAA,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;AAED,MAAM,WAAW,OAAO;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,UAAU;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,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,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,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"}

package/dist/types/components/phone/phone.constants.d.ts

@@ -0,0 +1,13 @@
+import type { PhoneTranslations } from "./Phone.types";
+export declare const countries: {
+    code: string;
+    name: string;
+    flag: string;
+}[];
+export declare const uniqueCountries: {
+    code: string;
+    name: string;
+    flag: string;
+}[];
+export declare const defaultTranslations: Required<PhoneTranslations>;
+//# sourceMappingURL=phone.constants.d.ts.map

package/dist/types/components/phone/phone.constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone.constants.d.ts","sourceRoot":"","sources":["../../../../src/components/phone/phone.constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvD,eAAO,MAAM,SAAS;;;;GAsCrB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;GAE3B,CAAC;AAGF,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,iBAAiB,CAO3D,CAAC"}

package/dist/types/components/theme-picker/ThemePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/theme-picker/ThemePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAEX,gBAAgB,EAEhB,MAAM,qBAAqB,CAAC;AAQ7B;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwFlD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ThemePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/theme-picker/ThemePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAEX,gBAAgB,EAEhB,MAAM,qBAAqB,CAAC;AAQ7B;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2FlD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@beweco/aurora-ui",
-	"version": "0.1.5",
+	"version": "0.1.6",
 	"description": "Bewe Aurora UI Component Library",
 	"main": "./dist/index.cjs.js",
 	"module": "./dist/index.esm.js",