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

package/dist/matbea-ui.cjs.js

@@ -1211,15 +1211,13 @@ const RadioButton = ({ checked, defaultChecked = false, disabled = false, name,
 
 const Wrapper = styled.styled.div `
   position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
   width: 100%;
 `;
 const Label$1 = styled.styled(Typography).attrs({
     variant: "form-input",
     forwardedAs: "label",
 }) `
+  margin-bottom: 8px;
   color: ${({ theme }) => theme.colors.primary.darkBlue};
 `;
 const FieldContainer = styled.styled.div `
@@ -1283,9 +1281,8 @@ const ErrorText = styled.styled.span `
   color: ${({ theme }) => theme.colors.accent.red};
 `;
 const List = styled.styled.div `
+  margin-top: 12px;
   position: fixed;
-  top: ${({ $top }) => `${$top}px`};
-  left: ${({ $left }) => `${$left}px`};
   width: ${({ $width }) => `${$width}px`};
   z-index: 999;
   border-radius: 5px;
@@ -1301,7 +1298,7 @@ const Option = styled.styled.button `
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 0 13px;
+  padding: 11px 13px;
   height: 40px;
   border: none;
   background: transparent;
@@ -1310,7 +1307,6 @@ const Option = styled.styled.button `
   color: ${({ theme }) => theme.colors.primary.darkBlue};
   cursor: pointer;
   transition: background 140ms ease;
-
   &[data-hovered="true"],
   &:hover {
     background: ${({ theme }) => theme.colors.gray.lightBlueGray};
@@ -1320,14 +1316,23 @@ const Option = styled.styled.button `
     background: ${({ theme }) => theme.colors.gray.lightGray};
   }
 `;
+const OptionText = styled.styled(Typography).attrs({
+    forwardedAs: "span",
+    variant: "form-input",
+}) `
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
 const OptionIcon = styled.styled.span `
   display: inline-flex;
+  align-items: center;
   width: 24px;
   height: 24px;
 `;
 
 const DROPDOWN_OFFSET = 8;
-const SelectField = React__default.forwardRef(({ options, value, defaultValue, placeholder = "Text", label, error, disabled = false, icon, name, onChange, onFocus, onBlur, className, }, ref) => {
+const SelectField = React__default.forwardRef(({ options = [], value, defaultValue, placeholder = "Text", label, error, disabled = false, icon, name, onChange, onFocus, onBlur, className, }, ref) => {
     const wrapperRef = React__default.useRef(null);
     const fieldRef = React__default.useRef(null);
     const listRef = React__default.useRef(null);
@@ -1451,10 +1456,10 @@ const SelectField = React__default.forwardRef(({ options, value, defaultValue, p
         setFocused(false);
         onBlur?.(evt);
     };
-    return (jsxRuntime.jsxs(Wrapper, { className: className, ref: wrapperRef, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, children: [label && jsxRuntime.jsx(Label$1, { children: label }), jsxRuntime.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 && jsxRuntime.jsx(LeadingIcon, { children: icon }), jsxRuntime.jsx(Value, { "$placeholder": displayPlaceholder, children: displayText }), jsxRuntime.jsx(HiddenInput$1, { ref: ref, readOnly: true, name: name, value: selectedValue, tabIndex: -1, "aria-hidden": true })] }), error && jsxRuntime.jsx(ErrorText, { children: error }), isOpen && (jsxRuntime.jsx(List, { ref: listRef, role: "listbox", "$top": dropdownRect.top, "$left": dropdownRect.left, "$width": dropdownRect.width, children: options.map((option, index) => {
+    return (jsxRuntime.jsxs(Wrapper, { "data-select-field": "true", className: className, ref: wrapperRef, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: (e) => e.stopPropagation(), children: [label && jsxRuntime.jsx(Label$1, { children: label }), jsxRuntime.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 && jsxRuntime.jsx(LeadingIcon, { children: icon }), jsxRuntime.jsx(Value, { "$placeholder": displayPlaceholder, children: displayText }), jsxRuntime.jsx(HiddenInput$1, { ref: ref, readOnly: true, name: name, value: selectedValue, tabIndex: -1, "aria-hidden": true })] }), error && jsxRuntime.jsx(ErrorText, { children: error }), isOpen && (jsxRuntime.jsx(List, { ref: listRef, role: "listbox", "$width": dropdownRect.width, children: options.map((option, index) => {
                     const isActiveOption = option.value === selectedValue;
                     const isHovered = index === hoveredIndex;
-                    return (jsxRuntime.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 && jsxRuntime.jsx(OptionIcon, { children: option.icon }), jsxRuntime.jsx(Typography, { variant: "form-input", children: option.label })] }, option.value));
+                    return (jsxRuntime.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 && jsxRuntime.jsx(OptionIcon, { children: option.icon }), jsxRuntime.jsx(OptionText, { variant: "form-input", children: option.label })] }, option.value));
                 }) }))] }));
 });
 SelectField.displayName = "SelectField";
@@ -2199,6 +2204,98 @@ const Avatar = (props) => {
     return jsxRuntime.jsx(AvatarStyled, { "$color": "hoverBlue", "$size": 40, ...props });
 };
 
+const LangCountrySelectStyled = styled.styled.div `
+  position: relative;
+  min-width: 200px;
+`;
+const LangCountrySelectContainer = styled.styled.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.styled.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.styled(DropdownIcon) `
+  transition: transform 150ms ease;
+  transform: rotate(${({ $open }) => ($open ? "180deg" : "0")});
+`;
+const LangCountrySelectIcon = styled.styled.div `
+  width: 24px;
+  height: 24px;
+`;
+const LangCountrySelectLabel = styled.styled(Typography).attrs({
+    forwardedAs: "p",
+    variant: "form-input",
+}) `
+  width: 100%;
+  user-select: none;
+  color: ${({ theme }) => theme.colors.primary.darkBlue};
+`;
+const LangCountrySelectButton = styled.styled(Button$1) `
+  width: fit-content;
+`;
+
+const LangCountrySelect = ({ currentLang, currentCurrency, currentCountry, countries = [], currencies = [], languages = [], handleSave, labelLang, labelCurrency, labelCountry, saveText, }) => {
+    const [isOpen, setIsOpen] = React__default.useState(false);
+    const ref = React__default.useRef(null);
+    const [lang, setLang] = React__default.useState(currentLang);
+    const [currency, setCurrency] = React__default.useState(currentCurrency);
+    const [country, setCountry] = React__default.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 = React__default.useCallback(() => {
+        setIsOpen(false);
+        handleSave?.({
+            lang,
+            currency,
+            country,
+        });
+    }, [lang, currency, country, handleSave]);
+    React__default.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (isOpen && !ref.current?.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    return (jsxRuntime.jsxs(LangCountrySelectStyled, { ref: ref, children: [jsxRuntime.jsxs(LangCountrySelectContainer, { onClick: handleClick, children: [includedCurrency?.icon && (jsxRuntime.jsx(LangCountrySelectIcon, { children: includedCurrency?.icon })), jsxRuntime.jsx(LangCountrySelectLabel, { children: [includedCurrency?.value, includedLang?.label]
+                            .join(" / ")
+                            ?.toLocaleUpperCase() }), jsxRuntime.jsx(LangCountrySelectArrow, { "$open": isOpen, size: 9 })] }), jsxRuntime.jsxs(LangCountrySelectDropdown, { "$open": isOpen, children: [jsxRuntime.jsx(SelectField, { placeholder: "", label: labelLang, options: languages, value: lang, onChange: setLang }), jsxRuntime.jsx(SelectField, { icon: includedCurrency?.icon, placeholder: "", label: labelCurrency, options: currencies, value: currency, onChange: setCurrency }), jsxRuntime.jsx(SelectField, { icon: includedCountry?.icon, placeholder: "", label: labelCountry, options: countries, value: country, onChange: setCountry }), jsxRuntime.jsx(LangCountrySelectButton, { size: "medium", onClick: handleClickSave, children: saveText })] })] }));
+};
+
 const ApplicationDataStyled = styled.styled.div `
   display: flex;
   column-gap: 10px;
@@ -2242,7 +2339,7 @@ const ApplicationData = ({ label, statusValue, withdraw, info, }) => {
 
 const ApplicationInfoStyled = styled.styled.div `
   display: flex;
-  width: fit-content;
+  width: 100%;
   align-items: center;
   gap: 22px;
   ${({ $variant }) => {
@@ -2264,7 +2361,6 @@ const ApplicationInfoStyled = styled.styled.div `
 
   border-radius: 6px;
   ${({ theme }) => theme.media.maxWidth.tablet} {
-    width: 100%;
     flex-direction: column;
     gap: 18px;
     padding: 18px 20px;
@@ -2277,10 +2373,9 @@ const ApplicationInfoStyled = styled.styled.div `
 `;
 const ApplicationInfoDataContainer = styled.styled.div `
   display: flex;
-  gap: 56px;
-  width: fit-content;
+  gap: 64px;
+  width: 100%;
   ${({ theme }) => theme.media.maxWidth.tablet} {
-    width: 100%;
     flex-direction: column;
     gap: 12px;
   }
@@ -24454,8 +24549,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)",
         },
     },
 };
@@ -24533,10 +24628,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})`;
+        // });
     };
 };
 
@@ -24576,14 +24671,14 @@ const GlobalStyles = styled.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;
     }
   }
 
@@ -24832,6 +24927,7 @@ exports.Informer = Informer;
 exports.InputMessage = InputMessage;
 exports.IotaIcon = IotaIcon;
 exports.KlaytnIcon = KlaytnIcon;
+exports.LangCountrySelect = LangCountrySelect;
 exports.LariIcon = LariIcon;
 exports.LinkIcon = LinkIcon;
 exports.LiskIcon = LiskIcon;