@yamada-ui/react/dist/esm/components/skeleton/skeleton.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { useValidChildren } from "../../utils/children.js";
import { utils_exports } from "../../utils/index.js";
import { varAttr } from "../../core/system/var.js";
import { createComponent } from "../../core/components/create-component.js";
import { skeletonStyle } from "./skeleton.style.js";

//#region src/components/skeleton/skeleton.tsx
const { PropsContext: SkeletonPropsContext, usePropsContext: useSkeletonPropsContext, withContext } = createComponent("skeleton", skeletonStyle);
/**
* `Skeleton` is a component that acts as a placeholder until content is loaded.
*
* @see https://yamada-ui.com/docs/components/skeleton
*/
const Skeleton = withContext("div", { transferProps: ["loading"] })(void 0, ({ children, duration, endColor, fadeDuration, fitContent, loading, startColor,...rest }) => {
	const hasChildren = !!useValidChildren(children).length;
	fitContent ??= hasChildren;
	return {
		"aria-busy": loading,
		"data-loaded": (0, utils_exports.dataAttr)(!loading),
		"data-loading": (0, utils_exports.dataAttr)(loading),
		"--duration": (0, utils_exports.isNumber)(duration) ? `${duration}s` : duration,
		"--end-color": varAttr(endColor, "colors"),
		"--fade-duration": (0, utils_exports.isNumber)(fadeDuration) ? `${fadeDuration}s` : fadeDuration,
		"--height": fitContent ? "fit-content" : void 0,
		"--start-color": varAttr(startColor, "colors"),
		"--width": fitContent ? "fit-content" : void 0,
		children,
		...rest
	};
});

//#endregion
export { Skeleton, SkeletonPropsContext, useSkeletonPropsContext };
//# sourceMappingURL=skeleton.js.map