UNPKG

@trail-ui/react

Version:
40 lines (38 loc) 1.01 kB
// 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 };