@matbea-ui/matbea-ui 0.2.0-dev.303804 → 0.2.0-dev.347138

package/dist/matbea-ui.es.js

@@ -1209,15 +1209,13 @@ const RadioButton = ({ checked, defaultChecked = false, disabled = false, name,
 
 const Wrapper = styled$1.div `
   position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
   width: 100%;
 `;
 const Label$1 = styled$1(Typography).attrs({
     variant: "form-input",
     forwardedAs: "label",
 }) `
+  margin-bottom: 8px;
   color: ${({ theme }) => theme.colors.primary.darkBlue};
 `;
 const FieldContainer = styled$1.div `
@@ -1281,9 +1279,8 @@ const ErrorText = styled$1.span `
   color: ${({ theme }) => theme.colors.accent.red};
 `;
 const List = styled$1.div `
+  margin-top: 12px;
   position: fixed;
-  top: ${({ $top }) => `${$top}px`};
-  left: ${({ $left }) => `${$left}px`};
   width: ${({ $width }) => `${$width}px`};
   z-index: 999;
   border-radius: 5px;
@@ -1299,7 +1296,7 @@ const Option = styled$1.button `
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 0 13px;
+  padding: 11px 13px;
   height: 40px;
   border: none;
   background: transparent;
@@ -1308,7 +1305,6 @@ const Option = styled$1.button `
   color: ${({ theme }) => theme.colors.primary.darkBlue};
   cursor: pointer;
   transition: background 140ms ease;
-
   &[data-hovered="true"],
   &:hover {
     background: ${({ theme }) => theme.colors.gray.lightBlueGray};
@@ -1318,14 +1314,23 @@ const Option = styled$1.button `
     background: ${({ theme }) => theme.colors.gray.lightGray};
   }
 `;
+const OptionText = styled$1(Typography).attrs({
+    forwardedAs: "span",
+    variant: "form-input",
+}) `
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
 const OptionIcon = styled$1.span `
   display: inline-flex;
+  align-items: center;
   width: 24px;
   height: 24px;
 `;
 
 const DROPDOWN_OFFSET = 8;
-const SelectField = forwardRef(({ options, value, defaultValue, placeholder = "Text", label, error, disabled = false, icon, name, onChange, onFocus, onBlur, className, }, ref) => {
+const SelectField = forwardRef(({ options = [], value, defaultValue, placeholder = "Text", label, error, disabled = false, icon, name, onChange, onFocus, onBlur, className, }, ref) => {
     const wrapperRef = useRef(null);
     const fieldRef = useRef(null);
     const listRef = useRef(null);
@@ -1449,10 +1454,10 @@ const SelectField = forwardRef(({ options, value, defaultValue, placeholder = "T
         setFocused(false);
         onBlur?.(evt);
     };
-    return (jsxs(Wrapper, { className: className, ref: wrapperRef, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, children: [label && jsx(Label$1, { children: label }), jsxs(FieldContainer, { ref: fieldRef, role: "button", tabIndex: disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-invalid": hasError, "aria-disabled": disabled, "$hasError": hasError, "$disabled": disabled, "data-state": hasError ? "error" : isOpen || focused ? "active" : undefined, onClick: toggleDropdown, children: [icon && jsx(LeadingIcon, { children: icon }), jsx(Value, { "$placeholder": displayPlaceholder, children: displayText }), jsx(HiddenInput$1, { ref: ref, readOnly: true, name: name, value: selectedValue, tabIndex: -1, "aria-hidden": true })] }), error && jsx(ErrorText, { children: error }), isOpen && (jsx(List, { ref: listRef, role: "listbox", "$top": dropdownRect.top, "$left": dropdownRect.left, "$width": dropdownRect.width, children: options.map((option, index) => {
+    return (jsxs(Wrapper, { "data-select-field": "true", className: className, ref: wrapperRef, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: (e) => e.stopPropagation(), children: [label && jsx(Label$1, { children: label }), jsxs(FieldContainer, { ref: fieldRef, role: "button", tabIndex: disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-invalid": hasError, "aria-disabled": disabled, "$hasError": hasError, "$disabled": disabled, "data-state": hasError ? "error" : isOpen || focused ? "active" : undefined, onClick: toggleDropdown, children: [icon && jsx(LeadingIcon, { children: icon }), jsx(Value, { "$placeholder": displayPlaceholder, children: displayText }), jsx(HiddenInput$1, { ref: ref, readOnly: true, name: name, value: selectedValue, tabIndex: -1, "aria-hidden": true })] }), error && jsx(ErrorText, { children: error }), isOpen && (jsx(List, { ref: listRef, role: "listbox", "$width": dropdownRect.width, children: options.map((option, index) => {
                     const isActiveOption = option.value === selectedValue;
                     const isHovered = index === hoveredIndex;
-                    return (jsxs(Option, { role: "option", "aria-selected": isActiveOption, "data-active": isActiveOption || undefined, "data-hovered": isHovered || undefined, onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null), onMouseDown: (evt) => evt.preventDefault(), onClick: () => handleSelect(option), children: [option.icon && jsx(OptionIcon, { children: option.icon }), jsx(Typography, { variant: "form-input", children: option.label })] }, option.value));
+                    return (jsxs(Option, { role: "option", "aria-selected": isActiveOption, "data-active": isActiveOption || undefined, "data-hovered": isHovered || undefined, onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null), onMouseDown: (evt) => evt.preventDefault(), onClick: () => handleSelect(option), children: [option.icon && jsx(OptionIcon, { children: option.icon }), jsx(OptionText, { variant: "form-input", children: option.label })] }, option.value));
                 }) }))] }));
 });
 SelectField.displayName = "SelectField";
@@ -2197,6 +2202,98 @@ const Avatar = (props) => {
     return jsx(AvatarStyled, { "$color": "hoverBlue", "$size": 40, ...props });
 };
 
+const LangCountrySelectStyled = styled$1.div `
+  position: relative;
+  min-width: 200px;
+`;
+const LangCountrySelectContainer = styled$1.div `
+  padding: 12px 14px;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  border-radius: 5px;
+  border: 1px solid ${({ theme }) => theme.colors.gray.lightGray2};
+  min-width: 200px;
+  width: fit-content;
+  cursor: pointer;
+`;
+const LangCountrySelectDropdown = styled$1.div `
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin-top: 16px;
+  position: fixed;
+  opacity: ${({ $open }) => ($open ? 1 : 0)};
+  visibility: ${({ $open }) => ($open ? "visible" : "hidden")};
+  pointer-events: ${({ $open }) => ($open ? "auto" : "none")};
+  scale: ${({ $open }) => ($open ? 1 : 0.8)};
+  transform-origin: top center;
+  z-index: 100;
+  padding: 12px 14px;
+  border-radius: 5px;
+  min-width: 200px;
+  border: 1px solid ${({ theme }) => theme.colors.gray.lightGray2};
+  transition:
+    opacity 150ms ease,
+    scale 150ms ease,
+    visibility 150ms ease;
+`;
+const LangCountrySelectArrow = styled$1(DropdownIcon) `
+  transition: transform 150ms ease;
+  transform: rotate(${({ $open }) => ($open ? "180deg" : "0")});
+`;
+const LangCountrySelectIcon = styled$1.div `
+  width: 24px;
+  height: 24px;
+`;
+const LangCountrySelectLabel = styled$1(Typography).attrs({
+    forwardedAs: "p",
+    variant: "form-input",
+}) `
+  width: 100%;
+  user-select: none;
+  color: ${({ theme }) => theme.colors.primary.darkBlue};
+`;
+const LangCountrySelectButton = styled$1(Button$1) `
+  width: fit-content;
+`;
+
+const LangCountrySelect = ({ currentLang, currentCurrency, currentCountry, countries = [], currencies = [], languages = [], handleSave, labelLang, labelCurrency, labelCountry, saveText, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const ref = useRef(null);
+    const [lang, setLang] = useState(currentLang);
+    const [currency, setCurrency] = useState(currentCurrency);
+    const [country, setCountry] = useState(currentCountry);
+    const includedCurrency = currencies.find((currency) => currency.value === currentCurrency);
+    const includedCountry = countries.find((country) => country.value === currentCountry);
+    const includedLang = languages.find((lang) => lang.value === currentLang);
+    const handleClick = () => {
+        setIsOpen(!isOpen);
+    };
+    const handleClickSave = useCallback(() => {
+        setIsOpen(false);
+        handleSave?.({
+            lang,
+            currency,
+            country,
+        });
+    }, [lang, currency, country, handleSave]);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (isOpen && !ref.current?.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    return (jsxs(LangCountrySelectStyled, { ref: ref, children: [jsxs(LangCountrySelectContainer, { onClick: handleClick, children: [includedCurrency?.icon && (jsx(LangCountrySelectIcon, { children: includedCurrency?.icon })), jsx(LangCountrySelectLabel, { children: [includedCurrency?.value, includedLang?.label]
+                            .join(" / ")
+                            ?.toLocaleUpperCase() }), jsx(LangCountrySelectArrow, { "$open": isOpen, size: 9 })] }), jsxs(LangCountrySelectDropdown, { "$open": isOpen, children: [jsx(SelectField, { placeholder: "", label: labelLang, options: languages, value: lang, onChange: setLang }), jsx(SelectField, { icon: includedCurrency?.icon, placeholder: "", label: labelCurrency, options: currencies, value: currency, onChange: setCurrency }), jsx(SelectField, { icon: includedCountry?.icon, placeholder: "", label: labelCountry, options: countries, value: country, onChange: setCountry }), jsx(LangCountrySelectButton, { size: "medium", onClick: handleClickSave, children: saveText })] })] }));
+};
+
 const ApplicationDataStyled = styled$1.div `
   display: flex;
   column-gap: 10px;
@@ -2240,7 +2337,7 @@ const ApplicationData = ({ label, statusValue, withdraw, info, }) => {
 
 const ApplicationInfoStyled = styled$1.div `
   display: flex;
-  width: fit-content;
+  width: 100%;
   align-items: center;
   gap: 22px;
   ${({ $variant }) => {
@@ -2262,7 +2359,6 @@ const ApplicationInfoStyled = styled$1.div `
 
   border-radius: 6px;
   ${({ theme }) => theme.media.maxWidth.tablet} {
-    width: 100%;
     flex-direction: column;
     gap: 18px;
     padding: 18px 20px;
@@ -2275,10 +2371,9 @@ const ApplicationInfoStyled = styled$1.div `
 `;
 const ApplicationInfoDataContainer = styled$1.div `
   display: flex;
-  gap: 56px;
-  width: fit-content;
+  gap: 64px;
+  width: 100%;
   ${({ theme }) => theme.media.maxWidth.tablet} {
-    width: 100%;
     flex-direction: column;
     gap: 12px;
   }
@@ -24452,8 +24547,8 @@ const theme = {
     colors,
     media: {
         maxWidth: {
-            mobile: "@media (max-width: 375px)",
-            tablet: "@media (max-width: 834px)",
+            mobile: "@media (max-width: 576px)",
+            tablet: "@media (max-width: 1023px)",
         },
     },
 };
@@ -24531,10 +24626,10 @@ const createAdaptiveScalePlugin = (customConfig) => {
             }
             return `calc(var(${config.scaleVariable}, 1) * ${pxValue}px)`;
         });
-        element.value = element.value.replace(/([-0-9.]+)vh/g, (_, value) => {
-            const vhValue = parseFloat(value);
-            return `calc(var(${config.vhVariable}, 1vh) * ${vhValue})`;
-        });
+        // element.value = element.value.replace(/([-0-9.]+)vh/g, (_, value) => {
+        //   const vhValue = parseFloat(value);
+        //   return `calc(var(${config.vhVariable}, 1vh) * ${vhValue})`;
+        // });
     };
 };
 
@@ -24574,14 +24669,14 @@ const GlobalStyles = createGlobalStyle `
   /* Mobile base (iPhone X/11/12/13 mini) */
   @media (min-width: 375px) and (max-width: 389px) {
     :root {
-      --adaptive-scale: 1;
+      --adaptive-scale: 0.6;
     }
   }
 
   /* Large mobile (iPhone 12/13/14/15) */
   @media (min-width: 390px) and (max-width: 429px) {
     :root {
-      --adaptive-scale: 1;
+      --adaptive-scale: 0.75;
     }
   }
 
@@ -24750,5 +24845,5 @@ const GlobalStyles = createGlobalStyle `
   }
 `;
 
-export { AaveIcon, AlgorandIcon, ApplicationData, ApplicationInfo, ApplicationStatus, ArrowIcon, AttachIcon, AvalancheIcon, Avatar, BalanceRow, BatIcon, BitcoinIcon, BnbSmallIcon, BtgIcon, BusdIcon, Button$1 as Button, ButtonSwitcher, CakeIcon, CardanoIcon, ChainlinkIcon, Chat, ChatMessage, CheckIcon$1 as CheckIcon, Checkbox, CircleSendCryptoIcon, ClockIcon, Close2Icon, CloseIcon, Container, CopyIcon, CopyTooltip, CosmosIcon, Counter, CountryBrIcon, CountryCzechIcon, CountryKzIcon, CountryRusIcon, CurrencyName, CurrencyRate, DashSmallIcon, DashboardIcon, DecentralandIcon, DepositIcon, DepositSimpleIcon, DigibyteIcon, DogeSmallIcon, DropdownIcon, DropdownSmallIcon, DropdownUpIcon, EditIcon, ElrondIcon, EmojiIcon, EnjinIcon, EosIcon, ErrorBigIcon, EtcIcon, EthIcon, EurIcon, ExchangeArrowsIcon, ExchangeIcon, ExchangeSimpleIcon, FantomIcon, FilecoinIcon, FtxIcon, GlobalStyles, HamburgerButton, HamburgerIcon, HeadphonesIcon, HederaIcon, HideUiIcon, HistoryIcon, IcomputerIcon, IconNeoIcon, IcxIcon, IlsIcon, InfoIcon, Informer, InputMessage, IotaIcon, KlaytnIcon, LariIcon, LinkIcon, LiskIcon, LitecoinIcon, Loader, Logo, LogoAbankIcon, LogoAbsolutIcon, LogoAcbaCreditIcon, LogoAlphabankIcon, LogoArmEconomBankIcon, LogoArshidBankIcon, LogoBankcentercreditIcon, LogoBankofGeorgiaIcon, LogoEurobankIcon, LogoForteBankIcon, LogoHalykBankIcon, LogoHomecreditIcon, LogoHumoCardIcon, LogoJysanBankIcon, LogoKaspiBankIcon, LogoMonobankIcon, LogoMtsbankIcon, LogoNetellerIcon, LogoOshadbankIcon, LogoOtkrutieIcon, LogoPochtabankIcon, LogoPrivatebankIcon, LogoPumbIcon, LogoQiwiIcon, LogoRayfuzenbankIcon, LogoRevolutIcon, LogoRnkbIcon, LogoRosbankIcon, LogoRosselhozbankIcon, LogoRusstandartIcon, LogoSberIcon, LogoSbpIcon, LogoSotovuyIcon, LogoTbcBankIcon, LogoTinkoffIcon, LogoUkrsibbankIcon, LogoUzCardIcon, LogoVtbIcon, LogoWiseIcon, LogoYoumoneyIcon, LogoutIcon, LunaIcon, MakerIcon, MaticIcon, MessageSendIcon, NearIcon, NemIcon, OmgnetworkIcon, OmiseIcon, OntologyIcon, P2PIcon, PaxgIcon, PlusIcon, PolkaIcon, QnekworkIcon, QutumIcon, RadioButton, ReciveCryptoIcon, Requisites, RippleIcon, RubIcon, SandboxIcon, ScanQrIcon, SearchIcon, SelectField, SendCryptoIcon, SettingsIcon, ShowUiIcon, SolanaIcon, StellarIcon, StepnIcon, StyledProvider, SuccessfullBigIcon, SuccessfullSmallIcon, SushiIcon, Switcher, SynthetixIcon, TabList, Table, TetherIcon, TextField, TezosIcon, ThegraphIcon, ThetaIcon, Tooltip, TopUpIcon, TransactionStatus, TrxSmallIcon, Typography, UniswapIcon, UpSmallIcon, UsdIcon, UsdcIcon, UserAccount, UserIcon, UsersIcon, VechainIcon, WalletFillIcon, WalletIcon, WarningIcon, WavesIcon, WithdrawIcon, WithdrawSimpleIcon, XmrSmallIcon, ZcashSmallIcon, ZilliqaIcon, ZrxIcon, adaptiveScalePlugin, copyToClipboard, createAdaptiveScalePlugin, formatCardNumber, maskEmail, theme };
+export { AaveIcon, AlgorandIcon, ApplicationData, ApplicationInfo, ApplicationStatus, ArrowIcon, AttachIcon, AvalancheIcon, Avatar, BalanceRow, BatIcon, BitcoinIcon, BnbSmallIcon, BtgIcon, BusdIcon, Button$1 as Button, ButtonSwitcher, CakeIcon, CardanoIcon, ChainlinkIcon, Chat, ChatMessage, CheckIcon$1 as CheckIcon, Checkbox, CircleSendCryptoIcon, ClockIcon, Close2Icon, CloseIcon, Container, CopyIcon, CopyTooltip, CosmosIcon, Counter, CountryBrIcon, CountryCzechIcon, CountryKzIcon, CountryRusIcon, CurrencyName, CurrencyRate, DashSmallIcon, DashboardIcon, DecentralandIcon, DepositIcon, DepositSimpleIcon, DigibyteIcon, DogeSmallIcon, DropdownIcon, DropdownSmallIcon, DropdownUpIcon, EditIcon, ElrondIcon, EmojiIcon, EnjinIcon, EosIcon, ErrorBigIcon, EtcIcon, EthIcon, EurIcon, ExchangeArrowsIcon, ExchangeIcon, ExchangeSimpleIcon, FantomIcon, FilecoinIcon, FtxIcon, GlobalStyles, HamburgerButton, HamburgerIcon, HeadphonesIcon, HederaIcon, HideUiIcon, HistoryIcon, IcomputerIcon, IconNeoIcon, IcxIcon, IlsIcon, InfoIcon, Informer, InputMessage, IotaIcon, KlaytnIcon, LangCountrySelect, LariIcon, LinkIcon, LiskIcon, LitecoinIcon, Loader, Logo, LogoAbankIcon, LogoAbsolutIcon, LogoAcbaCreditIcon, LogoAlphabankIcon, LogoArmEconomBankIcon, LogoArshidBankIcon, LogoBankcentercreditIcon, LogoBankofGeorgiaIcon, LogoEurobankIcon, LogoForteBankIcon, LogoHalykBankIcon, LogoHomecreditIcon, LogoHumoCardIcon, LogoJysanBankIcon, LogoKaspiBankIcon, LogoMonobankIcon, LogoMtsbankIcon, LogoNetellerIcon, LogoOshadbankIcon, LogoOtkrutieIcon, LogoPochtabankIcon, LogoPrivatebankIcon, LogoPumbIcon, LogoQiwiIcon, LogoRayfuzenbankIcon, LogoRevolutIcon, LogoRnkbIcon, LogoRosbankIcon, LogoRosselhozbankIcon, LogoRusstandartIcon, LogoSberIcon, LogoSbpIcon, LogoSotovuyIcon, LogoTbcBankIcon, LogoTinkoffIcon, LogoUkrsibbankIcon, LogoUzCardIcon, LogoVtbIcon, LogoWiseIcon, LogoYoumoneyIcon, LogoutIcon, LunaIcon, MakerIcon, MaticIcon, MessageSendIcon, NearIcon, NemIcon, OmgnetworkIcon, OmiseIcon, OntologyIcon, P2PIcon, PaxgIcon, PlusIcon, PolkaIcon, QnekworkIcon, QutumIcon, RadioButton, ReciveCryptoIcon, Requisites, RippleIcon, RubIcon, SandboxIcon, ScanQrIcon, SearchIcon, SelectField, SendCryptoIcon, SettingsIcon, ShowUiIcon, SolanaIcon, StellarIcon, StepnIcon, StyledProvider, SuccessfullBigIcon, SuccessfullSmallIcon, SushiIcon, Switcher, SynthetixIcon, TabList, Table, TetherIcon, TextField, TezosIcon, ThegraphIcon, ThetaIcon, Tooltip, TopUpIcon, TransactionStatus, TrxSmallIcon, Typography, UniswapIcon, UpSmallIcon, UsdIcon, UsdcIcon, UserAccount, UserIcon, UsersIcon, VechainIcon, WalletFillIcon, WalletIcon, WarningIcon, WavesIcon, WithdrawIcon, WithdrawSimpleIcon, XmrSmallIcon, ZcashSmallIcon, ZilliqaIcon, ZrxIcon, adaptiveScalePlugin, copyToClipboard, createAdaptiveScalePlugin, formatCardNumber, maskEmail, theme };
 //# sourceMappingURL=matbea-ui.es.js.map