@snack-uikit/tag 0.11.2 → 0.11.3-preview-64081c67.0

package/README.md

@@ -7,16 +7,32 @@
 
 [//]: DOCUMENTATION_SECTION_START
 [//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
+## isTagLinkProps
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| href* | `string` | - |  |
+| label* | `string` | - | Текст |
+| onDelete | `MouseEventHandler<HTMLButtonElement>` | - | Коллбэк на удаление |
+| size | enum Size: `"xs"`, `"s"` | - | Размер |
+| appearance | enum Appearance: `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | - | Внешний вид |
+| className | `string` | - | CSS-класс |
+| tabIndex | `number` | - | tabIndex кнопки удаления |
+| onClick | `(e: MouseEvent<HTMLAnchorElement, MouseEvent>) => void` | - |  |
+| target | `string` | - |  |
 ## Tag
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| href* | `string` | - |  |
 | label* | `string` | - | Текст |
-| size | enum Size: `"xs"`, `"s"` | xs | Размер |
-| appearance | enum Appearance: `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | neutral | Внешний вид |
 | onDelete | `MouseEventHandler<HTMLButtonElement>` | - | Коллбэк на удаление |
+| size | enum Size: `"xs"`, `"s"` | - | Размер |
+| appearance | enum Appearance: `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | - | Внешний вид |
 | className | `string` | - | CSS-класс |
 | tabIndex | `number` | - | tabIndex кнопки удаления |
+| onClick | `(e: MouseEvent<HTMLAnchorElement, MouseEvent>) => void` | - |  |
+| target | `string` | - |  |
 ## TagRow
 ### Props
 | name | type | default value | description |

package/dist/cjs/components/Tag/Tag.d.ts

@@ -1,20 +1,5 @@
-import { MouseEventHandler } from 'react';
-import { WithSupportProps } from '@snack-uikit/utils';
-import { APPEARANCE } from '../../constants';
-import { Appearance, Size } from '../../types';
-export type TagProps = WithSupportProps<{
-    /** Текст */
-    label: string;
-    /** Размер */
-    size?: Size;
-    /** Внешний вид */
-    appearance?: Appearance;
-    /** Коллбэк на удаление */
-    onDelete?: MouseEventHandler<HTMLButtonElement>;
-    /** CSS-класс */
-    className?: string;
-    /** tabIndex кнопки удаления */
-    tabIndex?: number;
-}>;
-export declare function Tag({ label, size, appearance, onDelete, className, tabIndex, ...rest }: TagProps): import("react/jsx-runtime").JSX.Element;
-export { APPEARANCE };
+import { TagBaseProps } from '../TagBase';
+import { TagLinkProps } from '../TagLink';
+export type TagProps = TagBaseProps | TagLinkProps;
+export declare function isTagLinkProps(props: TagProps): props is TagLinkProps;
+export declare function Tag(props: TagProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Tag/Tag.js

@@ -1,68 +1,19 @@
 "use strict";
 
-var __rest = void 0 && (void 0).__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
-};
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.APPEARANCE = void 0;
+exports.isTagLinkProps = isTagLinkProps;
 exports.Tag = Tag;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = __importDefault(require("classnames"));
-const icons_1 = require("@snack-uikit/icons");
-const utils_1 = require("@snack-uikit/utils");
-const constants_1 = require("../../constants");
-Object.defineProperty(exports, "APPEARANCE", {
-  enumerable: true,
-  get: function () {
-    return constants_1.APPEARANCE;
+const TagBase_1 = require("../TagBase");
+const TagLink_1 = require("../TagLink");
+function isTagLinkProps(props) {
+  return 'href' in props && props.href !== undefined;
+}
+function Tag(props) {
+  if (isTagLinkProps(props)) {
+    return (0, jsx_runtime_1.jsx)(TagLink_1.TagLink, Object.assign({}, props));
   }
-});
-const constants_2 = require("./constants");
-const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function Tag(_a) {
-  var {
-      label,
-      size = constants_1.SIZE.Xs,
-      appearance = constants_1.APPEARANCE.Neutral,
-      onDelete,
-      className,
-      tabIndex
-    } = _a,
-    rest = __rest(_a, ["label", "size", "appearance", "onDelete", "className", "tabIndex"]);
-  return (0, jsx_runtime_1.jsxs)("span", Object.assign({}, (0, utils_1.extractSupportProps)(rest), {
-    className: (0, classnames_1.default)(styles_module_scss_1.default.tag, className),
-    "data-size": size,
-    "data-appearance": appearance,
-    "data-removable": Boolean(onDelete),
-    children: [(0, jsx_runtime_1.jsx)("span", {
-      title: label,
-      className: styles_module_scss_1.default.label,
-      children: label
-    }), onDelete && (0, jsx_runtime_1.jsx)("button", {
-      type: 'button',
-      className: styles_module_scss_1.default.tagButton,
-      onClick: onDelete,
-      "data-test-id": 'tag-remove-button',
-      tabIndex: tabIndex,
-      children: size === constants_1.SIZE.Xs ? (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {
-        size: constants_2.ICON_SIZE[size],
-        className: styles_module_scss_1.default.icon
-      }) : (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {
-        size: constants_2.ICON_SIZE[size],
-        className: styles_module_scss_1.default.icon
-      })
-    })]
-  }));
+  return (0, jsx_runtime_1.jsx)(TagBase_1.TagBase, Object.assign({}, props));
 }

package/dist/cjs/components/TagBase/TagBase.d.ts

@@ -0,0 +1,8 @@
+import { MouseEventHandler } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { CommonTagProps } from '../../types';
+export type TagBaseProps = WithSupportProps<{
+    /** Коллбэк на удаление */
+    onDelete?: MouseEventHandler<HTMLButtonElement>;
+}> & CommonTagProps;
+export declare function TagBase({ label, size, appearance, onDelete, className, tabIndex, ...rest }: TagBaseProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/TagBase/TagBase.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TagBase = TagBase;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const icons_1 = require("@snack-uikit/icons");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const constants_2 = require("./constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function TagBase(_a) {
+  var {
+      label,
+      size = constants_1.SIZE.Xs,
+      appearance = constants_1.APPEARANCE.Neutral,
+      onDelete,
+      className,
+      tabIndex
+    } = _a,
+    rest = __rest(_a, ["label", "size", "appearance", "onDelete", "className", "tabIndex"]);
+  return (0, jsx_runtime_1.jsxs)("span", Object.assign({}, (0, utils_1.extractSupportProps)(rest), {
+    className: (0, classnames_1.default)(styles_module_scss_1.default.tag, className),
+    "data-size": size,
+    "data-appearance": appearance,
+    "data-removable": Boolean(onDelete),
+    children: [(0, jsx_runtime_1.jsx)("span", {
+      title: label,
+      className: styles_module_scss_1.default.label,
+      children: label
+    }), onDelete && (0, jsx_runtime_1.jsx)("button", {
+      type: 'button',
+      className: styles_module_scss_1.default.tagButton,
+      onClick: onDelete,
+      "data-test-id": 'tag-remove-button',
+      tabIndex: tabIndex,
+      children: size === constants_1.SIZE.Xs ? (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {
+        size: constants_2.ICON_SIZE[size],
+        className: styles_module_scss_1.default.icon
+      }) : (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {
+        size: constants_2.ICON_SIZE[size],
+        className: styles_module_scss_1.default.icon
+      })
+    })]
+  }));
+}

package/dist/cjs/components/TagBase/index.d.ts

@@ -0,0 +1 @@
+export * from './TagBase';

package/dist/cjs/components/TagBase/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./TagBase"), exports);

package/dist/cjs/components/TagLink/TagLink.d.ts

@@ -0,0 +1,9 @@
+import { MouseEvent } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { CommonTagProps } from '../../types';
+export type TagLinkProps = WithSupportProps<CommonTagProps> & {
+    href: string;
+    onClick?(e: MouseEvent<HTMLAnchorElement>): void;
+    target?: HTMLAnchorElement['target'];
+};
+export declare function TagLink({ label, size, appearance, className, tabIndex, href, onClick, target, ...rest }: TagLinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/TagLink/TagLink.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TagLink = TagLink;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function TagLink(_a) {
+  var {
+      label,
+      size = constants_1.SIZE.Xs,
+      appearance = constants_1.APPEARANCE.Neutral,
+      className,
+      tabIndex,
+      href,
+      onClick,
+      target
+    } = _a,
+    rest = __rest(_a, ["label", "size", "appearance", "className", "tabIndex", "href", "onClick", "target"]);
+  return (0, jsx_runtime_1.jsx)("a", Object.assign({}, (0, utils_1.extractSupportProps)(rest), {
+    className: (0, classnames_1.default)(styles_module_scss_1.default.tag, className),
+    "data-size": size,
+    "data-appearance": appearance,
+    tabIndex: tabIndex,
+    href: href,
+    target: target,
+    onClick: onClick,
+    children: (0, jsx_runtime_1.jsx)("span", {
+      title: label,
+      className: styles_module_scss_1.default.label,
+      children: label
+    })
+  }));
+}

package/dist/cjs/components/TagLink/index.d.ts

@@ -0,0 +1 @@
+export * from './TagLink';

package/dist/cjs/components/TagLink/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./TagLink"), exports);

package/dist/cjs/components/TagLink/styles.module.css

@@ -0,0 +1,206 @@
+.tag{
+  display:inline-flex;
+  align-items:center;
+  box-sizing:border-box;
+  max-width:100%;
+  text-decoration:none;
+}
+.tag:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
+}
+.tag:active{
+  outline:none;
+}
+.tag[data-size=xs]{
+  padding-left:var(--space-tag-xs-from-label, 8px);
+  padding-right:var(--space-tag-xs-from-label, 8px);
+  height:var(--size-tag-xs, 24px);
+  border-radius:var(--radius-tag-xs, 4px);
+}
+.tag[data-size=xs] .label{
+  font-family:var(--sans-label-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-s-font-weight, Semibold);
+  line-height:var(--sans-label-s-line-height, 14px);
+  font-size:var(--sans-label-s-font-size, 11px);
+  letter-spacing:var(--sans-label-s-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
+}
+.tag[data-size=s]{
+  padding-left:var(--space-tag-s-from-label, 16px);
+  padding-right:var(--space-tag-s-from-label, 16px);
+  height:var(--size-tag-s, 32px);
+  border-radius:var(--radius-tag-s, 8px);
+}
+.tag[data-size=s] .label{
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.tag[data-appearance=neutral]{
+  background-color:var(--sys-neutral-decor-default, #dde0ea);
+}
+.tag[data-appearance=neutral] .label{
+  overflow:hidden;
+  color:var(--sys-neutral-text-support, #6d707f);
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.tag[data-appearance=neutral]:focus, .tag[data-appearance=neutral]:hover, .tag[data-appearance=neutral]:active{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.tag[data-appearance=neutral]:focus, .tag[data-appearance=neutral]:hover{
+  background-color:var(--sys-neutral-decor-hovered, #cfd2dc);
+}
+.tag[data-appearance=neutral]:active{
+  background-color:var(--sys-neutral-decor-activated, #bec2cf);
+}
+.tag[data-appearance=primary]{
+  background-color:var(--sys-primary-decor-default, #ebdefd);
+}
+.tag[data-appearance=primary] .label{
+  overflow:hidden;
+  color:var(--sys-primary-text-support, #5b4796);
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.tag[data-appearance=primary]:focus, .tag[data-appearance=primary]:hover, .tag[data-appearance=primary]:active{
+  color:var(--sys-primary-text-main, #382a62);
+}
+.tag[data-appearance=primary]:focus, .tag[data-appearance=primary]:hover{
+  background-color:var(--sys-primary-decor-hovered, #decdfb);
+}
+.tag[data-appearance=primary]:active{
+  background-color:var(--sys-primary-decor-activated, #c5b2f1);
+}
+.tag[data-appearance=red]{
+  background-color:var(--sys-red-decor-default, #fdd6cd);
+}
+.tag[data-appearance=red] .label{
+  overflow:hidden;
+  color:var(--sys-red-text-support, #ae514c);
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.tag[data-appearance=red]:focus, .tag[data-appearance=red]:hover, .tag[data-appearance=red]:active{
+  color:var(--sys-red-text-main, #7a2d2d);
+}
+.tag[data-appearance=red]:focus, .tag[data-appearance=red]:hover{
+  background-color:var(--sys-red-decor-hovered, #fac1b3);
+}
+.tag[data-appearance=red]:active{
+  background-color:var(--sys-red-decor-activated, #fbab99);
+}
+.tag[data-appearance=orange]{
+  background-color:var(--sys-orange-decor-default, #fed8b8);
+}
+.tag[data-appearance=orange] .label{
+  overflow:hidden;
+  color:var(--sys-orange-text-support, #bb733e);
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.tag[data-appearance=orange]:focus, .tag[data-appearance=orange]:hover, .tag[data-appearance=orange]:active{
+  color:var(--sys-orange-text-main, #884c23);
+}
+.tag[data-appearance=orange]:focus, .tag[data-appearance=orange]:hover{
+  background-color:var(--sys-orange-decor-hovered, #f8c699);
+}
+.tag[data-appearance=orange]:active{
+  background-color:var(--sys-orange-decor-activated, #f5b27b);
+}
+.tag[data-appearance=yellow]{
+  background-color:var(--sys-yellow-decor-default, #f0dfb1);
+}
+.tag[data-appearance=yellow] .label{
+  overflow:hidden;
+  color:var(--sys-yellow-text-support, #b78c32);
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.tag[data-appearance=yellow]:focus, .tag[data-appearance=yellow]:hover, .tag[data-appearance=yellow]:active{
+  color:var(--sys-yellow-text-main, #815f19);
+}
+.tag[data-appearance=yellow]:focus, .tag[data-appearance=yellow]:hover{
+  background-color:var(--sys-yellow-decor-hovered, #ead49a);
+}
+.tag[data-appearance=yellow]:active{
+  background-color:var(--sys-yellow-decor-activated, #e6c878);
+}
+.tag[data-appearance=green]{
+  background-color:var(--sys-green-decor-default, #d2ead0);
+}
+.tag[data-appearance=green] .label{
+  overflow:hidden;
+  color:var(--sys-green-text-support, #55915a);
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.tag[data-appearance=green]:focus, .tag[data-appearance=green]:hover, .tag[data-appearance=green]:active{
+  color:var(--sys-green-text-main, #3d6035);
+}
+.tag[data-appearance=green]:focus, .tag[data-appearance=green]:hover{
+  background-color:var(--sys-green-decor-hovered, #c0e1ba);
+}
+.tag[data-appearance=green]:active{
+  background-color:var(--sys-green-decor-activated, #a8d1a2);
+}
+.tag[data-appearance=blue]{
+  background-color:var(--sys-blue-decor-default, #d6e2f4);
+}
+.tag[data-appearance=blue] .label{
+  overflow:hidden;
+  color:var(--sys-blue-text-support, #4877b0);
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.tag[data-appearance=blue]:focus, .tag[data-appearance=blue]:hover, .tag[data-appearance=blue]:active{
+  color:var(--sys-blue-text-main, #2b537e);
+}
+.tag[data-appearance=blue]:focus, .tag[data-appearance=blue]:hover{
+  background-color:var(--sys-blue-decor-hovered, #c5d9f6);
+}
+.tag[data-appearance=blue]:active{
+  background-color:var(--sys-blue-decor-activated, #aac4ea);
+}
+.tag[data-appearance=violet]{
+  background-color:var(--sys-violet-decor-default, #e6dcf3);
+}
+.tag[data-appearance=violet] .label{
+  overflow:hidden;
+  color:var(--sys-violet-text-support, #8c639b);
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.tag[data-appearance=violet]:focus, .tag[data-appearance=violet]:hover, .tag[data-appearance=violet]:active{
+  color:var(--sys-violet-text-main, #59446a);
+}
+.tag[data-appearance=violet]:focus, .tag[data-appearance=violet]:hover{
+  background-color:var(--sys-violet-decor-hovered, #e1d0f7);
+}
+.tag[data-appearance=violet]:active{
+  background-color:var(--sys-violet-decor-activated, #ceb7e7);
+}
+.tag[data-appearance=pink]{
+  background-color:var(--sys-pink-decor-default, #f5d9e1);
+}
+.tag[data-appearance=pink] .label{
+  overflow:hidden;
+  color:var(--sys-pink-text-support, #ae5e80);
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.tag[data-appearance=pink]:focus, .tag[data-appearance=pink]:hover, .tag[data-appearance=pink]:active{
+  color:var(--sys-pink-text-main, #754158);
+}
+.tag[data-appearance=pink]:focus, .tag[data-appearance=pink]:hover{
+  background-color:var(--sys-pink-decor-hovered, #f5c9d6);
+}
+.tag[data-appearance=pink]:active{
+  background-color:var(--sys-pink-decor-activated, #e8b1c1);
+}

package/dist/cjs/index.d.ts

@@ -1 +1,3 @@
 export * from './components';
+export * from './constants';
+export type { Appearance, Size, TagRowItem } from './types';

package/dist/cjs/index.js

@@ -22,4 +22,5 @@ var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-__exportStar(require("./components"), exports);
+__exportStar(require("./components"), exports);
+__exportStar(require("./constants"), exports);

package/dist/cjs/types.d.ts

@@ -1,12 +1,30 @@
+import { MouseEvent } from 'react';
 import { ValueOf } from '@snack-uikit/utils';
 import { APPEARANCE, SIZE } from './constants';
 export type Appearance = ValueOf<typeof APPEARANCE>;
 export type Size = ValueOf<typeof SIZE>;
+export type LinkProps = {
+    href: string;
+    onClick?(e: MouseEvent<HTMLAnchorElement>): void;
+    target?: HTMLAnchorElement['target'];
+};
 export type TagRowItem = {
     label: string;
     appearance?: Appearance;
-};
+} & Partial<LinkProps>;
 export type TagRowItemInner = {
     label: string;
     appearance: Appearance;
+} & Partial<LinkProps>;
+export type CommonTagProps = {
+    /** Текст */
+    label: string;
+    /** Размер */
+    size?: Size;
+    /** Внешний вид */
+    appearance?: Appearance;
+    /** CSS-класс */
+    className?: string;
+    /** tabIndex кнопки удаления */
+    tabIndex?: number;
 };

package/dist/esm/components/Tag/Tag.d.ts

@@ -1,20 +1,5 @@
-import { MouseEventHandler } from 'react';
-import { WithSupportProps } from '@snack-uikit/utils';
-import { APPEARANCE } from '../../constants';
-import { Appearance, Size } from '../../types';
-export type TagProps = WithSupportProps<{
-    /** Текст */
-    label: string;
-    /** Размер */
-    size?: Size;
-    /** Внешний вид */
-    appearance?: Appearance;
-    /** Коллбэк на удаление */
-    onDelete?: MouseEventHandler<HTMLButtonElement>;
-    /** CSS-класс */
-    className?: string;
-    /** tabIndex кнопки удаления */
-    tabIndex?: number;
-}>;
-export declare function Tag({ label, size, appearance, onDelete, className, tabIndex, ...rest }: TagProps): import("react/jsx-runtime").JSX.Element;
-export { APPEARANCE };
+import { TagBaseProps } from '../TagBase';
+import { TagLinkProps } from '../TagLink';
+export type TagProps = TagBaseProps | TagLinkProps;
+export declare function isTagLinkProps(props: TagProps): props is TagLinkProps;
+export declare function Tag(props: TagProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Tag/Tag.js

@@ -1,23 +1,12 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'classnames';
-import { CrossSVG } from '@snack-uikit/icons';
-import { extractSupportProps } from '@snack-uikit/utils';
-import { APPEARANCE, SIZE } from '../../constants';
-import { ICON_SIZE } from './constants';
-import styles from './styles.module.css';
-export function Tag(_a) {
-    var { label, size = SIZE.Xs, appearance = APPEARANCE.Neutral, onDelete, className, tabIndex } = _a, rest = __rest(_a, ["label", "size", "appearance", "onDelete", "className", "tabIndex"]);
-    return (_jsxs("span", Object.assign({}, extractSupportProps(rest), { className: cn(styles.tag, className), "data-size": size, "data-appearance": appearance, "data-removable": Boolean(onDelete), children: [_jsx("span", { title: label, className: styles.label, children: label }), onDelete && (_jsx("button", { type: 'button', className: styles.tagButton, onClick: onDelete, "data-test-id": 'tag-remove-button', tabIndex: tabIndex, children: size === SIZE.Xs ? (_jsx(CrossSVG, { size: ICON_SIZE[size], className: styles.icon })) : (_jsx(CrossSVG, { size: ICON_SIZE[size], className: styles.icon })) }))] })));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TagBase } from '../TagBase';
+import { TagLink } from '../TagLink';
+export function isTagLinkProps(props) {
+    return 'href' in props && props.href !== undefined;
+}
+export function Tag(props) {
+    if (isTagLinkProps(props)) {
+        return _jsx(TagLink, Object.assign({}, props));
+    }
+    return _jsx(TagBase, Object.assign({}, props));
 }
-export { APPEARANCE };

package/dist/esm/components/TagBase/TagBase.d.ts

@@ -0,0 +1,8 @@
+import { MouseEventHandler } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { CommonTagProps } from '../../types';
+export type TagBaseProps = WithSupportProps<{
+    /** Коллбэк на удаление */
+    onDelete?: MouseEventHandler<HTMLButtonElement>;
+}> & CommonTagProps;
+export declare function TagBase({ label, size, appearance, onDelete, className, tabIndex, ...rest }: TagBaseProps): import("react/jsx-runtime").JSX.Element;