@snack-uikit/tag 0.11.2 → 0.12.0

package/dist/esm/components/TagBase/TagBase.js

@@ -0,0 +1,22 @@
+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 TagBase(_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 })) }))] })));
+}

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

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

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

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

package/dist/esm/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/esm/components/TagLink/TagLink.js

@@ -0,0 +1,20 @@
+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 } from "react/jsx-runtime";
+import cn from 'classnames';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { APPEARANCE, SIZE } from '../../constants';
+import styles from './styles.module.css';
+export function TagLink(_a) {
+    var { label, size = SIZE.Xs, appearance = APPEARANCE.Neutral, className, tabIndex, href, onClick, target } = _a, rest = __rest(_a, ["label", "size", "appearance", "className", "tabIndex", "href", "onClick", "target"]);
+    return (_jsx("a", Object.assign({}, extractSupportProps(rest), { className: cn(styles.tag, className), "data-size": size, "data-appearance": appearance, tabIndex: tabIndex, href: href, target: target, onClick: onClick, children: _jsx("span", { title: label, className: styles.label, children: label }) })));
+}

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

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

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

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

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

@@ -0,0 +1,179 @@
+.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-color:var(--sys-available-complementary, #1c1c24);
+}
+.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-visible, .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-visible, .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-visible, .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-visible, .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-visible, .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-visible, .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-visible, .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-visible, .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-visible, .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/esm/index.d.ts

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

package/dist/esm/index.js

@@ -1 +1,2 @@
 export * from './components';
+export * from './constants';

package/dist/esm/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/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Tag",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -42,5 +42,5 @@
     "@snack-uikit/utils": "3.5.0",
     "classnames": "2.5.1"
   },
-  "gitHead": "b9670e68c6af5fdd5dfceeae29ef3af8c89e5e6b"
+  "gitHead": "ea6bfd43b9837c9b25ac94c96077fdfb2f6b5b9f"
 }

package/src/components/Tag/Tag.tsx

@@ -1,66 +1,16 @@
-import cn from 'classnames';
-import { MouseEventHandler } from 'react';
+import { TagBase, TagBaseProps } from '../TagBase';
+import { TagLink, TagLinkProps } from '../TagLink';
 
-import { CrossSVG } from '@snack-uikit/icons';
-import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+export type TagProps = TagBaseProps | TagLinkProps;
 
-import { APPEARANCE, SIZE } from '../../constants';
-import { Appearance, Size } from '../../types';
-import { ICON_SIZE } from './constants';
-import styles from './styles.module.scss';
+export function isTagLinkProps(props: TagProps): props is TagLinkProps {
+  return 'href' in props && props.href !== undefined;
+}
 
-export type TagProps = WithSupportProps<{
-  /** Текст */
-  label: string;
-  /** Размер */
-  size?: Size;
-  /** Внешний вид */
-  appearance?: Appearance;
-  /** Коллбэк на удаление */
-  onDelete?: MouseEventHandler<HTMLButtonElement>;
-  /** CSS-класс */
-  className?: string;
-  /** tabIndex кнопки удаления */
-  tabIndex?: number;
-}>;
+export function Tag(props: TagProps) {
+  if (isTagLinkProps(props)) {
+    return <TagLink {...props} />;
+  }
 
-export function Tag({
-  label,
-  size = SIZE.Xs,
-  appearance = APPEARANCE.Neutral,
-  onDelete,
-  className,
-  tabIndex,
-  ...rest
-}: TagProps) {
-  return (
-    <span
-      {...extractSupportProps(rest)}
-      className={cn(styles.tag, className)}
-      data-size={size}
-      data-appearance={appearance}
-      data-removable={Boolean(onDelete)}
-    >
-      <span title={label} className={styles.label}>
-        {label}
-      </span>
-      {onDelete && (
-        <button
-          type='button'
-          className={styles.tagButton}
-          onClick={onDelete}
-          data-test-id='tag-remove-button'
-          tabIndex={tabIndex}
-        >
-          {size === SIZE.Xs ? (
-            <CrossSVG size={ICON_SIZE[size]} className={styles.icon} />
-          ) : (
-            <CrossSVG size={ICON_SIZE[size]} className={styles.icon} />
-          )}
-        </button>
-      )}
-    </span>
-  );
+  return <TagBase {...props} />;
 }
-
-export { APPEARANCE };

package/src/components/TagBase/TagBase.tsx

@@ -0,0 +1,55 @@
+import cn from 'classnames';
+import { MouseEventHandler } from 'react';
+
+import { CrossSVG } from '@snack-uikit/icons';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { APPEARANCE, SIZE } from '../../constants';
+import { CommonTagProps } from '../../types';
+import { ICON_SIZE } from './constants';
+import styles from './styles.module.scss';
+
+export type TagBaseProps = WithSupportProps<{
+  /** Коллбэк на удаление */
+  onDelete?: MouseEventHandler<HTMLButtonElement>;
+}> &
+  CommonTagProps;
+
+export function TagBase({
+  label,
+  size = SIZE.Xs,
+  appearance = APPEARANCE.Neutral,
+  onDelete,
+  className,
+  tabIndex,
+  ...rest
+}: TagBaseProps) {
+  return (
+    <span
+      {...extractSupportProps(rest)}
+      className={cn(styles.tag, className)}
+      data-size={size}
+      data-appearance={appearance}
+      data-removable={Boolean(onDelete)}
+    >
+      <span title={label} className={styles.label}>
+        {label}
+      </span>
+      {onDelete && (
+        <button
+          type='button'
+          className={styles.tagButton}
+          onClick={onDelete}
+          data-test-id='tag-remove-button'
+          tabIndex={tabIndex}
+        >
+          {size === SIZE.Xs ? (
+            <CrossSVG size={ICON_SIZE[size]} className={styles.icon} />
+          ) : (
+            <CrossSVG size={ICON_SIZE[size]} className={styles.icon} />
+          )}
+        </button>
+      )}
+    </span>
+  );
+}

package/src/components/TagBase/index.ts

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

package/src/components/TagLink/TagLink.tsx

@@ -0,0 +1,43 @@
+import cn from 'classnames';
+import { MouseEvent } from 'react';
+
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { APPEARANCE, SIZE } from '../../constants';
+import { CommonTagProps } from '../../types';
+import styles from './styles.module.scss';
+
+export type TagLinkProps = WithSupportProps<CommonTagProps> & {
+  href: string;
+  onClick?(e: MouseEvent<HTMLAnchorElement>): void;
+  target?: HTMLAnchorElement['target'];
+};
+
+export function TagLink({
+  label,
+  size = SIZE.Xs,
+  appearance = APPEARANCE.Neutral,
+  className,
+  tabIndex,
+  href,
+  onClick,
+  target,
+  ...rest
+}: TagLinkProps) {
+  return (
+    <a
+      {...extractSupportProps(rest)}
+      className={cn(styles.tag, className)}
+      data-size={size}
+      data-appearance={appearance}
+      tabIndex={tabIndex}
+      href={href}
+      target={target}
+      onClick={onClick}
+    >
+      <span title={label} className={styles.label}>
+        {label}
+      </span>
+    </a>
+  );
+}

package/src/components/TagLink/index.ts

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

package/src/components/TagLink/styles.module.scss

@@ -0,0 +1,125 @@
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tag';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+$sizes: 'xs', 's';
+$label-typography: (
+  'xs': styles-tokens-tag.$sans-label-s,
+  's': styles-tokens-tag.$sans-label-m,
+);
+$appearances: (
+  'neutral': (
+    'container': styles-tokens-tag.$sys-neutral-decor-default,
+    'container-disabled': styles-tokens-tag.$sys-neutral-decor-disabled,
+    'label': styles-tokens-tag.$sys-neutral-text-support,
+    'hovered': styles-tokens-tag.$sys-neutral-decor-hovered,
+    'active': styles-tokens-tag.$sys-neutral-decor-activated,
+  ),
+  'primary': (
+    'container': styles-tokens-tag.$sys-primary-decor-default,
+    'container-disabled': styles-tokens-tag.$sys-primary-decor-disabled,
+    'label': styles-tokens-tag.$sys-primary-text-support,
+    'hovered': styles-tokens-tag.$sys-primary-decor-hovered,
+    'active': styles-tokens-tag.$sys-primary-decor-activated,
+  ),
+  'red': (
+    'container': styles-tokens-tag.$sys-red-decor-default,
+    'container-disabled': styles-tokens-tag.$sys-red-decor-disabled,
+    'label': styles-tokens-tag.$sys-red-text-support,
+    'hovered': styles-tokens-tag.$sys-red-decor-hovered,
+    'active': styles-tokens-tag.$sys-red-decor-activated,
+  ),
+  'orange': (
+    'container': styles-tokens-tag.$sys-orange-decor-default,
+    'container-disabled': styles-tokens-tag.$sys-orange-decor-disabled,
+    'label': styles-tokens-tag.$sys-orange-text-support,
+    'hovered': styles-tokens-tag.$sys-orange-decor-hovered,
+    'active': styles-tokens-tag.$sys-orange-decor-activated,
+  ),
+  'yellow': (
+    'container': styles-tokens-tag.$sys-yellow-decor-default,
+    'container-disabled': styles-tokens-tag.$sys-yellow-decor-disabled,
+    'label': styles-tokens-tag.$sys-yellow-text-support,
+    'hovered': styles-tokens-tag.$sys-yellow-decor-hovered,
+    'active': styles-tokens-tag.$sys-yellow-decor-activated,
+  ),
+  'green': (
+    'container': styles-tokens-tag.$sys-green-decor-default,
+    'container-disabled': styles-tokens-tag.$sys-green-decor-disabled,
+    'label': styles-tokens-tag.$sys-green-text-support,
+    'hovered': styles-tokens-tag.$sys-green-decor-hovered,
+    'active': styles-tokens-tag.$sys-green-decor-activated,
+  ),
+  'blue': (
+    'container': styles-tokens-tag.$sys-blue-decor-default,
+    'container-disabled': styles-tokens-tag.$sys-blue-decor-disabled,
+    'label': styles-tokens-tag.$sys-blue-text-support,
+    'hovered': styles-tokens-tag.$sys-blue-decor-hovered,
+    'active': styles-tokens-tag.$sys-blue-decor-activated,
+  ),
+  'violet': (
+    'container': styles-tokens-tag.$sys-violet-decor-default,
+    'container-disabled': styles-tokens-tag.$sys-violet-decor-disabled,
+    'label': styles-tokens-tag.$sys-violet-text-support,
+    'hovered': styles-tokens-tag.$sys-violet-decor-hovered,
+    'active': styles-tokens-tag.$sys-violet-decor-activated,
+  ),
+  'pink': (
+    'container': styles-tokens-tag.$sys-pink-decor-default,
+    'container-disabled': styles-tokens-tag.$sys-pink-decor-disabled,
+    'label': styles-tokens-tag.$sys-pink-text-support,
+    'hovered': styles-tokens-tag.$sys-pink-decor-hovered,
+    'active': styles-tokens-tag.$sys-pink-decor-activated,
+  ),
+);
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+
+  box-sizing: border-box;
+  max-width: 100%;
+
+  text-decoration: none;
+
+  &:focus-visible {
+    @include styles-tokens-tag.outline-var(styles-tokens-element.$container-focused-s);
+
+    outline-color: styles-tokens-element.$sys-available-complementary;
+  }
+
+  &:active {
+    outline: none;
+  }
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include styles-tokens-tag.composite-var(styles-tokens-tag.$tag, 'container', $size, 'label-only');
+
+      .label {
+        @include styles-tokens-tag.composite-var($label-typography, $size);
+      }
+    }
+  }
+
+  @each $appearanceKey, $appearance in $appearances {
+    &[data-appearance='#{$appearanceKey}'] {
+      background-color: styles-tokens-tag.simple-var($appearance, 'container');
+
+      .label {
+        overflow: hidden;
+        color: styles-tokens-tag.simple-var($appearance, 'label');
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &:focus-visible,
+      &:hover {
+        background-color: styles-tokens-tag.simple-var($appearance, 'hovered');
+      }
+
+      &:active {
+        background-color: styles-tokens-tag.simple-var($appearance, 'active');
+      }
+    }
+  }
+}

package/src/index.ts

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

package/src/types.ts

@@ -1,3 +1,5 @@
+import { MouseEvent } from 'react';
+
 import { ValueOf } from '@snack-uikit/utils';
 
 import { APPEARANCE, SIZE } from './constants';
@@ -6,12 +8,31 @@ 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;
 };