npm - @yamada-ui/skeleton - Versions diffs - 2.0.0-next-20240704080818 → 2.0.0-next-20240706053520 - Mend

@yamada-ui/skeleton 2.0.0-next-20240704080818 → 2.0.0-next-20240706053520

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 (17) hide show

package/dist/{chunk-46ABYNAS.mjs → chunk-H7JQCQJ7.mjs} +2 -2
package/dist/{chunk-7CRERVG5.mjs → chunk-VIMYWC5V.mjs} +3 -1
package/dist/{chunk-7CRERVG5.mjs.map → chunk-VIMYWC5V.mjs.map} +1 -1
package/dist/index.js +2 -0
package/dist/index.js.map +1 -1
package/dist/index.mjs +2 -2
package/dist/skeleton-circle.js +2 -0
package/dist/skeleton-circle.js.map +1 -1
package/dist/skeleton-circle.mjs +2 -2
package/dist/skeleton-text.js +2 -0
package/dist/skeleton-text.js.map +1 -1
package/dist/skeleton-text.mjs +2 -2
package/dist/skeleton.js +2 -0
package/dist/skeleton.js.map +1 -1
package/dist/skeleton.mjs +1 -1
package/package.json +6 -6
/package/dist/{chunk-46ABYNAS.mjs.map → chunk-H7JQCQJ7.mjs.map} +0 -0

package/dist/{chunk-46ABYNAS.mjs → chunk-H7JQCQJ7.mjs} RENAMED Viewed

@@ -1,7 +1,7 @@
 "use client"
 import {
   Skeleton
-} from "./chunk-7CRERVG5.mjs";
+} from "./chunk-VIMYWC5V.mjs";
 // src/skeleton-circle.tsx
 import { forwardRef as forwardRef2 } from "@yamada-ui/core";
@@ -98,4 +98,4 @@ export {
   SkeletonCircle,
   SkeletonText
 };
-//# sourceMappingURL=chunk-46ABYNAS.mjs.map
+//# sourceMappingURL=chunk-H7JQCQJ7.mjs.map

package/dist/{chunk-7CRERVG5.mjs → chunk-VIMYWC5V.mjs} RENAMED Viewed

@@ -73,6 +73,7 @@ var Skeleton = forwardRef((props, ref) => {
         className: cx("ui-skeleton", "ui-skeleton--loaded", className),
         ...rest,
         animation: animation2,
+        "aria-busy": "false",
         children: validChildren
       }
     );
@@ -85,6 +86,7 @@ var Skeleton = forwardRef((props, ref) => {
         __css: css,
         ...rest,
         animation,
+        "aria-busy": "true",
         children: validChildren
       }
     );
@@ -94,4 +96,4 @@ var Skeleton = forwardRef((props, ref) => {
 export {
   Skeleton
 };
-//# sourceMappingURL=chunk-7CRERVG5.mjs.map
+//# sourceMappingURL=chunk-VIMYWC5V.mjs.map

package/dist/{chunk-7CRERVG5.mjs.map → chunk-VIMYWC5V.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/skeleton.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ntype SkeletonOptions = {\n /*\n The color at the animation start.\n /\n startColor?: CSSUIProps[\"color\"]\n /\n The color at the animation end.\n /\n endColor?: CSSUIProps[\"color\"]\n /\n If `true`, it'll render its children with a nice fade transition.\n \n @default false\n /\n isLoaded?: boolean\n /\n The animation speed in seconds.\n \n @default 0.8\n /\n speed?: string \| number\n /\n The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n \n @default 0.4\n /\n fadeDuration?: string \| number\n /\n If `true`, the skeleton will take the width of it's children.\n \n @default false\n /\n isFitContent?: boolean\n}\n\nexport type SkeletonProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"Skeleton\"> &\n SkeletonOptions\n\n/\n `Skeleton` is a component that acts as a placeholder until content is loaded.\n \n @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n startColor,\n endColor,\n fadeDuration = 0.4,\n speed = 0.8,\n isLoaded,\n isFitContent,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const computedStartColor = useValue(startColor)\n const computedEndColor = useValue(endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n })\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n borderColor: computedStartColor,\n background: computedStartColor,\n },\n \"100%\": {\n borderColor: computedEndColor,\n background: computedEndColor,\n },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n direction: \"alternate\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n w: isFitContent ? \"fit-content\" : \"100%\",\n h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n ...styles,\n }\n\n if (isLoaded) {\n const animation = !isMounted() \|\| prevIsLoaded ? \"none\" : fadeIn\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n {...rest}\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n }\n})\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;AA4G7C;AA9DC,IAAM,WAAW,WAAiC,CAAC,OAAO,QAAQ;AACvE,QAAM,CAAC,QAAQ,WAAW,IAAI,kBAAkB,YAAY,KAAK;AACjE,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,eAAe,WAAW;AAC9B,QAAM,CAAC,SAAS,IAAI,aAAa;AACjC,QAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,QAAM,eAAe,YAAY,QAAQ;AACzC,QAAM,qBAAqB,SAAS,UAAU;AAC9C,QAAM,mBAAmB,SAAS,QAAQ;AAC1C,QAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,uDAAiB;AAEjB,QAAM,SAAS,aAAa;AAAA,IAC1B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,UACE,OAAO,iBAAiB,WAAW,eAAe,GAAG,YAAY;AAAA,EACrE,CAAC;AAED,QAAM,YAAY,aAAa;AAAA,IAC7B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,MACA,QAAQ;AAAA,QACN,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,UAAU,OAAO,UAAU,WAAW,QAAQ,GAAG,KAAK;AAAA,IACtD,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,MAAmB;AAAA,IACvB,GAAG,eAAe,gBAAgB;AAAA,IAClC,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,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;AAAA,~~QAEC~~;AAAA;AAAA,IACH;AAAA,EAEJ;AACF,CAAC;","names":["animation"]}
1	+ {"version":3,"sources":["../src/skeleton.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ntype SkeletonOptions = {\n /*\n The color at the animation start.\n /\n startColor?: CSSUIProps[\"color\"]\n /\n The color at the animation end.\n /\n endColor?: CSSUIProps[\"color\"]\n /\n If `true`, it'll render its children with a nice fade transition.\n \n @default false\n /\n isLoaded?: boolean\n /\n The animation speed in seconds.\n \n @default 0.8\n /\n speed?: string \| number\n /\n The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n \n @default 0.4\n /\n fadeDuration?: string \| number\n /\n If `true`, the skeleton will take the width of it's children.\n \n @default false\n /\n isFitContent?: boolean\n}\n\nexport type SkeletonProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"Skeleton\"> &\n SkeletonOptions\n\n/\n `Skeleton` is a component that acts as a placeholder until content is loaded.\n \n @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n startColor,\n endColor,\n fadeDuration = 0.4,\n speed = 0.8,\n isLoaded,\n isFitContent,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const computedStartColor = useValue(startColor)\n const computedEndColor = useValue(endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n })\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n borderColor: computedStartColor,\n background: computedStartColor,\n },\n \"100%\": {\n borderColor: computedEndColor,\n background: computedEndColor,\n },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n direction: \"alternate\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n w: isFitContent ? \"fit-content\" : \"100%\",\n h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n ...styles,\n }\n\n if (isLoaded) {\n const animation = !isMounted() \|\| prevIsLoaded ? \"none\" : fadeIn\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n {...rest}\n animation={animation}\n aria-busy=\"false\"\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n aria-busy=\"true\"\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n"],"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;AA4G7C;AA9DC,IAAM,WAAW,WAAiC,CAAC,OAAO,QAAQ;AACvE,QAAM,CAAC,QAAQ,WAAW,IAAI,kBAAkB,YAAY,KAAK;AACjE,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,eAAe,WAAW;AAC9B,QAAM,CAAC,SAAS,IAAI,aAAa;AACjC,QAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,QAAM,eAAe,YAAY,QAAQ;AACzC,QAAM,qBAAqB,SAAS,UAAU;AAC9C,QAAM,mBAAmB,SAAS,QAAQ;AAC1C,QAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,uDAAiB;AAEjB,QAAM,SAAS,aAAa;AAAA,IAC1B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,UACE,OAAO,iBAAiB,WAAW,eAAe,GAAG,YAAY;AAAA,EACrE,CAAC;AAED,QAAM,YAAY,aAAa;AAAA,IAC7B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,MACA,QAAQ;AAAA,QACN,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,UAAU,OAAO,UAAU,WAAW,QAAQ,GAAG,KAAK;AAAA,IACtD,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,MAAmB;AAAA,IACvB,GAAG,eAAe,gBAAgB;AAAA,IAClC,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,WAAWA;AAAA,QACX,aAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,SAAS;AAAA,QACtC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QACA,aAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,EAEJ;AACF,CAAC;","names":["animation"]}

package/dist/index.js CHANGED Viewed

@@ -95,6 +95,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
         className: (0, import_utils.cx)("ui-skeleton", "ui-skeleton--loaded", className),
         ...rest,
         animation: animation2,
+        "aria-busy": "false",
         children: validChildren
       }
     );
@@ -107,6 +108,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
         __css: css,
         ...rest,
         animation,
+        "aria-busy": "true",
         children: validChildren
       }
     );

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

@@ -2,10 +2,10 @@
 import {
   SkeletonCircle,
   SkeletonText
-} from "./chunk-46ABYNAS.mjs";
+} from "./chunk-H7JQCQJ7.mjs";
 import {
   Skeleton
-} from "./chunk-7CRERVG5.mjs";
+} from "./chunk-VIMYWC5V.mjs";
 export {
   Skeleton,
   SkeletonCircle,

package/dist/skeleton-circle.js CHANGED Viewed

@@ -95,6 +95,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
         className: (0, import_utils.cx)("ui-skeleton", "ui-skeleton--loaded", className),
         ...rest,
         animation: animation2,
+        "aria-busy": "false",
         children: validChildren
       }
     );
@@ -107,6 +108,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
         __css: css,
         ...rest,
         animation,
+        "aria-busy": "true",
         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 { forwardRef } from \"@yamada-ui/core\"\nimport { cx, getValidChildren } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./\"\nimport { Skeleton } from \"./\"\n\nexport type SkeletonCircleProps = SkeletonProps\n\nexport const SkeletonCircle = forwardRef<SkeletonCircleProps, \"div\">(\n (\n {\n className,\n boxSize = \"fallback(12, 3rem)\",\n children,\n isFitContent,\n ...rest\n },\n ref,\n ) => {\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n return (\n <Skeleton\n ref={ref}\n className={cx(\"ui-skeleton__circle\", className)}\n rounded=\"fallback(full, 9999px)\"\n isFitContent={isFitContent}\n {...(!isFitContent ? { boxSize } : {})}\n {...rest}\n >\n {validChildren}\n </Skeleton>\n )\n },\n)\n","import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ntype SkeletonOptions = {\n /*\n The color at the animation start.\n /\n startColor?: CSSUIProps[\"color\"]\n /\n The color at the animation end.\n /\n endColor?: CSSUIProps[\"color\"]\n /\n If `true`, it'll render its children with a nice fade transition.\n \n @default false\n /\n isLoaded?: boolean\n /\n The animation speed in seconds.\n \n @default 0.8\n /\n speed?: string \| number\n /\n The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n \n @default 0.4\n /\n fadeDuration?: string \| number\n /\n If `true`, the skeleton will take the width of it's children.\n \n @default false\n /\n isFitContent?: boolean\n}\n\nexport type SkeletonProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"Skeleton\"> &\n SkeletonOptions\n\n/\n `Skeleton` is a component that acts as a placeholder until content is loaded.\n \n @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n startColor,\n endColor,\n fadeDuration = 0.4,\n speed = 0.8,\n isLoaded,\n isFitContent,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const computedStartColor = useValue(startColor)\n const computedEndColor = useValue(endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n })\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n borderColor: computedStartColor,\n background: computedStartColor,\n },\n \"100%\": {\n borderColor: computedEndColor,\n background: computedEndColor,\n },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n direction: \"alternate\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n w: isFitContent ? \"fit-content\" : \"100%\",\n h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n ...styles,\n }\n\n if (isLoaded) {\n const animation = !isMounted() \|\| prevIsLoaded ? \"none\" : fadeIn\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n {...rest}\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,eAA2B;AAC3B,IAAAC,gBAAqC;;;ACKrC,kBAKO;AACP,2BAA6B;AAC7B,0BAA4B;AAC5B,uBAAyB;AACzB,mBAAmD;AA4G7C;AA9DC,IAAM,eAAW,wBAAiC,CAAC,OAAO,QAAQ;AACvE,QAAM,CAAC,QAAQ,WAAW,QAAI,+BAAkB,YAAY,KAAK;AACjE,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,4BAAe,WAAW;AAC9B,QAAM,CAAC,SAAS,QAAI,2BAAa;AACjC,QAAM,oBAAgB,+BAAiB,QAAQ;AAC/C,QAAM,mBAAe,iCAAY,QAAQ;AACzC,QAAM,yBAAqB,2BAAS,UAAU;AAC9C,QAAM,uBAAmB,2BAAS,QAAQ;AAC1C,QAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,uDAAiB;AAEjB,QAAM,aAAS,mCAAa;AAAA,IAC1B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,UACE,OAAO,iBAAiB,WAAW,eAAe,GAAG,YAAY;AAAA,EACrE,CAAC;AAED,QAAM,gBAAY,mCAAa;AAAA,IAC7B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,MACA,QAAQ;AAAA,QACN,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,UAAU,OAAO,UAAU,WAAW,QAAQ,GAAG,KAAK;AAAA,IACtD,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,MAAmB;AAAA,IACvB,GAAG,eAAe,gBAAgB;AAAA,IAClC,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,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;AAAA,~~QAEC~~;AAAA;AAAA,IACH;AAAA,EAEJ;AACF,CAAC;;;~~ADzHK~~,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,SAAQ;AAAA,QACR;AAAA,QACC,GAAI,CAAC,eAAe,EAAE,QAAQ,IAAI,CAAC;AAAA,QACnC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;","names":["import_core","import_utils","animation","import_jsx_runtime"]}
1	+ {"version":3,"sources":["../src/skeleton-circle.tsx","../src/skeleton.tsx"],"sourcesContent":["import { forwardRef } from \"@yamada-ui/core\"\nimport { cx, getValidChildren } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./\"\nimport { Skeleton } from \"./\"\n\nexport type SkeletonCircleProps = SkeletonProps\n\nexport const SkeletonCircle = forwardRef<SkeletonCircleProps, \"div\">(\n (\n {\n className,\n boxSize = \"fallback(12, 3rem)\",\n children,\n isFitContent,\n ...rest\n },\n ref,\n ) => {\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n return (\n <Skeleton\n ref={ref}\n className={cx(\"ui-skeleton__circle\", className)}\n rounded=\"fallback(full, 9999px)\"\n isFitContent={isFitContent}\n {...(!isFitContent ? { boxSize } : {})}\n {...rest}\n >\n {validChildren}\n </Skeleton>\n )\n },\n)\n","import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ntype SkeletonOptions = {\n /*\n The color at the animation start.\n /\n startColor?: CSSUIProps[\"color\"]\n /\n The color at the animation end.\n /\n endColor?: CSSUIProps[\"color\"]\n /\n If `true`, it'll render its children with a nice fade transition.\n \n @default false\n /\n isLoaded?: boolean\n /\n The animation speed in seconds.\n \n @default 0.8\n /\n speed?: string \| number\n /\n The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n \n @default 0.4\n /\n fadeDuration?: string \| number\n /\n If `true`, the skeleton will take the width of it's children.\n \n @default false\n /\n isFitContent?: boolean\n}\n\nexport type SkeletonProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"Skeleton\"> &\n SkeletonOptions\n\n/\n `Skeleton` is a component that acts as a placeholder until content is loaded.\n \n @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n startColor,\n endColor,\n fadeDuration = 0.4,\n speed = 0.8,\n isLoaded,\n isFitContent,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const computedStartColor = useValue(startColor)\n const computedEndColor = useValue(endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n })\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n borderColor: computedStartColor,\n background: computedStartColor,\n },\n \"100%\": {\n borderColor: computedEndColor,\n background: computedEndColor,\n },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n direction: \"alternate\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n w: isFitContent ? \"fit-content\" : \"100%\",\n h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n ...styles,\n }\n\n if (isLoaded) {\n const animation = !isMounted() \|\| prevIsLoaded ? \"none\" : fadeIn\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n {...rest}\n animation={animation}\n aria-busy=\"false\"\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n aria-busy=\"true\"\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,eAA2B;AAC3B,IAAAC,gBAAqC;;;ACKrC,kBAKO;AACP,2BAA6B;AAC7B,0BAA4B;AAC5B,uBAAyB;AACzB,mBAAmD;AA4G7C;AA9DC,IAAM,eAAW,wBAAiC,CAAC,OAAO,QAAQ;AACvE,QAAM,CAAC,QAAQ,WAAW,QAAI,+BAAkB,YAAY,KAAK;AACjE,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,4BAAe,WAAW;AAC9B,QAAM,CAAC,SAAS,QAAI,2BAAa;AACjC,QAAM,oBAAgB,+BAAiB,QAAQ;AAC/C,QAAM,mBAAe,iCAAY,QAAQ;AACzC,QAAM,yBAAqB,2BAAS,UAAU;AAC9C,QAAM,uBAAmB,2BAAS,QAAQ;AAC1C,QAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,uDAAiB;AAEjB,QAAM,aAAS,mCAAa;AAAA,IAC1B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,UACE,OAAO,iBAAiB,WAAW,eAAe,GAAG,YAAY;AAAA,EACrE,CAAC;AAED,QAAM,gBAAY,mCAAa;AAAA,IAC7B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,MACA,QAAQ;AAAA,QACN,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,UAAU,OAAO,UAAU,WAAW,QAAQ,GAAG,KAAK;AAAA,IACtD,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,MAAmB;AAAA,IACvB,GAAG,eAAe,gBAAgB;AAAA,IAClC,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,WAAWA;AAAA,QACX,aAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,eAAe,SAAS;AAAA,QACtC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QACA,aAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,EAEJ;AACF,CAAC;;;AD3HK,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,SAAQ;AAAA,QACR;AAAA,QACC,GAAI,CAAC,eAAe,EAAE,QAAQ,IAAI,CAAC;AAAA,QACnC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;","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-46ABYNAS.mjs";
-import "./chunk-7CRERVG5.mjs";
+} from "./chunk-H7JQCQJ7.mjs";
+import "./chunk-VIMYWC5V.mjs";
 export {
   SkeletonCircle
 };

package/dist/skeleton-text.js CHANGED Viewed

@@ -96,6 +96,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
         className: (0, import_utils.cx)("ui-skeleton", "ui-skeleton--loaded", className),
         ...rest,
         animation: animation2,
+        "aria-busy": "false",
         children: validChildren
       }
     );
@@ -108,6 +109,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
         __css: css,
         ...rest,
         animation,
+        "aria-busy": "true",
         children: validChildren
       }
     );

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/skeleton-text.tsx","../src/skeleton.tsx"],"sourcesContent":["import type { CSSUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./\"\nimport { Skeleton } from \"./\"\n\ntype 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 type SkeletonTextProps = Omit<SkeletonProps, \"isFitContent\"> &\n SkeletonTextOptions\n\nexport const SkeletonText = forwardRef<SkeletonTextProps, \"div\">(\n (\n {\n className,\n lineClamp = 3,\n startColor,\n endColor,\n fadeDuration,\n speed,\n isLoaded,\n gap = \"fallback(2, 0.5rem)\",\n textHeight = \"fallback(2, 0.5rem)\",\n children,\n ...rest\n },\n ref,\n ) => {\n const computedLineClamp = 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(computedLineClamp)\n .fill(0)\n .map((_, index) => {\n if (isLoaded && index > 0) return null\n\n const isLast = index + 1 === computedLineClamp\n\n const props: SkeletonProps = !isLoaded\n ? {\n mb: !isLast ? gap : undefined,\n w:\n computedLineClamp > 1 ? (!isLast ? \"100%\" : \"80%\") : \"100%\",\n h: textHeight,\n }\n : {}\n\n return (\n <Skeleton\n key={index}\n {...{\n startColor,\n endColor,\n fadeDuration,\n speed,\n isLoaded,\n ...props,\n }}\n >\n {index === 0 ? children : undefined}\n </Skeleton>\n )\n })}\n </ui.div>\n )\n },\n)\n","import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ntype SkeletonOptions = {\n /\n The color at the animation start.\n /\n startColor?: CSSUIProps[\"color\"]\n /\n The color at the animation end.\n /\n endColor?: CSSUIProps[\"color\"]\n /\n If `true`, it'll render its children with a nice fade transition.\n \n @default false\n /\n isLoaded?: boolean\n /\n The animation speed in seconds.\n \n @default 0.8\n /\n speed?: string \| number\n /\n The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n \n @default 0.4\n /\n fadeDuration?: string \| number\n /\n If `true`, the skeleton will take the width of it's children.\n \n @default false\n /\n isFitContent?: boolean\n}\n\nexport type SkeletonProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"Skeleton\"> &\n SkeletonOptions\n\n/\n `Skeleton` is a component that acts as a placeholder until content is loaded.\n \n @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n startColor,\n endColor,\n fadeDuration = 0.4,\n speed = 0.8,\n isLoaded,\n isFitContent,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const computedStartColor = useValue(startColor)\n const computedEndColor = useValue(endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n })\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n borderColor: computedStartColor,\n background: computedStartColor,\n },\n \"100%\": {\n borderColor: computedEndColor,\n background: computedEndColor,\n },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n direction: \"alternate\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n w: isFitContent ? \"fit-content\" : \"100%\",\n h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n ...styles,\n }\n\n if (isLoaded) {\n const animation = !isMounted() \|\| prevIsLoaded ? \"none\" : fadeIn\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n {...rest}\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,eAA+B;AAC/B,IAAAC,oBAAyB;AACzB,IAAAC,gBAAmB;;;ACGnB,kBAKO;AACP,2BAA6B;AAC7B,0BAA4B;AAC5B,uBAAyB;AACzB,mBAAmD;AA4G7C;AA9DC,IAAM,eAAW,wBAAiC,CAAC,OAAO,QAAQ;AACvE,QAAM,CAAC,QAAQ,WAAW,QAAI,+BAAkB,YAAY,KAAK;AACjE,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,4BAAe,WAAW;AAC9B,QAAM,CAAC,SAAS,QAAI,2BAAa;AACjC,QAAM,oBAAgB,+BAAiB,QAAQ;AAC/C,QAAM,mBAAe,iCAAY,QAAQ;AACzC,QAAM,yBAAqB,2BAAS,UAAU;AAC9C,QAAM,uBAAmB,2BAAS,QAAQ;AAC1C,QAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,uDAAiB;AAEjB,QAAM,aAAS,mCAAa;AAAA,IAC1B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,UACE,OAAO,iBAAiB,WAAW,eAAe,GAAG,YAAY;AAAA,EACrE,CAAC;AAED,QAAM,gBAAY,mCAAa;AAAA,IAC7B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,MACA,QAAQ;AAAA,QACN,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,UAAU,OAAO,UAAU,WAAW,QAAQ,GAAG,KAAK;AAAA,IACtD,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,MAAmB;AAAA,IACvB,GAAG,eAAe,gBAAgB;AAAA,IAClC,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,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;AAAA,~~QAEC~~;AAAA;AAAA,IACH;AAAA,EAEJ;AACF,CAAC;;;~~AD7Ea~~,IAAAC,sBAAA;AA/CP,IAAM,mBAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,wBAAoB,4BAAS,SAAS;AAE5C,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,iBAAiB,EACrB,KAAK,CAAC,EACN,IAAI,CAAC,GAAG,UAAU;AACjB,cAAI,YAAY,QAAQ,EAAG,QAAO;AAElC,gBAAM,SAAS,QAAQ,MAAM;AAE7B,gBAAM,QAAuB,CAAC,WAC1B;AAAA,YACE,IAAI,CAAC,SAAS,MAAM;AAAA,YACpB,GACE,oBAAoB,IAAK,CAAC,SAAS,SAAS,QAAS;AAAA,YACvD,GAAG;AAAA,UACL,IACA,CAAC;AAEL,iBACE;AAAA,YAAC;AAAA;AAAA,cAEE,GAAG;AAAA,gBACF;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,GAAG;AAAA,cACL;AAAA,cAEC,oBAAU,IAAI,WAAW;AAAA;AAAA,YAVrB;AAAA,UAWP;AAAA,QAEJ,CAAC;AAAA;AAAA,IACL;AAAA,EAEJ;AACF;","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 { CSSUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./\"\nimport { Skeleton } from \"./\"\n\ntype 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 type SkeletonTextProps = Omit<SkeletonProps, \"isFitContent\"> &\n SkeletonTextOptions\n\nexport const SkeletonText = forwardRef<SkeletonTextProps, \"div\">(\n (\n {\n className,\n lineClamp = 3,\n startColor,\n endColor,\n fadeDuration,\n speed,\n isLoaded,\n gap = \"fallback(2, 0.5rem)\",\n textHeight = \"fallback(2, 0.5rem)\",\n children,\n ...rest\n },\n ref,\n ) => {\n const computedLineClamp = 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(computedLineClamp)\n .fill(0)\n .map((_, index) => {\n if (isLoaded && index > 0) return null\n\n const isLast = index + 1 === computedLineClamp\n\n const props: SkeletonProps = !isLoaded\n ? {\n mb: !isLast ? gap : undefined,\n w:\n computedLineClamp > 1 ? (!isLast ? \"100%\" : \"80%\") : \"100%\",\n h: textHeight,\n }\n : {}\n\n return (\n <Skeleton\n key={index}\n {...{\n startColor,\n endColor,\n fadeDuration,\n speed,\n isLoaded,\n ...props,\n }}\n >\n {index === 0 ? children : undefined}\n </Skeleton>\n )\n })}\n </ui.div>\n )\n },\n)\n","import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ntype SkeletonOptions = {\n /\n The color at the animation start.\n /\n startColor?: CSSUIProps[\"color\"]\n /\n The color at the animation end.\n /\n endColor?: CSSUIProps[\"color\"]\n /\n If `true`, it'll render its children with a nice fade transition.\n \n @default false\n /\n isLoaded?: boolean\n /\n The animation speed in seconds.\n \n @default 0.8\n /\n speed?: string \| number\n /\n The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n \n @default 0.4\n /\n fadeDuration?: string \| number\n /\n If `true`, the skeleton will take the width of it's children.\n \n @default false\n /\n isFitContent?: boolean\n}\n\nexport type SkeletonProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"Skeleton\"> &\n SkeletonOptions\n\n/\n `Skeleton` is a component that acts as a placeholder until content is loaded.\n \n @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n startColor,\n endColor,\n fadeDuration = 0.4,\n speed = 0.8,\n isLoaded,\n isFitContent,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const computedStartColor = useValue(startColor)\n const computedEndColor = useValue(endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n })\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n borderColor: computedStartColor,\n background: computedStartColor,\n },\n \"100%\": {\n borderColor: computedEndColor,\n background: computedEndColor,\n },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n direction: \"alternate\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n w: isFitContent ? \"fit-content\" : \"100%\",\n h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n ...styles,\n }\n\n if (isLoaded) {\n const animation = !isMounted() \|\| prevIsLoaded ? \"none\" : fadeIn\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n {...rest}\n animation={animation}\n aria-busy=\"false\"\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n aria-busy=\"true\"\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n"],"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-46ABYNAS.mjs";
-import "./chunk-7CRERVG5.mjs";
+} from "./chunk-H7JQCQJ7.mjs";
+import "./chunk-VIMYWC5V.mjs";
 export {
   SkeletonText
 };

package/dist/skeleton.js CHANGED Viewed

@@ -91,6 +91,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
         className: (0, import_utils.cx)("ui-skeleton", "ui-skeleton--loaded", className),
         ...rest,
         animation: animation2,
+        "aria-busy": "false",
         children: validChildren
       }
     );
@@ -103,6 +104,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
         __css: css,
         ...rest,
         animation,
+        "aria-busy": "true",
         children: validChildren
       }
     );

package/dist/skeleton.js.map CHANGED Viewed

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

package/dist/skeleton.mjs CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/skeleton",
-  "version": "2.0.0-next-20240704080818",
+  "version": "2.0.0-next-20240706053520",
   "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.9.1-next-20240704080818",
-    "@yamada-ui/use-animation": "1.0.31-next-20240704080818",
-    "@yamada-ui/use-value": "1.1.19-next-20240704080818",
-    "@yamada-ui/use-previous": "1.0.16-next-20240704080818",
-    "@yamada-ui/utils": "1.3.1-next-20240704080818"
+    "@yamada-ui/core": "1.9.1",
+    "@yamada-ui/use-animation": "1.0.31",
+    "@yamada-ui/use-value": "1.1.19",
+    "@yamada-ui/use-previous": "1.0.16",
+    "@yamada-ui/utils": "1.3.1"
   },
   "devDependencies": {
     "react": "^18.0.0",

/package/dist/{chunk-46ABYNAS.mjs.map → chunk-H7JQCQJ7.mjs.map} RENAMED Viewed

File without changes