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

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

"use client";


import { styled } from "../../core/system/factory.js";
import { mergeCSS } from "../../core/css/merge-css.js";
import { Skeleton } from "./skeleton.js";
import { jsx } from "react/jsx-runtime";

//#region src/components/skeleton/skeleton-text.tsx
const SkeletonText = (({ css, children, gap = "2", lineClamp = 3, loading = true, _loading, _notFirst, rootProps,...rest }) => {
	return /* @__PURE__ */ jsx(styled.div, {
		w: "full",
		...rootProps,
		children: Array.from({ length: lineClamp }).map((_, index) => {
			if (!loading && index > 0) return null;
			return /* @__PURE__ */ jsx(Skeleton, {
				css: mergeCSS(css, { "--height": "sizes.4" }),
				loading,
				_loading: {
					_last: { maxW: lineClamp > 1 ? "80%" : "100%" },
					..._loading
				},
				_notFirst: {
					mt: gap,
					..._notFirst
				},
				...rest,
				children: !loading && index === 0 ? children : void 0
			}, index);
		})
	});
});

//#endregion
export { SkeletonText };
//# sourceMappingURL=skeleton-text.js.map