urfu-ui-kit-react 2.1.7-next.4 → 2.1.7-next.5

package/dist/components/Select/Select.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,0BAA0B,CAAC;AAClC,OAAO,iBAAiB,CAAC;AAYzB,mFAAmF;AACnF,wBAAgB,QAAQ,CAAC,EACvB,OAAgB,EAAE,KAAK,EAAE,MAAM,EAAE,KAAS,EAAE,GAAG,EAAE,aAAqB,EACtE,SAAkB,EAAE,KAAK,EAAE,SAAc,EAAE,KAAK,GACjD,EAAE,aAAa,2CAqBf"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,0BAA0B,CAAC;AAClC,OAAO,iBAAiB,CAAC;AASzB,mFAAmF;AACnF,wBAAgB,QAAQ,CAAC,EACvB,OAAgB,EAAE,KAAK,EAAE,MAAM,EAAE,KAAS,EAAE,GAAG,EAAE,aAAqB,EACtE,SAAkB,EAAE,KAAK,EAAE,SAAc,EAAE,KAAK,GACjD,EAAE,aAAa,2CAqBf"}

package/dist/components/Skeleton/Skeleton.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../src/components/Status/Status.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEjD,OAAO,eAAe,CAAC;AAEvB,eAAO,MAAM,MAAM,GAAI,yEAQpB,gBAAgB,4CAuClB,CAAA"}
+{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../src/components/Status/Status.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEjD,OAAO,eAAe,CAAC;AAGvB,eAAO,MAAM,MAAM,GAAI,yEAQpB,gBAAgB,4CAuClB,CAAA"}