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

package/field-block/{field-block.module.scss → field-block.m.scss}

@@ -1,6 +1,7 @@
 @use '../colors';
 
 .root {
+  // @todo решить как быть с наследованием text-align (ломается вид если задать родителю text-align: center)
   font-size: 16px;
   line-height: 24px;
   width: var(--field-width, 240px);
@@ -106,7 +107,9 @@
 .label {
   max-width: 100%;
   transform-origin: 0 0;
-  transition: transform 0.2s ease-in-out, max-width 0.2s ease-in-out;
+  transition:
+    transform 0.2s ease-in-out,
+    max-width 0.2s ease-in-out;
   height: 16px;
   font-size: 12px;
   line-height: 16px;
@@ -115,6 +118,7 @@
   pointer-events: none;
   white-space: nowrap;
   overflow: hidden;
+  z-index: 1;
 }
 
 .col {
@@ -145,6 +149,7 @@
   max-width: 100%;
   white-space: nowrap;
   color: var(--field-main-text-color, var(--field-primary-text-color));
+  z-index: 0;
 }
 
 .caption {

package/field-block/index.d.ts

@@ -1,63 +1,2 @@
-import { ReactNode, HTMLAttributes, LabelHTMLAttributes, Ref, CSSProperties } from 'react';
-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 {
-    /** Отключенное состояние. */
-    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>>>;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
-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): JSX.Element;
-export {};
+export type { FieldBlockSize, FieldBlockStyle, FieldBlockProps } from './types';
+export { FieldBlock, FIELD_BLOCK_DEFAULTS, FIELD_BLOCK_HEIGHT } from './field-block';

package/field-block/index.js

@@ -1,43 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldBlock = exports.FIELD_BLOCK_DEFAULTS = exports.FIELD_BLOCK_HEIGHT = void 0;
-const react_1 = __importDefault(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const field_block_module_scss_1 = __importDefault(require("./field-block.module.scss"));
-const cx = bind_1.default.bind(field_block_module_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 === null || rootProps === void 0 ? void 0 : rootProps.className);
-    const blockClassName = cx('block', fixedHeight && 'fixed-height', blockProps === null || blockProps === void 0 ? void 0 : blockProps.className);
-    return (react_1.default.createElement("div", Object.assign({}, rootProps, { ref: rootRef, className: rootClassName, "data-testid": testId }),
-        react_1.default.createElement("div", Object.assign({}, blockProps, { ref: blockRef, className: blockClassName, "data-testid": 'field-block:block' }),
-            adornmentStart && (react_1.default.createElement("div", { className: cx('col', 'adornment-col', 'start'), "data-testid": 'field-block:adornment-start' }, adornmentStart)),
-            react_1.default.createElement("div", { className: cx('col', 'main-col') },
-                needLabel && (react_1.default.createElement("label", Object.assign({}, labelProps, { className: cx('label', labelProps === null || labelProps === void 0 ? void 0 : labelProps.className), "data-testid": 'field-block:label' }), label)),
-                react_1.default.createElement("div", Object.assign({}, mainProps, { className: cx('main', mainProps === null || mainProps === void 0 ? void 0 : mainProps.className), "data-testid": 'field-block:main' }), main)),
-            adornmentEnd && (react_1.default.createElement("div", { className: cx('col', 'adornment-col', 'end'), "data-testid": 'field-block:adornment-end' }, adornmentEnd))),
-        caption && (react_1.default.createElement("div", { className: cx('caption'), "data-testid": 'field-block:caption' }, caption))));
-}
-exports.FieldBlock = FieldBlock;
+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/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/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/field-block/types.js

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

package/field-block/types.js.map

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

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

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

package/file-icon/file-icon.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileIcon = FileIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const bind_1 = __importDefault(require("classnames/bind"));
+const file_icon_m_scss_1 = __importDefault(require("./file-icon.m.scss"));
+const cx = bind_1.default.bind(file_icon_m_scss_1.default);
+const KNOWN_TYPES = new Set([
+    'doc',
+    'docx',
+    'heic',
+    'jpg',
+    'mov',
+    'mp4',
+    'pdf',
+    'png',
+    'rtf',
+    'txt',
+    'xls',
+    'xlsx',
+    'xml',
+    'zip',
+]);
+/**
+ * Иконка файла.
+ * @param props Свойства. Поддерживаются свойства <svg />.
+ * @return Элемент.
+ */
+function FileIcon({ type, typeDisplayed = typeof type === 'string' && KNOWN_TYPES.has(type), ...svgProps }) {
+    return type && typeDisplayed ? ((0, jsx_runtime_1.jsxs)("svg", { width: '32', height: '32', viewBox: '0 0 32 32', ...svgProps, children: [(0, jsx_runtime_1.jsx)("path", { className: cx('main', 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' }), (0, jsx_runtime_1.jsx)("text", { x: '16', y: '23', textAnchor: 'middle', fontSize: '6.5', fontWeight: '700', fill: '#fff', children: type.toUpperCase() })] })) : ((0, jsx_runtime_1.jsxs)("svg", { width: '32', height: '32', viewBox: '0 0 32 32', ...svgProps, children: [(0, jsx_runtime_1.jsx)("path", { className: cx('main'), 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' }), (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' })] })] }));
+}
+//# sourceMappingURL=file-icon.js.map

package/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":";;;;;AA4BA,4BAmDC;;AA9ED,2DAAyC;AACzC,0EAAwC;AAExC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,0BAAM,CAAC,CAAC;AAEnC,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC;IAC1B,KAAK;IACL,MAAM;IACN,MAAM;IACN,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,EACJ,aAAa,GAAG,OAAO,IAAI,KAAK,QAAQ,IAAI,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EACjE,GAAG,QAAQ,EACG;IACd,OAAO,IAAI,IAAI,aAAa,CAAC,CAAC,CAAC,CAC7B,iCAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,KAAK,QAAQ,aAE1D,iCACE,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,EACzC,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,EAGF,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,IACH,CACP,CAAC,CAAC,CAAC,CACF,iCAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,KAAK,QAAQ,aAE1D,iCACE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,EACrB,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,EAGF,+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,IACA,CACP,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,62 @@
+@use '../colors';
+
+.main {
+  fill: var(--file-icon-primary-color, #{colors.$basic-gray24});
+}
+
+// ВАЖНО: далее используем цвет именно как резервное значение чтобы иметь возможность переопределения
+.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});
+}
+
+.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});
+}

package/file-icon/index.d.ts

@@ -1,11 +1,2 @@
-import React from 'react';
-export interface FileIconProps extends Omit<React.SVGAttributes<SVGSVGElement>, 'type'> {
-    /** Тип файла. */
-    type?: string;
-}
-/**
- * Компонент иконки файла.
- * @param props Свойства. Поддерживаются свойства <svg />.
- * @return Элемент.
- */
-export declare const FileIcon: ({ type, ...svgProps }: FileIconProps) => JSX.Element;
+export type { FileIconProps, FileIconStyle } from './types';
+export { FileIcon } from './file-icon';

package/file-icon/index.js

@@ -1,43 +1,6 @@
 "use strict";
-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.FileIcon = void 0;
-const react_1 = __importDefault(require("react"));
-const colors_1 = require("../colors");
-const unknown_svg_1 = __importDefault(require("./unknown.svg"));
-const VARIANTS = {
-    doc: { fill: colors_1.COLORS.get('additional-electric-blue') },
-    xls: { fill: colors_1.COLORS.get('additional-light-green') },
-    pdf: { fill: colors_1.COLORS.get('additional-deep-red') },
-    jpg: { fill: colors_1.COLORS.get('additional-deep-orange') },
-    xml: { fill: colors_1.COLORS.get('additional-deep-purple') },
-    zip: { fill: colors_1.COLORS.get('additional-teal') },
-};
-/**
- * Компонент иконки файла.
- * @param props Свойства. Поддерживаются свойства <svg />.
- * @return Элемент.
- */
-const FileIcon = (_a) => {
-    var { type } = _a, svgProps = __rest(_a, ["type"]);
-    const typeProps = VARIANTS[type];
-    return type && typeProps ? (react_1.default.createElement("svg", Object.assign({ width: '32', height: '32', viewBox: '0 0 32 32' }, svgProps),
-        react_1.default.createElement("path", { 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', fill: typeProps.fill }),
-        react_1.default.createElement("path", { opacity: '0.32', d: 'M21 9L26 9L20 3L20 8C20 8.55229 20.4477 9 21 9Z', fill: 'white' }),
-        react_1.default.createElement("path", { opacity: '0.24', d: 'M25.1667 9L21 9L26 15L26 9C25.5833 9 25.6269 9 25.1667 9Z', fill: 'black' }),
-        react_1.default.createElement("text", { x: '16', y: '23', textAnchor: 'middle', fontSize: '6.5', fontWeight: '700', fill: '#fff' }, type.toUpperCase()))) : (react_1.default.createElement(unknown_svg_1.default, Object.assign({}, svgProps)));
-};
-exports.FileIcon = FileIcon;
+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/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/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;
+    /** Нужно ли выводить название типа. */
+    typeDisplayed?: boolean;
+    /** Стили. */
+    style?: FileIconStyle;
+}

package/file-icon/types.js

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

package/file-icon/types.js.map

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

package/gradients/index.d.ts

@@ -0,0 +1,13 @@
+/** Градиенты дизайн-системы. */
+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%)";
+};
+export declare const GRADIENTS: Map<keyof typeof GRADIENT, string>;

package/gradients/index.js

@@ -0,0 +1,18 @@
+"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%)',
+};
+exports.GRADIENTS = new Map(Object.entries(exports.GRADIENT));
+//# sourceMappingURL=index.js.map

package/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;CAClD,CAAC;AAEE,QAAA,SAAS,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,gBAAQ,CAAC,CAAuC,CAAC"}

package/gradients.scss

@@ -0,0 +1,23 @@
+// 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%);
+
+@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%);
+}

package/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;

package/group-overflow/group-overflow.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupOverflow = GroupOverflow;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("./utils");
+const classnames_1 = __importDefault(require("classnames"));
+const group_overflow_m_scss_1 = __importDefault(require("./group-overflow.m.scss"));
+/**
+ * Группа со скрытием не влезающих элементов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function GroupOverflow({ children, className, style, gap, tail, ...restProps }) {
+    const ref = (0, react_1.useRef)(null);
+    const { state, start } = (0, utils_1.useItemsHide)(ref, el => el.parentElement?.parentElement);
+    const total = react_1.Children.count(children);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(group_overflow_m_scss_1.default.root, className), style: typeof gap === 'number'
+            ? { ...style, '--group-overflow-gap': `${gap}px` }
+            : style, ...restProps, children: [(0, jsx_runtime_1.jsx)("div", { ref: ref, className: group_overflow_m_scss_1.default.items, children: state === 'initial'
+                    ? react_1.Children.toArray(children)
+                    : react_1.Children.toArray(children).slice(0, start) }), state !== 'initial' && start < total && tail && ((0, jsx_runtime_1.jsx)("div", { className: group_overflow_m_scss_1.default.more, children: tail({ hiddenCount: total - start }) }))] }));
+}
+//# sourceMappingURL=group-overflow.js.map

package/group-overflow/group-overflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-overflow.js","sourceRoot":"","sources":["../../src/group-overflow/group-overflow.tsx"],"names":[],"mappings":";;;;;AAWA,sCAkCC;;AA7CD,iCAAwD;AACxD,mCAAuC;AAEvC,4DAAoC;AACpC,oFAA6C;AAE7C;;;;GAIG;AACH,SAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,IAAI,EACJ,GAAG,SAAS,EACO;IACnB,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAA,oBAAY,EAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;IAClF,MAAM,KAAK,GAAG,gBAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAEvC,OAAO,CACL,iCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,+BAAM,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7C,KAAK,EACH,OAAO,GAAG,KAAK,QAAQ;YACrB,CAAC,CAAE,EAAE,GAAG,KAAK,EAAE,sBAAsB,EAAE,GAAG,GAAG,IAAI,EAAoB;YACrE,CAAC,CAAC,KAAK,KAEP,SAAS,aAEb,gCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,+BAAM,CAAC,KAAK,YAEnC,KAAK,KAAK,SAAS;oBAClB,CAAC,CAAC,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC;oBAC5B,CAAC,CAAC,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,GAC1C,EAEL,KAAK,KAAK,SAAS,IAAI,KAAK,GAAG,KAAK,IAAI,IAAI,IAAI,CAC/C,gCAAK,SAAS,EAAE,+BAAM,CAAC,IAAI,YAAG,IAAI,CAAC,EAAE,WAAW,EAAE,KAAK,GAAG,KAAK,EAAE,CAAC,GAAO,CAC1E,IACG,CACP,CAAC;AACJ,CAAC"}

package/group-overflow/group-overflow.m.scss

@@ -0,0 +1,24 @@
+.root {
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.items {
+  flex-shrink: 1;
+  overflow: hidden;
+  display: flex;
+  align-items: flex-start;
+  > * {
+    flex-shrink: 0;
+    max-width: 100%;
+  }
+  > *:not(:first-child) {
+    margin-left: var(--group-overflow-gap, 8px);
+  }
+}
+
+.more {
+  margin-left: var(--group-overflow-gap, 8px);
+  flex-grow: 0;
+  flex-shrink: 0;
+}

package/group-overflow/index.d.ts

@@ -0,0 +1,2 @@
+export type { GroupOverflowProps, RenderTail } from './types';
+export { GroupOverflow } from './group-overflow';

package/group-overflow/index.js

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

package/group-overflow/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/group-overflow/index.ts"],"names":[],"mappings":";;;AACA,mDAAiD;AAAxC,+GAAA,aAAa,OAAA"}

package/group-overflow/types.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type RenderTail = (data: {
+    hiddenCount: number;
+}) => ReactNode;
+export interface GroupOverflowProps extends HTMLAttributes<HTMLDivElement> {
+    /** Расстояние между элементами в пикселях. */
+    gap?: number;
+    /** Вернёт "замыкающий" элемент, который будет выведен по аналогии с многоточием для текста. */
+    tail?: RenderTail;
+}

package/group-overflow/types.js

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

package/group-overflow/types.js.map

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

package/group-overflow/utils.d.ts

@@ -0,0 +1,20 @@
+import { RefObject } from 'react';
+type HideStatus = 'initial' | 'hidden' | 'hidden+more';
+/**
+ * Хук состояния скрытия не влезающих элементов.
+ * @param ref Реф с контейнером.
+ * @param getParent Получив контейнер вернет элемент за изменением ширины которого надо следить.
+ * @return Состояние.
+ */
+export declare function useItemsHide(ref: RefObject<HTMLElement>, getParent: (el: HTMLElement) => HTMLElement | null | undefined): {
+    state: HideStatus;
+    start: number;
+};
+/**
+ * Вернет индекс дочернего элемента, который не влез в контейнер по ширине.
+ * Работает только если все дочерние узлы размещены в одной строке (без переноса).
+ * @param element Контейнер.
+ * @return Индекс.
+ */
+export declare function defineHideStart(element: HTMLElement): number;
+export {};