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

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

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