@yamada-ui/skeleton 0.0.0-dev-20230603042803

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hirotomo Yamada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @yamada-ui/skeleton
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/skeleton
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/skeleton
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/skeleton
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/hirotomoyamada/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
+
+## Licence
+
+This package is licensed under the terms of the
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/chunk-I64RKGOG.mjs

@@ -0,0 +1,73 @@
+import {
+  Skeleton
+} from "./chunk-LK7WNBJJ.mjs";
+
+// src/skeleton-circle.tsx
+import { forwardRef as forwardRef2 } from "@yamada-ui/core";
+import { cx as cx2 } from "@yamada-ui/utils";
+
+// src/skeleton-text.tsx
+import { ui, forwardRef } from "@yamada-ui/core";
+import { useValue } from "@yamada-ui/use-value";
+import { cx } from "@yamada-ui/utils";
+import { jsx } from "react/jsx-runtime";
+var SkeletonText = forwardRef(
+  ({
+    className,
+    noOfLines = 3,
+    startColor,
+    endColor,
+    fadeDuration,
+    speed,
+    isLoaded,
+    gap = "2",
+    textHeight = "2",
+    children,
+    ...rest
+  }, ref) => {
+    const computedNoOfLines = useValue(noOfLines);
+    const css = {
+      w: "full"
+    };
+    return /* @__PURE__ */ jsx(ui.div, { ref, className: cx("ui-skeleton-text", className), __css: css, ...rest, children: Array(computedNoOfLines).fill(0).map((_, index) => {
+      if (isLoaded && index > 0)
+        return null;
+      const isLast = index + 1 === computedNoOfLines;
+      const props = !isLoaded ? {
+        mb: !isLast ? gap : void 0,
+        w: computedNoOfLines > 1 ? !isLast ? "100%" : "80%" : "100%",
+        h: textHeight
+      } : {};
+      return /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          ...{ startColor, endColor, fadeDuration, speed, isLoaded, ...props },
+          children: index === 0 ? children : void 0
+        },
+        index
+      );
+    }) });
+  }
+);
+
+// src/skeleton-circle.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SkeletonCircle = forwardRef2(
+  ({ className, boxSize = "12", ...rest }, ref) => {
+    return /* @__PURE__ */ jsx2(
+      Skeleton,
+      {
+        ref,
+        className: cx2("ui-skeleton-circle", className),
+        rounded: "full",
+        boxSize,
+        ...rest
+      }
+    );
+  }
+);
+
+export {
+  SkeletonCircle,
+  SkeletonText
+};

package/dist/chunk-LK7WNBJJ.mjs

@@ -0,0 +1,88 @@
+// src/skeleton.tsx
+import {
+  ui,
+  forwardRef,
+  omitThemeProps,
+  useComponentStyle
+} from "@yamada-ui/core";
+import { useAnimation } from "@yamada-ui/use-animation";
+import { usePrevious } from "@yamada-ui/use-previous";
+import { useValue } from "@yamada-ui/use-value";
+import { cx, useIsMounted } from "@yamada-ui/utils";
+import { jsx } from "react/jsx-runtime";
+var Skeleton = forwardRef((props, ref) => {
+  let [styles, mergedProps] = useComponentStyle("Skeleton", props);
+  const {
+    className,
+    startColor,
+    endColor,
+    fadeDuration = 0.4,
+    speed = 0.8,
+    isLoaded,
+    ...rest
+  } = omitThemeProps(mergedProps);
+  const isMounted = useIsMounted();
+  const prevIsLoaded = usePrevious(isLoaded);
+  const computedStartColor = useValue(startColor);
+  const computedEndColor = useValue(endColor);
+  const fadeIn = useAnimation({
+    keyframes: {
+      "0%": {
+        opacity: 0
+      },
+      "100%": {
+        opacity: 1
+      }
+    },
+    duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`
+  });
+  const animation = useAnimation({
+    keyframes: {
+      "0%": {
+        borderColor: computedStartColor,
+        background: computedStartColor
+      },
+      "100%": {
+        borderColor: computedEndColor,
+        background: computedEndColor
+      }
+    },
+    duration: typeof speed === "string" ? speed : `${speed}s`,
+    iterationCount: "infinite",
+    direction: "alternate",
+    timingFunction: "linear"
+  });
+  const css = {
+    w: "full",
+    h: "4",
+    boxShadow: "none",
+    backgroundClip: "padding-box",
+    cursor: "default",
+    color: "transparent",
+    pointerEvents: "none",
+    userSelect: "none",
+    "&::before, &::after, *": {
+      visibility: "hidden"
+    },
+    ...styles
+  };
+  if (isLoaded) {
+    const animation2 = !isMounted.current || prevIsLoaded ? "none" : fadeIn;
+    return /* @__PURE__ */ jsx(ui.div, { ref, className: cx("ui-skeleton", className), ...rest, animation: animation2 });
+  } else {
+    return /* @__PURE__ */ jsx(
+      ui.div,
+      {
+        ref,
+        className: cx("ui-skeleton", className),
+        __css: css,
+        ...rest,
+        animation
+      }
+    );
+  }
+});
+
+export {
+  Skeleton
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { Skeleton, SkeletonProps } from './skeleton.js';
+export { SkeletonCircle, SkeletonCircleProps } from './skeleton-circle.js';
+export { SkeletonText, SkeletonTextProps } from './skeleton-text.js';
+import '@yamada-ui/core';

package/dist/index.js

@@ -0,0 +1,176 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Skeleton: () => Skeleton,
+  SkeletonCircle: () => SkeletonCircle,
+  SkeletonText: () => SkeletonText
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/skeleton.tsx
+var import_core = require("@yamada-ui/core");
+var import_use_animation = require("@yamada-ui/use-animation");
+var import_use_previous = require("@yamada-ui/use-previous");
+var import_use_value = require("@yamada-ui/use-value");
+var import_utils = require("@yamada-ui/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Skeleton = (0, import_core.forwardRef)((props, ref) => {
+  let [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
+  const {
+    className,
+    startColor,
+    endColor,
+    fadeDuration = 0.4,
+    speed = 0.8,
+    isLoaded,
+    ...rest
+  } = (0, import_core.omitThemeProps)(mergedProps);
+  const isMounted = (0, import_utils.useIsMounted)();
+  const prevIsLoaded = (0, import_use_previous.usePrevious)(isLoaded);
+  const computedStartColor = (0, import_use_value.useValue)(startColor);
+  const computedEndColor = (0, import_use_value.useValue)(endColor);
+  const fadeIn = (0, import_use_animation.useAnimation)({
+    keyframes: {
+      "0%": {
+        opacity: 0
+      },
+      "100%": {
+        opacity: 1
+      }
+    },
+    duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`
+  });
+  const animation = (0, import_use_animation.useAnimation)({
+    keyframes: {
+      "0%": {
+        borderColor: computedStartColor,
+        background: computedStartColor
+      },
+      "100%": {
+        borderColor: computedEndColor,
+        background: computedEndColor
+      }
+    },
+    duration: typeof speed === "string" ? speed : `${speed}s`,
+    iterationCount: "infinite",
+    direction: "alternate",
+    timingFunction: "linear"
+  });
+  const css = {
+    w: "full",
+    h: "4",
+    boxShadow: "none",
+    backgroundClip: "padding-box",
+    cursor: "default",
+    color: "transparent",
+    pointerEvents: "none",
+    userSelect: "none",
+    "&::before, &::after, *": {
+      visibility: "hidden"
+    },
+    ...styles
+  };
+  if (isLoaded) {
+    const animation2 = !isMounted.current || prevIsLoaded ? "none" : fadeIn;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { ref, className: (0, import_utils.cx)("ui-skeleton", className), ...rest, animation: animation2 });
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.ui.div,
+      {
+        ref,
+        className: (0, import_utils.cx)("ui-skeleton", className),
+        __css: css,
+        ...rest,
+        animation
+      }
+    );
+  }
+});
+
+// src/skeleton-circle.tsx
+var import_core2 = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SkeletonCircle = (0, import_core2.forwardRef)(
+  ({ className, boxSize = "12", ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Skeleton,
+      {
+        ref,
+        className: (0, import_utils2.cx)("ui-skeleton-circle", className),
+        rounded: "full",
+        boxSize,
+        ...rest
+      }
+    );
+  }
+);
+
+// src/skeleton-text.tsx
+var import_core3 = require("@yamada-ui/core");
+var import_use_value2 = require("@yamada-ui/use-value");
+var import_utils3 = require("@yamada-ui/utils");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SkeletonText = (0, import_core3.forwardRef)(
+  ({
+    className,
+    noOfLines = 3,
+    startColor,
+    endColor,
+    fadeDuration,
+    speed,
+    isLoaded,
+    gap = "2",
+    textHeight = "2",
+    children,
+    ...rest
+  }, ref) => {
+    const computedNoOfLines = (0, import_use_value2.useValue)(noOfLines);
+    const css = {
+      w: "full"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.div, { ref, className: (0, import_utils3.cx)("ui-skeleton-text", className), __css: css, ...rest, children: Array(computedNoOfLines).fill(0).map((_, index) => {
+      if (isLoaded && index > 0)
+        return null;
+      const isLast = index + 1 === computedNoOfLines;
+      const props = !isLoaded ? {
+        mb: !isLast ? gap : void 0,
+        w: computedNoOfLines > 1 ? !isLast ? "100%" : "80%" : "100%",
+        h: textHeight
+      } : {};
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        Skeleton,
+        {
+          ...{ startColor, endColor, fadeDuration, speed, isLoaded, ...props },
+          children: index === 0 ? children : void 0
+        },
+        index
+      );
+    }) });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Skeleton,
+  SkeletonCircle,
+  SkeletonText
+});

package/dist/index.mjs

@@ -0,0 +1,12 @@
+import {
+  SkeletonCircle,
+  SkeletonText
+} from "./chunk-I64RKGOG.mjs";
+import {
+  Skeleton
+} from "./chunk-LK7WNBJJ.mjs";
+export {
+  Skeleton,
+  SkeletonCircle,
+  SkeletonText
+};

package/dist/skeleton-circle.d.ts

@@ -0,0 +1,7 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { SkeletonProps } from './skeleton.js';
+
+type SkeletonCircleProps = SkeletonProps;
+declare const SkeletonCircle: _yamada_ui_core.Component<"div", SkeletonProps>;
+
+export { SkeletonCircle, SkeletonCircleProps };

package/dist/skeleton-circle.js

@@ -0,0 +1,128 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/skeleton-circle.tsx
+var skeleton_circle_exports = {};
+__export(skeleton_circle_exports, {
+  SkeletonCircle: () => SkeletonCircle
+});
+module.exports = __toCommonJS(skeleton_circle_exports);
+var import_core2 = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+
+// src/skeleton.tsx
+var import_core = require("@yamada-ui/core");
+var import_use_animation = require("@yamada-ui/use-animation");
+var import_use_previous = require("@yamada-ui/use-previous");
+var import_use_value = require("@yamada-ui/use-value");
+var import_utils = require("@yamada-ui/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Skeleton = (0, import_core.forwardRef)((props, ref) => {
+  let [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
+  const {
+    className,
+    startColor,
+    endColor,
+    fadeDuration = 0.4,
+    speed = 0.8,
+    isLoaded,
+    ...rest
+  } = (0, import_core.omitThemeProps)(mergedProps);
+  const isMounted = (0, import_utils.useIsMounted)();
+  const prevIsLoaded = (0, import_use_previous.usePrevious)(isLoaded);
+  const computedStartColor = (0, import_use_value.useValue)(startColor);
+  const computedEndColor = (0, import_use_value.useValue)(endColor);
+  const fadeIn = (0, import_use_animation.useAnimation)({
+    keyframes: {
+      "0%": {
+        opacity: 0
+      },
+      "100%": {
+        opacity: 1
+      }
+    },
+    duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`
+  });
+  const animation = (0, import_use_animation.useAnimation)({
+    keyframes: {
+      "0%": {
+        borderColor: computedStartColor,
+        background: computedStartColor
+      },
+      "100%": {
+        borderColor: computedEndColor,
+        background: computedEndColor
+      }
+    },
+    duration: typeof speed === "string" ? speed : `${speed}s`,
+    iterationCount: "infinite",
+    direction: "alternate",
+    timingFunction: "linear"
+  });
+  const css = {
+    w: "full",
+    h: "4",
+    boxShadow: "none",
+    backgroundClip: "padding-box",
+    cursor: "default",
+    color: "transparent",
+    pointerEvents: "none",
+    userSelect: "none",
+    "&::before, &::after, *": {
+      visibility: "hidden"
+    },
+    ...styles
+  };
+  if (isLoaded) {
+    const animation2 = !isMounted.current || prevIsLoaded ? "none" : fadeIn;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { ref, className: (0, import_utils.cx)("ui-skeleton", className), ...rest, animation: animation2 });
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.ui.div,
+      {
+        ref,
+        className: (0, import_utils.cx)("ui-skeleton", className),
+        __css: css,
+        ...rest,
+        animation
+      }
+    );
+  }
+});
+
+// src/skeleton-circle.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SkeletonCircle = (0, import_core2.forwardRef)(
+  ({ className, boxSize = "12", ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Skeleton,
+      {
+        ref,
+        className: (0, import_utils2.cx)("ui-skeleton-circle", className),
+        rounded: "full",
+        boxSize,
+        ...rest
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SkeletonCircle
+});

package/dist/skeleton-circle.mjs

@@ -0,0 +1,7 @@
+import {
+  SkeletonCircle
+} from "./chunk-I64RKGOG.mjs";
+import "./chunk-LK7WNBJJ.mjs";
+export {
+  SkeletonCircle
+};

package/dist/skeleton-text.d.ts

@@ -0,0 +1,12 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { UIProps } from '@yamada-ui/core';
+import { SkeletonProps } from './skeleton.js';
+
+type SkeletonTextOptions = {
+    gap?: UIProps['gap'];
+    textHeight?: UIProps['height'];
+};
+type SkeletonTextProps = SkeletonProps & SkeletonTextOptions;
+declare const SkeletonText: _yamada_ui_core.Component<"div", SkeletonTextProps>;
+
+export { SkeletonText, SkeletonTextProps };

package/dist/skeleton-text.js

@@ -0,0 +1,153 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/skeleton-text.tsx
+var skeleton_text_exports = {};
+__export(skeleton_text_exports, {
+  SkeletonText: () => SkeletonText
+});
+module.exports = __toCommonJS(skeleton_text_exports);
+var import_core2 = require("@yamada-ui/core");
+var import_use_value2 = require("@yamada-ui/use-value");
+var import_utils2 = require("@yamada-ui/utils");
+
+// src/skeleton.tsx
+var import_core = require("@yamada-ui/core");
+var import_use_animation = require("@yamada-ui/use-animation");
+var import_use_previous = require("@yamada-ui/use-previous");
+var import_use_value = require("@yamada-ui/use-value");
+var import_utils = require("@yamada-ui/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Skeleton = (0, import_core.forwardRef)((props, ref) => {
+  let [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
+  const {
+    className,
+    startColor,
+    endColor,
+    fadeDuration = 0.4,
+    speed = 0.8,
+    isLoaded,
+    ...rest
+  } = (0, import_core.omitThemeProps)(mergedProps);
+  const isMounted = (0, import_utils.useIsMounted)();
+  const prevIsLoaded = (0, import_use_previous.usePrevious)(isLoaded);
+  const computedStartColor = (0, import_use_value.useValue)(startColor);
+  const computedEndColor = (0, import_use_value.useValue)(endColor);
+  const fadeIn = (0, import_use_animation.useAnimation)({
+    keyframes: {
+      "0%": {
+        opacity: 0
+      },
+      "100%": {
+        opacity: 1
+      }
+    },
+    duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`
+  });
+  const animation = (0, import_use_animation.useAnimation)({
+    keyframes: {
+      "0%": {
+        borderColor: computedStartColor,
+        background: computedStartColor
+      },
+      "100%": {
+        borderColor: computedEndColor,
+        background: computedEndColor
+      }
+    },
+    duration: typeof speed === "string" ? speed : `${speed}s`,
+    iterationCount: "infinite",
+    direction: "alternate",
+    timingFunction: "linear"
+  });
+  const css = {
+    w: "full",
+    h: "4",
+    boxShadow: "none",
+    backgroundClip: "padding-box",
+    cursor: "default",
+    color: "transparent",
+    pointerEvents: "none",
+    userSelect: "none",
+    "&::before, &::after, *": {
+      visibility: "hidden"
+    },
+    ...styles
+  };
+  if (isLoaded) {
+    const animation2 = !isMounted.current || prevIsLoaded ? "none" : fadeIn;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { ref, className: (0, import_utils.cx)("ui-skeleton", className), ...rest, animation: animation2 });
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.ui.div,
+      {
+        ref,
+        className: (0, import_utils.cx)("ui-skeleton", className),
+        __css: css,
+        ...rest,
+        animation
+      }
+    );
+  }
+});
+
+// src/skeleton-text.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SkeletonText = (0, import_core2.forwardRef)(
+  ({
+    className,
+    noOfLines = 3,
+    startColor,
+    endColor,
+    fadeDuration,
+    speed,
+    isLoaded,
+    gap = "2",
+    textHeight = "2",
+    children,
+    ...rest
+  }, ref) => {
+    const computedNoOfLines = (0, import_use_value2.useValue)(noOfLines);
+    const css = {
+      w: "full"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.div, { ref, className: (0, import_utils2.cx)("ui-skeleton-text", className), __css: css, ...rest, children: Array(computedNoOfLines).fill(0).map((_, index) => {
+      if (isLoaded && index > 0)
+        return null;
+      const isLast = index + 1 === computedNoOfLines;
+      const props = !isLoaded ? {
+        mb: !isLast ? gap : void 0,
+        w: computedNoOfLines > 1 ? !isLast ? "100%" : "80%" : "100%",
+        h: textHeight
+      } : {};
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        Skeleton,
+        {
+          ...{ startColor, endColor, fadeDuration, speed, isLoaded, ...props },
+          children: index === 0 ? children : void 0
+        },
+        index
+      );
+    }) });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SkeletonText
+});

package/dist/skeleton-text.mjs

@@ -0,0 +1,7 @@
+import {
+  SkeletonText
+} from "./chunk-I64RKGOG.mjs";
+import "./chunk-LK7WNBJJ.mjs";
+export {
+  SkeletonText
+};

package/dist/skeleton.d.ts

@@ -0,0 +1,14 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps, CSSUIProps } from '@yamada-ui/core';
+
+type SkeletonOptions = {
+    startColor?: CSSUIProps['color'];
+    endColor?: CSSUIProps['color'];
+    isLoaded?: boolean;
+    speed?: string | number;
+    fadeDuration?: string | number;
+};
+type SkeletonProps = HTMLUIProps<'div'> & ThemeProps<'Skeleton'> & SkeletonOptions;
+declare const Skeleton: _yamada_ui_core.Component<"div", SkeletonProps>;
+
+export { Skeleton, SkeletonProps };

package/dist/skeleton.js

@@ -0,0 +1,107 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/skeleton.tsx
+var skeleton_exports = {};
+__export(skeleton_exports, {
+  Skeleton: () => Skeleton
+});
+module.exports = __toCommonJS(skeleton_exports);
+var import_core = require("@yamada-ui/core");
+var import_use_animation = require("@yamada-ui/use-animation");
+var import_use_previous = require("@yamada-ui/use-previous");
+var import_use_value = require("@yamada-ui/use-value");
+var import_utils = require("@yamada-ui/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Skeleton = (0, import_core.forwardRef)((props, ref) => {
+  let [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
+  const {
+    className,
+    startColor,
+    endColor,
+    fadeDuration = 0.4,
+    speed = 0.8,
+    isLoaded,
+    ...rest
+  } = (0, import_core.omitThemeProps)(mergedProps);
+  const isMounted = (0, import_utils.useIsMounted)();
+  const prevIsLoaded = (0, import_use_previous.usePrevious)(isLoaded);
+  const computedStartColor = (0, import_use_value.useValue)(startColor);
+  const computedEndColor = (0, import_use_value.useValue)(endColor);
+  const fadeIn = (0, import_use_animation.useAnimation)({
+    keyframes: {
+      "0%": {
+        opacity: 0
+      },
+      "100%": {
+        opacity: 1
+      }
+    },
+    duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`
+  });
+  const animation = (0, import_use_animation.useAnimation)({
+    keyframes: {
+      "0%": {
+        borderColor: computedStartColor,
+        background: computedStartColor
+      },
+      "100%": {
+        borderColor: computedEndColor,
+        background: computedEndColor
+      }
+    },
+    duration: typeof speed === "string" ? speed : `${speed}s`,
+    iterationCount: "infinite",
+    direction: "alternate",
+    timingFunction: "linear"
+  });
+  const css = {
+    w: "full",
+    h: "4",
+    boxShadow: "none",
+    backgroundClip: "padding-box",
+    cursor: "default",
+    color: "transparent",
+    pointerEvents: "none",
+    userSelect: "none",
+    "&::before, &::after, *": {
+      visibility: "hidden"
+    },
+    ...styles
+  };
+  if (isLoaded) {
+    const animation2 = !isMounted.current || prevIsLoaded ? "none" : fadeIn;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { ref, className: (0, import_utils.cx)("ui-skeleton", className), ...rest, animation: animation2 });
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.ui.div,
+      {
+        ref,
+        className: (0, import_utils.cx)("ui-skeleton", className),
+        __css: css,
+        ...rest,
+        animation
+      }
+    );
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Skeleton
+});

package/dist/skeleton.mjs

@@ -0,0 +1,6 @@
+import {
+  Skeleton
+} from "./chunk-LK7WNBJJ.mjs";
+export {
+  Skeleton
+};

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@yamada-ui/skeleton",
+  "version": "0.0.0-dev-20230603042803",
+  "description": "Yamada UI skeleton component",
+  "keywords": [
+    "yamada",
+    "yamada ui",
+    "react",
+    "emotion",
+    "component",
+    "skeleton",
+    "ui",
+    "uikit",
+    "styled",
+    "style-props",
+    "styled-component",
+    "css-in-js"
+  ],
+  "author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hirotomoyamada/yamada-ui",
+    "directory": "packages/components/skeleton"
+  },
+  "bugs": {
+    "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
+  },
+  "dependencies": {
+    "@yamada-ui/core": "0.0.0-dev-20230603042803",
+    "@yamada-ui/use-animation": "0.0.0-dev-20230603042803",
+    "@yamada-ui/use-value": "0.0.0-dev-20230603042803",
+    "@yamada-ui/use-previous": "0.1.0",
+    "@yamada-ui/utils": "0.1.0"
+  },
+  "devDependencies": {
+    "react": "^18.0.0",
+    "clean-package": "2.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "pnpm build:fast -- --watch",
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "gen:docs": "tsx ../../../scripts/generate-docs"
+  }
+}