@yamada-ui/skeleton 1.1.13 → 1.1.14-dev-20241212094045

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 (20) hide show
  1. package/dist/{chunk-PUQL4CGB.mjs → chunk-2MN255BK.mjs} +2 -2
  2. package/dist/{chunk-SD6HP7BI.mjs → chunk-33KF2MVP.mjs} +2 -2
  3. package/dist/{chunk-DWX5AZOS.mjs → chunk-MMI6HELC.mjs} +4 -4
  4. package/dist/chunk-MMI6HELC.mjs.map +1 -0
  5. package/dist/index.js +2 -2
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +3 -3
  8. package/dist/skeleton-circle.js +2 -2
  9. package/dist/skeleton-circle.js.map +1 -1
  10. package/dist/skeleton-circle.mjs +2 -2
  11. package/dist/skeleton-text.js +2 -2
  12. package/dist/skeleton-text.js.map +1 -1
  13. package/dist/skeleton-text.mjs +2 -2
  14. package/dist/skeleton.js +2 -2
  15. package/dist/skeleton.js.map +1 -1
  16. package/dist/skeleton.mjs +1 -1
  17. package/package.json +6 -6
  18. package/dist/chunk-DWX5AZOS.mjs.map +0 -1
  19. /package/dist/{chunk-PUQL4CGB.mjs.map → chunk-2MN255BK.mjs.map} +0 -0
  20. /package/dist/{chunk-SD6HP7BI.mjs.map → chunk-33KF2MVP.mjs.map} +0 -0
package/dist/{chunk-PUQL4CGB.mjs → chunk-2MN255BK.mjs} RENAMED
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  Skeleton
4
- } from "./chunk-DWX5AZOS.mjs";
4
+ } from "./chunk-MMI6HELC.mjs";
5
5
 
6
6
  // src/skeleton-text.tsx
7
7
  import { forwardRef, ui } from "@yamada-ui/core";
@@ -68,4 +68,4 @@ SkeletonText.__ui__ = "SkeletonText";
68
68
  export {
69
69
  SkeletonText
70
70
  };
71
- //# sourceMappingURL=chunk-PUQL4CGB.mjs.map
71
+ //# sourceMappingURL=chunk-2MN255BK.mjs.map
package/dist/{chunk-SD6HP7BI.mjs → chunk-33KF2MVP.mjs} RENAMED
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  Skeleton
4
- } from "./chunk-DWX5AZOS.mjs";
4
+ } from "./chunk-MMI6HELC.mjs";
5
5
 
6
6
  // src/skeleton-circle.tsx
7
7
  import { forwardRef } from "@yamada-ui/core";
@@ -40,4 +40,4 @@ SkeletonCircle.__ui__ = "SkeletonCircle";
40
40
  export {
41
41
  SkeletonCircle
42
42
  };
43
- //# sourceMappingURL=chunk-SD6HP7BI.mjs.map
43
+ //# sourceMappingURL=chunk-33KF2MVP.mjs.map
package/dist/{chunk-DWX5AZOS.mjs → chunk-MMI6HELC.mjs} RENAMED
@@ -10,7 +10,7 @@ import {
10
10
  import { useAnimation } from "@yamada-ui/use-animation";
11
11
  import { usePrevious } from "@yamada-ui/use-previous";
12
12
  import { useValue } from "@yamada-ui/use-value";
13
- import { cx, getValidChildren, useIsMounted } from "@yamada-ui/utils";
13
+ import { cx, getValidChildren, useMounted } from "@yamada-ui/utils";
14
14
  import { jsx } from "react/jsx-runtime";
15
15
  var Skeleton = forwardRef((props, ref) => {
16
16
  const [styles, mergedProps] = useComponentStyle("Skeleton", props);
@@ -27,7 +27,7 @@ var Skeleton = forwardRef((props, ref) => {
27
27
  startColor: _startColor,
28
28
  ...rest
29
29
  } = omitThemeProps(mergedProps);
30
- const [isMounted] = useIsMounted();
30
+ const [mounted] = useMounted();
31
31
  const validChildren = getValidChildren(children);
32
32
  const prevIsLoaded = usePrevious(isLoaded);
33
33
  const startColor = useValue(_startColor);
@@ -79,7 +79,7 @@ var Skeleton = forwardRef((props, ref) => {
79
79
  ...styles
80
80
  };
81
81
  if (loaded) {
82
- const animation2 = !isMounted() || prevIsLoaded ? "none" : fadeIn;
82
+ const animation2 = !mounted() || prevIsLoaded ? "none" : fadeIn;
83
83
  return /* @__PURE__ */ jsx(
84
84
  ui.div,
85
85
  {
@@ -112,4 +112,4 @@ Skeleton.__ui__ = "Skeleton";
112
112
  export {
113
113
  Skeleton
114
114
  };
115
- //# sourceMappingURL=chunk-DWX5AZOS.mjs.map
115
+ //# sourceMappingURL=chunk-MMI6HELC.mjs.map
package/dist/chunk-MMI6HELC.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, useMounted } 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 [mounted] = useMounted()\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 = !mounted() || 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,kBAAkB;AA2I3C;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,OAAO,IAAI,WAAW;AAC7B,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,QAAQ,KAAK,eAAe,SAAS;AAExD,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,uBAAuB,SAAS;AAAA,QAC5D,GAAG;AAAA,QACJ,aAAU;AAAA,QACV,WAAWA;AAAA,QAEV;AAAA;AAAA,IACH;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,SAAS;AAAA,QACtC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,aAAU;AAAA,QACV;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF,CAAC;AAED,SAAS,cAAc;AACvB,SAAS,SAAS;","names":["animation"]}
package/dist/index.js CHANGED
@@ -49,7 +49,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
49
49
  startColor: _startColor,
50
50
  ...rest
51
51
  } = (0, import_core.omitThemeProps)(mergedProps);
52
- const [isMounted] = (0, import_utils.useIsMounted)();
52
+ const [mounted] = (0, import_utils.useMounted)();
53
53
  const validChildren = (0, import_utils.getValidChildren)(children);
54
54
  const prevIsLoaded = (0, import_use_previous.usePrevious)(isLoaded);
55
55
  const startColor = (0, import_use_value.useValue)(_startColor);
@@ -101,7 +101,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
101
101
  ...styles
102
102
  };
103
103
  if (loaded) {
104
- const animation2 = !isMounted() || prevIsLoaded ? "none" : fadeIn;
104
+ const animation2 = !mounted() || prevIsLoaded ? "none" : fadeIn;
105
105
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
106
106
  import_core.ui.div,
107
107
  {
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 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"]}
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, useMounted } 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 [mounted] = useMounted()\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 = !mounted() || 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-SD6HP7BI.mjs";
4
+ } from "./chunk-33KF2MVP.mjs";
5
5
  import {
6
6
  SkeletonText
7
- } from "./chunk-PUQL4CGB.mjs";
7
+ } from "./chunk-2MN255BK.mjs";
8
8
  import {
9
9
  Skeleton
10
- } from "./chunk-DWX5AZOS.mjs";
10
+ } from "./chunk-MMI6HELC.mjs";
11
11
  export {
12
12
  Skeleton,
13
13
  SkeletonCircle,
package/dist/skeleton-circle.js CHANGED
@@ -49,7 +49,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
49
49
  startColor: _startColor,
50
50
  ...rest
51
51
  } = (0, import_core.omitThemeProps)(mergedProps);
52
- const [isMounted] = (0, import_utils.useIsMounted)();
52
+ const [mounted] = (0, import_utils.useMounted)();
53
53
  const validChildren = (0, import_utils.getValidChildren)(children);
54
54
  const prevIsLoaded = (0, import_use_previous.usePrevious)(isLoaded);
55
55
  const startColor = (0, import_use_value.useValue)(_startColor);
@@ -101,7 +101,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
101
101
  ...styles
102
102
  };
103
103
  if (loaded) {
104
- const animation2 = !isMounted() || prevIsLoaded ? "none" : fadeIn;
104
+ const animation2 = !mounted() || prevIsLoaded ? "none" : fadeIn;
105
105
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
106
106
  import_core.ui.div,
107
107
  {
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 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"]}
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, useMounted } 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 [mounted] = useMounted()\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 = !mounted() || 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-SD6HP7BI.mjs";
5
- import "./chunk-DWX5AZOS.mjs";
4
+ } from "./chunk-33KF2MVP.mjs";
5
+ import "./chunk-MMI6HELC.mjs";
6
6
  export {
7
7
  SkeletonCircle
8
8
  };
package/dist/skeleton-text.js CHANGED
@@ -50,7 +50,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
50
50
  startColor: _startColor,
51
51
  ...rest
52
52
  } = (0, import_core.omitThemeProps)(mergedProps);
53
- const [isMounted] = (0, import_utils.useIsMounted)();
53
+ const [mounted] = (0, import_utils.useMounted)();
54
54
  const validChildren = (0, import_utils.getValidChildren)(children);
55
55
  const prevIsLoaded = (0, import_use_previous.usePrevious)(isLoaded);
56
56
  const startColor = (0, import_use_value.useValue)(_startColor);
@@ -102,7 +102,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
102
102
  ...styles
103
103
  };
104
104
  if (loaded) {
105
- const animation2 = !isMounted() || prevIsLoaded ? "none" : fadeIn;
105
+ const animation2 = !mounted() || prevIsLoaded ? "none" : fadeIn;
106
106
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
107
107
  import_core.ui.div,
108
108
  {
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 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"]}
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, useMounted } 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 [mounted] = useMounted()\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 = !mounted() || 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-PUQL4CGB.mjs";
5
- import "./chunk-DWX5AZOS.mjs";
4
+ } from "./chunk-2MN255BK.mjs";
5
+ import "./chunk-MMI6HELC.mjs";
6
6
  export {
7
7
  SkeletonText
8
8
  };
package/dist/skeleton.js CHANGED
@@ -45,7 +45,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
45
45
  startColor: _startColor,
46
46
  ...rest
47
47
  } = (0, import_core.omitThemeProps)(mergedProps);
48
- const [isMounted] = (0, import_utils.useIsMounted)();
48
+ const [mounted] = (0, import_utils.useMounted)();
49
49
  const validChildren = (0, import_utils.getValidChildren)(children);
50
50
  const prevIsLoaded = (0, import_use_previous.usePrevious)(isLoaded);
51
51
  const startColor = (0, import_use_value.useValue)(_startColor);
@@ -97,7 +97,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
97
97
  ...styles
98
98
  };
99
99
  if (loaded) {
100
- const animation2 = !isMounted() || prevIsLoaded ? "none" : fadeIn;
100
+ const animation2 = !mounted() || prevIsLoaded ? "none" : fadeIn;
101
101
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
102
102
  import_core.ui.div,
103
103
  {
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 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"]}
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, useMounted } 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 [mounted] = useMounted()\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 = !mounted() || 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,mBAAiD;AA2I3C;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,OAAO,QAAI,yBAAW;AAC7B,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,QAAQ,KAAK,eAAe,SAAS;AAExD,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-DWX5AZOS.mjs";
4
+ } from "./chunk-MMI6HELC.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.13",
3
+ "version": "1.1.14-dev-20241212094045",
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.16.1",
40
- "@yamada-ui/use-animation": "1.0.45",
41
- "@yamada-ui/use-previous": "1.0.25",
42
- "@yamada-ui/use-value": "1.1.33",
43
- "@yamada-ui/utils": "1.6.1"
39
+ "@yamada-ui/core": "1.16.2-dev-20241212094045",
40
+ "@yamada-ui/use-animation": "1.0.46-dev-20241212094045",
41
+ "@yamada-ui/use-previous": "1.0.26-dev-20241212094045",
42
+ "@yamada-ui/use-value": "1.1.34-dev-20241212094045",
43
+ "@yamada-ui/utils": "1.6.2-dev-20241212094045"
44
44
  },
45
45
  "devDependencies": {
46
46
  "clean-package": "2.2.0",
package/dist/chunk-DWX5AZOS.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 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"]}