@yamada-ui/skeleton 1.1.7-dev-20241007025246 → 1.1.7-dev-20241007155115

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 (19) hide show
  1. package/dist/{chunk-2VWCGHQT.mjs → chunk-BLQTNT3J.mjs} +2 -2
  2. package/dist/{chunk-LA6A6MQE.mjs → chunk-HVK4KBDF.mjs} +2 -2
  3. package/dist/{chunk-ENL256G4.mjs → chunk-VY47PFFY.mjs} +3 -3
  4. package/dist/{chunk-ENL256G4.mjs.map → chunk-VY47PFFY.mjs.map} +1 -1
  5. package/dist/index.js +2 -2
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +3 -3
  8. package/dist/skeleton-circle.js +2 -2
  9. package/dist/skeleton-circle.js.map +1 -1
  10. package/dist/skeleton-circle.mjs +2 -2
  11. package/dist/skeleton-text.js +2 -2
  12. package/dist/skeleton-text.js.map +1 -1
  13. package/dist/skeleton-text.mjs +2 -2
  14. package/dist/skeleton.js +2 -2
  15. package/dist/skeleton.js.map +1 -1
  16. package/dist/skeleton.mjs +1 -1
  17. package/package.json +6 -6
  18. /package/dist/{chunk-2VWCGHQT.mjs.map → chunk-BLQTNT3J.mjs.map} +0 -0
  19. /package/dist/{chunk-LA6A6MQE.mjs.map → chunk-HVK4KBDF.mjs.map} +0 -0
package/dist/{chunk-2VWCGHQT.mjs → chunk-BLQTNT3J.mjs} RENAMED
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  Skeleton
4
- } from "./chunk-ENL256G4.mjs";
4
+ } from "./chunk-VY47PFFY.mjs";
5
5
 
6
6
  // src/skeleton-circle.tsx
7
7
  import { forwardRef } from "@yamada-ui/core";
@@ -38,4 +38,4 @@ SkeletonCircle.__ui__ = "SkeletonCircle";
38
38
  export {
39
39
  SkeletonCircle
40
40
  };
41
- //# sourceMappingURL=chunk-2VWCGHQT.mjs.map
41
+ //# sourceMappingURL=chunk-BLQTNT3J.mjs.map
package/dist/{chunk-LA6A6MQE.mjs → chunk-HVK4KBDF.mjs} RENAMED
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  Skeleton
4
- } from "./chunk-ENL256G4.mjs";
4
+ } from "./chunk-VY47PFFY.mjs";
5
5
 
6
6
  // src/skeleton-text.tsx
7
7
  import { forwardRef, ui } from "@yamada-ui/core";
@@ -67,4 +67,4 @@ SkeletonText.__ui__ = "SkeletonText";
67
67
  export {
68
68
  SkeletonText
69
69
  };
70
- //# sourceMappingURL=chunk-LA6A6MQE.mjs.map
70
+ //# sourceMappingURL=chunk-HVK4KBDF.mjs.map
package/dist/{chunk-ENL256G4.mjs → chunk-VY47PFFY.mjs} RENAMED
@@ -82,8 +82,8 @@ var Skeleton = forwardRef((props, ref) => {
82
82
  ref,
83
83
  className: cx("ui-skeleton", "ui-skeleton--loaded", className),
84
84
  ...rest,
85
- animation: animation2,
86
85
  "aria-busy": "false",
86
+ animation: animation2,
87
87
  children: validChildren
88
88
  }
89
89
  );
@@ -95,8 +95,8 @@ var Skeleton = forwardRef((props, ref) => {
95
95
  className: cx("ui-skeleton", className),
96
96
  __css: css,
97
97
  ...rest,
98
- animation,
99
98
  "aria-busy": "true",
99
+ animation,
100
100
  children: validChildren
101
101
  }
102
102
  );
@@ -108,4 +108,4 @@ Skeleton.__ui__ = "Skeleton";
108
108
  export {
109
109
  Skeleton
110
110
  };
111
- //# sourceMappingURL=chunk-ENL256G4.mjs.map
111
+ //# sourceMappingURL=chunk-VY47PFFY.mjs.map
package/dist/{chunk-ENL256G4.mjs.map → chunk-VY47PFFY.mjs.map} RENAMED
@@ -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 animation={animation}\n aria-busy=\"false\"\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n aria-busy=\"true\"\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n"],"mappings":";;;AAMA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,IAAI,kBAAkB,oBAAoB;AAuH7C;AAxEC,IAAM,WAAW,WAAiC,CAAC,OAAO,QAAQ;AACvE,QAAM,CAAC,QAAQ,WAAW,IAAI,kBAAkB,YAAY,KAAK;AACjE,MAAI;AAAA,IACF;AAAA,IACA;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,WAAWA;AAAA,QACX,aAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,SAAS;AAAA,QACtC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QACA,aAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,EAEJ;AACF,CAAC;AAED,SAAS,cAAc;AACvB,SAAS,SAAS;","names":["animation"]}
1
+ {"version":3,"sources":["../src/skeleton.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n CSSUIProps,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ninterface SkeletonOptions {\n /**\n * The color at the animation end.\n */\n endColor?: CSSUIProps[\"color\"]\n /**\n * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n *\n * @default 0.4\n */\n fadeDuration?: number | string\n /**\n * If `true`, the skeleton will take the width of it's children.\n *\n * @default false\n */\n isFitContent?: boolean\n /**\n * If `true`, it'll render its children with a nice fade transition.\n *\n * @default false\n */\n isLoaded?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default 0.8\n */\n speed?: number | string\n /**\n * The color at the animation start.\n */\n startColor?: CSSUIProps[\"color\"]\n}\n\nexport interface SkeletonProps\n extends HTMLUIProps,\n ThemeProps<\"Skeleton\">,\n SkeletonOptions {}\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n children,\n endColor: _endColor,\n fadeDuration = 0.4,\n isFitContent,\n isLoaded,\n speed = 0.8,\n startColor: _startColor,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const startColor = useValue(_startColor)\n const endColor = useValue(_endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n })\n\n const animation = useAnimation({\n direction: \"alternate\",\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n keyframes: {\n \"0%\": {\n background: startColor,\n borderColor: startColor,\n },\n \"100%\": {\n background: endColor,\n borderColor: endColor,\n },\n },\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n \"&::before, &::after, *\": {\n visibility: \"hidden\",\n },\n backgroundClip: \"padding-box\",\n boxShadow: \"none\",\n color: \"transparent\",\n cursor: \"default\",\n h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n maxW: \"100%\",\n pointerEvents: \"none\",\n userSelect: \"none\",\n w: isFitContent ? \"fit-content\" : \"100%\",\n ...styles,\n }\n\n if (isLoaded) {\n const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n {...rest}\n aria-busy=\"false\"\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n aria-busy=\"true\"\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n"],"mappings":";;;AAMA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,IAAI,kBAAkB,oBAAoB;AAuH7C;AAxEC,IAAM,WAAW,WAAiC,CAAC,OAAO,QAAQ;AACvE,QAAM,CAAC,QAAQ,WAAW,IAAI,kBAAkB,YAAY,KAAK;AACjE,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,IAAI,eAAe,WAAW;AAC9B,QAAM,CAAC,SAAS,IAAI,aAAa;AACjC,QAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,QAAM,eAAe,YAAY,QAAQ;AACzC,QAAM,aAAa,SAAS,WAAW;AACvC,QAAM,WAAW,SAAS,SAAS;AACnC,QAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,uDAAiB;AAEjB,QAAM,SAAS,aAAa;AAAA,IAC1B,UACE,OAAO,iBAAiB,WAAW,eAAe,GAAG,YAAY;AAAA,IACnE,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF,CAAC;AAED,QAAM,YAAY,aAAa;AAAA,IAC7B,WAAW;AAAA,IACX,UAAU,OAAO,UAAU,WAAW,QAAQ,GAAG,KAAK;AAAA,IACtD,gBAAgB;AAAA,IAChB,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,aAAa;AAAA,MACf;AAAA,MACA,QAAQ;AAAA,QACN,YAAY;AAAA,QACZ,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,MAAmB;AAAA,IACvB,0BAA0B;AAAA,MACxB,YAAY;AAAA,IACd;AAAA,IACA,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,GAAG,eAAe,gBAAgB;AAAA,IAClC,MAAM;AAAA,IACN,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,GAAG,eAAe,gBAAgB;AAAA,IAClC,GAAG;AAAA,EACL;AAEA,MAAI,UAAU;AACZ,UAAMA,aAAY,CAAC,UAAU,KAAK,eAAe,SAAS;AAE1D,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,uBAAuB,SAAS;AAAA,QAC5D,GAAG;AAAA,QACJ,aAAU;AAAA,QACV,WAAWA;AAAA,QAEV;AAAA;AAAA,IACH;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,SAAS;AAAA,QACtC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,aAAU;AAAA,QACV;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF,CAAC;AAED,SAAS,cAAc;AACvB,SAAS,SAAS;","names":["animation"]}
package/dist/index.js CHANGED
@@ -104,8 +104,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
104
104
  ref,
105
105
  className: (0, import_utils.cx)("ui-skeleton", "ui-skeleton--loaded", className),
106
106
  ...rest,
107
- animation: animation2,
108
107
  "aria-busy": "false",
108
+ animation: animation2,
109
109
  children: validChildren
110
110
  }
111
111
  );
@@ -117,8 +117,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
117
117
  className: (0, import_utils.cx)("ui-skeleton", className),
118
118
  __css: css,
119
119
  ...rest,
120
- animation,
121
120
  "aria-busy": "true",
121
+ animation,
122
122
  children: validChildren
123
123
  }
124
124
  );
package/dist/index.js.map CHANGED
@@ -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 animation={animation}\n aria-busy=\"false\"\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n aria-busy=\"true\"\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n","import 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 isFitContent?: boolean\n /**\n * If `true`, it'll render its children with a nice fade transition.\n *\n * @default false\n */\n isLoaded?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default 0.8\n */\n speed?: number | string\n /**\n * The color at the animation start.\n */\n startColor?: CSSUIProps[\"color\"]\n}\n\nexport interface SkeletonProps\n extends HTMLUIProps,\n ThemeProps<\"Skeleton\">,\n SkeletonOptions {}\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n children,\n endColor: _endColor,\n fadeDuration = 0.4,\n isFitContent,\n isLoaded,\n speed = 0.8,\n startColor: _startColor,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const startColor = useValue(_startColor)\n const endColor = useValue(_endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n })\n\n const animation = useAnimation({\n direction: \"alternate\",\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n keyframes: {\n \"0%\": {\n background: startColor,\n borderColor: startColor,\n },\n \"100%\": {\n background: endColor,\n borderColor: endColor,\n },\n },\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n \"&::before, &::after, *\": {\n visibility: \"hidden\",\n },\n backgroundClip: \"padding-box\",\n boxShadow: \"none\",\n color: \"transparent\",\n cursor: \"default\",\n h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n maxW: \"100%\",\n pointerEvents: \"none\",\n userSelect: \"none\",\n w: isFitContent ? \"fit-content\" : \"100%\",\n ...styles,\n }\n\n if (isLoaded) {\n const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n {...rest}\n aria-busy=\"false\"\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n aria-busy=\"true\"\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n","import type { SkeletonProps } from \"./skeleton\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { cx, getValidChildren } from \"@yamada-ui/utils\"\nimport { Skeleton } from \"./skeleton\"\n\nexport interface SkeletonCircleProps extends SkeletonProps {}\n\nexport const SkeletonCircle = forwardRef<SkeletonCircleProps, \"div\">(\n (\n {\n className,\n boxSize = \"fallback(12, 3rem)\",\n children,\n isFitContent,\n ...rest\n },\n ref,\n ) => {\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n return (\n <Skeleton\n ref={ref}\n className={cx(\"ui-skeleton__circle\", className)}\n isFitContent={isFitContent}\n rounded=\"fallback(full, 9999px)\"\n {...(!isFitContent ? { boxSize } : {})}\n {...rest}\n >\n {validChildren}\n </Skeleton>\n )\n },\n)\n\nSkeletonCircle.displayName = \"SkeletonCircle\"\nSkeletonCircle.__ui__ = \"SkeletonCircle\"\n","import type { CSSUIObject, CSSUIProps } from \"@yamada-ui/core\"\nimport type { SkeletonProps } from \"./skeleton\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { Skeleton } from \"./skeleton\"\n\ninterface SkeletonTextOptions {\n /**\n * The CSS `gap` property.\n */\n gap?: CSSUIProps[\"gap\"]\n /**\n * The CSS `height` property.\n */\n textHeight?: CSSUIProps[\"height\"]\n}\n\nexport interface SkeletonTextProps\n extends Omit<SkeletonProps, \"isFitContent\">,\n SkeletonTextOptions {}\n\nexport const SkeletonText = forwardRef<SkeletonTextProps, \"div\">(\n (\n {\n className,\n children,\n endColor,\n fadeDuration,\n gap = \"fallback(2, 0.5rem)\",\n isLoaded,\n lineClamp: _lineClamp = 3,\n speed,\n startColor,\n textHeight = \"fallback(2, 0.5rem)\",\n ...rest\n },\n ref,\n ) => {\n const lineClamp = useValue(_lineClamp)\n\n const css: CSSUIObject = {\n w: \"100%\",\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton__text\", className)}\n __css={css}\n {...rest}\n >\n {Array(lineClamp)\n .fill(0)\n .map((_, index) => {\n if (isLoaded && index > 0) return null\n\n const isLast = index + 1 === lineClamp\n\n const props: SkeletonProps = !isLoaded\n ? {\n h: textHeight,\n mb: !isLast ? gap : undefined,\n w: lineClamp > 1 ? (!isLast ? \"100%\" : \"80%\") : \"100%\",\n }\n : {}\n\n return (\n <Skeleton\n key={index}\n {...{\n endColor,\n fadeDuration,\n isLoaded,\n speed,\n startColor,\n ...props,\n }}\n >\n {index === 0 ? children : undefined}\n </Skeleton>\n )\n })}\n </ui.div>\n )\n },\n)\n\nSkeletonText.displayName = \"SkeletonText\"\nSkeletonText.__ui__ = \"SkeletonText\"\n"],"mappings":"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","names":["animation","import_core","import_utils","import_jsx_runtime","import_core","import_use_value","import_utils","import_jsx_runtime"]}
package/dist/index.mjs CHANGED
@@ -1,13 +1,13 @@
1
1
  "use client"
2
2
  import {
3
3
  SkeletonCircle
4
- } from "./chunk-2VWCGHQT.mjs";
4
+ } from "./chunk-BLQTNT3J.mjs";
5
5
  import {
6
6
  SkeletonText
7
- } from "./chunk-LA6A6MQE.mjs";
7
+ } from "./chunk-HVK4KBDF.mjs";
8
8
  import {
9
9
  Skeleton
10
- } from "./chunk-ENL256G4.mjs";
10
+ } from "./chunk-VY47PFFY.mjs";
11
11
  export {
12
12
  Skeleton,
13
13
  SkeletonCircle,
package/dist/skeleton-circle.js CHANGED
@@ -104,8 +104,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
104
104
  ref,
105
105
  className: (0, import_utils.cx)("ui-skeleton", "ui-skeleton--loaded", className),
106
106
  ...rest,
107
- animation: animation2,
108
107
  "aria-busy": "false",
108
+ animation: animation2,
109
109
  children: validChildren
110
110
  }
111
111
  );
@@ -117,8 +117,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
117
117
  className: (0, import_utils.cx)("ui-skeleton", className),
118
118
  __css: css,
119
119
  ...rest,
120
- animation,
121
120
  "aria-busy": "true",
121
+ animation,
122
122
  children: validChildren
123
123
  }
124
124
  );
package/dist/skeleton-circle.js.map CHANGED
@@ -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 animation={animation}\n aria-busy=\"false\"\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n aria-busy=\"true\"\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n"],"mappings":"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","names":["import_core","import_utils","animation","import_jsx_runtime"]}
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":"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","names":["import_core","import_utils","animation","import_jsx_runtime"]}
package/dist/skeleton-circle.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  "use client"
2
2
  import {
3
3
  SkeletonCircle
4
- } from "./chunk-2VWCGHQT.mjs";
5
- import "./chunk-ENL256G4.mjs";
4
+ } from "./chunk-BLQTNT3J.mjs";
5
+ import "./chunk-VY47PFFY.mjs";
6
6
  export {
7
7
  SkeletonCircle
8
8
  };
package/dist/skeleton-text.js CHANGED
@@ -105,8 +105,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
105
105
  ref,
106
106
  className: (0, import_utils.cx)("ui-skeleton", "ui-skeleton--loaded", className),
107
107
  ...rest,
108
- animation: animation2,
109
108
  "aria-busy": "false",
109
+ animation: animation2,
110
110
  children: validChildren
111
111
  }
112
112
  );
@@ -118,8 +118,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
118
118
  className: (0, import_utils.cx)("ui-skeleton", className),
119
119
  __css: css,
120
120
  ...rest,
121
- animation,
122
121
  "aria-busy": "true",
122
+ animation,
123
123
  children: validChildren
124
124
  }
125
125
  );
package/dist/skeleton-text.js.map CHANGED
@@ -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 animation={animation}\n aria-busy=\"false\"\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n aria-busy=\"true\"\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n"],"mappings":"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","names":["import_core","import_use_value","import_utils","animation","import_jsx_runtime"]}
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":"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","names":["import_core","import_use_value","import_utils","animation","import_jsx_runtime"]}
package/dist/skeleton-text.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  "use client"
2
2
  import {
3
3
  SkeletonText
4
- } from "./chunk-LA6A6MQE.mjs";
5
- import "./chunk-ENL256G4.mjs";
4
+ } from "./chunk-HVK4KBDF.mjs";
5
+ import "./chunk-VY47PFFY.mjs";
6
6
  export {
7
7
  SkeletonText
8
8
  };
package/dist/skeleton.js CHANGED
@@ -100,8 +100,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
100
100
  ref,
101
101
  className: (0, import_utils.cx)("ui-skeleton", "ui-skeleton--loaded", className),
102
102
  ...rest,
103
- animation: animation2,
104
103
  "aria-busy": "false",
104
+ animation: animation2,
105
105
  children: validChildren
106
106
  }
107
107
  );
@@ -113,8 +113,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
113
113
  className: (0, import_utils.cx)("ui-skeleton", className),
114
114
  __css: css,
115
115
  ...rest,
116
- animation,
117
116
  "aria-busy": "true",
117
+ animation,
118
118
  children: validChildren
119
119
  }
120
120
  );
package/dist/skeleton.js.map CHANGED
@@ -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 animation={animation}\n aria-busy=\"false\"\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n aria-busy=\"true\"\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,kBAKO;AACP,2BAA6B;AAC7B,0BAA4B;AAC5B,uBAAyB;AACzB,mBAAmD;AAuH7C;AAxEC,IAAM,eAAW,wBAAiC,CAAC,OAAO,QAAQ;AACvE,QAAM,CAAC,QAAQ,WAAW,QAAI,+BAAkB,YAAY,KAAK;AACjE,MAAI;AAAA,IACF;AAAA,IACA;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,WAAWA;AAAA,QACX,aAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,eAAe,SAAS;AAAA,QACtC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QACA,aAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,EAEJ;AACF,CAAC;AAED,SAAS,cAAc;AACvB,SAAS,SAAS;","names":["animation"]}
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"]}
package/dist/skeleton.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  Skeleton
4
- } from "./chunk-ENL256G4.mjs";
4
+ } from "./chunk-VY47PFFY.mjs";
5
5
  export {
6
6
  Skeleton
7
7
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/skeleton",
3
- "version": "1.1.7-dev-20241007025246",
3
+ "version": "1.1.7-dev-20241007155115",
4
4
  "description": "Yamada UI skeleton component",
5
5
  "keywords": [
6
6
  "yamada",
@@ -36,11 +36,11 @@
36
36
  "url": "https://github.com/yamada-ui/yamada-ui/issues"
37
37
  },
38
38
  "dependencies": {
39
- "@yamada-ui/core": "1.15.2-dev-20241007025246",
40
- "@yamada-ui/use-animation": "1.0.39-dev-20241007025246",
41
- "@yamada-ui/use-previous": "1.0.22-dev-20241007025246",
42
- "@yamada-ui/use-value": "1.1.27-dev-20241007025246",
43
- "@yamada-ui/utils": "1.5.3-dev-20241007025246"
39
+ "@yamada-ui/core": "1.15.2-dev-20241007155115",
40
+ "@yamada-ui/use-animation": "1.0.39-dev-20241007155115",
41
+ "@yamada-ui/use-previous": "1.0.22-dev-20241007155115",
42
+ "@yamada-ui/use-value": "1.1.27-dev-20241007155115",
43
+ "@yamada-ui/utils": "1.5.3-dev-20241007155115"
44
44
  },
45
45
  "devDependencies": {
46
46
  "clean-package": "2.2.0",