@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
39 lines (35 loc) • 1.86 kB
JavaScript
"use client";
const require_children = require('../../utils/children.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_var = require('../../core/system/var.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_skeleton_style = require('./skeleton.style.cjs');
//#region src/components/skeleton/skeleton.tsx
const { PropsContext: SkeletonPropsContext, usePropsContext: useSkeletonPropsContext, withContext } = require_create_component.createComponent("skeleton", require_skeleton_style.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 = !!require_children.useValidChildren(children).length;
fitContent ??= hasChildren;
return {
"aria-busy": loading,
"data-loaded": (0, require_utils_index.utils_exports.dataAttr)(!loading),
"data-loading": (0, require_utils_index.utils_exports.dataAttr)(loading),
"--duration": (0, require_utils_index.utils_exports.isNumber)(duration) ? `${duration}s` : duration,
"--end-color": require_var.varAttr(endColor, "colors"),
"--fade-duration": (0, require_utils_index.utils_exports.isNumber)(fadeDuration) ? `${fadeDuration}s` : fadeDuration,
"--height": fitContent ? "fit-content" : void 0,
"--start-color": require_var.varAttr(startColor, "colors"),
"--width": fitContent ? "fit-content" : void 0,
children,
...rest
};
});
//#endregion
exports.Skeleton = Skeleton;
exports.SkeletonPropsContext = SkeletonPropsContext;
exports.useSkeletonPropsContext = useSkeletonPropsContext;
//# sourceMappingURL=skeleton.cjs.map