@yamada-ui/skeleton 0.3.17 → 0.4.1

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 (11) hide show
  1. package/dist/{chunk-RDBUORKW.mjs → chunk-KKTVKWQ4.mjs} +10 -5
  2. package/dist/{chunk-2K3PWS4S.mjs → chunk-R2DCFGET.mjs} +12 -5
  3. package/dist/index.js +19 -7
  4. package/dist/index.mjs +2 -2
  5. package/dist/skeleton-circle.js +19 -7
  6. package/dist/skeleton-circle.mjs +2 -2
  7. package/dist/skeleton-text.js +11 -4
  8. package/dist/skeleton-text.mjs +2 -2
  9. package/dist/skeleton.js +11 -4
  10. package/dist/skeleton.mjs +1 -1
  11. package/package.json +4 -4
package/dist/{chunk-RDBUORKW.mjs → chunk-KKTVKWQ4.mjs} RENAMED
@@ -1,11 +1,11 @@
1
1
  "use client"
2
2
  import {
3
3
  Skeleton
4
- } from "./chunk-2K3PWS4S.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";
@@ -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
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-2K3PWS4S.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
16
  const [styles, mergedProps] = useComponentStyle("Skeleton", props);
17
- const {
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",
@@ -77,7 +82,8 @@ var Skeleton = forwardRef((props, ref) => {
77
82
  ref,
78
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
@@ -36,7 +36,7 @@ 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
38
  const [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
39
- const {
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",
@@ -99,7 +104,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
99
104
  ref,
100
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
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
  }
package/dist/index.mjs CHANGED
@@ -2,10 +2,10 @@
2
2
  import {
3
3
  SkeletonCircle,
4
4
  SkeletonText
5
- } from "./chunk-RDBUORKW.mjs";
5
+ } from "./chunk-KKTVKWQ4.mjs";
6
6
  import {
7
7
  Skeleton
8
- } from "./chunk-2K3PWS4S.mjs";
8
+ } from "./chunk-R2DCFGET.mjs";
9
9
  export {
10
10
  Skeleton,
11
11
  SkeletonCircle,
package/dist/skeleton-circle.js CHANGED
@@ -36,7 +36,7 @@ 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
38
  const [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
39
- const {
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",
@@ -99,7 +104,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
99
104
  ref,
100
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
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-RDBUORKW.mjs";
5
- import "./chunk-2K3PWS4S.mjs";
4
+ } from "./chunk-KKTVKWQ4.mjs";
5
+ import "./chunk-R2DCFGET.mjs";
6
6
  export {
7
7
  SkeletonCircle
8
8
  };
package/dist/skeleton-text.js CHANGED
@@ -37,7 +37,7 @@ 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
39
  const [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
40
- const {
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",
@@ -100,7 +105,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
100
105
  ref,
101
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
  }
package/dist/skeleton-text.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  "use client"
2
2
  import {
3
3
  SkeletonText
4
- } from "./chunk-RDBUORKW.mjs";
5
- import "./chunk-2K3PWS4S.mjs";
4
+ } from "./chunk-KKTVKWQ4.mjs";
5
+ import "./chunk-R2DCFGET.mjs";
6
6
  export {
7
7
  SkeletonText
8
8
  };
package/dist/skeleton.js CHANGED
@@ -32,7 +32,7 @@ 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
34
  const [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
35
- const {
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",
@@ -95,7 +100,8 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
95
100
  ref,
96
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-2K3PWS4S.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.17",
3
+ "version": "0.4.1",
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.6",
39
- "@yamada-ui/use-animation": "0.4.5",
40
- "@yamada-ui/use-value": "0.2.16",
38
+ "@yamada-ui/core": "0.12.7",
39
+ "@yamada-ui/use-animation": "0.4.6",
40
+ "@yamada-ui/use-value": "0.2.17",
41
41
  "@yamada-ui/use-previous": "0.2.5",
42
42
  "@yamada-ui/utils": "0.3.3"
43
43
  },