mimir-ui-kit 1.34.2 → 1.34.3

package/dist/components/SelectSearch/SelectSearch.js

@@ -4,14 +4,14 @@ import * as React from "react";
 import React__default, { useReducer, useMemo, useSyncExternalStore, useId as useId$1, useEffect, useCallback, useRef, useLayoutEffect, createContext, useContext, useState, Fragment, createRef, forwardRef } from "react";
 import { ESelectSearchSize } from "./constants.js";
 import { Icon } from "../../icons/Icon.js";
-import { I as Input } from "../../Input-ChCIy5oY.js";
+import { I as Input } from "../../Input-DspsU5F4.js";
 import { EInputVariant, EInputSize } from "../Input/constants.js";
 import { n as n$2, u as u$3, d as o$1, s as s$3, o as o$2, p as p$1, t as t$3, e as s$4, W as W$1, y as y$3, T, H, M as M$1, a as u$5, $ as $f7dceffc5ad7768b$export$4e328f61c538687f, b as $6179b936705e76d3$export$ae780daf29e6d456, D as D$2, c as o$3 } from "../../keyboard-B256ZoM-.js";
 import * as ReactDOM from "react-dom";
 import { flushSync, createPortal } from "react-dom";
 import { w } from "../../use-active-press-B6yeSopF.js";
 import { u as u$4 } from "../../use-by-comparator-BUO78DGe.js";
-import { K, a as a$5, l as l$3, T as T$1, z, j as j$1, u as u$6, I as I$1, G } from "../../label-BTEGh6O_.js";
+import { K, a as a$5, b as l$3, T as T$1, z, j as j$1, u as u$6, I as I$1, G } from "../../label-P7Xsi5N7.js";
 import { A, h as h$1, f as f$6, _ } from "../../focus-management-1rQPII7Z.js";
 import { T as T$2 } from "../../use-resolve-button-type-B6LE6gU3.js";
 import { c as c$2, i as i$2, u as u$7, V, A as A$1 } from "../../open-closed-CbXq00et.js";
@@ -3752,35 +3752,36 @@ function No(o2, r2) {
   return H({ ourProps: { id: d2, ref: M2, role: "option", tabIndex: s2 === true ? void 0 : -1, "aria-disabled": s2 === true ? true : void 0, "aria-selected": C, disabled: void 0, onMouseDown: y2, onFocus: A2, onPointerEnter: h2, onMouseEnter: h2, onPointerMove: O, onMouseMove: O, onPointerLeave: G2, onMouseLeave: G2 }, theirProps: a3, slot: J2, defaultTag: ko, name: "Combobox.Option" });
 }
 let Uo = W$1(ho), Ho = W$1(Vo), Go = W$1(Mo), jo = K, zo = W$1(Bo), Ko = W$1(No), Nt = Object.assign(Uo, { Input: Go, Button: Ho, Label: jo, Options: zo, Option: Ko });
-const disabled = "_disabled_1bdke_5";
-const container = "_container_1bdke_9";
-const full = "_full_1bdke_22";
-const button = "_button_1bdke_30";
-const options = "_options_1bdke_42";
-const top = "_top_1bdke_53";
-const bottom = "_bottom_1bdke_58";
-const m = "_m_1bdke_85";
-const l = "_l_1bdke_96";
-const option = "_option_1bdke_42";
+const disabled = "_disabled_a63ul_5";
+const container = "_container_a63ul_9";
+const full = "_full_a63ul_22";
+const button = "_button_a63ul_34";
+const options = "_options_a63ul_52";
+const top = "_top_a63ul_63";
+const bottom = "_bottom_a63ul_68";
+const m = "_m_a63ul_95";
+const l = "_l_a63ul_108";
+const option = "_option_a63ul_52";
 const cls = {
-  "select-search": "_select-search_1bdke_2",
+  "select-search": "_select-search_a63ul_2",
   disabled,
   container,
-  "container-open": "_container-open_1bdke_18",
+  "container-open": "_container-open_a63ul_18",
   full,
-  "selector-icon-open": "_selector-icon-open_1bdke_26",
+  "selected-icon": "_selected-icon_a63ul_26",
+  "selector-icon-open": "_selector-icon-open_a63ul_30",
   button,
+  "selector-icon": "_selector-icon_a63ul_30",
   options,
   top,
   bottom,
-  "no-options": "_no-options_1bdke_79",
+  "no-options": "_no-options_a63ul_89",
   m,
   l,
-  "custom-input-class": "_custom-input-class_1bdke_107",
+  "custom-input-class": "_custom-input-class_a63ul_121",
   option,
-  "option-active": "_option-active_1bdke_123",
-  "option-inner": "_option-inner_1bdke_126",
-  "selected-icon": "_selected-icon_1bdke_133"
+  "option-active": "_option-active_a63ul_137",
+  "option-inner": "_option-inner_a63ul_140"
 };
 const SelectSearch = forwardRef(
   (props, ref) => {
@@ -3799,9 +3800,11 @@ const SelectSearch = forwardRef(
       variant = EInputVariant.DefaultGray,
       menuPlacement = "bottom",
       disabled: disabled2 = false,
-      searchProps
+      searchProps,
+      withClearButton = false
     } = props;
-    const [inputValue, setInputValue] = useState("");
+    const currentInputValue = String((value == null ? void 0 : value[displayValue]) || "");
+    const [inputValue, setInputValue] = useState(currentInputValue);
     const mapSizeToInputSize = (size22) => {
       switch (size22) {
         case ESelectSearchSize.M:
@@ -3841,8 +3844,8 @@ const SelectSearch = forwardRef(
       [onChange, onSearch, value]
     );
     useEffect(() => {
-      setInputValue(String((value == null ? void 0 : value[displayValue]) ?? ""));
-    }, [displayValue, value]);
+      setInputValue(currentInputValue);
+    }, [currentInputValue]);
     return /* @__PURE__ */ jsx(
       Nt,
       {
@@ -3875,18 +3878,29 @@ const SelectSearch = forwardRef(
                     value: inputValue,
                     disabled: disabled2,
                     variant,
+                    withClearButton,
+                    "data-testid": "select-search-input",
                     ...searchProps
                   }
                 ),
-                showArrow && /* @__PURE__ */ jsx(Ho, { className: cls.button, disabled: disabled2, children: /* @__PURE__ */ jsx(
-                  Icon,
+                showArrow && /* @__PURE__ */ jsx(
+                  Ho,
                   {
-                    iconName: size2 == ESelectSearchSize.M ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
-                    className: classNames(cls["selector-icon"], {
-                      [cls["selector-icon-open"]]: open
-                    })
+                    className: classNames(cls.button, {
+                      [cls.disabled]: disabled2
+                    }),
+                    disabled: disabled2,
+                    children: /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        iconName: size2 == ESelectSearchSize.M ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
+                        className: classNames(cls["selector-icon"], {
+                          [cls["selector-icon-open"]]: open
+                        })
+                      }
+                    )
                   }
-                ) })
+                )
               ]
             }
           ),
@@ -3913,6 +3927,7 @@ const SelectSearch = forwardRef(
           ) : /* @__PURE__ */ jsx(
             zo,
             {
+              "data-testid": "select-search-options",
               className: classNames(
                 cls.options,
                 cls[size2],
@@ -3930,6 +3945,7 @@ const SelectSearch = forwardRef(
                       [cls["option-active"]]: focus
                     }
                   ),
+                  "data-testid": `select-search-option-${item.id}`,
                   children: ({ selected }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
                     /* @__PURE__ */ jsxs("div", { className: cls["option-inner"], children: [
                       item.name,

package/dist/components/SelectSearch/types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { ESelectSearchSize } from './constants';
-import { TInputProps, TVariant } from '../Input';
+import { TInputProps } from '../Input';
 
 export type TSelectOption = {
     name: string;
@@ -9,7 +9,7 @@ export type TSelectOption = {
     [index: string]: unknown;
 };
 export type TMenuPlacement = 'top' | 'bottom';
-export type TSelectSearchProps = {
+export type TSelectSearchProps = Pick<TInputProps, 'withClearButton' | 'variant'> & {
     /**
      * Текущее выбранное значение.
      */
@@ -44,8 +44,6 @@ export type TSelectSearchProps = {
     items: TSelectOption[];
     /** Класснейм для значения */
     classNameOption?: string;
-    /** Варианты отображения ввода */
-    variant?: TVariant;
     /** Варианты отображения выпадающего меню */
     menuPlacement?: TMenuPlacement;
     /** Отключает компонент SelectSearch */

package/dist/components/Skeleton/SkeletonBrick/SkeletonBrick.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from 'react';
+import { ESkeletonVariant } from '../constants';
+
+type TProps = ComponentProps<'div'> & {
+    className?: string;
+    width?: string | number;
+    height?: string | number;
+    borderRadius?: string | number;
+    variant?: `${ESkeletonVariant}` | ESkeletonVariant;
+};
+export declare const SkeletonBrick: ({ className, width, height, borderRadius, style, variant, ...otherProps }: TProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Skeleton/SkeletonBrick/SkeletonBrick.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../../index-CweZ_OcN.js";
+import { ESkeletonVariant } from "../constants.js";
+import { v as variantCls } from "../../../variant.module-BinTBzAV.js";
+const SkeletonBrick = ({
+  className,
+  width = "100%",
+  height,
+  borderRadius = "var(--mimir-control-radius)",
+  style,
+  variant = ESkeletonVariant.WHITE,
+  ...otherProps
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...otherProps,
+      className: classNames(
+        variantCls.skeleton,
+        variantCls[variant],
+        className
+      ),
+      style: {
+        ...style,
+        width,
+        height,
+        borderRadius
+      }
+    }
+  );
+};
+export {
+  SkeletonBrick
+};

package/dist/components/Skeleton/SkeletonCircle/SkeletonCircle.d.ts

@@ -0,0 +1,9 @@
+import { ESkeletonVariant } from '../constants';
+
+type TProps = {
+    className?: string;
+    size: number | string;
+    variant?: `${ESkeletonVariant}` | ESkeletonVariant;
+};
+export declare const SkeletonCircle: ({ className, variant, size }: TProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Skeleton/SkeletonCircle/SkeletonCircle.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../../index-CweZ_OcN.js";
+import { ESkeletonVariant } from "../constants.js";
+import { v as variantCls } from "../../../variant.module-BinTBzAV.js";
+import '../../../assets/SkeletonCircle.css';const cls = {
+  "skeleton-circle": "_skeleton-circle_kxuh3_2"
+};
+const SkeletonCircle = ({
+  className,
+  variant = ESkeletonVariant.WHITE,
+  size
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames(
+        cls["skeleton-circle"],
+        variantCls.skeleton,
+        variantCls[variant],
+        className
+      ),
+      style: {
+        width: size,
+        height: size
+      }
+    }
+  );
+};
+export {
+  SkeletonCircle
+};

package/dist/components/Skeleton/SkeletonText/SkeletonText.d.ts

@@ -0,0 +1,10 @@
+import { ESkeletonVariant } from '../constants';
+
+interface Props {
+    className?: string;
+    rows?: number;
+    variant?: `${ESkeletonVariant}` | ESkeletonVariant;
+    height?: string | number;
+}
+export declare const SkeletonText: import('react').MemoExoticComponent<({ rows, height, variant, ...props }: Props) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/Skeleton/SkeletonText/SkeletonText.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../../index-CweZ_OcN.js";
+import { memo } from "react";
+import { ESkeletonVariant } from "../constants.js";
+import { SkeletonBrick } from "../SkeletonBrick/SkeletonBrick.js";
+import '../../../assets/SkeletonText.css';const row = "_row_1ks6f_9";
+const cls = {
+  "skeleton-text": "_skeleton-text_1ks6f_2",
+  row
+};
+const getRowWidth = (index, total) => {
+  if (index === total - 1) {
+    return "50%";
+  }
+  switch (index % 3) {
+    case 0:
+      return "100%";
+    case 1:
+      return "85%";
+    case 2:
+      return "93%";
+    default:
+      return "100%";
+  }
+};
+const SkeletonText = memo(
+  ({
+    rows = 1,
+    height = 20,
+    variant = ESkeletonVariant.WHITE,
+    ...props
+  }) => {
+    const { className } = props;
+    return /* @__PURE__ */ jsx("div", { className: classNames(cls["skeleton-text"], className), children: new Array(rows).fill(null).map((_, i) => {
+      return /* @__PURE__ */ jsx("div", { className: cls.row, children: /* @__PURE__ */ jsx(
+        SkeletonBrick,
+        {
+          variant,
+          height,
+          width: getRowWidth(i, rows),
+          style: { animationDelay: `${i * 0.125}s` }
+        }
+      ) }, i);
+    }) }, rows);
+  }
+);
+export {
+  SkeletonText
+};

package/dist/components/Skeleton/constants.d.ts

@@ -0,0 +1,5 @@
+export declare enum ESkeletonVariant {
+    WHITE = "white",
+    DARK_GRAY = "dark-gray",
+    BLACK = "black"
+}

package/dist/components/Skeleton/constants.js

@@ -0,0 +1,9 @@
+var ESkeletonVariant = /* @__PURE__ */ ((ESkeletonVariant2) => {
+  ESkeletonVariant2["WHITE"] = "white";
+  ESkeletonVariant2["DARK_GRAY"] = "dark-gray";
+  ESkeletonVariant2["BLACK"] = "black";
+  return ESkeletonVariant2;
+})(ESkeletonVariant || {});
+export {
+  ESkeletonVariant
+};

package/dist/components/Skeleton/index.d.ts

@@ -0,0 +1,4 @@
+export { SkeletonBrick } from './SkeletonBrick/SkeletonBrick';
+export { SkeletonText } from './SkeletonText/SkeletonText';
+export { SkeletonCircle } from './SkeletonCircle/SkeletonCircle';
+export { ESkeletonVariant } from './constants';

package/dist/components/Skeleton/index.js

@@ -0,0 +1,10 @@
+import { SkeletonBrick } from "./SkeletonBrick/SkeletonBrick.js";
+import { SkeletonText } from "./SkeletonText/SkeletonText.js";
+import { SkeletonCircle } from "./SkeletonCircle/SkeletonCircle.js";
+import { ESkeletonVariant } from "./constants.js";
+export {
+  ESkeletonVariant,
+  SkeletonBrick,
+  SkeletonCircle,
+  SkeletonText
+};

package/dist/components/Slider/Slider.d.ts

@@ -1,5 +1,6 @@
+import { SwiperProps } from 'swiper/react';
 
-type TProps = {
+type TProps = SwiperProps & {
     /**
      * Задержка перехода между слайдами
      */
@@ -30,5 +31,5 @@ type TProps = {
 /**
  * Компонент слайдера c прогресс баром.
  */
-export declare const Slider: ({ images, swiperClassName, slideClassName, imageClassName, delay }: TProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Slider: ({ images, swiperClassName, slideClassName, imageClassName, delay, ...props }: TProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Slider/Slider.js

@@ -300,14 +300,14 @@ import '../../assets/Slider.css';function Autoplay(_ref) {
     resume
   });
 }
-const swiper = "_swiper_n7qq2_3";
-const slide = "_slide_n7qq2_9";
-const link = "_link_n7qq2_16";
-const image = "_image_n7qq2_22";
-const navigation = "_navigation_n7qq2_29";
-const pagination = "_pagination_n7qq2_39";
-const slides = "_slides_n7qq2_54";
-const separator = "_separator_n7qq2_60";
+const swiper = "_swiper_rfcv9_3";
+const slide = "_slide_rfcv9_9";
+const link = "_link_rfcv9_16";
+const image = "_image_rfcv9_22";
+const navigation = "_navigation_rfcv9_29";
+const pagination = "_pagination_rfcv9_39";
+const slides = "_slides_rfcv9_54";
+const separator = "_separator_rfcv9_60";
 const cls = {
   swiper,
   slide,
@@ -318,12 +318,14 @@ const cls = {
   slides,
   separator
 };
+const DEFAULT_DELAY = 15e3;
 const Slider = ({
   images,
   swiperClassName,
   slideClassName,
   imageClassName,
-  delay = 3e5
+  delay = DEFAULT_DELAY,
+  ...props
 }) => {
   const progressBar = useRef(null);
   const swiperRef = useRef(null);
@@ -349,10 +351,10 @@ const Slider = ({
   return /* @__PURE__ */ jsxs(
     Swiper,
     {
+      ...props,
       ref: swiperRef,
       className: classNames(cls.swiper, swiperClassName),
       loop: true,
-      centeredSlides: true,
       autoplay: {
         delay,
         disableOnInteraction: false

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

@@ -43,6 +43,10 @@ export type TProps = TCommonStepsProps & Omit<ComponentProps<'div'>, 'onClick'>
      * Адаптивный шаг
      */
     resizable?: boolean;
+    /**
+     * Нужен ли сброс до нулевого значения.
+     */
+    needZeroValue?: boolean;
     /**
      * Класс для иконки шага
      */

package/dist/components/Steps/Steps.js

@@ -31,6 +31,7 @@ const Steps = forwardRef(
       rootClassName,
       stepClassName,
       quantity,
+      needZeroValue = true,
       current = ZERO_STEP,
       editable: editable2 = false,
       size = EStepsSize.M,
@@ -64,7 +65,10 @@ const Steps = forwardRef(
     const handleClick = (idx) => {
       const clickedStep = idx + DIFF_BETWEEN_STEP_AND_INDEX;
       stepWasChangedRef.current = true;
-      setStep(clickedStep !== step2 ? clickedStep : ZERO_STEP);
+      if (needZeroValue) {
+        return setStep(clickedStep !== step2 ? clickedStep : ZERO_STEP);
+      }
+      setStep(clickedStep);
     };
     useEffect(() => {
       if (stepWasChangedRef.current === true) {

package/dist/components/Switcher/Switcher.d.ts

@@ -0,0 +1,3 @@
+import { TProps } from './types';
+
+export declare const Switcher: import('react').ForwardRefExoticComponent<TProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Switcher/Switcher.js

@@ -0,0 +1,118 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { H as H$1 } from "../../field-bS4z9Sdl.js";
+import { K, w, z, U, u, a, b as l, T, I, G, j, p as p$1 } from "../../label-P7Xsi5N7.js";
+import { W, H, y, p, o, $ as $f7dceffc5ad7768b$export$4e328f61c538687f, b as $6179b936705e76d3$export$ae780daf29e6d456, D, c as o$1 } from "../../keyboard-B256ZoM-.js";
+import React__default, { createContext, useState, useMemo, useId, useContext, useRef, useCallback, Fragment, forwardRef } from "react";
+import { w as w$1 } from "../../use-active-press-B6yeSopF.js";
+import { T as T$1 } from "../../use-resolve-button-type-B6LE6gU3.js";
+import { r } from "../../bugs-CSBdWk0R.js";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { ELabelPositions } from "./constants.js";
+import '../../assets/Switcher.css';let S = createContext(null);
+S.displayName = "GroupContext";
+let _e = Fragment;
+function Pe(n) {
+  var a2;
+  let [o2, p2] = useState(null), [f, b] = z(), [h, t] = U(), c = useMemo(() => ({ switch: o2, setSwitch: p2 }), [o2, p2]), T2 = {}, y2 = n;
+  return React__default.createElement(t, { name: "Switch.Description", value: h }, React__default.createElement(b, { name: "Switch.Label", value: f, props: { htmlFor: (a2 = c.switch) == null ? void 0 : a2.id, onClick(u2) {
+    o2 && (u2.currentTarget instanceof HTMLLabelElement && u2.preventDefault(), o2.click(), o2.focus({ preventScroll: true }));
+  } } }, React__default.createElement(S.Provider, { value: c }, H({ ourProps: T2, theirProps: y2, slot: {}, defaultTag: _e, name: "Switch.Group" }))));
+}
+let Ee = "button";
+function De(n, o$2) {
+  var C;
+  let p$2 = useId(), f = u(), b = a(), { id: h = f || `headlessui-switch-${p$2}`, disabled: t = b || false, checked: c, defaultChecked: T$2, onChange: y$1, name: a$1, value: u$1, form: F, autoFocus: d = false, ...k } = n, w2 = useContext(S), _ = useRef(null), H$12 = y(_, o$2, w2 === null ? null : w2.setSwitch), l$1 = l(T$2), [s, r$1] = T(c, y$1, l$1 != null ? l$1 : false), M = p(), [P, E] = useState(false), D$1 = o(() => {
+    E(true), r$1 == null || r$1(!s), M.nextFrame(() => {
+      E(false);
+    });
+  }), U2 = o((e) => {
+    if (r(e.currentTarget)) return e.preventDefault();
+    e.preventDefault(), D$1();
+  }), I$1 = o((e) => {
+    e.key === o$1.Space ? (e.preventDefault(), D$1()) : e.key === o$1.Enter && p$1(e.currentTarget);
+  }), B = o((e) => e.preventDefault()), K2 = I(), W2 = G(), { isFocusVisible: g, focusProps: O } = $f7dceffc5ad7768b$export$4e328f61c538687f({ autoFocus: d }), { isHovered: v, hoverProps: N } = $6179b936705e76d3$export$ae780daf29e6d456({ isDisabled: t }), { pressed: x, pressProps: J } = w$1({ disabled: t }), V = useMemo(() => ({ checked: s, disabled: t, hover: v, focus: g, active: x, autofocus: d, changing: P }), [s, v, g, x, t, P, d]), X = D({ id: h, ref: H$12, role: "switch", type: T$1(n, _), tabIndex: n.tabIndex === -1 ? 0 : (C = n.tabIndex) != null ? C : 0, "aria-checked": s, "aria-labelledby": K2, "aria-describedby": W2, disabled: t || void 0, autoFocus: d, onClick: U2, onKeyUp: I$1, onKeyPress: B }, O, N, J), j$1 = useCallback(() => {
+    if (l$1 !== void 0) return r$1 == null ? void 0 : r$1(l$1);
+  }, [r$1, l$1]);
+  return React__default.createElement(React__default.Fragment, null, a$1 != null && React__default.createElement(j, { disabled: t, data: { [a$1]: u$1 || "on" }, overrides: { type: "checkbox", checked: s }, form: F, onReset: j$1 }), H({ ourProps: X, theirProps: k, slot: V, defaultTag: Ee, name: "Switch" }));
+}
+let ge = W(De), ve = Pe, xe = K, Ce = w, qe = Object.assign(ge, { Group: ve, Label: xe, Description: Ce });
+const left = "_left_gu0m2_14";
+const right = "_right_gu0m2_17";
+const label = "_label_gu0m2_21";
+const switcher = "_switcher_gu0m2_2";
+const cls = {
+  "switcher-wrapper": "_switcher-wrapper_gu0m2_2",
+  left,
+  right,
+  label,
+  switcher,
+  "switcher-checked": "_switcher-checked_gu0m2_45",
+  "switcher-thumb": "_switcher-thumb_gu0m2_55",
+  "switcher-checked-thumb": "_switcher-checked-thumb_gu0m2_65"
+};
+const Switcher = forwardRef(
+  ({
+    id,
+    label: label2,
+    hasLabel = false,
+    labelPosition = ELabelPositions.LEFT,
+    className,
+    labelClassName,
+    switcherThumbClassName,
+    wrapperClassName,
+    children,
+    checked,
+    ...props
+  }, ref) => {
+    const renderChildren = (bag) => {
+      if (typeof children === "function") {
+        return children({ ...bag, checked });
+      } else {
+        return children;
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      H$1,
+      {
+        className: classNames(
+          cls["switcher-wrapper"],
+          wrapperClassName,
+          cls[labelPosition]
+        ),
+        children: [
+          label2 && hasLabel && /* @__PURE__ */ jsx(K, { className: classNames(cls.label, labelClassName), htmlFor: id, children: label2 }),
+          /* @__PURE__ */ jsxs(
+            qe,
+            {
+              ...props,
+              id,
+              ref,
+              className: classNames(cls.switcher, className, {
+                [cls["switcher-checked"]]: checked
+              }),
+              children: [
+                renderChildren({ checked }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: classNames(
+                      cls["switcher-thumb"],
+                      switcherThumbClassName,
+                      {
+                        [cls["switcher-checked-thumb"]]: checked
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  Switcher
+};

package/dist/components/Switcher/constants.d.ts

@@ -0,0 +1,4 @@
+export declare enum ELabelPositions {
+    LEFT = "left",
+    RIGHT = "right"
+}

package/dist/components/Switcher/constants.js

@@ -0,0 +1,8 @@
+var ELabelPositions = /* @__PURE__ */ ((ELabelPositions2) => {
+  ELabelPositions2["LEFT"] = "left";
+  ELabelPositions2["RIGHT"] = "right";
+  return ELabelPositions2;
+})(ELabelPositions || {});
+export {
+  ELabelPositions
+};

package/dist/components/Switcher/index.d.ts

@@ -0,0 +1,3 @@
+export { Switcher } from './Switcher';
+export type { TProps as TSwitcherProps } from './types';
+export { ELabelPositions } from './constants';

package/dist/components/Switcher/index.js

@@ -0,0 +1,6 @@
+import { Switcher } from "./Switcher.js";
+import { ELabelPositions } from "./constants.js";
+export {
+  ELabelPositions,
+  Switcher
+};

package/dist/components/Switcher/types.d.ts

@@ -0,0 +1,30 @@
+import { SwitchProps } from '@headlessui/react';
+import { ReactNode } from 'react';
+import { ELabelPositions } from './constants';
+
+export type SwitchRenderPropArg = {
+    checked?: boolean;
+    hover?: boolean;
+    focus?: boolean;
+    active?: boolean;
+    autofocus?: boolean;
+    changing?: boolean;
+    disabled?: boolean;
+};
+type TLabelProps = {
+    hasLabel: true;
+    label: ReactNode;
+    labelClassName?: string;
+    labelPosition?: ELabelPositions | `${ELabelPositions}`;
+} | {
+    hasLabel: false;
+    label?: never;
+    labelClassName?: never;
+    labelPosition?: never;
+};
+export type TProps = SwitchProps & TLabelProps & {
+    className?: string;
+    switcherThumbClassName?: string;
+    wrapperClassName?: string;
+};
+export {};

package/dist/components/TabTrail/TabTrail.d.ts

@@ -31,5 +31,13 @@ export type TTabTrailProps = {
      * Класснейм для TabTrail.
      */
     className?: string;
+    /**
+     * Индекс выбранного таба.
+     */
+    selectedTabIndex?: number;
+    /**
+     * Функция обратного вызова при изменении выбранного таба.
+     */
+    onTabChange?: (index: number) => void;
 };
 export declare const TabTrail: import('react').ForwardRefExoticComponent<TTabTrailProps & import('react').RefAttributes<HTMLElement>>;