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

package/dist/matbea-ui.es.js

@@ -165,6 +165,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 &&
@@ -572,8 +573,14 @@ const StyledTypography = styled$1.span `
 
 const Typography = ({ as = "span", forwardedAs, variant = "body-m-semibold", color, align, uppercase = false, truncate = false, inline = false, children, ...rest }) => (jsx(StyledTypography, { as: as, forwardedAs: forwardedAs, "$variant": variant, "$color": color, "$align": align, "$uppercase": uppercase, "$truncate": truncate, "$inline": inline, ...rest, children: children }));
 
+const IconStyled = styled$1.svg `
+  display: inline-flex;
+  width: ${({ $width }) => $width}px;
+  height: ${({ $height }) => $height}px;
+`;
+
 const Icon = ({ size = 24, children, ...rest }) => {
-    return (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: children }));
+    return (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) => (jsxs(Icon, { ...props, children: [jsxs("g", { "clip-path": "url(#clip0_348_2416)", children: [jsx("circle", { cx: "12", cy: "12", r: "12", fill: "#F5F5F5" }), 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" }), 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" })] }), jsx("defs", { children: jsx("clipPath", { id: "clip0_348_2416", children: jsx("rect", { width: "24", height: "24", fill: "white" }) }) })] }));
@@ -926,14 +933,13 @@ const Informer = ({ label, description, type, icon, }) => {
 const Wrapper$1 = styled$1.div `
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 12px;
   width: 100%;
 `;
 const Label$2 = styled$1(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$1.div `
   display: flex;
@@ -1006,7 +1012,7 @@ const ErrorText$1 = styled$1.span `
   color: ${({ theme }) => theme.colors.accent.red};
 `;
 
-const TextField = forwardRef(({ value, defaultValue, placeholder = "Text", label, error, disabled = false, icon, action, name, type = "text", onChange, onFocus, onBlur, className, }, ref) => {
+const TextField = forwardRef(({ value, defaultValue, placeholder = "Text", label, error, disabled = false, icon, action, name, type = "text", onChange, onFocus, onBlur, className, labelVariant, labelColor, }, ref) => {
     const [focused, setFocused] = useState(false);
     const hasError = Boolean(error);
     const handleFocus = (evt) => {
@@ -1017,7 +1023,7 @@ const TextField = forwardRef(({ value, defaultValue, placeholder = "Text", label
         setFocused(false);
         onBlur?.(evt);
     };
-    return (jsxs(Wrapper$1, { className: className, children: [label && jsx(Label$2, { children: label }), jsxs(FieldContainer$1, { "$hasError": hasError, "$disabled": disabled, "data-state": hasError ? "error" : focused ? "active" : undefined, children: [icon && jsx(LeadingIcon$1, { children: icon }), jsx(Input, { ref: ref, type: type, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur }), action && jsx(ActionSlot, { children: action })] }), error && jsx(ErrorText$1, { children: error })] }));
+    return (jsxs(Wrapper$1, { className: className, children: [label && (jsx(Label$2, { variant: labelVariant || "form-input", "$color": labelColor, children: label })), jsxs(FieldContainer$1, { "$hasError": hasError, "$disabled": disabled, "data-state": hasError ? "error" : focused ? "active" : undefined, children: [icon && jsx(LeadingIcon$1, { children: icon }), jsx(Input, { ref: ref, type: type, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur }), action && jsx(ActionSlot, { children: action })] }), error && jsx(ErrorText$1, { children: error })] }));
 });
 TextField.displayName = "TextField";
 
@@ -2159,7 +2165,10 @@ const ButtonSwitcher = ({ active, leftButtonLabel, rightButtonLabel, }) => {
     return (jsxs(ButtonSwitcherStyled, { children: [jsx(ButtonSwitcherItem, { "data-active": !active, children: leftButtonLabel }), jsx(ButtonSwitcherItem, { "data-active": active, children: rightButtonLabel })] }));
 };
 
-const AvatarStyled = styled$1.div `
+const AvatarStyled = styled$1(Typography).attrs({
+    forwardedAs: "div",
+    variant: "avatar-basic",
+}) `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2168,6 +2177,7 @@ const AvatarStyled = styled$1.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;
@@ -2692,46 +2702,197 @@ const StyledProvider = ({ children }) => {
     return (jsx(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 = 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 {
@@ -2749,5 +2910,5 @@ const GlobalStyles = createGlobalStyle `
   }
 `;
 
-export { AaveIcon, AlgorandIcon, ApplicationData, ApplicationInfo, ApplicationStatus, ArrowIcon, AttachIcon, AvalancheIcon, Avatar, BalanceRow, BatIcon, BitcoinIcon, BnbSmallIcon, BtgIcon, BusdIcon, Button, ButtonSwitcher, CakeIcon, CardanoIcon, ChainlinkIcon, 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, 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, breakpoints, copyToClipboard, createAdaptiveScalePlugin, formatCardNumber, maskEmail, theme };
+export { AaveIcon, AlgorandIcon, ApplicationData, ApplicationInfo, ApplicationStatus, ArrowIcon, AttachIcon, AvalancheIcon, Avatar, BalanceRow, BatIcon, BitcoinIcon, BnbSmallIcon, BtgIcon, BusdIcon, Button, ButtonSwitcher, CakeIcon, CardanoIcon, ChainlinkIcon, 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, 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 };
 //# sourceMappingURL=matbea-ui.es.js.map