@yamada-ui/skeleton 1.0.27 → 2.0.0-next-20240607085855
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.
- 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":"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","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
|