koval-ui/dist/src/lib/Skeleton/SkeletonText.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsxs as S, jsx as o } from "react/jsx-runtime";
import { forwardRef as d, useMemo as L } from "react";
import N from "classnames";
import { useLocalTheme as R } from "css-vars-hook";
import { createArray as T } from "../../internal/utils/createArray.js";
import { useLinkRefs as y } from "../../internal/hooks/useLinkRefs.js";
import { normalizeUnit as a } from "./normalizeUnit.js";
import l from "./Skeleton.module.css.js";
import { SkeletonShape as r } from "./SkeletonShape.js";
const j = d(
  ({
    className: f,
    width: t = "fluid",
    height: m,
    lines: s = 3,
    marginY: i = 36,
    marginX: n = 0,
    ...c
  }, p) => {
    const { LocalRoot: h, ref: g } = R();
    y(p, g);
    const u = L(
      () => ({
        width: a(t),
        height: a(m),
        "margin-y": i,
        "margin-x": n
      }),
      [m, n, i, t]
    ), e = s === 1, x = T(s - 1);
    return /* @__PURE__ */ S(
      h,
      {
        ...c,
        className: N(l.skeletonText, f),
        theme: u,
        children: [
          e && /* @__PURE__ */ o(r, { marginY: 9, height: 24 }),
          !e && x.map((Y, k) => /* @__PURE__ */ o(r, { marginY: 9, height: 24 }, k)),
          !e && /* @__PURE__ */ o(r, { marginY: 9, className: l.shortLine, height: 24 })
        ]
      }
    );
  }
);
j.displayName = "SkeletonText";
export {
  j as SkeletonText
};
//# sourceMappingURL=SkeletonText.js.map