@yamada-ui/skeleton 1.0.27 → 2.0.0-next-20240607085855
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{chunk-CYUQOKYE.mjs → chunk-7CRERVG5.mjs} +1 -11
- package/dist/{chunk-CYUQOKYE.mjs.map → chunk-7CRERVG5.mjs.map} +1 -1
- package/dist/{chunk-7JN6CGNM.mjs → chunk-L42ESS4U.mjs} +2 -2
- package/dist/index.js +0 -10
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/skeleton-circle.js +0 -10
- package/dist/skeleton-circle.js.map +1 -1
- package/dist/skeleton-circle.mjs +2 -2
- package/dist/skeleton-text.js +0 -10
- package/dist/skeleton-text.js.map +1 -1
- package/dist/skeleton-text.mjs +2 -2
- package/dist/skeleton.js +0 -10
- package/dist/skeleton.js.map +1 -1
- package/dist/skeleton.mjs +1 -1
- package/package.json +6 -6
- /package/dist/{chunk-7JN6CGNM.mjs.map → chunk-L42ESS4U.mjs.map} +0 -0
|
@@ -61,17 +61,7 @@ var Skeleton = forwardRef((props, ref) => {
|
|
|
61
61
|
});
|
|
62
62
|
const css = {
|
|
63
63
|
w: isFitContent ? "fit-content" : "100%",
|
|
64
|
-
maxW: "100%",
|
|
65
64
|
h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
|
|
66
|
-
boxShadow: "none",
|
|
67
|
-
backgroundClip: "padding-box",
|
|
68
|
-
cursor: "default",
|
|
69
|
-
color: "transparent",
|
|
70
|
-
pointerEvents: "none",
|
|
71
|
-
userSelect: "none",
|
|
72
|
-
"&::before, &::after, *": {
|
|
73
|
-
visibility: "hidden"
|
|
74
|
-
},
|
|
75
65
|
...styles
|
|
76
66
|
};
|
|
77
67
|
if (isLoaded) {
|
|
@@ -104,4 +94,4 @@ var Skeleton = forwardRef((props, ref) => {
|
|
|
104
94
|
export {
|
|
105
95
|
Skeleton
|
|
106
96
|
};
|
|
107
|
-
//# sourceMappingURL=chunk-
|
|
97
|
+
//# sourceMappingURL=chunk-7CRERVG5.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/skeleton.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ntype SkeletonOptions = {\n /**\n * The color at the animation start.\n */\n startColor?: CSSUIProps[\"color\"]\n /**\n * The color at the animation end.\n */\n endColor?: CSSUIProps[\"color\"]\n /**\n * If `true`, it'll render its children with a nice fade transition.\n *\n * @default false\n */\n isLoaded?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default 0.8\n */\n speed?: string | number\n /**\n * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n *\n * @default 0.4\n */\n fadeDuration?: string | number\n /**\n * If `true`, the skeleton will take the width of it's children.\n *\n * @default false\n */\n isFitContent?: boolean\n}\n\nexport type SkeletonProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"Skeleton\"> &\n SkeletonOptions\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n startColor,\n endColor,\n fadeDuration = 0.4,\n speed = 0.8,\n isLoaded,\n isFitContent,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const computedStartColor = useValue(startColor)\n const computedEndColor = useValue(endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n })\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n borderColor: computedStartColor,\n background: computedStartColor,\n },\n \"100%\": {\n borderColor: computedEndColor,\n background: computedEndColor,\n },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n direction: \"alternate\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n w: isFitContent ? \"fit-content\" : \"100%\",\n
|
|
1
|
+
{"version":3,"sources":["../src/skeleton.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ntype SkeletonOptions = {\n /**\n * The color at the animation start.\n */\n startColor?: CSSUIProps[\"color\"]\n /**\n * The color at the animation end.\n */\n endColor?: CSSUIProps[\"color\"]\n /**\n * If `true`, it'll render its children with a nice fade transition.\n *\n * @default false\n */\n isLoaded?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default 0.8\n */\n speed?: string | number\n /**\n * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n *\n * @default 0.4\n */\n fadeDuration?: string | number\n /**\n * If `true`, the skeleton will take the width of it's children.\n *\n * @default false\n */\n isFitContent?: boolean\n}\n\nexport type SkeletonProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"Skeleton\"> &\n SkeletonOptions\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n startColor,\n endColor,\n fadeDuration = 0.4,\n speed = 0.8,\n isLoaded,\n isFitContent,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const computedStartColor = useValue(startColor)\n const computedEndColor = useValue(endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n })\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n borderColor: computedStartColor,\n background: computedStartColor,\n },\n \"100%\": {\n borderColor: computedEndColor,\n background: computedEndColor,\n },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n direction: \"alternate\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n w: isFitContent ? \"fit-content\" : \"100%\",\n h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n ...styles,\n }\n\n if (isLoaded) {\n const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n {...rest}\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n"],"mappings":";;;AAMA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,IAAI,kBAAkB,oBAAoB;AA4G7C;AA9DC,IAAM,WAAW,WAAiC,CAAC,OAAO,QAAQ;AACvE,QAAM,CAAC,QAAQ,WAAW,IAAI,kBAAkB,YAAY,KAAK;AACjE,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,eAAe,WAAW;AAC9B,QAAM,CAAC,SAAS,IAAI,aAAa;AACjC,QAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,QAAM,eAAe,YAAY,QAAQ;AACzC,QAAM,qBAAqB,SAAS,UAAU;AAC9C,QAAM,mBAAmB,SAAS,QAAQ;AAC1C,QAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,uDAAiB;AAEjB,QAAM,SAAS,aAAa;AAAA,IAC1B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,UACE,OAAO,iBAAiB,WAAW,eAAe,GAAG,YAAY;AAAA,EACrE,CAAC;AAED,QAAM,YAAY,aAAa;AAAA,IAC7B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,MACA,QAAQ;AAAA,QACN,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,UAAU,OAAO,UAAU,WAAW,QAAQ,GAAG,KAAK;AAAA,IACtD,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,MAAmB;AAAA,IACvB,GAAG,eAAe,gBAAgB;AAAA,IAClC,GAAG,eAAe,gBAAgB;AAAA,IAClC,GAAG;AAAA,EACL;AAEA,MAAI,UAAU;AACZ,UAAMA,aAAY,CAAC,UAAU,KAAK,eAAe,SAAS;AAE1D,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,uBAAuB,SAAS;AAAA,QAC5D,GAAG;AAAA,QACJ,WAAWA;AAAA,QAEV;AAAA;AAAA,IACH;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,SAAS;AAAA,QACtC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF,CAAC;","names":["animation"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
Skeleton
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-7CRERVG5.mjs";
|
|
5
5
|
|
|
6
6
|
// src/skeleton-circle.tsx
|
|
7
7
|
import { forwardRef as forwardRef2 } from "@yamada-ui/core";
|
|
@@ -99,4 +99,4 @@ export {
|
|
|
99
99
|
SkeletonCircle,
|
|
100
100
|
SkeletonText
|
|
101
101
|
};
|
|
102
|
-
//# sourceMappingURL=chunk-
|
|
102
|
+
//# sourceMappingURL=chunk-L42ESS4U.mjs.map
|
package/dist/index.js
CHANGED
|
@@ -83,17 +83,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
|
|
|
83
83
|
});
|
|
84
84
|
const css = {
|
|
85
85
|
w: isFitContent ? "fit-content" : "100%",
|
|
86
|
-
maxW: "100%",
|
|
87
86
|
h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
|
|
88
|
-
boxShadow: "none",
|
|
89
|
-
backgroundClip: "padding-box",
|
|
90
|
-
cursor: "default",
|
|
91
|
-
color: "transparent",
|
|
92
|
-
pointerEvents: "none",
|
|
93
|
-
userSelect: "none",
|
|
94
|
-
"&::before, &::after, *": {
|
|
95
|
-
visibility: "hidden"
|
|
96
|
-
},
|
|
97
87
|
...styles
|
|
98
88
|
};
|
|
99
89
|
if (isLoaded) {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/skeleton.tsx","../src/skeleton-circle.tsx","../src/skeleton-text.tsx"],"sourcesContent":["export { Skeleton } from \"./skeleton\"\nexport type { SkeletonProps } from \"./skeleton\"\nexport { SkeletonCircle } from \"./skeleton-circle\"\nexport type { SkeletonCircleProps } from \"./skeleton-circle\"\nexport { SkeletonText } from \"./skeleton-text\"\nexport type { SkeletonTextProps } from \"./skeleton-text\"\n","import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ntype SkeletonOptions = {\n /**\n * The color at the animation start.\n */\n startColor?: CSSUIProps[\"color\"]\n /**\n * The color at the animation end.\n */\n endColor?: CSSUIProps[\"color\"]\n /**\n * If `true`, it'll render its children with a nice fade transition.\n *\n * @default false\n */\n isLoaded?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default 0.8\n */\n speed?: string | number\n /**\n * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n *\n * @default 0.4\n */\n fadeDuration?: string | number\n /**\n * If `true`, the skeleton will take the width of it's children.\n *\n * @default false\n */\n isFitContent?: boolean\n}\n\nexport type SkeletonProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"Skeleton\"> &\n SkeletonOptions\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n startColor,\n endColor,\n fadeDuration = 0.4,\n speed = 0.8,\n isLoaded,\n isFitContent,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const computedStartColor = useValue(startColor)\n const computedEndColor = useValue(endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n })\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n borderColor: computedStartColor,\n background: computedStartColor,\n },\n \"100%\": {\n borderColor: computedEndColor,\n background: computedEndColor,\n },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n direction: \"alternate\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n w: isFitContent ? \"fit-content\" : \"100%\",\n maxW: \"100%\",\n h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n boxShadow: \"none\",\n backgroundClip: \"padding-box\",\n cursor: \"default\",\n color: \"transparent\",\n pointerEvents: \"none\",\n userSelect: \"none\",\n \"&::before, &::after, *\": {\n visibility: \"hidden\",\n },\n ...styles,\n }\n\n if (isLoaded) {\n const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n {...rest}\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n","import { forwardRef } from \"@yamada-ui/core\"\nimport { cx, getValidChildren } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./\"\nimport { Skeleton } from \"./\"\n\nexport type SkeletonCircleProps = SkeletonProps\n\nexport const SkeletonCircle = forwardRef<SkeletonCircleProps, \"div\">(\n (\n {\n className,\n boxSize = \"fallback(12, 3rem)\",\n children,\n isFitContent,\n ...rest\n },\n ref,\n ) => {\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n return (\n <Skeleton\n ref={ref}\n className={cx(\"ui-skeleton__circle\", className)}\n rounded=\"fallback(full, 9999px)\"\n isFitContent={isFitContent}\n {...(!isFitContent ? { boxSize } : {})}\n {...rest}\n >\n {validChildren}\n </Skeleton>\n )\n },\n)\n","import type { CSSUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./\"\nimport { Skeleton } from \"./\"\n\ntype SkeletonTextOptions = {\n /**\n * The CSS `gap` property.\n */\n gap?: CSSUIProps[\"gap\"]\n /**\n * The CSS `height` property.\n */\n textHeight?: CSSUIProps[\"height\"]\n}\n\nexport type SkeletonTextProps = Omit<SkeletonProps, \"isFitContent\"> &\n SkeletonTextOptions\n\nexport const SkeletonText = forwardRef<SkeletonTextProps, \"div\">(\n (\n {\n className,\n lineClamp = 3,\n startColor,\n endColor,\n fadeDuration,\n speed,\n isLoaded,\n gap = \"fallback(2, 0.5rem)\",\n textHeight = \"fallback(2, 0.5rem)\",\n children,\n ...rest\n },\n ref,\n ) => {\n const computedLineClamp = useValue(lineClamp)\n\n const css: CSSUIObject = {\n w: \"100%\",\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton__text\", className)}\n __css={css}\n {...rest}\n >\n {Array(computedLineClamp)\n .fill(0)\n .map((_, index) => {\n if (isLoaded && index > 0) return null\n\n const isLast = index + 1 === computedLineClamp\n\n const props: SkeletonProps = !isLoaded\n ? {\n mb: !isLast ? gap : undefined,\n w:\n computedLineClamp > 1 ? (!isLast ? \"100%\" : \"80%\") : \"100%\",\n h: textHeight,\n }\n : {}\n\n return (\n <Skeleton\n key={index}\n {...{\n startColor,\n endColor,\n fadeDuration,\n speed,\n isLoaded,\n ...props,\n }}\n >\n {index === 0 ? children : undefined}\n </Skeleton>\n )\n })}\n </ui.div>\n )\n },\n)\n"],"mappings":"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","names":["animation","import_core","import_utils","import_jsx_runtime","import_core","import_use_value","import_utils","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/skeleton.tsx","../src/skeleton-circle.tsx","../src/skeleton-text.tsx"],"sourcesContent":["export { Skeleton } from \"./skeleton\"\nexport type { SkeletonProps } from \"./skeleton\"\nexport { SkeletonCircle } from \"./skeleton-circle\"\nexport type { SkeletonCircleProps } from \"./skeleton-circle\"\nexport { SkeletonText } from \"./skeleton-text\"\nexport type { SkeletonTextProps } from \"./skeleton-text\"\n","import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ntype SkeletonOptions = {\n /**\n * The color at the animation start.\n */\n startColor?: CSSUIProps[\"color\"]\n /**\n * The color at the animation end.\n */\n endColor?: CSSUIProps[\"color\"]\n /**\n * If `true`, it'll render its children with a nice fade transition.\n *\n * @default false\n */\n isLoaded?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default 0.8\n */\n speed?: string | number\n /**\n * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n *\n * @default 0.4\n */\n fadeDuration?: string | number\n /**\n * If `true`, the skeleton will take the width of it's children.\n *\n * @default false\n */\n isFitContent?: boolean\n}\n\nexport type SkeletonProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"Skeleton\"> &\n SkeletonOptions\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n startColor,\n endColor,\n fadeDuration = 0.4,\n speed = 0.8,\n isLoaded,\n isFitContent,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const computedStartColor = useValue(startColor)\n const computedEndColor = useValue(endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n })\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n borderColor: computedStartColor,\n background: computedStartColor,\n },\n \"100%\": {\n borderColor: computedEndColor,\n background: computedEndColor,\n },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n direction: \"alternate\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n w: isFitContent ? \"fit-content\" : \"100%\",\n h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n ...styles,\n }\n\n if (isLoaded) {\n const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n {...rest}\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n","import { forwardRef } from \"@yamada-ui/core\"\nimport { cx, getValidChildren } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./\"\nimport { Skeleton } from \"./\"\n\nexport type SkeletonCircleProps = SkeletonProps\n\nexport const SkeletonCircle = forwardRef<SkeletonCircleProps, \"div\">(\n (\n {\n className,\n boxSize = \"fallback(12, 3rem)\",\n children,\n isFitContent,\n ...rest\n },\n ref,\n ) => {\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n return (\n <Skeleton\n ref={ref}\n className={cx(\"ui-skeleton__circle\", className)}\n rounded=\"fallback(full, 9999px)\"\n isFitContent={isFitContent}\n {...(!isFitContent ? { boxSize } : {})}\n {...rest}\n >\n {validChildren}\n </Skeleton>\n )\n },\n)\n","import type { CSSUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./\"\nimport { Skeleton } from \"./\"\n\ntype SkeletonTextOptions = {\n /**\n * The CSS `gap` property.\n */\n gap?: CSSUIProps[\"gap\"]\n /**\n * The CSS `height` property.\n */\n textHeight?: CSSUIProps[\"height\"]\n}\n\nexport type SkeletonTextProps = Omit<SkeletonProps, \"isFitContent\"> &\n SkeletonTextOptions\n\nexport const SkeletonText = forwardRef<SkeletonTextProps, \"div\">(\n (\n {\n className,\n lineClamp = 3,\n startColor,\n endColor,\n fadeDuration,\n speed,\n isLoaded,\n gap = \"fallback(2, 0.5rem)\",\n textHeight = \"fallback(2, 0.5rem)\",\n children,\n ...rest\n },\n ref,\n ) => {\n const computedLineClamp = useValue(lineClamp)\n\n const css: CSSUIObject = {\n w: \"100%\",\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton__text\", className)}\n __css={css}\n {...rest}\n >\n {Array(computedLineClamp)\n .fill(0)\n .map((_, index) => {\n if (isLoaded && index > 0) return null\n\n const isLast = index + 1 === computedLineClamp\n\n const props: SkeletonProps = !isLoaded\n ? {\n mb: !isLast ? gap : undefined,\n w:\n computedLineClamp > 1 ? (!isLast ? \"100%\" : \"80%\") : \"100%\",\n h: textHeight,\n }\n : {}\n\n return (\n <Skeleton\n key={index}\n {...{\n startColor,\n endColor,\n fadeDuration,\n speed,\n isLoaded,\n ...props,\n }}\n >\n {index === 0 ? children : undefined}\n </Skeleton>\n )\n })}\n </ui.div>\n )\n },\n)\n"],"mappings":"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","names":["animation","import_core","import_utils","import_jsx_runtime","import_core","import_use_value","import_utils","import_jsx_runtime"]}
|
package/dist/index.mjs
CHANGED
package/dist/skeleton-circle.js
CHANGED
|
@@ -83,17 +83,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
|
|
|
83
83
|
});
|
|
84
84
|
const css = {
|
|
85
85
|
w: isFitContent ? "fit-content" : "100%",
|
|
86
|
-
maxW: "100%",
|
|
87
86
|
h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
|
|
88
|
-
boxShadow: "none",
|
|
89
|
-
backgroundClip: "padding-box",
|
|
90
|
-
cursor: "default",
|
|
91
|
-
color: "transparent",
|
|
92
|
-
pointerEvents: "none",
|
|
93
|
-
userSelect: "none",
|
|
94
|
-
"&::before, &::after, *": {
|
|
95
|
-
visibility: "hidden"
|
|
96
|
-
},
|
|
97
87
|
...styles
|
|
98
88
|
};
|
|
99
89
|
if (isLoaded) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/skeleton-circle.tsx","../src/skeleton.tsx"],"sourcesContent":["import { forwardRef } from \"@yamada-ui/core\"\nimport { cx, getValidChildren } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./\"\nimport { Skeleton } from \"./\"\n\nexport type SkeletonCircleProps = SkeletonProps\n\nexport const SkeletonCircle = forwardRef<SkeletonCircleProps, \"div\">(\n (\n {\n className,\n boxSize = \"fallback(12, 3rem)\",\n children,\n isFitContent,\n ...rest\n },\n ref,\n ) => {\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n return (\n <Skeleton\n ref={ref}\n className={cx(\"ui-skeleton__circle\", className)}\n rounded=\"fallback(full, 9999px)\"\n isFitContent={isFitContent}\n {...(!isFitContent ? { boxSize } : {})}\n {...rest}\n >\n {validChildren}\n </Skeleton>\n )\n },\n)\n","import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ntype SkeletonOptions = {\n /**\n * The color at the animation start.\n */\n startColor?: CSSUIProps[\"color\"]\n /**\n * The color at the animation end.\n */\n endColor?: CSSUIProps[\"color\"]\n /**\n * If `true`, it'll render its children with a nice fade transition.\n *\n * @default false\n */\n isLoaded?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default 0.8\n */\n speed?: string | number\n /**\n * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n *\n * @default 0.4\n */\n fadeDuration?: string | number\n /**\n * If `true`, the skeleton will take the width of it's children.\n *\n * @default false\n */\n isFitContent?: boolean\n}\n\nexport type SkeletonProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"Skeleton\"> &\n SkeletonOptions\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n startColor,\n endColor,\n fadeDuration = 0.4,\n speed = 0.8,\n isLoaded,\n isFitContent,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const computedStartColor = useValue(startColor)\n const computedEndColor = useValue(endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n })\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n borderColor: computedStartColor,\n background: computedStartColor,\n },\n \"100%\": {\n borderColor: computedEndColor,\n background: computedEndColor,\n },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n direction: \"alternate\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n w: isFitContent ? \"fit-content\" : \"100%\",\n
|
|
1
|
+
{"version":3,"sources":["../src/skeleton-circle.tsx","../src/skeleton.tsx"],"sourcesContent":["import { forwardRef } from \"@yamada-ui/core\"\nimport { cx, getValidChildren } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./\"\nimport { Skeleton } from \"./\"\n\nexport type SkeletonCircleProps = SkeletonProps\n\nexport const SkeletonCircle = forwardRef<SkeletonCircleProps, \"div\">(\n (\n {\n className,\n boxSize = \"fallback(12, 3rem)\",\n children,\n isFitContent,\n ...rest\n },\n ref,\n ) => {\n const validChildren = getValidChildren(children)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n return (\n <Skeleton\n ref={ref}\n className={cx(\"ui-skeleton__circle\", className)}\n rounded=\"fallback(full, 9999px)\"\n isFitContent={isFitContent}\n {...(!isFitContent ? { boxSize } : {})}\n {...rest}\n >\n {validChildren}\n </Skeleton>\n )\n },\n)\n","import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ntype SkeletonOptions = {\n /**\n * The color at the animation start.\n */\n startColor?: CSSUIProps[\"color\"]\n /**\n * The color at the animation end.\n */\n endColor?: CSSUIProps[\"color\"]\n /**\n * If `true`, it'll render its children with a nice fade transition.\n *\n * @default false\n */\n isLoaded?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default 0.8\n */\n speed?: string | number\n /**\n * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n *\n * @default 0.4\n */\n fadeDuration?: string | number\n /**\n * If `true`, the skeleton will take the width of it's children.\n *\n * @default false\n */\n isFitContent?: boolean\n}\n\nexport type SkeletonProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"Skeleton\"> &\n SkeletonOptions\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n startColor,\n endColor,\n fadeDuration = 0.4,\n speed = 0.8,\n isLoaded,\n isFitContent,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const computedStartColor = useValue(startColor)\n const computedEndColor = useValue(endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n })\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n borderColor: computedStartColor,\n background: computedStartColor,\n },\n \"100%\": {\n borderColor: computedEndColor,\n background: computedEndColor,\n },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n direction: \"alternate\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n w: isFitContent ? \"fit-content\" : \"100%\",\n h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n ...styles,\n }\n\n if (isLoaded) {\n const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n {...rest}\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,eAA2B;AAC3B,IAAAC,gBAAqC;;;ACKrC,kBAKO;AACP,2BAA6B;AAC7B,0BAA4B;AAC5B,uBAAyB;AACzB,mBAAmD;AA4G7C;AA9DC,IAAM,eAAW,wBAAiC,CAAC,OAAO,QAAQ;AACvE,QAAM,CAAC,QAAQ,WAAW,QAAI,+BAAkB,YAAY,KAAK;AACjE,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,4BAAe,WAAW;AAC9B,QAAM,CAAC,SAAS,QAAI,2BAAa;AACjC,QAAM,oBAAgB,+BAAiB,QAAQ;AAC/C,QAAM,mBAAe,iCAAY,QAAQ;AACzC,QAAM,yBAAqB,2BAAS,UAAU;AAC9C,QAAM,uBAAmB,2BAAS,QAAQ;AAC1C,QAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,uDAAiB;AAEjB,QAAM,aAAS,mCAAa;AAAA,IAC1B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,UACE,OAAO,iBAAiB,WAAW,eAAe,GAAG,YAAY;AAAA,EACrE,CAAC;AAED,QAAM,gBAAY,mCAAa;AAAA,IAC7B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,MACA,QAAQ;AAAA,QACN,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,UAAU,OAAO,UAAU,WAAW,QAAQ,GAAG,KAAK;AAAA,IACtD,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,MAAmB;AAAA,IACvB,GAAG,eAAe,gBAAgB;AAAA,IAClC,GAAG,eAAe,gBAAgB;AAAA,IAClC,GAAG;AAAA,EACL;AAEA,MAAI,UAAU;AACZ,UAAMC,aAAY,CAAC,UAAU,KAAK,eAAe,SAAS;AAE1D,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,eAAe,uBAAuB,SAAS;AAAA,QAC5D,GAAG;AAAA,QACJ,WAAWA;AAAA,QAEV;AAAA;AAAA,IACH;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,eAAe,SAAS;AAAA,QACtC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF,CAAC;;;ADzHK,IAAAC,sBAAA;AAjBC,IAAM,qBAAiB;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,oBAAgB,gCAAiB,QAAQ;AAC/C,UAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,yDAAiB;AAEjB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,uBAAuB,SAAS;AAAA,QAC9C,SAAQ;AAAA,QACR;AAAA,QACC,GAAI,CAAC,eAAe,EAAE,QAAQ,IAAI,CAAC;AAAA,QACnC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;","names":["import_core","import_utils","animation","import_jsx_runtime"]}
|
package/dist/skeleton-circle.mjs
CHANGED
package/dist/skeleton-text.js
CHANGED
|
@@ -84,17 +84,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
|
|
|
84
84
|
});
|
|
85
85
|
const css = {
|
|
86
86
|
w: isFitContent ? "fit-content" : "100%",
|
|
87
|
-
maxW: "100%",
|
|
88
87
|
h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
|
|
89
|
-
boxShadow: "none",
|
|
90
|
-
backgroundClip: "padding-box",
|
|
91
|
-
cursor: "default",
|
|
92
|
-
color: "transparent",
|
|
93
|
-
pointerEvents: "none",
|
|
94
|
-
userSelect: "none",
|
|
95
|
-
"&::before, &::after, *": {
|
|
96
|
-
visibility: "hidden"
|
|
97
|
-
},
|
|
98
88
|
...styles
|
|
99
89
|
};
|
|
100
90
|
if (isLoaded) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/skeleton-text.tsx","../src/skeleton.tsx"],"sourcesContent":["import type { CSSUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./\"\nimport { Skeleton } from \"./\"\n\ntype SkeletonTextOptions = {\n /**\n * The CSS `gap` property.\n */\n gap?: CSSUIProps[\"gap\"]\n /**\n * The CSS `height` property.\n */\n textHeight?: CSSUIProps[\"height\"]\n}\n\nexport type SkeletonTextProps = Omit<SkeletonProps, \"isFitContent\"> &\n SkeletonTextOptions\n\nexport const SkeletonText = forwardRef<SkeletonTextProps, \"div\">(\n (\n {\n className,\n lineClamp = 3,\n startColor,\n endColor,\n fadeDuration,\n speed,\n isLoaded,\n gap = \"fallback(2, 0.5rem)\",\n textHeight = \"fallback(2, 0.5rem)\",\n children,\n ...rest\n },\n ref,\n ) => {\n const computedLineClamp = useValue(lineClamp)\n\n const css: CSSUIObject = {\n w: \"100%\",\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton__text\", className)}\n __css={css}\n {...rest}\n >\n {Array(computedLineClamp)\n .fill(0)\n .map((_, index) => {\n if (isLoaded && index > 0) return null\n\n const isLast = index + 1 === computedLineClamp\n\n const props: SkeletonProps = !isLoaded\n ? {\n mb: !isLast ? gap : undefined,\n w:\n computedLineClamp > 1 ? (!isLast ? \"100%\" : \"80%\") : \"100%\",\n h: textHeight,\n }\n : {}\n\n return (\n <Skeleton\n key={index}\n {...{\n startColor,\n endColor,\n fadeDuration,\n speed,\n isLoaded,\n ...props,\n }}\n >\n {index === 0 ? children : undefined}\n </Skeleton>\n )\n })}\n </ui.div>\n )\n },\n)\n","import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ntype SkeletonOptions = {\n /**\n * The color at the animation start.\n */\n startColor?: CSSUIProps[\"color\"]\n /**\n * The color at the animation end.\n */\n endColor?: CSSUIProps[\"color\"]\n /**\n * If `true`, it'll render its children with a nice fade transition.\n *\n * @default false\n */\n isLoaded?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default 0.8\n */\n speed?: string | number\n /**\n * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n *\n * @default 0.4\n */\n fadeDuration?: string | number\n /**\n * If `true`, the skeleton will take the width of it's children.\n *\n * @default false\n */\n isFitContent?: boolean\n}\n\nexport type SkeletonProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"Skeleton\"> &\n SkeletonOptions\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n startColor,\n endColor,\n fadeDuration = 0.4,\n speed = 0.8,\n isLoaded,\n isFitContent,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const computedStartColor = useValue(startColor)\n const computedEndColor = useValue(endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n })\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n borderColor: computedStartColor,\n background: computedStartColor,\n },\n \"100%\": {\n borderColor: computedEndColor,\n background: computedEndColor,\n },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n direction: \"alternate\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n w: isFitContent ? \"fit-content\" : \"100%\",\n
|
|
1
|
+
{"version":3,"sources":["../src/skeleton-text.tsx","../src/skeleton.tsx"],"sourcesContent":["import type { CSSUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { SkeletonProps } from \"./\"\nimport { Skeleton } from \"./\"\n\ntype SkeletonTextOptions = {\n /**\n * The CSS `gap` property.\n */\n gap?: CSSUIProps[\"gap\"]\n /**\n * The CSS `height` property.\n */\n textHeight?: CSSUIProps[\"height\"]\n}\n\nexport type SkeletonTextProps = Omit<SkeletonProps, \"isFitContent\"> &\n SkeletonTextOptions\n\nexport const SkeletonText = forwardRef<SkeletonTextProps, \"div\">(\n (\n {\n className,\n lineClamp = 3,\n startColor,\n endColor,\n fadeDuration,\n speed,\n isLoaded,\n gap = \"fallback(2, 0.5rem)\",\n textHeight = \"fallback(2, 0.5rem)\",\n children,\n ...rest\n },\n ref,\n ) => {\n const computedLineClamp = useValue(lineClamp)\n\n const css: CSSUIObject = {\n w: \"100%\",\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton__text\", className)}\n __css={css}\n {...rest}\n >\n {Array(computedLineClamp)\n .fill(0)\n .map((_, index) => {\n if (isLoaded && index > 0) return null\n\n const isLast = index + 1 === computedLineClamp\n\n const props: SkeletonProps = !isLoaded\n ? {\n mb: !isLast ? gap : undefined,\n w:\n computedLineClamp > 1 ? (!isLast ? \"100%\" : \"80%\") : \"100%\",\n h: textHeight,\n }\n : {}\n\n return (\n <Skeleton\n key={index}\n {...{\n startColor,\n endColor,\n fadeDuration,\n speed,\n isLoaded,\n ...props,\n }}\n >\n {index === 0 ? children : undefined}\n </Skeleton>\n )\n })}\n </ui.div>\n )\n },\n)\n","import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ntype SkeletonOptions = {\n /**\n * The color at the animation start.\n */\n startColor?: CSSUIProps[\"color\"]\n /**\n * The color at the animation end.\n */\n endColor?: CSSUIProps[\"color\"]\n /**\n * If `true`, it'll render its children with a nice fade transition.\n *\n * @default false\n */\n isLoaded?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default 0.8\n */\n speed?: string | number\n /**\n * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n *\n * @default 0.4\n */\n fadeDuration?: string | number\n /**\n * If `true`, the skeleton will take the width of it's children.\n *\n * @default false\n */\n isFitContent?: boolean\n}\n\nexport type SkeletonProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"Skeleton\"> &\n SkeletonOptions\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n startColor,\n endColor,\n fadeDuration = 0.4,\n speed = 0.8,\n isLoaded,\n isFitContent,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const computedStartColor = useValue(startColor)\n const computedEndColor = useValue(endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n })\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n borderColor: computedStartColor,\n background: computedStartColor,\n },\n \"100%\": {\n borderColor: computedEndColor,\n background: computedEndColor,\n },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n direction: \"alternate\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n w: isFitContent ? \"fit-content\" : \"100%\",\n h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n ...styles,\n }\n\n if (isLoaded) {\n const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n {...rest}\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,eAA+B;AAC/B,IAAAC,oBAAyB;AACzB,IAAAC,gBAAmB;;;ACGnB,kBAKO;AACP,2BAA6B;AAC7B,0BAA4B;AAC5B,uBAAyB;AACzB,mBAAmD;AA4G7C;AA9DC,IAAM,eAAW,wBAAiC,CAAC,OAAO,QAAQ;AACvE,QAAM,CAAC,QAAQ,WAAW,QAAI,+BAAkB,YAAY,KAAK;AACjE,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,4BAAe,WAAW;AAC9B,QAAM,CAAC,SAAS,QAAI,2BAAa;AACjC,QAAM,oBAAgB,+BAAiB,QAAQ;AAC/C,QAAM,mBAAe,iCAAY,QAAQ;AACzC,QAAM,yBAAqB,2BAAS,UAAU;AAC9C,QAAM,uBAAmB,2BAAS,QAAQ;AAC1C,QAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,uDAAiB;AAEjB,QAAM,aAAS,mCAAa;AAAA,IAC1B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,UACE,OAAO,iBAAiB,WAAW,eAAe,GAAG,YAAY;AAAA,EACrE,CAAC;AAED,QAAM,gBAAY,mCAAa;AAAA,IAC7B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,MACA,QAAQ;AAAA,QACN,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,UAAU,OAAO,UAAU,WAAW,QAAQ,GAAG,KAAK;AAAA,IACtD,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,MAAmB;AAAA,IACvB,GAAG,eAAe,gBAAgB;AAAA,IAClC,GAAG,eAAe,gBAAgB;AAAA,IAClC,GAAG;AAAA,EACL;AAEA,MAAI,UAAU;AACZ,UAAMC,aAAY,CAAC,UAAU,KAAK,eAAe,SAAS;AAE1D,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,eAAe,uBAAuB,SAAS;AAAA,QAC5D,GAAG;AAAA,QACJ,WAAWA;AAAA,QAEV;AAAA;AAAA,IACH;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,eAAe,SAAS;AAAA,QACtC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF,CAAC;;;AD7Ea,IAAAC,sBAAA;AA/CP,IAAM,mBAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,wBAAoB,4BAAS,SAAS;AAE5C,UAAM,MAAmB;AAAA,MACvB,GAAG;AAAA,IACL;AAEA,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,qBAAqB,SAAS;AAAA,QAC5C,OAAO;AAAA,QACN,GAAG;AAAA,QAEH,gBAAM,iBAAiB,EACrB,KAAK,CAAC,EACN,IAAI,CAAC,GAAG,UAAU;AACjB,cAAI,YAAY,QAAQ;AAAG,mBAAO;AAElC,gBAAM,SAAS,QAAQ,MAAM;AAE7B,gBAAM,QAAuB,CAAC,WAC1B;AAAA,YACE,IAAI,CAAC,SAAS,MAAM;AAAA,YACpB,GACE,oBAAoB,IAAK,CAAC,SAAS,SAAS,QAAS;AAAA,YACvD,GAAG;AAAA,UACL,IACA,CAAC;AAEL,iBACE;AAAA,YAAC;AAAA;AAAA,cAEE,GAAG;AAAA,gBACF;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,GAAG;AAAA,cACL;AAAA,cAEC,oBAAU,IAAI,WAAW;AAAA;AAAA,YAVrB;AAAA,UAWP;AAAA,QAEJ,CAAC;AAAA;AAAA,IACL;AAAA,EAEJ;AACF;","names":["import_core","import_use_value","import_utils","animation","import_jsx_runtime"]}
|
package/dist/skeleton-text.mjs
CHANGED
package/dist/skeleton.js
CHANGED
|
@@ -79,17 +79,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
|
|
|
79
79
|
});
|
|
80
80
|
const css = {
|
|
81
81
|
w: isFitContent ? "fit-content" : "100%",
|
|
82
|
-
maxW: "100%",
|
|
83
82
|
h: isFitContent ? "fit-content" : "fallback(4, 1rem)",
|
|
84
|
-
boxShadow: "none",
|
|
85
|
-
backgroundClip: "padding-box",
|
|
86
|
-
cursor: "default",
|
|
87
|
-
color: "transparent",
|
|
88
|
-
pointerEvents: "none",
|
|
89
|
-
userSelect: "none",
|
|
90
|
-
"&::before, &::after, *": {
|
|
91
|
-
visibility: "hidden"
|
|
92
|
-
},
|
|
93
83
|
...styles
|
|
94
84
|
};
|
|
95
85
|
if (isLoaded) {
|
package/dist/skeleton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/skeleton.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ntype SkeletonOptions = {\n /**\n * The color at the animation start.\n */\n startColor?: CSSUIProps[\"color\"]\n /**\n * The color at the animation end.\n */\n endColor?: CSSUIProps[\"color\"]\n /**\n * If `true`, it'll render its children with a nice fade transition.\n *\n * @default false\n */\n isLoaded?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default 0.8\n */\n speed?: string | number\n /**\n * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n *\n * @default 0.4\n */\n fadeDuration?: string | number\n /**\n * If `true`, the skeleton will take the width of it's children.\n *\n * @default false\n */\n isFitContent?: boolean\n}\n\nexport type SkeletonProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"Skeleton\"> &\n SkeletonOptions\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n startColor,\n endColor,\n fadeDuration = 0.4,\n speed = 0.8,\n isLoaded,\n isFitContent,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const computedStartColor = useValue(startColor)\n const computedEndColor = useValue(endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n })\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n borderColor: computedStartColor,\n background: computedStartColor,\n },\n \"100%\": {\n borderColor: computedEndColor,\n background: computedEndColor,\n },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n direction: \"alternate\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n w: isFitContent ? \"fit-content\" : \"100%\",\n
|
|
1
|
+
{"version":3,"sources":["../src/skeleton.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { usePrevious } from \"@yamada-ui/use-previous\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, getValidChildren, useIsMounted } from \"@yamada-ui/utils\"\n\ntype SkeletonOptions = {\n /**\n * The color at the animation start.\n */\n startColor?: CSSUIProps[\"color\"]\n /**\n * The color at the animation end.\n */\n endColor?: CSSUIProps[\"color\"]\n /**\n * If `true`, it'll render its children with a nice fade transition.\n *\n * @default false\n */\n isLoaded?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default 0.8\n */\n speed?: string | number\n /**\n * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.\n *\n * @default 0.4\n */\n fadeDuration?: string | number\n /**\n * If `true`, the skeleton will take the width of it's children.\n *\n * @default false\n */\n isFitContent?: boolean\n}\n\nexport type SkeletonProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"Skeleton\"> &\n SkeletonOptions\n\n/**\n * `Skeleton` is a component that acts as a placeholder until content is loaded.\n *\n * @see Docs https://yamada-ui.com/components/feedback/skeleton\n */\nexport const Skeleton = forwardRef<SkeletonProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Skeleton\", props)\n let {\n className,\n startColor,\n endColor,\n fadeDuration = 0.4,\n speed = 0.8,\n isLoaded,\n isFitContent,\n children,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isMounted] = useIsMounted()\n const validChildren = getValidChildren(children)\n const prevIsLoaded = usePrevious(isLoaded)\n const computedStartColor = useValue(startColor)\n const computedEndColor = useValue(endColor)\n const hasChildren = !!validChildren.length\n\n isFitContent ??= hasChildren\n\n const fadeIn = useAnimation({\n keyframes: {\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n },\n duration:\n typeof fadeDuration === \"string\" ? fadeDuration : `${fadeDuration}s`,\n })\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n borderColor: computedStartColor,\n background: computedStartColor,\n },\n \"100%\": {\n borderColor: computedEndColor,\n background: computedEndColor,\n },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n direction: \"alternate\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n w: isFitContent ? \"fit-content\" : \"100%\",\n h: isFitContent ? \"fit-content\" : \"fallback(4, 1rem)\",\n ...styles,\n }\n\n if (isLoaded) {\n const animation = !isMounted() || prevIsLoaded ? \"none\" : fadeIn\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", \"ui-skeleton--loaded\", className)}\n {...rest}\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n } else {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-skeleton\", className)}\n __css={css}\n {...rest}\n animation={animation}\n >\n {validChildren}\n </ui.div>\n )\n }\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,kBAKO;AACP,2BAA6B;AAC7B,0BAA4B;AAC5B,uBAAyB;AACzB,mBAAmD;AA4G7C;AA9DC,IAAM,eAAW,wBAAiC,CAAC,OAAO,QAAQ;AACvE,QAAM,CAAC,QAAQ,WAAW,QAAI,+BAAkB,YAAY,KAAK;AACjE,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,4BAAe,WAAW;AAC9B,QAAM,CAAC,SAAS,QAAI,2BAAa;AACjC,QAAM,oBAAgB,+BAAiB,QAAQ;AAC/C,QAAM,mBAAe,iCAAY,QAAQ;AACzC,QAAM,yBAAqB,2BAAS,UAAU;AAC9C,QAAM,uBAAmB,2BAAS,QAAQ;AAC1C,QAAM,cAAc,CAAC,CAAC,cAAc;AAEpC,uDAAiB;AAEjB,QAAM,aAAS,mCAAa;AAAA,IAC1B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,UACE,OAAO,iBAAiB,WAAW,eAAe,GAAG,YAAY;AAAA,EACrE,CAAC;AAED,QAAM,gBAAY,mCAAa;AAAA,IAC7B,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,MACA,QAAQ;AAAA,QACN,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,UAAU,OAAO,UAAU,WAAW,QAAQ,GAAG,KAAK;AAAA,IACtD,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,MAAmB;AAAA,IACvB,GAAG,eAAe,gBAAgB;AAAA,IAClC,GAAG,eAAe,gBAAgB;AAAA,IAClC,GAAG;AAAA,EACL;AAEA,MAAI,UAAU;AACZ,UAAMA,aAAY,CAAC,UAAU,KAAK,eAAe,SAAS;AAE1D,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,eAAe,uBAAuB,SAAS;AAAA,QAC5D,GAAG;AAAA,QACJ,WAAWA;AAAA,QAEV;AAAA;AAAA,IACH;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,eAAe,SAAS;AAAA,QACtC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF,CAAC;","names":["animation"]}
|
package/dist/skeleton.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/skeleton",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-next-20240607085855",
|
|
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.7.1",
|
|
40
|
-
"@yamada-ui/use-animation": "1.0.27",
|
|
41
|
-
"@yamada-ui/use-value": "1.1.15",
|
|
42
|
-
"@yamada-ui/use-previous": "1.0.14",
|
|
43
|
-
"@yamada-ui/utils": "1.2.1"
|
|
39
|
+
"@yamada-ui/core": "1.7.1-next-20240607085855",
|
|
40
|
+
"@yamada-ui/use-animation": "1.0.27-next-20240607085855",
|
|
41
|
+
"@yamada-ui/use-value": "1.1.15-next-20240607085855",
|
|
42
|
+
"@yamada-ui/use-previous": "1.0.14-next-20240607085855",
|
|
43
|
+
"@yamada-ui/utils": "1.2.1-next-20240607085855"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"react": "^18.0.0",
|
|
File without changes
|