@sima-land/ui-nucleons 45.0.0-alpha.7 → 45.0.0-alpha.71

package/dist/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/dist/carousel/types.js.map

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

package/dist/checkbox/checkbox.d.ts

@@ -0,0 +1 @@
+export declare const Checkbox: import("react").ForwardRefExoticComponent<import("../types").CheckboxInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/checkbox/checkbox.js

@@ -0,0 +1,56 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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 classnames_1 = __importDefault(require("classnames"));
+const styles = __importStar(require("./checkbox.module.scss"));
+/**
+ * Чекбокс - элемент для управления параметром с двумя состояниями - включено и отключено.
+ * @param props Свойства.
+ * @param ref Реф инпута.
+ * @return Элемент.
+ */
+const PureCheckbox = ({ className, style, 'data-testid': testId = 'checkbox', 
+// состояние с ошибкой не является валидным HTML-атрибутом, поэтому в DOM его не пробрасываем
+failed, 
+// input props
+...restProps }, ref) => ((0, jsx_runtime_1.jsxs)("span", { className: (0, classnames_1.default)(styles.root, className), style: style, children: [(0, jsx_runtime_1.jsx)("input", { ...restProps, "aria-invalid": failed, "data-testid": testId, ref: ref, type: 'checkbox', className: styles.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: styles.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: styles.mark })] })] }));
+exports.Checkbox = (0, react_1.forwardRef)(PureCheckbox);
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/checkbox/checkbox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAA6C;AAE7C,4DAA4B;AAC5B,+DAAiD;AAEjD;;;;;GAKG;AACH,MAAM,YAAY,GAAG,CACnB,EACE,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,GAAG,UAAU;AAElC,6FAA6F;AAC7F,MAAM;AAEN,cAAc;AACd,GAAG,SAAS,EACE,EAChB,GAA0B,EAC1B,EAAE,CAAC,CACH,kCAAM,SAAS,EAAE,IAAA,oBAAE,EAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,aACvD,qCACM,SAAS,kBACC,MAAM,iBACP,MAAM,EACnB,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,MAAM,CAAC,KAAK,GACvB,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,MAAM,CAAC,MAAM,GAAI,EAGlF,iCACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,uTAAuT,EACzT,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,MAAM,CAAC,IAAI,GACtB,IACE,IACD,CACR,CAAC;AAEW,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAAC,YAAY,CAAC,CAAC"}

package/dist/checkbox/checkbox.module.scss

@@ -0,0 +1,46 @@
+@use '../colors';
+
+.root {
+  position: relative;
+  display: inline-block;
+  vertical-align: -0.125em; // не понятно почему, но это значение ставит блок ровно по середине строки
+  width: 16px;
+  height: 16px;
+  svg {
+    display: block;
+  }
+}
+
+.input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  &:not(:checked) + svg .mark {
+    display: none;
+  }
+  &:not(:checked) + svg .square {
+    fill: #fff;
+    stroke: colors.$basic-gray24;
+  }
+  &:checked + svg .square {
+    fill: colors.$basic-blue;
+    stroke: colors.$basic-blue;
+  }
+  &:disabled:not(:checked) + svg .square {
+    fill: colors.$basic-gray4;
+    stroke: colors.$basic-gray24;
+  }
+  &:disabled:checked + svg .square {
+    fill: colors.$basic-gray12;
+    stroke: colors.$basic-gray12;
+  }
+  &:disabled {
+    cursor: default;
+  }
+}

package/dist/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export type { CheckboxProps } from './types';
+export { Checkbox } from './checkbox';

package/dist/checkbox/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+var checkbox_1 = require("./checkbox");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return checkbox_1.Checkbox; } });
+//# sourceMappingURL=index.js.map

package/dist/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/dist/checkbox/types.d.ts

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

package/dist/checkbox/types.js.map

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

package/dist/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/dist/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.Element;
+/**
+ * Кнопка в чипе.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function ChipIconButton({ children, className, ...restProps }: ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;

package/dist/chip/chip.js

@@ -0,0 +1,70 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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 classnames_1 = __importDefault(require("classnames"));
+const styles = __importStar(require("./chip.module.scss"));
+/**
+ * Чип - компактный элемент для вывода атрибутов или опций.
+ * @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 = (0, classnames_1.default)(styles.root, shape !== 'unset' && styles[`shape-${shape}`], colors !== 'unset' && styles[`colors-${colors}`], padding !== 'unset' && styles[`padding-${padding}`], adornmentGutter !== 'unset' && styles[`adornment-gutter-${adornmentGutter}`], checked && styles.checked, disabled && styles.disabled, className);
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: styles['section-main'], children: children }), endAdornment && (0, jsx_runtime_1.jsx)("span", { className: styles['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: (0, classnames_1.default)(styles['icon-button'], className), ...restProps, children: children }));
+}
+//# sourceMappingURL=chip.js.map

package/dist/chip/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../src/chip/chip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,oBAuDC;AAOD,wCAUC;;AAhFD,4DAA4B;AAC5B,2DAA6C;AAE7C;;;;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,IAAA,oBAAE,EACtB,MAAM,CAAC,IAAI,EACX,KAAK,KAAK,OAAO,IAAI,MAAM,CAAC,SAAS,KAAK,EAAE,CAAC,EAC7C,MAAM,KAAK,OAAO,IAAI,MAAM,CAAC,UAAU,MAAM,EAAE,CAAC,EAChD,OAAO,KAAK,OAAO,IAAI,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,EACnD,eAAe,KAAK,OAAO,IAAI,MAAM,CAAC,oBAAoB,eAAe,EAAE,CAAC,EAC5E,OAAO,IAAI,MAAM,CAAC,OAAO,EACzB,QAAQ,IAAI,MAAM,CAAC,QAAQ,EAC3B,SAAS,CACV,CAAC;IAEF,MAAM,OAAO,GAAG,CACd,6DACE,iCAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,YAAG,QAAQ,GAAQ,EACzD,YAAY,IAAI,iCAAM,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,YAAG,YAAY,GAAQ,IACvF,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,IAAA,oBAAE,EAAC,MAAM,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC,KAAM,SAAS,YACnE,QAAQ,GACF,CACV,CAAC;AACJ,CAAC"}

package/dist/chip/chip.module.scss

@@ -0,0 +1,157 @@
+@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);
+  transition:
+    background 100ms ease-in,
+    color 100ms ease-in;
+  &: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/dist/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/dist/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/dist/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/dist/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/dist/chip/types.js.map

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

package/dist/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/dist/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/dist/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/dist/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.Element;