@sima-land/ui-nucleons 45.0.0-alpha.5 → 45.0.0-alpha.51

package/dist/expandable/utils.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineLastVisible = defineLastVisible;
+exports.observeWidth = observeWidth;
+exports.useObserveWidth = useObserveWidth;
+const react_1 = require("react");
+/**
+ * Определяет последний дочерний элемент который должен быть виден чтобы влезла "открывашка".
+ * @param payload Данные.
+ * @return Результат.
+ *
+ * ВАЖНО: lastVisibleIndex: -1 означает что все элементы видны и "открывашка" не нужна.
+ */
+function defineLastVisible({ outer, inner, gap, opener, openerWidth, }) {
+    const items = [...inner.children].filter(el => el !== opener);
+    // если список пуст или состоит из одного элемента - видны все, открывашка не нужна
+    if (items.length <= 1) {
+        return { lastVisibleIndex: -1 };
+    }
+    const bounds = outer.getBoundingClientRect();
+    // индекс последнего элемента который должен быть виден
+    let lastVisibleIndex = items.length - 1;
+    while (items[lastVisibleIndex] &&
+        items[lastVisibleIndex].getBoundingClientRect().bottom > bounds.bottom) {
+        lastVisibleIndex--;
+    }
+    const last = items[items.length - 1];
+    // если последний видимый является последним в списке - видны все, открывашка не нужна
+    if (last === items[lastVisibleIndex]) {
+        return { lastVisibleIndex: -1 };
+    }
+    while (lastVisibleIndex >= 1 &&
+        items[lastVisibleIndex] &&
+        bounds.right - items[lastVisibleIndex].getBoundingClientRect().right < openerWidth + gap) {
+        lastVisibleIndex--;
+    }
+    // @todo он не должен быть первым на строке
+    return { lastVisibleIndex };
+}
+/**
+ * Регистрирует обработчик изменения ширины элемента.
+ * @param element Элемент.
+ * @param callback Callback.
+ * @return Функция отписки.
+ */
+function observeWidth(element, callback) {
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    const getWidth = () => element.getBoundingClientRect().width;
+    let lastWidth = getWidth();
+    // ВАЖНО: поскольку ниже используется requestAnimationFrame проверяем активность через флаг
+    // в противном случае в React setState может быть вызван после размонтирования
+    let enabled = true;
+    // @todo использовать контекст
+    const observer = new ResizeObserver(() => {
+        requestAnimationFrame(() => {
+            if (!enabled) {
+                return;
+            }
+            const actualWidth = getWidth();
+            if (lastWidth !== actualWidth) {
+                lastWidth = actualWidth;
+                callback(lastWidth);
+            }
+        });
+    });
+    observer.observe(element);
+    return () => {
+        enabled = false;
+        observer.disconnect();
+    };
+}
+/**
+ * Хук для регистрации обработчика изменения ширины элемента.
+ * @param ref Ref элемента.
+ * @param callback Callback.
+ */
+function useObserveWidth(ref, callback) {
+    const callbackRef = (0, react_1.useRef)(callback);
+    callbackRef.current = callback;
+    (0, react_1.useEffect)(() => {
+        if (!ref.current) {
+            return;
+        }
+        return observeWidth(ref.current, () => callbackRef.current());
+    }, [ref]);
+}
+//# sourceMappingURL=utils.js.map

package/dist/expandable/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/expandable/utils.ts"],"names":[],"mappings":"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"}

package/dist/field-block/field-block.d.ts

@@ -0,0 +1,11 @@
+import type { FieldBlockProps, FieldBlockSize } from './types';
+export declare const FIELD_BLOCK_HEIGHT: Record<FieldBlockSize, number>;
+export declare const FIELD_BLOCK_DEFAULTS: {
+    readonly size: "l";
+};
+/**
+ * Блок поля по дизайн-гайдам.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function FieldBlock({ size, main, mainProps, disabled, failed, focused, label, labelProps, labelAsPlaceholder, fixedHeight, caption, rootRef, rootProps, blockRef, blockProps, adornmentStart, adornmentEnd, 'data-testid': testId, }: FieldBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/field-block/field-block.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FIELD_BLOCK_DEFAULTS = exports.FIELD_BLOCK_HEIGHT = void 0;
+exports.FieldBlock = FieldBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const bind_1 = __importDefault(require("classnames/bind"));
+const field_block_m_scss_1 = __importDefault(require("./field-block.m.scss"));
+const cx = bind_1.default.bind(field_block_m_scss_1.default);
+exports.FIELD_BLOCK_HEIGHT = {
+    s: 32,
+    m: 40,
+    l: 56,
+};
+exports.FIELD_BLOCK_DEFAULTS = {
+    size: 'l',
+};
+/**
+ * Блок поля по дизайн-гайдам.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function FieldBlock({ size = exports.FIELD_BLOCK_DEFAULTS.size, main, mainProps, disabled, failed, focused, label, labelProps, labelAsPlaceholder, fixedHeight = true, caption, rootRef, rootProps, blockRef, blockProps, adornmentStart, adornmentEnd, 'data-testid': testId = 'field-block', }) {
+    const needLabel = Boolean(label) && (size === 'l' || labelAsPlaceholder);
+    const rootClassName = cx('root', `size-${size}`, {
+        disabled,
+        focused,
+        failed,
+        'label-as-placeholder': needLabel && labelAsPlaceholder,
+        'no-label': !needLabel,
+    }, rootProps?.className);
+    const blockClassName = cx('block', fixedHeight && 'fixed-height', blockProps?.className);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...rootProps, ref: rootRef, className: rootClassName, "data-testid": testId, children: [(0, jsx_runtime_1.jsxs)("div", { ...blockProps, ref: blockRef, className: blockClassName, "data-testid": 'field-block:block', children: [adornmentStart && ((0, jsx_runtime_1.jsx)("div", { className: cx('col', 'adornment-col', 'start'), "data-testid": 'field-block:adornment-start', children: adornmentStart })), (0, jsx_runtime_1.jsxs)("div", { className: cx('col', 'main-col'), children: [needLabel && ((0, jsx_runtime_1.jsx)("label", { ...labelProps, className: cx('label', labelProps?.className), "data-testid": 'field-block:label', children: label })), (0, jsx_runtime_1.jsx)("div", { ...mainProps, className: cx('main', mainProps?.className), "data-testid": 'field-block:main', children: main })] }), adornmentEnd && ((0, jsx_runtime_1.jsx)("div", { className: cx('col', 'adornment-col', 'end'), "data-testid": 'field-block:adornment-end', children: adornmentEnd }))] }), caption && ((0, jsx_runtime_1.jsx)("div", { className: cx('caption'), "data-testid": 'field-block:caption', children: caption }))] }));
+}
+//# sourceMappingURL=field-block.js.map

package/dist/field-block/field-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-block.js","sourceRoot":"","sources":["../../src/field-block/field-block.tsx"],"names":[],"mappings":";;;;;;AAqBA,gCA6FC;;AAjHD,2DAAyC;AACzC,8EAA0C;AAE1C,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,4BAAM,CAAC,CAAC;AAEtB,QAAA,kBAAkB,GAAmC;IAChE,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;CACG,CAAC;AAEE,QAAA,oBAAoB,GAAG;IAClC,IAAI,EAAE,GAAG;CACD,CAAC;AAEX;;;;GAIG;AACH,SAAgB,UAAU,CAAC,EACzB,IAAI,GAAG,4BAAoB,CAAC,IAAI,EAChC,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,MAAM,EACN,OAAO,EACP,KAAK,EACL,UAAU,EACV,kBAAkB,EAClB,WAAW,GAAG,IAAI,EAClB,OAAO,EACP,OAAO,EACP,SAAS,EACT,QAAQ,EACR,UAAU,EACV,cAAc,EACd,YAAY,EACZ,aAAa,EAAE,MAAM,GAAG,aAAa,GACrB;IAChB,MAAM,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,kBAAkB,CAAC,CAAC;IAEzE,MAAM,aAAa,GAAG,EAAE,CACtB,MAAM,EACN,QAAQ,IAAI,EAAE,EACd;QACE,QAAQ;QACR,OAAO;QACP,MAAM;QACN,sBAAsB,EAAE,SAAS,IAAI,kBAAkB;QACvD,UAAU,EAAE,CAAC,SAAS;KACvB,EACD,SAAS,EAAE,SAAS,CACrB,CAAC;IAEF,MAAM,cAAc,GAAG,EAAE,CAAC,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;IAEzF,OAAO,CACL,oCAAS,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,iBAAe,MAAM,aAE7E,oCACM,UAAU,EACd,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,cAAc,iBACb,mBAAmB,aAE9B,cAAc,IAAI,CACjB,gCACE,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,OAAO,CAAC,iBAClC,6BAA6B,YAExC,cAAc,GACX,CACP,EAED,iCAAK,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,aAClC,SAAS,IAAI,CACZ,qCACM,UAAU,EACd,SAAS,EAAE,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,SAAS,CAAC,iBACjC,mBAAmB,YAE9B,KAAK,GACA,CACT,EAGD,mCACM,SAAS,EACb,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,CAAC,iBAC/B,kBAAkB,YAE7B,IAAI,GACD,IACF,EAEL,YAAY,IAAI,CACf,gCACE,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,CAAC,iBAChC,2BAA2B,YAEtC,YAAY,GACT,CACP,IACG,EAEL,OAAO,IAAI,CACV,gCAAK,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,iBAAc,qBAAqB,YAC7D,OAAO,GACJ,CACP,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/field-block/field-block.m.scss

@@ -0,0 +1,160 @@
+@use '../colors';
+
+.root {
+  // @todo решить как быть с наследованием text-align (ломается вид если задать родителю text-align: center)
+  font-size: 16px;
+  line-height: 24px;
+  width: var(--field-width, 240px);
+  color: var(--field-primary-text-color);
+  --field-primary-text-color: #{colors.$basic-gray87};
+  --field-label-text-color: #{colors.$basic-gray38};
+  --field-background: #fff;
+  --field-border-color: #{colors.$basic-gray12};
+  --field-caption-color: #{colors.$basic-gray38};
+  &.size-s {
+    font-size: 14px;
+    line-height: 20px;
+    --field-height: 32px;
+    --field-gutter-horizontal: 12px;
+    --field-gutter-adornment: 8px;
+    --field-gutter-vertical: 6px;
+  }
+  &.size-m {
+    --field-height: 40px;
+    --field-gutter-horizontal: 12px;
+    --field-gutter-adornment: 8px;
+    --field-gutter-vertical: 8px;
+  }
+  &.size-l {
+    --field-height: 56px;
+    --field-gutter-horizontal: 16px;
+    --field-gutter-adornment: 12px;
+    --field-gutter-vertical: 8px;
+    &.no-label {
+      .main-col {
+        padding: 8px 0;
+      }
+    }
+  }
+  &.focused {
+    --field-border-color: #{colors.$basic-blue};
+  }
+  &.disabled {
+    --field-primary-text-color: #{colors.$basic-gray24};
+    --field-main-text-color: #{colors.$basic-gray24};
+    --field-label-text-color: #{colors.$basic-gray24};
+    --field-background: #{colors.$basic-gray2};
+    --field-border-color: #{colors.$basic-gray12};
+  }
+  &.failed {
+    --field-caption-color: #{colors.$additional-deep-red};
+    --field-main-text-color: #{colors.$additional-deep-red};
+    &.label-as-placeholder {
+      --field-label-text-color: #{colors.$additional-deep-red};
+    }
+  }
+  &.label-as-placeholder {
+    &.size-s {
+      .label {
+        // @todo из-за overflow:hidden + height:0 скрывается - поменять логику
+        // height: 0;
+
+        // размер шрифта 12px увеличиваем до 14px
+        transform: scale(calc(7 / 6)) translateY(1px);
+        max-width: calc(100% * (6 / 7));
+      }
+    }
+    &.size-m {
+      .label {
+        // @todo из-за overflow:hidden + height:0 скрывается - поменять логику
+        // height: 0;
+
+        // размер шрифта 12px увеличиваем до 16px
+        transform: scale(calc(4 / 3)) translateY(1px);
+        max-width: calc(100% * (3 / 4));
+      }
+    }
+    &.size-l {
+      .label {
+        // размер шрифта 12px увеличиваем до 16px
+        transform: scale(calc(4 / 3)) translateY(7px);
+        max-width: calc(100% * (3 / 4));
+      }
+    }
+    .main {
+      opacity: 0;
+    }
+  }
+}
+
+.block {
+  border-radius: 4px;
+  outline: 0;
+  display: flex;
+  align-items: flex-start;
+  padding: var(--field-gutter-vertical) var(--field-gutter-horizontal);
+  width: 100%;
+  background: var(--field-background);
+  box-shadow: inset 0 0 0 1px var(--field-border-color);
+  &.fixed-height {
+    height: var(--field-height);
+  }
+  &:not(.fixed-height) {
+    min-height: var(--field-height);
+  }
+}
+
+.label {
+  max-width: 100%;
+  transform-origin: 0 0;
+  transition:
+    transform 0.2s ease-in-out,
+    max-width 0.2s ease-in-out;
+  height: 16px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--field-label-text-color, var(--field-primary-text-color));
+  user-select: none;
+  pointer-events: none;
+  white-space: nowrap;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.col {
+  min-height: calc(var(--field-height) - (2 * var(--field-gutter-vertical)));
+}
+
+.main-col {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-width: 0; // чтобы не выбивал "соседей" за пределы блока
+}
+
+.adornment-col {
+  flex-grow: 0;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  &.start {
+    margin-right: var(--field-gutter-adornment);
+  }
+  &.end {
+    margin-left: var(--field-gutter-adornment);
+  }
+}
+
+.main {
+  max-width: 100%;
+  white-space: nowrap;
+  color: var(--field-main-text-color, var(--field-primary-text-color));
+  z-index: 0;
+}
+
+.caption {
+  margin-top: 8px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--field-caption-color);
+}

package/dist/field-block/index.d.ts

@@ -0,0 +1,2 @@
+export type { FieldBlockSize, FieldBlockStyle, FieldBlockProps } from './types';
+export { FieldBlock, FIELD_BLOCK_DEFAULTS, FIELD_BLOCK_HEIGHT } from './field-block';

package/dist/field-block/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FIELD_BLOCK_HEIGHT = exports.FIELD_BLOCK_DEFAULTS = exports.FieldBlock = void 0;
+var field_block_1 = require("./field-block");
+Object.defineProperty(exports, "FieldBlock", { enumerable: true, get: function () { return field_block_1.FieldBlock; } });
+Object.defineProperty(exports, "FIELD_BLOCK_DEFAULTS", { enumerable: true, get: function () { return field_block_1.FIELD_BLOCK_DEFAULTS; } });
+Object.defineProperty(exports, "FIELD_BLOCK_HEIGHT", { enumerable: true, get: function () { return field_block_1.FIELD_BLOCK_HEIGHT; } });
+//# sourceMappingURL=index.js.map

package/dist/field-block/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/field-block/index.ts"],"names":[],"mappings":";;;AACA,6CAAqF;AAA5E,yGAAA,UAAU,OAAA;AAAE,mHAAA,oBAAoB,OAAA;AAAE,iHAAA,kBAAkB,OAAA"}

package/dist/field-block/types.d.ts

@@ -0,0 +1,52 @@
+import type { CSSProperties, HTMLAttributes, LabelHTMLAttributes, ReactNode, Ref } from 'react';
+import type { WithTestId } from '../types';
+export type FieldBlockSize = 's' | 'm' | 'l';
+type NoChildren<T extends {
+    children?: any;
+}> = Omit<T, 'children'>;
+export interface FieldBlockStyle extends CSSProperties {
+    '--field-width'?: string;
+    '--field-main-text-color'?: string;
+}
+type WithStyle<T extends {
+    style?: CSSProperties;
+}> = Omit<T, 'style'> & {
+    style?: FieldBlockStyle;
+};
+export interface FieldBlockProps extends WithTestId {
+    /** Отключенное состояние. */
+    disabled?: boolean;
+    /** Состояние с ошибкой. */
+    failed?: boolean;
+    /** Состояние фокуса. */
+    focused?: boolean;
+    /** Подпись под полем. */
+    caption?: string;
+    /** Ярлык в поле. */
+    label?: string;
+    /** Выводить ярлык вместо placeholder или введенного значения. */
+    labelAsPlaceholder?: boolean;
+    /** Опции элемента ярлыка. */
+    labelProps?: NoChildren<LabelHTMLAttributes<HTMLLabelElement>>;
+    /** Размер. */
+    size?: FieldBlockSize;
+    /** Фиксировать высоту. */
+    fixedHeight?: boolean;
+    /** Опции корневого элемента. */
+    rootProps?: NoChildren<WithStyle<HTMLAttributes<HTMLDivElement>>>;
+    /** Ref корневого элемента. */
+    rootRef?: Ref<HTMLDivElement>;
+    /** Опции элемента блока поля. */
+    blockProps?: NoChildren<WithStyle<HTMLAttributes<HTMLDivElement>>>;
+    /** Ref элемента блока поля. */
+    blockRef?: Ref<HTMLDivElement>;
+    /** Украшение перед основным содержимым. */
+    adornmentStart?: ReactNode;
+    /** Украшение после основного содержимого. */
+    adornmentEnd?: ReactNode;
+    /** Основное содержимое. */
+    main?: ReactNode;
+    /** Опции основного содержимого. */
+    mainProps?: NoChildren<WithStyle<HTMLAttributes<HTMLDivElement>>>;
+}
+export {};

package/dist/field-block/types.js

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

package/dist/field-block/types.js.map

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

package/dist/file-icon/file-icon.d.ts

@@ -0,0 +1,8 @@
+import type { FileIconProps } from './types';
+export declare const KNOWN_TYPES: Set<string>;
+/**
+ * Иконка файла.
+ * @param props Свойства. Поддерживаются свойства <svg />.
+ * @return Элемент.
+ */
+export declare function FileIcon({ type, isTypeVisible, ...svgProps }: FileIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/file-icon/file-icon.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KNOWN_TYPES = void 0;
+exports.FileIcon = FileIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const file_icon_m_scss_1 = __importDefault(require("./file-icon.m.scss"));
+const react_1 = require("react");
+exports.KNOWN_TYPES = new Set([
+    'avi',
+    'doc',
+    'docx',
+    'heic',
+    'jpg',
+    'mov',
+    'mp3',
+    'mp4',
+    'pdf',
+    'png',
+    'rtf',
+    'txt',
+    'xls',
+    'xlsx',
+    'xml',
+    'zip',
+]);
+/**
+ * Иконка файла.
+ * @param props Свойства. Поддерживаются свойства <svg />.
+ * @return Элемент.
+ */
+function FileIcon({ type = '', isTypeVisible = typeof type === 'string' && exports.KNOWN_TYPES.has(type.toLowerCase()), ...svgProps }) {
+    const placeholder = (0, react_1.useMemo)(() => type === null ? (
+    /* иконка Stroked/Cross без обертки в виде <svg /> */
+    (0, jsx_runtime_1.jsx)("path", { d: 'M12.7071 4.70711C13.0976 4.31658 13.0976 3.68342 12.7071 3.29289C12.3166 2.90237 11.6834 2.90237 11.2929 3.29289L8 6.58579L4.70711 3.29289C4.31658 2.90237 3.68342 2.90237 3.29289 3.29289C2.90237 3.68342 2.90237 4.31658 3.29289 4.70711L6.58579 8L3.29289 11.2929C2.90237 11.6834 2.90237 12.3166 3.29289 12.7071C3.68342 13.0976 4.31658 13.0976 4.70711 12.7071L8 9.41421L11.2929 12.7071C11.6834 13.0976 12.3166 13.0976 12.7071 12.7071C13.0976 12.3166 13.0976 11.6834 12.7071 11.2929L9.41421 8L12.7071 4.70711Z', fill: '#9e9e9e', transform: 'translate(8,12)' })) : (
+    /* заглушка текста */
+    (0, jsx_runtime_1.jsxs)("g", { opacity: '0.8', children: [(0, jsx_runtime_1.jsx)("path", { d: 'M9 22H23V24H9V22Z', fill: '#fff' }), (0, jsx_runtime_1.jsx)("path", { d: 'M9 18H19V20H9V18Z', fill: '#fff' })] })), [type]);
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: '32', height: '32', viewBox: '0 0 32 32', ...svgProps, children: [(0, jsx_runtime_1.jsx)("path", { className: (0, classnames_1.default)(file_icon_m_scss_1.default.main, type === null ? file_icon_m_scss_1.default.broken : file_icon_m_scss_1.default[type.toLowerCase()]), opacity: '0.88', d: 'M6 5C6 3.89543 6.89543 3 8 3H20L26 9V27C26 28.1046 25.1046 29 24 29H8C6.89543 29 6 28.1046 6 27V5Z' }), (0, jsx_runtime_1.jsx)("path", { opacity: '0.32', d: 'M21 9L26 9L20 3L20 8C20 8.55229 20.4477 9 21 9Z', fill: '#fff' }), (0, jsx_runtime_1.jsx)("path", { opacity: '0.24', d: 'M25.1667 9L21 9L26 15L26 9C25.5833 9 25.6269 9 25.1667 9Z', fill: 'black' }), type && isTypeVisible ? (
+            /* текст */
+            (0, jsx_runtime_1.jsx)("text", { x: '16', y: '23', textAnchor: 'middle', fontSize: '6.5', fontWeight: '700', fill: '#fff', children: type.toUpperCase() })) : (placeholder)] }));
+}
+//# sourceMappingURL=file-icon.js.map

package/dist/file-icon/file-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-icon.js","sourceRoot":"","sources":["../../src/file-icon/file-icon.tsx"],"names":[],"mappings":";;;;;;AA6BA,4BAmDC;;AA/ED,4DAA4B;AAC5B,0EAAwC;AACxC,iCAAgC;AAEnB,QAAA,WAAW,GAAG,IAAI,GAAG,CAAC;IACjC,KAAK;IACL,KAAK;IACL,MAAM;IACN,MAAM;IACN,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,MAAM;IACN,KAAK;IACL,KAAK;CACN,CAAC,CAAC;AAEH;;;;GAIG;AACH,SAAgB,QAAQ,CAAC,EACvB,IAAI,GAAG,EAAE,EACT,aAAa,GAAG,OAAO,IAAI,KAAK,QAAQ,IAAI,mBAAW,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,EAC/E,GAAG,QAAQ,EACG;IACd,MAAM,WAAW,GAAG,IAAA,eAAO,EACzB,GAAG,EAAE,CACH,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC;IACd,qDAAqD;IACrD,iCACE,CAAC,EAAC,2fAA2f,EAC7f,IAAI,EAAC,SAAS,EACd,SAAS,EAAC,iBAAiB,GAC3B,CACH,CAAC,CAAC,CAAC;IACF,qBAAqB;IACrB,+BAAG,OAAO,EAAC,KAAK,aACd,iCAAM,CAAC,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM,GAAG,EAC1C,iCAAM,CAAC,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM,GAAG,IACxC,CACL,EACH,CAAC,IAAI,CAAC,CACP,CAAC;IAEF,OAAO,CACL,iCAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,KAAK,QAAQ,aAE1D,iCACE,SAAS,EAAE,IAAA,oBAAE,EAAC,0BAAM,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,0BAAM,CAAC,MAAM,CAAC,CAAC,CAAC,0BAAM,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,EACtF,OAAO,EAAC,MAAM,EACd,CAAC,EAAC,oGAAoG,GACtG,EAGF,iCAAM,OAAO,EAAC,MAAM,EAAC,CAAC,EAAC,iDAAiD,EAAC,IAAI,EAAC,MAAM,GAAG,EACvF,iCACE,OAAO,EAAC,MAAM,EACd,CAAC,EAAC,2DAA2D,EAC7D,IAAI,EAAC,OAAO,GACZ,EAED,IAAI,IAAI,aAAa,CAAC,CAAC,CAAC;YACvB,WAAW;YACX,iCAAM,CAAC,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,QAAQ,EAAC,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,YAChF,IAAI,CAAC,WAAW,EAAE,GACd,CACR,CAAC,CAAC,CAAC,CACF,WAAW,CACZ,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/file-icon/file-icon.m.scss

@@ -0,0 +1,74 @@
+@use '../colors';
+
+.main {
+  fill: var(--file-icon-primary-color, #{colors.$basic-gray24});
+}
+
+// ВАЖНО: далее используем цвет именно как резервное значение чтобы иметь возможность переопределения
+.avi {
+  fill: var(--file-icon-primary-color, #{colors.$additional-blue-gray});
+}
+
+.doc {
+  fill: var(--file-icon-primary-color, #{colors.$additional-electric-blue});
+}
+
+.docx {
+  fill: var(--file-icon-primary-color, #{colors.$additional-deep-blue});
+}
+
+.heic {
+  fill: var(--file-icon-primary-color, #{colors.$additional-violet});
+}
+
+.jpg {
+  fill: var(--file-icon-primary-color, #{colors.$additional-deep-orange});
+}
+
+.mov {
+  fill: var(--file-icon-primary-color, #{colors.$additional-blue-gray});
+}
+
+.mp3 {
+  fill: var(--file-icon-primary-color, #{colors.$additional-blue-gray});
+}
+
+.mp4 {
+  fill: var(--file-icon-primary-color, #{colors.$additional-blue-gray});
+}
+
+.pdf {
+  fill: var(--file-icon-primary-color, #{colors.$additional-deep-red});
+}
+
+.png {
+  fill: var(--file-icon-primary-color, #{colors.$additional-purple});
+}
+
+.rtf {
+  fill: var(--file-icon-primary-color, #{colors.$additional-light-blue});
+}
+
+.txt {
+  fill: var(--file-icon-primary-color, #{colors.$additional-unlit-blue});
+}
+
+.xls {
+  fill: var(--file-icon-primary-color, #{colors.$additional-light-green});
+}
+
+.xlsx {
+  fill: var(--file-icon-primary-color, #{colors.$additional-green});
+}
+
+.xml {
+  fill: var(--file-icon-primary-color, #{colors.$additional-deep-purple});
+}
+
+.zip {
+  fill: var(--file-icon-primary-color, #{colors.$additional-teal});
+}
+
+.broken {
+  fill: var(--file-icon-primary-color, #{colors.$basic-gray12});
+}

package/dist/file-icon/index.d.ts

@@ -0,0 +1,2 @@
+export type { FileIconProps, FileIconStyle } from './types';
+export { FileIcon } from './file-icon';

package/dist/file-icon/index.js

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

package/dist/file-icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/file-icon/index.ts"],"names":[],"mappings":";;;AACA,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA"}

package/dist/file-icon/types.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties, SVGAttributes } from 'react';
+export interface FileIconStyle extends CSSProperties {
+    '--file-icon-primary-color'?: string;
+}
+export interface FileIconProps extends Omit<SVGAttributes<SVGSVGElement>, 'type'> {
+    /** Тип файла. */
+    type?: string | null;
+    /** Нужно ли выводить название типа. */
+    isTypeVisible?: boolean;
+    /** Стили. */
+    style?: FileIconStyle;
+}

package/dist/file-icon/types.js

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

package/dist/file-icon/types.js.map

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

package/dist/gradients/index.d.ts

@@ -0,0 +1,14 @@
+/** Градиенты дизайн-системы. */
+export declare const GRADIENT: {
+    readonly sunrise: "linear-gradient(135deg, #bf16af 0%, #ff9b8d 100%)";
+    readonly twilight: "linear-gradient(135deg, #4d74ff 0%, #e546ff 100%)";
+    readonly sunset: "linear-gradient(315deg, #ffb571 0%, #f2000f 100%)";
+    readonly sunshine: "linear-gradient(135deg, #ff7200 0%, #f5d00b 100%)";
+    readonly gold: "linear-gradient(315deg, #f1d18c 0%, #da9c3b 100%)";
+    readonly foliage: "linear-gradient(135deg, #09ab8b 0%, #a9e007 100%)";
+    readonly sky: "linear-gradient(135deg, #3777fe 0%, #21e3e4 100%)";
+    readonly 'polar-light': "linear-gradient(135deg, #46007c 0%, #008dc9 100%)";
+    readonly night: "linear-gradient(135deg, #0f0f0f 0%, #757575 100%)";
+    readonly blueberry: "linear-gradient(135deg, #a3a4cd 0%, #30314e 100%)";
+};
+export declare const GRADIENTS: Map<keyof typeof GRADIENT, string>;

package/dist/gradients/index.js

@@ -0,0 +1,19 @@
+"use strict";
+// GENERATED FILE - DO NOT CHANGE IT MANUALLY
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GRADIENTS = exports.GRADIENT = void 0;
+/** Градиенты дизайн-системы. */
+exports.GRADIENT = {
+    sunrise: 'linear-gradient(135deg, #bf16af 0%, #ff9b8d 100%)',
+    twilight: 'linear-gradient(135deg, #4d74ff 0%, #e546ff 100%)',
+    sunset: 'linear-gradient(315deg, #ffb571 0%, #f2000f 100%)',
+    sunshine: 'linear-gradient(135deg, #ff7200 0%, #f5d00b 100%)',
+    gold: 'linear-gradient(315deg, #f1d18c 0%, #da9c3b 100%)',
+    foliage: 'linear-gradient(135deg, #09ab8b 0%, #a9e007 100%)',
+    sky: 'linear-gradient(135deg, #3777fe 0%, #21e3e4 100%)',
+    'polar-light': 'linear-gradient(135deg, #46007c 0%, #008dc9 100%)',
+    night: 'linear-gradient(135deg, #0f0f0f 0%, #757575 100%)',
+    blueberry: 'linear-gradient(135deg, #a3a4cd 0%, #30314e 100%)',
+};
+exports.GRADIENTS = new Map(Object.entries(exports.GRADIENT));
+//# sourceMappingURL=index.js.map

package/dist/gradients/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/gradients/index.ts"],"names":[],"mappings":";AAAA,6CAA6C;;;AAE7C,gCAAgC;AACnB,QAAA,QAAQ,GAAG;IACtB,OAAO,EAAE,mDAAmD;IAC5D,QAAQ,EAAE,mDAAmD;IAC7D,MAAM,EAAE,mDAAmD;IAC3D,QAAQ,EAAE,mDAAmD;IAC7D,IAAI,EAAE,mDAAmD;IACzD,OAAO,EAAE,mDAAmD;IAC5D,GAAG,EAAE,mDAAmD;IACxD,aAAa,EAAE,mDAAmD;IAClE,KAAK,EAAE,mDAAmD;IAC1D,SAAS,EAAE,mDAAmD;CACtD,CAAC;AAEE,QAAA,SAAS,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,gBAAQ,CAAC,CAAuC,CAAC"}

package/dist/gradients.scss

@@ -0,0 +1,25 @@
+// GENERATED FILE - DO NOT CHANGE IT MANUALLY
+
+$sunrise: linear-gradient(135deg, #bf16af 0%, #ff9b8d 100%);
+$twilight: linear-gradient(135deg, #4d74ff 0%, #e546ff 100%);
+$sunset: linear-gradient(315deg, #ffb571 0%, #f2000f 100%);
+$sunshine: linear-gradient(135deg, #ff7200 0%, #f5d00b 100%);
+$gold: linear-gradient(315deg, #f1d18c 0%, #da9c3b 100%);
+$foliage: linear-gradient(135deg, #09ab8b 0%, #a9e007 100%);
+$sky: linear-gradient(135deg, #3777fe 0%, #21e3e4 100%);
+$polar-light: linear-gradient(135deg, #46007c 0%, #008dc9 100%);
+$night: linear-gradient(135deg, #0f0f0f 0%, #757575 100%);
+$blueberry: linear-gradient(135deg, #a3a4cd 0%, #30314e 100%);
+
+@mixin properties() {
+  --gradient-sunrise: linear-gradient(135deg, #bf16af 0%, #ff9b8d 100%);
+  --gradient-twilight: linear-gradient(135deg, #4d74ff 0%, #e546ff 100%);
+  --gradient-sunset: linear-gradient(315deg, #ffb571 0%, #f2000f 100%);
+  --gradient-sunshine: linear-gradient(135deg, #ff7200 0%, #f5d00b 100%);
+  --gradient-gold: linear-gradient(315deg, #f1d18c 0%, #da9c3b 100%);
+  --gradient-foliage: linear-gradient(135deg, #09ab8b 0%, #a9e007 100%);
+  --gradient-sky: linear-gradient(135deg, #3777fe 0%, #21e3e4 100%);
+  --gradient-polar-light: linear-gradient(135deg, #46007c 0%, #008dc9 100%);
+  --gradient-night: linear-gradient(135deg, #0f0f0f 0%, #757575 100%);
+  --gradient-blueberry: linear-gradient(135deg, #a3a4cd 0%, #30314e 100%);
+}

package/dist/group-overflow/group-overflow.d.ts

@@ -0,0 +1,7 @@
+import { GroupOverflowProps } from './types';
+/**
+ * Группа со скрытием не влезающих элементов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function GroupOverflow({ children, className, style, gap, tail, ...restProps }: GroupOverflowProps): import("react/jsx-runtime").JSX.Element;