@matbea-ui/matbea-ui 0.2.0-dev.709240 → 0.2.0-dev.937765

package/dist/matbea-ui.cjs.js

@@ -167,6 +167,7 @@ const StyledButton = styled.button `
 const IconSlot = styled.span `
   display: inline-flex;
   align-items: center;
+  width: max-content;
   justify-content: center;
   line-height: 0;
   ${({ $iconOnly }) => $iconOnly &&
@@ -574,8 +575,14 @@ const StyledTypography = styled.styled.span `
 
 const Typography = ({ as = "span", forwardedAs, variant = "body-m-semibold", color, align, uppercase = false, truncate = false, inline = false, children, ...rest }) => (jsxRuntime.jsx(StyledTypography, { as: as, forwardedAs: forwardedAs, "$variant": variant, "$color": color, "$align": align, "$uppercase": uppercase, "$truncate": truncate, "$inline": inline, ...rest, children: children }));
 
+const IconStyled = styled.styled.svg `
+  display: inline-flex;
+  width: ${({ $width }) => $width}px;
+  height: ${({ $height }) => $height}px;
+`;
+
 const Icon = ({ size = 24, children, ...rest }) => {
-    return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: children }));
+    return (jsxRuntime.jsx(IconStyled, { "$height": size, "$width": size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: children }));
 };
 
 const LogoAbankIcon = (props) => (jsxRuntime.jsxs(Icon, { ...props, children: [jsxRuntime.jsxs("g", { "clip-path": "url(#clip0_348_2416)", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "12", fill: "#F5F5F5" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.2589 7.98674C7.53128 8.31962 6.81257 6.30884 6.3125 3.00224C10.4015 2.97341 12.2754 3.18291 12.1754 5.99132C12.1172 6.06513 12.0622 6.1397 12.0098 6.2162C11.4594 5.19946 10.2518 4.30843 7.75728 3.83024C9.57266 4.44681 10.9399 5.69495 11.3993 7.37362C11.3396 7.57351 11.2938 7.77724 11.2589 7.98674ZM11.6388 9.04691C11.7904 7.71881 12.2529 6.60021 13.4042 5.75569C13.9803 5.33323 14.7726 5.87101 13.9469 6.35919C12.9495 6.94771 11.9955 8.32385 11.8459 9.03922C11.7783 9.05701 11.7076 9.05963 11.6388 9.04691Z", fill: "#007F2D" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.1018 9.30787C11.3545 9.34554 11.565 9.36169 11.7693 9.35131C11.9775 9.33977 12.1888 9.30057 12.4427 9.2283C13.9274 8.80469 15.8889 9.07146 17.153 9.96942C18.7727 11.1192 19.2064 13.078 18.9161 15.0273C18.5672 17.3706 16.2785 21.9634 13.3339 20.8202C12.9703 20.6795 12.6144 20.5638 12.2178 20.5773C11.803 20.5911 11.6383 20.7249 11.0328 20.8717C7.71099 21.6751 5.31607 17.1969 5.0389 14.5514C4.86058 12.8447 5.28079 11.1964 6.6023 10.1797C7.7513 9.2948 9.69848 8.96729 11.1018 9.30787Z", fill: "#65B32E" })] }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_348_2416", children: jsxRuntime.jsx("rect", { width: "24", height: "24", fill: "white" }) }) })] }));
@@ -928,14 +935,13 @@ const Informer = ({ label, description, type, icon, }) => {
 const Wrapper$1 = styled.styled.div `
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 12px;
   width: 100%;
 `;
 const Label$2 = styled.styled(Typography).attrs({
-    variant: "form-input",
     forwardedAs: "label",
 }) `
-  color: ${({ theme }) => theme.colors.primary.darkBlue};
+  color: ${({ theme, $color }) => $color || theme.colors.primary.darkBlue};
 `;
 const FieldContainer$1 = styled.styled.div `
   display: flex;
@@ -1008,7 +1014,7 @@ const ErrorText$1 = styled.styled.span `
   color: ${({ theme }) => theme.colors.accent.red};
 `;
 
-const TextField = react.forwardRef(({ value, defaultValue, placeholder = "Text", label, error, disabled = false, icon, action, name, type = "text", onChange, onFocus, onBlur, className, }, ref) => {
+const TextField = react.forwardRef(({ value, defaultValue, placeholder = "Text", label, error, disabled = false, icon, action, name, type = "text", onChange, onFocus, onBlur, className, labelVariant, labelColor, }, ref) => {
     const [focused, setFocused] = react.useState(false);
     const hasError = Boolean(error);
     const handleFocus = (evt) => {
@@ -1019,7 +1025,7 @@ const TextField = react.forwardRef(({ value, defaultValue, placeholder = "Text",
         setFocused(false);
         onBlur?.(evt);
     };
-    return (jsxRuntime.jsxs(Wrapper$1, { className: className, children: [label && jsxRuntime.jsx(Label$2, { children: label }), jsxRuntime.jsxs(FieldContainer$1, { "$hasError": hasError, "$disabled": disabled, "data-state": hasError ? "error" : focused ? "active" : undefined, children: [icon && jsxRuntime.jsx(LeadingIcon$1, { children: icon }), jsxRuntime.jsx(Input, { ref: ref, type: type, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur }), action && jsxRuntime.jsx(ActionSlot, { children: action })] }), error && jsxRuntime.jsx(ErrorText$1, { children: error })] }));
+    return (jsxRuntime.jsxs(Wrapper$1, { className: className, children: [label && (jsxRuntime.jsx(Label$2, { variant: labelVariant || "form-input", "$color": labelColor, children: label })), jsxRuntime.jsxs(FieldContainer$1, { "$hasError": hasError, "$disabled": disabled, "data-state": hasError ? "error" : focused ? "active" : undefined, children: [icon && jsxRuntime.jsx(LeadingIcon$1, { children: icon }), jsxRuntime.jsx(Input, { ref: ref, type: type, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur }), action && jsxRuntime.jsx(ActionSlot, { children: action })] }), error && jsxRuntime.jsx(ErrorText$1, { children: error })] }));
 });
 TextField.displayName = "TextField";
 
@@ -2161,7 +2167,10 @@ const ButtonSwitcher = ({ active, leftButtonLabel, rightButtonLabel, }) => {
     return (jsxRuntime.jsxs(ButtonSwitcherStyled, { children: [jsxRuntime.jsx(ButtonSwitcherItem, { "data-active": !active, children: leftButtonLabel }), jsxRuntime.jsx(ButtonSwitcherItem, { "data-active": active, children: rightButtonLabel })] }));
 };
 
-const AvatarStyled = styled.styled.div `
+const AvatarStyled = styled.styled(Typography).attrs({
+    forwardedAs: "div",
+    variant: "avatar-basic",
+}) `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2170,6 +2179,7 @@ const AvatarStyled = styled.styled.div `
   width: 40px;
   height: 40px;
   border-radius: 50%;
+  color: ${({ theme }) => theme.colors.primary.white};
   background-color: ${({ theme, $color }) => {
     if (!$color)
         return theme.colors.primary.hoverBlue;
@@ -2694,46 +2704,197 @@ const StyledProvider = ({ children }) => {
     return (jsxRuntime.jsx(styled.StyleSheetManager, { stylisPlugins: [adaptiveScalePlugin], children: children }));
 };
 
-const breakpoints = {
-    mobile: { max: 576, scale: 0.7 },
-    tablet: { min: 577, max: 768, scale: 0.85 },
-    desktop: { min: 769, max: 1024, scale: 1 },
-    wide: { min: 1025, scale: 1.15 },
-};
 const GlobalStyles = styled.createGlobalStyle `
   :root {
     --adaptive-scale: 1;
     --adaptive-vh: 1vh;
   }
 
-  /* Mobile */
-  @media (max-width: ${breakpoints.mobile.max}px) {
+  /* ============ MOBILE ============ */
+  
+  /* Ultra small (iPhone SE 1st gen, старые Android) */
+  @media (max-width: 320px) {
+    :root {
+      --adaptive-scale: 0.75;
+    }
+  }
+
+  /* Small mobile */
+  @media (min-width: 321px) and (max-width: 359px) {
+    :root {
+      --adaptive-scale: 0.82;
+    }
+  }
+
+  /* Medium mobile */
+  @media (min-width: 360px) and (max-width: 374px) {
+    :root {
+      --adaptive-scale: 0.9;
+    }
+  }
+
+  /* Mobile base (iPhone X/11/12/13 mini) */
+  @media (min-width: 375px) and (max-width: 389px) {
+    :root {
+      --adaptive-scale: 1;
+    }
+  }
+
+  /* Large mobile (iPhone 12/13/14/15) */
+  @media (min-width: 390px) and (max-width: 429px) {
+    :root {
+      --adaptive-scale: 1;
+    }
+  }
+
+  /* Extra large mobile (iPhone 14 Plus/Max) */
+  @media (min-width: 430px) and (max-width: 576px) {
+    :root {
+      --adaptive-scale: 1;
+    }
+  }
+
+  /* ============ TABLET ============ */
+  
+  /* Small tablet / Large phone landscape */
+  @media (min-width: 577px) and (max-width: 639px) {
+    :root {
+      --adaptive-scale: 0.75;
+    }
+  }
+
+  /* Medium small tablet */
+  @media (min-width: 640px) and (max-width: 719px) {
+    :root {
+      --adaptive-scale: 0.83;
+    }
+  }
+
+  /* Medium tablet */
+  @media (min-width: 720px) and (max-width: 767px) {
     :root {
-      --adaptive-scale: ${breakpoints.mobile.scale};
+      --adaptive-scale: 0.9;
     }
   }
 
-  /* Tablet */
-  @media (min-width: ${breakpoints.tablet.min}px) and (max-width: ${breakpoints.tablet.max}px) {
+  /* Tablet base (iPad Mini/Air portrait) */
+  @media (min-width: 768px) and (max-width: 833px) {
     :root {
-      --adaptive-scale: ${breakpoints.tablet.scale};
+      --adaptive-scale: 1;
     }
   }
 
-  /* Desktop */
-  @media (min-width: ${breakpoints.desktop.min}px) and (max-width: ${breakpoints.desktop.max}px) {
+  /* Large tablet (iPad Pro 11" portrait) */
+  @media (min-width: 834px) and (max-width: 899px) {
     :root {
-      --adaptive-scale: ${breakpoints.desktop.scale};
+      --adaptive-scale: 1;
     }
   }
 
-  /* Wide */
-  @media (min-width: ${breakpoints.wide.min}px) {
+  /* Extra large tablet */
+  @media (min-width: 900px) and (max-width: 1023px) {
     :root {
-      --adaptive-scale: ${breakpoints.wide.scale};
+      --adaptive-scale: 1;
     }
   }
 
+  /* Tablet landscape (iPad Pro landscape) */
+  @media (min-width: 1024px) and (max-width: 1100px) {
+    :root {
+      --adaptive-scale: 0.71;
+    }
+  }
+
+  /* ============ DESKTOP ============ */
+  
+  /* Small desktop / Laptop 13" */
+  @media (min-width: 1101px) and (max-width: 1279px) {
+    :root {
+      --adaptive-scale: 0.77;
+    }
+  }
+
+  /* Medium desktop / Laptop 14" */
+  @media (min-width: 1280px) and (max-width: 1365px) {
+    :root {
+      --adaptive-scale: 0.85;
+    }
+  }
+
+  /* Large laptop 15" */
+  @media (min-width: 1366px) and (max-width: 1439px) {
+    :root {
+      --adaptive-scale: 0.92;
+    }
+  }
+
+  /* Desktop base (MacBook Pro 16", gaming monitors) */
+  @media (min-width: 1440px) and (max-width: 1599px) {
+    :root {
+      --adaptive-scale: 1;
+    }
+  }
+
+  /* Large desktop */
+  @media (min-width: 1600px) and (max-width: 1799px) {
+    :root {
+      --adaptive-scale: 1;
+    }
+  }
+
+  /* Extra large desktop */
+  @media (min-width: 1800px) and (max-width: 1919px) {
+    :root {
+      --adaptive-scale: 1;
+    }
+  }
+
+  /* ============ WIDE (с увеличением) ============ */
+  
+  /* Full HD base (1920x1080) */
+  @media (min-width: 1920px) and (max-width: 2047px) {
+    :root {
+      --adaptive-scale: 1;
+    }
+  }
+
+  /* 2K */
+  @media (min-width: 2048px) and (max-width: 2559px) {
+    :root {
+      --adaptive-scale: 1.1;
+    }
+  }
+
+  /* QHD / 2.5K */
+  @media (min-width: 2560px) and (max-width: 3199px) {
+    :root {
+      --adaptive-scale: 1.25;
+    }
+  }
+
+  /* 3K */
+  @media (min-width: 3200px) and (max-width: 3839px) {
+    :root {
+      --adaptive-scale: 1.4;
+    }
+  }
+
+  /* 4K (3840x2160) */
+  @media (min-width: 3840px) and (max-width: 5119px) {
+    :root {
+      --adaptive-scale: 1.6;
+    }
+  }
+
+  /* 5K и выше */
+  @media (min-width: 5120px) {
+    :root {
+      --adaptive-scale: 2;
+    }
+  }
+
+  /* ============ ДОПОЛНИТЕЛЬНО ============ */
+
   /* Фикс для мобильных браузеров (100vh с учетом адресной строки) */
   @supports (-webkit-touch-callout: none) {
     :root {
@@ -2942,7 +3103,6 @@ exports.ZcashSmallIcon = ZcashSmallIcon;
 exports.ZilliqaIcon = ZilliqaIcon;
 exports.ZrxIcon = ZrxIcon;
 exports.adaptiveScalePlugin = adaptiveScalePlugin;
-exports.breakpoints = breakpoints;
 exports.copyToClipboard = copyToClipboard;
 exports.createAdaptiveScalePlugin = createAdaptiveScalePlugin;
 exports.formatCardNumber = formatCardNumber;