@vkontakte/vkui 8.1.3 → 8.2.0

package/src/lib/fx.ts

@@ -1,3 +1,5 @@
+import { cubicBezierTwoDimensional } from './curve';
+
 /**
  * ease function
  * @param x absolute progress of the animation in bounds 0 (beginning) and 1 (end)
@@ -6,68 +8,8 @@ export function easeInOutSine(x: number): number {
   return 0.5 * (1 - Math.cos(Math.PI * x));
 }
 
-/**
- * JS-реализация cubic bezier
- *
- * Алгебраический метод решения взят из PRа {@link https://github.com/gre/bezier-easing/pull/57}
- */
-export function cubicBezier(mX1: number, mY1: number, mX2: number, mY2: number) {
-  if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
-    throw new Error('Bezier x values must be in [0, 1] range');
-  }
-
-  if (mX1 === mY1 && mX2 === mY2) {
-    return LinearEasing;
-  }
-
-  const a = 6 * (3 * mX1 - 3 * mX2 + 1);
-  const b = 6 * (mX2 - 2 * mX1);
-  const c = 3 * mX1;
-  const a2 = a * a;
-  const b2 = b * b;
-  const d = b / a;
-  const e = (3 * b * c) / a2 - (b2 * b) / (a2 * a);
-  const w1 = (2 * c) / a - b2 / a2;
-  const w = w1 * w1 * w1;
-  const o = 3 / a;
-  const ay = 3 * mY1 - 3 * mY2 + 1;
-  const by = mY2 - 2 * mY1;
-  const cy = 3 * mY1;
-
-  const funcX2T = a ? x2t : LinearEasing;
-
-  return (x: number) => {
-    if (x === 0 || x === 1) {
-      return x;
-    }
-    return funcY(funcX2T(x, e, o, w, d), ay, by, cy);
+export function cubicBezier(x1: number, y1: number, x2: number, y2: number) {
+  return function (progress: number): number {
+    return cubicBezierTwoDimensional(0, 0, x1, y1, x2, y2, 1, 1, progress)[1];
   };
 }
-
-function LinearEasing(x: number) {
-  return x;
-}
-
-function x2t(x: number, a: number, b: number, c: number, d: number) {
-  const q = a + b * x;
-  const s = q ** 2 + c;
-  if (s > 0) {
-    const root = Math.sqrt(s);
-    return Math.cbrt(q + root) + Math.cbrt(q - root) - d;
-  }
-  const l = Math.cbrt(Math.sqrt(q * q - s));
-  const angle = q ? Math.atan(Math.sqrt(-s) / q) : -Math.PI / 2;
-  let φ;
-  if (b < 0) {
-    φ = (q > 0 ? 2 * Math.PI : Math.PI) - angle;
-  } else if (d < 0) {
-    φ = (q > 0 ? 2 * Math.PI : -3 * Math.PI) + angle;
-  } else {
-    φ = (q > 0 ? 0 : Math.PI) + angle;
-  }
-  return 2 * l * Math.cos(φ / 3) - d;
-}
-
-function funcY(t: number, ay: number, by: number, cy: number) {
-  return ((ay * t + 3 * by) * t + cy) * t;
-}

package/src/lib/layouts/index.ts

@@ -7,6 +7,7 @@ export {
 } from './gaps';
 
 export type {
+  MarginProp,
   PaddingProp,
   InsetProp,
   SizeProp,

package/src/lib/layouts/layoutProps.ts

@@ -27,6 +27,7 @@ const CSS_GLOBAL_KEYWORDS: CSSGlobalValue[] = ['inherit', 'initial', 'unset'];
 
 const CSS_KEYWORDS = [...CSS_INTRINSIC_KEYWORDS, ...CSS_GLOBAL_KEYWORDS];
 const PADDING_VALUES = [...DESIGN_SYSTEM_SIZES, ...CSS_GLOBAL_KEYWORDS, 'system'];
+const MARGIN_VALUES = [...DESIGN_SYSTEM_SIZES, ...CSS_GLOBAL_KEYWORDS];
 const SIZE_VALUES = CSS_KEYWORDS;
 const MINMAX_SIZE_VALUES = [...CSS_KEYWORDS.filter((opt) => opt !== 'auto')];
 const FLEX_VALUES = CSS_GLOBAL_KEYWORDS;
@@ -49,6 +50,13 @@ export const SYSTEM_PADDING_VERTICAL = 'var(--vkui--size_base_padding_vertical--
 export const SYSTEM_PADDING_HORIZONTAL = 'var(--vkui--size_base_padding_horizontal--regular)';
 
 export const LAYOUT_PROPS = {
+  margin: MARGIN_VALUES,
+  marginInline: MARGIN_VALUES,
+  marginBlock: MARGIN_VALUES,
+  marginInlineStart: MARGIN_VALUES,
+  marginInlineEnd: MARGIN_VALUES,
+  marginBlockStart: MARGIN_VALUES,
+  marginBlockEnd: MARGIN_VALUES,
   padding: PADDING_VALUES,
   paddingInline: PADDING_VALUES,
   paddingBlock: PADDING_VALUES,

package/src/lib/layouts/resolveLayoutProps.ts

@@ -24,23 +24,25 @@ export function resolveLayoutProps<T extends ComponentProps>(
   let resolvedStyle: React.CSSProperties | undefined;
 
   for (const key in LAYOUT_PROPS) {
-    if (key in outProps && outProps[key] !== undefined) {
-      const propDef = LAYOUT_PROPS[key as LayoutPropKeys];
-      const value = outProps[key];
-      const cssProperty = key.replace(/([A-Z])/g, '-$1').toLowerCase();
-      if (typeof value === 'string' && (propDef as string[]).includes(value)) {
-        resolvedClassName = classNames(
-          resolvedClassName,
-          generateConstantClassName(cssProperty, value),
-        );
-      } else if (key !== 'position' && !key.startsWith('overflow')) {
-        resolvedClassName = classNames(resolvedClassName, generateVariableClassName(cssProperty));
-        resolvedStyle = mergeStyle(resolvedStyle, {
-          [generateVariable(cssProperty)]:
-            typeof value === 'number' && key !== 'flexGrow' && key !== 'flexShrink'
-              ? `${value}px`
-              : value,
-        });
+    if (key in outProps) {
+      if (outProps[key] !== undefined) {
+        const propDef = LAYOUT_PROPS[key as LayoutPropKeys];
+        const value = outProps[key];
+        const cssProperty = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+        if (typeof value === 'string' && (propDef as string[]).includes(value)) {
+          resolvedClassName = classNames(
+            resolvedClassName,
+            generateConstantClassName(cssProperty, value),
+          );
+        } else if (key !== 'position' && !key.startsWith('overflow')) {
+          resolvedClassName = classNames(resolvedClassName, generateVariableClassName(cssProperty));
+          resolvedStyle = mergeStyle(resolvedStyle, {
+            [generateVariable(cssProperty)]:
+              typeof value === 'number' && key !== 'flexGrow' && key !== 'flexShrink'
+                ? `${value}px`
+                : value,
+          });
+        }
       }
       delete outProps[key];
     }

package/src/lib/layouts/types.ts

@@ -18,6 +18,7 @@ export type PaddingProp = LiteralUnion<
   DesignSystemSize | CSSGlobalValue | 'system',
   number | string
 >;
+export type MarginProp = LiteralUnion<DesignSystemSize | CSSGlobalValue, number | string>;
 
 // Типы для параметров позиционирования
 export type InsetProp = LiteralUnion<DesignSystemSize | CSSGlobalValue | 'auto', number | string>;
@@ -39,6 +40,34 @@ type AlignSelfProp = SelfPositionProp | 'baseline' | 'stretch';
 type JustifySelfProp = SelfPositionProp | 'baseline' | 'stretch';
 
 export interface LayoutProps {
+  /**
+   * Внешние отступы со всех сторон.
+   */
+  margin?: MarginProp | undefined;
+  /**
+   * Внешние отступы по строчной оси.
+   */
+  marginInline?: MarginProp | undefined;
+  /**
+   * Внешние отступы по блочной оси.
+   */
+  marginBlock?: MarginProp | undefined;
+  /**
+   * Внешний начальный отступ по строчной оси.
+   */
+  marginInlineStart?: MarginProp | undefined;
+  /**
+   * Внешний конечный отступ по строчной оси.
+   */
+  marginInlineEnd?: MarginProp | undefined;
+  /**
+   * Внешний начальный отступ по блочной оси.
+   */
+  marginBlockStart?: MarginProp | undefined;
+  /**
+   * Внешний конечный отступ по блочной оси.
+   */
+  marginBlockEnd?: MarginProp | undefined;
   /**
    * Внутренние отступы со всех сторон.
    */

package/src/lib/material/shapes/Shape.tsx

@@ -0,0 +1,17 @@
+import { RootComponent } from '../../../components/RootComponent/RootComponent';
+import { type HasRootRef } from '../../../types';
+import { svgPathToString } from '../../svg/path/path';
+import * as shapes from './shapes';
+
+export interface ShapeProps extends React.ComponentProps<'svg'>, HasRootRef<SVGElement> {
+  size?: number;
+  params: shapes.ShapeParameters;
+}
+
+export function Shape({ size = 24, params, ...props }: ShapeProps) {
+  return (
+    <RootComponent Component="svg" width={size} height={size} {...props}>
+      <path d={svgPathToString(shapes.shape(params, size))} fill="currentColor" />
+    </RootComponent>
+  );
+}

package/src/lib/material/shapes/shapes.ts

@@ -0,0 +1,329 @@
+/**
+ * Набор форм M3
+ *
+ * https://m3.material.io/styles/shape/overview-principles
+ */
+import { type DeepReadonly, type ReadonlyWeakMap } from '../../../types';
+import { type SVGPathSupport } from '../../svg/path/path';
+import * as transform from '../../svg/path/transform';
+
+export interface ShapeParameters {
+  /**
+   * SVG путь для фигуры размером [0,1] на [0,1]
+   */
+  readonly path: DeepReadonly<SVGPathSupport>;
+  /**
+   * Масштабирующий коэффициент предназначен для возможности помещения
+   * в произвольный контейнер фигуры учитывая вращение
+   */
+  readonly rotateScaleFactor: number;
+}
+
+/**
+ * Возвращает фигуру определенного размера
+ */
+export function shape(shapeParams: ShapeParameters, size: number): SVGPathSupport {
+  return transform.scale(shapeParams.path, size, size);
+}
+
+/**
+ * Возвращает фигуру с возможностью поворота, которая помещается в контейнер
+ * определенного размера
+ */
+export function shapeWithRotate(shapeParams: ShapeParameters, size: number): SVGPathSupport {
+  const scaleSize = shapeParams.rotateScaleFactor * size;
+  const translateFactor = (size - scaleSize) / 2;
+
+  return transform.translate(shape(shapeParams, scaleSize), translateFactor, translateFactor);
+}
+
+export const ovalParams: ShapeParameters = {
+  path: [
+    ['M', [0.771, 0.771]],
+    ['C', [0.539, 1.003, 0.2296, 1.0698, 0.0799, 0.9201]],
+    ['C', [-0.0698, 0.7704, -0.003, 0.461, 0.229, 0.229]],
+    ['C', [0.461, -0.003, 0.7704, -0.0698, 0.9201, 0.0799]],
+    ['C', [1.0698, 0.2296, 1.003, 0.539, 0.771, 0.771]],
+    ['Z', []],
+  ],
+  rotateScaleFactor: 30 / 38,
+};
+
+export const cookie4Params: ShapeParameters = {
+  path: [
+    ['M', [0.6383, 0.0222]],
+    ['C', [0.8531, -0.0711, 1.0711, 0.1469, 0.9778, 0.3617]],
+    ['L', [0.9624, 0.3972]],
+    ['C', [0.9339, 0.4628, 0.9339, 0.5372, 0.9624, 0.6028]],
+    ['L', [0.9778, 0.6383]],
+    ['C', [1.0711, 0.8531, 0.8531, 1.0711, 0.6383, 0.9778]],
+    ['L', [0.6028, 0.9624]],
+    ['C', [0.5372, 0.9339, 0.4628, 0.9339, 0.3972, 0.9624]],
+    ['L', [0.3617, 0.9778]],
+    ['C', [0.1469, 1.0711, -0.0711, 0.8531, 0.0222, 0.6383]],
+    ['L', [0.0376, 0.6028]],
+    ['C', [0.0661, 0.5372, 0.0661, 0.4628, 0.0376, 0.3972]],
+    ['L', [0.0222, 0.3617]],
+    ['C', [-0.0711, 0.1469, 0.1469, -0.0711, 0.3617, 0.0222]],
+    ['L', [0.3972, 0.0376]],
+    ['C', [0.4628, 0.0661, 0.5372, 0.0661, 0.6028, 0.0376]],
+    ['L', [0.6383, 0.0222]],
+    ['Z', []],
+  ],
+  rotateScaleFactor: 28 / 38,
+};
+
+export const sunnyParams: ShapeParameters = {
+  path: [
+    ['M', [0.7702, 0.1213]],
+    ['C', [0.8013, 0.1234, 0.8168, 0.1245, 0.8294, 0.13]],
+    ['C', [0.8476, 0.1379, 0.8621, 0.1524, 0.87, 0.1706]],
+    ['C', [0.8755, 0.1832, 0.8766, 0.1987, 0.8787, 0.2298]],
+    ['L', [0.8835, 0.3008]],
+    ['C', [0.8844, 0.3134, 0.8848, 0.3197, 0.8862, 0.3257]],
+    ['C', [0.8882, 0.3344, 0.8916, 0.3426, 0.8963, 0.3502]],
+    ['C', [0.8996, 0.3554, 0.9038, 0.3601, 0.912, 0.3696]],
+    ['L', [0.9588, 0.4232]],
+    ['C', [0.9793, 0.4467, 0.9896, 0.4585, 0.9946, 0.4712]],
+    ['C', [1.0018, 0.4897, 1.0018, 0.5103, 0.9946, 0.5287]],
+    ['C', [0.9896, 0.5415, 0.9793, 0.5533, 0.9588, 0.5768]],
+    ['L', [0.912, 0.6303]],
+    ['C', [0.9038, 0.6398, 0.8996, 0.6446, 0.8963, 0.6498]],
+    ['C', [0.8916, 0.6573, 0.8882, 0.6656, 0.8862, 0.6743]],
+    ['C', [0.8848, 0.6803, 0.8844, 0.6866, 0.8835, 0.6992]],
+    ['L', [0.8787, 0.7702]],
+    ['C', [0.8766, 0.8013, 0.8755, 0.8168, 0.87, 0.8294]],
+    ['C', [0.8621, 0.8476, 0.8476, 0.8621, 0.8294, 0.87]],
+    ['C', [0.8168, 0.8755, 0.8013, 0.8766, 0.7702, 0.8787]],
+    ['L', [0.6992, 0.8835]],
+    ['C', [0.6866, 0.8844, 0.6803, 0.8848, 0.6743, 0.8862]],
+    ['C', [0.6656, 0.8882, 0.6573, 0.8916, 0.6498, 0.8963]],
+    ['C', [0.6446, 0.8996, 0.6398, 0.9038, 0.6303, 0.912]],
+    ['L', [0.5768, 0.9588]],
+    ['C', [0.5533, 0.9793, 0.5415, 0.9896, 0.5287, 0.9946]],
+    ['C', [0.5103, 1.0018, 0.4897, 1.0018, 0.4712, 0.9946]],
+    ['C', [0.4585, 0.9896, 0.4467, 0.9793, 0.4232, 0.9588]],
+    ['L', [0.3696, 0.912]],
+    ['C', [0.3601, 0.9038, 0.3554, 0.8996, 0.3502, 0.8963]],
+    ['C', [0.3426, 0.8916, 0.3344, 0.8882, 0.3257, 0.8862]],
+    ['C', [0.3197, 0.8848, 0.3134, 0.8844, 0.3008, 0.8835]],
+    ['L', [0.2298, 0.8787]],
+    ['C', [0.1987, 0.8766, 0.1832, 0.8755, 0.1706, 0.87]],
+    ['C', [0.1524, 0.8621, 0.1379, 0.8476, 0.13, 0.8294]],
+    ['C', [0.1245, 0.8168, 0.1234, 0.8013, 0.1213, 0.7702]],
+    ['L', [0.1165, 0.6992]],
+    ['C', [0.1156, 0.6866, 0.1152, 0.6803, 0.1138, 0.6743]],
+    ['C', [0.1118, 0.6656, 0.1084, 0.6573, 0.1037, 0.6498]],
+    ['C', [0.1004, 0.6446, 0.0962, 0.6398, 0.0879, 0.6303]],
+    ['L', [0.0412, 0.5768]],
+    ['C', [0.0207, 0.5533, 0.0104, 0.5415, 0.0054, 0.5287]],
+    ['C', [-0.0018, 0.5103, -0.0018, 0.4897, 0.0054, 0.4712]],
+    ['C', [0.0104, 0.4585, 0.0207, 0.4467, 0.0412, 0.4232]],
+    ['L', [0.0879, 0.3696]],
+    ['C', [0.0962, 0.3601, 0.1004, 0.3554, 0.1037, 0.3502]],
+    ['C', [0.1084, 0.3426, 0.1118, 0.3344, 0.1138, 0.3257]],
+    ['C', [0.1152, 0.3197, 0.1156, 0.3134, 0.1165, 0.3008]],
+    ['L', [0.1213, 0.2298]],
+    ['C', [0.1234, 0.1987, 0.1245, 0.1832, 0.13, 0.1706]],
+    ['C', [0.1379, 0.1524, 0.1524, 0.1379, 0.1706, 0.13]],
+    ['C', [0.1832, 0.1245, 0.1987, 0.1234, 0.2298, 0.1213]],
+    ['L', [0.3008, 0.1165]],
+    ['C', [0.3134, 0.1156, 0.3197, 0.1152, 0.3257, 0.1138]],
+    ['C', [0.3344, 0.1118, 0.3426, 0.1084, 0.3502, 0.1037]],
+    ['C', [0.3554, 0.1004, 0.3601, 0.0962, 0.3696, 0.0879]],
+    ['L', [0.4232, 0.0412]],
+    ['C', [0.4467, 0.0207, 0.4585, 0.0104, 0.4712, 0.0054]],
+    ['C', [0.4897, -0.0018, 0.5103, -0.0018, 0.5287, 0.0054]],
+    ['C', [0.5415, 0.0104, 0.5533, 0.0207, 0.5768, 0.0412]],
+    ['L', [0.6303, 0.0879]],
+    ['C', [0.6398, 0.0962, 0.6446, 0.1004, 0.6498, 0.1037]],
+    ['C', [0.6573, 0.1084, 0.6656, 0.1118, 0.6743, 0.1138]],
+    ['C', [0.6803, 0.1152, 0.6866, 0.1156, 0.6992, 0.1165]],
+    ['L', [0.7702, 0.1213]],
+    ['Z', []],
+  ],
+  rotateScaleFactor: 34 / 38,
+};
+
+export const pillParams: ShapeParameters = {
+  path: [
+    ['M', [0.2662, 0.1259]],
+    ['C', [0.4341, -0.042, 0.7062, -0.042, 0.8741, 0.1259]],
+    ['C', [1.042, 0.2938, 1.042, 0.5659, 0.8741, 0.7338]],
+    ['L', [0.7338, 0.8741]],
+    ['C', [0.5659, 1.042, 0.2938, 1.042, 0.1259, 0.8741]],
+    ['C', [-0.042, 0.7062, -0.042, 0.4341, 0.1259, 0.2662]],
+    ['L', [0.2662, 0.1259]],
+    ['Z', []],
+  ],
+  rotateScaleFactor: 30 / 38,
+};
+
+export const pentagonParams: ShapeParameters = {
+  path: [
+    ['M', [0.3426, 0.0864]],
+    ['C', [0.3914, 0.0509, 0.4158, 0.0331, 0.4418, 0.0243]],
+    ['C', [0.4795, 0.0115, 0.5205, 0.0115, 0.5582, 0.0243]],
+    ['C', [0.5842, 0.0331, 0.6086, 0.0509, 0.6574, 0.0864]],
+    ['L', [0.7641, 0.1641]],
+    ['L', [0.8707, 0.237]],
+    ['C', [0.9213, 0.2715, 0.9466, 0.2888, 0.9635, 0.3105]],
+    ['C', [0.988, 0.3419, 1.0008, 0.3806, 1, 0.4201]],
+    ['C', [0.9994, 0.4474, 0.9893, 0.4759, 0.9692, 0.533]],
+    ['L', [0.9273, 0.6519]],
+    ['L', [0.8887, 0.7738]],
+    ['C', [0.8705, 0.8309, 0.8615, 0.8595, 0.8456, 0.8818]],
+    ['C', [0.8227, 0.9139, 0.7894, 0.9376, 0.751, 0.9489]],
+    ['C', [0.7245, 0.9568, 0.6939, 0.9563, 0.6328, 0.9554]],
+    ['L', [0.5, 0.9534]],
+    ['L', [0.3672, 0.9554]],
+    ['C', [0.3061, 0.9563, 0.2755, 0.9568, 0.249, 0.9489]],
+    ['C', [0.2106, 0.9376, 0.1773, 0.9139, 0.1544, 0.8818]],
+    ['C', [0.1385, 0.8595, 0.1295, 0.8309, 0.1113, 0.7738]],
+    ['L', [0.0727, 0.6519]],
+    ['L', [0.0308, 0.533]],
+    ['C', [0.0107, 0.4759, 0.0006, 0.4474, 0, 0.4201]],
+    ['C', [-0.0008, 0.3806, 0.012, 0.3419, 0.0365, 0.3105]],
+    ['C', [0.0534, 0.2888, 0.0787, 0.2715, 0.1293, 0.237]],
+    ['L', [0.2359, 0.1641]],
+    ['L', [0.3426, 0.0864]],
+    ['Z', []],
+  ],
+  rotateScaleFactor: 34 / 38,
+};
+
+export const cookie9Params: ShapeParameters = {
+  path: [
+    ['M', [0.3914, 0.0472]],
+    ['C', [0.3968, 0.0428, 0.3995, 0.0406, 0.402, 0.0387]],
+    ['C', [0.46, -0.0051, 0.54, -0.0051, 0.598, 0.0387]],
+    ['C', [0.6005, 0.0406, 0.6032, 0.0428, 0.6086, 0.0472]],
+    ['C', [0.611, 0.0491, 0.6122, 0.0501, 0.6134, 0.051]],
+    ['C', [0.6406, 0.0725, 0.6741, 0.0846, 0.7088, 0.0857]],
+    ['C', [0.7103, 0.0858, 0.7119, 0.0858, 0.715, 0.0858]],
+    ['C', [0.7219, 0.0859, 0.7254, 0.0859, 0.7285, 0.0861]],
+    ['C', [0.8011, 0.0898, 0.8625, 0.1411, 0.8787, 0.2118]],
+    ['C', [0.8794, 0.2148, 0.88, 0.2182, 0.8813, 0.2251]],
+    ['C', [0.8819, 0.2281, 0.8822, 0.2296, 0.8825, 0.2311]],
+    ['C', [0.8896, 0.265, 0.9074, 0.2958, 0.9333, 0.3189]],
+    ['C', [0.9344, 0.3199, 0.9356, 0.3209, 0.9379, 0.3229]],
+    ['C', [0.9432, 0.3274, 0.9458, 0.3297, 0.9481, 0.3318]],
+    ['C', [1.0014, 0.3812, 1.0153, 0.4598, 0.9821, 0.5244]],
+    ['C', [0.9807, 0.5271, 0.979, 0.5302, 0.9756, 0.5362]],
+    ['C', [0.9741, 0.5389, 0.9733, 0.5403, 0.9726, 0.5416]],
+    ['C', [0.9562, 0.5722, 0.95, 0.6071, 0.955, 0.6414]],
+    ['C', [0.9552, 0.6429, 0.9555, 0.6445, 0.956, 0.6475]],
+    ['C', [0.9571, 0.6544, 0.9576, 0.6578, 0.958, 0.6609]],
+    ['C', [0.967, 0.7328, 0.927, 0.802, 0.86, 0.8302]],
+    ['C', [0.8572, 0.8314, 0.8539, 0.8327, 0.8474, 0.8351]],
+    ['C', [0.8445, 0.8362, 0.843, 0.8368, 0.8416, 0.8373]],
+    ['C', [0.8094, 0.8502, 0.7821, 0.873, 0.7638, 0.9025]],
+    ['C', [0.763, 0.9038, 0.7622, 0.9051, 0.7606, 0.9078]],
+    ['C', [0.7571, 0.9137, 0.7553, 0.9167, 0.7536, 0.9193]],
+    ['C', [0.7142, 0.9802, 0.6389, 1.0075, 0.5694, 0.9862]],
+    ['C', [0.5665, 0.9853, 0.5632, 0.9841, 0.5566, 0.9818]],
+    ['C', [0.5537, 0.9808, 0.5522, 0.9803, 0.5508, 0.9798]],
+    ['C', [0.5178, 0.969, 0.4822, 0.969, 0.4492, 0.9798]],
+    ['C', [0.4478, 0.9803, 0.4463, 0.9808, 0.4434, 0.9818]],
+    ['C', [0.4368, 0.9841, 0.4335, 0.9853, 0.4306, 0.9862]],
+    ['C', [0.3611, 1.0075, 0.2858, 0.9802, 0.2464, 0.9193]],
+    ['C', [0.2447, 0.9167, 0.2429, 0.9137, 0.2394, 0.9078]],
+    ['C', [0.2378, 0.9051, 0.237, 0.9038, 0.2362, 0.9025]],
+    ['C', [0.2179, 0.873, 0.1906, 0.8502, 0.1584, 0.8373]],
+    ['C', [0.157, 0.8368, 0.1555, 0.8362, 0.1526, 0.8351]],
+    ['C', [0.1461, 0.8327, 0.1428, 0.8314, 0.14, 0.8302]],
+    ['C', [0.073, 0.802, 0.033, 0.7328, 0.042, 0.6609]],
+    ['C', [0.0424, 0.6578, 0.0429, 0.6544, 0.044, 0.6475]],
+    ['C', [0.0445, 0.6445, 0.0448, 0.6429, 0.045, 0.6414]],
+    ['C', [0.05, 0.6071, 0.0438, 0.5722, 0.0274, 0.5416]],
+    ['C', [0.0267, 0.5403, 0.0259, 0.5389, 0.0244, 0.5362]],
+    ['C', [0.021, 0.5302, 0.0193, 0.5271, 0.0179, 0.5244]],
+    ['C', [-0.0153, 0.4598, -0.0014, 0.3812, 0.0519, 0.3318]],
+    ['C', [0.0542, 0.3297, 0.0568, 0.3274, 0.0621, 0.3229]],
+    ['C', [0.0644, 0.3209, 0.0656, 0.3199, 0.0667, 0.3189]],
+    ['C', [0.0926, 0.2958, 0.1104, 0.265, 0.1175, 0.2311]],
+    ['C', [0.1178, 0.2296, 0.1181, 0.2281, 0.1187, 0.2251]],
+    ['C', [0.12, 0.2182, 0.1206, 0.2148, 0.1213, 0.2118]],
+    ['C', [0.1375, 0.1411, 0.1989, 0.0898, 0.2715, 0.0861]],
+    ['C', [0.2746, 0.0859, 0.2781, 0.0859, 0.285, 0.0858]],
+    ['C', [0.2881, 0.0858, 0.2897, 0.0858, 0.2912, 0.0857]],
+    ['C', [0.3259, 0.0846, 0.3594, 0.0725, 0.3866, 0.051]],
+    ['C', [0.3878, 0.0501, 0.389, 0.0491, 0.3914, 0.0472]],
+    ['Z', []],
+  ],
+  rotateScaleFactor: 34 / 38,
+};
+
+export const softBurstParams: ShapeParameters = {
+  path: [
+    ['M', [0.4549, 0.0247]],
+    ['C', [0.4757, -0.0082, 0.5243, -0.0082, 0.545, 0.0247]],
+    ['L', [0.5947, 0.1036]],
+    ['C', [0.6084, 0.1253, 0.6359, 0.1341, 0.6598, 0.1245]],
+    ['L', [0.7471, 0.0894]],
+    ['C', [0.7835, 0.0747, 0.8229, 0.1029, 0.82, 0.1416]],
+    ['L', [0.8131, 0.2342]],
+    ['C', [0.8112, 0.2596, 0.8282, 0.2827, 0.8533, 0.2887]],
+    ['L', [0.9449, 0.3109]],
+    ['C', [0.9831, 0.3202, 0.9981, 0.3657, 0.9727, 0.3953]],
+    ['L', [0.9119, 0.4663]],
+    ['C', [0.8952, 0.4858, 0.8952, 0.5142, 0.9119, 0.5337]],
+    ['L', [0.9727, 0.6047]],
+    ['C', [0.9981, 0.6343, 0.9831, 0.6798, 0.9449, 0.6891]],
+    ['L', [0.8533, 0.7113]],
+    ['C', [0.8282, 0.7173, 0.8112, 0.7404, 0.8131, 0.7658]],
+    ['L', [0.82, 0.8584]],
+    ['C', [0.8229, 0.8971, 0.7835, 0.9252, 0.7471, 0.9106]],
+    ['L', [0.6598, 0.8755]],
+    ['C', [0.6359, 0.8659, 0.6084, 0.8747, 0.5947, 0.8964]],
+    ['L', [0.545, 0.9753]],
+    ['C', [0.5243, 1.0082, 0.4757, 1.0082, 0.4549, 0.9753]],
+    ['L', [0.4053, 0.8964]],
+    ['C', [0.3916, 0.8747, 0.3641, 0.8659, 0.3402, 0.8755]],
+    ['L', [0.2529, 0.9106]],
+    ['C', [0.2165, 0.9252, 0.1771, 0.8971, 0.18, 0.8584]],
+    ['L', [0.1869, 0.7658]],
+    ['C', [0.1888, 0.7404, 0.1718, 0.7173, 0.1467, 0.7113]],
+    ['L', [0.0551, 0.6891]],
+    ['C', [0.0169, 0.6798, 0.0019, 0.6343, 0.0273, 0.6047]],
+    ['L', [0.0881, 0.5337]],
+    ['C', [0.1048, 0.5142, 0.1048, 0.4858, 0.0881, 0.4663]],
+    ['L', [0.0273, 0.3953]],
+    ['C', [0.0019, 0.3657, 0.0169, 0.3202, 0.0551, 0.3109]],
+    ['L', [0.1467, 0.2887]],
+    ['C', [0.1718, 0.2827, 0.1888, 0.2596, 0.1869, 0.2342]],
+    ['L', [0.18, 0.1416]],
+    ['C', [0.1771, 0.1029, 0.2165, 0.0747, 0.2529, 0.0894]],
+    ['L', [0.3402, 0.1245]],
+    ['C', [0.3641, 0.1341, 0.3916, 0.1253, 0.4053, 0.1036]],
+    ['L', [0.4549, 0.0247]],
+    ['Z', []],
+  ],
+  rotateScaleFactor: 34 / 38,
+};
+
+/**
+ * Список всех форм
+ */
+export const shapeList = [
+  ovalParams,
+  pillParams,
+  pentagonParams,
+  sunnyParams,
+  cookie4Params,
+  cookie9Params,
+  softBurstParams,
+] as const;
+
+/**
+ * Название форм
+ */
+export const shapeNameMap: ReadonlyWeakMap<ShapeParameters, string> = new WeakMap([
+  [ovalParams, 'Oval'],
+  [pillParams, 'Pill'],
+  [pentagonParams, 'Pentagon'],
+  [sunnyParams, 'Sunny'],
+  [cookie4Params, '4-sided cookie'],
+  [cookie9Params, '9-sided cookie'],
+  [softBurstParams, 'Soft burst'],
+]);

package/src/lib/math.ts

@@ -0,0 +1,37 @@
+/**
+ * Длина гипотенузы
+ */
+function hypotenuse(a: number, b: number): number {
+  return Math.sqrt(a * a + b * b);
+}
+
+/**
+ * Евклидово расстояние между двумя точками
+ *
+ * ```ts
+ * import { distancePoint } from './math';
+ * import * as assert from 'node:assert/strict';
+ *
+ * assert.equal(distance(1, 1, 4, 5), 5)
+ * ```
+ */
+export function distance(x1: number, y1: number, x2: number, y2: number): number {
+  return hypotenuse(x1 - x2, y1 - y2);
+}
+
+/**
+ * Евклидово расстояние между двумя точками
+ *
+ * ```ts
+ * import { distancePoint } from './math';
+ * import * as assert from 'node:assert/strict';
+ *
+ * assert.equal(distancePoint([1, 1], [4, 5]), 5)
+ * ```
+ */
+export function distancePoint(
+  [x1, y1]: readonly [number, number],
+  [x2, y2]: readonly [number, number],
+): number {
+  return distance(x1, y1, x2, y2);
+}

package/src/lib/svg/path/approximate.ts

@@ -0,0 +1,81 @@
+import { type DeepReadonly } from '../../../types';
+import * as array from '../../array';
+import { cubicBezierTwoDimensional } from '../../curve';
+import { distancePoint } from '../../math';
+import type { SVGPathSupport } from './path';
+import { type Point, type Points } from './point';
+
+export interface MaxSegmentLengthOptions {
+  maxSegmentLength?: number;
+}
+
+/**
+ * Аппроксимирует кривую Безье в точки
+ */
+function approximateCurves(
+  prevPoint: [number, number],
+  args: [number, number, number, number, number, number],
+  { maxSegmentLength }: Required<MaxSegmentLengthOptions>,
+): Points {
+  const distancePoints = distancePoint([args[4], args[5]], prevPoint);
+  const acc: Points = new Array(Math.ceil(Math.max(2, distancePoints / maxSegmentLength)));
+
+  for (let index = 0; index < acc.length; index++) {
+    const progress = Math.min(1, (maxSegmentLength / distancePoints) * index);
+
+    acc[index] = cubicBezierTwoDimensional(
+      prevPoint[0],
+      prevPoint[1],
+      args[0],
+      args[1],
+      args[2],
+      args[3],
+      args[4],
+      args[5],
+      progress,
+    );
+  }
+
+  return acc;
+}
+
+/**
+ * Аппроксимирует svg путь в точки
+ *
+ * ```ts
+ * import * as approximate from './approximate';
+ * import * as assert from 'node:assert/strict';
+ *
+ * assert.equal(
+ *   approximate.approximateRing([['M', [20, 40]], ['L', [40, 60]]]),
+ *   [[20, 40], [40, 60]],
+ * );
+ * ```
+ */
+export function approximateRing(
+  path: DeepReadonly<SVGPathSupport>,
+  { maxSegmentLength = 1 }: MaxSegmentLengthOptions = {},
+): Points {
+  const prevPoint: Point = [0, 0];
+
+  return path.reduce<Points>((acc, [command, args]) => {
+    switch (command) {
+      case 'M':
+      case 'L':
+        acc.push(array.copy(args));
+        prevPoint[0] = args[0];
+        prevPoint[1] = args[1];
+        break;
+      case 'C':
+        acc.push(...approximateCurves(prevPoint, array.copy(args), { maxSegmentLength }));
+        prevPoint[0] = args[4];
+        prevPoint[1] = args[5];
+
+        break;
+      case 'Z':
+        break;
+    }
+
+    return acc;
+  }, []);
+}