@sima-land/ui-nucleons 45.0.0-alpha.2 → 45.0.0-alpha.21

package/carousel/types.d.ts

@@ -0,0 +1,51 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { ArrowButtonProps } from '../arrow-button';
+export interface CarouselState {
+    currentOffset: number;
+    isAllItemsVisible: boolean;
+}
+export interface CarouselControlData {
+    canUse: boolean;
+    onUse: () => void;
+    type: 'forward' | 'backward';
+    vertical?: boolean;
+}
+export interface CarouselProps {
+    /** Список элементов. */
+    items?: any[];
+    /** На сколько элементов прокручивать за раз. */
+    step?: number;
+    /** Можно ли перетаскивать мышью. */
+    draggable?: boolean | 'auto';
+    /** Активирует бесконечную прокрутку. */
+    infinite?: boolean;
+    /** Вертикальный режим. */
+    vertical?: boolean;
+    /** Включена ли автоматическая прокрутка. */
+    autoplay?: boolean;
+    /** Таймаут автоматической прокрутки. */
+    autoplayTimeout?: number;
+    /** Нужно ли останавливать авто-прокрутку при наведении мыши. */
+    autoplayHoverPause?: boolean;
+    /** Показывать ли кнопки. */
+    withControls?: boolean | 'auto';
+    /** Индекс элемента к которому нужно прокрутиться. */
+    targetIndex?: number;
+    /** Сработает при монтировании. */
+    onReady?: (currentIndex: number) => void;
+    /** Вернет содержимое элемента. */
+    renderItem?: (item: any, index: number) => ReactNode;
+    /** Вернет содержимое кнопки. */
+    renderControl?: (data: CarouselControlData, props?: ArrowButtonProps) => ReactNode;
+    /** Сработает при смене индекса текущего элемента. */
+    onChangeTargetIndex?: (newIndex: number) => void;
+    /** Свойства контейнера. */
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+    /** Свойства элемента, формирующего viewport карусели. */
+    viewportElementProps?: HTMLAttributes<HTMLDivElement>;
+    /** Свойства кнопок. */
+    controlProps?: ArrowButtonProps;
+}
+export interface ElementPredicate {
+    (sibling: Element): boolean;
+}

package/carousel/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/carousel/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/carousel/types.ts"],"names":[],"mappings":""}

package/checkbox/checkbox.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Чекбокс - элемент для управления параметром с двумя состояниями - включено и отключено.
+ */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<import("../types").CheckboxInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/checkbox/checkbox.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const bind_1 = __importDefault(require("classnames/bind"));
+const checkbox_m_scss_1 = __importDefault(require("./checkbox.m.scss"));
+const cx = bind_1.default.bind(checkbox_m_scss_1.default);
+/**
+ * Чекбокс - элемент для управления параметром с двумя состояниями - включено и отключено.
+ */
+exports.Checkbox = (0, react_1.forwardRef)(({ className, style, 'data-testid': testId = 'checkbox', 
+// input props
+...restProps }, ref) => ((0, jsx_runtime_1.jsxs)("span", { className: cx('root', className), style: style, children: [(0, jsx_runtime_1.jsx)("input", { ...restProps, "data-testid": testId, ref: ref, type: 'checkbox', className: cx('input') }), (0, jsx_runtime_1.jsxs)("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', children: [(0, jsx_runtime_1.jsx)("rect", { x: '0.5', y: '0.5', width: '15', height: '15', rx: '1.5', className: cx('square') }), (0, jsx_runtime_1.jsx)("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M10.8 5.21967L6.4 9.18934L5.36569 8.21967C5.05327 7.92678 4.54673 7.92678 4.23431 8.21967C3.9219 8.51256 3.9219 8.98744 4.23431 9.28033L5.83431 10.7803C6.14673 11.0732 6.65327 11.0732 6.96569 10.7803L11.7657 6.28033C12.0781 5.98744 12.0781 5.51256 11.7657 5.21967C11.4533 4.92678 11.1124 4.92678 10.8 5.21967Z', fill: 'white', className: cx('mark') })] })] })));
+exports.Checkbox.displayName = 'Checkbox';
+//# sourceMappingURL=checkbox.js.map

package/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/checkbox/checkbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAmC;AAEnC,2DAAyC;AACzC,wEAAuC;AAEvC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,yBAAM,CAAC,CAAC;AAEnC;;GAEG;AACU,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAChC,CACE,EACE,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,GAAG,UAAU;AAElC,cAAc;AACd,GAAG,SAAS,EACb,EACD,GAAG,EACH,EAAE,CAAC,CACH,kCAAM,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,aAClD,qCACM,SAAS,iBACA,MAAM,EACnB,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,GACtB,EAEF,iCAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,aAEzD,iCAAM,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAI,EAGjF,iCACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,uTAAuT,EACzT,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GACrB,IACE,IACD,CACR,CACF,CAAC;AAEF,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/checkbox/index.d.ts

@@ -1,7 +1,2 @@
-import React from 'react';
-import { CheckboxInputProps } from '../types';
-export type CheckboxProps = CheckboxInputProps;
-/**
- * Компонент стилизованного переключателя (input[type=checkbox]).
- */
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxInputProps & React.RefAttributes<HTMLInputElement>>;
+export type { CheckboxProps } from './types';
+export { Checkbox } from './checkbox';

package/checkbox/index.js

@@ -1,58 +1,6 @@
 "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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
-const react_1 = __importStar(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const checkbox_module_scss_1 = __importDefault(require("./checkbox.module.scss"));
-const cx = bind_1.default.bind(checkbox_module_scss_1.default);
-/**
- * Компонент стилизованного переключателя (input[type=checkbox]).
- */
-exports.Checkbox = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, style, 'data-testid': testId = 'checkbox' } = _a, 
-    // input props
-    restProps = __rest(_a, ["className", "style", 'data-testid']);
-    return (react_1.default.createElement("span", { className: cx('root', className), style: style },
-        react_1.default.createElement("input", Object.assign({}, restProps, { "data-testid": testId, ref: ref, type: 'checkbox', className: cx('input') })),
-        react_1.default.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none' },
-            react_1.default.createElement("rect", { x: '0.5', y: '0.5', width: '15', height: '15', rx: '1.5', className: cx('square') }),
-            react_1.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M10.8 5.21967L6.4 9.18934L5.36569 8.21967C5.05327 7.92678 4.54673 7.92678 4.23431 8.21967C3.9219 8.51256 3.9219 8.98744 4.23431 9.28033L5.83431 10.7803C6.14673 11.0732 6.65327 11.0732 6.96569 10.7803L11.7657 6.28033C12.0781 5.98744 12.0781 5.51256 11.7657 5.21967C11.4533 4.92678 11.1124 4.92678 10.8 5.21967Z', fill: 'white', className: cx('mark') }))));
-});
-exports.Checkbox.displayName = 'Checkbox';
+var checkbox_1 = require("./checkbox");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return checkbox_1.Checkbox; } });
+//# sourceMappingURL=index.js.map

package/checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/checkbox/index.ts"],"names":[],"mappings":";;;AACA,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA"}

package/checkbox/types.d.ts

@@ -0,0 +1,2 @@
+import type { CheckboxInputProps } from '../types';
+export type CheckboxProps = CheckboxInputProps;

package/checkbox/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/checkbox/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/checkbox/types.ts"],"names":[],"mappings":""}

package/chip/chip-util.scss

@@ -0,0 +1,53 @@
+@use '../colors';
+
+@mixin colors-light {
+  // default
+  --chip-background: #{colors.$basic-gray8};
+  --chip-color: #{colors.$basic-gray87};
+  --chip-hover-background: #{colors.$basic-gray4};
+  --chip-hover-color: #{colors.$basic-gray76};
+
+  // disabled
+  --chip-disabled-background: #{colors.$basic-gray8};
+  --chip-disabled-color: #{colors.$basic-gray38};
+  --chip-disabled-hover-background: #{colors.$basic-gray8};
+  --chip-disabled-hover-color: #{colors.$basic-gray38};
+
+  // checked
+  --chip-checked-background: #{colors.$basic-gray87};
+  --chip-checked-color: #{colors.$basic-white};
+  --chip-checked-hover-background: #{colors.$basic-gray76};
+  --chip-checked-hover-color: #{colors.$basic-gray8};
+
+  // checked + disabled
+  --chip-checked-disabled-background: #{colors.$basic-gray87};
+  --chip-checked-disabled-color: #{colors.$basic-gray38};
+  --chip-checked-disabled-hover-background: #{colors.$basic-gray87};
+  --chip-checked-disabled-hover-color: #{colors.$basic-gray38};
+}
+
+@mixin colors-dark {
+  // default
+  --chip-background: #{colors.$basic-gray76};
+  --chip-color: #{colors.$basic-white};
+  --chip-hover-background: #{colors.$basic-gray66};
+  --chip-hover-color: #{colors.$basic-gray8};
+
+  // disabled
+  --chip-disabled-background: #{colors.$basic-gray76};
+  --chip-disabled-color: #{colors.$basic-gray38};
+  --chip-disabled-hover-background: #{colors.$basic-gray76};
+  --chip-disabled-hover-color: #{colors.$basic-gray38};
+
+  // checked
+  --chip-checked-background: #{colors.$basic-white};
+  --chip-checked-color: #{colors.$basic-gray87};
+  --chip-checked-hover-background: #{colors.$basic-gray4};
+  --chip-checked-hover-color: #{colors.$basic-gray76};
+
+  // checked + disabled
+  --chip-checked-disabled-background: #{colors.$basic-white};
+  --chip-checked-disabled-color: #{colors.$basic-gray38};
+  --chip-checked-disabled-hover-background: #{colors.$basic-white};
+  --chip-checked-disabled-hover-color: #{colors.$basic-gray38};
+}

package/chip/chip.d.ts

@@ -0,0 +1,14 @@
+import { ButtonHTMLAttributes } from 'react';
+import { ChipProps } from './types';
+/**
+ * Чип - компактный элемент для вывода атрибутов или опций.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Chip(props: ChipProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Кнопка в чипе.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function ChipIconButton({ children, className, ...restProps }: ButtonHTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;

package/chip/chip.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chip = Chip;
+exports.ChipIconButton = ChipIconButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const bind_1 = __importDefault(require("classnames/bind"));
+const chip_m_scss_1 = __importDefault(require("./chip.m.scss"));
+const cx = bind_1.default.bind(chip_m_scss_1.default);
+/**
+ * Чип - компактный элемент для вывода атрибутов или опций.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Chip(props) {
+    const { checked, shape = 'square', colors = 'light', className, endAdornment, children, disabled, padding = 'x', adornmentGutter = 'default', 'data-testid': testId = 'chip', ...restProps } = props;
+    const rootClassName = cx('root', shape !== 'unset' && `shape-${shape}`, colors !== 'unset' && `colors-${colors}`, padding !== 'unset' && `padding-${padding}`, adornmentGutter !== 'unset' && `adornment-gutter-${adornmentGutter}`, checked && 'checked', disabled && 'disabled', className);
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: cx('section-main'), children: children }), endAdornment && (0, jsx_runtime_1.jsx)("span", { className: cx('section-end-adornment'), children: endAdornment })] }));
+    if (restProps.as === 'anchor') {
+        // @todo унифицировать поведение для disabled-ссылок в виде функции getDisabledAnchorProps()?
+        return ((0, jsx_runtime_1.jsx)("a", { className: rootClassName, ...restProps, "data-testid": testId, children: content }));
+    }
+    if (restProps.as === 'button') {
+        return ((0, jsx_runtime_1.jsx)("button", { disabled: disabled, className: rootClassName, ...restProps, "data-testid": testId, children: content }));
+    }
+    return ((0, jsx_runtime_1.jsx)("span", { className: rootClassName, ...restProps, "data-testid": testId, children: content }));
+}
+/**
+ * Кнопка в чипе.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ChipIconButton({ children, className, ...restProps }) {
+    return ((0, jsx_runtime_1.jsx)("button", { className: cx('icon-button', className), ...restProps, children: children }));
+}
+//# sourceMappingURL=chip.js.map

package/chip/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../src/chip/chip.tsx"],"names":[],"mappings":";;;;;AAYA,oBAuDC;AAOD,wCAUC;;AAlFD,2DAAyC;AACzC,gEAAmC;AAEnC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,qBAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,IAAI,CAAC,KAAgB;IACnC,MAAM,EACJ,OAAO,EACP,KAAK,GAAG,QAAQ,EAChB,MAAM,GAAG,OAAO,EAChB,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,GAAG,EACb,eAAe,GAAG,SAAS,EAC3B,aAAa,EAAE,MAAM,GAAG,MAAM,EAC9B,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,EAAE,CACtB,MAAM,EACN,KAAK,KAAK,OAAO,IAAI,SAAS,KAAK,EAAE,EACrC,MAAM,KAAK,OAAO,IAAI,UAAU,MAAM,EAAE,EACxC,OAAO,KAAK,OAAO,IAAI,WAAW,OAAO,EAAE,EAC3C,eAAe,KAAK,OAAO,IAAI,oBAAoB,eAAe,EAAE,EACpE,OAAO,IAAI,SAAS,EACpB,QAAQ,IAAI,UAAU,EACtB,SAAS,CACV,CAAC;IAEF,MAAM,OAAO,GAAG,CACd,6DACE,iCAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,YAAG,QAAQ,GAAQ,EACrD,YAAY,IAAI,iCAAM,SAAS,EAAE,EAAE,CAAC,uBAAuB,CAAC,YAAG,YAAY,GAAQ,IACnF,CACJ,CAAC;IAEF,IAAI,SAAS,CAAC,EAAE,KAAK,QAAQ,EAAE,CAAC;QAC9B,6FAA6F;QAC7F,OAAO,CACL,8BAAG,SAAS,EAAE,aAAa,KAAM,SAAS,iBAAe,MAAM,YAC5D,OAAO,GACN,CACL,CAAC;IACJ,CAAC;IAED,IAAI,SAAS,CAAC,EAAE,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,CACL,mCAAQ,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,KAAM,SAAS,iBAAe,MAAM,YACrF,OAAO,GACD,CACV,CAAC;IACJ,CAAC;IAED,OAAO,CACL,iCAAM,SAAS,EAAE,aAAa,KAAM,SAAS,iBAAe,MAAM,YAC/D,OAAO,GACH,CACR,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EAC4B;IACxC,OAAO,CACL,mCAAQ,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,KAAM,SAAS,YAC3D,QAAQ,GACF,CACV,CAAC;AACJ,CAAC"}

package/chip/chip.m.scss

@@ -0,0 +1,154 @@
+@use '../colors';
+@use '../utils';
+@use './chip-util';
+
+.root {
+  @include utils.reset-button;
+}
+
+.root {
+  flex-grow: 0;
+  flex-shrink: 0;
+  max-width: 100%;
+  display: flex;
+  align-items: center;
+  height: 32px;
+  box-sizing: border-box;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+  text-decoration: none;
+  padding: 0 12px;
+  background: var(--chip-background);
+  color: var(--chip-color);
+  &:focus-visible {
+    @include utils.focus-visible-style;
+  }
+
+  // ВАЖНО: переопределяем стили монолита для ссылок
+  &,
+  &:link,
+  &:visited {
+    background: var(--chip-background);
+    color: var(--chip-color);
+  }
+
+  // ВАЖНО: эффект при наведении определяем **после** переопределения стилей монолита
+  &:hover {
+    cursor: pointer;
+    background: var(--chip-hover-background);
+    color: var(--chip-hover-color);
+  }
+  &.disabled {
+    pointer-events: none;
+    user-select: none;
+    background: var(--chip-disabled-background);
+    color: var(--chip-disabled-color);
+  }
+  &.checked {
+    background: var(--chip-checked-background);
+    color: var(--chip-checked-color);
+  }
+  &.checked:hover {
+    background: var(--chip-checked-hover-background);
+    color: var(--chip-checked-hover-color);
+  }
+  &.checked.disabled {
+    background: var(--chip-checked-disabled-background);
+    color: var(--chip-checked-disabled-color);
+  }
+}
+
+.padding-x {
+  padding: 0 12px;
+}
+
+.padding-start {
+  padding: 0 0 0 12px;
+}
+
+.adornment-gutter-default {
+  --chip-adornment-gutter: 8px;
+}
+
+.colors-light {
+  @include chip-util.colors-light;
+}
+
+.colors-dark {
+  @include chip-util.colors-dark;
+}
+
+.shape-square {
+  border-radius: 4px;
+}
+
+.shape-pill {
+  border-radius: 999999px;
+}
+
+.section-main {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.section-end-adornment {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin-left: var(--chip-adornment-gutter);
+}
+
+.icon-button {
+  @include utils.reset-button;
+}
+
+.icon-button {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  margin-left: 4px;
+  padding-left: 4px;
+  padding-right: 12px;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  &:focus-visible {
+    @include utils.focus-visible-style;
+  }
+  &:not(:hover) {
+    color: var(--chip-color);
+  }
+  &:hover {
+    color: var(--chip-hover-color);
+  }
+}
+
+.disabled .icon-button {
+  &:not(:hover) {
+    color: var(--chip-disabled-color);
+  }
+  &:hover {
+    color: var(--chip-disabled-hover-color);
+  }
+}
+
+.checked .icon-button {
+  &:not(:hover) {
+    color: var(--chip-checked-color);
+  }
+  &:hover {
+    color: var(--chip-checked-hover-color);
+  }
+}
+
+.checked.disabled .icon-button {
+  &:not(:hover) {
+    color: var(--chip-checked-disabled-color);
+  }
+  &:hover {
+    color: var(--chip-checked-disabled-hover-color);
+  }
+}

package/chip/index.d.ts

@@ -0,0 +1,3 @@
+export type { ChipProps, ChipAs, ChipShape, ChipColors } from './types';
+export { Chip, ChipIconButton } from './chip';
+export { getDeletableChipProps } from './utils';

package/chip/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDeletableChipProps = exports.ChipIconButton = exports.Chip = void 0;
+var chip_1 = require("./chip");
+Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return chip_1.Chip; } });
+Object.defineProperty(exports, "ChipIconButton", { enumerable: true, get: function () { return chip_1.ChipIconButton; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getDeletableChipProps", { enumerable: true, get: function () { return utils_1.getDeletableChipProps; } });
+//# sourceMappingURL=index.js.map

package/chip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/chip/index.ts"],"names":[],"mappings":";;;AACA,+BAA8C;AAArC,4FAAA,IAAI,OAAA;AAAE,sGAAA,cAAc,OAAA;AAC7B,iCAAgD;AAAvC,8GAAA,qBAAqB,OAAA"}

package/chip/types.d.ts

@@ -0,0 +1,53 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import type { WithTestId } from '../types';
+export type ChipAs = 'span' | 'anchor' | 'button';
+export type ChipShape = 'square' | 'pill';
+export type ChipColors = 'light' | 'dark';
+export interface ChipStyle extends CSSProperties {
+    '--chip-adornment-gutter'?: string;
+    '--chip-background'?: string;
+    '--chip-color'?: string;
+    '--chip-hover-background'?: string;
+    '--chip-hover-color'?: string;
+    '--chip-disabled-background'?: string;
+    '--chip-disabled-color'?: string;
+    '--chip-disabled-hover-background'?: string;
+    '--chip-disabled-hover-color'?: string;
+    '--chip-checked-background'?: string;
+    '--chip-checked-color'?: string;
+    '--chip-checked-hover-background'?: string;
+    '--chip-checked-hover-color'?: string;
+    '--chip-checked-disabled-background'?: string;
+    '--chip-checked-disabled-color'?: string;
+    '--chip-checked-disabled-hover-background'?: string;
+    '--chip-checked-disabled-hover-color'?: string;
+}
+interface CommonProps<T extends ChipAs = ChipAs> extends WithTestId {
+    /** Какой элемент использовать в качестве корневого элемента. */
+    as?: T;
+    /** Выбран ли чип. */
+    checked?: boolean;
+    /** Отключен ли чип. */
+    disabled?: boolean;
+    /** Украшение в конце. */
+    endAdornment?: ReactNode;
+    /** Форма. */
+    shape?: ChipShape | 'unset';
+    /** Цвета. */
+    colors?: ChipColors | 'unset';
+    /** Внутренние отступы. */
+    padding?: 'x' | 'start' | 'unset';
+    /** Отступ от основного контента до украшений. */
+    adornmentGutter?: 'default' | 'unset';
+}
+type AsSpanProps = CommonProps & Omit<HTMLAttributes<HTMLDivElement>, keyof CommonProps> & {
+    as?: 'span';
+};
+type AsAnchorProps = CommonProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps> & {
+    as: 'anchor';
+};
+type AsButtonProps = CommonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps> & {
+    as: 'button';
+};
+export type ChipProps = AsSpanProps | AsAnchorProps | AsButtonProps;
+export {};

package/chip/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/chip/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/chip/types.ts"],"names":[],"mappings":""}

package/chip/utils.d.ts

@@ -0,0 +1,9 @@
+import type { ChipProps } from './types';
+/**
+ * Возвращает свойства для чипа, добавляющие ему кнопку удаления.
+ * @param options Опции.
+ * @return Свойства.
+ */
+export declare function getDeletableChipProps({ onDelete }?: {
+    onDelete?: VoidFunction;
+}): ChipProps;

package/chip/utils.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDeletableChipProps = getDeletableChipProps;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const chip_1 = require("./chip");
+const Cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Cross"));
+/**
+ * Возвращает свойства для чипа, добавляющие ему кнопку удаления.
+ * @param options Опции.
+ * @return Свойства.
+ */
+function getDeletableChipProps({ onDelete } = {}) {
+    return {
+        padding: 'start',
+        adornmentGutter: 'unset',
+        endAdornment: ((0, jsx_runtime_1.jsx)(chip_1.ChipIconButton, { type: 'button', onClick: onDelete, children: (0, jsx_runtime_1.jsx)(Cross_1.default, { fill: 'currentColor' }) })),
+    };
+}
+//# sourceMappingURL=utils.js.map

package/chip/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/chip/utils.tsx"],"names":[],"mappings":";;;;;AASA,sDAUC;;AAlBD,iCAAwC;AACxC,2FAAsE;AAEtE;;;;GAIG;AACH,SAAgB,qBAAqB,CAAC,EAAE,QAAQ,KAAkC,EAAE;IAClF,OAAO;QACL,OAAO,EAAE,OAAO;QAChB,eAAe,EAAE,OAAO;QACxB,YAAY,EAAE,CACZ,uBAAC,qBAAc,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,QAAQ,YAC7C,uBAAC,eAAQ,IAAC,IAAI,EAAC,cAAc,GAAG,GACjB,CAClB;KACF,CAAC;AACJ,CAAC"}

package/clean-buttons/clean-button.d.ts

@@ -0,0 +1,7 @@
+import type { CleanButtonProps } from './types';
+/**
+ * Прозрачная кнопка.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function CleanButton({ size: sizeProp, href, asLink, children, className, 'data-testid': testId, ...rest }: CleanButtonProps): import("react/jsx-runtime").JSX.Element;

package/clean-buttons/clean-button.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CleanButton = CleanButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const link_1 = require("../link");
+const utils_1 = require("./utils");
+const bind_1 = __importDefault(require("classnames/bind"));
+const clean_button_m_scss_1 = __importDefault(require("./clean-button.m.scss"));
+const cx = bind_1.default.bind(clean_button_m_scss_1.default);
+/**
+ * Прозрачная кнопка.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function CleanButton({ size: sizeProp, href, asLink = Boolean(href), children, className, 'data-testid': testId = 'clean-button', ...rest }) {
+    const context = (0, react_1.useContext)(utils_1.CleanButtonContext);
+    const size = sizeProp ?? context.size ?? 's';
+    return ((0, jsx_runtime_1.jsx)(link_1.Link, { ...rest, className: cx('button', `size-${size}`, className, context.className), pseudo: !asLink, href: href, "data-testid": testId, children: children }));
+}
+//# sourceMappingURL=clean-button.js.map

package/clean-buttons/clean-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clean-button.js","sourceRoot":"","sources":["../../src/clean-buttons/clean-button.tsx"],"names":[],"mappings":";;;;;AAcA,kCAwBC;;AArCD,iCAAmC;AACnC,kCAA+B;AAC/B,mCAA6C;AAC7C,2DAAyC;AACzC,gFAA2C;AAE3C,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,6BAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,WAAW,CAAC,EAC1B,IAAI,EAAE,QAAQ,EACd,IAAI,EACJ,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,aAAa,EAAE,MAAM,GAAG,cAAc,EACtC,GAAG,IAAI,EACU;IACjB,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,0BAAkB,CAAC,CAAC;IAE/C,MAAM,IAAI,GAAG,QAAQ,IAAI,OAAO,CAAC,IAAI,IAAI,GAAG,CAAC;IAE7C,OAAO,CACL,uBAAC,WAAI,OACC,IAAI,EACR,SAAS,EAAE,EAAE,CAAC,QAAQ,EAAE,QAAQ,IAAI,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,EACrE,MAAM,EAAE,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,iBACG,MAAM,YAElB,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC"}

package/clean-buttons/{clean-buttons.module.scss → clean-button.m.scss}

@@ -1,21 +1,5 @@
-@use '../colors';
 @use './clean-buttons-util';
 
-.group {
-  display: flex;
-  flex-wrap: nowrap;
-  overflow: hidden;
-  width: 100%;
-  .button {
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: 0;
-    + .button {
-      border-left: 1px solid colors.$basic-gray12;
-    }
-  }
-}
-
 .button {
   display: flex;
   align-items: center;

package/clean-buttons/clean-group.d.ts

@@ -0,0 +1,8 @@
+import type { CleanGroupProps } from './types';
+/**
+ * Группа прозрачных кнопок.
+ * @todo Добавить возможность задавать свойства корневому элементу.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function CleanGroup({ size: sizeFromProps, children }: CleanGroupProps): import("react/jsx-runtime").JSX.Element;