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

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

"use client";
import { jsx as u } from "react/jsx-runtime";
import { forwardRef as k, useMemo as d } from "react";
import x from "classnames";
import { useLocalTheme as F } from "css-vars-hook";
import { useLinkRefs as L } from "../../internal/hooks/useLinkRefs.js";
import N from "./Skeleton.module.css.js";
import { normalizeUnit as t } from "./normalizeUnit.js";
const R = k(
  ({
    children: a,
    className: i,
    width: e = "fluid",
    height: o,
    borderRadius: r = 12,
    marginY: m = 0,
    marginX: s = 0,
    ...f
  }, n) => {
    const { LocalRoot: l, ref: c } = F();
    L(n, c);
    const p = d(
      () => ({
        width: t(e),
        height: t(o),
        "border-radius": r,
        "margin-y": m,
        "margin-x": s
      }),
      [r, o, s, m, e]
    );
    return /* @__PURE__ */ u(
      l,
      {
        ...f,
        theme: p,
        className: x(N.skeletonFrame, i),
        children: a
      }
    );
  }
);
R.displayName = "SkeletonFrame";
export {
  R as SkeletonFrame
};
//# sourceMappingURL=SkeletonFrame.js.map