@cloud-ru/ds-promo-tag 1.0.0

package/dist/cjs/PromoTag/utils.d.ts

@@ -0,0 +1,6 @@
+import { ElementType, MouseEventHandler } from 'react';
+export declare function getSpreadProps({ Component, rest, onClick, }: {
+    Component: ElementType;
+    rest: Record<string, unknown>;
+    onClick?: MouseEventHandler<HTMLElement>;
+}): Record<string, unknown>;

package/dist/cjs/PromoTag/utils.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSpreadProps = getSpreadProps;
+const TARGET_BLANK = '_blank';
+function getSpreadProps({ Component, rest, onClick, }) {
+    if (Component === 'button') {
+        const { type = 'button', ...buttonRest } = rest;
+        return {
+            type,
+            ...buttonRest,
+            onClick,
+        };
+    }
+    if (Component === 'a') {
+        const { href, target, ...anchorRest } = rest;
+        return {
+            ...anchorRest,
+            href: href ?? '#',
+            target,
+            rel: target === TARGET_BLANK ? 'noopener noreferrer' : undefined,
+            onClick,
+        };
+    }
+    return {
+        ...rest,
+        onClick,
+    };
+}

package/dist/cjs/constants.d.ts

@@ -0,0 +1,26 @@
+import { TypographySize } from '@cloud-ru/ds-typography';
+import { Size } from './types';
+export declare const APPEARANCE: {
+    readonly Neutral: "neutral";
+    readonly Primary: "primary";
+    readonly Red: "red";
+    readonly Orange: "orange";
+    readonly Yellow: "yellow";
+    readonly Green: "green";
+    readonly Blue: "blue";
+    readonly Violet: "violet";
+    readonly Pink: "pink";
+};
+export declare const SIZE: {
+    readonly Xs: "xs";
+    readonly S: "s";
+    readonly M: "m";
+};
+export declare const ROLE_APPEARANCE: {
+    readonly Accent: "accent";
+    readonly Decor: "decor";
+};
+export declare const MAP_SIZE_TO_TYPOGRAPHY_SIZE: Record<Size, TypographySize>;
+export declare const TEST_IDS: {
+    readonly root: "promo-tag";
+};

package/dist/cjs/constants.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TEST_IDS = exports.MAP_SIZE_TO_TYPOGRAPHY_SIZE = exports.ROLE_APPEARANCE = exports.SIZE = exports.APPEARANCE = void 0;
+exports.APPEARANCE = {
+    Neutral: 'neutral',
+    Primary: 'primary',
+    Red: 'red',
+    Orange: 'orange',
+    Yellow: 'yellow',
+    Green: 'green',
+    Blue: 'blue',
+    Violet: 'violet',
+    Pink: 'pink',
+};
+exports.SIZE = {
+    Xs: 'xs',
+    S: 's',
+    M: 'm',
+};
+exports.ROLE_APPEARANCE = {
+    Accent: 'accent',
+    Decor: 'decor',
+};
+exports.MAP_SIZE_TO_TYPOGRAPHY_SIZE = {
+    [exports.SIZE.Xs]: 's',
+    [exports.SIZE.S]: 's',
+    [exports.SIZE.M]: 'm',
+};
+exports.TEST_IDS = {
+    root: 'promo-tag',
+};

package/dist/cjs/index.d.ts

@@ -0,0 +1,3 @@
+export * from './PromoTag';
+export * from './constants';
+export * from './types';

package/dist/cjs/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__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 = (this && this.__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("./PromoTag"), exports);
+__exportStar(require("./constants"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/cjs/style.css

@@ -0,0 +1,218 @@
+@charset "UTF-8";
+.stateLayer{
+  visibility:initial;
+}
+
+.container[data-size=xs]{
+  min-height:var(--sn-promoTag-anatomy-size-xs-container-minHeight, var(--sn-primitive-dimension-16, 16px));
+  padding:var(--sn-promoTag-anatomy-size-xs-container-padding, var(--sn-primitive-dimension-2, 2px));
+  min-width:var(--sn-promoTag-anatomy-size-xs-container-minWidth, var(--sn-primitive-dimension-16, 16px));
+  border-radius:var(--sn-promoTag-anatomy-size-xs-container-borderRadius, var(--sn-brand-anatomy-radius-promoTag-xs, var(--sn-primitive-dimension-2, 2px)));
+  padding-top:0;
+  padding-bottom:0;
+}
+.container[data-size=s]{
+  min-height:var(--sn-promoTag-anatomy-size-s-container-minHeight, var(--sn-primitive-dimension-24, 24px));
+  padding:var(--sn-promoTag-anatomy-size-s-container-padding, var(--sn-primitive-dimension-4, 4px));
+  border-radius:var(--sn-promoTag-anatomy-size-s-container-borderRadius, var(--sn-brand-anatomy-radius-promoTag-s, var(--sn-primitive-dimension-2, 2px)));
+  min-width:var(--sn-promoTag-anatomy-size-s-container-minWidth, var(--sn-primitive-dimension-24, 24px));
+  padding-top:0;
+  padding-bottom:0;
+}
+.container[data-size=m]{
+  padding:var(--sn-promoTag-anatomy-size-m-container-padding, var(--sn-primitive-dimension-4, 4px));
+  border-radius:var(--sn-promoTag-anatomy-size-m-container-borderRadius, var(--sn-brand-anatomy-radius-promoTag-m, var(--sn-primitive-dimension-2, 2px)));
+  min-height:var(--sn-promoTag-anatomy-size-m-container-minHeight, var(--sn-primitive-dimension-32, 32px));
+  min-width:var(--sn-promoTag-anatomy-size-m-container-minWidth, var(--sn-primitive-dimension-32, 32px));
+  padding-top:0;
+  padding-bottom:0;
+}
+.container{
+  cursor:default;
+  position:relative;
+  overflow:hidden;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  border-width:0;
+}
+.container[data-clickable] .stateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.container[data-clickable] .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.container[data-clickable] .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.container[data-clickable] .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.container[data-clickable] .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.container[data-clickable] .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.container[data-clickable] .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.container[data-clickable] .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.container[data-clickable] .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.container[data-clickable]{
+}
+.container[data-clickable][data-loading] .stateLayer[data-state=borderOnBackground], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.container[data-clickable][data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.container[data-clickable][data-loading] .stateLayer[data-state=activatedOnBackground], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.container[data-clickable][data-loading] .stateLayer[data-state=versionOnColor], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.container[data-clickable][data-loading] .stateLayer[data-state=emptyVersionOnColor], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.container[data-clickable][data-loading] .stateLayer[data-state=inversionOnColor], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.container[data-clickable][data-loading] .stateLayer[data-state=emptyInversionOnColor], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.container[data-clickable][data-loading] .stateLayer[data-state=emptyDarkOnAccent], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.container[data-clickable]{
+  cursor:pointer;
+  font:inherit;
+  color:inherit;
+  text-decoration:none;
+}
+.container[data-appearance=blue][data-role-appearance=accent]{
+  color:var(--sn-theme-color-blue-onAccent, var(--sn-primitive-color-blue-99, #fdfeff));
+  background-color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
+}
+.container[data-appearance=blue][data-role-appearance=decor]{
+  color:var(--sn-theme-color-blue-text, var(--sn-primitive-color-blue-45, #3b6fad));
+  background-color:var(--sn-theme-color-blue-decor, var(--sn-primitive-color-blue-80, #d6e2f4));
+}
+.container[data-appearance=green][data-role-appearance=accent]{
+  color:var(--sn-theme-color-green-onAccent, var(--sn-primitive-color-green-99, #fcfefa));
+  background-color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
+}
+.container[data-appearance=green][data-role-appearance=decor]{
+  color:var(--sn-theme-color-green-text, var(--sn-primitive-color-green-45, #438b4b));
+  background-color:var(--sn-theme-color-green-decor, var(--sn-primitive-color-green-80, #d2ead0));
+}
+.container[data-appearance=neutral][data-role-appearance=accent]{
+  color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
+  background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.container[data-appearance=neutral][data-role-appearance=decor]{
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.container[data-appearance=orange][data-role-appearance=accent]{
+  color:var(--sn-theme-color-orange-onAccent, var(--sn-primitive-color-orange-99, #fffcf4));
+  background-color:var(--sn-theme-color-orange-accent, var(--sn-primitive-color-orange-55, #f57e1f));
+}
+.container[data-appearance=orange][data-role-appearance=decor]{
+  color:var(--sn-theme-color-orange-text, var(--sn-primitive-color-orange-45, #c46917));
+  background-color:var(--sn-theme-color-orange-decor, var(--sn-primitive-color-orange-80, #fbdeb6));
+}
+.container[data-appearance=pink][data-role-appearance=accent]{
+  color:var(--sn-theme-color-pink-onAccent, var(--sn-primitive-color-pink-99, #fdfcfc));
+  background-color:var(--sn-theme-color-pink-accent, var(--sn-primitive-color-pink-55, #dd5a8e));
+}
+.container[data-appearance=pink][data-role-appearance=decor]{
+  color:var(--sn-theme-color-pink-text, var(--sn-primitive-color-pink-45, #a85278));
+  background-color:var(--sn-theme-color-pink-decor, var(--sn-primitive-color-pink-80, #f5d9e1));
+}
+.container[data-appearance=primary][data-role-appearance=accent]{
+  color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.container[data-appearance=primary][data-role-appearance=decor]{
+  color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
+  background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
+}
+.container[data-appearance=red][data-role-appearance=accent]{
+  color:var(--sn-theme-color-red-onAccent, var(--sn-primitive-color-red-99, #fffaf7));
+  background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+.container[data-appearance=red][data-role-appearance=decor]{
+  color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
+  background-color:var(--sn-theme-color-red-decor, var(--sn-primitive-color-red-80, #fdd6cd));
+}
+.container[data-appearance=violet][data-role-appearance=accent]{
+  color:var(--sn-theme-color-violet-onAccent, var(--sn-primitive-color-violet-99, #fdfdfd));
+  background-color:var(--sn-theme-color-violet-accent, var(--sn-primitive-color-violet-55, #b163cc));
+}
+.container[data-appearance=violet][data-role-appearance=decor]{
+  color:var(--sn-theme-color-violet-text, var(--sn-primitive-color-violet-45, #875699));
+  background-color:var(--sn-theme-color-violet-decor, var(--sn-primitive-color-violet-80, #e6dcf3));
+}
+.container[data-appearance=yellow][data-role-appearance=accent]{
+  color:var(--sn-theme-color-yellow-onAccent, var(--sn-primitive-color-yellow-25, #724c08));
+  background-color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
+}
+.container[data-appearance=yellow][data-role-appearance=decor]{
+  color:var(--sn-theme-color-yellow-text, var(--sn-primitive-color-yellow-45, #ab7a08));
+  background-color:var(--sn-theme-color-yellow-decor, var(--sn-primitive-color-yellow-80, #f0dfb1));
+}
+.container:focus-visible{
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+}
+
+.labelWrapper{
+  display:flex;
+  align-items:center;
+}
+[data-size=xs] .labelWrapper{
+  padding:0 var(--sn-promoTag-anatomy-size-xs-container-textWrapper-padding, var(--sn-primitive-dimension-2, 2px));
+}
+[data-size=s] .labelWrapper{
+  padding:0 var(--sn-promoTag-anatomy-size-s-container-textWrapper-padding, var(--sn-primitive-dimension-2, 2px));
+}
+[data-size=m] .labelWrapper{
+  padding:0 var(--sn-promoTag-anatomy-size-m-container-textWrapper-padding, var(--sn-primitive-dimension-4, 4px));
+}

package/dist/cjs/types.d.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { APPEARANCE, ROLE_APPEARANCE, SIZE } from './constants';
+export type Appearance = ValueOf<typeof APPEARANCE>;
+export type Size = ValueOf<typeof SIZE>;
+export type RoleAppearance = ValueOf<typeof ROLE_APPEARANCE>;

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/esm/PromoTag/PromoTag.d.ts

@@ -0,0 +1,3 @@
+import { ElementType, ReactElement } from 'react';
+import { PromoTagProps } from './types.js';
+export declare function PromoTag<T extends ElementType = 'button'>({ appearance, size, roleAppearance, className, label, beforeContent, afterContent, onClick, as, innerRef, ...rest }: PromoTagProps<T>): ReactElement | null;

package/dist/esm/PromoTag/PromoTag.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@cloud-ru/ds-typography';
+import { withInnerRefSupport } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { APPEARANCE, MAP_SIZE_TO_TYPOGRAPHY_SIZE, ROLE_APPEARANCE, SIZE } from '../constants.js';
+import styles from './styles.module.css';
+import { getSpreadProps } from './utils.js';
+export function PromoTag({ appearance = APPEARANCE.Primary, size = SIZE.S, roleAppearance = ROLE_APPEARANCE.Accent, className, label, beforeContent = null, afterContent = null, onClick, as, innerRef, ...rest }) {
+    const isInteractive = Boolean(onClick) || Boolean(as);
+    const Component = isInteractive ? (as ?? 'button') : 'div';
+    const spreadProps = isInteractive
+        ? getSpreadProps({ Component, rest: rest, onClick })
+        : rest;
+    return (_jsxs(Component, { ref: innerRef, className: cn(styles.container, className), "data-appearance": appearance, "data-role-appearance": roleAppearance, "data-size": size, "data-clickable": isInteractive || undefined, ...spreadProps, children: [isInteractive && _jsx("span", { className: styles.stateLayer, "aria-hidden": true, "data-state": 'emptyDarkOnAccent' }), beforeContent, Boolean(label) && (_jsx("span", { className: styles.labelWrapper, children: _jsx(Typography, { as: 'span', variant: 'label', size: MAP_SIZE_TO_TYPOGRAPHY_SIZE[size], children: label }) })), afterContent] }));
+}
+withInnerRefSupport(PromoTag);

package/dist/esm/PromoTag/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PromoTag.js';
+export * from './types.js';

package/dist/esm/PromoTag/index.js

@@ -0,0 +1,2 @@
+export * from './PromoTag.js';
+export * from './types.js';

package/dist/esm/PromoTag/styles.module.css

@@ -0,0 +1,218 @@
+@charset "UTF-8";
+.stateLayer{
+  visibility:initial;
+}
+
+.container[data-size=xs]{
+  min-height:var(--sn-promoTag-anatomy-size-xs-container-minHeight, var(--sn-primitive-dimension-16, 16px));
+  padding:var(--sn-promoTag-anatomy-size-xs-container-padding, var(--sn-primitive-dimension-2, 2px));
+  min-width:var(--sn-promoTag-anatomy-size-xs-container-minWidth, var(--sn-primitive-dimension-16, 16px));
+  border-radius:var(--sn-promoTag-anatomy-size-xs-container-borderRadius, var(--sn-brand-anatomy-radius-promoTag-xs, var(--sn-primitive-dimension-2, 2px)));
+  padding-top:0;
+  padding-bottom:0;
+}
+.container[data-size=s]{
+  min-height:var(--sn-promoTag-anatomy-size-s-container-minHeight, var(--sn-primitive-dimension-24, 24px));
+  padding:var(--sn-promoTag-anatomy-size-s-container-padding, var(--sn-primitive-dimension-4, 4px));
+  border-radius:var(--sn-promoTag-anatomy-size-s-container-borderRadius, var(--sn-brand-anatomy-radius-promoTag-s, var(--sn-primitive-dimension-2, 2px)));
+  min-width:var(--sn-promoTag-anatomy-size-s-container-minWidth, var(--sn-primitive-dimension-24, 24px));
+  padding-top:0;
+  padding-bottom:0;
+}
+.container[data-size=m]{
+  padding:var(--sn-promoTag-anatomy-size-m-container-padding, var(--sn-primitive-dimension-4, 4px));
+  border-radius:var(--sn-promoTag-anatomy-size-m-container-borderRadius, var(--sn-brand-anatomy-radius-promoTag-m, var(--sn-primitive-dimension-2, 2px)));
+  min-height:var(--sn-promoTag-anatomy-size-m-container-minHeight, var(--sn-primitive-dimension-32, 32px));
+  min-width:var(--sn-promoTag-anatomy-size-m-container-minWidth, var(--sn-primitive-dimension-32, 32px));
+  padding-top:0;
+  padding-bottom:0;
+}
+.container{
+  cursor:default;
+  position:relative;
+  overflow:hidden;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  border-width:0;
+}
+.container[data-clickable] .stateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.container[data-clickable] .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.container[data-clickable] .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.container[data-clickable] .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.container[data-clickable] .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.container[data-clickable] .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.container[data-clickable] .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.container[data-clickable] .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.container[data-clickable] .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.container[data-clickable]{
+}
+.container[data-clickable][data-loading] .stateLayer[data-state=borderOnBackground], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.container[data-clickable][data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.container[data-clickable][data-loading] .stateLayer[data-state=activatedOnBackground], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.container[data-clickable][data-loading] .stateLayer[data-state=versionOnColor], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.container[data-clickable][data-loading] .stateLayer[data-state=emptyVersionOnColor], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.container[data-clickable][data-loading] .stateLayer[data-state=inversionOnColor], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.container[data-clickable][data-loading] .stateLayer[data-state=emptyInversionOnColor], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.container[data-clickable][data-loading] .stateLayer[data-state=emptyDarkOnAccent], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.container[data-clickable]{
+  cursor:pointer;
+  font:inherit;
+  color:inherit;
+  text-decoration:none;
+}
+.container[data-appearance=blue][data-role-appearance=accent]{
+  color:var(--sn-theme-color-blue-onAccent, var(--sn-primitive-color-blue-99, #fdfeff));
+  background-color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
+}
+.container[data-appearance=blue][data-role-appearance=decor]{
+  color:var(--sn-theme-color-blue-text, var(--sn-primitive-color-blue-45, #3b6fad));
+  background-color:var(--sn-theme-color-blue-decor, var(--sn-primitive-color-blue-80, #d6e2f4));
+}
+.container[data-appearance=green][data-role-appearance=accent]{
+  color:var(--sn-theme-color-green-onAccent, var(--sn-primitive-color-green-99, #fcfefa));
+  background-color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
+}
+.container[data-appearance=green][data-role-appearance=decor]{
+  color:var(--sn-theme-color-green-text, var(--sn-primitive-color-green-45, #438b4b));
+  background-color:var(--sn-theme-color-green-decor, var(--sn-primitive-color-green-80, #d2ead0));
+}
+.container[data-appearance=neutral][data-role-appearance=accent]{
+  color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
+  background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.container[data-appearance=neutral][data-role-appearance=decor]{
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.container[data-appearance=orange][data-role-appearance=accent]{
+  color:var(--sn-theme-color-orange-onAccent, var(--sn-primitive-color-orange-99, #fffcf4));
+  background-color:var(--sn-theme-color-orange-accent, var(--sn-primitive-color-orange-55, #f57e1f));
+}
+.container[data-appearance=orange][data-role-appearance=decor]{
+  color:var(--sn-theme-color-orange-text, var(--sn-primitive-color-orange-45, #c46917));
+  background-color:var(--sn-theme-color-orange-decor, var(--sn-primitive-color-orange-80, #fbdeb6));
+}
+.container[data-appearance=pink][data-role-appearance=accent]{
+  color:var(--sn-theme-color-pink-onAccent, var(--sn-primitive-color-pink-99, #fdfcfc));
+  background-color:var(--sn-theme-color-pink-accent, var(--sn-primitive-color-pink-55, #dd5a8e));
+}
+.container[data-appearance=pink][data-role-appearance=decor]{
+  color:var(--sn-theme-color-pink-text, var(--sn-primitive-color-pink-45, #a85278));
+  background-color:var(--sn-theme-color-pink-decor, var(--sn-primitive-color-pink-80, #f5d9e1));
+}
+.container[data-appearance=primary][data-role-appearance=accent]{
+  color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.container[data-appearance=primary][data-role-appearance=decor]{
+  color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
+  background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
+}
+.container[data-appearance=red][data-role-appearance=accent]{
+  color:var(--sn-theme-color-red-onAccent, var(--sn-primitive-color-red-99, #fffaf7));
+  background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+.container[data-appearance=red][data-role-appearance=decor]{
+  color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
+  background-color:var(--sn-theme-color-red-decor, var(--sn-primitive-color-red-80, #fdd6cd));
+}
+.container[data-appearance=violet][data-role-appearance=accent]{
+  color:var(--sn-theme-color-violet-onAccent, var(--sn-primitive-color-violet-99, #fdfdfd));
+  background-color:var(--sn-theme-color-violet-accent, var(--sn-primitive-color-violet-55, #b163cc));
+}
+.container[data-appearance=violet][data-role-appearance=decor]{
+  color:var(--sn-theme-color-violet-text, var(--sn-primitive-color-violet-45, #875699));
+  background-color:var(--sn-theme-color-violet-decor, var(--sn-primitive-color-violet-80, #e6dcf3));
+}
+.container[data-appearance=yellow][data-role-appearance=accent]{
+  color:var(--sn-theme-color-yellow-onAccent, var(--sn-primitive-color-yellow-25, #724c08));
+  background-color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
+}
+.container[data-appearance=yellow][data-role-appearance=decor]{
+  color:var(--sn-theme-color-yellow-text, var(--sn-primitive-color-yellow-45, #ab7a08));
+  background-color:var(--sn-theme-color-yellow-decor, var(--sn-primitive-color-yellow-80, #f0dfb1));
+}
+.container:focus-visible{
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+}
+
+.labelWrapper{
+  display:flex;
+  align-items:center;
+}
+[data-size=xs] .labelWrapper{
+  padding:0 var(--sn-promoTag-anatomy-size-xs-container-textWrapper-padding, var(--sn-primitive-dimension-2, 2px));
+}
+[data-size=s] .labelWrapper{
+  padding:0 var(--sn-promoTag-anatomy-size-s-container-textWrapper-padding, var(--sn-primitive-dimension-2, 2px));
+}
+[data-size=m] .labelWrapper{
+  padding:0 var(--sn-promoTag-anatomy-size-m-container-textWrapper-padding, var(--sn-primitive-dimension-4, 4px));
+}

package/dist/esm/PromoTag/types.d.ts

@@ -0,0 +1,31 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, MouseEventHandler, ReactNode } from 'react';
+import { Appearance, RoleAppearance, Size } from '../types.js';
+export type PolymorphicRef<T extends ElementType> = ComponentPropsWithRef<T>['ref'];
+export type PromoTagOwnProps = {
+    /** Текст компонента */
+    label?: string;
+    /** Внешний вид */
+    appearance?: Appearance;
+    /** Роль, в которой применяется `appearance`: акцентная заливка или декоративная */
+    roleAppearance?: RoleAppearance;
+    /** CSS-класс */
+    className?: string;
+    /** Колбэк для обработки клика на тег */
+    onClick?: MouseEventHandler<HTMLElement>;
+    /** Контент перед текстом */
+    beforeContent?: ReactNode;
+    /** Контент после текста */
+    afterContent?: ReactNode;
+    /** Размер */
+    size?: Size;
+};
+export type PromoTagProps<T extends ElementType = 'button'> = WithSupportProps<PromoTagOwnProps & {
+    /** Элемент или компонент для рендера: 'button' | 'a' | Link из react-router-dom и т.п. */
+    as?: T;
+    /**
+     * Ref на реальный DOM-элемент/инстанс, который рендерится через `as`.
+     * Явный проп вместо forwardRef — как в Button и AiToolBadge.
+     */
+    innerRef?: PolymorphicRef<T>;
+} & Omit<ComponentPropsWithoutRef<T>, keyof PromoTagOwnProps | 'as' | 'ref' | 'innerRef'>>;

package/dist/esm/PromoTag/types.js

@@ -0,0 +1 @@
+export {};