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

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