urfu-ui-kit-react 2.1.5 → 2.1.7-next.0

package/dist/components/Tabs/Tabs.js

@@ -1,141 +1,146 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
 /* empty css                 */
 /* empty css                                  */
 /* empty css      */
 /* empty css                  */
-import { useState as Q, useRef as f, useId as V, useEffect as X } from "react";
-import { Icon$u as p } from "../Icon/Icon.js";
-import { Tooltip$u as Z } from "../Tooltip/Tooltip.js";
-import { useDismiss$u as W } from "../../hooks/useDismiss.js";
-import { useMountTransition$u as x } from "../../hooks/useMountTransition.js";
-import { getPopupTransitionStyle$u as D, POPUP_TRANSITION_MS$u as ee } from "../../shared/popupTransition.js";
-import { useTabsOverflow$u as te } from "./useTabsOverflow.js";
-import { useTabsIndicator$u as ne } from "./useTabsIndicator.js";
-const oe = [], ye = ({
-  onClick: b,
-  tabsData: r = oe,
+import { useState as x, useRef as p, useId as D, useEffect as ee, Fragment as oe } from "react";
+import { Icon$u as b } from "../Icon/Icon.js";
+import { Tooltip$u as te } from "../Tooltip/Tooltip.js";
+import { useDismiss$u as re } from "../../hooks/useDismiss.js";
+import { useMountTransition$u as ne } from "../../hooks/useMountTransition.js";
+import { getPopupTransitionStyle$u as se, POPUP_TRANSITION_MS$u as ie } from "../../shared/popupTransition.js";
+import { useTabsOverflow$u as le } from "./useTabsOverflow.js";
+import { useTabsIndicator$u as ae } from "./useTabsIndicator.js";
+import { useTabsScroll$u as ce } from "./useTabsScroll.js";
+import { isPlainLeftClick$u as ue } from "../../vanilla/core/linkClick.js";
+const me = [], Ie = ({
+  onClick: h,
+  tabsData: n = me,
   activeTab: m,
-  className: w = "",
-  variant: $ = "line",
-  fullWidth: h = !1,
-  tooltipOn: P = !1,
-  tooltipDisabled: M = !1
+  className: $ = "",
+  variant: g = "line",
+  fullWidth: y = !1,
+  tooltipOn: U = !1,
+  tooltipDisabled: _ = !1,
+  LinkComponent: v,
+  ariaLabel: B
 }) => {
-  const { containerRef: E, measureRef: U, moreMeasureRef: _, visible: B, overflow: l, paddingOf: K, promote: j } = te(r, m, h), [c, a] = Q(!1), v = f(null), y = f(null), O = f(null), R = V(), { shouldRender: q, status: z, isAnimated: C } = x({ isOpen: c, duration: ee }), A = f(l);
-  c && (A.current = l);
-  const g = $ === "segment", N = g ? "u-tab-segment" : "u-tab-line", F = g ? "u-tab-segment-active" : "u-tab-active", { trackRef: H, indicatorRef: J } = ne(m, `${$}|${h}|${JSON.stringify(r.map((e) => e.id))}`);
-  W({ refs: [v], enabled: c, onDismiss: () => a(!1) }), X(() => {
-    l.length || a(!1);
-  }, [l.length]);
-  const T = (e) => {
-    var n, s;
-    if ((n = r[e]) != null && n.disabled) return;
-    const t = l.includes(e);
-    j(e), a(!1), b == null || b(r[e]), t && ((s = y.current) == null || s.focus({ preventScroll: !0 }));
-  }, I = () => {
+  const { containerRef: K, measureRef: j, moreMeasureRef: q, visible: z, overflow: u, paddingOf: F, promote: L } = le(n, m, y, g !== "segment"), [d, c] = x(!1), R = p(null), N = p(null), k = p(null), O = D(), { shouldRender: H, status: J, isAnimated: Y } = ne({ isOpen: d, duration: ie }), A = p(u);
+  d && (A.current = u);
+  const f = g === "segment", T = n.some((e) => e.url), w = f ? "u-tab-segment" : "u-tab-line", G = f ? "u-tab-segment-active" : "u-tab-active", { trackRef: I, indicatorRef: Q } = ae(m, `${g}|${y}|${JSON.stringify(n.map((e) => e.id))}`);
+  ce(I, !f, m), re({ refs: [R], enabled: d, onDismiss: () => c(!1) }), ee(() => {
+    u.length || c(!1);
+  }, [u.length]);
+  const S = (e) => {
+    var t, s;
+    if ((t = n[e]) != null && t.disabled) return;
+    const o = u.includes(e);
+    L(e), c(!1), h == null || h(n[e]), o && ((s = N.current) == null || s.focus({ preventScroll: !0 }));
+  }, P = () => {
     var e;
-    return Array.from(((e = O.current) == null ? void 0 : e.querySelectorAll('button:not([aria-disabled="true"])')) || []);
-  }, L = (e) => {
-    var n;
-    const t = I();
-    (n = t[e < 0 ? t.length - 1 : e]) == null || n.focus();
-  }, Y = (e) => {
-    var d, u;
-    const t = I(), n = t.indexOf(document.activeElement), s = e.key === "ArrowDown" ? (n + 1) % t.length : e.key === "ArrowUp" ? (n - 1 + t.length) % t.length : e.key === "Home" ? 0 : e.key === "End" ? t.length - 1 : -1;
-    s >= 0 ? (e.preventDefault(), (d = t[s]) == null || d.focus()) : e.key === "Escape" && (e.preventDefault(), a(!1), (u = y.current) == null || u.focus());
-  }, k = (e) => /* @__PURE__ */ o("span", { className: "u-tabs-title", "data-label": e.title, children: e.title }), G = (e) => {
-    if (!e.icon) return k(e);
-    const t = e.iconPosition === "right";
-    return /* @__PURE__ */ i("span", { className: `u-tabs-content${t ? " u-tabs-content-reverse" : ""}`, children: [
-      /* @__PURE__ */ o(p, { name: e.icon, className: "u-tabs-icon" }),
-      !e.iconOnly && k(e)
+    return Array.from(((e = k.current) == null ? void 0 : e.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')) || []);
+  }, V = (e) => {
+    var t;
+    const o = P();
+    (t = o[e < 0 ? o.length - 1 : e]) == null || t.focus();
+  }, X = (e) => {
+    var i, l;
+    const o = P(), t = o.indexOf(document.activeElement), s = e.key === "ArrowDown" ? (t + 1) % o.length : e.key === "ArrowUp" ? (t - 1 + o.length) % o.length : e.key === "Home" ? 0 : e.key === "End" ? o.length - 1 : -1;
+    s >= 0 ? (e.preventDefault(), (i = o[s]) == null || i.focus()) : e.key === "Escape" && (e.preventDefault(), c(!1), (l = N.current) == null || l.focus());
+  }, M = (e) => /* @__PURE__ */ r("span", { className: "u-tabs-title", "data-label": e.title, children: e.title }), Z = (e) => {
+    if (!e.icon) return M(e);
+    const o = e.iconPosition === "right";
+    return /* @__PURE__ */ a("span", { className: `u-tabs-content${o ? " u-tabs-content-reverse" : ""}`, children: [
+      /* @__PURE__ */ r(b, { name: e.icon, className: "u-tabs-icon" }),
+      !e.iconOnly && M(e)
     ] });
-  }, S = (e, t = !1) => {
-    const n = r[e], s = !!(n.icon && n.iconOnly), d = n.icon ? s ? " u-tab-icon-only" : ` u-tab-with-icon${n.iconPosition === "right" ? " u-tab-icon-right" : ""}` : "", u = /* @__PURE__ */ o(
-      "button",
-      {
-        className: `${N}${d}${n.id === m ? ` ${F}` : ""}${n.disabled ? " u-tab--disabled" : ""}`,
-        type: "button",
-        "data-label": s ? void 0 : n.title,
-        "aria-label": s ? n.title : void 0,
-        "data-measure-tab": t ? "" : void 0,
-        style: t ? void 0 : K(e),
-        tabIndex: t || n.disabled ? -1 : void 0,
-        "aria-current": !t && n.id === m ? "page" : void 0,
-        "aria-disabled": !t && n.disabled ? "true" : void 0,
-        onClick: t ? void 0 : () => T(e),
-        children: G(n)
-      }
-    );
-    return /* @__PURE__ */ o("div", { className: "u-tabs-item", children: P && !M && !t ? /* @__PURE__ */ o(Z, { tooltipText: n.title, portalOn: !0, className: "u-tabs-tooltip", children: u }) : u }, e);
+  }, C = (e, o, t, s = !1) => {
+    const i = n[e];
+    if (!i.url)
+      return /* @__PURE__ */ r("button", { type: "button", ...o, onClick: s ? void 0 : () => S(e), children: t });
+    if (s || i.disabled)
+      return /* @__PURE__ */ r("a", { ...o, role: o.role ?? (s ? void 0 : "link"), children: t });
+    const l = (W) => {
+      ue(W) && S(e);
+    };
+    return v ? /* @__PURE__ */ r(v, { to: i.url, ...o, onClick: l, children: t }) : /* @__PURE__ */ r("a", { href: i.url, ...o, onClick: l, children: t });
+  }, E = (e, o = !1) => {
+    const t = n[e], s = !!(t.icon && t.iconOnly), i = t.icon ? s ? " u-tab-icon-only" : ` u-tab-with-icon${t.iconPosition === "right" ? " u-tab-icon-right" : ""}` : "", l = C(e, {
+      className: `${w}${i}${t.id === m ? ` ${G}` : ""}${t.disabled ? " u-tab--disabled" : ""}`,
+      "data-label": s ? void 0 : t.title,
+      "aria-label": s ? t.title : void 0,
+      "data-measure-tab": o ? "" : void 0,
+      // Не хватает места — сначала ужимаются отступы вкладок, подпись остаётся целой.
+      style: o ? void 0 : F(e),
+      // Отключённая вкладка не попадает в обход по Tab; нативный disabled не ставим —
+      // он гасит события мыши, и подсказка с объяснением не показалась бы.
+      tabIndex: o || t.disabled ? -1 : void 0,
+      "aria-current": !o && t.id === m ? "page" : void 0,
+      "aria-disabled": !o && t.disabled ? "true" : void 0
+    }, Z(t), o);
+    return /* @__PURE__ */ r("div", { className: "u-tabs-item", children: U && !_ && !o ? /* @__PURE__ */ r(te, { tooltipText: t.title, portalOn: !0, className: "u-tabs-tooltip", children: l }) : l }, e);
   };
-  return /* @__PURE__ */ i(
-    "div",
+  return /* @__PURE__ */ a(
+    T ? "nav" : "div",
     {
-      ref: E,
-      className: `u-tabs ${g ? "u-tabs-segment" : "u-tabs-line"}${h ? " u-tabs-full-width" : ""}${w ? ` ${w}` : ""}`,
+      ref: K,
+      className: `u-tabs ${f ? "u-tabs-segment" : "u-tabs-line"}${y ? " u-tabs-full-width" : ""}${$ ? ` ${$}` : ""}`,
+      "aria-label": T ? B : void 0,
       children: [
-        /* @__PURE__ */ i("div", { className: "u-tabs-track", ref: H, children: [
-          /* @__PURE__ */ o("span", { className: "u-tabs-indicator", ref: J, "aria-hidden": "true" }),
-          B.map((e) => S(e)),
-          l.length > 0 && /* @__PURE__ */ i(
+        /* @__PURE__ */ a("div", { className: "u-tabs-track", ref: I, children: [
+          /* @__PURE__ */ r("span", { className: "u-tabs-indicator", ref: Q, "aria-hidden": "true" }),
+          z.map((e) => E(e)),
+          u.length > 0 && /* @__PURE__ */ a(
             "div",
             {
               className: "u-tabs-more",
-              ref: v,
-              onKeyDown: Y,
+              ref: R,
+              onKeyDown: X,
               onBlur: (e) => {
-                const t = e.relatedTarget;
-                t && !e.currentTarget.contains(t) && a(!1);
+                const o = e.relatedTarget;
+                o && !e.currentTarget.contains(o) && c(!1);
               },
               children: [
-                /* @__PURE__ */ i(
+                /* @__PURE__ */ a(
                   "button",
                   {
                     type: "button",
-                    ref: y,
-                    className: `${N} u-tabs-more-trigger`,
-                    "aria-expanded": c,
+                    ref: N,
+                    className: `${w} u-tabs-more-trigger`,
+                    "aria-expanded": d,
                     "aria-haspopup": "menu",
-                    "aria-controls": R,
-                    onClick: () => a((e) => !e),
+                    "aria-controls": O,
+                    onClick: () => c((e) => !e),
                     onKeyDown: (e) => {
-                      (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), e.stopPropagation(), a(!0), requestAnimationFrame(() => L(e.key === "ArrowUp" ? -1 : 0)));
+                      (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), e.stopPropagation(), c(!0), requestAnimationFrame(() => V(e.key === "ArrowUp" ? -1 : 0)));
                     },
                     children: [
-                      /* @__PURE__ */ o("span", { children: "Ещё" }),
-                      /* @__PURE__ */ o(p, { name: "down", size: 14, rotate: c ? 180 : 0 })
+                      /* @__PURE__ */ r("span", { children: "Ещё" }),
+                      /* @__PURE__ */ r(b, { name: "down", size: 14, rotate: d ? 180 : 0 })
                     ]
                   }
                 ),
-                q && /* @__PURE__ */ o("div", { className: "u-tabs-more-menu", role: "menu", id: R, ref: O, style: D(z, C), children: A.current.filter((e) => r[e]).map((e) => /* @__PURE__ */ o(
-                  "button",
-                  {
-                    type: "button",
-                    role: "menuitem",
-                    "aria-disabled": r[e].disabled ? "true" : void 0,
-                    tabIndex: r[e].disabled ? -1 : void 0,
-                    onClick: () => T(e),
-                    children: r[e].icon ? /* @__PURE__ */ i("span", { className: "u-tabs-content", children: [
-                      /* @__PURE__ */ o(p, { name: r[e].icon, className: "u-tabs-icon" }),
-                      /* @__PURE__ */ o("span", { children: r[e].title })
-                    ] }) : r[e].title
-                  },
-                  e
-                )) })
+                H && /* @__PURE__ */ r("div", { className: "u-tabs-more-menu", role: "menu", id: O, ref: k, style: se(J, Y), children: A.current.filter((e) => n[e]).map((e) => /* @__PURE__ */ r(oe, { children: C(e, {
+                  role: "menuitem",
+                  "aria-disabled": n[e].disabled ? "true" : void 0,
+                  tabIndex: n[e].disabled ? -1 : void 0
+                }, n[e].icon ? /* @__PURE__ */ a("span", { className: "u-tabs-content", children: [
+                  /* @__PURE__ */ r(b, { name: n[e].icon, className: "u-tabs-icon" }),
+                  /* @__PURE__ */ r("span", { children: n[e].title })
+                ] }) : n[e].title) }, e)) })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ i("div", { ref: U, className: "u-tabs-measure", "aria-hidden": "true", children: [
-          r.map((e, t) => S(t, !0)),
-          /* @__PURE__ */ i("button", { ref: _, type: "button", tabIndex: -1, className: `${N} u-tabs-more-trigger u-tabs-more-measure`, children: [
-            /* @__PURE__ */ o("span", { children: "Ещё" }),
-            /* @__PURE__ */ o(p, { name: "down", size: 14 })
+        /* @__PURE__ */ a("div", { ref: j, className: "u-tabs-measure", "aria-hidden": "true", children: [
+          n.map((e, o) => E(o, !0)),
+          f && /* @__PURE__ */ a("button", { ref: q, type: "button", tabIndex: -1, className: `${w} u-tabs-more-trigger u-tabs-more-measure`, children: [
+            /* @__PURE__ */ r("span", { children: "Ещё" }),
+            /* @__PURE__ */ r(b, { name: "down", size: 14 })
           ] })
         ] })
       ]
     }
   );
 };
-export { ye as Tabs$u };
+export { Ie as Tabs$u };

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

@@ -1,6 +1,13 @@
+import type { ComponentType, CSSProperties, MouseEvent, ReactNode } from 'react';
 export type TabsDataProperties = Partial<{
     id: string | number;
     title: string;
+    /**
+     * Адрес раздела. Есть хотя бы у одной вкладки — вкладки становятся ссылками (режим навигации):
+     * Ctrl/Cmd/Shift/средний клик и «Открыть в новой вкладке» работают как у обычной ссылки,
+     * обычный клик вызывает `onClick`, как раньше. Без `LinkComponent` — `<a href>` с переходом браузера.
+     */
+    url: string;
     /** Имя иконки кита (как у `Icon`): `'list-view'`, `'table-view'` и т. д. Без него вкладка — только текст. */
     icon: string;
     /** Сторона иконки относительно текста; по умолчанию слева. */
@@ -12,11 +19,24 @@ export type TabsDataProperties = Partial<{
     iconOnly: boolean;
     /**
      * Вкладку нельзя выбрать: клик и Enter не вызывают `onClick`, кнопка с `aria-disabled="true"`
-     * выпадает из обхода по Tab и стрелками в меню «Ещё», вид приглушён. Если она уже активна
+     * выпадает из обхода по Tab и стрелками в меню «Ещё» сегментов, вид приглушён. Если она уже активна
      * (`activeTab`), выбор не меняется — кит её не переключает сам.
      */
     disabled: boolean;
 }>;
+/** Пропсы, которые кит передаёт `LinkComponent` вкладки-ссылки (как у `Link` react-router). */
+export type TabsLinkProperties = {
+    to: string;
+    className?: string;
+    children?: ReactNode;
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    tabIndex?: number;
+    style?: CSSProperties;
+    role?: string;
+    'aria-current'?: 'page';
+    'aria-label'?: string;
+    'data-label'?: string;
+};
 export type TabsProperties = Partial<{
     onClick: (...args: unknown[]) => unknown;
     tabsData: Array<TabsDataProperties>;
@@ -32,5 +52,13 @@ export type TabsProperties = Partial<{
     tooltipOn: boolean;
     /** Отключает китовую подсказку и при `tooltipOn`; по умолчанию false. */
     tooltipDisabled: boolean;
+    /**
+     * Компонент ссылки роутера для вкладок с `url` (react-router `Link`): получает `to={url}`, классы
+     * и обработчик клика, обычный клик переходит без перезагрузки страницы. Без него — `<a href>`.
+     * Функция наряду с `ComponentType`: `to` у `Link` шире строки, а `propTypes` в `ComponentType` это запрещают.
+     */
+    LinkComponent: ComponentType<TabsLinkProperties> | ((props: TabsLinkProperties) => ReactNode);
+    /** Подпись области навигации (`<nav aria-label>`) в режиме ссылок, если на странице несколько `nav`. */
+    ariaLabel: string;
 }>;
 //# sourceMappingURL=Tabs.types.d.ts.map

package/dist/components/Tabs/Tabs.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC;IACrC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,6GAA6G;IAC7G,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B;;;OAGG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC;IACjC,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC;IACzC,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC;IACpC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,qFAAqF;IACrF,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,eAAe,EAAE,OAAO,CAAC;CAC5B,CAAC,CAAC"}
+{"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjF,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC;IACrC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ,6GAA6G;IAC7G,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B;;;OAGG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC,CAAC;AAEH,+FAA+F;AAC/F,MAAM,MAAM,kBAAkB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC;IACjC,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC;IACzC,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC;IACpC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,qFAAqF;IACrF,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,eAAe,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,aAAa,EAAE,aAAa,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,kBAAkB,KAAK,SAAS,CAAC,CAAC;IAC9F,wGAAwG;IACxG,SAAS,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC"}

package/dist/components/Tabs/distributeTabs.d.ts

@@ -5,6 +5,12 @@ export declare const TAB_PADDING_MIN_RATIO = 0.4;
  * Ровно столько, чтобы вкладки вместе с «Ещё» поместились в контейнер.
  */
 export declare const tabsSqueeze: (visible: number[], widths: number[], cuts: number[], availableWidth: number, gap: number, moreWidth: number, withMore: boolean) => number;
+/**
+ * Ужатие отступов линейных вкладок: они не прячутся в «Ещё», а прокручиваются (tabsScroll.ts).
+ * Ужимаем, только если так помещаются все; не помещаются и ужатыми — обычные отступы и прокрутка,
+ * тесные вкладки в прокручиваемом ряду ничего не дают.
+ */
+export declare const lineTabsSqueeze: (order: number[], widths: number[], cuts: number[], availableWidth: number, gap: number) => number;
 /**
  * Индексы сохраняют порядок и исходные объекты tabsData, включая дополнительные поля.
  * `cuts` — на сколько каждую вкладку можно сузить за счёт боковых отступов. Прежде чем прятать

package/dist/components/Tabs/distributeTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"distributeTabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/distributeTabs.ts"],"names":[],"mappings":"AAAA,yGAAyG;AACzG,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC;;;GAGG;AACH,eAAO,MAAM,WAAW,GACtB,SAAS,MAAM,EAAE,EACjB,QAAQ,MAAM,EAAE,EAChB,MAAM,MAAM,EAAE,EACd,gBAAgB,MAAM,EACtB,KAAK,MAAM,EACX,WAAW,MAAM,EACjB,UAAU,OAAO,WAUlB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GACzB,OAAO,MAAM,EAAE,EACf,QAAQ,MAAM,EAAE,EAChB,gBAAgB,MAAM,EACtB,KAAK,MAAM,EACX,WAAW,MAAM,EACjB,aAAa,MAAM,EACnB,mBAAiB,EACjB,OAAM,MAAM,EAAO;;cAcwB,MAAM,EAAE;CAsBpD,CAAC"}
+{"version":3,"file":"distributeTabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/distributeTabs.ts"],"names":[],"mappings":"AAAA,yGAAyG;AACzG,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC;;;GAGG;AACH,eAAO,MAAM,WAAW,GACtB,SAAS,MAAM,EAAE,EACjB,QAAQ,MAAM,EAAE,EAChB,MAAM,MAAM,EAAE,EACd,gBAAgB,MAAM,EACtB,KAAK,MAAM,EACX,WAAW,MAAM,EACjB,UAAU,OAAO,WAUlB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,MAAM,EAAE,EAAE,QAAQ,MAAM,EAAE,EAAE,MAAM,MAAM,EAAE,EAAE,gBAAgB,MAAM,EAAE,KAAK,MAAM,WAGrH,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GACzB,OAAO,MAAM,EAAE,EACf,QAAQ,MAAM,EAAE,EAChB,gBAAgB,MAAM,EACtB,KAAK,MAAM,EACX,WAAW,MAAM,EACjB,aAAa,MAAM,EACnB,mBAAiB,EACjB,OAAM,MAAM,EAAO;;cAcwB,MAAM,EAAE;CAsBpD,CAAC"}

package/dist/components/Tabs/tabsIndicator.d.ts

@@ -1,14 +1,18 @@
-/** Длительность переезда подсветки активной вкладки, мс. */
-export declare const TABS_INDICATOR_MS = 200;
+/** Длительность переезда подсветки активной вкладки, мс — `--u-duration-base` шкалы движения. */
+export declare const TABS_INDICATOR_MS: 200;
 /**
  * Подсветка активной вкладки — один элемент `.u-tabs-indicator` на ряд `.u-tabs-track`.
  * Встаёт на кнопку с `aria-current="page"`; переезжает к ней, только когда сменилась активная
  * вкладка при том же составе. Первый показ, смена размеров и состава, prefers-reduced-motion — без переезда.
+ * Ряд сменил размер посреди переезда — подсветка доезжает до нового места плавно, а не прыгает.
  */
 export declare const createTabsIndicator: () => {
     /** После каждой отрисовки. layout — состав и вид вкладок: при его смене подсветка не едет. */
     update(track: HTMLElement | null, indicator: HTMLElement | null, active: unknown, layout: string): void;
-    /** Ряд сменил размер (окно, загрузка шрифтов) — встать на место без переезда. */
+    /**
+     * Ряд сменил размер (окно, шрифты, полоса прокрутки страницы) — встать на место без переезда.
+     * Посреди переезда — доехать до нового места: `transition: none` оборвал бы его прыжком.
+     */
     refresh(track: HTMLElement | null, indicator: HTMLElement | null): void;
 };
 //# sourceMappingURL=tabsIndicator.d.ts.map

package/dist/components/Tabs/tabsIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabsIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/tabsIndicator.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,eAAO,MAAM,iBAAiB,MAAM,CAAC;AAQrC;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;IAmC5B,8FAA8F;kBAChF,WAAW,GAAG,IAAI,aAAa,WAAW,GAAG,IAAI,UAAU,OAAO,UAAU,MAAM;IAMhG,iFAAiF;mBAClE,WAAW,GAAG,IAAI,aAAa,WAAW,GAAG,IAAI;CAInE,CAAC"}
+{"version":3,"file":"tabsIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/tabsIndicator.ts"],"names":[],"mappings":"AAEA,iGAAiG;AACjG,eAAO,MAAM,iBAAiB,KAAiB,CAAC;AAMhD;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB;IAyC5B,8FAA8F;kBAChF,WAAW,GAAG,IAAI,aAAa,WAAW,GAAG,IAAI,UAAU,OAAO,UAAU,MAAM;IAOhG;;;OAGG;mBACY,WAAW,GAAG,IAAI,aAAa,WAAW,GAAG,IAAI;CAInE,CAAC"}

package/dist/components/Tabs/tabsScroll.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Прокрутка ряда линейных вкладок `.u-tabs-line > .u-tabs-track` (решение дизайнера 28.10.2026):
+ * не поместившиеся вкладки не прячутся в «Ещё», ряд прокручивается, как в ЛК-профиле.
+ * За краем есть вкладки — на треке атрибут `data-fade-start` / `data-fade-end`, по нему tabs.css
+ * затухает край. Ширина затухания — `scroll-padding-inline` трека: на неё активная вкладка
+ * отступает от края при прокрутке к ней.
+ */
+export declare const createTabsScroll: (track: HTMLElement) => {
+    /** После каждой отрисовки: состав и отступы вкладок меняют ширину содержимого, а не трека. */
+    fade: () => void;
+    /**
+     * Прокрутить ряд к активной вкладке (`aria-current="page"`), если она за краем или под затуханием.
+     * Вкладка шире ряда без затуханий — по центру: иначе у последней вкладки ряд вставал в паре
+     * пикселей от конца и правый край оставался под затуханием.
+     * Только `scrollLeft` трека: `scrollIntoView` прокрутил бы и страницу к вкладкам.
+     */
+    reveal(smooth: boolean): void;
+    destroy(): void;
+};
+//# sourceMappingURL=tabsScroll.d.ts.map

package/dist/components/Tabs/tabsScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabsScroll.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/tabsScroll.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,WAAW;IAa/C,8FAA8F;;IAE9F;;;;;OAKG;mBACY,OAAO;;CAwBzB,CAAC"}

package/dist/components/Tabs/useTabsOverflow.d.ts

@@ -1,5 +1,7 @@
 import type { TabsDataProperties } from './Tabs.types';
-export declare const useTabsOverflow: (tabs: TabsDataProperties[], activeTab: string | number | undefined, fullWidth: boolean) => {
+export declare const useTabsOverflow: (tabs: TabsDataProperties[], activeTab: string | number | undefined, fullWidth: boolean, 
+/** Линейные вкладки: все в ряду, не поместившиеся прокручиваются, без «Ещё» (решение дизайнера 28.10.2026). */
+scroll: boolean) => {
     paddingOf: (index: number) => {
         paddingLeft: number;
         paddingRight: number;

package/dist/components/Tabs/useTabsOverflow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTabsOverflow.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/useTabsOverflow.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGvD,eAAO,MAAM,eAAe,GAC1B,MAAM,kBAAkB,EAAE,EAC1B,WAAW,MAAM,GAAG,MAAM,GAAG,SAAS,EACtC,WAAW,OAAO;uBAoEQ,MAAM;;;;qBAOR,MAAM;;;;;;CAY/B,CAAC"}
+{"version":3,"file":"useTabsOverflow.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/useTabsOverflow.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGvD,eAAO,MAAM,eAAe,GAC1B,MAAM,kBAAkB,EAAE,EAC1B,WAAW,MAAM,GAAG,MAAM,GAAG,SAAS,EACtC,WAAW,OAAO;AAClB,+GAA+G;AAC/G,QAAQ,OAAO;uBAoEW,MAAM;;;;qBAOR,MAAM;;;;;;CAY/B,CAAC"}

package/dist/components/Tabs/useTabsOverflow.js

@@ -1,49 +1,49 @@
-import { useRef as R, useState as B, useCallback as P, useLayoutEffect as T } from "react";
-import { TAB_PADDING_MIN_RATIO$u as _, distributeTabs$u as D, tabsSqueeze$u as G } from "../../vanilla/core/distributeTabs.js";
-const K = (l, y, g) => {
-  const u = R(null), p = R(null), O = R(null), m = JSON.stringify(l.map((t) => t.id)), L = l.map((t, e) => e), [F, q] = B({ signature: m, order: L }), h = F.signature === m ? F.order : L, [r, M] = B({ widths: [], paddings: [], available: 0, gap: 0, more: 0 }), i = P(() => {
+import { useRef as O, useState as q, useCallback as P, useLayoutEffect as D } from "react";
+import { TAB_PADDING_MIN_RATIO$u as B, distributeTabs$u as G, lineTabsSqueeze$u as k, tabsSqueeze$u as J } from "../../vanilla/core/distributeTabs.js";
+const U = (l, N, u, b) => {
+  const g = O(null), m = O(null), L = O(null), h = JSON.stringify(l.map((t) => t.id)), S = l.map((t, e) => e), [z, T] = q({ signature: h, order: S }), p = z.signature === h ? z.order : S, [r, _] = q({ widths: [], paddings: [], available: 0, gap: 0, more: 0 }), o = P(() => {
     var x;
-    const t = u.current, e = p.current;
+    const t = g.current, e = m.current;
     if (!t || !e) return;
-    const n = getComputedStyle(t), d = t.getBoundingClientRect().width - (parseFloat(n.borderLeftWidth) || 0) - (parseFloat(n.borderRightWidth) || 0) - (parseFloat(n.paddingLeft) || 0) - (parseFloat(n.paddingRight) || 0), s = Array.from(e.querySelectorAll("[data-measure-tab]")), w = s.map((o) => o.getBoundingClientRect().width), v = s.map((o) => {
-      const c = getComputedStyle(o);
-      return [parseFloat(c.paddingLeft) || 0, parseFloat(c.paddingRight) || 0];
+    const n = getComputedStyle(t), a = t.getBoundingClientRect().width - (Number.parseFloat(n.borderLeftWidth) || 0) - (Number.parseFloat(n.borderRightWidth) || 0) - (Number.parseFloat(n.paddingLeft) || 0) - (Number.parseFloat(n.paddingRight) || 0), s = Array.from(e.querySelectorAll("[data-measure-tab]")), v = s.map((i) => i.getBoundingClientRect().width), R = s.map((i) => {
+      const c = getComputedStyle(i);
+      return [Number.parseFloat(c.paddingLeft) || 0, Number.parseFloat(c.paddingRight) || 0];
     }), f = {
-      widths: w,
-      paddings: v,
-      available: d,
-      gap: parseFloat(n.columnGap || "0") || 0,
-      more: ((x = O.current) == null ? void 0 : x.getBoundingClientRect().width) || 0
+      widths: v,
+      paddings: R,
+      available: a,
+      gap: Number.parseFloat(n.columnGap || "0") || 0,
+      more: ((x = L.current) == null ? void 0 : x.getBoundingClientRect().width) || 0
     };
-    M((o) => o.available === f.available && o.gap === f.gap && o.more === f.more && o.widths.length === w.length && o.widths.every((c, b) => c === w[b]) && o.paddings.every(([c, b], A) => {
+    _((i) => i.available === f.available && i.gap === f.gap && i.more === f.more && i.widths.length === v.length && i.widths.every((c, y) => c === v[y]) && i.paddings.every(([c, y], A) => {
       var E, I;
-      return c === ((E = v[A]) == null ? void 0 : E[0]) && b === ((I = v[A]) == null ? void 0 : I[1]);
-    }) ? o : f);
+      return c === ((E = R[A]) == null ? void 0 : E[0]) && y === ((I = R[A]) == null ? void 0 : I[1]);
+    }) ? i : f);
   }, []);
-  T(() => {
-    var n, d;
-    i();
+  D(() => {
+    var n, a;
+    o();
     let t = !1;
-    const e = typeof ResizeObserver > "u" ? null : new ResizeObserver(i);
-    return u.current && (e == null || e.observe(u.current)), p.current && (e == null || e.observe(p.current)), window.addEventListener("resize", i), (n = document.fonts) == null || n.addEventListener("loadingdone", i), (d = document.fonts) == null || d.ready.then(() => {
-      t || i();
+    const e = typeof ResizeObserver > "u" ? null : new ResizeObserver(o);
+    return g.current && (e == null || e.observe(g.current)), m.current && (e == null || e.observe(m.current)), window.addEventListener("resize", o), (n = document.fonts) == null || n.addEventListener("loadingdone", o), (a = document.fonts) == null || a.ready.then(() => {
+      t || o();
     }), () => {
       var s;
-      t = !0, e == null || e.disconnect(), window.removeEventListener("resize", i), (s = document.fonts) == null || s.removeEventListener("loadingdone", i);
+      t = !0, e == null || e.disconnect(), window.removeEventListener("resize", o), (s = document.fonts) == null || s.removeEventListener("loadingdone", o);
     };
-  }, [i, l, g]);
-  const N = y === void 0 ? -1 : l.findIndex((t) => t.id === y), S = r.widths.length === l.length && r.widths.every((t) => t > 0), z = g ? [] : r.paddings.map(([t, e]) => (t + e) * (1 - _)), a = S ? D(h, r.widths, r.available, r.gap, r.more, N, g, z) : { visible: h, overflow: [] }, C = S && !g ? G(a.visible, r.widths, z, r.available, r.gap, r.more, a.overflow.length > 0) : 0;
-  return { containerRef: u, measureRef: p, moreMeasureRef: O, ...a, paddingOf: (t) => {
+  }, [o, l, u, b]);
+  const M = N === void 0 ? -1 : l.findIndex((t) => t.id === N), F = r.widths.length === l.length && r.widths.every((t) => t > 0), w = u ? [] : r.paddings.map(([t, e]) => (t + e) * (1 - B)), d = F && !b ? G(p, r.widths, r.available, r.gap, r.more, M, u, w) : { visible: p, overflow: [] }, C = !F || u ? 0 : b ? k(p, r.widths, w, r.available, r.gap) : J(d.visible, r.widths, w, r.available, r.gap, r.more, d.overflow.length > 0);
+  return { containerRef: g, measureRef: m, moreMeasureRef: L, ...d, paddingOf: (t) => {
     const e = r.paddings[t];
     if (!C || !e) return;
-    const n = 1 - C * (1 - _);
+    const n = 1 - C * (1 - B);
     return { paddingLeft: e[0] * n, paddingRight: e[1] * n };
   }, promote: (t) => {
-    if (!a.overflow.includes(t)) return;
-    const e = a.visible[a.visible.length - 1];
+    if (!d.overflow.includes(t)) return;
+    const e = d.visible[d.visible.length - 1];
     if (e === void 0) return;
-    const n = [...h], d = n.indexOf(t), s = n.indexOf(e);
-    [n[d], n[s]] = [n[s], n[d]], q({ signature: m, order: n });
+    const n = [...p], a = n.indexOf(t), s = n.indexOf(e);
+    [n[a], n[s]] = [n[s], n[a]], T({ signature: h, order: n });
   } };
 };
-export { K as useTabsOverflow$u };
+export { U as useTabsOverflow$u };

package/dist/components/Tabs/useTabsScroll.d.ts

@@ -0,0 +1,4 @@
+import { type RefObject } from 'react';
+/** Ряд линейных вкладок прокручивается к активной, края за которыми есть вкладки затухают (tabsScroll.ts). */
+export declare const useTabsScroll: (trackRef: RefObject<HTMLDivElement | null>, enabled: boolean, activeTab: string | number | undefined) => void;
+//# sourceMappingURL=useTabsScroll.d.ts.map

package/dist/components/Tabs/useTabsScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabsScroll.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/useTabsScroll.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhE,8GAA8G;AAC9G,eAAO,MAAM,aAAa,GAAI,UAAU,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,SAAS,OAAO,EAAE,WAAW,MAAM,GAAG,MAAM,GAAG,SAAS,SAyBjI,CAAC"}

package/dist/components/Tabs/useTabsScroll.js

@@ -0,0 +1,17 @@
+import { useRef as u, useLayoutEffect as s } from "react";
+import { createTabsScroll$u as f } from "../../vanilla/core/tabsScroll.js";
+const i = (c, l, e) => {
+  const t = u(null), n = u(e);
+  s(() => {
+    const r = c.current;
+    if (!l || !r) return;
+    const o = f(r);
+    return t.current = o, o.reveal(!1), () => {
+      o.destroy(), t.current = null;
+    };
+  }, [l, c]), s(() => {
+    const r = t.current;
+    r && (r.fade(), n.current !== e && (n.current = e, r.reveal(!0)));
+  });
+};
+export { i as useTabsScroll$u };

package/dist/components/Textarea/Textarea.d.ts

@@ -1,4 +1,24 @@
 
-import { TextareaProperties } from './Textarea.types';
-export declare const Textarea: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, title, placeholder, defaultValue, value, id: providedId, name, onChange, required, disabled, lineUp, rowGap, columnGap, styleInputContainer, styleTitle, styleInput, className, size, validationText, validationOn, }: TextareaProperties) => import("react/jsx-runtime").JSX.Element;
+export declare const Textarea: import("react").ForwardRefExoticComponent<import("../..").FieldAccessibilityProps & Partial<{
+    title: string;
+    placeholder: string;
+    defaultValue: string;
+    value: string;
+    id: string;
+    name: string;
+    onChange: React.ChangeEventHandler<HTMLTextAreaElement>;
+    onBlur: React.FocusEventHandler<HTMLTextAreaElement>;
+    required: boolean;
+    disabled: boolean;
+    lineUp: boolean;
+    rowGap: string | number;
+    columnGap: string | number;
+    styleInputContainer: import("react").CSSProperties;
+    styleTitle: import("react").CSSProperties;
+    styleInput: import("react").CSSProperties;
+    className: string;
+    size: import("../..").FieldSize;
+    validationText: string;
+    validationOn: boolean;
+}> & import("react").RefAttributes<HTMLTextAreaElement>>;
 //# sourceMappingURL=Textarea.d.ts.map

package/dist/components/Textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAMrD,eAAO,MAAM,QAAQ,GAAI,0TAuBtB,kBAAkB,4CAqFpB,CAAA"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAQ1C,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;wDA+GnB,CAAC"}