@astral/ui 4.96.0 → 4.97.0

package/components/Link/Link.d.ts

@@ -16,6 +16,10 @@ export type LinkProps = Pick<WithoutEmotionSpecific<MuiLinkProps>, 'rel' | 'href
      * добавляет значение атрибуту 'download' тега 'a'
      */
     downloadFilename?: string;
+    /**
+     * Позволяет переключить цвета ссылки на более контрастные
+     */
+    isContrast?: boolean;
 };
 export declare const Link: import("react").ForwardRefExoticComponent<Pick<WithoutEmotionSpecific<MuiLinkProps>, "classes" | "className" | "style" | "rel" | "children" | "target" | "href" | "key"> & {
     /**
@@ -32,4 +36,8 @@ export declare const Link: import("react").ForwardRefExoticComponent<Pick<Withou
      * добавляет значение атрибуту 'download' тега 'a'
      */
     downloadFilename?: string | undefined;
+    /**
+     * Позволяет переключить цвета ссылки на более контрастные
+     */
+    isContrast?: boolean | undefined;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

package/components/Link/Link.js

@@ -2,8 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { DownloadVOutlineSm } from '../../icons/DownloadVOutlineSm';
 import { OpenLinkOutlineSm } from '../../icons/OpenLinkOutlineSm';
+import { cn } from '../utils/cn';
+import { cva } from '../utils/cva';
+import { linkClassnames } from './constants';
 import { StyledLink } from './styles';
-export const Link = forwardRef(({ withAdornment, isDownload, downloadFilename, children, ...props }, ref) => {
+const linkCva = cva(linkClassnames.root, {
+    variants: {
+        isContrast: {
+            true: linkClassnames.isContrast,
+        },
+    },
+});
+export const Link = forwardRef(({ withAdornment, isDownload, downloadFilename, isContrast, children, className, ...props }, ref) => {
     const icon = isDownload ? _jsx(DownloadVOutlineSm, {}) : _jsx(OpenLinkOutlineSm, {});
-    return (_jsxs(StyledLink, { download: downloadFilename ?? isDownload, ref: ref, ...props, children: [withAdornment === 'start' && icon, children, withAdornment === 'end' && icon, !withAdornment && isDownload && _jsx(DownloadVOutlineSm, {})] }));
+    return (_jsxs(StyledLink, { download: downloadFilename ?? isDownload, className: cn(linkCva({ isContrast }), className), ref: ref, ...props, children: [withAdornment === 'start' && icon, children, withAdornment === 'end' && icon, !withAdornment && isDownload && _jsx(DownloadVOutlineSm, {})] }));
 });

package/components/Link/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const linkClassnames: {
+    root: string;
+    isContrast: string;
+};

package/components/Link/constants.js

@@ -0,0 +1,5 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const linkClassnames = {
+    root: createUIKitClassname('link'),
+    isContrast: createUIKitClassname('link__contrast-color'),
+};

package/components/Link/index.d.ts

@@ -1 +1,2 @@
 export { Link, type LinkProps } from './Link';
+export { linkClassnames } from './constants';

package/components/Link/index.js

@@ -1 +1,2 @@
 export { Link } from './Link';
+export { linkClassnames } from './constants';

package/components/Link/public.d.ts

@@ -1 +1,2 @@
+export { linkClassnames } from './constants';
 export { Link, type LinkProps } from './Link';

package/components/Link/public.js

@@ -1 +1,2 @@
+export { linkClassnames } from './constants';
 export { Link } from './Link';

package/components/Link/styles.js

@@ -1,6 +1,7 @@
 import Link from '@mui/material/Link';
 import { svgIconClassnames } from '../SvgIcon';
 import { styled } from '../styled';
+import { linkClassnames } from './constants';
 export const StyledLink = styled(Link) `
   display: inline-flex;
   gap: ${({ theme }) => theme.spacing(1)};
@@ -24,6 +25,22 @@ export const StyledLink = styled(Link) `
     text-decoration: underline;
   }
 
+  &.${linkClassnames.isContrast} {
+    color: ${({ theme }) => theme.palette.components.link.contrast.main};
+
+    &:visited {
+      color: ${({ theme }) => theme.palette.components.link.contrast.visited};
+    }
+
+    &:hover {
+      color: ${({ theme }) => theme.palette.components.link.contrast.hover};
+    }
+
+    &:active {
+      color: ${({ theme }) => theme.palette.components.link.active};
+    }
+  }
+
   &:focus-visible {
     border-radius: ${({ theme }) => theme.shape.medium};
     outline: 2px solid ${({ theme }) => theme.palette.components.focused};

package/components/theme/palette/componentsColors/linkColors/linkColors.d.ts

@@ -3,5 +3,10 @@ export type LinkColors = {
     hover: string;
     visited: string;
     active: string;
+    contrast: {
+        main: string;
+        hover: string;
+        visited: string;
+    };
 };
 export declare const linkColors: LinkColors;

package/components/theme/palette/componentsColors/linkColors/linkColors.js

@@ -3,4 +3,9 @@ export const linkColors = {
     hover: '#268FF9',
     visited: '#762376',
     active: '#072D57',
+    contrast: {
+        main: '#6EB3F8',
+        hover: '#499CEF',
+        visited: '#C084FC',
+    },
 };

package/node/components/Link/Link.d.ts

@@ -16,6 +16,10 @@ export type LinkProps = Pick<WithoutEmotionSpecific<MuiLinkProps>, 'rel' | 'href
      * добавляет значение атрибуту 'download' тега 'a'
      */
     downloadFilename?: string;
+    /**
+     * Позволяет переключить цвета ссылки на более контрастные
+     */
+    isContrast?: boolean;
 };
 export declare const Link: import("react").ForwardRefExoticComponent<Pick<WithoutEmotionSpecific<MuiLinkProps>, "classes" | "className" | "style" | "rel" | "children" | "target" | "href" | "key"> & {
     /**
@@ -32,4 +36,8 @@ export declare const Link: import("react").ForwardRefExoticComponent<Pick<Withou
      * добавляет значение атрибуту 'download' тега 'a'
      */
     downloadFilename?: string | undefined;
+    /**
+     * Позволяет переключить цвета ссылки на более контрастные
+     */
+    isContrast?: boolean | undefined;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

package/node/components/Link/Link.js

@@ -5,8 +5,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const DownloadVOutlineSm_1 = require("../../icons/DownloadVOutlineSm");
 const OpenLinkOutlineSm_1 = require("../../icons/OpenLinkOutlineSm");
+const cn_1 = require("../utils/cn");
+const cva_1 = require("../utils/cva");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
-exports.Link = (0, react_1.forwardRef)(({ withAdornment, isDownload, downloadFilename, children, ...props }, ref) => {
+const linkCva = (0, cva_1.cva)(constants_1.linkClassnames.root, {
+    variants: {
+        isContrast: {
+            true: constants_1.linkClassnames.isContrast,
+        },
+    },
+});
+exports.Link = (0, react_1.forwardRef)(({ withAdornment, isDownload, downloadFilename, isContrast, children, className, ...props }, ref) => {
     const icon = isDownload ? (0, jsx_runtime_1.jsx)(DownloadVOutlineSm_1.DownloadVOutlineSm, {}) : (0, jsx_runtime_1.jsx)(OpenLinkOutlineSm_1.OpenLinkOutlineSm, {});
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledLink, { download: downloadFilename ?? isDownload, ref: ref, ...props, children: [withAdornment === 'start' && icon, children, withAdornment === 'end' && icon, !withAdornment && isDownload && (0, jsx_runtime_1.jsx)(DownloadVOutlineSm_1.DownloadVOutlineSm, {})] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledLink, { download: downloadFilename ?? isDownload, className: (0, cn_1.cn)(linkCva({ isContrast }), className), ref: ref, ...props, children: [withAdornment === 'start' && icon, children, withAdornment === 'end' && icon, !withAdornment && isDownload && (0, jsx_runtime_1.jsx)(DownloadVOutlineSm_1.DownloadVOutlineSm, {})] }));
 });

package/node/components/Link/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const linkClassnames: {
+    root: string;
+    isContrast: string;
+};

package/node/components/Link/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.linkClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.linkClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('link'),
+    isContrast: (0, createUIKitClassname_1.createUIKitClassname)('link__contrast-color'),
+};

package/node/components/Link/index.d.ts

@@ -1 +1,2 @@
 export { Link, type LinkProps } from './Link';
+export { linkClassnames } from './constants';

package/node/components/Link/index.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Link = void 0;
+exports.linkClassnames = exports.Link = void 0;
 var Link_1 = require("./Link");
 Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.Link; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "linkClassnames", { enumerable: true, get: function () { return constants_1.linkClassnames; } });

package/node/components/Link/public.d.ts

@@ -1 +1,2 @@
+export { linkClassnames } from './constants';
 export { Link, type LinkProps } from './Link';

package/node/components/Link/public.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Link = void 0;
+exports.Link = exports.linkClassnames = void 0;
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "linkClassnames", { enumerable: true, get: function () { return constants_1.linkClassnames; } });
 var Link_1 = require("./Link");
 Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.Link; } });

package/node/components/Link/styles.js

@@ -7,6 +7,7 @@ exports.StyledLink = void 0;
 const Link_1 = __importDefault(require("@mui/material/Link"));
 const SvgIcon_1 = require("../SvgIcon");
 const styled_1 = require("../styled");
+const constants_1 = require("./constants");
 exports.StyledLink = (0, styled_1.styled)(Link_1.default) `
   display: inline-flex;
   gap: ${({ theme }) => theme.spacing(1)};
@@ -30,6 +31,22 @@ exports.StyledLink = (0, styled_1.styled)(Link_1.default) `
     text-decoration: underline;
   }
 
+  &.${constants_1.linkClassnames.isContrast} {
+    color: ${({ theme }) => theme.palette.components.link.contrast.main};
+
+    &:visited {
+      color: ${({ theme }) => theme.palette.components.link.contrast.visited};
+    }
+
+    &:hover {
+      color: ${({ theme }) => theme.palette.components.link.contrast.hover};
+    }
+
+    &:active {
+      color: ${({ theme }) => theme.palette.components.link.active};
+    }
+  }
+
   &:focus-visible {
     border-radius: ${({ theme }) => theme.shape.medium};
     outline: 2px solid ${({ theme }) => theme.palette.components.focused};

package/node/components/theme/palette/componentsColors/linkColors/linkColors.d.ts

@@ -3,5 +3,10 @@ export type LinkColors = {
     hover: string;
     visited: string;
     active: string;
+    contrast: {
+        main: string;
+        hover: string;
+        visited: string;
+    };
 };
 export declare const linkColors: LinkColors;

package/node/components/theme/palette/componentsColors/linkColors/linkColors.js

@@ -6,4 +6,9 @@ exports.linkColors = {
     hover: '#268FF9',
     visited: '#762376',
     active: '#072D57',
+    contrast: {
+        main: '#6EB3F8',
+        hover: '#499CEF',
+        visited: '#C084FC',
+    },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.96.0",
+  "version": "4.97.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {