@alfalab/core-components 41.7.0-beta.0 → 41.7.0-beta.2

package/icon-view/cssm/no-shape.d.ts

@@ -0,0 +1 @@
+export * from "./components/no-shape/index";

package/icon-view/cssm/no-shape.js

@@ -0,0 +1,15 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_noShape_component = require('./components/no-shape/component.js');
+require('tslib');
+require('react');
+require('./components/base-shape/component.js');
+require('classnames');
+require('@alfalab/hooks');
+require('./components/base-shape/utils.js');
+require('./components/base-shape/index.module.css');
+require('./components/no-shape/paths.js');
+
+
+
+exports.NoShape = components_noShape_component.NoShape;

package/icon-view/cssm/rectangle.d.ts

@@ -0,0 +1 @@
+export * from "./components/rectangle/index";

package/icon-view/cssm/rectangle.js

@@ -0,0 +1,15 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_rectangle_component = require('./components/rectangle/component.js');
+require('tslib');
+require('react');
+require('./components/base-shape/component.js');
+require('classnames');
+require('@alfalab/hooks');
+require('./components/base-shape/utils.js');
+require('./components/base-shape/index.module.css');
+require('./components/rectangle/paths.js');
+
+
+
+exports.Rectangle = components_rectangle_component.Rectangle;

package/icon-view/esm/components/base-shape/component.d.ts

@@ -2,11 +2,19 @@
 import React from 'react';
 import { ElementType, ReactNode } from "react";
 import { PathsMap } from "./utils";
+type Border = {
+    width?: number;
+    color?: string;
+    style?: 'solid' | 'dashed' | 'dotted';
+};
 type BaseShapeProps = {
     /**
      * Размер компонента
      */
-    size?: number;
+    size?: number | {
+        width: number;
+        height: number;
+    };
     /**
      * Цвет заливки
      * @default #f3f4f5
@@ -16,7 +24,7 @@ type BaseShapeProps = {
      * Видимость обводки
      * @default false
      */
-    border?: boolean;
+    border?: boolean | Border;
     /**
      * Фоновое изображение. Имеет приоритет над иконкой и заливкой
      */
@@ -53,6 +61,10 @@ type BaseShapeProps = {
      * Дочерние элементы.
      */
     children?: ReactNode;
+    /**
+     * Текст
+     */
+    text?: ReactNode;
 };
 declare const BaseShape: React.ForwardRefExoticComponent<BaseShapeProps & React.RefAttributes<HTMLDivElement>>;
 export { BaseShapeProps, BaseShape };

package/icon-view/esm/components/base-shape/component.js

@@ -3,23 +3,24 @@ import cn from 'classnames';
 import { useId } from '@alfalab/hooks';
 import { getPath } from './utils.js';
 
-var styles = {"componentWrapper":"icon-view__componentWrapper_j6ogi","component":"icon-view__component_j6ogi","bg":"icon-view__bg_j6ogi","border":"icon-view__border_j6ogi","children":"icon-view__children_j6ogi","addons":"icon-view__addons_j6ogi","size_128":"icon-view__size_128_j6ogi","topAddons":"icon-view__topAddons_j6ogi","bottomAddons":"icon-view__bottomAddons_j6ogi","size_80":"icon-view__size_80_j6ogi","indicator":"icon-view__indicator_j6ogi","size_64":"icon-view__size_64_j6ogi","size_48":"icon-view__size_48_j6ogi","size_40":"icon-view__size_40_j6ogi","size_32":"icon-view__size_32_j6ogi","size_24":"icon-view__size_24_j6ogi","size_20":"icon-view__size_20_j6ogi"};
+var styles = {"componentWrapper":"icon-view__componentWrapper_j6ogi","component":"icon-view__component_j6ogi","bg":"icon-view__bg_j6ogi","border":"icon-view__border_j6ogi","text":"icon-view__text_j6ogi","children":"icon-view__children_j6ogi","addons":"icon-view__addons_j6ogi","size_128":"icon-view__size_128_j6ogi","topAddons":"icon-view__topAddons_j6ogi","bottomAddons":"icon-view__bottomAddons_j6ogi","size_80":"icon-view__size_80_j6ogi","indicator":"icon-view__indicator_j6ogi","size_64":"icon-view__size_64_j6ogi","size_48":"icon-view__size_48_j6ogi","size_40":"icon-view__size_40_j6ogi","size_32":"icon-view__size_32_j6ogi","size_24":"icon-view__size_24_j6ogi","size_20":"icon-view__size_20_j6ogi"};
 require('./index.css');
 
 var BaseShape = forwardRef(function (_a, ref) {
-    var _b = _a.size, size = _b === void 0 ? 64 : _b, _c = _a.border, border = _c === void 0 ? false : _c, backgroundColor = _a.backgroundColor, imageUrl = _a.imageUrl, Icon = _a.backgroundIcon, className = _a.className, children = _a.children, topAddons = _a.topAddons, bottomAddons = _a.bottomAddons, indicator = _a.indicator, pathsMap = _a.pathsMap, dataTestId = _a.dataTestId;
+    var _b = _a.size, size = _b === void 0 ? 64 : _b, _c = _a.border, border = _c === void 0 ? false : _c, backgroundColor = _a.backgroundColor, imageUrl = _a.imageUrl, Icon = _a.backgroundIcon, className = _a.className, text = _a.text, children = _a.children, topAddons = _a.topAddons, bottomAddons = _a.bottomAddons, indicator = _a.indicator, pathsMap = _a.pathsMap, dataTestId = _a.dataTestId;
+    var _d = typeof size === 'object' ? [size.width, size.height] : [size, size], width = _d[0], height = _d[1];
     var imagePatternId = useId();
-    var svgPatternId = Icon && "svg_".concat(size);
-    var hasTopAddons = Boolean(topAddons) && size > 32;
-    var hasBottomAddons = Boolean(bottomAddons) && size > 32;
-    var hasIndicator = Boolean(indicator) && size < 128;
-    return (React.createElement("div", { className: cn(styles.componentWrapper, styles["size_".concat(size)], className), ref: ref, "data-test-id": dataTestId },
+    var svgPatternId = useId();
+    var hasTopAddons = Boolean(topAddons) && width > 32;
+    var hasBottomAddons = Boolean(bottomAddons) && width > 32;
+    var hasIndicator = Boolean(indicator) && width < 128;
+    return (React.createElement("div", { className: cn(styles.componentWrapper, styles["size_".concat(Math.max(width, height))], className), ref: ref, "data-test-id": dataTestId },
         React.createElement("div", { className: styles.component },
-            React.createElement("svg", { width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), xmlns: 'http://www.w3.org/2000/svg', focusable: false },
+            React.createElement("svg", { width: width, height: height, viewBox: "0 0 ".concat(width, " ").concat(height), xmlns: 'http://www.w3.org/2000/svg', focusable: false },
                 React.createElement("path", { className: styles.bg, style: {
                         fill: backgroundColor,
                     }, d: getPath({
-                        size: size,
+                        size: Math.max(width, height),
                         hasTopAddons: hasTopAddons,
                         hasBottomAddons: hasBottomAddons,
                         hasIndicator: hasIndicator,
@@ -32,33 +33,39 @@ var BaseShape = forwardRef(function (_a, ref) {
                     React.createElement("path", { style: {
                             fill: "url(#".concat(imagePatternId, ")"),
                         }, d: getPath({
-                            size: size,
+                            size: Math.max(width, height),
                             hasTopAddons: hasTopAddons,
                             hasBottomAddons: hasBottomAddons,
                             hasIndicator: hasIndicator,
                             pathsMap: pathsMap.shape,
                         }) }))),
-                Icon && !imageUrl && (React.createElement(Fragment, null,
+                Icon && (React.createElement(Fragment, null,
                     React.createElement("defs", null,
                         React.createElement("pattern", { id: svgPatternId, width: '100%', height: '100%' },
-                            React.createElement(Icon, { width: size, height: size }))),
+                            React.createElement(Icon, { width: width, height: height }))),
                     React.createElement("path", { style: {
                             fill: "url(#".concat(svgPatternId, ")"),
                         }, d: getPath({
-                            size: size,
+                            size: Math.max(width, height),
                             hasTopAddons: hasTopAddons,
                             hasBottomAddons: hasBottomAddons,
                             hasIndicator: hasIndicator,
                             pathsMap: pathsMap.shape,
                         }) }))),
-                border && (React.createElement("path", { className: styles.border, d: getPath({
-                        size: size,
+                border && (React.createElement("path", { className: styles.border, style: typeof border === 'object'
+                        ? {
+                            stroke: border.color,
+                            strokeWidth: border.width,
+                        }
+                        : undefined, d: getPath({
+                        size: Math.max(width, height),
                         hasTopAddons: hasTopAddons,
                         hasBottomAddons: hasBottomAddons,
                         hasIndicator: hasIndicator,
                         pathsMap: pathsMap.border,
                     }) }))),
-            !imageUrl && !Icon && React.createElement("div", { className: styles.children }, children)),
+            text && React.createElement("div", { className: styles.text }, text),
+            children && React.createElement("div", { className: styles.children }, children)),
         hasTopAddons && (React.createElement("div", { className: cn(styles.addons, styles.topAddons) }, topAddons)),
         hasBottomAddons && (React.createElement("div", { className: cn(styles.addons, styles.bottomAddons) }, bottomAddons)),
         hasIndicator && !hasTopAddons && (React.createElement("div", { className: cn(styles.addons, styles.indicator) }, indicator))));

package/icon-view/esm/components/base-shape/index.css

@@ -25,7 +25,10 @@
     display: inline-flex;
 } .icon-view__component_j6ogi {
     display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
+    overflow: hidden;
     color: var(--icon-view-color);
 } .icon-view__bg_j6ogi {
     fill: var(--icon-view-bg-color);
@@ -33,6 +36,17 @@
     stroke: var(--color-light-specialbg-component);
     stroke-width: 1px;
     fill: transparent;
+} .icon-view__text_j6ogi {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    text-align: center;
 } .icon-view__children_j6ogi {
     display: flex;
     justify-content: center;
@@ -51,6 +65,9 @@
     flex-shrink: 0;
     position: absolute;
     line-height: 0;
+} .icon-view__size_128_j6ogi {
+    width: 128px;
+    height: 128px
 } .icon-view__size_128_j6ogi .icon-view__children_j6ogi {
         width: 64px;
         height: 64px;
@@ -63,7 +80,10 @@
     } .icon-view__size_128_j6ogi .icon-view__bottomAddons_j6ogi {
         bottom: -8px;
         right: -8px;
-    } .icon-view__size_80_j6ogi .icon-view__children_j6ogi {
+    } .icon-view__size_80_j6ogi {
+    width: 80px;
+    height: 80px
+} .icon-view__size_80_j6ogi .icon-view__children_j6ogi {
         width: 48px;
         height: 48px;
     } .icon-view__size_80_j6ogi .icon-view__addons_j6ogi {
@@ -78,7 +98,10 @@
     } .icon-view__size_80_j6ogi .icon-view__indicator_j6ogi {
         top: -6px;
         right: -14px;
-    } .icon-view__size_64_j6ogi .icon-view__children_j6ogi {
+    } .icon-view__size_64_j6ogi {
+    width: 64px;
+    height: 64px
+} .icon-view__size_64_j6ogi .icon-view__children_j6ogi {
         width: 32px;
         height: 32px;
     } .icon-view__size_64_j6ogi .icon-view__addons_j6ogi {
@@ -93,7 +116,10 @@
     } .icon-view__size_64_j6ogi .icon-view__indicator_j6ogi {
         top: -8px;
         right: -16px;
-    } .icon-view__size_48_j6ogi .icon-view__children_j6ogi {
+    } .icon-view__size_48_j6ogi {
+    width: 48px;
+    height: 48px
+} .icon-view__size_48_j6ogi .icon-view__children_j6ogi {
         width: 24px;
         height: 24px;
     } .icon-view__size_48_j6ogi .icon-view__addons_j6ogi {
@@ -108,7 +134,10 @@
     } .icon-view__size_48_j6ogi .icon-view__indicator_j6ogi {
         top: -7px;
         right: -13px;
-    } .icon-view__size_40_j6ogi .icon-view__children_j6ogi {
+    } .icon-view__size_40_j6ogi {
+    width: 40px;
+    height: 40px
+} .icon-view__size_40_j6ogi .icon-view__children_j6ogi {
         width: 24px;
         height: 24px;
     } .icon-view__size_40_j6ogi .icon-view__addons_j6ogi {
@@ -123,19 +152,28 @@
     } .icon-view__size_40_j6ogi .icon-view__indicator_j6ogi {
         top: -7px;
         right: -13px;
-    } .icon-view__size_32_j6ogi .icon-view__children_j6ogi {
+    } .icon-view__size_32_j6ogi {
+    width: 32px;
+    height: 32px
+} .icon-view__size_32_j6ogi .icon-view__children_j6ogi {
         width: 24px;
         height: 24px;
     } .icon-view__size_32_j6ogi .icon-view__indicator_j6ogi {
         top: -2px;
         right: -2px;
-    } .icon-view__size_24_j6ogi .icon-view__children_j6ogi {
+    } .icon-view__size_24_j6ogi {
+    width: 24px;
+    height: 24px
+} .icon-view__size_24_j6ogi .icon-view__children_j6ogi {
         width: 24px;
         height: 24px;
     } .icon-view__size_24_j6ogi .icon-view__indicator_j6ogi {
         top: -2px;
         right: -2px;
-    } .icon-view__size_20_j6ogi .icon-view__children_j6ogi {
+    } .icon-view__size_20_j6ogi {
+    width: 20px;
+    height: 20px
+} .icon-view__size_20_j6ogi .icon-view__children_j6ogi {
         width: 16px;
         height: 16px;
     } .icon-view__size_20_j6ogi .icon-view__indicator_j6ogi {

package/icon-view/esm/components/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./super-ellipse/index";
 export * from "./circle/index";
+export * from "./rectangle/index";
+export * from "./no-shape/index";
 export * from "./base-shape/index";

package/icon-view/esm/components/index.js

@@ -1,10 +1,14 @@
 export { SuperEllipse } from './super-ellipse/component.js';
 export { Circle } from './circle/component.js';
+export { Rectangle } from './rectangle/component.js';
+export { NoShape } from './no-shape/component.js';
 export { BaseShape } from './base-shape/component.js';
 import 'tslib';
 import 'react';
 import 'classnames';
 import '@alfalab/hooks';
 import './super-ellipse/paths.js';
-import './circle/paths.js';
 import './base-shape/utils.js';
+import './circle/paths.js';
+import './rectangle/paths.js';
+import './no-shape/paths.js';

package/icon-view/esm/components/no-shape/component.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+import { BaseShapeProps } from "../base-shape/index";
+type NoShapeProps = Omit<BaseShapeProps, 'pathsMap' | 'size' | 'topAddons' | 'bottomAddons' | 'indicator' | 'border'> & {
+    /**
+     * Размер компонента
+     * @default 64
+     */
+    size?: 20 | 24 | 32 | 40 | 48 | 64 | 80 | 128;
+    /**
+     * Дочерний компонент
+     */
+    children?: ReactNode;
+};
+declare const NoShape: React.ForwardRefExoticComponent<Omit<BaseShapeProps, "size" | "pathsMap" | "border" | "topAddons" | "bottomAddons" | "indicator"> & {
+    /**
+     * Размер компонента
+     * @default 64
+     */
+    size?: 64 | 32 | 128 | 20 | 24 | 40 | 48 | 80 | undefined;
+    /**
+     * Дочерний компонент
+     */
+    children?: ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export { NoShapeProps, NoShape };

package/icon-view/esm/components/no-shape/component.js

@@ -0,0 +1,11 @@
+import { __assign } from 'tslib';
+import React, { forwardRef } from 'react';
+import { BaseShape } from '../base-shape/component.js';
+import { pathsMap } from './paths.js';
+import 'classnames';
+import '@alfalab/hooks';
+import '../base-shape/utils.js';
+
+var NoShape = forwardRef(function (props, ref) { return (React.createElement(BaseShape, __assign({}, props, { pathsMap: pathsMap, ref: ref }))); });
+
+export { NoShape };

package/icon-view/esm/components/no-shape/index.d.ts

@@ -0,0 +1 @@
+export * from "./component";

package/icon-view/esm/components/no-shape/index.js

@@ -0,0 +1,8 @@
+export { NoShape } from './component.js';
+import 'tslib';
+import 'react';
+import '../base-shape/component.js';
+import 'classnames';
+import '@alfalab/hooks';
+import './paths.js';
+import '../base-shape/utils.js';

package/icon-view/esm/components/no-shape/paths.d.ts

@@ -0,0 +1,81 @@
+declare const shapePaths: {
+    20: {
+        none: string;
+    };
+    24: {
+        none: string;
+    };
+    32: {
+        none: string;
+    };
+    40: {
+        none: string;
+    };
+    48: {
+        none: string;
+    };
+    64: {
+        none: string;
+    };
+    80: {
+        none: string;
+    };
+    128: {
+        none: string;
+    };
+};
+declare const pathsMap: {
+    shape: {
+        20: {
+            none: string;
+        };
+        24: {
+            none: string;
+        };
+        32: {
+            none: string;
+        };
+        40: {
+            none: string;
+        };
+        48: {
+            none: string;
+        };
+        64: {
+            none: string;
+        };
+        80: {
+            none: string;
+        };
+        128: {
+            none: string;
+        };
+    };
+    border: {
+        20: {
+            none: string;
+        };
+        24: {
+            none: string;
+        };
+        32: {
+            none: string;
+        };
+        40: {
+            none: string;
+        };
+        48: {
+            none: string;
+        };
+        64: {
+            none: string;
+        };
+        80: {
+            none: string;
+        };
+        128: {
+            none: string;
+        };
+    };
+};
+export { shapePaths, pathsMap };

package/icon-view/esm/components/no-shape/paths.js

@@ -0,0 +1,32 @@
+var shapePaths = {
+    20: {
+        none: 'M0 0 H20 V20 H0 Z',
+    },
+    24: {
+        none: 'M0 0 H24 V24 H0 Z',
+    },
+    32: {
+        none: 'M0 0 H32 V32 H0 Z',
+    },
+    40: {
+        none: 'M0 0 H40 V40 H0 Z',
+    },
+    48: {
+        none: 'M0 0 H48 V48 H0 Z',
+    },
+    64: {
+        none: 'M0 0 H64 V64 H0 Z',
+    },
+    80: {
+        none: 'M0 0 H80 V80 H0 Z',
+    },
+    128: {
+        none: 'M0 0 H128 V128 H0 Z',
+    },
+};
+var pathsMap = {
+    shape: shapePaths,
+    border: shapePaths,
+};
+
+export { pathsMap, shapePaths };

package/icon-view/esm/components/rectangle/component.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+import { BaseShapeProps } from "../base-shape/index";
+type RectangleProps = Omit<BaseShapeProps, 'pathsMap' | 'size' | 'topAddons' | 'bottomAddons' | 'indicator'> & {
+    /**
+     * Размер компонента
+     * @default 64
+     */
+    size?: 20 | 24 | 32 | 40 | 48 | 64 | 80 | 128;
+    /**
+     * Дочерний компонент
+     */
+    children?: ReactNode;
+};
+declare const Rectangle: React.ForwardRefExoticComponent<Omit<BaseShapeProps, "size" | "pathsMap" | "topAddons" | "bottomAddons" | "indicator"> & {
+    /**
+     * Размер компонента
+     * @default 64
+     */
+    size?: 64 | 32 | 128 | 20 | 24 | 40 | 48 | 80 | undefined;
+    /**
+     * Дочерний компонент
+     */
+    children?: ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export { RectangleProps, Rectangle };

package/icon-view/esm/components/rectangle/component.js

@@ -0,0 +1,24 @@
+import { __rest, __assign } from 'tslib';
+import React, { forwardRef } from 'react';
+import { BaseShape } from '../base-shape/component.js';
+import { pathsMap } from './paths.js';
+import 'classnames';
+import '@alfalab/hooks';
+import '../base-shape/utils.js';
+
+var heights = {
+    20: 14,
+    24: 16,
+    32: 22,
+    40: 28,
+    48: 34,
+    64: 46,
+    80: 58,
+    128: 94,
+};
+var Rectangle = forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? 64 : _b, props = __rest(_a, ["size"]);
+    return (React.createElement(BaseShape, __assign({}, props, { size: { width: size, height: heights[size] }, pathsMap: pathsMap, ref: ref })));
+});
+
+export { Rectangle };

package/icon-view/esm/components/rectangle/index.d.ts

@@ -0,0 +1 @@
+export * from "./component";

package/icon-view/esm/components/rectangle/index.js

@@ -0,0 +1,8 @@
+export { Rectangle } from './component.js';
+import 'tslib';
+import 'react';
+import '../base-shape/component.js';
+import 'classnames';
+import '@alfalab/hooks';
+import './paths.js';
+import '../base-shape/utils.js';

package/icon-view/esm/components/rectangle/paths.d.ts

@@ -0,0 +1,107 @@
+declare const borderPaths: {
+    20: {
+        none: string;
+    };
+    24: {
+        none: string;
+    };
+    32: {
+        none: string;
+    };
+    40: {
+        none: string;
+    };
+    48: {
+        none: string;
+    };
+    64: {
+        none: string;
+    };
+    80: {
+        none: string;
+    };
+    128: {
+        none: string;
+    };
+};
+declare const shapePaths: {
+    20: {
+        none: string;
+    };
+    24: {
+        none: string;
+    };
+    32: {
+        none: string;
+    };
+    40: {
+        none: string;
+    };
+    48: {
+        none: string;
+    };
+    64: {
+        none: string;
+    };
+    80: {
+        none: string;
+    };
+    128: {
+        none: string;
+    };
+};
+declare const pathsMap: {
+    shape: {
+        20: {
+            none: string;
+        };
+        24: {
+            none: string;
+        };
+        32: {
+            none: string;
+        };
+        40: {
+            none: string;
+        };
+        48: {
+            none: string;
+        };
+        64: {
+            none: string;
+        };
+        80: {
+            none: string;
+        };
+        128: {
+            none: string;
+        };
+    };
+    border: {
+        20: {
+            none: string;
+        };
+        24: {
+            none: string;
+        };
+        32: {
+            none: string;
+        };
+        40: {
+            none: string;
+        };
+        48: {
+            none: string;
+        };
+        64: {
+            none: string;
+        };
+        80: {
+            none: string;
+        };
+        128: {
+            none: string;
+        };
+    };
+};
+export { borderPaths, shapePaths, pathsMap };