@yamada-ui/skeleton 1.1.7-next-20241005220055 → 1.1.7-next-20241008193728

package/dist/{chunk-22DLXLXV.mjs → chunk-BLQTNT3J.mjs}

@@ -1,7 +1,7 @@
 "use client"
 import {
   Skeleton
-} from "./chunk-BWLL2ZTF.mjs";
+} from "./chunk-VY47PFFY.mjs";
 
 // src/skeleton-circle.tsx
 import { forwardRef } from "@yamada-ui/core";
@@ -23,8 +23,8 @@ var SkeletonCircle = forwardRef(
       {
         ref,
         className: cx("ui-skeleton__circle", className),
-        rounded: "fallback(full, 9999px)",
         isFitContent,
+        rounded: "fallback(full, 9999px)",
         ...!isFitContent ? { boxSize } : {},
         ...rest,
         children: validChildren
@@ -38,4 +38,4 @@ SkeletonCircle.__ui__ = "SkeletonCircle";
 export {
   SkeletonCircle
 };
-//# sourceMappingURL=chunk-22DLXLXV.mjs.map
+//# sourceMappingURL=chunk-BLQTNT3J.mjs.map

package/dist/{chunk-22DLXLXV.mjs.map → chunk-BLQTNT3J.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/skeleton-circle.tsx"],"sourcesContent":["import { forwardRef } from \"@yamada-ui/core\"\nimport { cx, getValidChildren } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./skeleton\"\nimport { Skeleton } from \"./skeleton\"\n\nexport interface SkeletonCircleProps extends SkeletonProps {}\n\nexport const SkeletonCircle = forwardRef<SkeletonCircleProps, \"div\">(\n  (\n    {\n      className,\n      boxSize = \"fallback(12, 3rem)\",\n      children,\n      isFitContent,\n      ...rest\n    },\n    ref,\n  ) => {\n    const validChildren = getValidChildren(children)\n    const hasChildren = !!validChildren.length\n\n    isFitContent ??= hasChildren\n\n    return (\n      <Skeleton\n        ref={ref}\n        className={cx(\"ui-skeleton__circle\", className)}\n        rounded=\"fallback(full, 9999px)\"\n        isFitContent={isFitContent}\n        {...(!isFitContent ? { boxSize } : {})}\n        {...rest}\n      >\n        {validChildren}\n      </Skeleton>\n    )\n  },\n)\n\nSkeletonCircle.displayName = \"SkeletonCircle\"\nSkeletonCircle.__ui__ = \"SkeletonCircle\"\n"],"mappings":";;;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,IAAI,wBAAwB;AAuB/B;AAjBC,IAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,UAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,yDAAiB;AAEjB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,uBAAuB,SAAS;AAAA,QAC9C,SAAQ;AAAA,QACR;AAAA,QACC,GAAI,CAAC,eAAe,EAAE,QAAQ,IAAI,CAAC;AAAA,QACnC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;","names":[]}
+{"version":3,"sources":["../src/skeleton-circle.tsx"],"sourcesContent":["import type { SkeletonProps } from \"./skeleton\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { cx, getValidChildren } from \"@yamada-ui/utils\"\nimport { Skeleton } from \"./skeleton\"\n\nexport interface SkeletonCircleProps extends SkeletonProps {}\n\nexport const SkeletonCircle = forwardRef<SkeletonCircleProps, \"div\">(\n  (\n    {\n      className,\n      boxSize = \"fallback(12, 3rem)\",\n      children,\n      isFitContent,\n      ...rest\n    },\n    ref,\n  ) => {\n    const validChildren = getValidChildren(children)\n    const hasChildren = !!validChildren.length\n\n    isFitContent ??= hasChildren\n\n    return (\n      <Skeleton\n        ref={ref}\n        className={cx(\"ui-skeleton__circle\", className)}\n        isFitContent={isFitContent}\n        rounded=\"fallback(full, 9999px)\"\n        {...(!isFitContent ? { boxSize } : {})}\n        {...rest}\n      >\n        {validChildren}\n      </Skeleton>\n    )\n  },\n)\n\nSkeletonCircle.displayName = \"SkeletonCircle\"\nSkeletonCircle.__ui__ = \"SkeletonCircle\"\n"],"mappings":";;;;;;AACA,SAAS,kBAAkB;AAC3B,SAAS,IAAI,wBAAwB;AAsB/B;AAjBC,IAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,UAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,yDAAiB;AAEjB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,uBAAuB,SAAS;AAAA,QAC9C;AAAA,QACA,SAAQ;AAAA,QACP,GAAI,CAAC,eAAe,EAAE,QAAQ,IAAI,CAAC;AAAA,QACnC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;","names":[]}

package/dist/{chunk-2U4SAIJD.mjs → chunk-HVK4KBDF.mjs}

@@ -1,25 +1,25 @@
 "use client"
 import {
   Skeleton
-} from "./chunk-BWLL2ZTF.mjs";
+} from "./chunk-VY47PFFY.mjs";
 
 // src/skeleton-text.tsx
-import { ui, forwardRef } from "@yamada-ui/core";
+import { forwardRef, ui } 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,
-    lineClamp: _lineClamp = 3,
-    startColor,
+    children,
     endColor,
     fadeDuration,
-    speed,
-    isLoaded,
     gap = "fallback(2, 0.5rem)",
+    isLoaded,
+    lineClamp: _lineClamp = 3,
+    speed,
+    startColor,
     textHeight = "fallback(2, 0.5rem)",
-    children,
     ...rest
   }, ref) => {
     const lineClamp = useValue(_lineClamp);
@@ -37,19 +37,19 @@ var SkeletonText = forwardRef(
           if (isLoaded && index > 0) return null;
           const isLast = index + 1 === lineClamp;
           const props = !isLoaded ? {
+            h: textHeight,
             mb: !isLast ? gap : void 0,
-            w: lineClamp > 1 ? !isLast ? "100%" : "80%" : "100%",
-            h: textHeight
+            w: lineClamp > 1 ? !isLast ? "100%" : "80%" : "100%"
           } : {};
           return /* @__PURE__ */ jsx(
             Skeleton,
             {
               ...{
-                startColor,
                 endColor,
                 fadeDuration,
-                speed,
                 isLoaded,
+                speed,
+                startColor,
                 ...props
               },
               children: index === 0 ? children : void 0
@@ -67,4 +67,4 @@ SkeletonText.__ui__ = "SkeletonText";
 export {
   SkeletonText
 };
-//# sourceMappingURL=chunk-2U4SAIJD.mjs.map
+//# sourceMappingURL=chunk-HVK4KBDF.mjs.map

package/dist/chunk-HVK4KBDF.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/skeleton-text.tsx"],"sourcesContent":["import type { CSSUIObject, CSSUIProps } from \"@yamada-ui/core\"\nimport type { SkeletonProps } from \"./skeleton\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { Skeleton } from \"./skeleton\"\n\ninterface SkeletonTextOptions {\n  /**\n   * The CSS `gap` property.\n   */\n  gap?: CSSUIProps[\"gap\"]\n  /**\n   * The CSS `height` property.\n   */\n  textHeight?: CSSUIProps[\"height\"]\n}\n\nexport interface SkeletonTextProps\n  extends Omit<SkeletonProps, \"isFitContent\">,\n    SkeletonTextOptions {}\n\nexport const SkeletonText = forwardRef<SkeletonTextProps, \"div\">(\n  (\n    {\n      className,\n      children,\n      endColor,\n      fadeDuration,\n      gap = \"fallback(2, 0.5rem)\",\n      isLoaded,\n      lineClamp: _lineClamp = 3,\n      speed,\n      startColor,\n      textHeight = \"fallback(2, 0.5rem)\",\n      ...rest\n    },\n    ref,\n  ) => {\n    const lineClamp = useValue(_lineClamp)\n\n    const css: CSSUIObject = {\n      w: \"100%\",\n    }\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton__text\", className)}\n        __css={css}\n        {...rest}\n      >\n        {Array(lineClamp)\n          .fill(0)\n          .map((_, index) => {\n            if (isLoaded && index > 0) return null\n\n            const isLast = index + 1 === lineClamp\n\n            const props: SkeletonProps = !isLoaded\n              ? {\n                  h: textHeight,\n                  mb: !isLast ? gap : undefined,\n                  w: lineClamp > 1 ? (!isLast ? \"100%\" : \"80%\") : \"100%\",\n                }\n              : {}\n\n            return (\n              <Skeleton\n                key={index}\n                {...{\n                  endColor,\n                  fadeDuration,\n                  isLoaded,\n                  speed,\n                  startColor,\n                  ...props,\n                }}\n              >\n                {index === 0 ? children : undefined}\n              </Skeleton>\n            )\n          })}\n      </ui.div>\n    )\n  },\n)\n\nSkeletonText.displayName = \"SkeletonText\"\nSkeletonText.__ui__ = \"SkeletonText\"\n"],"mappings":";;;;;;AAEA,SAAS,YAAY,UAAU;AAC/B,SAAS,gBAAgB;AACzB,SAAS,UAAU;AAgEL;AA9CP,IAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA,WAAW,aAAa;AAAA,IACxB;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,YAAY,SAAS,UAAU;AAErC,UAAM,MAAmB;AAAA,MACvB,GAAG;AAAA,IACL;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,qBAAqB,SAAS;AAAA,QAC5C,OAAO;AAAA,QACN,GAAG;AAAA,QAEH,gBAAM,SAAS,EACb,KAAK,CAAC,EACN,IAAI,CAAC,GAAG,UAAU;AACjB,cAAI,YAAY,QAAQ,EAAG,QAAO;AAElC,gBAAM,SAAS,QAAQ,MAAM;AAE7B,gBAAM,QAAuB,CAAC,WAC1B;AAAA,YACE,GAAG;AAAA,YACH,IAAI,CAAC,SAAS,MAAM;AAAA,YACpB,GAAG,YAAY,IAAK,CAAC,SAAS,SAAS,QAAS;AAAA,UAClD,IACA,CAAC;AAEL,iBACE;AAAA,YAAC;AAAA;AAAA,cAEE,GAAG;AAAA,gBACF;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,GAAG;AAAA,cACL;AAAA,cAEC,oBAAU,IAAI,WAAW;AAAA;AAAA,YAVrB;AAAA,UAWP;AAAA,QAEJ,CAAC;AAAA;AAAA,IACL;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;AAC3B,aAAa,SAAS;","names":[]}

package/dist/{chunk-BWLL2ZTF.mjs → chunk-VY47PFFY.mjs}

@@ -2,9 +2,9 @@
 
 // src/skeleton.tsx
 import {
-  ui,
   forwardRef,
   omitThemeProps,
+  ui,
   useComponentStyle
 } from "@yamada-ui/core";
 import { useAnimation } from "@yamada-ui/use-animation";
@@ -16,13 +16,13 @@ var Skeleton = forwardRef((props, ref) => {
   const [styles, mergedProps] = useComponentStyle("Skeleton", props);
   let {
     className,
-    startColor: _startColor,
+    children,
     endColor: _endColor,
     fadeDuration = 0.4,
-    speed = 0.8,
-    isLoaded,
     isFitContent,
-    children,
+    isLoaded,
+    speed = 0.8,
+    startColor: _startColor,
     ...rest
   } = omitThemeProps(mergedProps);
   const [isMounted] = useIsMounted();
@@ -33,6 +33,7 @@ var Skeleton = forwardRef((props, ref) => {
   const hasChildren = !!validChildren.length;
   isFitContent != null ? isFitContent : isFitContent = hasChildren;
   const fadeIn = useAnimation({
+    duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`,
     keyframes: {
       "0%": {
         opacity: 0
@@ -40,38 +41,37 @@ var Skeleton = forwardRef((props, ref) => {
       "100%": {
         opacity: 1
       }
-    },
-    duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`
+    }
   });
   const animation = useAnimation({
+    direction: "alternate",
+    duration: typeof speed === "string" ? speed : `${speed}s`,
+    iterationCount: "infinite",
     keyframes: {
       "0%": {
-        borderColor: startColor,
-        background: startColor
+        background: startColor,
+        borderColor: startColor
       },
       "100%": {
-        borderColor: endColor,
-        background: endColor
+        background: endColor,
+        borderColor: endColor
       }
     },
-    duration: typeof speed === "string" ? speed : `${speed}s`,
-    iterationCount: "infinite",
-    direction: "alternate",
     timingFunction: "linear"
   });
   const css = {
-    w: isFitContent ? "fit-content" : "100%",
-    maxW: "100%",
-    h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
-    boxShadow: "none",
+    "&::before, &::after, *": {
+      visibility: "hidden"
+    },
     backgroundClip: "padding-box",
-    cursor: "default",
+    boxShadow: "none",
     color: "transparent",
+    cursor: "default",
+    h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
+    maxW: "100%",
     pointerEvents: "none",
     userSelect: "none",
-    "&::before, &::after, *": {
-      visibility: "hidden"
-    },
+    w: isFitContent ? "fit-content" : "100%",
     ...styles
   };
   if (isLoaded) {
@@ -82,8 +82,8 @@ var Skeleton = forwardRef((props, ref) => {
         ref,
         className: cx("ui-skeleton", "ui-skeleton--loaded", className),
         ...rest,
-        animation: animation2,
         "aria-busy": "false",
+        animation: animation2,
         children: validChildren
       }
     );
@@ -95,8 +95,8 @@ var Skeleton = forwardRef((props, ref) => {
         className: cx("ui-skeleton", className),
         __css: css,
         ...rest,
-        animation,
         "aria-busy": "true",
+        animation,
         children: validChildren
       }
     );
@@ -108,4 +108,4 @@ Skeleton.__ui__ = "Skeleton";
 export {
   Skeleton
 };
-//# sourceMappingURL=chunk-BWLL2ZTF.mjs.map
+//# sourceMappingURL=chunk-VY47PFFY.mjs.map

package/dist/chunk-VY47PFFY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/skeleton.tsx"],"sourcesContent":["import type {\n  CSSUIObject,\n  CSSUIProps,\n  HTMLUIProps,\n  ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ninterface SkeletonOptions {\n  /**\n   * The color at the animation end.\n   */\n  endColor?: CSSUIProps[\"color\"]\n  /**\n   * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n   *\n   * @default 0.4\n   */\n  fadeDuration?: number | string\n  /**\n   * If `true`, the skeleton will take the width of it's children.\n   *\n   * @default false\n   */\n  isFitContent?: boolean\n  /**\n   * If `true`, it'll render its children with a nice fade transition.\n   *\n   * @default false\n   */\n  isLoaded?: boolean\n  /**\n   * The animation speed in seconds.\n   *\n   * @default 0.8\n   */\n  speed?: number | string\n  /**\n   * The color at the animation start.\n   */\n  startColor?: CSSUIProps[\"color\"]\n}\n\nexport interface SkeletonProps\n  extends HTMLUIProps,\n    ThemeProps<\"Skeleton\">,\n    SkeletonOptions {}\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n  let {\n    className,\n    children,\n    endColor: _endColor,\n    fadeDuration = 0.4,\n    isFitContent,\n    isLoaded,\n    speed = 0.8,\n    startColor: _startColor,\n    ...rest\n  } = omitThemeProps(mergedProps)\n  const [isMounted] = useIsMounted()\n  const validChildren = getValidChildren(children)\n  const prevIsLoaded = usePrevious(isLoaded)\n  const startColor = useValue(_startColor)\n  const endColor = useValue(_endColor)\n  const hasChildren = !!validChildren.length\n\n  isFitContent ??= hasChildren\n\n  const fadeIn = useAnimation({\n    duration:\n      typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n    keyframes: {\n      \"0%\": {\n        opacity: 0,\n      },\n      \"100%\": {\n        opacity: 1,\n      },\n    },\n  })\n\n  const animation = useAnimation({\n    direction: \"alternate\",\n    duration: typeof speed === \"string\" ? speed : `${speed}s`,\n    iterationCount: \"infinite\",\n    keyframes: {\n      \"0%\": {\n        background: startColor,\n        borderColor: startColor,\n      },\n      \"100%\": {\n        background: endColor,\n        borderColor: endColor,\n      },\n    },\n    timingFunction: \"linear\",\n  })\n\n  const css: CSSUIObject = {\n    \"&::before, &::after, *\": {\n      visibility: \"hidden\",\n    },\n    backgroundClip: \"padding-box\",\n    boxShadow: \"none\",\n    color: \"transparent\",\n    cursor: \"default\",\n    h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n    maxW: \"100%\",\n    pointerEvents: \"none\",\n    userSelect: \"none\",\n    w: isFitContent ? \"fit-content\" : \"100%\",\n    ...styles,\n  }\n\n  if (isLoaded) {\n    const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n        {...rest}\n        aria-busy=\"false\"\n        animation={animation}\n      >\n        {validChildren}\n      </ui.div>\n    )\n  } else {\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton\", className)}\n        __css={css}\n        {...rest}\n        aria-busy=\"true\"\n        animation={animation}\n      >\n        {validChildren}\n      </ui.div>\n    )\n  }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n"],"mappings":";;;AAMA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,IAAI,kBAAkB,oBAAoB;AAuH7C;AAxEC,IAAM,WAAW,WAAiC,CAAC,OAAO,QAAQ;AACvE,QAAM,CAAC,QAAQ,WAAW,IAAI,kBAAkB,YAAY,KAAK;AACjE,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,IAAI,eAAe,WAAW;AAC9B,QAAM,CAAC,SAAS,IAAI,aAAa;AACjC,QAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,QAAM,eAAe,YAAY,QAAQ;AACzC,QAAM,aAAa,SAAS,WAAW;AACvC,QAAM,WAAW,SAAS,SAAS;AACnC,QAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,uDAAiB;AAEjB,QAAM,SAAS,aAAa;AAAA,IAC1B,UACE,OAAO,iBAAiB,WAAW,eAAe,GAAG,YAAY;AAAA,IACnE,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF,CAAC;AAED,QAAM,YAAY,aAAa;AAAA,IAC7B,WAAW;AAAA,IACX,UAAU,OAAO,UAAU,WAAW,QAAQ,GAAG,KAAK;AAAA,IACtD,gBAAgB;AAAA,IAChB,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,aAAa;AAAA,MACf;AAAA,MACA,QAAQ;AAAA,QACN,YAAY;AAAA,QACZ,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,MAAmB;AAAA,IACvB,0BAA0B;AAAA,MACxB,YAAY;AAAA,IACd;AAAA,IACA,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,GAAG,eAAe,gBAAgB;AAAA,IAClC,MAAM;AAAA,IACN,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,GAAG,eAAe,gBAAgB;AAAA,IAClC,GAAG;AAAA,EACL;AAEA,MAAI,UAAU;AACZ,UAAMA,aAAY,CAAC,UAAU,KAAK,eAAe,SAAS;AAE1D,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,uBAAuB,SAAS;AAAA,QAC5D,GAAG;AAAA,QACJ,aAAU;AAAA,QACV,WAAWA;AAAA,QAEV;AAAA;AAAA,IACH;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,SAAS;AAAA,QACtC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,aAAU;AAAA,QACV;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF,CAAC;AAED,SAAS,cAAc;AACvB,SAAS,SAAS;","names":["animation"]}

package/dist/index.js

@@ -38,13 +38,13 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
   const [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
   let {
     className,
-    startColor: _startColor,
+    children,
     endColor: _endColor,
     fadeDuration = 0.4,
-    speed = 0.8,
-    isLoaded,
     isFitContent,
-    children,
+    isLoaded,
+    speed = 0.8,
+    startColor: _startColor,
     ...rest
   } = (0, import_core.omitThemeProps)(mergedProps);
   const [isMounted] = (0, import_utils.useIsMounted)();
@@ -55,6 +55,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
   const hasChildren = !!validChildren.length;
   isFitContent != null ? isFitContent : isFitContent = hasChildren;
   const fadeIn = (0, import_use_animation.useAnimation)({
+    duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`,
     keyframes: {
       "0%": {
         opacity: 0
@@ -62,38 +63,37 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
       "100%": {
         opacity: 1
       }
-    },
-    duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`
+    }
   });
   const animation = (0, import_use_animation.useAnimation)({
+    direction: "alternate",
+    duration: typeof speed === "string" ? speed : `${speed}s`,
+    iterationCount: "infinite",
     keyframes: {
       "0%": {
-        borderColor: startColor,
-        background: startColor
+        background: startColor,
+        borderColor: startColor
       },
       "100%": {
-        borderColor: endColor,
-        background: endColor
+        background: endColor,
+        borderColor: endColor
       }
     },
-    duration: typeof speed === "string" ? speed : `${speed}s`,
-    iterationCount: "infinite",
-    direction: "alternate",
     timingFunction: "linear"
   });
   const css = {
-    w: isFitContent ? "fit-content" : "100%",
-    maxW: "100%",
-    h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
-    boxShadow: "none",
+    "&::before, &::after, *": {
+      visibility: "hidden"
+    },
     backgroundClip: "padding-box",
-    cursor: "default",
+    boxShadow: "none",
     color: "transparent",
+    cursor: "default",
+    h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
+    maxW: "100%",
     pointerEvents: "none",
     userSelect: "none",
-    "&::before, &::after, *": {
-      visibility: "hidden"
-    },
+    w: isFitContent ? "fit-content" : "100%",
     ...styles
   };
   if (isLoaded) {
@@ -104,8 +104,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
         ref,
         className: (0, import_utils.cx)("ui-skeleton", "ui-skeleton--loaded", className),
         ...rest,
-        animation: animation2,
         "aria-busy": "false",
+        animation: animation2,
         children: validChildren
       }
     );
@@ -117,8 +117,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
         className: (0, import_utils.cx)("ui-skeleton", className),
         __css: css,
         ...rest,
-        animation,
         "aria-busy": "true",
+        animation,
         children: validChildren
       }
     );
@@ -147,8 +147,8 @@ var SkeletonCircle = (0, import_core2.forwardRef)(
       {
         ref,
         className: (0, import_utils2.cx)("ui-skeleton__circle", className),
-        rounded: "fallback(full, 9999px)",
         isFitContent,
+        rounded: "fallback(full, 9999px)",
         ...!isFitContent ? { boxSize } : {},
         ...rest,
         children: validChildren
@@ -167,15 +167,15 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var SkeletonText = (0, import_core3.forwardRef)(
   ({
     className,
-    lineClamp: _lineClamp = 3,
-    startColor,
+    children,
     endColor,
     fadeDuration,
-    speed,
-    isLoaded,
     gap = "fallback(2, 0.5rem)",
+    isLoaded,
+    lineClamp: _lineClamp = 3,
+    speed,
+    startColor,
     textHeight = "fallback(2, 0.5rem)",
-    children,
     ...rest
   }, ref) => {
     const lineClamp = (0, import_use_value2.useValue)(_lineClamp);
@@ -193,19 +193,19 @@ var SkeletonText = (0, import_core3.forwardRef)(
           if (isLoaded && index > 0) return null;
           const isLast = index + 1 === lineClamp;
           const props = !isLoaded ? {
+            h: textHeight,
             mb: !isLast ? gap : void 0,
-            w: lineClamp > 1 ? !isLast ? "100%" : "80%" : "100%",
-            h: textHeight
+            w: lineClamp > 1 ? !isLast ? "100%" : "80%" : "100%"
           } : {};
           return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             Skeleton,
             {
               ...{
-                startColor,
                 endColor,
                 fadeDuration,
-                speed,
                 isLoaded,
+                speed,
+                startColor,
                 ...props
               },
               children: index === 0 ? children : void 0

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/skeleton.tsx","../src/skeleton-circle.tsx","../src/skeleton-text.tsx"],"sourcesContent":["export { Skeleton } from \"./skeleton\"\nexport type { SkeletonProps } from \"./skeleton\"\nexport { SkeletonCircle } from \"./skeleton-circle\"\nexport type { SkeletonCircleProps } from \"./skeleton-circle\"\nexport { SkeletonText } from \"./skeleton-text\"\nexport type { SkeletonTextProps } from \"./skeleton-text\"\n","import type {\n  CSSUIObject,\n  HTMLUIProps,\n  ThemeProps,\n  CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  omitThemeProps,\n  useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ninterface SkeletonOptions {\n  /**\n   * The color at the animation start.\n   */\n  startColor?: CSSUIProps[\"color\"]\n  /**\n   * The color at the animation end.\n   */\n  endColor?: CSSUIProps[\"color\"]\n  /**\n   * If `true`, it'll render its children with a nice fade transition.\n   *\n   * @default false\n   */\n  isLoaded?: boolean\n  /**\n   * The animation speed in seconds.\n   *\n   * @default 0.8\n   */\n  speed?: string | number\n  /**\n   * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n   *\n   * @default 0.4\n   */\n  fadeDuration?: string | number\n  /**\n   * If `true`, the skeleton will take the width of it's children.\n   *\n   * @default false\n   */\n  isFitContent?: boolean\n}\n\nexport interface SkeletonProps\n  extends HTMLUIProps,\n    ThemeProps<\"Skeleton\">,\n    SkeletonOptions {}\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n  let {\n    className,\n    startColor: _startColor,\n    endColor: _endColor,\n    fadeDuration = 0.4,\n    speed = 0.8,\n    isLoaded,\n    isFitContent,\n    children,\n    ...rest\n  } = omitThemeProps(mergedProps)\n  const [isMounted] = useIsMounted()\n  const validChildren = getValidChildren(children)\n  const prevIsLoaded = usePrevious(isLoaded)\n  const startColor = useValue(_startColor)\n  const endColor = useValue(_endColor)\n  const hasChildren = !!validChildren.length\n\n  isFitContent ??= hasChildren\n\n  const fadeIn = useAnimation({\n    keyframes: {\n      \"0%\": {\n        opacity: 0,\n      },\n      \"100%\": {\n        opacity: 1,\n      },\n    },\n    duration:\n      typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n  })\n\n  const animation = useAnimation({\n    keyframes: {\n      \"0%\": {\n        borderColor: startColor,\n        background: startColor,\n      },\n      \"100%\": {\n        borderColor: endColor,\n        background: endColor,\n      },\n    },\n    duration: typeof speed === \"string\" ? speed : `${speed}s`,\n    iterationCount: \"infinite\",\n    direction: \"alternate\",\n    timingFunction: \"linear\",\n  })\n\n  const css: CSSUIObject = {\n    w: isFitContent ? \"fit-content\" : \"100%\",\n    maxW: \"100%\",\n    h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n    boxShadow: \"none\",\n    backgroundClip: \"padding-box\",\n    cursor: \"default\",\n    color: \"transparent\",\n    pointerEvents: \"none\",\n    userSelect: \"none\",\n    \"&::before, &::after, *\": {\n      visibility: \"hidden\",\n    },\n    ...styles,\n  }\n\n  if (isLoaded) {\n    const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n        {...rest}\n        animation={animation}\n        aria-busy=\"false\"\n      >\n        {validChildren}\n      </ui.div>\n    )\n  } else {\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton\", className)}\n        __css={css}\n        {...rest}\n        animation={animation}\n        aria-busy=\"true\"\n      >\n        {validChildren}\n      </ui.div>\n    )\n  }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n","import { forwardRef } from \"@yamada-ui/core\"\nimport { cx, getValidChildren } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./skeleton\"\nimport { Skeleton } from \"./skeleton\"\n\nexport interface SkeletonCircleProps extends SkeletonProps {}\n\nexport const SkeletonCircle = forwardRef<SkeletonCircleProps, \"div\">(\n  (\n    {\n      className,\n      boxSize = \"fallback(12, 3rem)\",\n      children,\n      isFitContent,\n      ...rest\n    },\n    ref,\n  ) => {\n    const validChildren = getValidChildren(children)\n    const hasChildren = !!validChildren.length\n\n    isFitContent ??= hasChildren\n\n    return (\n      <Skeleton\n        ref={ref}\n        className={cx(\"ui-skeleton__circle\", className)}\n        rounded=\"fallback(full, 9999px)\"\n        isFitContent={isFitContent}\n        {...(!isFitContent ? { boxSize } : {})}\n        {...rest}\n      >\n        {validChildren}\n      </Skeleton>\n    )\n  },\n)\n\nSkeletonCircle.displayName = \"SkeletonCircle\"\nSkeletonCircle.__ui__ = \"SkeletonCircle\"\n","import type { CSSUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./skeleton\"\nimport { Skeleton } from \"./skeleton\"\n\ninterface SkeletonTextOptions {\n  /**\n   * The CSS `gap` property.\n   */\n  gap?: CSSUIProps[\"gap\"]\n  /**\n   * The CSS `height` property.\n   */\n  textHeight?: CSSUIProps[\"height\"]\n}\n\nexport interface SkeletonTextProps\n  extends Omit<SkeletonProps, \"isFitContent\">,\n    SkeletonTextOptions {}\n\nexport const SkeletonText = forwardRef<SkeletonTextProps, \"div\">(\n  (\n    {\n      className,\n      lineClamp: _lineClamp = 3,\n      startColor,\n      endColor,\n      fadeDuration,\n      speed,\n      isLoaded,\n      gap = \"fallback(2, 0.5rem)\",\n      textHeight = \"fallback(2, 0.5rem)\",\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const lineClamp = useValue(_lineClamp)\n\n    const css: CSSUIObject = {\n      w: \"100%\",\n    }\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton__text\", className)}\n        __css={css}\n        {...rest}\n      >\n        {Array(lineClamp)\n          .fill(0)\n          .map((_, index) => {\n            if (isLoaded && index > 0) return null\n\n            const isLast = index + 1 === lineClamp\n\n            const props: SkeletonProps = !isLoaded\n              ? {\n                  mb: !isLast ? gap : undefined,\n                  w: lineClamp > 1 ? (!isLast ? \"100%\" : \"80%\") : \"100%\",\n                  h: textHeight,\n                }\n              : {}\n\n            return (\n              <Skeleton\n                key={index}\n                {...{\n                  startColor,\n                  endColor,\n                  fadeDuration,\n                  speed,\n                  isLoaded,\n                  ...props,\n                }}\n              >\n                {index === 0 ? children : undefined}\n              </Skeleton>\n            )\n          })}\n      </ui.div>\n    )\n  },\n)\n\nSkeletonText.displayName = \"SkeletonText\"\nSkeletonText.__ui__ = \"SkeletonText\"\n"],"mappings":"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","names":["animation","import_core","import_utils","import_jsx_runtime","import_core","import_use_value","import_utils","import_jsx_runtime"]}
+{"version":3,"sources":["../src/index.ts","../src/skeleton.tsx","../src/skeleton-circle.tsx","../src/skeleton-text.tsx"],"sourcesContent":["export { Skeleton } from \"./skeleton\"\nexport type { SkeletonProps } from \"./skeleton\"\nexport { SkeletonCircle } from \"./skeleton-circle\"\nexport type { SkeletonCircleProps } from \"./skeleton-circle\"\nexport { SkeletonText } from \"./skeleton-text\"\nexport type { SkeletonTextProps } from \"./skeleton-text\"\n","import type {\n  CSSUIObject,\n  CSSUIProps,\n  HTMLUIProps,\n  ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ninterface SkeletonOptions {\n  /**\n   * The color at the animation end.\n   */\n  endColor?: CSSUIProps[\"color\"]\n  /**\n   * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n   *\n   * @default 0.4\n   */\n  fadeDuration?: number | string\n  /**\n   * If `true`, the skeleton will take the width of it's children.\n   *\n   * @default false\n   */\n  isFitContent?: boolean\n  /**\n   * If `true`, it'll render its children with a nice fade transition.\n   *\n   * @default false\n   */\n  isLoaded?: boolean\n  /**\n   * The animation speed in seconds.\n   *\n   * @default 0.8\n   */\n  speed?: number | string\n  /**\n   * The color at the animation start.\n   */\n  startColor?: CSSUIProps[\"color\"]\n}\n\nexport interface SkeletonProps\n  extends HTMLUIProps,\n    ThemeProps<\"Skeleton\">,\n    SkeletonOptions {}\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n  let {\n    className,\n    children,\n    endColor: _endColor,\n    fadeDuration = 0.4,\n    isFitContent,\n    isLoaded,\n    speed = 0.8,\n    startColor: _startColor,\n    ...rest\n  } = omitThemeProps(mergedProps)\n  const [isMounted] = useIsMounted()\n  const validChildren = getValidChildren(children)\n  const prevIsLoaded = usePrevious(isLoaded)\n  const startColor = useValue(_startColor)\n  const endColor = useValue(_endColor)\n  const hasChildren = !!validChildren.length\n\n  isFitContent ??= hasChildren\n\n  const fadeIn = useAnimation({\n    duration:\n      typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n    keyframes: {\n      \"0%\": {\n        opacity: 0,\n      },\n      \"100%\": {\n        opacity: 1,\n      },\n    },\n  })\n\n  const animation = useAnimation({\n    direction: \"alternate\",\n    duration: typeof speed === \"string\" ? speed : `${speed}s`,\n    iterationCount: \"infinite\",\n    keyframes: {\n      \"0%\": {\n        background: startColor,\n        borderColor: startColor,\n      },\n      \"100%\": {\n        background: endColor,\n        borderColor: endColor,\n      },\n    },\n    timingFunction: \"linear\",\n  })\n\n  const css: CSSUIObject = {\n    \"&::before, &::after, *\": {\n      visibility: \"hidden\",\n    },\n    backgroundClip: \"padding-box\",\n    boxShadow: \"none\",\n    color: \"transparent\",\n    cursor: \"default\",\n    h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n    maxW: \"100%\",\n    pointerEvents: \"none\",\n    userSelect: \"none\",\n    w: isFitContent ? \"fit-content\" : \"100%\",\n    ...styles,\n  }\n\n  if (isLoaded) {\n    const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n        {...rest}\n        aria-busy=\"false\"\n        animation={animation}\n      >\n        {validChildren}\n      </ui.div>\n    )\n  } else {\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton\", className)}\n        __css={css}\n        {...rest}\n        aria-busy=\"true\"\n        animation={animation}\n      >\n        {validChildren}\n      </ui.div>\n    )\n  }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n","import type { SkeletonProps } from \"./skeleton\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { cx, getValidChildren } from \"@yamada-ui/utils\"\nimport { Skeleton } from \"./skeleton\"\n\nexport interface SkeletonCircleProps extends SkeletonProps {}\n\nexport const SkeletonCircle = forwardRef<SkeletonCircleProps, \"div\">(\n  (\n    {\n      className,\n      boxSize = \"fallback(12, 3rem)\",\n      children,\n      isFitContent,\n      ...rest\n    },\n    ref,\n  ) => {\n    const validChildren = getValidChildren(children)\n    const hasChildren = !!validChildren.length\n\n    isFitContent ??= hasChildren\n\n    return (\n      <Skeleton\n        ref={ref}\n        className={cx(\"ui-skeleton__circle\", className)}\n        isFitContent={isFitContent}\n        rounded=\"fallback(full, 9999px)\"\n        {...(!isFitContent ? { boxSize } : {})}\n        {...rest}\n      >\n        {validChildren}\n      </Skeleton>\n    )\n  },\n)\n\nSkeletonCircle.displayName = \"SkeletonCircle\"\nSkeletonCircle.__ui__ = \"SkeletonCircle\"\n","import type { CSSUIObject, CSSUIProps } from \"@yamada-ui/core\"\nimport type { SkeletonProps } from \"./skeleton\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { Skeleton } from \"./skeleton\"\n\ninterface SkeletonTextOptions {\n  /**\n   * The CSS `gap` property.\n   */\n  gap?: CSSUIProps[\"gap\"]\n  /**\n   * The CSS `height` property.\n   */\n  textHeight?: CSSUIProps[\"height\"]\n}\n\nexport interface SkeletonTextProps\n  extends Omit<SkeletonProps, \"isFitContent\">,\n    SkeletonTextOptions {}\n\nexport const SkeletonText = forwardRef<SkeletonTextProps, \"div\">(\n  (\n    {\n      className,\n      children,\n      endColor,\n      fadeDuration,\n      gap = \"fallback(2, 0.5rem)\",\n      isLoaded,\n      lineClamp: _lineClamp = 3,\n      speed,\n      startColor,\n      textHeight = \"fallback(2, 0.5rem)\",\n      ...rest\n    },\n    ref,\n  ) => {\n    const lineClamp = useValue(_lineClamp)\n\n    const css: CSSUIObject = {\n      w: \"100%\",\n    }\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton__text\", className)}\n        __css={css}\n        {...rest}\n      >\n        {Array(lineClamp)\n          .fill(0)\n          .map((_, index) => {\n            if (isLoaded && index > 0) return null\n\n            const isLast = index + 1 === lineClamp\n\n            const props: SkeletonProps = !isLoaded\n              ? {\n                  h: textHeight,\n                  mb: !isLast ? gap : undefined,\n                  w: lineClamp > 1 ? (!isLast ? \"100%\" : \"80%\") : \"100%\",\n                }\n              : {}\n\n            return (\n              <Skeleton\n                key={index}\n                {...{\n                  endColor,\n                  fadeDuration,\n                  isLoaded,\n                  speed,\n                  startColor,\n                  ...props,\n                }}\n              >\n                {index === 0 ? children : undefined}\n              </Skeleton>\n            )\n          })}\n      </ui.div>\n    )\n  },\n)\n\nSkeletonText.displayName = \"SkeletonText\"\nSkeletonText.__ui__ = \"SkeletonText\"\n"],"mappings":"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","names":["animation","import_core","import_utils","import_jsx_runtime","import_core","import_use_value","import_utils","import_jsx_runtime"]}

package/dist/index.mjs

@@ -1,13 +1,13 @@
 "use client"
 import {
   SkeletonCircle
-} from "./chunk-22DLXLXV.mjs";
+} from "./chunk-BLQTNT3J.mjs";
 import {
   SkeletonText
-} from "./chunk-2U4SAIJD.mjs";
+} from "./chunk-HVK4KBDF.mjs";
 import {
   Skeleton
-} from "./chunk-BWLL2ZTF.mjs";
+} from "./chunk-VY47PFFY.mjs";
 export {
   Skeleton,
   SkeletonCircle,

package/dist/skeleton-circle.js

@@ -38,13 +38,13 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
   const [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
   let {
     className,
-    startColor: _startColor,
+    children,
     endColor: _endColor,
     fadeDuration = 0.4,
-    speed = 0.8,
-    isLoaded,
     isFitContent,
-    children,
+    isLoaded,
+    speed = 0.8,
+    startColor: _startColor,
     ...rest
   } = (0, import_core.omitThemeProps)(mergedProps);
   const [isMounted] = (0, import_utils.useIsMounted)();
@@ -55,6 +55,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
   const hasChildren = !!validChildren.length;
   isFitContent != null ? isFitContent : isFitContent = hasChildren;
   const fadeIn = (0, import_use_animation.useAnimation)({
+    duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`,
     keyframes: {
       "0%": {
         opacity: 0
@@ -62,38 +63,37 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
       "100%": {
         opacity: 1
       }
-    },
-    duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`
+    }
   });
   const animation = (0, import_use_animation.useAnimation)({
+    direction: "alternate",
+    duration: typeof speed === "string" ? speed : `${speed}s`,
+    iterationCount: "infinite",
     keyframes: {
       "0%": {
-        borderColor: startColor,
-        background: startColor
+        background: startColor,
+        borderColor: startColor
       },
       "100%": {
-        borderColor: endColor,
-        background: endColor
+        background: endColor,
+        borderColor: endColor
       }
     },
-    duration: typeof speed === "string" ? speed : `${speed}s`,
-    iterationCount: "infinite",
-    direction: "alternate",
     timingFunction: "linear"
   });
   const css = {
-    w: isFitContent ? "fit-content" : "100%",
-    maxW: "100%",
-    h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
-    boxShadow: "none",
+    "&::before, &::after, *": {
+      visibility: "hidden"
+    },
     backgroundClip: "padding-box",
-    cursor: "default",
+    boxShadow: "none",
     color: "transparent",
+    cursor: "default",
+    h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
+    maxW: "100%",
     pointerEvents: "none",
     userSelect: "none",
-    "&::before, &::after, *": {
-      visibility: "hidden"
-    },
+    w: isFitContent ? "fit-content" : "100%",
     ...styles
   };
   if (isLoaded) {
@@ -104,8 +104,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
         ref,
         className: (0, import_utils.cx)("ui-skeleton", "ui-skeleton--loaded", className),
         ...rest,
-        animation: animation2,
         "aria-busy": "false",
+        animation: animation2,
         children: validChildren
       }
     );
@@ -117,8 +117,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
         className: (0, import_utils.cx)("ui-skeleton", className),
         __css: css,
         ...rest,
-        animation,
         "aria-busy": "true",
+        animation,
         children: validChildren
       }
     );
@@ -145,8 +145,8 @@ var SkeletonCircle = (0, import_core2.forwardRef)(
       {
         ref,
         className: (0, import_utils2.cx)("ui-skeleton__circle", className),
-        rounded: "fallback(full, 9999px)",
         isFitContent,
+        rounded: "fallback(full, 9999px)",
         ...!isFitContent ? { boxSize } : {},
         ...rest,
         children: validChildren

package/dist/skeleton-circle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/skeleton-circle.tsx","../src/skeleton.tsx"],"sourcesContent":["import { forwardRef } from \"@yamada-ui/core\"\nimport { cx, getValidChildren } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./skeleton\"\nimport { Skeleton } from \"./skeleton\"\n\nexport interface SkeletonCircleProps extends SkeletonProps {}\n\nexport const SkeletonCircle = forwardRef<SkeletonCircleProps, \"div\">(\n  (\n    {\n      className,\n      boxSize = \"fallback(12, 3rem)\",\n      children,\n      isFitContent,\n      ...rest\n    },\n    ref,\n  ) => {\n    const validChildren = getValidChildren(children)\n    const hasChildren = !!validChildren.length\n\n    isFitContent ??= hasChildren\n\n    return (\n      <Skeleton\n        ref={ref}\n        className={cx(\"ui-skeleton__circle\", className)}\n        rounded=\"fallback(full, 9999px)\"\n        isFitContent={isFitContent}\n        {...(!isFitContent ? { boxSize } : {})}\n        {...rest}\n      >\n        {validChildren}\n      </Skeleton>\n    )\n  },\n)\n\nSkeletonCircle.displayName = \"SkeletonCircle\"\nSkeletonCircle.__ui__ = \"SkeletonCircle\"\n","import type {\n  CSSUIObject,\n  HTMLUIProps,\n  ThemeProps,\n  CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  omitThemeProps,\n  useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ninterface SkeletonOptions {\n  /**\n   * The color at the animation start.\n   */\n  startColor?: CSSUIProps[\"color\"]\n  /**\n   * The color at the animation end.\n   */\n  endColor?: CSSUIProps[\"color\"]\n  /**\n   * If `true`, it'll render its children with a nice fade transition.\n   *\n   * @default false\n   */\n  isLoaded?: boolean\n  /**\n   * The animation speed in seconds.\n   *\n   * @default 0.8\n   */\n  speed?: string | number\n  /**\n   * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n   *\n   * @default 0.4\n   */\n  fadeDuration?: string | number\n  /**\n   * If `true`, the skeleton will take the width of it's children.\n   *\n   * @default false\n   */\n  isFitContent?: boolean\n}\n\nexport interface SkeletonProps\n  extends HTMLUIProps,\n    ThemeProps<\"Skeleton\">,\n    SkeletonOptions {}\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n  let {\n    className,\n    startColor: _startColor,\n    endColor: _endColor,\n    fadeDuration = 0.4,\n    speed = 0.8,\n    isLoaded,\n    isFitContent,\n    children,\n    ...rest\n  } = omitThemeProps(mergedProps)\n  const [isMounted] = useIsMounted()\n  const validChildren = getValidChildren(children)\n  const prevIsLoaded = usePrevious(isLoaded)\n  const startColor = useValue(_startColor)\n  const endColor = useValue(_endColor)\n  const hasChildren = !!validChildren.length\n\n  isFitContent ??= hasChildren\n\n  const fadeIn = useAnimation({\n    keyframes: {\n      \"0%\": {\n        opacity: 0,\n      },\n      \"100%\": {\n        opacity: 1,\n      },\n    },\n    duration:\n      typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n  })\n\n  const animation = useAnimation({\n    keyframes: {\n      \"0%\": {\n        borderColor: startColor,\n        background: startColor,\n      },\n      \"100%\": {\n        borderColor: endColor,\n        background: endColor,\n      },\n    },\n    duration: typeof speed === \"string\" ? speed : `${speed}s`,\n    iterationCount: \"infinite\",\n    direction: \"alternate\",\n    timingFunction: \"linear\",\n  })\n\n  const css: CSSUIObject = {\n    w: isFitContent ? \"fit-content\" : \"100%\",\n    maxW: \"100%\",\n    h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n    boxShadow: \"none\",\n    backgroundClip: \"padding-box\",\n    cursor: \"default\",\n    color: \"transparent\",\n    pointerEvents: \"none\",\n    userSelect: \"none\",\n    \"&::before, &::after, *\": {\n      visibility: \"hidden\",\n    },\n    ...styles,\n  }\n\n  if (isLoaded) {\n    const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n        {...rest}\n        animation={animation}\n        aria-busy=\"false\"\n      >\n        {validChildren}\n      </ui.div>\n    )\n  } else {\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton\", className)}\n        __css={css}\n        {...rest}\n        animation={animation}\n        aria-busy=\"true\"\n      >\n        {validChildren}\n      </ui.div>\n    )\n  }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n"],"mappings":"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","names":["import_core","import_utils","animation","import_jsx_runtime"]}
+{"version":3,"sources":["../src/skeleton-circle.tsx","../src/skeleton.tsx"],"sourcesContent":["import type { SkeletonProps } from \"./skeleton\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { cx, getValidChildren } from \"@yamada-ui/utils\"\nimport { Skeleton } from \"./skeleton\"\n\nexport interface SkeletonCircleProps extends SkeletonProps {}\n\nexport const SkeletonCircle = forwardRef<SkeletonCircleProps, \"div\">(\n  (\n    {\n      className,\n      boxSize = \"fallback(12, 3rem)\",\n      children,\n      isFitContent,\n      ...rest\n    },\n    ref,\n  ) => {\n    const validChildren = getValidChildren(children)\n    const hasChildren = !!validChildren.length\n\n    isFitContent ??= hasChildren\n\n    return (\n      <Skeleton\n        ref={ref}\n        className={cx(\"ui-skeleton__circle\", className)}\n        isFitContent={isFitContent}\n        rounded=\"fallback(full, 9999px)\"\n        {...(!isFitContent ? { boxSize } : {})}\n        {...rest}\n      >\n        {validChildren}\n      </Skeleton>\n    )\n  },\n)\n\nSkeletonCircle.displayName = \"SkeletonCircle\"\nSkeletonCircle.__ui__ = \"SkeletonCircle\"\n","import type {\n  CSSUIObject,\n  CSSUIProps,\n  HTMLUIProps,\n  ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ninterface SkeletonOptions {\n  /**\n   * The color at the animation end.\n   */\n  endColor?: CSSUIProps[\"color\"]\n  /**\n   * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n   *\n   * @default 0.4\n   */\n  fadeDuration?: number | string\n  /**\n   * If `true`, the skeleton will take the width of it's children.\n   *\n   * @default false\n   */\n  isFitContent?: boolean\n  /**\n   * If `true`, it'll render its children with a nice fade transition.\n   *\n   * @default false\n   */\n  isLoaded?: boolean\n  /**\n   * The animation speed in seconds.\n   *\n   * @default 0.8\n   */\n  speed?: number | string\n  /**\n   * The color at the animation start.\n   */\n  startColor?: CSSUIProps[\"color\"]\n}\n\nexport interface SkeletonProps\n  extends HTMLUIProps,\n    ThemeProps<\"Skeleton\">,\n    SkeletonOptions {}\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n  let {\n    className,\n    children,\n    endColor: _endColor,\n    fadeDuration = 0.4,\n    isFitContent,\n    isLoaded,\n    speed = 0.8,\n    startColor: _startColor,\n    ...rest\n  } = omitThemeProps(mergedProps)\n  const [isMounted] = useIsMounted()\n  const validChildren = getValidChildren(children)\n  const prevIsLoaded = usePrevious(isLoaded)\n  const startColor = useValue(_startColor)\n  const endColor = useValue(_endColor)\n  const hasChildren = !!validChildren.length\n\n  isFitContent ??= hasChildren\n\n  const fadeIn = useAnimation({\n    duration:\n      typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n    keyframes: {\n      \"0%\": {\n        opacity: 0,\n      },\n      \"100%\": {\n        opacity: 1,\n      },\n    },\n  })\n\n  const animation = useAnimation({\n    direction: \"alternate\",\n    duration: typeof speed === \"string\" ? speed : `${speed}s`,\n    iterationCount: \"infinite\",\n    keyframes: {\n      \"0%\": {\n        background: startColor,\n        borderColor: startColor,\n      },\n      \"100%\": {\n        background: endColor,\n        borderColor: endColor,\n      },\n    },\n    timingFunction: \"linear\",\n  })\n\n  const css: CSSUIObject = {\n    \"&::before, &::after, *\": {\n      visibility: \"hidden\",\n    },\n    backgroundClip: \"padding-box\",\n    boxShadow: \"none\",\n    color: \"transparent\",\n    cursor: \"default\",\n    h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n    maxW: \"100%\",\n    pointerEvents: \"none\",\n    userSelect: \"none\",\n    w: isFitContent ? \"fit-content\" : \"100%\",\n    ...styles,\n  }\n\n  if (isLoaded) {\n    const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n        {...rest}\n        aria-busy=\"false\"\n        animation={animation}\n      >\n        {validChildren}\n      </ui.div>\n    )\n  } else {\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton\", className)}\n        __css={css}\n        {...rest}\n        aria-busy=\"true\"\n        animation={animation}\n      >\n        {validChildren}\n      </ui.div>\n    )\n  }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n"],"mappings":"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","names":["import_core","import_utils","animation","import_jsx_runtime"]}

package/dist/skeleton-circle.mjs

@@ -1,8 +1,8 @@
 "use client"
 import {
   SkeletonCircle
-} from "./chunk-22DLXLXV.mjs";
-import "./chunk-BWLL2ZTF.mjs";
+} from "./chunk-BLQTNT3J.mjs";
+import "./chunk-VY47PFFY.mjs";
 export {
   SkeletonCircle
 };

package/dist/skeleton-text.js

@@ -39,13 +39,13 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
   const [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
   let {
     className,
-    startColor: _startColor,
+    children,
     endColor: _endColor,
     fadeDuration = 0.4,
-    speed = 0.8,
-    isLoaded,
     isFitContent,
-    children,
+    isLoaded,
+    speed = 0.8,
+    startColor: _startColor,
     ...rest
   } = (0, import_core.omitThemeProps)(mergedProps);
   const [isMounted] = (0, import_utils.useIsMounted)();
@@ -56,6 +56,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
   const hasChildren = !!validChildren.length;
   isFitContent != null ? isFitContent : isFitContent = hasChildren;
   const fadeIn = (0, import_use_animation.useAnimation)({
+    duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`,
     keyframes: {
       "0%": {
         opacity: 0
@@ -63,38 +64,37 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
       "100%": {
         opacity: 1
       }
-    },
-    duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`
+    }
   });
   const animation = (0, import_use_animation.useAnimation)({
+    direction: "alternate",
+    duration: typeof speed === "string" ? speed : `${speed}s`,
+    iterationCount: "infinite",
     keyframes: {
       "0%": {
-        borderColor: startColor,
-        background: startColor
+        background: startColor,
+        borderColor: startColor
       },
       "100%": {
-        borderColor: endColor,
-        background: endColor
+        background: endColor,
+        borderColor: endColor
       }
     },
-    duration: typeof speed === "string" ? speed : `${speed}s`,
-    iterationCount: "infinite",
-    direction: "alternate",
     timingFunction: "linear"
   });
   const css = {
-    w: isFitContent ? "fit-content" : "100%",
-    maxW: "100%",
-    h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
-    boxShadow: "none",
+    "&::before, &::after, *": {
+      visibility: "hidden"
+    },
     backgroundClip: "padding-box",
-    cursor: "default",
+    boxShadow: "none",
     color: "transparent",
+    cursor: "default",
+    h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
+    maxW: "100%",
     pointerEvents: "none",
     userSelect: "none",
-    "&::before, &::after, *": {
-      visibility: "hidden"
-    },
+    w: isFitContent ? "fit-content" : "100%",
     ...styles
   };
   if (isLoaded) {
@@ -105,8 +105,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
         ref,
         className: (0, import_utils.cx)("ui-skeleton", "ui-skeleton--loaded", className),
         ...rest,
-        animation: animation2,
         "aria-busy": "false",
+        animation: animation2,
         children: validChildren
       }
     );
@@ -118,8 +118,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
         className: (0, import_utils.cx)("ui-skeleton", className),
         __css: css,
         ...rest,
-        animation,
         "aria-busy": "true",
+        animation,
         children: validChildren
       }
     );
@@ -133,15 +133,15 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var SkeletonText = (0, import_core2.forwardRef)(
   ({
     className,
-    lineClamp: _lineClamp = 3,
-    startColor,
+    children,
     endColor,
     fadeDuration,
-    speed,
-    isLoaded,
     gap = "fallback(2, 0.5rem)",
+    isLoaded,
+    lineClamp: _lineClamp = 3,
+    speed,
+    startColor,
     textHeight = "fallback(2, 0.5rem)",
-    children,
     ...rest
   }, ref) => {
     const lineClamp = (0, import_use_value2.useValue)(_lineClamp);
@@ -159,19 +159,19 @@ var SkeletonText = (0, import_core2.forwardRef)(
           if (isLoaded && index > 0) return null;
           const isLast = index + 1 === lineClamp;
           const props = !isLoaded ? {
+            h: textHeight,
             mb: !isLast ? gap : void 0,
-            w: lineClamp > 1 ? !isLast ? "100%" : "80%" : "100%",
-            h: textHeight
+            w: lineClamp > 1 ? !isLast ? "100%" : "80%" : "100%"
           } : {};
           return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             Skeleton,
             {
               ...{
-                startColor,
                 endColor,
                 fadeDuration,
-                speed,
                 isLoaded,
+                speed,
+                startColor,
                 ...props
               },
               children: index === 0 ? children : void 0

package/dist/skeleton-text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/skeleton-text.tsx","../src/skeleton.tsx"],"sourcesContent":["import type { CSSUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./skeleton\"\nimport { Skeleton } from \"./skeleton\"\n\ninterface SkeletonTextOptions {\n  /**\n   * The CSS `gap` property.\n   */\n  gap?: CSSUIProps[\"gap\"]\n  /**\n   * The CSS `height` property.\n   */\n  textHeight?: CSSUIProps[\"height\"]\n}\n\nexport interface SkeletonTextProps\n  extends Omit<SkeletonProps, \"isFitContent\">,\n    SkeletonTextOptions {}\n\nexport const SkeletonText = forwardRef<SkeletonTextProps, \"div\">(\n  (\n    {\n      className,\n      lineClamp: _lineClamp = 3,\n      startColor,\n      endColor,\n      fadeDuration,\n      speed,\n      isLoaded,\n      gap = \"fallback(2, 0.5rem)\",\n      textHeight = \"fallback(2, 0.5rem)\",\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const lineClamp = useValue(_lineClamp)\n\n    const css: CSSUIObject = {\n      w: \"100%\",\n    }\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton__text\", className)}\n        __css={css}\n        {...rest}\n      >\n        {Array(lineClamp)\n          .fill(0)\n          .map((_, index) => {\n            if (isLoaded && index > 0) return null\n\n            const isLast = index + 1 === lineClamp\n\n            const props: SkeletonProps = !isLoaded\n              ? {\n                  mb: !isLast ? gap : undefined,\n                  w: lineClamp > 1 ? (!isLast ? \"100%\" : \"80%\") : \"100%\",\n                  h: textHeight,\n                }\n              : {}\n\n            return (\n              <Skeleton\n                key={index}\n                {...{\n                  startColor,\n                  endColor,\n                  fadeDuration,\n                  speed,\n                  isLoaded,\n                  ...props,\n                }}\n              >\n                {index === 0 ? children : undefined}\n              </Skeleton>\n            )\n          })}\n      </ui.div>\n    )\n  },\n)\n\nSkeletonText.displayName = \"SkeletonText\"\nSkeletonText.__ui__ = \"SkeletonText\"\n","import type {\n  CSSUIObject,\n  HTMLUIProps,\n  ThemeProps,\n  CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  omitThemeProps,\n  useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ninterface SkeletonOptions {\n  /**\n   * The color at the animation start.\n   */\n  startColor?: CSSUIProps[\"color\"]\n  /**\n   * The color at the animation end.\n   */\n  endColor?: CSSUIProps[\"color\"]\n  /**\n   * If `true`, it'll render its children with a nice fade transition.\n   *\n   * @default false\n   */\n  isLoaded?: boolean\n  /**\n   * The animation speed in seconds.\n   *\n   * @default 0.8\n   */\n  speed?: string | number\n  /**\n   * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n   *\n   * @default 0.4\n   */\n  fadeDuration?: string | number\n  /**\n   * If `true`, the skeleton will take the width of it's children.\n   *\n   * @default false\n   */\n  isFitContent?: boolean\n}\n\nexport interface SkeletonProps\n  extends HTMLUIProps,\n    ThemeProps<\"Skeleton\">,\n    SkeletonOptions {}\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n  let {\n    className,\n    startColor: _startColor,\n    endColor: _endColor,\n    fadeDuration = 0.4,\n    speed = 0.8,\n    isLoaded,\n    isFitContent,\n    children,\n    ...rest\n  } = omitThemeProps(mergedProps)\n  const [isMounted] = useIsMounted()\n  const validChildren = getValidChildren(children)\n  const prevIsLoaded = usePrevious(isLoaded)\n  const startColor = useValue(_startColor)\n  const endColor = useValue(_endColor)\n  const hasChildren = !!validChildren.length\n\n  isFitContent ??= hasChildren\n\n  const fadeIn = useAnimation({\n    keyframes: {\n      \"0%\": {\n        opacity: 0,\n      },\n      \"100%\": {\n        opacity: 1,\n      },\n    },\n    duration:\n      typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n  })\n\n  const animation = useAnimation({\n    keyframes: {\n      \"0%\": {\n        borderColor: startColor,\n        background: startColor,\n      },\n      \"100%\": {\n        borderColor: endColor,\n        background: endColor,\n      },\n    },\n    duration: typeof speed === \"string\" ? speed : `${speed}s`,\n    iterationCount: \"infinite\",\n    direction: \"alternate\",\n    timingFunction: \"linear\",\n  })\n\n  const css: CSSUIObject = {\n    w: isFitContent ? \"fit-content\" : \"100%\",\n    maxW: \"100%\",\n    h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n    boxShadow: \"none\",\n    backgroundClip: \"padding-box\",\n    cursor: \"default\",\n    color: \"transparent\",\n    pointerEvents: \"none\",\n    userSelect: \"none\",\n    \"&::before, &::after, *\": {\n      visibility: \"hidden\",\n    },\n    ...styles,\n  }\n\n  if (isLoaded) {\n    const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n        {...rest}\n        animation={animation}\n        aria-busy=\"false\"\n      >\n        {validChildren}\n      </ui.div>\n    )\n  } else {\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton\", className)}\n        __css={css}\n        {...rest}\n        animation={animation}\n        aria-busy=\"true\"\n      >\n        {validChildren}\n      </ui.div>\n    )\n  }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n"],"mappings":"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","names":["import_core","import_use_value","import_utils","animation","import_jsx_runtime"]}
+{"version":3,"sources":["../src/skeleton-text.tsx","../src/skeleton.tsx"],"sourcesContent":["import type { CSSUIObject, CSSUIProps } from \"@yamada-ui/core\"\nimport type { SkeletonProps } from \"./skeleton\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { Skeleton } from \"./skeleton\"\n\ninterface SkeletonTextOptions {\n  /**\n   * The CSS `gap` property.\n   */\n  gap?: CSSUIProps[\"gap\"]\n  /**\n   * The CSS `height` property.\n   */\n  textHeight?: CSSUIProps[\"height\"]\n}\n\nexport interface SkeletonTextProps\n  extends Omit<SkeletonProps, \"isFitContent\">,\n    SkeletonTextOptions {}\n\nexport const SkeletonText = forwardRef<SkeletonTextProps, \"div\">(\n  (\n    {\n      className,\n      children,\n      endColor,\n      fadeDuration,\n      gap = \"fallback(2, 0.5rem)\",\n      isLoaded,\n      lineClamp: _lineClamp = 3,\n      speed,\n      startColor,\n      textHeight = \"fallback(2, 0.5rem)\",\n      ...rest\n    },\n    ref,\n  ) => {\n    const lineClamp = useValue(_lineClamp)\n\n    const css: CSSUIObject = {\n      w: \"100%\",\n    }\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton__text\", className)}\n        __css={css}\n        {...rest}\n      >\n        {Array(lineClamp)\n          .fill(0)\n          .map((_, index) => {\n            if (isLoaded && index > 0) return null\n\n            const isLast = index + 1 === lineClamp\n\n            const props: SkeletonProps = !isLoaded\n              ? {\n                  h: textHeight,\n                  mb: !isLast ? gap : undefined,\n                  w: lineClamp > 1 ? (!isLast ? \"100%\" : \"80%\") : \"100%\",\n                }\n              : {}\n\n            return (\n              <Skeleton\n                key={index}\n                {...{\n                  endColor,\n                  fadeDuration,\n                  isLoaded,\n                  speed,\n                  startColor,\n                  ...props,\n                }}\n              >\n                {index === 0 ? children : undefined}\n              </Skeleton>\n            )\n          })}\n      </ui.div>\n    )\n  },\n)\n\nSkeletonText.displayName = \"SkeletonText\"\nSkeletonText.__ui__ = \"SkeletonText\"\n","import type {\n  CSSUIObject,\n  CSSUIProps,\n  HTMLUIProps,\n  ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ninterface SkeletonOptions {\n  /**\n   * The color at the animation end.\n   */\n  endColor?: CSSUIProps[\"color\"]\n  /**\n   * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n   *\n   * @default 0.4\n   */\n  fadeDuration?: number | string\n  /**\n   * If `true`, the skeleton will take the width of it's children.\n   *\n   * @default false\n   */\n  isFitContent?: boolean\n  /**\n   * If `true`, it'll render its children with a nice fade transition.\n   *\n   * @default false\n   */\n  isLoaded?: boolean\n  /**\n   * The animation speed in seconds.\n   *\n   * @default 0.8\n   */\n  speed?: number | string\n  /**\n   * The color at the animation start.\n   */\n  startColor?: CSSUIProps[\"color\"]\n}\n\nexport interface SkeletonProps\n  extends HTMLUIProps,\n    ThemeProps<\"Skeleton\">,\n    SkeletonOptions {}\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n  let {\n    className,\n    children,\n    endColor: _endColor,\n    fadeDuration = 0.4,\n    isFitContent,\n    isLoaded,\n    speed = 0.8,\n    startColor: _startColor,\n    ...rest\n  } = omitThemeProps(mergedProps)\n  const [isMounted] = useIsMounted()\n  const validChildren = getValidChildren(children)\n  const prevIsLoaded = usePrevious(isLoaded)\n  const startColor = useValue(_startColor)\n  const endColor = useValue(_endColor)\n  const hasChildren = !!validChildren.length\n\n  isFitContent ??= hasChildren\n\n  const fadeIn = useAnimation({\n    duration:\n      typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n    keyframes: {\n      \"0%\": {\n        opacity: 0,\n      },\n      \"100%\": {\n        opacity: 1,\n      },\n    },\n  })\n\n  const animation = useAnimation({\n    direction: \"alternate\",\n    duration: typeof speed === \"string\" ? speed : `${speed}s`,\n    iterationCount: \"infinite\",\n    keyframes: {\n      \"0%\": {\n        background: startColor,\n        borderColor: startColor,\n      },\n      \"100%\": {\n        background: endColor,\n        borderColor: endColor,\n      },\n    },\n    timingFunction: \"linear\",\n  })\n\n  const css: CSSUIObject = {\n    \"&::before, &::after, *\": {\n      visibility: \"hidden\",\n    },\n    backgroundClip: \"padding-box\",\n    boxShadow: \"none\",\n    color: \"transparent\",\n    cursor: \"default\",\n    h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n    maxW: \"100%\",\n    pointerEvents: \"none\",\n    userSelect: \"none\",\n    w: isFitContent ? \"fit-content\" : \"100%\",\n    ...styles,\n  }\n\n  if (isLoaded) {\n    const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n        {...rest}\n        aria-busy=\"false\"\n        animation={animation}\n      >\n        {validChildren}\n      </ui.div>\n    )\n  } else {\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton\", className)}\n        __css={css}\n        {...rest}\n        aria-busy=\"true\"\n        animation={animation}\n      >\n        {validChildren}\n      </ui.div>\n    )\n  }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n"],"mappings":"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","names":["import_core","import_use_value","import_utils","animation","import_jsx_runtime"]}

package/dist/skeleton-text.mjs

@@ -1,8 +1,8 @@
 "use client"
 import {
   SkeletonText
-} from "./chunk-2U4SAIJD.mjs";
-import "./chunk-BWLL2ZTF.mjs";
+} from "./chunk-HVK4KBDF.mjs";
+import "./chunk-VY47PFFY.mjs";
 export {
   SkeletonText
 };

package/dist/skeleton.d.mts

@@ -2,14 +2,22 @@ import * as _yamada_ui_core from '@yamada-ui/core';
 import { HTMLUIProps, ThemeProps, CSSUIProps } from '@yamada-ui/core';
 
 interface SkeletonOptions {
-    /**
-     * The color at the animation start.
-     */
-    startColor?: CSSUIProps["color"];
     /**
      * The color at the animation end.
      */
     endColor?: CSSUIProps["color"];
+    /**
+     * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.
+     *
+     * @default 0.4
+     */
+    fadeDuration?: number | string;
+    /**
+     * If `true`, the skeleton will take the width of it's children.
+     *
+     * @default false
+     */
+    isFitContent?: boolean;
     /**
      * If `true`, it'll render its children with a nice fade transition.
      *
@@ -21,19 +29,11 @@ interface SkeletonOptions {
      *
      * @default 0.8
      */
-    speed?: string | number;
-    /**
-     * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.
-     *
-     * @default 0.4
-     */
-    fadeDuration?: string | number;
+    speed?: number | string;
     /**
-     * If `true`, the skeleton will take the width of it's children.
-     *
-     * @default false
+     * The color at the animation start.
      */
-    isFitContent?: boolean;
+    startColor?: CSSUIProps["color"];
 }
 interface SkeletonProps extends HTMLUIProps, ThemeProps<"Skeleton">, SkeletonOptions {
 }

package/dist/skeleton.d.ts

@@ -2,14 +2,22 @@ import * as _yamada_ui_core from '@yamada-ui/core';
 import { HTMLUIProps, ThemeProps, CSSUIProps } from '@yamada-ui/core';
 
 interface SkeletonOptions {
-    /**
-     * The color at the animation start.
-     */
-    startColor?: CSSUIProps["color"];
     /**
      * The color at the animation end.
      */
     endColor?: CSSUIProps["color"];
+    /**
+     * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.
+     *
+     * @default 0.4
+     */
+    fadeDuration?: number | string;
+    /**
+     * If `true`, the skeleton will take the width of it's children.
+     *
+     * @default false
+     */
+    isFitContent?: boolean;
     /**
      * If `true`, it'll render its children with a nice fade transition.
      *
@@ -21,19 +29,11 @@ interface SkeletonOptions {
      *
      * @default 0.8
      */
-    speed?: string | number;
-    /**
-     * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.
-     *
-     * @default 0.4
-     */
-    fadeDuration?: string | number;
+    speed?: number | string;
     /**
-     * If `true`, the skeleton will take the width of it's children.
-     *
-     * @default false
+     * The color at the animation start.
      */
-    isFitContent?: boolean;
+    startColor?: CSSUIProps["color"];
 }
 interface SkeletonProps extends HTMLUIProps, ThemeProps<"Skeleton">, SkeletonOptions {
 }

package/dist/skeleton.js

@@ -34,13 +34,13 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
   const [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
   let {
     className,
-    startColor: _startColor,
+    children,
     endColor: _endColor,
     fadeDuration = 0.4,
-    speed = 0.8,
-    isLoaded,
     isFitContent,
-    children,
+    isLoaded,
+    speed = 0.8,
+    startColor: _startColor,
     ...rest
   } = (0, import_core.omitThemeProps)(mergedProps);
   const [isMounted] = (0, import_utils.useIsMounted)();
@@ -51,6 +51,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
   const hasChildren = !!validChildren.length;
   isFitContent != null ? isFitContent : isFitContent = hasChildren;
   const fadeIn = (0, import_use_animation.useAnimation)({
+    duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`,
     keyframes: {
       "0%": {
         opacity: 0
@@ -58,38 +59,37 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
       "100%": {
         opacity: 1
       }
-    },
-    duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`
+    }
   });
   const animation = (0, import_use_animation.useAnimation)({
+    direction: "alternate",
+    duration: typeof speed === "string" ? speed : `${speed}s`,
+    iterationCount: "infinite",
     keyframes: {
       "0%": {
-        borderColor: startColor,
-        background: startColor
+        background: startColor,
+        borderColor: startColor
       },
       "100%": {
-        borderColor: endColor,
-        background: endColor
+        background: endColor,
+        borderColor: endColor
       }
     },
-    duration: typeof speed === "string" ? speed : `${speed}s`,
-    iterationCount: "infinite",
-    direction: "alternate",
     timingFunction: "linear"
   });
   const css = {
-    w: isFitContent ? "fit-content" : "100%",
-    maxW: "100%",
-    h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
-    boxShadow: "none",
+    "&::before, &::after, *": {
+      visibility: "hidden"
+    },
     backgroundClip: "padding-box",
-    cursor: "default",
+    boxShadow: "none",
     color: "transparent",
+    cursor: "default",
+    h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
+    maxW: "100%",
     pointerEvents: "none",
     userSelect: "none",
-    "&::before, &::after, *": {
-      visibility: "hidden"
-    },
+    w: isFitContent ? "fit-content" : "100%",
     ...styles
   };
   if (isLoaded) {
@@ -100,8 +100,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
         ref,
         className: (0, import_utils.cx)("ui-skeleton", "ui-skeleton--loaded", className),
         ...rest,
-        animation: animation2,
         "aria-busy": "false",
+        animation: animation2,
         children: validChildren
       }
     );
@@ -113,8 +113,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
         className: (0, import_utils.cx)("ui-skeleton", className),
         __css: css,
         ...rest,
-        animation,
         "aria-busy": "true",
+        animation,
         children: validChildren
       }
     );

package/dist/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/skeleton.tsx"],"sourcesContent":["import type {\n  CSSUIObject,\n  HTMLUIProps,\n  ThemeProps,\n  CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  omitThemeProps,\n  useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ninterface SkeletonOptions {\n  /**\n   * The color at the animation start.\n   */\n  startColor?: CSSUIProps[\"color\"]\n  /**\n   * The color at the animation end.\n   */\n  endColor?: CSSUIProps[\"color\"]\n  /**\n   * If `true`, it'll render its children with a nice fade transition.\n   *\n   * @default false\n   */\n  isLoaded?: boolean\n  /**\n   * The animation speed in seconds.\n   *\n   * @default 0.8\n   */\n  speed?: string | number\n  /**\n   * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n   *\n   * @default 0.4\n   */\n  fadeDuration?: string | number\n  /**\n   * If `true`, the skeleton will take the width of it's children.\n   *\n   * @default false\n   */\n  isFitContent?: boolean\n}\n\nexport interface SkeletonProps\n  extends HTMLUIProps,\n    ThemeProps<\"Skeleton\">,\n    SkeletonOptions {}\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n  let {\n    className,\n    startColor: _startColor,\n    endColor: _endColor,\n    fadeDuration = 0.4,\n    speed = 0.8,\n    isLoaded,\n    isFitContent,\n    children,\n    ...rest\n  } = omitThemeProps(mergedProps)\n  const [isMounted] = useIsMounted()\n  const validChildren = getValidChildren(children)\n  const prevIsLoaded = usePrevious(isLoaded)\n  const startColor = useValue(_startColor)\n  const endColor = useValue(_endColor)\n  const hasChildren = !!validChildren.length\n\n  isFitContent ??= hasChildren\n\n  const fadeIn = useAnimation({\n    keyframes: {\n      \"0%\": {\n        opacity: 0,\n      },\n      \"100%\": {\n        opacity: 1,\n      },\n    },\n    duration:\n      typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n  })\n\n  const animation = useAnimation({\n    keyframes: {\n      \"0%\": {\n        borderColor: startColor,\n        background: startColor,\n      },\n      \"100%\": {\n        borderColor: endColor,\n        background: endColor,\n      },\n    },\n    duration: typeof speed === \"string\" ? speed : `${speed}s`,\n    iterationCount: \"infinite\",\n    direction: \"alternate\",\n    timingFunction: \"linear\",\n  })\n\n  const css: CSSUIObject = {\n    w: isFitContent ? \"fit-content\" : \"100%\",\n    maxW: \"100%\",\n    h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n    boxShadow: \"none\",\n    backgroundClip: \"padding-box\",\n    cursor: \"default\",\n    color: \"transparent\",\n    pointerEvents: \"none\",\n    userSelect: \"none\",\n    \"&::before, &::after, *\": {\n      visibility: \"hidden\",\n    },\n    ...styles,\n  }\n\n  if (isLoaded) {\n    const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n        {...rest}\n        animation={animation}\n        aria-busy=\"false\"\n      >\n        {validChildren}\n      </ui.div>\n    )\n  } else {\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton\", className)}\n        __css={css}\n        {...rest}\n        animation={animation}\n        aria-busy=\"true\"\n      >\n        {validChildren}\n      </ui.div>\n    )\n  }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,kBAKO;AACP,2BAA6B;AAC7B,0BAA4B;AAC5B,uBAAyB;AACzB,mBAAmD;AAuH7C;AAxEC,IAAM,eAAW,wBAAiC,CAAC,OAAO,QAAQ;AACvE,QAAM,CAAC,QAAQ,WAAW,QAAI,+BAAkB,YAAY,KAAK;AACjE,MAAI;AAAA,IACF;AAAA,IACA,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,eAAe;AAAA,IACf,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,4BAAe,WAAW;AAC9B,QAAM,CAAC,SAAS,QAAI,2BAAa;AACjC,QAAM,oBAAgB,+BAAiB,QAAQ;AAC/C,QAAM,mBAAe,iCAAY,QAAQ;AACzC,QAAM,iBAAa,2BAAS,WAAW;AACvC,QAAM,eAAW,2BAAS,SAAS;AACnC,QAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,uDAAiB;AAEjB,QAAM,aAAS,mCAAa;AAAA,IAC1B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,UACE,OAAO,iBAAiB,WAAW,eAAe,GAAG,YAAY;AAAA,EACrE,CAAC;AAED,QAAM,gBAAY,mCAAa;AAAA,IAC7B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,MACA,QAAQ;AAAA,QACN,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,UAAU,OAAO,UAAU,WAAW,QAAQ,GAAG,KAAK;AAAA,IACtD,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,MAAmB;AAAA,IACvB,GAAG,eAAe,gBAAgB;AAAA,IAClC,MAAM;AAAA,IACN,GAAG,eAAe,gBAAgB;AAAA,IAClC,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,0BAA0B;AAAA,MACxB,YAAY;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EACL;AAEA,MAAI,UAAU;AACZ,UAAMA,aAAY,CAAC,UAAU,KAAK,eAAe,SAAS;AAE1D,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,eAAe,uBAAuB,SAAS;AAAA,QAC5D,GAAG;AAAA,QACJ,WAAWA;AAAA,QACX,aAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,eAAe,SAAS;AAAA,QACtC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QACA,aAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,EAEJ;AACF,CAAC;AAED,SAAS,cAAc;AACvB,SAAS,SAAS;","names":["animation"]}
+{"version":3,"sources":["../src/skeleton.tsx"],"sourcesContent":["import type {\n  CSSUIObject,\n  CSSUIProps,\n  HTMLUIProps,\n  ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ninterface SkeletonOptions {\n  /**\n   * The color at the animation end.\n   */\n  endColor?: CSSUIProps[\"color\"]\n  /**\n   * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n   *\n   * @default 0.4\n   */\n  fadeDuration?: number | string\n  /**\n   * If `true`, the skeleton will take the width of it's children.\n   *\n   * @default false\n   */\n  isFitContent?: boolean\n  /**\n   * If `true`, it'll render its children with a nice fade transition.\n   *\n   * @default false\n   */\n  isLoaded?: boolean\n  /**\n   * The animation speed in seconds.\n   *\n   * @default 0.8\n   */\n  speed?: number | string\n  /**\n   * The color at the animation start.\n   */\n  startColor?: CSSUIProps[\"color\"]\n}\n\nexport interface SkeletonProps\n  extends HTMLUIProps,\n    ThemeProps<\"Skeleton\">,\n    SkeletonOptions {}\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n  let {\n    className,\n    children,\n    endColor: _endColor,\n    fadeDuration = 0.4,\n    isFitContent,\n    isLoaded,\n    speed = 0.8,\n    startColor: _startColor,\n    ...rest\n  } = omitThemeProps(mergedProps)\n  const [isMounted] = useIsMounted()\n  const validChildren = getValidChildren(children)\n  const prevIsLoaded = usePrevious(isLoaded)\n  const startColor = useValue(_startColor)\n  const endColor = useValue(_endColor)\n  const hasChildren = !!validChildren.length\n\n  isFitContent ??= hasChildren\n\n  const fadeIn = useAnimation({\n    duration:\n      typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n    keyframes: {\n      \"0%\": {\n        opacity: 0,\n      },\n      \"100%\": {\n        opacity: 1,\n      },\n    },\n  })\n\n  const animation = useAnimation({\n    direction: \"alternate\",\n    duration: typeof speed === \"string\" ? speed : `${speed}s`,\n    iterationCount: \"infinite\",\n    keyframes: {\n      \"0%\": {\n        background: startColor,\n        borderColor: startColor,\n      },\n      \"100%\": {\n        background: endColor,\n        borderColor: endColor,\n      },\n    },\n    timingFunction: \"linear\",\n  })\n\n  const css: CSSUIObject = {\n    \"&::before, &::after, *\": {\n      visibility: \"hidden\",\n    },\n    backgroundClip: \"padding-box\",\n    boxShadow: \"none\",\n    color: \"transparent\",\n    cursor: \"default\",\n    h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n    maxW: \"100%\",\n    pointerEvents: \"none\",\n    userSelect: \"none\",\n    w: isFitContent ? \"fit-content\" : \"100%\",\n    ...styles,\n  }\n\n  if (isLoaded) {\n    const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n        {...rest}\n        aria-busy=\"false\"\n        animation={animation}\n      >\n        {validChildren}\n      </ui.div>\n    )\n  } else {\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton\", className)}\n        __css={css}\n        {...rest}\n        aria-busy=\"true\"\n        animation={animation}\n      >\n        {validChildren}\n      </ui.div>\n    )\n  }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,kBAKO;AACP,2BAA6B;AAC7B,0BAA4B;AAC5B,uBAAyB;AACzB,mBAAmD;AAuH7C;AAxEC,IAAM,eAAW,wBAAiC,CAAC,OAAO,QAAQ;AACvE,QAAM,CAAC,QAAQ,WAAW,QAAI,+BAAkB,YAAY,KAAK;AACjE,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,QAAI,4BAAe,WAAW;AAC9B,QAAM,CAAC,SAAS,QAAI,2BAAa;AACjC,QAAM,oBAAgB,+BAAiB,QAAQ;AAC/C,QAAM,mBAAe,iCAAY,QAAQ;AACzC,QAAM,iBAAa,2BAAS,WAAW;AACvC,QAAM,eAAW,2BAAS,SAAS;AACnC,QAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,uDAAiB;AAEjB,QAAM,aAAS,mCAAa;AAAA,IAC1B,UACE,OAAO,iBAAiB,WAAW,eAAe,GAAG,YAAY;AAAA,IACnE,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF,CAAC;AAED,QAAM,gBAAY,mCAAa;AAAA,IAC7B,WAAW;AAAA,IACX,UAAU,OAAO,UAAU,WAAW,QAAQ,GAAG,KAAK;AAAA,IACtD,gBAAgB;AAAA,IAChB,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,aAAa;AAAA,MACf;AAAA,MACA,QAAQ;AAAA,QACN,YAAY;AAAA,QACZ,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,MAAmB;AAAA,IACvB,0BAA0B;AAAA,MACxB,YAAY;AAAA,IACd;AAAA,IACA,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,GAAG,eAAe,gBAAgB;AAAA,IAClC,MAAM;AAAA,IACN,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,GAAG,eAAe,gBAAgB;AAAA,IAClC,GAAG;AAAA,EACL;AAEA,MAAI,UAAU;AACZ,UAAMA,aAAY,CAAC,UAAU,KAAK,eAAe,SAAS;AAE1D,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,eAAe,uBAAuB,SAAS;AAAA,QAC5D,GAAG;AAAA,QACJ,aAAU;AAAA,QACV,WAAWA;AAAA,QAEV;AAAA;AAAA,IACH;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,eAAe,SAAS;AAAA,QACtC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,aAAU;AAAA,QACV;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF,CAAC;AAED,SAAS,cAAc;AACvB,SAAS,SAAS;","names":["animation"]}

package/dist/skeleton.mjs

@@ -1,7 +1,7 @@
 "use client"
 import {
   Skeleton
-} from "./chunk-BWLL2ZTF.mjs";
+} from "./chunk-VY47PFFY.mjs";
 export {
   Skeleton
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/skeleton",
-  "version": "1.1.7-next-20241005220055",
+  "version": "1.1.7-next-20241008193728",
   "description": "Yamada UI skeleton component",
   "keywords": [
     "yamada",
@@ -36,11 +36,11 @@
     "url": "https://github.com/yamada-ui/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "1.15.2-next-20241005220055",
-    "@yamada-ui/use-animation": "1.0.39-next-20241005220055",
-    "@yamada-ui/use-previous": "1.0.21",
-    "@yamada-ui/use-value": "1.1.27-next-20241005220055",
-    "@yamada-ui/utils": "1.5.2"
+    "@yamada-ui/core": "1.15.2-next-20241008193728",
+    "@yamada-ui/use-animation": "1.0.39-next-20241008193728",
+    "@yamada-ui/use-previous": "1.0.22-next-20241008193728",
+    "@yamada-ui/use-value": "1.1.27-next-20241008193728",
+    "@yamada-ui/utils": "1.5.3-next-20241008193728"
   },
   "devDependencies": {
     "clean-package": "2.2.0",

package/dist/chunk-2U4SAIJD.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/skeleton-text.tsx"],"sourcesContent":["import type { CSSUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./skeleton\"\nimport { Skeleton } from \"./skeleton\"\n\ninterface SkeletonTextOptions {\n  /**\n   * The CSS `gap` property.\n   */\n  gap?: CSSUIProps[\"gap\"]\n  /**\n   * The CSS `height` property.\n   */\n  textHeight?: CSSUIProps[\"height\"]\n}\n\nexport interface SkeletonTextProps\n  extends Omit<SkeletonProps, \"isFitContent\">,\n    SkeletonTextOptions {}\n\nexport const SkeletonText = forwardRef<SkeletonTextProps, \"div\">(\n  (\n    {\n      className,\n      lineClamp: _lineClamp = 3,\n      startColor,\n      endColor,\n      fadeDuration,\n      speed,\n      isLoaded,\n      gap = \"fallback(2, 0.5rem)\",\n      textHeight = \"fallback(2, 0.5rem)\",\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const lineClamp = useValue(_lineClamp)\n\n    const css: CSSUIObject = {\n      w: \"100%\",\n    }\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton__text\", className)}\n        __css={css}\n        {...rest}\n      >\n        {Array(lineClamp)\n          .fill(0)\n          .map((_, index) => {\n            if (isLoaded && index > 0) return null\n\n            const isLast = index + 1 === lineClamp\n\n            const props: SkeletonProps = !isLoaded\n              ? {\n                  mb: !isLast ? gap : undefined,\n                  w: lineClamp > 1 ? (!isLast ? \"100%\" : \"80%\") : \"100%\",\n                  h: textHeight,\n                }\n              : {}\n\n            return (\n              <Skeleton\n                key={index}\n                {...{\n                  startColor,\n                  endColor,\n                  fadeDuration,\n                  speed,\n                  isLoaded,\n                  ...props,\n                }}\n              >\n                {index === 0 ? children : undefined}\n              </Skeleton>\n            )\n          })}\n      </ui.div>\n    )\n  },\n)\n\nSkeletonText.displayName = \"SkeletonText\"\nSkeletonText.__ui__ = \"SkeletonText\"\n"],"mappings":";;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,UAAU;AAiEL;AA9CP,IAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA,WAAW,aAAa;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,YAAY,SAAS,UAAU;AAErC,UAAM,MAAmB;AAAA,MACvB,GAAG;AAAA,IACL;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,qBAAqB,SAAS;AAAA,QAC5C,OAAO;AAAA,QACN,GAAG;AAAA,QAEH,gBAAM,SAAS,EACb,KAAK,CAAC,EACN,IAAI,CAAC,GAAG,UAAU;AACjB,cAAI,YAAY,QAAQ,EAAG,QAAO;AAElC,gBAAM,SAAS,QAAQ,MAAM;AAE7B,gBAAM,QAAuB,CAAC,WAC1B;AAAA,YACE,IAAI,CAAC,SAAS,MAAM;AAAA,YACpB,GAAG,YAAY,IAAK,CAAC,SAAS,SAAS,QAAS;AAAA,YAChD,GAAG;AAAA,UACL,IACA,CAAC;AAEL,iBACE;AAAA,YAAC;AAAA;AAAA,cAEE,GAAG;AAAA,gBACF;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,GAAG;AAAA,cACL;AAAA,cAEC,oBAAU,IAAI,WAAW;AAAA;AAAA,YAVrB;AAAA,UAWP;AAAA,QAEJ,CAAC;AAAA;AAAA,IACL;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;AAC3B,aAAa,SAAS;","names":[]}

package/dist/chunk-BWLL2ZTF.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/skeleton.tsx"],"sourcesContent":["import type {\n  CSSUIObject,\n  HTMLUIProps,\n  ThemeProps,\n  CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  omitThemeProps,\n  useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ninterface SkeletonOptions {\n  /**\n   * The color at the animation start.\n   */\n  startColor?: CSSUIProps[\"color\"]\n  /**\n   * The color at the animation end.\n   */\n  endColor?: CSSUIProps[\"color\"]\n  /**\n   * If `true`, it'll render its children with a nice fade transition.\n   *\n   * @default false\n   */\n  isLoaded?: boolean\n  /**\n   * The animation speed in seconds.\n   *\n   * @default 0.8\n   */\n  speed?: string | number\n  /**\n   * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n   *\n   * @default 0.4\n   */\n  fadeDuration?: string | number\n  /**\n   * If `true`, the skeleton will take the width of it's children.\n   *\n   * @default false\n   */\n  isFitContent?: boolean\n}\n\nexport interface SkeletonProps\n  extends HTMLUIProps,\n    ThemeProps<\"Skeleton\">,\n    SkeletonOptions {}\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n  let {\n    className,\n    startColor: _startColor,\n    endColor: _endColor,\n    fadeDuration = 0.4,\n    speed = 0.8,\n    isLoaded,\n    isFitContent,\n    children,\n    ...rest\n  } = omitThemeProps(mergedProps)\n  const [isMounted] = useIsMounted()\n  const validChildren = getValidChildren(children)\n  const prevIsLoaded = usePrevious(isLoaded)\n  const startColor = useValue(_startColor)\n  const endColor = useValue(_endColor)\n  const hasChildren = !!validChildren.length\n\n  isFitContent ??= hasChildren\n\n  const fadeIn = useAnimation({\n    keyframes: {\n      \"0%\": {\n        opacity: 0,\n      },\n      \"100%\": {\n        opacity: 1,\n      },\n    },\n    duration:\n      typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n  })\n\n  const animation = useAnimation({\n    keyframes: {\n      \"0%\": {\n        borderColor: startColor,\n        background: startColor,\n      },\n      \"100%\": {\n        borderColor: endColor,\n        background: endColor,\n      },\n    },\n    duration: typeof speed === \"string\" ? speed : `${speed}s`,\n    iterationCount: \"infinite\",\n    direction: \"alternate\",\n    timingFunction: \"linear\",\n  })\n\n  const css: CSSUIObject = {\n    w: isFitContent ? \"fit-content\" : \"100%\",\n    maxW: \"100%\",\n    h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n    boxShadow: \"none\",\n    backgroundClip: \"padding-box\",\n    cursor: \"default\",\n    color: \"transparent\",\n    pointerEvents: \"none\",\n    userSelect: \"none\",\n    \"&::before, &::after, *\": {\n      visibility: \"hidden\",\n    },\n    ...styles,\n  }\n\n  if (isLoaded) {\n    const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n        {...rest}\n        animation={animation}\n        aria-busy=\"false\"\n      >\n        {validChildren}\n      </ui.div>\n    )\n  } else {\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-skeleton\", className)}\n        __css={css}\n        {...rest}\n        animation={animation}\n        aria-busy=\"true\"\n      >\n        {validChildren}\n      </ui.div>\n    )\n  }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n"],"mappings":";;;AAMA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,IAAI,kBAAkB,oBAAoB;AAuH7C;AAxEC,IAAM,WAAW,WAAiC,CAAC,OAAO,QAAQ;AACvE,QAAM,CAAC,QAAQ,WAAW,IAAI,kBAAkB,YAAY,KAAK;AACjE,MAAI;AAAA,IACF;AAAA,IACA,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,eAAe;AAAA,IACf,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,eAAe,WAAW;AAC9B,QAAM,CAAC,SAAS,IAAI,aAAa;AACjC,QAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,QAAM,eAAe,YAAY,QAAQ;AACzC,QAAM,aAAa,SAAS,WAAW;AACvC,QAAM,WAAW,SAAS,SAAS;AACnC,QAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,uDAAiB;AAEjB,QAAM,SAAS,aAAa;AAAA,IAC1B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,UACE,OAAO,iBAAiB,WAAW,eAAe,GAAG,YAAY;AAAA,EACrE,CAAC;AAED,QAAM,YAAY,aAAa;AAAA,IAC7B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,MACA,QAAQ;AAAA,QACN,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,UAAU,OAAO,UAAU,WAAW,QAAQ,GAAG,KAAK;AAAA,IACtD,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,MAAmB;AAAA,IACvB,GAAG,eAAe,gBAAgB;AAAA,IAClC,MAAM;AAAA,IACN,GAAG,eAAe,gBAAgB;AAAA,IAClC,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,0BAA0B;AAAA,MACxB,YAAY;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EACL;AAEA,MAAI,UAAU;AACZ,UAAMA,aAAY,CAAC,UAAU,KAAK,eAAe,SAAS;AAE1D,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,uBAAuB,SAAS;AAAA,QAC5D,GAAG;AAAA,QACJ,WAAWA;AAAA,QACX,aAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,SAAS;AAAA,QACtC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QACA,aAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,EAEJ;AACF,CAAC;AAED,SAAS,cAAc;AACvB,SAAS,SAAS;","names":["animation"]}