urfu-ui-kit-react 2.1.2 → 2.1.4

package/dist/components/Select/MobileOptionSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MobileOptionSheet.d.ts","sourceRoot":"","sources":["../../../src/components/Select/MobileOptionSheet.tsx"],"names":[],"mappings":"AAQA,OAAO,0BAA0B,CAAC;AA4BlC,KAAK,WAAW,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI;IACjD,MAAM,EAAE,OAAO,CAAC;IAChB,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;IACnC,qGAAqG;IACrG,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+EAA+E;IAC/E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6FAA6F;IAC7F,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,MAAM,EACN,KAAK,EACL,OAAO,EACP,QAAgB,EAChB,UAAU,EACV,QAAQ,EACR,OAAO,EACP,UAAkB,EAClB,cAAc,EACd,OAAe,GAClB,EAAE,sBAAsB,CAAC,CAAC,CAAC,2CAgH3B"}
+{"version":3,"file":"MobileOptionSheet.d.ts","sourceRoot":"","sources":["../../../src/components/Select/MobileOptionSheet.tsx"],"names":[],"mappings":"AAQA,OAAO,kEAAkE,CAAC;AA4B1E,KAAK,WAAW,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI;IACjD,MAAM,EAAE,OAAO,CAAC;IAChB,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;IACnC,qGAAqG;IACrG,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+EAA+E;IAC/E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6FAA6F;IAC7F,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,MAAM,EACN,KAAK,EACL,OAAO,EACP,QAAgB,EAChB,UAAU,EACV,QAAQ,EACR,OAAO,EACP,UAAkB,EAClB,cAAc,EACd,OAAe,GAClB,EAAE,sBAAsB,CAAC,CAAC,CAAC,2CAgH3B"}

package/dist/components/Select/MobileOptionSheet.js

@@ -0,0 +1,116 @@
+import { jsxs as _, jsx as t, Fragment as I } from "react/jsx-runtime";
+import { useState as x, useEffect as D, useMemo as O } from "react";
+import { useAutoId$u as f } from "../../hooks/useAutoId.js";
+import { getOptionKeys$u as B } from "../../shared/optionValue.js";
+import { Button$u as C } from "../Button/Button.js";
+import { Checkbox$u as E } from "../Checkbox/Checkbox.js";
+import { Icon$u as g } from "../Icon/Icon.js";
+import { Modal$u as K } from "../Modal/Modal.js";
+import { Search$u as M } from "../Search/Search.js";
+/* empty css                                                 */
+const S = 8, T = /* @__PURE__ */ new Set(["ArrowDown", "ArrowRight"]), W = /* @__PURE__ */ new Set(["ArrowUp", "ArrowLeft"]), j = (o, m) => {
+  var c;
+  if (o.key === "Enter") {
+    o.preventDefault(), m();
+    return;
+  }
+  const r = T.has(o.key);
+  if (!r && !W.has(o.key)) return;
+  o.preventDefault();
+  const s = o.currentTarget.closest('[role="radiogroup"]'), l = [...(s == null ? void 0 : s.querySelectorAll('input[type="radio"]')) ?? []], a = l.indexOf(o.currentTarget);
+  (c = l[(a + (r ? 1 : -1) + l.length) % l.length]) == null || c.focus();
+};
+function X({
+  active: o,
+  title: m,
+  options: r,
+  multiple: s = !1,
+  isSelected: l,
+  onSelect: a,
+  onClose: c,
+  searchable: k = !1,
+  onSearchChange: i,
+  loading: A = !1
+}) {
+  const p = f(void 0, "u-option-sheet-title"), R = f(void 0, "u-option-sheet"), b = f(void 0, "u-option-sheet-search"), [n, y] = x(""), v = k || r.length > S;
+  D(() => {
+    o && y("");
+  }, [o]);
+  const u = O(() => {
+    const e = n.trim().toLowerCase();
+    return e ? r.filter((d) => (d.label ?? "").toLowerCase().includes(e)) : r;
+  }, [r, n]), N = O(() => B(u), [u]), L = (e) => {
+    y(e.target.value), i == null || i(e.target.value);
+  }, w = () => {
+    n && (i == null || i("")), c();
+  };
+  return /* @__PURE__ */ _(
+    K,
+    {
+      active: o,
+      onCancel: w,
+      ariaLabelledBy: p,
+      className: "u-react-option-sheet",
+      mobileSheet: !0,
+      initialFocus: "dialog",
+      closeOnEscape: !0,
+      closeButtonInside: !0,
+      lockScroll: !0,
+      unmountOnClose: !0,
+      children: [
+        /* @__PURE__ */ t("h2", { id: p, className: "u-react-option-sheet__title", children: m }),
+        v ? /* @__PURE__ */ _(I, { children: [
+          /* @__PURE__ */ t("label", { className: "u-react-option-sheet__sr-only", htmlFor: b, children: "Поиск по вариантам" }),
+          /* @__PURE__ */ t(
+            M,
+            {
+              id: b,
+              className: "u-react-option-sheet__search",
+              placeholder: "Поиск",
+              value: n,
+              onChange: L
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: "u-react-option-sheet__list",
+            role: s ? "group" : "radiogroup",
+            "aria-labelledby": p,
+            children: A ? /* @__PURE__ */ t("div", { className: "u-react-option-sheet__empty", children: "Загрузка…" }) : u.length === 0 ? /* @__PURE__ */ t("div", { className: "u-react-option-sheet__empty", children: "Ничего не найдено" }) : u.map((e, d) => {
+              const h = l(e);
+              return s ? /* @__PURE__ */ t("div", { className: "u-react-option-sheet__option", children: /* @__PURE__ */ t(E, { checked: h, onChange: () => a(e), children: e.label }) }, N[d]) : /* @__PURE__ */ _(
+                "label",
+                {
+                  className: `u-react-option-sheet__option u-react-option-sheet__option--single${h ? " is-selected" : ""}`,
+                  children: [
+                    /* @__PURE__ */ t(
+                      "input",
+                      {
+                        className: "u-react-option-sheet__sr-only",
+                        type: "radio",
+                        name: R,
+                        checked: h,
+                        onChange: () => {
+                        },
+                        onClick: () => a(e),
+                        onKeyDown: (F) => j(F, () => a(e))
+                      }
+                    ),
+                    /* @__PURE__ */ t("span", { className: "u-react-option-sheet__label", children: e.label }),
+                    e.icon ? /* @__PURE__ */ t("span", { role: e.iconLabel ? "img" : void 0, "aria-label": e.iconLabel, "aria-hidden": e.iconLabel ? void 0 : !0, children: /* @__PURE__ */ t(g, { name: e.icon, size: 16 }) }) : null,
+                    h ? /* @__PURE__ */ t("span", { className: "u-react-option-sheet__check", "aria-hidden": !0, children: /* @__PURE__ */ t(g, { name: "check", size: 20 }) }) : null
+                  ]
+                },
+                N[d]
+              );
+            })
+          }
+        ),
+        s ? /* @__PURE__ */ t("div", { className: "u-react-option-sheet__footer", children: /* @__PURE__ */ t(C, { type: "button", onClick: w, children: "Готово" }) }) : null
+      ]
+    }
+  );
+}
+export { X as MobileOptionSheet$u };

package/dist/components/Select/Select.js

@@ -0,0 +1,319 @@
+import { jsxs as u, jsx as o, Fragment as Ne } from "react/jsx-runtime";
+import { getFieldAccessibility$u as we } from "../../shared/fieldAccessibility.js";
+import { useRef as $e, useMemo as je, useState as F, useEffect as Pe } from "react";
+/* empty css                 */
+/* empty css        */
+/* empty css                  */
+/* empty css                 */
+import { createPortal as ze } from "react-dom";
+import { useSelectEngine$u as Te } from "../../hooks/useSelectEngine.js";
+import { OPTION_STATE_COLORS$u as G } from "../../shared/optionStateColors.js";
+import { isSameOptionValue$u as k, getOptionKeys$u as Re } from "../../shared/optionValue.js";
+import { getPopupTransitionStyle$u as _ } from "../../shared/popupTransition.js";
+import { sizeClassName$u as De, isCompact$u as Ee } from "../../shared/size.js";
+import { Icon$u as He } from "../Icon/Icon.js";
+import { useMobilePicker$u as Ce } from "../../hooks/useMobilePicker.js";
+import { MobileOptionSheet$u as Ae } from "./MobileOptionSheet.js";
+import { getPortalScopeProps$u as Ke } from "../../shared/uiKitDefaults.js";
+import { resolveValidation$u as Le } from "../../vanilla/core/validation.js";
+import { resolveSheetTitle$u as Me } from "../../vanilla/core/sheetTitle.js";
+const it = ({
+  "aria-label": N,
+  "aria-labelledby": w,
+  "aria-describedby": Y,
+  title: p = "",
+  required: $ = !1,
+  options: s,
+  styleSelectContainer: q,
+  styleTitle: J,
+  styleSelect: j,
+  lineUp: y = !1,
+  rowGap: Q = 4,
+  columnGap: X = 20,
+  placeholder: P = "Не выбрано",
+  value: t,
+  isClearable: z,
+  onChange: m,
+  className: Z,
+  tableView: h = !1,
+  size: T,
+  validationText: V = "Заполните поле",
+  validationOn: U,
+  error: ee,
+  absoluteValidationText: te,
+  disabled: n,
+  portalOn: oe,
+  noScroll: v,
+  variant: ce = "field",
+  id: re,
+  mobilePicker: se
+}) => {
+  const d = Ee(T, h), R = De(T, h), b = ce === "button", f = Le({ error: ee, validationOn: U, validationText: V }), S = s.findIndex((e) => k(e == null ? void 0 : e.value, t == null ? void 0 : t.value)), i = Te({
+    optionsLength: s.length,
+    initialIndex: S >= 0 ? S : 0,
+    selectedIndex: S,
+    disabled: n,
+    portalOn: oe,
+    id: re,
+    idPrefix: "u-select",
+    // Список встаёт под полем: прежняя постоянная в 90 была подогнана под
+    // компактное поле в 30 пикселей и на обычном поле накрывала его край.
+    getPortalPosition: (e) => ({ x: e.x, y: e.y + 60 + e.height + e.scrollY }),
+    onSelectByIndex: (e) => {
+      var g;
+      const c = s[e];
+      c && (m(c), (g = O.current) == null || g.close());
+    }
+  }), O = $e(i);
+  O.current = i;
+  const {
+    isOpen: I,
+    blockRef: D,
+    portalOptionsRef: ie,
+    optionsListRef: le,
+    listboxId: l,
+    activeDescendantId: ae,
+    activeIndex: ne,
+    hoveredIndex: de,
+    setHoveredIndex: E,
+    handleKeyDown: ue,
+    shouldRenderPortal: pe,
+    portalStatus: me,
+    shouldRenderLocal: he,
+    localStatus: be,
+    isAnimated: H,
+    portalWidth: fe,
+    usePortal: xe
+  } = i, a = i.portalPosition, ge = we(l, p, $, f, {
+    "aria-label": N,
+    "aria-labelledby": w,
+    "aria-describedby": Y
+  }), C = i.close, A = (e) => typeof e == "number" ? `calc(${e} * var(--u-preset-unit, 1px))` : String(e), ye = je(() => Re(s), [s]), r = Ce(se) && !b, [K, x] = F(!1), [ve, Se] = F("");
+  Pe(() => {
+    var e;
+    r ? (e = O.current) == null || e.close() : x(!1);
+  }, [r]);
+  const L = () => {
+    n || (Se(Me(D.current, { title: p, ariaLabel: N, ariaLabelledBy: w, placeholder: P })), x(!0));
+  }, Oe = (e) => {
+    e.key !== "Enter" && e.key !== " " && e.key !== "ArrowDown" || (e.preventDefault(), L());
+  }, M = (e) => e.icon ? /* @__PURE__ */ u("span", { className: "u-react-select-option-content", children: [
+    /* @__PURE__ */ o("span", { className: "u-react-select-option-label", children: e.label }),
+    /* @__PURE__ */ o("span", { role: e.iconLabel ? "img" : void 0, "aria-label": e.iconLabel, "aria-hidden": e.iconLabel ? void 0 : !0, children: /* @__PURE__ */ o(He, { name: e.icon, size: 16 }) })
+  ] }) : e.label, B = (e, c, g) => {
+    const W = k(t == null ? void 0 : t.value, e == null ? void 0 : e.value), Ie = de === c || ne === c;
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        className: "u-selectbox-option",
+        "data-option-index": c,
+        id: `${l}-option-${c}`,
+        role: "option",
+        "aria-selected": W,
+        onClick: (ke) => {
+          ke.stopPropagation(), m(e), C();
+        },
+        style: Object.assign(
+          {
+            wordBreak: "break-word"
+          },
+          d ? {
+            minHeight: "var(--u-compact-height)",
+            fontSize: "var(--u-compact-font-size)",
+            lineHeight: 1,
+            padding: "var(--u-compact-padding)"
+          } : null,
+          W ? { backgroundColor: G.selectedBackground } : Ie ? { backgroundColor: G.hoveredBackground } : null,
+          g && v ? {
+            maxHeight: "none"
+          } : null,
+          j
+        ),
+        onMouseEnter: () => E(c),
+        onMouseLeave: () => E(null),
+        children: M(e)
+      },
+      ye[c]
+    );
+  };
+  return /* @__PURE__ */ u("div", { className: `u-react-select-container${h && d ? " u-react-select-container--table" : ""}${R ? ` ${R}` : ""} ${Z ?? ""}`, style: { position: "relative" }, children: [
+    /* @__PURE__ */ u(
+      "div",
+      {
+        style: Object.assign(
+          {
+            display: "flex",
+            flexDirection: y ? "row" : "column",
+            rowGap: y ? null : A(Q),
+            columnGap: y ? A(X) : null
+          },
+          q
+        ),
+        children: [
+          p && /* @__PURE__ */ o(
+            "div",
+            {
+              id: `${l}-label`,
+              className: `${$ ? "u-required" : ""} u-react-select-title`,
+              style: Object.assign(
+                {
+                  color: "var(--u-field-title-color, #545454)",
+                  fontSize: "var(--u-field-label-size-main, calc(14 * var(--u-unit, 1px)))"
+                },
+                J
+              ),
+              children: p
+            }
+          ),
+          /* @__PURE__ */ u(
+            "div",
+            {
+              className: `u-selectbox${n ? " u-selectbox-disabled" : ""} u-react-select${b ? " u-react-select--button" : ""}`,
+              ref: D,
+              style: Object.assign(
+                {
+                  width: "100%"
+                },
+                j
+              ),
+              children: [
+                /* @__PURE__ */ u(
+                  "div",
+                  {
+                    className: I ? "u-selectbox-select u-selectbox-select-open" : "u-selectbox-select",
+                    tabIndex: n ? -1 : 0,
+                    role: "combobox",
+                    ...ge,
+                    "aria-expanded": r ? K : I,
+                    "aria-haspopup": r ? "dialog" : "listbox",
+                    "aria-controls": r ? void 0 : l,
+                    "aria-disabled": n || void 0,
+                    "aria-activedescendant": r ? void 0 : ae,
+                    onKeyDown: r ? Oe : ue,
+                    onClick: (e) => r ? L() : i.toggle(e.currentTarget),
+                    style: Object.assign(
+                      d ? {
+                        height: "var(--u-compact-height)",
+                        fontSize: "var(--u-compact-font-size)",
+                        lineHeight: 1,
+                        padding: "var(--u-compact-padding)",
+                        borderRadius: "calc(8 * var(--u-unit, 1px))"
+                      } : {},
+                      f.hasError && { border: "1px solid var(--u-color-error, #EF302B)" }
+                    ),
+                    children: [
+                      t != null && t.value && !b ? /* @__PURE__ */ o("span", { style: { maxWidth: h && d ? "none" : z ? "calc(100% - calc(40 * var(--u-unit, 1px)))" : "calc(100% - calc(18 * var(--u-unit, 1px)))" }, className: "u-selectbox-select-title", children: M(t) }) : /* @__PURE__ */ o("span", { style: { color: "var(--u-field-title-color, #545454)" }, className: "u-selectbox-select-title", children: P }),
+                      t != null && t.value && z && !b ? /* @__PURE__ */ o(
+                        "i",
+                        {
+                          className: "u-selectbox-select-icon-cross",
+                          role: "button",
+                          "aria-label": "Очистить",
+                          style: Object.assign(
+                            d ? {
+                              right: "calc(28 * var(--u-unit, 1px))"
+                            } : {},
+                            n && { pointerEvents: "none" }
+                          ),
+                          onClick: (e) => {
+                            e.stopPropagation(), m({}), C();
+                          }
+                        }
+                      ) : /* @__PURE__ */ o(Ne, {}),
+                      /* @__PURE__ */ o(
+                        "i",
+                        {
+                          className: "u-selectbox-select-icon-arrow",
+                          style: Object.assign(
+                            I ? {
+                              transform: "rotate(180deg)",
+                              top: "calc(50% - calc(4 * var(--u-unit, 1px)))"
+                            } : {},
+                            d ? {
+                              width: "calc(12 * var(--u-unit, 1px)) !important",
+                              right: "calc(8 * var(--u-unit, 1px))",
+                              maxWidth: "calc(100% - calc(18 * var(--u-unit, 1px)))"
+                            } : {}
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ),
+                xe ? pe && a && ze(
+                  /* @__PURE__ */ o(
+                    "div",
+                    {
+                      ref: ie,
+                      ...Ke(),
+                      id: l,
+                      role: "listbox",
+                      className: "u-selectbox-options u-react-select-options",
+                      style: Object.assign(
+                        {
+                          width: fe,
+                          left: a == null ? void 0 : a.x,
+                          top: (a == null ? void 0 : a.y) - 60,
+                          opacity: 1,
+                          height: "fit-content",
+                          // Переменная, чтобы список внутри модалки можно было
+                          // поднять над ней, не трогая код потребителя.
+                          zIndex: "var(--u-select-popup-z, 10010)",
+                          display: "block"
+                        },
+                        v ? {
+                          maxHeight: "none"
+                        } : {},
+                        i.optionsStyle,
+                        _(me, H)
+                      ),
+                      children: s.map((e, c) => B(e, c, !1))
+                    }
+                  ),
+                  document.body
+                ) : he && /* @__PURE__ */ o(
+                  "div",
+                  {
+                    ref: le,
+                    id: l,
+                    role: "listbox",
+                    className: "u-selectbox-options u-react-select-options",
+                    style: Object.assign(
+                      v ? { maxHeight: "none" } : {},
+                      /**
+                       * `display` держим сами всё время, пока узел в разметке.
+                       * Иначе при закрытии снимается класс `…-select-open`,
+                       * список на один кадр получает `display: none` от vanilla,
+                       * и браузер сбрасывает переход — прозрачность прыгала в ноль
+                       * вместо плавного угасания.
+                       */
+                      { display: "block" },
+                      i.optionsStyle,
+                      _(be, H)
+                    ),
+                    children: s.map((e, c) => B(e, c, !0))
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    f.showText && /* @__PURE__ */ o("h5", { id: `${l}-error`, className: "h5 clr-red-main", style: te ? { position: "absolute", bottom: "calc(-20 * var(--u-unit, 1px))" } : { position: "relative", marginTop: "calc(4 * var(--u-unit, 1px))" }, children: f.text }),
+    r ? /* @__PURE__ */ o(
+      Ae,
+      {
+        active: K,
+        title: ve,
+        options: s,
+        isSelected: (e) => k(t == null ? void 0 : t.value, e == null ? void 0 : e.value),
+        onSelect: (e) => {
+          m(e), x(!1);
+        },
+        onClose: () => x(!1)
+      }
+    ) : null
+  ] });
+};
+export { it as Select$u };

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,38 @@
+import { jsx as l } from "react/jsx-runtime";
+/* empty css                  */
+/* empty css          */
+const t = (e) => typeof e == "number" ? `calc(${Math.max(0, e)} * var(--u-unit, 1px))` : e;
+function w({
+  variant: e = "text",
+  width: r,
+  height: u,
+  count: n = 1,
+  gap: a,
+  lastLineWidth: m = "70%",
+  animation: i = "wave",
+  label: o,
+  className: h = "",
+  style: k
+}) {
+  const s = Number.isFinite(n) ? Math.max(0, Math.floor(n)) : 1;
+  if (!s) return null;
+  const p = {
+    "--u-skeleton-width": t(r),
+    "--u-skeleton-height": t(u),
+    "--u-skeleton-gap": t(a),
+    "--u-skeleton-last-line-width": t(m),
+    ...k
+  };
+  return /* @__PURE__ */ l(
+    "span",
+    {
+      className: `u-skeleton u-skeleton--${e}${i ? ` u-skeleton--${i}` : ""}${e === "text" && s > 1 ? " u-skeleton--multiline" : ""} ${h}`.trim(),
+      style: p,
+      role: o ? "status" : void 0,
+      "aria-label": o || void 0,
+      "aria-hidden": o ? void 0 : !0,
+      children: Array.from({ length: s }, (c, d) => /* @__PURE__ */ l("span", { className: "u-skeleton__shape" }, d))
+    }
+  );
+}
+export { w as Skeleton$u };

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

@@ -1,7 +1,9 @@
 import type { CSSProperties } from 'react';
+export type SkeletonVariant = 'text' | 'rectangular' | 'rounded' | 'circular';
+export type SkeletonAnimation = 'wave' | 'pulse' | false;
 export interface SkeletonProps {
     /** Геометрия загружаемого содержимого; раскладку задаёт потребитель. */
-    variant?: 'text' | 'rectangular' | 'rounded' | 'circular';
+    variant?: SkeletonVariant;
     /** Числа масштабируются через --u-unit; строки принимают CSS-единицы. */
     width?: CSSProperties['width'];
     height?: CSSProperties['height'];
@@ -9,7 +11,7 @@ export interface SkeletonProps {
     gap?: CSSProperties['gap'];
     /** Короткая последняя строка многострочного текста. */
     lastLineWidth?: CSSProperties['width'];
-    animation?: 'wave' | 'pulse' | false;
+    animation?: SkeletonAnimation;
     /** Одна подпись для самостоятельного скелетона. В группах задайте её снаружи. */
     label?: string;
     className?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.types.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,aAAa;IAC5B,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,UAAU,CAAC;IAC1D,yEAAyE;IACzE,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3B,uDAAuD;IACvD,aAAa,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;IACrC,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB"}
+{"version":3,"file":"Skeleton.types.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,UAAU,CAAC;AAE9E,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;AAEzD,MAAM,WAAW,aAAa;IAC5B,wEAAwE;IACxE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,yEAAyE;IACzE,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3B,uDAAuD;IACvD,aAAa,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB"}

package/dist/components/Status/Status.js

@@ -0,0 +1,43 @@
+import { jsx as a } from "react/jsx-runtime";
+/* empty css                 */
+import { useAutoId$u as m } from "../../hooks/useAutoId.js";
+/* empty css        */
+const w = ({
+  size: e = "medium",
+  variant: u = "",
+  children: t,
+  truncate: s = !1,
+  className: r = "",
+  id: n,
+  props: i
+}) => {
+  const o = m(n, "u-status");
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      id: o,
+      className: `u-status${e === "large" ? " u-status-large" : ""}${s ? " u-status-truncate" : ""} ${((c) => {
+        switch (c) {
+          case "warning":
+            return " u-status-warning";
+          case "info":
+            return " u-status-info";
+          case "neutral":
+            return " u-status-neutral";
+          case "success":
+            return " u-status-success";
+          case "danger":
+            return " u-status-danger";
+          case "intermediate":
+            return " u-status-intermediate";
+          case "prepared":
+            return " u-status-prepared";
+        }
+      })(u)} ${r}`,
+      title: s && (typeof t == "string" || typeof t == "number") ? String(t) : void 0,
+      ...i,
+      children: s ? /* @__PURE__ */ a("span", { className: "u-status__text", children: t }) : t
+    }
+  );
+};
+export { w as Status$u };

package/dist/components/StickyActionBar/StickyActionBar.d.ts

@@ -1,6 +1,6 @@
 import { type PropsWithChildren } from 'react';
 
-import './StickyActionBar.less';
+
 export type StickyActionBarProps = PropsWithChildren<{
     className?: string;
     /** На мобильном экране всегда у нижнего края; на десктопе — обычная группа действий. */

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

@@ -1 +1 @@
-{"version":3,"file":"StickyActionBar.d.ts","sourceRoot":"","sources":["../../../src/components/StickyActionBar/StickyActionBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,kCAAkC,CAAC;AAC1C,OAAO,wBAAwB,CAAC;AAGhC,MAAM,MAAM,oBAAoB,GAAG,iBAAiB,CAAC;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wFAAwF;IACxF,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC,CAAC;AAEH,eAAO,MAAM,eAAe,GAAI,sCAAmD,oBAAoB,4CAyHtG,CAAC"}
+{"version":3,"file":"StickyActionBar.d.ts","sourceRoot":"","sources":["../../../src/components/StickyActionBar/StickyActionBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gEAAgE,CAAC;AAGxE,MAAM,MAAM,oBAAoB,GAAG,iBAAiB,CAAC;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wFAAwF;IACxF,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC,CAAC;AAEH,eAAO,MAAM,eAAe,GAAI,sCAAmD,oBAAoB,4CAyHtG,CAAC"}

package/dist/components/StickyActionBar/StickyActionBar.js

@@ -0,0 +1,73 @@
+import { jsx as A } from "react/jsx-runtime";
+import { useRef as N, useState as H, useEffect as k } from "react";
+/* empty css                 */
+/* empty css                                               */
+import { setDevLauncherOffset$u as E, occupiedFromBottom$u as I } from "../../vanilla/core/devLauncherOffset.js";
+const Y = ({ children: R, className: S = "", mobileFixed: c = !1 }) => {
+  const p = N(null), [m, v] = H(!1);
+  return k(() => {
+    const t = p.current;
+    if (!t) return;
+    if (c) {
+      v(!1);
+      return;
+    }
+    const i = window.matchMedia("(max-width: 576px)");
+    let o;
+    const n = () => {
+      o == null || o(), o = void 0;
+      const r = "--u-sticky-action-bar-scroll-padding", d = "--u-sticky-action-bar-left-inset", g = "--u-sticky-action-bar-right-inset", B = [r, d, g].map((e) => [e, t.style.getPropertyValue(e)]), h = (e, s) => {
+        const u = String(s) + "px";
+        t.style.getPropertyValue(e) !== u && t.style.setProperty(e, u);
+      };
+      let a = null;
+      const b = () => {
+        let e = t.parentElement;
+        for (; e && !/(auto|scroll|hidden|overlay)/.test(getComputedStyle(e).overflowY); )
+          e = e.parentElement;
+        const s = i.matches && e && Number.parseFloat(getComputedStyle(e).paddingBottom) || 0, u = String(s) + "px";
+        t.style.getPropertyValue(r) !== u && t.style.setProperty(r, u);
+        const x = e ? e.getBoundingClientRect().top + e.clientTop + e.clientHeight : window.innerHeight, P = t.style.getPropertyValue("position"), z = t.style.getPropertyPriority("position");
+        t.style.setProperty("position", "static", "important");
+        const f = "u-react-sticky-action-bar-stuck", C = t.classList.contains(f);
+        t.classList.remove(f);
+        const w = t.getBoundingClientRect();
+        C && t.classList.add(f);
+        const L = e ? e.getBoundingClientRect().left + e.clientLeft : 0, V = e ? e.clientWidth : window.innerWidth;
+        h(d, Math.max(0, w.left - L)), h(g, Math.max(0, L + V - w.right));
+        const M = w.bottom;
+        P ? t.style.setProperty("position", P, z) : t.style.removeProperty("position");
+        const O = (Number.parseFloat(getComputedStyle(t).bottom) || 0) + s;
+        v(M > x - O + 1);
+      }, l = () => {
+        a === null && (a = window.requestAnimationFrame(() => {
+          a = null, b();
+        }));
+      };
+      b(), window.addEventListener("scroll", l, { capture: !0, passive: !0 }), window.addEventListener("resize", l);
+      const y = new ResizeObserver(l);
+      y.observe(t), t.parentElement && y.observe(t.parentElement), o = () => {
+        window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l), y.disconnect();
+        for (const [e, s] of B)
+          s ? t.style.setProperty(e, s) : t.style.removeProperty(e);
+        a !== null && window.cancelAnimationFrame(a);
+      };
+    };
+    return n(), i.addEventListener("change", n), () => {
+      i.removeEventListener("change", n), o == null || o();
+    };
+  }, [c]), k(() => {
+    const t = p.current;
+    if (!t) return;
+    const i = {}, o = window.matchMedia("(max-width: 576px)"), n = () => {
+      const d = m || c && o.matches;
+      E(i, d ? I(t) : null);
+    };
+    n();
+    const r = typeof ResizeObserver < "u" ? new ResizeObserver(n) : void 0;
+    return r == null || r.observe(t), window.addEventListener("resize", n), o.addEventListener("change", n), () => {
+      r == null || r.disconnect(), window.removeEventListener("resize", n), o.removeEventListener("change", n), E(i, null);
+    };
+  }, [m, c]), /* @__PURE__ */ A("footer", { ref: p, className: "u-react-sticky-action-bar " + (m ? "u-react-sticky-action-bar-stuck u-react-sticky-action-bar-shadow " : "") + (c ? "u-react-sticky-action-bar-mobile-fixed " : "") + S, children: R });
+};
+export { Y as StickyActionBar$u };

package/dist/components/Switch/Switch.d.ts

@@ -1,6 +1,6 @@
 
 import type { SwitchProps } from './Switch.types';
-import './Switch.less';
+
 /**
  * Переключатель в стиле UI-kit (классы `u-switch` из vanilla-кита).
  *

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,eAAe,CAAC;AAEvB;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,SAAS,GACV,EAAE,WAAW,2CAoBb"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,qDAAqD,CAAC;AAE7D;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,SAAS,GACV,EAAE,WAAW,2CAoBb"}