@trail-ui/react
Version:
40 lines (38 loc) • 1.01 kB
JavaScript
// src/skeleton/skeleton.tsx
import { clsx, dataAttr } from "@trail-ui/shared-utils";
import { skeleton } from "@trail-ui/theme";
import { forwardRef, useMemo } from "react";
import { jsx } from "react/jsx-runtime";
function Skeleton(props, ref) {
const {
isLoaded = false,
disableAnimation = false,
className,
classNames,
variant,
children,
...skeletonProps
} = props;
const slots = useMemo(
() => skeleton({
variant,
disableAnimation
}),
[disableAnimation, variant]
);
const baseStyles = clsx(classNames == null ? void 0 : classNames.base, className);
return /* @__PURE__ */ jsx(
"div",
{
...skeletonProps,
ref,
className: slots.base({ class: baseStyles }),
"data-loaded": dataAttr(isLoaded),
children: /* @__PURE__ */ jsx("div", { className: slots.content({ class: classNames == null ? void 0 : classNames.content }), children })
}
);
}
var _Skeleton = forwardRef(Skeleton);
export {
_Skeleton
};