@yamada-ui/skeleton 0.3.15 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/{chunk-YXIFCBXC.mjs → chunk-KKTVKWQ4.mjs} +12 -7
  2. package/dist/{chunk-S7YD2RXJ.mjs → chunk-R2DCFGET.mjs} +14 -7
  3. package/dist/index.js +23 -11
  4. package/dist/index.mjs +2 -2
  5. package/dist/skeleton-circle.js +22 -10
  6. package/dist/skeleton-circle.mjs +2 -2
  7. package/dist/skeleton-text.d.mts +2 -2
  8. package/dist/skeleton-text.d.ts +2 -2
  9. package/dist/skeleton-text.js +14 -7
  10. package/dist/skeleton-text.mjs +2 -2
  11. package/dist/skeleton.d.mts +3 -3
  12. package/dist/skeleton.d.ts +3 -3
  13. package/dist/skeleton.js +13 -6
  14. package/dist/skeleton.mjs +1 -1
  15. package/package.json +4 -4
package/dist/{chunk-YXIFCBXC.mjs → chunk-KKTVKWQ4.mjs} RENAMED
@@ -1,11 +1,11 @@
1
1
  "use client"
2
2
  import {
3
3
  Skeleton
4
- } from "./chunk-S7YD2RXJ.mjs";
4
+ } from "./chunk-R2DCFGET.mjs";
5
5
 
6
6
  // src/skeleton-circle.tsx
7
7
  import { forwardRef as forwardRef2 } from "@yamada-ui/core";
8
- import { cx as cx2 } from "@yamada-ui/utils";
8
+ import { cx as cx2, getValidChildren } from "@yamada-ui/utils";
9
9
 
10
10
  // src/skeleton-text.tsx
11
11
  import { ui, forwardRef } from "@yamada-ui/core";
@@ -34,7 +34,7 @@ var SkeletonText = forwardRef(
34
34
  ui.div,
35
35
  {
36
36
  ref,
37
- className: cx("ui-skeleton-text", className),
37
+ className: cx("ui-skeleton__text", className),
38
38
  __css: css,
39
39
  ...rest,
40
40
  children: Array(computedNoOfLines).fill(0).map((_, index) => {
@@ -70,15 +70,20 @@ var SkeletonText = forwardRef(
70
70
  // src/skeleton-circle.tsx
71
71
  import { jsx as jsx2 } from "react/jsx-runtime";
72
72
  var SkeletonCircle = forwardRef2(
73
- ({ className, boxSize = "12", ...rest }, ref) => {
73
+ ({ className, boxSize = "12", children, isFitContent, ...rest }, ref) => {
74
+ const validChildren = getValidChildren(children);
75
+ const hasChildren = !!validChildren.length;
76
+ isFitContent != null ? isFitContent : isFitContent = hasChildren;
74
77
  return /* @__PURE__ */ jsx2(
75
78
  Skeleton,
76
79
  {
77
80
  ref,
78
- className: cx2("ui-skeleton-circle", className),
81
+ className: cx2("ui-skeleton__circle", className),
79
82
  rounded: "full",
80
- boxSize,
81
- ...rest
83
+ isFitContent,
84
+ ...!isFitContent ? { boxSize } : {},
85
+ ...rest,
86
+ children: validChildren
82
87
  }
83
88
  );
84
89
  }
package/dist/{chunk-S7YD2RXJ.mjs → chunk-R2DCFGET.mjs} RENAMED
@@ -10,11 +10,11 @@ import {
10
10
  import { useAnimation } from "@yamada-ui/use-animation";
11
11
  import { usePrevious } from "@yamada-ui/use-previous";
12
12
  import { useValue } from "@yamada-ui/use-value";
13
- import { cx, useIsMounted } from "@yamada-ui/utils";
13
+ import { cx, getValidChildren, useIsMounted } from "@yamada-ui/utils";
14
14
  import { jsx } from "react/jsx-runtime";
15
15
  var Skeleton = forwardRef((props, ref) => {
16
- let [styles, mergedProps] = useComponentStyle("Skeleton", props);
17
- const {
16
+ const [styles, mergedProps] = useComponentStyle("Skeleton", props);
17
+ let {
18
18
  className,
19
19
  startColor,
20
20
  endColor,
@@ -22,12 +22,16 @@ var Skeleton = forwardRef((props, ref) => {
22
22
  speed = 0.8,
23
23
  isLoaded,
24
24
  isFitContent,
25
+ children,
25
26
  ...rest
26
27
  } = omitThemeProps(mergedProps);
27
28
  const isMounted = useIsMounted();
29
+ const validChildren = getValidChildren(children);
28
30
  const prevIsLoaded = usePrevious(isLoaded);
29
31
  const computedStartColor = useValue(startColor);
30
32
  const computedEndColor = useValue(endColor);
33
+ const hasChildren = !!validChildren.length;
34
+ isFitContent != null ? isFitContent : isFitContent = hasChildren;
31
35
  const fadeIn = useAnimation({
32
36
  keyframes: {
33
37
  "0%": {
@@ -57,7 +61,8 @@ var Skeleton = forwardRef((props, ref) => {
57
61
  });
58
62
  const css = {
59
63
  w: isFitContent ? "fit-content" : "full",
60
- h: "4",
64
+ maxW: "full",
65
+ h: isFitContent ? "fit-content" : "4",
61
66
  boxShadow: "none",
62
67
  backgroundClip: "padding-box",
63
68
  cursor: "default",
@@ -75,9 +80,10 @@ var Skeleton = forwardRef((props, ref) => {
75
80
  ui.div,
76
81
  {
77
82
  ref,
78
- className: cx("ui-skeleton", className),
83
+ className: cx("ui-skeleton", "ui-skeleton--loaded", className),
79
84
  ...rest,
80
- animation: animation2
85
+ animation: animation2,
86
+ children: validChildren
81
87
  }
82
88
  );
83
89
  } else {
@@ -88,7 +94,8 @@ var Skeleton = forwardRef((props, ref) => {
88
94
  className: cx("ui-skeleton", className),
89
95
  __css: css,
90
96
  ...rest,
91
- animation
97
+ animation,
98
+ children: validChildren
92
99
  }
93
100
  );
94
101
  }
package/dist/index.js CHANGED
@@ -35,8 +35,8 @@ var import_use_value = require("@yamada-ui/use-value");
35
35
  var import_utils = require("@yamada-ui/utils");
36
36
  var import_jsx_runtime = require("react/jsx-runtime");
37
37
  var Skeleton = (0, import_core.forwardRef)((props, ref) => {
38
- let [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
39
- const {
38
+ const [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
39
+ let {
40
40
  className,
41
41
  startColor,
42
42
  endColor,
@@ -44,12 +44,16 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
44
44
  speed = 0.8,
45
45
  isLoaded,
46
46
  isFitContent,
47
+ children,
47
48
  ...rest
48
49
  } = (0, import_core.omitThemeProps)(mergedProps);
49
50
  const isMounted = (0, import_utils.useIsMounted)();
51
+ const validChildren = (0, import_utils.getValidChildren)(children);
50
52
  const prevIsLoaded = (0, import_use_previous.usePrevious)(isLoaded);
51
53
  const computedStartColor = (0, import_use_value.useValue)(startColor);
52
54
  const computedEndColor = (0, import_use_value.useValue)(endColor);
55
+ const hasChildren = !!validChildren.length;
56
+ isFitContent != null ? isFitContent : isFitContent = hasChildren;
53
57
  const fadeIn = (0, import_use_animation.useAnimation)({
54
58
  keyframes: {
55
59
  "0%": {
@@ -79,7 +83,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
79
83
  });
80
84
  const css = {
81
85
  w: isFitContent ? "fit-content" : "full",
82
- h: "4",
86
+ maxW: "full",
87
+ h: isFitContent ? "fit-content" : "4",
83
88
  boxShadow: "none",
84
89
  backgroundClip: "padding-box",
85
90
  cursor: "default",
@@ -97,9 +102,10 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
97
102
  import_core.ui.div,
98
103
  {
99
104
  ref,
100
- className: (0, import_utils.cx)("ui-skeleton", className),
105
+ className: (0, import_utils.cx)("ui-skeleton", "ui-skeleton--loaded", className),
101
106
  ...rest,
102
- animation: animation2
107
+ animation: animation2,
108
+ children: validChildren
103
109
  }
104
110
  );
105
111
  } else {
@@ -110,7 +116,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
110
116
  className: (0, import_utils.cx)("ui-skeleton", className),
111
117
  __css: css,
112
118
  ...rest,
113
- animation
119
+ animation,
120
+ children: validChildren
114
121
  }
115
122
  );
116
123
  }
@@ -121,15 +128,20 @@ var import_core2 = require("@yamada-ui/core");
121
128
  var import_utils2 = require("@yamada-ui/utils");
122
129
  var import_jsx_runtime2 = require("react/jsx-runtime");
123
130
  var SkeletonCircle = (0, import_core2.forwardRef)(
124
- ({ className, boxSize = "12", ...rest }, ref) => {
131
+ ({ className, boxSize = "12", children, isFitContent, ...rest }, ref) => {
132
+ const validChildren = (0, import_utils2.getValidChildren)(children);
133
+ const hasChildren = !!validChildren.length;
134
+ isFitContent != null ? isFitContent : isFitContent = hasChildren;
125
135
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
126
136
  Skeleton,
127
137
  {
128
138
  ref,
129
- className: (0, import_utils2.cx)("ui-skeleton-circle", className),
139
+ className: (0, import_utils2.cx)("ui-skeleton__circle", className),
130
140
  rounded: "full",
131
- boxSize,
132
- ...rest
141
+ isFitContent,
142
+ ...!isFitContent ? { boxSize } : {},
143
+ ...rest,
144
+ children: validChildren
133
145
  }
134
146
  );
135
147
  }
@@ -162,7 +174,7 @@ var SkeletonText = (0, import_core3.forwardRef)(
162
174
  import_core3.ui.div,
163
175
  {
164
176
  ref,
165
- className: (0, import_utils3.cx)("ui-skeleton-text", className),
177
+ className: (0, import_utils3.cx)("ui-skeleton__text", className),
166
178
  __css: css,
167
179
  ...rest,
168
180
  children: Array(computedNoOfLines).fill(0).map((_, index) => {
package/dist/index.mjs CHANGED
@@ -2,10 +2,10 @@
2
2
  import {
3
3
  SkeletonCircle,
4
4
  SkeletonText
5
- } from "./chunk-YXIFCBXC.mjs";
5
+ } from "./chunk-KKTVKWQ4.mjs";
6
6
  import {
7
7
  Skeleton
8
- } from "./chunk-S7YD2RXJ.mjs";
8
+ } from "./chunk-R2DCFGET.mjs";
9
9
  export {
10
10
  Skeleton,
11
11
  SkeletonCircle,
package/dist/skeleton-circle.js CHANGED
@@ -35,8 +35,8 @@ var import_use_value = require("@yamada-ui/use-value");
35
35
  var import_utils = require("@yamada-ui/utils");
36
36
  var import_jsx_runtime = require("react/jsx-runtime");
37
37
  var Skeleton = (0, import_core.forwardRef)((props, ref) => {
38
- let [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
39
- const {
38
+ const [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
39
+ let {
40
40
  className,
41
41
  startColor,
42
42
  endColor,
@@ -44,12 +44,16 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
44
44
  speed = 0.8,
45
45
  isLoaded,
46
46
  isFitContent,
47
+ children,
47
48
  ...rest
48
49
  } = (0, import_core.omitThemeProps)(mergedProps);
49
50
  const isMounted = (0, import_utils.useIsMounted)();
51
+ const validChildren = (0, import_utils.getValidChildren)(children);
50
52
  const prevIsLoaded = (0, import_use_previous.usePrevious)(isLoaded);
51
53
  const computedStartColor = (0, import_use_value.useValue)(startColor);
52
54
  const computedEndColor = (0, import_use_value.useValue)(endColor);
55
+ const hasChildren = !!validChildren.length;
56
+ isFitContent != null ? isFitContent : isFitContent = hasChildren;
53
57
  const fadeIn = (0, import_use_animation.useAnimation)({
54
58
  keyframes: {
55
59
  "0%": {
@@ -79,7 +83,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
79
83
  });
80
84
  const css = {
81
85
  w: isFitContent ? "fit-content" : "full",
82
- h: "4",
86
+ maxW: "full",
87
+ h: isFitContent ? "fit-content" : "4",
83
88
  boxShadow: "none",
84
89
  backgroundClip: "padding-box",
85
90
  cursor: "default",
@@ -97,9 +102,10 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
97
102
  import_core.ui.div,
98
103
  {
99
104
  ref,
100
- className: (0, import_utils.cx)("ui-skeleton", className),
105
+ className: (0, import_utils.cx)("ui-skeleton", "ui-skeleton--loaded", className),
101
106
  ...rest,
102
- animation: animation2
107
+ animation: animation2,
108
+ children: validChildren
103
109
  }
104
110
  );
105
111
  } else {
@@ -110,7 +116,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
110
116
  className: (0, import_utils.cx)("ui-skeleton", className),
111
117
  __css: css,
112
118
  ...rest,
113
- animation
119
+ animation,
120
+ children: validChildren
114
121
  }
115
122
  );
116
123
  }
@@ -119,15 +126,20 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
119
126
  // src/skeleton-circle.tsx
120
127
  var import_jsx_runtime2 = require("react/jsx-runtime");
121
128
  var SkeletonCircle = (0, import_core2.forwardRef)(
122
- ({ className, boxSize = "12", ...rest }, ref) => {
129
+ ({ className, boxSize = "12", children, isFitContent, ...rest }, ref) => {
130
+ const validChildren = (0, import_utils2.getValidChildren)(children);
131
+ const hasChildren = !!validChildren.length;
132
+ isFitContent != null ? isFitContent : isFitContent = hasChildren;
123
133
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
124
134
  Skeleton,
125
135
  {
126
136
  ref,
127
- className: (0, import_utils2.cx)("ui-skeleton-circle", className),
137
+ className: (0, import_utils2.cx)("ui-skeleton__circle", className),
128
138
  rounded: "full",
129
- boxSize,
130
- ...rest
139
+ isFitContent,
140
+ ...!isFitContent ? { boxSize } : {},
141
+ ...rest,
142
+ children: validChildren
131
143
  }
132
144
  );
133
145
  }
package/dist/skeleton-circle.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  "use client"
2
2
  import {
3
3
  SkeletonCircle
4
- } from "./chunk-YXIFCBXC.mjs";
5
- import "./chunk-S7YD2RXJ.mjs";
4
+ } from "./chunk-KKTVKWQ4.mjs";
5
+ import "./chunk-R2DCFGET.mjs";
6
6
  export {
7
7
  SkeletonCircle
8
8
  };
package/dist/skeleton-text.d.mts CHANGED
@@ -6,11 +6,11 @@ type SkeletonTextOptions = {
6
6
  /**
7
7
  * The CSS `gap` property.
8
8
  */
9
- gap?: CSSUIProps['gap'];
9
+ gap?: CSSUIProps["gap"];
10
10
  /**
11
11
  * The CSS `height` property.
12
12
  */
13
- textHeight?: CSSUIProps['height'];
13
+ textHeight?: CSSUIProps["height"];
14
14
  };
15
15
  type SkeletonTextProps = SkeletonProps & SkeletonTextOptions;
16
16
  declare const SkeletonText: _yamada_ui_core.Component<"div", SkeletonTextProps>;
package/dist/skeleton-text.d.ts CHANGED
@@ -6,11 +6,11 @@ type SkeletonTextOptions = {
6
6
  /**
7
7
  * The CSS `gap` property.
8
8
  */
9
- gap?: CSSUIProps['gap'];
9
+ gap?: CSSUIProps["gap"];
10
10
  /**
11
11
  * The CSS `height` property.
12
12
  */
13
- textHeight?: CSSUIProps['height'];
13
+ textHeight?: CSSUIProps["height"];
14
14
  };
15
15
  type SkeletonTextProps = SkeletonProps & SkeletonTextOptions;
16
16
  declare const SkeletonText: _yamada_ui_core.Component<"div", SkeletonTextProps>;
package/dist/skeleton-text.js CHANGED
@@ -36,8 +36,8 @@ var import_use_value = require("@yamada-ui/use-value");
36
36
  var import_utils = require("@yamada-ui/utils");
37
37
  var import_jsx_runtime = require("react/jsx-runtime");
38
38
  var Skeleton = (0, import_core.forwardRef)((props, ref) => {
39
- let [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
40
- const {
39
+ const [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
40
+ let {
41
41
  className,
42
42
  startColor,
43
43
  endColor,
@@ -45,12 +45,16 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
45
45
  speed = 0.8,
46
46
  isLoaded,
47
47
  isFitContent,
48
+ children,
48
49
  ...rest
49
50
  } = (0, import_core.omitThemeProps)(mergedProps);
50
51
  const isMounted = (0, import_utils.useIsMounted)();
52
+ const validChildren = (0, import_utils.getValidChildren)(children);
51
53
  const prevIsLoaded = (0, import_use_previous.usePrevious)(isLoaded);
52
54
  const computedStartColor = (0, import_use_value.useValue)(startColor);
53
55
  const computedEndColor = (0, import_use_value.useValue)(endColor);
56
+ const hasChildren = !!validChildren.length;
57
+ isFitContent != null ? isFitContent : isFitContent = hasChildren;
54
58
  const fadeIn = (0, import_use_animation.useAnimation)({
55
59
  keyframes: {
56
60
  "0%": {
@@ -80,7 +84,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
80
84
  });
81
85
  const css = {
82
86
  w: isFitContent ? "fit-content" : "full",
83
- h: "4",
87
+ maxW: "full",
88
+ h: isFitContent ? "fit-content" : "4",
84
89
  boxShadow: "none",
85
90
  backgroundClip: "padding-box",
86
91
  cursor: "default",
@@ -98,9 +103,10 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
98
103
  import_core.ui.div,
99
104
  {
100
105
  ref,
101
- className: (0, import_utils.cx)("ui-skeleton", className),
106
+ className: (0, import_utils.cx)("ui-skeleton", "ui-skeleton--loaded", className),
102
107
  ...rest,
103
- animation: animation2
108
+ animation: animation2,
109
+ children: validChildren
104
110
  }
105
111
  );
106
112
  } else {
@@ -111,7 +117,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
111
117
  className: (0, import_utils.cx)("ui-skeleton", className),
112
118
  __css: css,
113
119
  ...rest,
114
- animation
120
+ animation,
121
+ children: validChildren
115
122
  }
116
123
  );
117
124
  }
@@ -141,7 +148,7 @@ var SkeletonText = (0, import_core2.forwardRef)(
141
148
  import_core2.ui.div,
142
149
  {
143
150
  ref,
144
- className: (0, import_utils2.cx)("ui-skeleton-text", className),
151
+ className: (0, import_utils2.cx)("ui-skeleton__text", className),
145
152
  __css: css,
146
153
  ...rest,
147
154
  children: Array(computedNoOfLines).fill(0).map((_, index) => {
package/dist/skeleton-text.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  "use client"
2
2
  import {
3
3
  SkeletonText
4
- } from "./chunk-YXIFCBXC.mjs";
5
- import "./chunk-S7YD2RXJ.mjs";
4
+ } from "./chunk-KKTVKWQ4.mjs";
5
+ import "./chunk-R2DCFGET.mjs";
6
6
  export {
7
7
  SkeletonText
8
8
  };
package/dist/skeleton.d.mts CHANGED
@@ -5,11 +5,11 @@ type SkeletonOptions = {
5
5
  /**
6
6
  * The color at the animation start.
7
7
  */
8
- startColor?: CSSUIProps['color'];
8
+ startColor?: CSSUIProps["color"];
9
9
  /**
10
10
  * The color at the animation end.
11
11
  */
12
- endColor?: CSSUIProps['color'];
12
+ endColor?: CSSUIProps["color"];
13
13
  /**
14
14
  * If `true`, it'll render its children with a nice fade transition.
15
15
  *
@@ -35,7 +35,7 @@ type SkeletonOptions = {
35
35
  */
36
36
  isFitContent?: boolean;
37
37
  };
38
- type SkeletonProps = HTMLUIProps<'div'> & ThemeProps<'Skeleton'> & SkeletonOptions;
38
+ type SkeletonProps = HTMLUIProps<"div"> & ThemeProps<"Skeleton"> & SkeletonOptions;
39
39
  declare const Skeleton: _yamada_ui_core.Component<"div", SkeletonProps>;
40
40
 
41
41
  export { Skeleton, SkeletonProps };
package/dist/skeleton.d.ts CHANGED
@@ -5,11 +5,11 @@ type SkeletonOptions = {
5
5
  /**
6
6
  * The color at the animation start.
7
7
  */
8
- startColor?: CSSUIProps['color'];
8
+ startColor?: CSSUIProps["color"];
9
9
  /**
10
10
  * The color at the animation end.
11
11
  */
12
- endColor?: CSSUIProps['color'];
12
+ endColor?: CSSUIProps["color"];
13
13
  /**
14
14
  * If `true`, it'll render its children with a nice fade transition.
15
15
  *
@@ -35,7 +35,7 @@ type SkeletonOptions = {
35
35
  */
36
36
  isFitContent?: boolean;
37
37
  };
38
- type SkeletonProps = HTMLUIProps<'div'> & ThemeProps<'Skeleton'> & SkeletonOptions;
38
+ type SkeletonProps = HTMLUIProps<"div"> & ThemeProps<"Skeleton"> & SkeletonOptions;
39
39
  declare const Skeleton: _yamada_ui_core.Component<"div", SkeletonProps>;
40
40
 
41
41
  export { Skeleton, SkeletonProps };
package/dist/skeleton.js CHANGED
@@ -31,8 +31,8 @@ var import_use_value = require("@yamada-ui/use-value");
31
31
  var import_utils = require("@yamada-ui/utils");
32
32
  var import_jsx_runtime = require("react/jsx-runtime");
33
33
  var Skeleton = (0, import_core.forwardRef)((props, ref) => {
34
- let [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
35
- const {
34
+ const [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
35
+ let {
36
36
  className,
37
37
  startColor,
38
38
  endColor,
@@ -40,12 +40,16 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
40
40
  speed = 0.8,
41
41
  isLoaded,
42
42
  isFitContent,
43
+ children,
43
44
  ...rest
44
45
  } = (0, import_core.omitThemeProps)(mergedProps);
45
46
  const isMounted = (0, import_utils.useIsMounted)();
47
+ const validChildren = (0, import_utils.getValidChildren)(children);
46
48
  const prevIsLoaded = (0, import_use_previous.usePrevious)(isLoaded);
47
49
  const computedStartColor = (0, import_use_value.useValue)(startColor);
48
50
  const computedEndColor = (0, import_use_value.useValue)(endColor);
51
+ const hasChildren = !!validChildren.length;
52
+ isFitContent != null ? isFitContent : isFitContent = hasChildren;
49
53
  const fadeIn = (0, import_use_animation.useAnimation)({
50
54
  keyframes: {
51
55
  "0%": {
@@ -75,7 +79,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
75
79
  });
76
80
  const css = {
77
81
  w: isFitContent ? "fit-content" : "full",
78
- h: "4",
82
+ maxW: "full",
83
+ h: isFitContent ? "fit-content" : "4",
79
84
  boxShadow: "none",
80
85
  backgroundClip: "padding-box",
81
86
  cursor: "default",
@@ -93,9 +98,10 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
93
98
  import_core.ui.div,
94
99
  {
95
100
  ref,
96
- className: (0, import_utils.cx)("ui-skeleton", className),
101
+ className: (0, import_utils.cx)("ui-skeleton", "ui-skeleton--loaded", className),
97
102
  ...rest,
98
- animation: animation2
103
+ animation: animation2,
104
+ children: validChildren
99
105
  }
100
106
  );
101
107
  } else {
@@ -106,7 +112,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
106
112
  className: (0, import_utils.cx)("ui-skeleton", className),
107
113
  __css: css,
108
114
  ...rest,
109
- animation
115
+ animation,
116
+ children: validChildren
110
117
  }
111
118
  );
112
119
  }
package/dist/skeleton.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  Skeleton
4
- } from "./chunk-S7YD2RXJ.mjs";
4
+ } from "./chunk-R2DCFGET.mjs";
5
5
  export {
6
6
  Skeleton
7
7
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/skeleton",
3
- "version": "0.3.15",
3
+ "version": "0.4.0",
4
4
  "description": "Yamada UI skeleton component",
5
5
  "keywords": [
6
6
  "yamada",
@@ -35,9 +35,9 @@
35
35
  "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
36
36
  },
37
37
  "dependencies": {
38
- "@yamada-ui/core": "0.12.5",
39
- "@yamada-ui/use-animation": "0.4.4",
40
- "@yamada-ui/use-value": "0.2.15",
38
+ "@yamada-ui/core": "0.12.6",
39
+ "@yamada-ui/use-animation": "0.4.5",
40
+ "@yamada-ui/use-value": "0.2.16",
41
41
  "@yamada-ui/use-previous": "0.2.5",
42
42
  "@yamada-ui/utils": "0.3.3"
43
43
  },