@yamada-ui/skeleton 1.1.7-dev-20241005224505 → 1.1.7-dev-20241006032009

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 (23) hide show
  1. package/dist/{chunk-22DLXLXV.mjs → chunk-2VWCGHQT.mjs} +3 -3
  2. package/dist/{chunk-22DLXLXV.mjs.map → chunk-2VWCGHQT.mjs.map} +1 -1
  3. package/dist/{chunk-BWLL2ZTF.mjs → chunk-ENL256G4.mjs} +23 -23
  4. package/dist/chunk-ENL256G4.mjs.map +1 -0
  5. package/dist/{chunk-2U4SAIJD.mjs → chunk-LA6A6MQE.mjs} +12 -12
  6. package/dist/chunk-LA6A6MQE.mjs.map +1 -0
  7. package/dist/index.js +31 -31
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.mjs +3 -3
  10. package/dist/skeleton-circle.js +22 -22
  11. package/dist/skeleton-circle.js.map +1 -1
  12. package/dist/skeleton-circle.mjs +2 -2
  13. package/dist/skeleton-text.js +30 -30
  14. package/dist/skeleton-text.js.map +1 -1
  15. package/dist/skeleton-text.mjs +2 -2
  16. package/dist/skeleton.d.mts +15 -15
  17. package/dist/skeleton.d.ts +15 -15
  18. package/dist/skeleton.js +21 -21
  19. package/dist/skeleton.js.map +1 -1
  20. package/dist/skeleton.mjs +1 -1
  21. package/package.json +6 -6
  22. package/dist/chunk-2U4SAIJD.mjs.map +0 -1
  23. package/dist/chunk-BWLL2ZTF.mjs.map +0 -1
package/dist/{chunk-22DLXLXV.mjs → chunk-2VWCGHQT.mjs} RENAMED
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  Skeleton
4
- } from "./chunk-BWLL2ZTF.mjs";
4
+ } from "./chunk-ENL256G4.mjs";
5
5
 
6
6
  // src/skeleton-circle.tsx
7
7
  import { forwardRef } from "@yamada-ui/core";
@@ -23,8 +23,8 @@ var SkeletonCircle = forwardRef(
23
23
  {
24
24
  ref,
25
25
  className: cx("ui-skeleton__circle", className),
26
- rounded: "fallback(full, 9999px)",
27
26
  isFitContent,
27
+ rounded: "fallback(full, 9999px)",
28
28
  ...!isFitContent ? { boxSize } : {},
29
29
  ...rest,
30
30
  children: validChildren
@@ -38,4 +38,4 @@ SkeletonCircle.__ui__ = "SkeletonCircle";
38
38
  export {
39
39
  SkeletonCircle
40
40
  };
41
- //# sourceMappingURL=chunk-22DLXLXV.mjs.map
41
+ //# sourceMappingURL=chunk-2VWCGHQT.mjs.map
package/dist/{chunk-22DLXLXV.mjs.map → chunk-2VWCGHQT.mjs.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/skeleton-circle.tsx"],"sourcesContent":["import { forwardRef } from \"@yamada-ui/core\"\nimport { cx, getValidChildren } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./skeleton\"\nimport { Skeleton } from \"./skeleton\"\n\nexport interface SkeletonCircleProps extends SkeletonProps {}\n\nexport const SkeletonCircle = forwardRef<SkeletonCircleProps, \"div\">(\n (\n {\n className,\n boxSize = \"fallback(12, 3rem)\",\n children,\n isFitContent,\n ...rest\n },\n ref,\n ) => {\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n return (\n <Skeleton\n ref={ref}\n className={cx(\"ui-skeleton__circle\", className)}\n rounded=\"fallback(full, 9999px)\"\n isFitContent={isFitContent}\n {...(!isFitContent ? { boxSize } : {})}\n {...rest}\n >\n {validChildren}\n </Skeleton>\n )\n },\n)\n\nSkeletonCircle.displayName = \"SkeletonCircle\"\nSkeletonCircle.__ui__ = \"SkeletonCircle\"\n"],"mappings":";;;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,IAAI,wBAAwB;AAuB/B;AAjBC,IAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,UAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,yDAAiB;AAEjB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,uBAAuB,SAAS;AAAA,QAC9C,SAAQ;AAAA,QACR;AAAA,QACC,GAAI,CAAC,eAAe,EAAE,QAAQ,IAAI,CAAC;AAAA,QACnC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;","names":[]}
1
+ {"version":3,"sources":["../src/skeleton-circle.tsx"],"sourcesContent":["import type { SkeletonProps } from \"./skeleton\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { cx, getValidChildren } from \"@yamada-ui/utils\"\nimport { Skeleton } from \"./skeleton\"\n\nexport interface SkeletonCircleProps extends SkeletonProps {}\n\nexport const SkeletonCircle = forwardRef<SkeletonCircleProps, \"div\">(\n (\n {\n className,\n boxSize = \"fallback(12, 3rem)\",\n children,\n isFitContent,\n ...rest\n },\n ref,\n ) => {\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n return (\n <Skeleton\n ref={ref}\n className={cx(\"ui-skeleton__circle\", className)}\n isFitContent={isFitContent}\n rounded=\"fallback(full, 9999px)\"\n {...(!isFitContent ? { boxSize } : {})}\n {...rest}\n >\n {validChildren}\n </Skeleton>\n )\n },\n)\n\nSkeletonCircle.displayName = \"SkeletonCircle\"\nSkeletonCircle.__ui__ = \"SkeletonCircle\"\n"],"mappings":";;;;;;AACA,SAAS,kBAAkB;AAC3B,SAAS,IAAI,wBAAwB;AAsB/B;AAjBC,IAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,UAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,yDAAiB;AAEjB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,uBAAuB,SAAS;AAAA,QAC9C;AAAA,QACA,SAAQ;AAAA,QACP,GAAI,CAAC,eAAe,EAAE,QAAQ,IAAI,CAAC;AAAA,QACnC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;","names":[]}
package/dist/{chunk-BWLL2ZTF.mjs → chunk-ENL256G4.mjs} RENAMED
@@ -2,9 +2,9 @@
2
2
 
3
3
  // src/skeleton.tsx
4
4
  import {
5
- ui,
6
5
  forwardRef,
7
6
  omitThemeProps,
7
+ ui,
8
8
  useComponentStyle
9
9
  } from "@yamada-ui/core";
10
10
  import { useAnimation } from "@yamada-ui/use-animation";
@@ -16,13 +16,13 @@ var Skeleton = forwardRef((props, ref) => {
16
16
  const [styles, mergedProps] = useComponentStyle("Skeleton", props);
17
17
  let {
18
18
  className,
19
- startColor: _startColor,
19
+ children,
20
20
  endColor: _endColor,
21
21
  fadeDuration = 0.4,
22
- speed = 0.8,
23
- isLoaded,
24
22
  isFitContent,
25
- children,
23
+ isLoaded,
24
+ speed = 0.8,
25
+ startColor: _startColor,
26
26
  ...rest
27
27
  } = omitThemeProps(mergedProps);
28
28
  const [isMounted] = useIsMounted();
@@ -33,6 +33,7 @@ var Skeleton = forwardRef((props, ref) => {
33
33
  const hasChildren = !!validChildren.length;
34
34
  isFitContent != null ? isFitContent : isFitContent = hasChildren;
35
35
  const fadeIn = useAnimation({
36
+ duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`,
36
37
  keyframes: {
37
38
  "0%": {
38
39
  opacity: 0
@@ -40,38 +41,37 @@ var Skeleton = forwardRef((props, ref) => {
40
41
  "100%": {
41
42
  opacity: 1
42
43
  }
43
- },
44
- duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`
44
+ }
45
45
  });
46
46
  const animation = useAnimation({
47
+ direction: "alternate",
48
+ duration: typeof speed === "string" ? speed : `${speed}s`,
49
+ iterationCount: "infinite",
47
50
  keyframes: {
48
51
  "0%": {
49
- borderColor: startColor,
50
- background: startColor
52
+ background: startColor,
53
+ borderColor: startColor
51
54
  },
52
55
  "100%": {
53
- borderColor: endColor,
54
- background: endColor
56
+ background: endColor,
57
+ borderColor: endColor
55
58
  }
56
59
  },
57
- duration: typeof speed === "string" ? speed : `${speed}s`,
58
- iterationCount: "infinite",
59
- direction: "alternate",
60
60
  timingFunction: "linear"
61
61
  });
62
62
  const css = {
63
- w: isFitContent ? "fit-content" : "100%",
64
- maxW: "100%",
65
- h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
66
- boxShadow: "none",
63
+ "&::before, &::after, *": {
64
+ visibility: "hidden"
65
+ },
67
66
  backgroundClip: "padding-box",
68
- cursor: "default",
67
+ boxShadow: "none",
69
68
  color: "transparent",
69
+ cursor: "default",
70
+ h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
71
+ maxW: "100%",
70
72
  pointerEvents: "none",
71
73
  userSelect: "none",
72
- "&::before, &::after, *": {
73
- visibility: "hidden"
74
- },
74
+ w: isFitContent ? "fit-content" : "100%",
75
75
  ...styles
76
76
  };
77
77
  if (isLoaded) {
@@ -108,4 +108,4 @@ Skeleton.__ui__ = "Skeleton";
108
108
  export {
109
109
  Skeleton
110
110
  };
111
- //# sourceMappingURL=chunk-BWLL2ZTF.mjs.map
111
+ //# sourceMappingURL=chunk-ENL256G4.mjs.map
package/dist/chunk-ENL256G4.mjs.map ADDED
@@ -0,0 +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"]}
package/dist/{chunk-2U4SAIJD.mjs → chunk-LA6A6MQE.mjs} RENAMED
@@ -1,25 +1,25 @@
1
1
  "use client"
2
2
  import {
3
3
  Skeleton
4
- } from "./chunk-BWLL2ZTF.mjs";
4
+ } from "./chunk-ENL256G4.mjs";
5
5
 
6
6
  // src/skeleton-text.tsx
7
- import { ui, forwardRef } from "@yamada-ui/core";
7
+ import { forwardRef, ui } from "@yamada-ui/core";
8
8
  import { useValue } from "@yamada-ui/use-value";
9
9
  import { cx } from "@yamada-ui/utils";
10
10
  import { jsx } from "react/jsx-runtime";
11
11
  var SkeletonText = forwardRef(
12
12
  ({
13
13
  className,
14
- lineClamp: _lineClamp = 3,
15
- startColor,
14
+ children,
16
15
  endColor,
17
16
  fadeDuration,
18
- speed,
19
- isLoaded,
20
17
  gap = "fallback(2, 0.5rem)",
18
+ isLoaded,
19
+ lineClamp: _lineClamp = 3,
20
+ speed,
21
+ startColor,
21
22
  textHeight = "fallback(2, 0.5rem)",
22
- children,
23
23
  ...rest
24
24
  }, ref) => {
25
25
  const lineClamp = useValue(_lineClamp);
@@ -37,19 +37,19 @@ var SkeletonText = forwardRef(
37
37
  if (isLoaded && index > 0) return null;
38
38
  const isLast = index + 1 === lineClamp;
39
39
  const props = !isLoaded ? {
40
+ h: textHeight,
40
41
  mb: !isLast ? gap : void 0,
41
- w: lineClamp > 1 ? !isLast ? "100%" : "80%" : "100%",
42
- h: textHeight
42
+ w: lineClamp > 1 ? !isLast ? "100%" : "80%" : "100%"
43
43
  } : {};
44
44
  return /* @__PURE__ */ jsx(
45
45
  Skeleton,
46
46
  {
47
47
  ...{
48
- startColor,
49
48
  endColor,
50
49
  fadeDuration,
51
- speed,
52
50
  isLoaded,
51
+ speed,
52
+ startColor,
53
53
  ...props
54
54
  },
55
55
  children: index === 0 ? children : void 0
@@ -67,4 +67,4 @@ SkeletonText.__ui__ = "SkeletonText";
67
67
  export {
68
68
  SkeletonText
69
69
  };
70
- //# sourceMappingURL=chunk-2U4SAIJD.mjs.map
70
+ //# sourceMappingURL=chunk-LA6A6MQE.mjs.map
package/dist/chunk-LA6A6MQE.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/skeleton-text.tsx"],"sourcesContent":["import type { CSSUIObject, CSSUIProps } from \"@yamada-ui/core\"\nimport type { SkeletonProps } from \"./skeleton\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { Skeleton } from \"./skeleton\"\n\ninterface SkeletonTextOptions {\n /**\n * The CSS `gap` property.\n */\n gap?: CSSUIProps[\"gap\"]\n /**\n * The CSS `height` property.\n */\n textHeight?: CSSUIProps[\"height\"]\n}\n\nexport interface SkeletonTextProps\n extends Omit<SkeletonProps, \"isFitContent\">,\n SkeletonTextOptions {}\n\nexport const SkeletonText = forwardRef<SkeletonTextProps, \"div\">(\n (\n {\n className,\n children,\n endColor,\n fadeDuration,\n gap = \"fallback(2, 0.5rem)\",\n isLoaded,\n lineClamp: _lineClamp = 3,\n speed,\n startColor,\n textHeight = \"fallback(2, 0.5rem)\",\n ...rest\n },\n ref,\n ) => {\n const lineClamp = useValue(_lineClamp)\n\n const css: CSSUIObject = {\n w: \"100%\",\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton__text\", className)}\n __css={css}\n {...rest}\n >\n {Array(lineClamp)\n .fill(0)\n .map((_, index) => {\n if (isLoaded && index > 0) return null\n\n const isLast = index + 1 === lineClamp\n\n const props: SkeletonProps = !isLoaded\n ? {\n h: textHeight,\n mb: !isLast ? gap : undefined,\n w: lineClamp > 1 ? (!isLast ? \"100%\" : \"80%\") : \"100%\",\n }\n : {}\n\n return (\n <Skeleton\n key={index}\n {...{\n endColor,\n fadeDuration,\n isLoaded,\n speed,\n startColor,\n ...props,\n }}\n >\n {index === 0 ? children : undefined}\n </Skeleton>\n )\n })}\n </ui.div>\n )\n },\n)\n\nSkeletonText.displayName = \"SkeletonText\"\nSkeletonText.__ui__ = \"SkeletonText\"\n"],"mappings":";;;;;;AAEA,SAAS,YAAY,UAAU;AAC/B,SAAS,gBAAgB;AACzB,SAAS,UAAU;AAgEL;AA9CP,IAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA,WAAW,aAAa;AAAA,IACxB;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,YAAY,SAAS,UAAU;AAErC,UAAM,MAAmB;AAAA,MACvB,GAAG;AAAA,IACL;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,qBAAqB,SAAS;AAAA,QAC5C,OAAO;AAAA,QACN,GAAG;AAAA,QAEH,gBAAM,SAAS,EACb,KAAK,CAAC,EACN,IAAI,CAAC,GAAG,UAAU;AACjB,cAAI,YAAY,QAAQ,EAAG,QAAO;AAElC,gBAAM,SAAS,QAAQ,MAAM;AAE7B,gBAAM,QAAuB,CAAC,WAC1B;AAAA,YACE,GAAG;AAAA,YACH,IAAI,CAAC,SAAS,MAAM;AAAA,YACpB,GAAG,YAAY,IAAK,CAAC,SAAS,SAAS,QAAS;AAAA,UAClD,IACA,CAAC;AAEL,iBACE;AAAA,YAAC;AAAA;AAAA,cAEE,GAAG;AAAA,gBACF;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,GAAG;AAAA,cACL;AAAA,cAEC,oBAAU,IAAI,WAAW;AAAA;AAAA,YAVrB;AAAA,UAWP;AAAA,QAEJ,CAAC;AAAA;AAAA,IACL;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;AAC3B,aAAa,SAAS;","names":[]}
package/dist/index.js CHANGED
@@ -38,13 +38,13 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
38
38
  const [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
39
39
  let {
40
40
  className,
41
- startColor: _startColor,
41
+ children,
42
42
  endColor: _endColor,
43
43
  fadeDuration = 0.4,
44
- speed = 0.8,
45
- isLoaded,
46
44
  isFitContent,
47
- children,
45
+ isLoaded,
46
+ speed = 0.8,
47
+ startColor: _startColor,
48
48
  ...rest
49
49
  } = (0, import_core.omitThemeProps)(mergedProps);
50
50
  const [isMounted] = (0, import_utils.useIsMounted)();
@@ -55,6 +55,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
55
55
  const hasChildren = !!validChildren.length;
56
56
  isFitContent != null ? isFitContent : isFitContent = hasChildren;
57
57
  const fadeIn = (0, import_use_animation.useAnimation)({
58
+ duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`,
58
59
  keyframes: {
59
60
  "0%": {
60
61
  opacity: 0
@@ -62,38 +63,37 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
62
63
  "100%": {
63
64
  opacity: 1
64
65
  }
65
- },
66
- duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`
66
+ }
67
67
  });
68
68
  const animation = (0, import_use_animation.useAnimation)({
69
+ direction: "alternate",
70
+ duration: typeof speed === "string" ? speed : `${speed}s`,
71
+ iterationCount: "infinite",
69
72
  keyframes: {
70
73
  "0%": {
71
- borderColor: startColor,
72
- background: startColor
74
+ background: startColor,
75
+ borderColor: startColor
73
76
  },
74
77
  "100%": {
75
- borderColor: endColor,
76
- background: endColor
78
+ background: endColor,
79
+ borderColor: endColor
77
80
  }
78
81
  },
79
- duration: typeof speed === "string" ? speed : `${speed}s`,
80
- iterationCount: "infinite",
81
- direction: "alternate",
82
82
  timingFunction: "linear"
83
83
  });
84
84
  const css = {
85
- w: isFitContent ? "fit-content" : "100%",
86
- maxW: "100%",
87
- h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
88
- boxShadow: "none",
85
+ "&::before, &::after, *": {
86
+ visibility: "hidden"
87
+ },
89
88
  backgroundClip: "padding-box",
90
- cursor: "default",
89
+ boxShadow: "none",
91
90
  color: "transparent",
91
+ cursor: "default",
92
+ h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
93
+ maxW: "100%",
92
94
  pointerEvents: "none",
93
95
  userSelect: "none",
94
- "&::before, &::after, *": {
95
- visibility: "hidden"
96
- },
96
+ w: isFitContent ? "fit-content" : "100%",
97
97
  ...styles
98
98
  };
99
99
  if (isLoaded) {
@@ -147,8 +147,8 @@ var SkeletonCircle = (0, import_core2.forwardRef)(
147
147
  {
148
148
  ref,
149
149
  className: (0, import_utils2.cx)("ui-skeleton__circle", className),
150
- rounded: "fallback(full, 9999px)",
151
150
  isFitContent,
151
+ rounded: "fallback(full, 9999px)",
152
152
  ...!isFitContent ? { boxSize } : {},
153
153
  ...rest,
154
154
  children: validChildren
@@ -167,15 +167,15 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
167
167
  var SkeletonText = (0, import_core3.forwardRef)(
168
168
  ({
169
169
  className,
170
- lineClamp: _lineClamp = 3,
171
- startColor,
170
+ children,
172
171
  endColor,
173
172
  fadeDuration,
174
- speed,
175
- isLoaded,
176
173
  gap = "fallback(2, 0.5rem)",
174
+ isLoaded,
175
+ lineClamp: _lineClamp = 3,
176
+ speed,
177
+ startColor,
177
178
  textHeight = "fallback(2, 0.5rem)",
178
- children,
179
179
  ...rest
180
180
  }, ref) => {
181
181
  const lineClamp = (0, import_use_value2.useValue)(_lineClamp);
@@ -193,19 +193,19 @@ var SkeletonText = (0, import_core3.forwardRef)(
193
193
  if (isLoaded && index > 0) return null;
194
194
  const isLast = index + 1 === lineClamp;
195
195
  const props = !isLoaded ? {
196
+ h: textHeight,
196
197
  mb: !isLast ? gap : void 0,
197
- w: lineClamp > 1 ? !isLast ? "100%" : "80%" : "100%",
198
- h: textHeight
198
+ w: lineClamp > 1 ? !isLast ? "100%" : "80%" : "100%"
199
199
  } : {};
200
200
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
201
201
  Skeleton,
202
202
  {
203
203
  ...{
204
- startColor,
205
204
  endColor,
206
205
  fadeDuration,
207
- speed,
208
206
  isLoaded,
207
+ speed,
208
+ startColor,
209
209
  ...props
210
210
  },
211
211
  children: index === 0 ? children : void 0
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 HTMLUIProps,\n ThemeProps,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ninterface SkeletonOptions {\n /**\n * The color at the animation start.\n */\n startColor?: CSSUIProps[\"color\"]\n /**\n * The color at the animation end.\n */\n endColor?: CSSUIProps[\"color\"]\n /**\n * If `true`, it'll render its children with a nice fade transition.\n *\n * @default false\n */\n isLoaded?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default 0.8\n */\n speed?: string | number\n /**\n * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n *\n * @default 0.4\n */\n fadeDuration?: string | number\n /**\n * If `true`, the skeleton will take the width of it's children.\n *\n * @default false\n */\n isFitContent?: boolean\n}\n\nexport interface SkeletonProps\n extends HTMLUIProps,\n ThemeProps<\"Skeleton\">,\n SkeletonOptions {}\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n startColor: _startColor,\n endColor: _endColor,\n fadeDuration = 0.4,\n speed = 0.8,\n isLoaded,\n isFitContent,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const startColor = useValue(_startColor)\n const endColor = useValue(_endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n })\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n borderColor: startColor,\n background: startColor,\n },\n \"100%\": {\n borderColor: endColor,\n background: endColor,\n },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n direction: \"alternate\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n w: isFitContent ? \"fit-content\" : \"100%\",\n maxW: \"100%\",\n h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n boxShadow: \"none\",\n backgroundClip: \"padding-box\",\n cursor: \"default\",\n color: \"transparent\",\n pointerEvents: \"none\",\n userSelect: \"none\",\n \"&::before, &::after, *\": {\n visibility: \"hidden\",\n },\n ...styles,\n }\n\n if (isLoaded) {\n const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n {...rest}\n animation={animation}\n aria-busy=\"false\"\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n aria-busy=\"true\"\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n","import { forwardRef } from \"@yamada-ui/core\"\nimport { cx, getValidChildren } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./skeleton\"\nimport { Skeleton } from \"./skeleton\"\n\nexport interface SkeletonCircleProps extends SkeletonProps {}\n\nexport const SkeletonCircle = forwardRef<SkeletonCircleProps, \"div\">(\n (\n {\n className,\n boxSize = \"fallback(12, 3rem)\",\n children,\n isFitContent,\n ...rest\n },\n ref,\n ) => {\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n return (\n <Skeleton\n ref={ref}\n className={cx(\"ui-skeleton__circle\", className)}\n rounded=\"fallback(full, 9999px)\"\n isFitContent={isFitContent}\n {...(!isFitContent ? { boxSize } : {})}\n {...rest}\n >\n {validChildren}\n </Skeleton>\n )\n },\n)\n\nSkeletonCircle.displayName = \"SkeletonCircle\"\nSkeletonCircle.__ui__ = \"SkeletonCircle\"\n","import type { CSSUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./skeleton\"\nimport { Skeleton } from \"./skeleton\"\n\ninterface SkeletonTextOptions {\n /**\n * The CSS `gap` property.\n */\n gap?: CSSUIProps[\"gap\"]\n /**\n * The CSS `height` property.\n */\n textHeight?: CSSUIProps[\"height\"]\n}\n\nexport interface SkeletonTextProps\n extends Omit<SkeletonProps, \"isFitContent\">,\n SkeletonTextOptions {}\n\nexport const SkeletonText = forwardRef<SkeletonTextProps, \"div\">(\n (\n {\n className,\n lineClamp: _lineClamp = 3,\n startColor,\n endColor,\n fadeDuration,\n speed,\n isLoaded,\n gap = \"fallback(2, 0.5rem)\",\n textHeight = \"fallback(2, 0.5rem)\",\n children,\n ...rest\n },\n ref,\n ) => {\n const lineClamp = useValue(_lineClamp)\n\n const css: CSSUIObject = {\n w: \"100%\",\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton__text\", className)}\n __css={css}\n {...rest}\n >\n {Array(lineClamp)\n .fill(0)\n .map((_, index) => {\n if (isLoaded && index > 0) return null\n\n const isLast = index + 1 === lineClamp\n\n const props: SkeletonProps = !isLoaded\n ? {\n mb: !isLast ? gap : undefined,\n w: lineClamp > 1 ? (!isLast ? \"100%\" : \"80%\") : \"100%\",\n h: textHeight,\n }\n : {}\n\n return (\n <Skeleton\n key={index}\n {...{\n startColor,\n endColor,\n fadeDuration,\n speed,\n isLoaded,\n ...props,\n }}\n >\n {index === 0 ? children : undefined}\n </Skeleton>\n )\n })}\n </ui.div>\n )\n },\n)\n\nSkeletonText.displayName = \"SkeletonText\"\nSkeletonText.__ui__ = \"SkeletonText\"\n"],"mappings":"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","names":["animation","import_core","import_utils","import_jsx_runtime","import_core","import_use_value","import_utils","import_jsx_runtime"]}
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"]}
package/dist/index.mjs CHANGED
@@ -1,13 +1,13 @@
1
1
  "use client"
2
2
  import {
3
3
  SkeletonCircle
4
- } from "./chunk-22DLXLXV.mjs";
4
+ } from "./chunk-2VWCGHQT.mjs";
5
5
  import {
6
6
  SkeletonText
7
- } from "./chunk-2U4SAIJD.mjs";
7
+ } from "./chunk-LA6A6MQE.mjs";
8
8
  import {
9
9
  Skeleton
10
- } from "./chunk-BWLL2ZTF.mjs";
10
+ } from "./chunk-ENL256G4.mjs";
11
11
  export {
12
12
  Skeleton,
13
13
  SkeletonCircle,
package/dist/skeleton-circle.js CHANGED
@@ -38,13 +38,13 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
38
38
  const [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
39
39
  let {
40
40
  className,
41
- startColor: _startColor,
41
+ children,
42
42
  endColor: _endColor,
43
43
  fadeDuration = 0.4,
44
- speed = 0.8,
45
- isLoaded,
46
44
  isFitContent,
47
- children,
45
+ isLoaded,
46
+ speed = 0.8,
47
+ startColor: _startColor,
48
48
  ...rest
49
49
  } = (0, import_core.omitThemeProps)(mergedProps);
50
50
  const [isMounted] = (0, import_utils.useIsMounted)();
@@ -55,6 +55,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
55
55
  const hasChildren = !!validChildren.length;
56
56
  isFitContent != null ? isFitContent : isFitContent = hasChildren;
57
57
  const fadeIn = (0, import_use_animation.useAnimation)({
58
+ duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`,
58
59
  keyframes: {
59
60
  "0%": {
60
61
  opacity: 0
@@ -62,38 +63,37 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
62
63
  "100%": {
63
64
  opacity: 1
64
65
  }
65
- },
66
- duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`
66
+ }
67
67
  });
68
68
  const animation = (0, import_use_animation.useAnimation)({
69
+ direction: "alternate",
70
+ duration: typeof speed === "string" ? speed : `${speed}s`,
71
+ iterationCount: "infinite",
69
72
  keyframes: {
70
73
  "0%": {
71
- borderColor: startColor,
72
- background: startColor
74
+ background: startColor,
75
+ borderColor: startColor
73
76
  },
74
77
  "100%": {
75
- borderColor: endColor,
76
- background: endColor
78
+ background: endColor,
79
+ borderColor: endColor
77
80
  }
78
81
  },
79
- duration: typeof speed === "string" ? speed : `${speed}s`,
80
- iterationCount: "infinite",
81
- direction: "alternate",
82
82
  timingFunction: "linear"
83
83
  });
84
84
  const css = {
85
- w: isFitContent ? "fit-content" : "100%",
86
- maxW: "100%",
87
- h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
88
- boxShadow: "none",
85
+ "&::before, &::after, *": {
86
+ visibility: "hidden"
87
+ },
89
88
  backgroundClip: "padding-box",
90
- cursor: "default",
89
+ boxShadow: "none",
91
90
  color: "transparent",
91
+ cursor: "default",
92
+ h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
93
+ maxW: "100%",
92
94
  pointerEvents: "none",
93
95
  userSelect: "none",
94
- "&::before, &::after, *": {
95
- visibility: "hidden"
96
- },
96
+ w: isFitContent ? "fit-content" : "100%",
97
97
  ...styles
98
98
  };
99
99
  if (isLoaded) {
@@ -145,8 +145,8 @@ var SkeletonCircle = (0, import_core2.forwardRef)(
145
145
  {
146
146
  ref,
147
147
  className: (0, import_utils2.cx)("ui-skeleton__circle", className),
148
- rounded: "fallback(full, 9999px)",
149
148
  isFitContent,
149
+ rounded: "fallback(full, 9999px)",
150
150
  ...!isFitContent ? { boxSize } : {},
151
151
  ...rest,
152
152
  children: validChildren
package/dist/skeleton-circle.js.map CHANGED
@@ -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 \"./skeleton\"\nimport { Skeleton } from \"./skeleton\"\n\nexport interface SkeletonCircleProps extends SkeletonProps {}\n\nexport const SkeletonCircle = forwardRef<SkeletonCircleProps, \"div\">(\n (\n {\n className,\n boxSize = \"fallback(12, 3rem)\",\n children,\n isFitContent,\n ...rest\n },\n ref,\n ) => {\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n return (\n <Skeleton\n ref={ref}\n className={cx(\"ui-skeleton__circle\", className)}\n rounded=\"fallback(full, 9999px)\"\n isFitContent={isFitContent}\n {...(!isFitContent ? { boxSize } : {})}\n {...rest}\n >\n {validChildren}\n </Skeleton>\n )\n },\n)\n\nSkeletonCircle.displayName = \"SkeletonCircle\"\nSkeletonCircle.__ui__ = \"SkeletonCircle\"\n","import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ninterface SkeletonOptions {\n /**\n * The color at the animation start.\n */\n startColor?: CSSUIProps[\"color\"]\n /**\n * The color at the animation end.\n */\n endColor?: CSSUIProps[\"color\"]\n /**\n * If `true`, it'll render its children with a nice fade transition.\n *\n * @default false\n */\n isLoaded?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default 0.8\n */\n speed?: string | number\n /**\n * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n *\n * @default 0.4\n */\n fadeDuration?: string | number\n /**\n * If `true`, the skeleton will take the width of it's children.\n *\n * @default false\n */\n isFitContent?: boolean\n}\n\nexport interface SkeletonProps\n extends HTMLUIProps,\n ThemeProps<\"Skeleton\">,\n SkeletonOptions {}\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n startColor: _startColor,\n endColor: _endColor,\n fadeDuration = 0.4,\n speed = 0.8,\n isLoaded,\n isFitContent,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const startColor = useValue(_startColor)\n const endColor = useValue(_endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n })\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n borderColor: startColor,\n background: startColor,\n },\n \"100%\": {\n borderColor: endColor,\n background: endColor,\n },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n direction: \"alternate\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n w: isFitContent ? \"fit-content\" : \"100%\",\n maxW: \"100%\",\n h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n boxShadow: \"none\",\n backgroundClip: \"padding-box\",\n cursor: \"default\",\n color: \"transparent\",\n pointerEvents: \"none\",\n userSelect: \"none\",\n \"&::before, &::after, *\": {\n visibility: \"hidden\",\n },\n ...styles,\n }\n\n if (isLoaded) {\n const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n {...rest}\n animation={animation}\n aria-busy=\"false\"\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n aria-busy=\"true\"\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n"],"mappings":"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","names":["import_core","import_utils","animation","import_jsx_runtime"]}
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"]}
package/dist/skeleton-circle.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  "use client"
2
2
  import {
3
3
  SkeletonCircle
4
- } from "./chunk-22DLXLXV.mjs";
5
- import "./chunk-BWLL2ZTF.mjs";
4
+ } from "./chunk-2VWCGHQT.mjs";
5
+ import "./chunk-ENL256G4.mjs";
6
6
  export {
7
7
  SkeletonCircle
8
8
  };
package/dist/skeleton-text.js CHANGED
@@ -39,13 +39,13 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
39
39
  const [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
40
40
  let {
41
41
  className,
42
- startColor: _startColor,
42
+ children,
43
43
  endColor: _endColor,
44
44
  fadeDuration = 0.4,
45
- speed = 0.8,
46
- isLoaded,
47
45
  isFitContent,
48
- children,
46
+ isLoaded,
47
+ speed = 0.8,
48
+ startColor: _startColor,
49
49
  ...rest
50
50
  } = (0, import_core.omitThemeProps)(mergedProps);
51
51
  const [isMounted] = (0, import_utils.useIsMounted)();
@@ -56,6 +56,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
56
56
  const hasChildren = !!validChildren.length;
57
57
  isFitContent != null ? isFitContent : isFitContent = hasChildren;
58
58
  const fadeIn = (0, import_use_animation.useAnimation)({
59
+ duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`,
59
60
  keyframes: {
60
61
  "0%": {
61
62
  opacity: 0
@@ -63,38 +64,37 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
63
64
  "100%": {
64
65
  opacity: 1
65
66
  }
66
- },
67
- duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`
67
+ }
68
68
  });
69
69
  const animation = (0, import_use_animation.useAnimation)({
70
+ direction: "alternate",
71
+ duration: typeof speed === "string" ? speed : `${speed}s`,
72
+ iterationCount: "infinite",
70
73
  keyframes: {
71
74
  "0%": {
72
- borderColor: startColor,
73
- background: startColor
75
+ background: startColor,
76
+ borderColor: startColor
74
77
  },
75
78
  "100%": {
76
- borderColor: endColor,
77
- background: endColor
79
+ background: endColor,
80
+ borderColor: endColor
78
81
  }
79
82
  },
80
- duration: typeof speed === "string" ? speed : `${speed}s`,
81
- iterationCount: "infinite",
82
- direction: "alternate",
83
83
  timingFunction: "linear"
84
84
  });
85
85
  const css = {
86
- w: isFitContent ? "fit-content" : "100%",
87
- maxW: "100%",
88
- h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
89
- boxShadow: "none",
86
+ "&::before, &::after, *": {
87
+ visibility: "hidden"
88
+ },
90
89
  backgroundClip: "padding-box",
91
- cursor: "default",
90
+ boxShadow: "none",
92
91
  color: "transparent",
92
+ cursor: "default",
93
+ h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
94
+ maxW: "100%",
93
95
  pointerEvents: "none",
94
96
  userSelect: "none",
95
- "&::before, &::after, *": {
96
- visibility: "hidden"
97
- },
97
+ w: isFitContent ? "fit-content" : "100%",
98
98
  ...styles
99
99
  };
100
100
  if (isLoaded) {
@@ -133,15 +133,15 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
133
133
  var SkeletonText = (0, import_core2.forwardRef)(
134
134
  ({
135
135
  className,
136
- lineClamp: _lineClamp = 3,
137
- startColor,
136
+ children,
138
137
  endColor,
139
138
  fadeDuration,
140
- speed,
141
- isLoaded,
142
139
  gap = "fallback(2, 0.5rem)",
140
+ isLoaded,
141
+ lineClamp: _lineClamp = 3,
142
+ speed,
143
+ startColor,
143
144
  textHeight = "fallback(2, 0.5rem)",
144
- children,
145
145
  ...rest
146
146
  }, ref) => {
147
147
  const lineClamp = (0, import_use_value2.useValue)(_lineClamp);
@@ -159,19 +159,19 @@ var SkeletonText = (0, import_core2.forwardRef)(
159
159
  if (isLoaded && index > 0) return null;
160
160
  const isLast = index + 1 === lineClamp;
161
161
  const props = !isLoaded ? {
162
+ h: textHeight,
162
163
  mb: !isLast ? gap : void 0,
163
- w: lineClamp > 1 ? !isLast ? "100%" : "80%" : "100%",
164
- h: textHeight
164
+ w: lineClamp > 1 ? !isLast ? "100%" : "80%" : "100%"
165
165
  } : {};
166
166
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
167
167
  Skeleton,
168
168
  {
169
169
  ...{
170
- startColor,
171
170
  endColor,
172
171
  fadeDuration,
173
- speed,
174
172
  isLoaded,
173
+ speed,
174
+ startColor,
175
175
  ...props
176
176
  },
177
177
  children: index === 0 ? children : void 0
package/dist/skeleton-text.js.map CHANGED
@@ -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 \"./skeleton\"\nimport { Skeleton } from \"./skeleton\"\n\ninterface SkeletonTextOptions {\n /**\n * The CSS `gap` property.\n */\n gap?: CSSUIProps[\"gap\"]\n /**\n * The CSS `height` property.\n */\n textHeight?: CSSUIProps[\"height\"]\n}\n\nexport interface SkeletonTextProps\n extends Omit<SkeletonProps, \"isFitContent\">,\n SkeletonTextOptions {}\n\nexport const SkeletonText = forwardRef<SkeletonTextProps, \"div\">(\n (\n {\n className,\n lineClamp: _lineClamp = 3,\n startColor,\n endColor,\n fadeDuration,\n speed,\n isLoaded,\n gap = \"fallback(2, 0.5rem)\",\n textHeight = \"fallback(2, 0.5rem)\",\n children,\n ...rest\n },\n ref,\n ) => {\n const lineClamp = useValue(_lineClamp)\n\n const css: CSSUIObject = {\n w: \"100%\",\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton__text\", className)}\n __css={css}\n {...rest}\n >\n {Array(lineClamp)\n .fill(0)\n .map((_, index) => {\n if (isLoaded && index > 0) return null\n\n const isLast = index + 1 === lineClamp\n\n const props: SkeletonProps = !isLoaded\n ? {\n mb: !isLast ? gap : undefined,\n w: lineClamp > 1 ? (!isLast ? \"100%\" : \"80%\") : \"100%\",\n h: textHeight,\n }\n : {}\n\n return (\n <Skeleton\n key={index}\n {...{\n startColor,\n endColor,\n fadeDuration,\n speed,\n isLoaded,\n ...props,\n }}\n >\n {index === 0 ? children : undefined}\n </Skeleton>\n )\n })}\n </ui.div>\n )\n },\n)\n\nSkeletonText.displayName = \"SkeletonText\"\nSkeletonText.__ui__ = \"SkeletonText\"\n","import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ninterface SkeletonOptions {\n /**\n * The color at the animation start.\n */\n startColor?: CSSUIProps[\"color\"]\n /**\n * The color at the animation end.\n */\n endColor?: CSSUIProps[\"color\"]\n /**\n * If `true`, it'll render its children with a nice fade transition.\n *\n * @default false\n */\n isLoaded?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default 0.8\n */\n speed?: string | number\n /**\n * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n *\n * @default 0.4\n */\n fadeDuration?: string | number\n /**\n * If `true`, the skeleton will take the width of it's children.\n *\n * @default false\n */\n isFitContent?: boolean\n}\n\nexport interface SkeletonProps\n extends HTMLUIProps,\n ThemeProps<\"Skeleton\">,\n SkeletonOptions {}\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n startColor: _startColor,\n endColor: _endColor,\n fadeDuration = 0.4,\n speed = 0.8,\n isLoaded,\n isFitContent,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const startColor = useValue(_startColor)\n const endColor = useValue(_endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n })\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n borderColor: startColor,\n background: startColor,\n },\n \"100%\": {\n borderColor: endColor,\n background: endColor,\n },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n direction: \"alternate\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n w: isFitContent ? \"fit-content\" : \"100%\",\n maxW: \"100%\",\n h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n boxShadow: \"none\",\n backgroundClip: \"padding-box\",\n cursor: \"default\",\n color: \"transparent\",\n pointerEvents: \"none\",\n userSelect: \"none\",\n \"&::before, &::after, *\": {\n visibility: \"hidden\",\n },\n ...styles,\n }\n\n if (isLoaded) {\n const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n {...rest}\n animation={animation}\n aria-busy=\"false\"\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n aria-busy=\"true\"\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n"],"mappings":"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","names":["import_core","import_use_value","import_utils","animation","import_jsx_runtime"]}
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"]}
package/dist/skeleton-text.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  "use client"
2
2
  import {
3
3
  SkeletonText
4
- } from "./chunk-2U4SAIJD.mjs";
5
- import "./chunk-BWLL2ZTF.mjs";
4
+ } from "./chunk-LA6A6MQE.mjs";
5
+ import "./chunk-ENL256G4.mjs";
6
6
  export {
7
7
  SkeletonText
8
8
  };
package/dist/skeleton.d.mts CHANGED
@@ -2,14 +2,22 @@ import * as _yamada_ui_core from '@yamada-ui/core';
2
2
  import { HTMLUIProps, ThemeProps, CSSUIProps } from '@yamada-ui/core';
3
3
 
4
4
  interface SkeletonOptions {
5
- /**
6
- * The color at the animation start.
7
- */
8
- startColor?: CSSUIProps["color"];
9
5
  /**
10
6
  * The color at the animation end.
11
7
  */
12
8
  endColor?: CSSUIProps["color"];
9
+ /**
10
+ * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.
11
+ *
12
+ * @default 0.4
13
+ */
14
+ fadeDuration?: number | string;
15
+ /**
16
+ * If `true`, the skeleton will take the width of it's children.
17
+ *
18
+ * @default false
19
+ */
20
+ isFitContent?: boolean;
13
21
  /**
14
22
  * If `true`, it'll render its children with a nice fade transition.
15
23
  *
@@ -21,19 +29,11 @@ interface SkeletonOptions {
21
29
  *
22
30
  * @default 0.8
23
31
  */
24
- speed?: string | number;
25
- /**
26
- * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.
27
- *
28
- * @default 0.4
29
- */
30
- fadeDuration?: string | number;
32
+ speed?: number | string;
31
33
  /**
32
- * If `true`, the skeleton will take the width of it's children.
33
- *
34
- * @default false
34
+ * The color at the animation start.
35
35
  */
36
- isFitContent?: boolean;
36
+ startColor?: CSSUIProps["color"];
37
37
  }
38
38
  interface SkeletonProps extends HTMLUIProps, ThemeProps<"Skeleton">, SkeletonOptions {
39
39
  }
package/dist/skeleton.d.ts CHANGED
@@ -2,14 +2,22 @@ import * as _yamada_ui_core from '@yamada-ui/core';
2
2
  import { HTMLUIProps, ThemeProps, CSSUIProps } from '@yamada-ui/core';
3
3
 
4
4
  interface SkeletonOptions {
5
- /**
6
- * The color at the animation start.
7
- */
8
- startColor?: CSSUIProps["color"];
9
5
  /**
10
6
  * The color at the animation end.
11
7
  */
12
8
  endColor?: CSSUIProps["color"];
9
+ /**
10
+ * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.
11
+ *
12
+ * @default 0.4
13
+ */
14
+ fadeDuration?: number | string;
15
+ /**
16
+ * If `true`, the skeleton will take the width of it's children.
17
+ *
18
+ * @default false
19
+ */
20
+ isFitContent?: boolean;
13
21
  /**
14
22
  * If `true`, it'll render its children with a nice fade transition.
15
23
  *
@@ -21,19 +29,11 @@ interface SkeletonOptions {
21
29
  *
22
30
  * @default 0.8
23
31
  */
24
- speed?: string | number;
25
- /**
26
- * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.
27
- *
28
- * @default 0.4
29
- */
30
- fadeDuration?: string | number;
32
+ speed?: number | string;
31
33
  /**
32
- * If `true`, the skeleton will take the width of it's children.
33
- *
34
- * @default false
34
+ * The color at the animation start.
35
35
  */
36
- isFitContent?: boolean;
36
+ startColor?: CSSUIProps["color"];
37
37
  }
38
38
  interface SkeletonProps extends HTMLUIProps, ThemeProps<"Skeleton">, SkeletonOptions {
39
39
  }
package/dist/skeleton.js CHANGED
@@ -34,13 +34,13 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
34
34
  const [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
35
35
  let {
36
36
  className,
37
- startColor: _startColor,
37
+ children,
38
38
  endColor: _endColor,
39
39
  fadeDuration = 0.4,
40
- speed = 0.8,
41
- isLoaded,
42
40
  isFitContent,
43
- children,
41
+ isLoaded,
42
+ speed = 0.8,
43
+ startColor: _startColor,
44
44
  ...rest
45
45
  } = (0, import_core.omitThemeProps)(mergedProps);
46
46
  const [isMounted] = (0, import_utils.useIsMounted)();
@@ -51,6 +51,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
51
51
  const hasChildren = !!validChildren.length;
52
52
  isFitContent != null ? isFitContent : isFitContent = hasChildren;
53
53
  const fadeIn = (0, import_use_animation.useAnimation)({
54
+ duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`,
54
55
  keyframes: {
55
56
  "0%": {
56
57
  opacity: 0
@@ -58,38 +59,37 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
58
59
  "100%": {
59
60
  opacity: 1
60
61
  }
61
- },
62
- duration: typeof fadeDuration === "string" ? fadeDuration : `${fadeDuration}s`
62
+ }
63
63
  });
64
64
  const animation = (0, import_use_animation.useAnimation)({
65
+ direction: "alternate",
66
+ duration: typeof speed === "string" ? speed : `${speed}s`,
67
+ iterationCount: "infinite",
65
68
  keyframes: {
66
69
  "0%": {
67
- borderColor: startColor,
68
- background: startColor
70
+ background: startColor,
71
+ borderColor: startColor
69
72
  },
70
73
  "100%": {
71
- borderColor: endColor,
72
- background: endColor
74
+ background: endColor,
75
+ borderColor: endColor
73
76
  }
74
77
  },
75
- duration: typeof speed === "string" ? speed : `${speed}s`,
76
- iterationCount: "infinite",
77
- direction: "alternate",
78
78
  timingFunction: "linear"
79
79
  });
80
80
  const css = {
81
- w: isFitContent ? "fit-content" : "100%",
82
- maxW: "100%",
83
- h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
84
- boxShadow: "none",
81
+ "&::before, &::after, *": {
82
+ visibility: "hidden"
83
+ },
85
84
  backgroundClip: "padding-box",
86
- cursor: "default",
85
+ boxShadow: "none",
87
86
  color: "transparent",
87
+ cursor: "default",
88
+ h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
89
+ maxW: "100%",
88
90
  pointerEvents: "none",
89
91
  userSelect: "none",
90
- "&::before, &::after, *": {
91
- visibility: "hidden"
92
- },
92
+ w: isFitContent ? "fit-content" : "100%",
93
93
  ...styles
94
94
  };
95
95
  if (isLoaded) {
package/dist/skeleton.js.map CHANGED
@@ -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\ninterface SkeletonOptions {\n /**\n * The color at the animation start.\n */\n startColor?: CSSUIProps[\"color\"]\n /**\n * The color at the animation end.\n */\n endColor?: CSSUIProps[\"color\"]\n /**\n * If `true`, it'll render its children with a nice fade transition.\n *\n * @default false\n */\n isLoaded?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default 0.8\n */\n speed?: string | number\n /**\n * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n *\n * @default 0.4\n */\n fadeDuration?: string | number\n /**\n * If `true`, the skeleton will take the width of it's children.\n *\n * @default false\n */\n isFitContent?: boolean\n}\n\nexport interface SkeletonProps\n extends HTMLUIProps,\n ThemeProps<\"Skeleton\">,\n SkeletonOptions {}\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n startColor: _startColor,\n endColor: _endColor,\n fadeDuration = 0.4,\n speed = 0.8,\n isLoaded,\n isFitContent,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const startColor = useValue(_startColor)\n const endColor = useValue(_endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n })\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n borderColor: startColor,\n background: startColor,\n },\n \"100%\": {\n borderColor: endColor,\n background: endColor,\n },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n direction: \"alternate\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n w: isFitContent ? \"fit-content\" : \"100%\",\n maxW: \"100%\",\n h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n boxShadow: \"none\",\n backgroundClip: \"padding-box\",\n cursor: \"default\",\n color: \"transparent\",\n pointerEvents: \"none\",\n userSelect: \"none\",\n \"&::before, &::after, *\": {\n visibility: \"hidden\",\n },\n ...styles,\n }\n\n if (isLoaded) {\n const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n {...rest}\n animation={animation}\n aria-busy=\"false\"\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n aria-busy=\"true\"\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,kBAKO;AACP,2BAA6B;AAC7B,0BAA4B;AAC5B,uBAAyB;AACzB,mBAAmD;AAuH7C;AAxEC,IAAM,eAAW,wBAAiC,CAAC,OAAO,QAAQ;AACvE,QAAM,CAAC,QAAQ,WAAW,QAAI,+BAAkB,YAAY,KAAK;AACjE,MAAI;AAAA,IACF;AAAA,IACA,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,eAAe;AAAA,IACf,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,4BAAe,WAAW;AAC9B,QAAM,CAAC,SAAS,QAAI,2BAAa;AACjC,QAAM,oBAAgB,+BAAiB,QAAQ;AAC/C,QAAM,mBAAe,iCAAY,QAAQ;AACzC,QAAM,iBAAa,2BAAS,WAAW;AACvC,QAAM,eAAW,2BAAS,SAAS;AACnC,QAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,uDAAiB;AAEjB,QAAM,aAAS,mCAAa;AAAA,IAC1B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,UACE,OAAO,iBAAiB,WAAW,eAAe,GAAG,YAAY;AAAA,EACrE,CAAC;AAED,QAAM,gBAAY,mCAAa;AAAA,IAC7B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,MACA,QAAQ;AAAA,QACN,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,UAAU,OAAO,UAAU,WAAW,QAAQ,GAAG,KAAK;AAAA,IACtD,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,MAAmB;AAAA,IACvB,GAAG,eAAe,gBAAgB;AAAA,IAClC,MAAM;AAAA,IACN,GAAG,eAAe,gBAAgB;AAAA,IAClC,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,0BAA0B;AAAA,MACxB,YAAY;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EACL;AAEA,MAAI,UAAU;AACZ,UAAMA,aAAY,CAAC,UAAU,KAAK,eAAe,SAAS;AAE1D,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,eAAe,uBAAuB,SAAS;AAAA,QAC5D,GAAG;AAAA,QACJ,WAAWA;AAAA,QACX,aAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,eAAe,SAAS;AAAA,QACtC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QACA,aAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,EAEJ;AACF,CAAC;AAED,SAAS,cAAc;AACvB,SAAS,SAAS;","names":["animation"]}
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"]}
package/dist/skeleton.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  Skeleton
4
- } from "./chunk-BWLL2ZTF.mjs";
4
+ } from "./chunk-ENL256G4.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-20241005224505",
3
+ "version": "1.1.7-dev-20241006032009",
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-20241005224505",
40
- "@yamada-ui/use-animation": "1.0.39-dev-20241005224505",
41
- "@yamada-ui/use-previous": "1.0.21",
42
- "@yamada-ui/use-value": "1.1.27-dev-20241005224505",
43
- "@yamada-ui/utils": "1.5.2"
39
+ "@yamada-ui/core": "1.15.2-dev-20241006032009",
40
+ "@yamada-ui/use-animation": "1.0.39-dev-20241006032009",
41
+ "@yamada-ui/use-previous": "1.0.22-dev-20241006032009",
42
+ "@yamada-ui/use-value": "1.1.27-dev-20241006032009",
43
+ "@yamada-ui/utils": "1.5.3-dev-20241006032009"
44
44
  },
45
45
  "devDependencies": {
46
46
  "clean-package": "2.2.0",
package/dist/chunk-2U4SAIJD.mjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/skeleton-text.tsx"],"sourcesContent":["import type { CSSUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./skeleton\"\nimport { Skeleton } from \"./skeleton\"\n\ninterface SkeletonTextOptions {\n /**\n * The CSS `gap` property.\n */\n gap?: CSSUIProps[\"gap\"]\n /**\n * The CSS `height` property.\n */\n textHeight?: CSSUIProps[\"height\"]\n}\n\nexport interface SkeletonTextProps\n extends Omit<SkeletonProps, \"isFitContent\">,\n SkeletonTextOptions {}\n\nexport const SkeletonText = forwardRef<SkeletonTextProps, \"div\">(\n (\n {\n className,\n lineClamp: _lineClamp = 3,\n startColor,\n endColor,\n fadeDuration,\n speed,\n isLoaded,\n gap = \"fallback(2, 0.5rem)\",\n textHeight = \"fallback(2, 0.5rem)\",\n children,\n ...rest\n },\n ref,\n ) => {\n const lineClamp = useValue(_lineClamp)\n\n const css: CSSUIObject = {\n w: \"100%\",\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton__text\", className)}\n __css={css}\n {...rest}\n >\n {Array(lineClamp)\n .fill(0)\n .map((_, index) => {\n if (isLoaded && index > 0) return null\n\n const isLast = index + 1 === lineClamp\n\n const props: SkeletonProps = !isLoaded\n ? {\n mb: !isLast ? gap : undefined,\n w: lineClamp > 1 ? (!isLast ? \"100%\" : \"80%\") : \"100%\",\n h: textHeight,\n }\n : {}\n\n return (\n <Skeleton\n key={index}\n {...{\n startColor,\n endColor,\n fadeDuration,\n speed,\n isLoaded,\n ...props,\n }}\n >\n {index === 0 ? children : undefined}\n </Skeleton>\n )\n })}\n </ui.div>\n )\n },\n)\n\nSkeletonText.displayName = \"SkeletonText\"\nSkeletonText.__ui__ = \"SkeletonText\"\n"],"mappings":";;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,UAAU;AAiEL;AA9CP,IAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA,WAAW,aAAa;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,YAAY,SAAS,UAAU;AAErC,UAAM,MAAmB;AAAA,MACvB,GAAG;AAAA,IACL;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,qBAAqB,SAAS;AAAA,QAC5C,OAAO;AAAA,QACN,GAAG;AAAA,QAEH,gBAAM,SAAS,EACb,KAAK,CAAC,EACN,IAAI,CAAC,GAAG,UAAU;AACjB,cAAI,YAAY,QAAQ,EAAG,QAAO;AAElC,gBAAM,SAAS,QAAQ,MAAM;AAE7B,gBAAM,QAAuB,CAAC,WAC1B;AAAA,YACE,IAAI,CAAC,SAAS,MAAM;AAAA,YACpB,GAAG,YAAY,IAAK,CAAC,SAAS,SAAS,QAAS;AAAA,YAChD,GAAG;AAAA,UACL,IACA,CAAC;AAEL,iBACE;AAAA,YAAC;AAAA;AAAA,cAEE,GAAG;AAAA,gBACF;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,GAAG;AAAA,cACL;AAAA,cAEC,oBAAU,IAAI,WAAW;AAAA;AAAA,YAVrB;AAAA,UAWP;AAAA,QAEJ,CAAC;AAAA;AAAA,IACL;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;AAC3B,aAAa,SAAS;","names":[]}
package/dist/chunk-BWLL2ZTF.mjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/skeleton.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ninterface SkeletonOptions {\n /**\n * The color at the animation start.\n */\n startColor?: CSSUIProps[\"color\"]\n /**\n * The color at the animation end.\n */\n endColor?: CSSUIProps[\"color\"]\n /**\n * If `true`, it'll render its children with a nice fade transition.\n *\n * @default false\n */\n isLoaded?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default 0.8\n */\n speed?: string | number\n /**\n * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n *\n * @default 0.4\n */\n fadeDuration?: string | number\n /**\n * If `true`, the skeleton will take the width of it's children.\n *\n * @default false\n */\n isFitContent?: boolean\n}\n\nexport interface SkeletonProps\n extends HTMLUIProps,\n ThemeProps<\"Skeleton\">,\n SkeletonOptions {}\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n startColor: _startColor,\n endColor: _endColor,\n fadeDuration = 0.4,\n speed = 0.8,\n isLoaded,\n isFitContent,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const startColor = useValue(_startColor)\n const endColor = useValue(_endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n })\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n borderColor: startColor,\n background: startColor,\n },\n \"100%\": {\n borderColor: endColor,\n background: endColor,\n },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n direction: \"alternate\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n w: isFitContent ? \"fit-content\" : \"100%\",\n maxW: \"100%\",\n h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n boxShadow: \"none\",\n backgroundClip: \"padding-box\",\n cursor: \"default\",\n color: \"transparent\",\n pointerEvents: \"none\",\n userSelect: \"none\",\n \"&::before, &::after, *\": {\n visibility: \"hidden\",\n },\n ...styles,\n }\n\n if (isLoaded) {\n const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n {...rest}\n animation={animation}\n aria-busy=\"false\"\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n aria-busy=\"true\"\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n\nSkeleton.displayName = \"Skeleton\"\nSkeleton.__ui__ = \"Skeleton\"\n"],"mappings":";;;AAMA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,IAAI,kBAAkB,oBAAoB;AAuH7C;AAxEC,IAAM,WAAW,WAAiC,CAAC,OAAO,QAAQ;AACvE,QAAM,CAAC,QAAQ,WAAW,IAAI,kBAAkB,YAAY,KAAK;AACjE,MAAI;AAAA,IACF;AAAA,IACA,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,eAAe;AAAA,IACf,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,eAAe,WAAW;AAC9B,QAAM,CAAC,SAAS,IAAI,aAAa;AACjC,QAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,QAAM,eAAe,YAAY,QAAQ;AACzC,QAAM,aAAa,SAAS,WAAW;AACvC,QAAM,WAAW,SAAS,SAAS;AACnC,QAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,uDAAiB;AAEjB,QAAM,SAAS,aAAa;AAAA,IAC1B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,UACE,OAAO,iBAAiB,WAAW,eAAe,GAAG,YAAY;AAAA,EACrE,CAAC;AAED,QAAM,YAAY,aAAa;AAAA,IAC7B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,MACA,QAAQ;AAAA,QACN,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,UAAU,OAAO,UAAU,WAAW,QAAQ,GAAG,KAAK;AAAA,IACtD,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,MAAmB;AAAA,IACvB,GAAG,eAAe,gBAAgB;AAAA,IAClC,MAAM;AAAA,IACN,GAAG,eAAe,gBAAgB;AAAA,IAClC,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,0BAA0B;AAAA,MACxB,YAAY;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EACL;AAEA,MAAI,UAAU;AACZ,UAAMA,aAAY,CAAC,UAAU,KAAK,eAAe,SAAS;AAE1D,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,uBAAuB,SAAS;AAAA,QAC5D,GAAG;AAAA,QACJ,WAAWA;AAAA,QACX,aAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,SAAS;AAAA,QACtC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QACA,aAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,EAEJ;AACF,CAAC;AAED,SAAS,cAAc;AACvB,SAAS,SAAS;","names":["animation"]}