npm - @yamada-ui/skeleton - Versions diffs - 1.1.12-next-20241127012228 → 1.1.13-dev-20241201051428 - Mend

@yamada-ui/skeleton 1.1.12-next-20241127012228 → 1.1.13-dev-20241201051428

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/dist/{chunk-VY47PFFY.mjs → chunk-DWX5AZOS.mjs} +9 -5
package/dist/chunk-DWX5AZOS.mjs.map +1 -0
package/dist/{chunk-HVK4KBDF.mjs → chunk-PUQL4CGB.mjs} +7 -6
package/dist/chunk-PUQL4CGB.mjs.map +1 -0
package/dist/{chunk-BLQTNT3J.mjs → chunk-SD6HP7BI.mjs} +7 -5
package/dist/chunk-SD6HP7BI.mjs.map +1 -0
package/dist/index.js +18 -11
package/dist/index.js.map +1 -1
package/dist/index.mjs +3 -3
package/dist/skeleton-circle.js +13 -7
package/dist/skeleton-circle.js.map +1 -1
package/dist/skeleton-circle.mjs +2 -2
package/dist/skeleton-text.js +13 -8
package/dist/skeleton-text.js.map +1 -1
package/dist/skeleton-text.mjs +2 -2
package/dist/skeleton.d.mts +16 -0
package/dist/skeleton.d.ts +16 -0
package/dist/skeleton.js +8 -4
package/dist/skeleton.js.map +1 -1
package/dist/skeleton.mjs +1 -1
package/package.json +6 -6
package/dist/chunk-BLQTNT3J.mjs.map +0 -1
package/dist/chunk-HVK4KBDF.mjs.map +0 -1
package/dist/chunk-VY47PFFY.mjs.map +0 -1

package/dist/{chunk-VY47PFFY.mjs → chunk-DWX5AZOS.mjs} RENAMED Viewed

@@ -19,8 +19,10 @@ var Skeleton = forwardRef((props, ref) => {
     children,
     endColor: _endColor,
     fadeDuration = 0.4,
+    fitContent,
     isFitContent,
     isLoaded,
+    loaded,
     speed = 0.8,
     startColor: _startColor,
     ...rest
@@ -31,7 +33,9 @@ var Skeleton = forwardRef((props, ref) => {
   const startColor = useValue(_startColor);
   const endColor = useValue(_endColor);
   const hasChildren = !!validChildren.length;
-  isFitContent != null ? isFitContent : isFitContent = hasChildren;
+  fitContent != null ? fitContent : fitContent = isFitContent;
+  loaded != null ? loaded : loaded = isLoaded;
+  fitContent != null ? fitContent : fitContent = hasChildren;
   const fadeIn = useAnimation({
     duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`,
     keyframes: {
@@ -67,14 +71,14 @@ var Skeleton = forwardRef((props, ref) => {
     boxShadow: "none",
     color: "transparent",
     cursor: "default",
-    h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
+    h: fitContent ? "fit-content" : "fallback(4, 1rem)",
     maxW: "100%",
     pointerEvents: "none",
     userSelect: "none",
-    w: isFitContent ? "fit-content" : "100%",
+    w: fitContent ? "fit-content" : "100%",
     ...styles
   };
-  if (isLoaded) {
+  if (loaded) {
     const animation2 = !isMounted() || prevIsLoaded ? "none" : fadeIn;
     return /* @__PURE__ */ jsx(
       ui.div,
@@ -108,4 +112,4 @@ Skeleton.__ui__ = "Skeleton";
 export {
   Skeleton
 };
-//# sourceMappingURL=chunk-VY47PFFY.mjs.map
+//# sourceMappingURL=chunk-DWX5AZOS.mjs.map

package/dist/chunk-DWX5AZOS.mjs.map ADDED Viewed

@@ -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 fitContent?: boolean\n /**\n * If `true`, the skeleton will take the width of it's children.\n *\n * @default false\n *\n * @deprecated Use `fitContent` instead.\n */\n isFitContent?: boolean\n /**\n * If `true`, it'll render its children with a nice fade transition.\n *\n * @default false\n *\n * @deprecated Use `loaded` instead.\n */\n isLoaded?: boolean\n /**\n * If `true`, it'll render its children with a nice fade transition.\n *\n * @default false\n */\n loaded?: 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 fitContent,\n isFitContent,\n isLoaded,\n loaded,\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 fitContent ??= isFitContent\n loaded ??= isLoaded\n fitContent ??= 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: fitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n maxW: \"100%\",\n pointerEvents: \"none\",\n userSelect: \"none\",\n w: fitContent ? \"fit-content\" : \"100%\",\n ...styles,\n }\n\n if (loaded) {\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;AA2I7C;AA5EC,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;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,iDAAe;AACf,qCAAW;AACX,iDAAe;AAEf,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,aAAa,gBAAgB;AAAA,IAChC,MAAM;AAAA,IACN,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,GAAG,aAAa,gBAAgB;AAAA,IAChC,GAAG;AAAA,EACL;AAEA,MAAI,QAAQ;AACV,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/{chunk-HVK4KBDF.mjs → chunk-PUQL4CGB.mjs} RENAMED Viewed

@@ -1,7 +1,7 @@
 "use client"
 import {
   Skeleton
-} from "./chunk-VY47PFFY.mjs";
+} from "./chunk-DWX5AZOS.mjs";
 // src/skeleton-text.tsx
 import { forwardRef, ui } from "@yamada-ui/core";
@@ -17,6 +17,7 @@ var SkeletonText = forwardRef(
     gap = "fallback(2, 0.5rem)",
     isLoaded,
     lineClamp: _lineClamp = 3,
+    loaded,
     speed,
     startColor,
     textHeight = "fallback(2, 0.5rem)",
@@ -35,11 +36,11 @@ var SkeletonText = forwardRef(
         ...rest,
         children: Array(lineClamp).fill(0).map((_, index) => {
           if (isLoaded && index > 0) return null;
-          const isLast = index + 1 === lineClamp;
+          const last = index + 1 === lineClamp;
           const props = !isLoaded ? {
             h: textHeight,
-            mb: !isLast ? gap : void 0,
-            w: lineClamp > 1 ? !isLast ? "100%" : "80%" : "100%"
+            mb: !last ? gap : void 0,
+            w: lineClamp > 1 ? !last ? "100%" : "80%" : "100%"
           } : {};
           return /* @__PURE__ */ jsx(
             Skeleton,
@@ -47,7 +48,7 @@ var SkeletonText = forwardRef(
               ...{
                 endColor,
                 fadeDuration,
-                isLoaded,
+                loaded,
                 speed,
                 startColor,
                 ...props
@@ -67,4 +68,4 @@ SkeletonText.__ui__ = "SkeletonText";
 export {
   SkeletonText
 };
-//# sourceMappingURL=chunk-HVK4KBDF.mjs.map
+//# sourceMappingURL=chunk-PUQL4CGB.mjs.map

package/dist/chunk-PUQL4CGB.mjs.map ADDED Viewed

@@ -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 loaded,\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 last = index + 1 === lineClamp\n\n const props: SkeletonProps = !isLoaded\n ? {\n h: textHeight,\n mb: !last ? gap : undefined,\n w: lineClamp > 1 ? (!last ? \"100%\" : \"80%\") : \"100%\",\n }\n : {}\n\n return (\n <Skeleton\n key={index}\n {...{\n endColor,\n fadeDuration,\n loaded,\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;AAiEL;AA/CP,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,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,OAAO,QAAQ,MAAM;AAE3B,gBAAM,QAAuB,CAAC,WAC1B;AAAA,YACE,GAAG;AAAA,YACH,IAAI,CAAC,OAAO,MAAM;AAAA,YAClB,GAAG,YAAY,IAAK,CAAC,OAAO,SAAS,QAAS;AAAA,UAChD,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-BLQTNT3J.mjs → chunk-SD6HP7BI.mjs} RENAMED Viewed

@@ -1,7 +1,7 @@
 "use client"
 import {
   Skeleton
-} from "./chunk-VY47PFFY.mjs";
+} from "./chunk-DWX5AZOS.mjs";
 // src/skeleton-circle.tsx
 import { forwardRef } from "@yamada-ui/core";
@@ -12,20 +12,22 @@ var SkeletonCircle = forwardRef(
     className,
     boxSize = "fallback(12, 3rem)",
     children,
+    fitContent,
     isFitContent,
     ...rest
   }, ref) => {
     const validChildren = getValidChildren(children);
     const hasChildren = !!validChildren.length;
-    isFitContent != null ? isFitContent : isFitContent = hasChildren;
+    fitContent != null ? fitContent : fitContent = isFitContent;
+    fitContent != null ? fitContent : fitContent = hasChildren;
     return /* @__PURE__ */ jsx(
       Skeleton,
       {
         ref,
         className: cx("ui-skeleton__circle", className),
-        isFitContent,
+        fitContent,
         rounded: "fallback(full, 9999px)",
-        ...!isFitContent ? { boxSize } : {},
+        ...!fitContent ? { boxSize } : {},
         ...rest,
         children: validChildren
       }
@@ -38,4 +40,4 @@ SkeletonCircle.__ui__ = "SkeletonCircle";
 export {
   SkeletonCircle
 };
-//# sourceMappingURL=chunk-BLQTNT3J.mjs.map
+//# sourceMappingURL=chunk-SD6HP7BI.mjs.map

package/dist/chunk-SD6HP7BI.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"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 fitContent,\n isFitContent,\n ...rest\n },\n ref,\n ) => {\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n fitContent ??= isFitContent\n fitContent ??= hasChildren\n\n return (\n <Skeleton\n ref={ref}\n className={cx(\"ui-skeleton__circle\", className)}\n fitContent={fitContent}\n rounded=\"fallback(full, 9999px)\"\n {...(!fitContent ? { 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;AAwB/B;AAnBC,IAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,UAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,mDAAe;AACf,mDAAe;AAEf,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,uBAAuB,SAAS;AAAA,QAC9C;AAAA,QACA,SAAQ;AAAA,QACP,GAAI,CAAC,aAAa,EAAE,QAAQ,IAAI,CAAC;AAAA,QACjC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;","names":[]}

package/dist/index.js CHANGED Viewed

@@ -41,8 +41,10 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
     children,
     endColor: _endColor,
     fadeDuration = 0.4,
+    fitContent,
     isFitContent,
     isLoaded,
+    loaded,
     speed = 0.8,
     startColor: _startColor,
     ...rest
@@ -53,7 +55,9 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
   const startColor = (0, import_use_value.useValue)(_startColor);
   const endColor = (0, import_use_value.useValue)(_endColor);
   const hasChildren = !!validChildren.length;
-  isFitContent != null ? isFitContent : isFitContent = hasChildren;
+  fitContent != null ? fitContent : fitContent = isFitContent;
+  loaded != null ? loaded : loaded = isLoaded;
+  fitContent != null ? fitContent : fitContent = hasChildren;
   const fadeIn = (0, import_use_animation.useAnimation)({
     duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`,
     keyframes: {
@@ -89,14 +93,14 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
     boxShadow: "none",
     color: "transparent",
     cursor: "default",
-    h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
+    h: fitContent ? "fit-content" : "fallback(4, 1rem)",
     maxW: "100%",
     pointerEvents: "none",
     userSelect: "none",
-    w: isFitContent ? "fit-content" : "100%",
+    w: fitContent ? "fit-content" : "100%",
     ...styles
   };
-  if (isLoaded) {
+  if (loaded) {
     const animation2 = !isMounted() || prevIsLoaded ? "none" : fadeIn;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_core.ui.div,
@@ -136,20 +140,22 @@ var SkeletonCircle = (0, import_core2.forwardRef)(
     className,
     boxSize = "fallback(12, 3rem)",
     children,
+    fitContent,
     isFitContent,
     ...rest
   }, ref) => {
     const validChildren = (0, import_utils2.getValidChildren)(children);
     const hasChildren = !!validChildren.length;
-    isFitContent != null ? isFitContent : isFitContent = hasChildren;
+    fitContent != null ? fitContent : fitContent = isFitContent;
+    fitContent != null ? fitContent : fitContent = hasChildren;
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       Skeleton,
       {
         ref,
         className: (0, import_utils2.cx)("ui-skeleton__circle", className),
-        isFitContent,
+        fitContent,
         rounded: "fallback(full, 9999px)",
-        ...!isFitContent ? { boxSize } : {},
+        ...!fitContent ? { boxSize } : {},
         ...rest,
         children: validChildren
       }
@@ -173,6 +179,7 @@ var SkeletonText = (0, import_core3.forwardRef)(
     gap = "fallback(2, 0.5rem)",
     isLoaded,
     lineClamp: _lineClamp = 3,
+    loaded,
     speed,
     startColor,
     textHeight = "fallback(2, 0.5rem)",
@@ -191,11 +198,11 @@ var SkeletonText = (0, import_core3.forwardRef)(
         ...rest,
         children: Array(lineClamp).fill(0).map((_, index) => {
           if (isLoaded && index > 0) return null;
-          const isLast = index + 1 === lineClamp;
+          const last = index + 1 === lineClamp;
           const props = !isLoaded ? {
             h: textHeight,
-            mb: !isLast ? gap : void 0,
-            w: lineClamp > 1 ? !isLast ? "100%" : "80%" : "100%"
+            mb: !last ? gap : void 0,
+            w: lineClamp > 1 ? !last ? "100%" : "80%" : "100%"
           } : {};
           return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             Skeleton,
@@ -203,7 +210,7 @@ var SkeletonText = (0, import_core3.forwardRef)(
               ...{
                 endColor,
                 fadeDuration,
-                isLoaded,
+                loaded,
                 speed,
                 startColor,
                 ...props

package/dist/index.js.map CHANGED Viewed

	@@ -1 +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 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"]}
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 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 fitContent?: boolean\n /\n If `true`, the skeleton will take the width of it's children.\n \n @default false\n \n @deprecated Use `fitContent` instead.\n /\n isFitContent?: boolean\n /\n If `true`, it'll render its children with a nice fade transition.\n \n @default false\n \n @deprecated Use `loaded` instead.\n /\n isLoaded?: boolean\n /\n If `true`, it'll render its children with a nice fade transition.\n \n @default false\n /\n loaded?: 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 fitContent,\n isFitContent,\n isLoaded,\n loaded,\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 fitContent ??= isFitContent\n loaded ??= isLoaded\n fitContent ??= 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: fitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n maxW: \"100%\",\n pointerEvents: \"none\",\n userSelect: \"none\",\n w: fitContent ? \"fit-content\" : \"100%\",\n ...styles,\n }\n\n if (loaded) {\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 fitContent,\n isFitContent,\n ...rest\n },\n ref,\n ) => {\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n fitContent ??= isFitContent\n fitContent ??= hasChildren\n\n return (\n <Skeleton\n ref={ref}\n className={cx(\"ui-skeleton__circle\", className)}\n fitContent={fitContent}\n rounded=\"fallback(full, 9999px)\"\n {...(!fitContent ? { 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 loaded,\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 last = index + 1 === lineClamp\n\n const props: SkeletonProps = !isLoaded\n ? {\n h: textHeight,\n mb: !last ? gap : undefined,\n w: lineClamp > 1 ? (!last ? \"100%\" : \"80%\") : \"100%\",\n }\n : {}\n\n return (\n <Skeleton\n key={index}\n {...{\n endColor,\n fadeDuration,\n loaded,\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 CHANGED Viewed

@@ -1,13 +1,13 @@
 "use client"
 import {
   SkeletonCircle
-} from "./chunk-BLQTNT3J.mjs";
+} from "./chunk-SD6HP7BI.mjs";
 import {
   SkeletonText
-} from "./chunk-HVK4KBDF.mjs";
+} from "./chunk-PUQL4CGB.mjs";
 import {
   Skeleton
-} from "./chunk-VY47PFFY.mjs";
+} from "./chunk-DWX5AZOS.mjs";
 export {
   Skeleton,
   SkeletonCircle,

package/dist/skeleton-circle.js CHANGED Viewed

@@ -41,8 +41,10 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
     children,
     endColor: _endColor,
     fadeDuration = 0.4,
+    fitContent,
     isFitContent,
     isLoaded,
+    loaded,
     speed = 0.8,
     startColor: _startColor,
     ...rest
@@ -53,7 +55,9 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
   const startColor = (0, import_use_value.useValue)(_startColor);
   const endColor = (0, import_use_value.useValue)(_endColor);
   const hasChildren = !!validChildren.length;
-  isFitContent != null ? isFitContent : isFitContent = hasChildren;
+  fitContent != null ? fitContent : fitContent = isFitContent;
+  loaded != null ? loaded : loaded = isLoaded;
+  fitContent != null ? fitContent : fitContent = hasChildren;
   const fadeIn = (0, import_use_animation.useAnimation)({
     duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`,
     keyframes: {
@@ -89,14 +93,14 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
     boxShadow: "none",
     color: "transparent",
     cursor: "default",
-    h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
+    h: fitContent ? "fit-content" : "fallback(4, 1rem)",
     maxW: "100%",
     pointerEvents: "none",
     userSelect: "none",
-    w: isFitContent ? "fit-content" : "100%",
+    w: fitContent ? "fit-content" : "100%",
     ...styles
   };
-  if (isLoaded) {
+  if (loaded) {
     const animation2 = !isMounted() || prevIsLoaded ? "none" : fadeIn;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_core.ui.div,
@@ -134,20 +138,22 @@ var SkeletonCircle = (0, import_core2.forwardRef)(
     className,
     boxSize = "fallback(12, 3rem)",
     children,
+    fitContent,
     isFitContent,
     ...rest
   }, ref) => {
     const validChildren = (0, import_utils2.getValidChildren)(children);
     const hasChildren = !!validChildren.length;
-    isFitContent != null ? isFitContent : isFitContent = hasChildren;
+    fitContent != null ? fitContent : fitContent = isFitContent;
+    fitContent != null ? fitContent : fitContent = hasChildren;
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       Skeleton,
       {
         ref,
         className: (0, import_utils2.cx)("ui-skeleton__circle", className),
-        isFitContent,
+        fitContent,
         rounded: "fallback(full, 9999px)",
-        ...!isFitContent ? { boxSize } : {},
+        ...!fitContent ? { boxSize } : {},
         ...rest,
         children: validChildren
       }

package/dist/skeleton-circle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,eAA2B;AAC3B,IAAAC,gBAAqC;;;ACIrC,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~~,UAAMC,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;;;~~ADzIZ~~,IAAAC,sBAAA;~~AAjBC~~,IAAM,qBAAiB;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,oBAAgB,gCAAiB,QAAQ;AAC/C,UAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,~~yDAAiB~~;~~AAEjB~~,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,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":["import_core","import_utils","animation","import_jsx_runtime"]}
1	+ {"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 fitContent,\n isFitContent,\n ...rest\n },\n ref,\n ) => {\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n fitContent ??= isFitContent\n fitContent ??= hasChildren\n\n return (\n <Skeleton\n ref={ref}\n className={cx(\"ui-skeleton__circle\", className)}\n fitContent={fitContent}\n rounded=\"fallback(full, 9999px)\"\n {...(!fitContent ? { 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 fitContent?: boolean\n /\n If `true`, the skeleton will take the width of it's children.\n \n @default false\n \n @deprecated Use `fitContent` instead.\n /\n isFitContent?: boolean\n /\n If `true`, it'll render its children with a nice fade transition.\n \n @default false\n \n @deprecated Use `loaded` instead.\n /\n isLoaded?: boolean\n /\n If `true`, it'll render its children with a nice fade transition.\n \n @default false\n /\n loaded?: 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 fitContent,\n isFitContent,\n isLoaded,\n loaded,\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 fitContent ??= isFitContent\n loaded ??= isLoaded\n fitContent ??= 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: fitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n maxW: \"100%\",\n pointerEvents: \"none\",\n userSelect: \"none\",\n w: fitContent ? \"fit-content\" : \"100%\",\n ...styles,\n }\n\n if (loaded) {\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 CHANGED Viewed

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

package/dist/skeleton-text.js CHANGED Viewed

@@ -42,8 +42,10 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
     children,
     endColor: _endColor,
     fadeDuration = 0.4,
+    fitContent,
     isFitContent,
     isLoaded,
+    loaded,
     speed = 0.8,
     startColor: _startColor,
     ...rest
@@ -54,7 +56,9 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
   const startColor = (0, import_use_value.useValue)(_startColor);
   const endColor = (0, import_use_value.useValue)(_endColor);
   const hasChildren = !!validChildren.length;
-  isFitContent != null ? isFitContent : isFitContent = hasChildren;
+  fitContent != null ? fitContent : fitContent = isFitContent;
+  loaded != null ? loaded : loaded = isLoaded;
+  fitContent != null ? fitContent : fitContent = hasChildren;
   const fadeIn = (0, import_use_animation.useAnimation)({
     duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`,
     keyframes: {
@@ -90,14 +94,14 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
     boxShadow: "none",
     color: "transparent",
     cursor: "default",
-    h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
+    h: fitContent ? "fit-content" : "fallback(4, 1rem)",
     maxW: "100%",
     pointerEvents: "none",
     userSelect: "none",
-    w: isFitContent ? "fit-content" : "100%",
+    w: fitContent ? "fit-content" : "100%",
     ...styles
   };
-  if (isLoaded) {
+  if (loaded) {
     const animation2 = !isMounted() || prevIsLoaded ? "none" : fadeIn;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_core.ui.div,
@@ -139,6 +143,7 @@ var SkeletonText = (0, import_core2.forwardRef)(
     gap = "fallback(2, 0.5rem)",
     isLoaded,
     lineClamp: _lineClamp = 3,
+    loaded,
     speed,
     startColor,
     textHeight = "fallback(2, 0.5rem)",
@@ -157,11 +162,11 @@ var SkeletonText = (0, import_core2.forwardRef)(
         ...rest,
         children: Array(lineClamp).fill(0).map((_, index) => {
           if (isLoaded && index > 0) return null;
-          const isLast = index + 1 === lineClamp;
+          const last = index + 1 === lineClamp;
           const props = !isLoaded ? {
             h: textHeight,
-            mb: !isLast ? gap : void 0,
-            w: lineClamp > 1 ? !isLast ? "100%" : "80%" : "100%"
+            mb: !last ? gap : void 0,
+            w: lineClamp > 1 ? !last ? "100%" : "80%" : "100%"
           } : {};
           return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             Skeleton,
@@ -169,7 +174,7 @@ var SkeletonText = (0, import_core2.forwardRef)(
               ...{
                 endColor,
                 fadeDuration,
-                isLoaded,
+                loaded,
                 speed,
                 startColor,
                 ...props

package/dist/skeleton-text.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,eAA+B;AAC/B,IAAAC,oBAAyB;AACzB,IAAAC,gBAAmB;;;ACEnB,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~~,UAAMC,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;;;~~AD7FJ~~,IAAAC,sBAAA;~~AA9CP~~,IAAM,mBAAe;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,gBAAY,4BAAS,UAAU;AAErC,UAAM,MAAmB;AAAA,MACvB,GAAG;AAAA,IACL;AAEA,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,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":["import_core","import_use_value","import_utils","animation","import_jsx_runtime"]}
1	+ {"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 loaded,\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 last = index + 1 === lineClamp\n\n const props: SkeletonProps = !isLoaded\n ? {\n h: textHeight,\n mb: !last ? gap : undefined,\n w: lineClamp > 1 ? (!last ? \"100%\" : \"80%\") : \"100%\",\n }\n : {}\n\n return (\n <Skeleton\n key={index}\n {...{\n endColor,\n fadeDuration,\n loaded,\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 fitContent?: boolean\n /\n If `true`, the skeleton will take the width of it's children.\n \n @default false\n \n @deprecated Use `fitContent` instead.\n /\n isFitContent?: boolean\n /\n If `true`, it'll render its children with a nice fade transition.\n \n @default false\n \n @deprecated Use `loaded` instead.\n /\n isLoaded?: boolean\n /\n If `true`, it'll render its children with a nice fade transition.\n \n @default false\n /\n loaded?: 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 fitContent,\n isFitContent,\n isLoaded,\n loaded,\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 fitContent ??= isFitContent\n loaded ??= isLoaded\n fitContent ??= 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: fitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n maxW: \"100%\",\n pointerEvents: \"none\",\n userSelect: \"none\",\n w: fitContent ? \"fit-content\" : \"100%\",\n ...styles,\n }\n\n if (loaded) {\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 CHANGED Viewed

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

package/dist/skeleton.d.mts CHANGED Viewed

@@ -17,13 +17,29 @@ interface SkeletonOptions {
      *
      * @default false
      */
+    fitContent?: boolean;
+    /**
+     * If `true`, the skeleton will take the width of it's children.
+     *
+     * @default false
+     *
+     * @deprecated Use `fitContent` instead.
+     */
     isFitContent?: boolean;
     /**
      * If `true`, it'll render its children with a nice fade transition.
      *
      * @default false
+     *
+     * @deprecated Use `loaded` instead.
      */
     isLoaded?: boolean;
+    /**
+     * If `true`, it'll render its children with a nice fade transition.
+     *
+     * @default false
+     */
+    loaded?: boolean;
     /**
      * The animation speed in seconds.
      *

package/dist/skeleton.d.ts CHANGED Viewed

@@ -17,13 +17,29 @@ interface SkeletonOptions {
      *
      * @default false
      */
+    fitContent?: boolean;
+    /**
+     * If `true`, the skeleton will take the width of it's children.
+     *
+     * @default false
+     *
+     * @deprecated Use `fitContent` instead.
+     */
     isFitContent?: boolean;
     /**
      * If `true`, it'll render its children with a nice fade transition.
      *
      * @default false
+     *
+     * @deprecated Use `loaded` instead.
      */
     isLoaded?: boolean;
+    /**
+     * If `true`, it'll render its children with a nice fade transition.
+     *
+     * @default false
+     */
+    loaded?: boolean;
     /**
      * The animation speed in seconds.
      *

package/dist/skeleton.js CHANGED Viewed

@@ -37,8 +37,10 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
     children,
     endColor: _endColor,
     fadeDuration = 0.4,
+    fitContent,
     isFitContent,
     isLoaded,
+    loaded,
     speed = 0.8,
     startColor: _startColor,
     ...rest
@@ -49,7 +51,9 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
   const startColor = (0, import_use_value.useValue)(_startColor);
   const endColor = (0, import_use_value.useValue)(_endColor);
   const hasChildren = !!validChildren.length;
-  isFitContent != null ? isFitContent : isFitContent = hasChildren;
+  fitContent != null ? fitContent : fitContent = isFitContent;
+  loaded != null ? loaded : loaded = isLoaded;
+  fitContent != null ? fitContent : fitContent = hasChildren;
   const fadeIn = (0, import_use_animation.useAnimation)({
     duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`,
     keyframes: {
@@ -85,14 +89,14 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
     boxShadow: "none",
     color: "transparent",
     cursor: "default",
-    h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
+    h: fitContent ? "fit-content" : "fallback(4, 1rem)",
     maxW: "100%",
     pointerEvents: "none",
     userSelect: "none",
-    w: isFitContent ? "fit-content" : "100%",
+    w: fitContent ? "fit-content" : "100%",
     ...styles
   };
-  if (isLoaded) {
+  if (loaded) {
     const animation2 = !isMounted() || prevIsLoaded ? "none" : fadeIn;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_core.ui.div,

package/dist/skeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
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":";;;;;;;;;;;;;;;;;;;;;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"]}
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 fitContent?: boolean\n /\n If `true`, the skeleton will take the width of it's children.\n \n @default false\n \n @deprecated Use `fitContent` instead.\n /\n isFitContent?: boolean\n /\n If `true`, it'll render its children with a nice fade transition.\n \n @default false\n \n @deprecated Use `loaded` instead.\n /\n isLoaded?: boolean\n /\n If `true`, it'll render its children with a nice fade transition.\n \n @default false\n /\n loaded?: 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 fitContent,\n isFitContent,\n isLoaded,\n loaded,\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 fitContent ??= isFitContent\n loaded ??= isLoaded\n fitContent ??= 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: fitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n maxW: \"100%\",\n pointerEvents: \"none\",\n userSelect: \"none\",\n w: fitContent ? \"fit-content\" : \"100%\",\n ...styles,\n }\n\n if (loaded) {\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;AA2I7C;AA5EC,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;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,iDAAe;AACf,qCAAW;AACX,iDAAe;AAEf,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,aAAa,gBAAgB;AAAA,IAChC,MAAM;AAAA,IACN,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,GAAG,aAAa,gBAAgB;AAAA,IAChC,GAAG;AAAA,EACL;AAEA,MAAI,QAAQ;AACV,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 CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/skeleton",
-  "version": "1.1.12-next-20241127012228",
+  "version": "1.1.13-dev-20241201051428",
   "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.16.0-next-20241127012228",
-    "@yamada-ui/use-animation": "1.0.44-next-20241127012228",
-    "@yamada-ui/use-previous": "1.0.24-next-20241127012228",
-    "@yamada-ui/use-value": "1.1.32-next-20241127012228",
-    "@yamada-ui/utils": "1.6.0-next-20241127012228"
+    "@yamada-ui/core": "1.16.0",
+    "@yamada-ui/use-animation": "1.0.44",
+    "@yamada-ui/use-previous": "1.0.24",
+    "@yamada-ui/use-value": "1.1.32",
+    "@yamada-ui/utils": "1.6.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",

package/dist/chunk-BLQTNT3J.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"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-HVK4KBDF.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"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-VY47PFFY.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"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"]}