mimir-ui-kit 1.24.0 → 1.24.1

package/dist/assets/Steps.css

@@ -1 +1 @@
-._container_1qg9i_2{display:flex;width:-webkit-max-content;width:-moz-max-content;width:max-content}._container_1qg9i_2 ._step_1qg9i_6{pointer-events:none}._container_1qg9i_2 ._step_1qg9i_6._editable_1qg9i_9{pointer-events:all}
+._container_1cq8d_2{display:flex;width:-webkit-max-content;width:-moz-max-content;width:max-content}._container_1cq8d_2 ._step_1cq8d_6{pointer-events:none}._container_1cq8d_2 ._step_1cq8d_6._editable_1cq8d_9{pointer-events:all}._container_1cq8d_2 ._step_1cq8d_6._resizable_1cq8d_12{flex:1 1 auto;height:var(--step-height);-webkit-clip-path:polygon(0% 100%,10.514% 29.275%,10.514% 29.275%,11.405% 24.129%,12.479% 19.395%,13.72% 15.104%,15.112% 11.286%,16.638% 7.972%,18.28% 5.192%,20.024% 2.977%,21.852% 1.357%,23.748% .363%,25.694% .025%,100% 0%,89.492% 70.725%,89.492% 70.725%,88.6% 75.871%,87.525% 80.605%,86.283% 84.896%,84.891% 88.714%,83.364% 92.028%,81.721% 94.808%,79.976% 97.023%,78.148% 98.643%,76.252% 99.637%,74.306% 99.975%,.003% 99.992%);clip-path:polygon(0% 100%,10.514% 29.275%,10.514% 29.275%,11.405% 24.129%,12.479% 19.395%,13.72% 15.104%,15.112% 11.286%,16.638% 7.972%,18.28% 5.192%,20.024% 2.977%,21.852% 1.357%,23.748% .363%,25.694% .025%,100% 0%,89.492% 70.725%,89.492% 70.725%,88.6% 75.871%,87.525% 80.605%,86.283% 84.896%,84.891% 88.714%,83.364% 92.028%,81.721% 94.808%,79.976% 97.023%,78.148% 98.643%,76.252% 99.637%,74.306% 99.975%,.003% 99.992%)}._container_1cq8d_2 ._step_1cq8d_6._resizable_1cq8d_12._XS_1cq8d_17{--step-height: 8px}._container_1cq8d_2 ._step_1cq8d_6._resizable_1cq8d_12._XS1_1cq8d_20,._container_1cq8d_2 ._step_1cq8d_6._resizable_1cq8d_12._S_1cq8d_23{--step-height: 12px}._container_1cq8d_2 ._step_1cq8d_6._resizable_1cq8d_12._M_1cq8d_26{--step-height: 21px}._container_1cq8d_2 ._step_1cq8d_6._resizable_1cq8d_12._L_1cq8d_29{--step-height: 28px}._container_1cq8d_2 ._step_1cq8d_6._resizable_1cq8d_12._XL_1cq8d_32{--step-height: 12px}._container_1cq8d_2._resizable_1cq8d_12{width:auto}

package/dist/components/Steps/Steps.d.ts

@@ -38,6 +38,10 @@ export type TProps = TCommonStepsProps & {
      * Цвет шага, если он не выбран
      */
     unselectedColor?: string;
+    /**
+     * Адаптивный шаг
+     */
+    resizable?: boolean;
 };
 export declare const Steps: import('react').ForwardRefExoticComponent<TCommonStepsProps & {
     /**
@@ -76,4 +80,8 @@ export declare const Steps: import('react').ForwardRefExoticComponent<TCommonSte
      * Цвет шага, если он не выбран
      */
     unselectedColor?: string;
+    /**
+     * Адаптивный шаг
+     */
+    resizable?: boolean;
 } & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Steps/Steps.js

@@ -3,13 +3,27 @@ import { c as classNames } from "../../index-CweZ_OcN.js";
 import { forwardRef, useId, useState, useRef, useEffect } from "react";
 import { ZERO_STEP, EStepsSize, ID_SEPARATOR, STEP_ICONS_MAP, StepSize, DIFF_BETWEEN_STEP_AND_INDEX } from "./constants.js";
 import { Icon } from "../../icons/Icon.js";
-import '../../assets/Steps.css';const container = "_container_1qg9i_2";
-const step = "_step_1qg9i_6";
-const editable = "_editable_1qg9i_9";
+import '../../assets/Steps.css';const container = "_container_1cq8d_2";
+const step = "_step_1cq8d_6";
+const editable = "_editable_1cq8d_9";
+const resizable = "_resizable_1cq8d_12";
+const XS = "_XS_1cq8d_17";
+const XS1 = "_XS1_1cq8d_20";
+const S = "_S_1cq8d_23";
+const M = "_M_1cq8d_26";
+const L = "_L_1cq8d_29";
+const XL = "_XL_1cq8d_32";
 const cls = {
   container,
   step,
-  editable
+  editable,
+  resizable,
+  XS,
+  XS1,
+  S,
+  M,
+  L,
+  XL
 };
 const Steps = forwardRef(
   (props, ref) => {
@@ -21,6 +35,7 @@ const Steps = forwardRef(
       editable: editable2 = false,
       size = EStepsSize.M,
       onClick,
+      resizable: resizable2,
       disabled = false,
       zones = [{ color: "#ff0000", to: quantity }],
       unselectedColor = "#ffffff"
@@ -60,21 +75,35 @@ const Steps = forwardRef(
       return /* @__PURE__ */ jsx(
         "button",
         {
+          style: { backgroundColor: resizable2 ? color : void 0 },
           id: `${idPrefix}${ID_SEPARATOR}${idx}`,
           className: classNames(cls.step, cls[size], stepClassName, {
             [cls.editable]: editable2 && !disabled,
+            [cls.resizable]: resizable2,
             [cls.disabled]: disabled || !editable2 && idx + 1 > step2
           }),
           onClick: () => handleClick(idx),
           onMouseEnter: handleMouseEnter,
           onMouseLeave: handleMouseLeave,
-          style: { color },
-          children: /* @__PURE__ */ jsx(Icon, { iconName: STEP_ICONS_MAP[size].icon, ...StepSize[size] })
+          children: !resizable2 && /* @__PURE__ */ jsx(Icon, { iconName: STEP_ICONS_MAP[size].icon, ...StepSize[size] })
         },
         idx
       );
     });
-    return /* @__PURE__ */ jsx("div", { className: classNames(cls.container, rootClassName), ref, children: buttons });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(
+          cls.container,
+          {
+            [cls.resizable]: resizable2
+          },
+          rootClassName
+        ),
+        ref,
+        children: buttons
+      }
+    );
   }
 );
 Steps.displayName = "Steps";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mimir-ui-kit",
   "private": false,
-  "version": "1.24.0",
+  "version": "1.24.1",
   "type": "module",
   "exports": {
     ".": {