@yamada-ui/skeleton 0.3.15 → 0.3.17

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.
@@ -13,7 +13,7 @@ import { useValue } from "@yamada-ui/use-value";
13
13
  import { cx, 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);
16
+ const [styles, mergedProps] = useComponentStyle("Skeleton", props);
17
17
  const {
18
18
  className,
19
19
  startColor,
@@ -75,7 +75,7 @@ var Skeleton = forwardRef((props, ref) => {
75
75
  ui.div,
76
76
  {
77
77
  ref,
78
- className: cx("ui-skeleton", className),
78
+ className: cx("ui-skeleton", "ui-skeleton--loaded", className),
79
79
  ...rest,
80
80
  animation: animation2
81
81
  }
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  Skeleton
4
- } from "./chunk-S7YD2RXJ.mjs";
4
+ } from "./chunk-2K3PWS4S.mjs";
5
5
 
6
6
  // src/skeleton-circle.tsx
7
7
  import { forwardRef as forwardRef2 } 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) => {
@@ -75,7 +75,7 @@ var SkeletonCircle = forwardRef2(
75
75
  Skeleton,
76
76
  {
77
77
  ref,
78
- className: cx2("ui-skeleton-circle", className),
78
+ className: cx2("ui-skeleton__circle", className),
79
79
  rounded: "full",
80
80
  boxSize,
81
81
  ...rest
package/dist/index.js CHANGED
@@ -35,7 +35,7 @@ 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);
38
+ const [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
39
39
  const {
40
40
  className,
41
41
  startColor,
@@ -97,7 +97,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
97
97
  import_core.ui.div,
98
98
  {
99
99
  ref,
100
- className: (0, import_utils.cx)("ui-skeleton", className),
100
+ className: (0, import_utils.cx)("ui-skeleton", "ui-skeleton--loaded", className),
101
101
  ...rest,
102
102
  animation: animation2
103
103
  }
@@ -126,7 +126,7 @@ var SkeletonCircle = (0, import_core2.forwardRef)(
126
126
  Skeleton,
127
127
  {
128
128
  ref,
129
- className: (0, import_utils2.cx)("ui-skeleton-circle", className),
129
+ className: (0, import_utils2.cx)("ui-skeleton__circle", className),
130
130
  rounded: "full",
131
131
  boxSize,
132
132
  ...rest
@@ -162,7 +162,7 @@ var SkeletonText = (0, import_core3.forwardRef)(
162
162
  import_core3.ui.div,
163
163
  {
164
164
  ref,
165
- className: (0, import_utils3.cx)("ui-skeleton-text", className),
165
+ className: (0, import_utils3.cx)("ui-skeleton__text", className),
166
166
  __css: css,
167
167
  ...rest,
168
168
  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-RDBUORKW.mjs";
6
6
  import {
7
7
  Skeleton
8
- } from "./chunk-S7YD2RXJ.mjs";
8
+ } from "./chunk-2K3PWS4S.mjs";
9
9
  export {
10
10
  Skeleton,
11
11
  SkeletonCircle,
@@ -35,7 +35,7 @@ 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);
38
+ const [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
39
39
  const {
40
40
  className,
41
41
  startColor,
@@ -97,7 +97,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
97
97
  import_core.ui.div,
98
98
  {
99
99
  ref,
100
- className: (0, import_utils.cx)("ui-skeleton", className),
100
+ className: (0, import_utils.cx)("ui-skeleton", "ui-skeleton--loaded", className),
101
101
  ...rest,
102
102
  animation: animation2
103
103
  }
@@ -124,7 +124,7 @@ var SkeletonCircle = (0, import_core2.forwardRef)(
124
124
  Skeleton,
125
125
  {
126
126
  ref,
127
- className: (0, import_utils2.cx)("ui-skeleton-circle", className),
127
+ className: (0, import_utils2.cx)("ui-skeleton__circle", className),
128
128
  rounded: "full",
129
129
  boxSize,
130
130
  ...rest
@@ -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-RDBUORKW.mjs";
5
+ import "./chunk-2K3PWS4S.mjs";
6
6
  export {
7
7
  SkeletonCircle
8
8
  };
@@ -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>;
@@ -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>;
@@ -36,7 +36,7 @@ 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);
39
+ const [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
40
40
  const {
41
41
  className,
42
42
  startColor,
@@ -98,7 +98,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
98
98
  import_core.ui.div,
99
99
  {
100
100
  ref,
101
- className: (0, import_utils.cx)("ui-skeleton", className),
101
+ className: (0, import_utils.cx)("ui-skeleton", "ui-skeleton--loaded", className),
102
102
  ...rest,
103
103
  animation: animation2
104
104
  }
@@ -141,7 +141,7 @@ var SkeletonText = (0, import_core2.forwardRef)(
141
141
  import_core2.ui.div,
142
142
  {
143
143
  ref,
144
- className: (0, import_utils2.cx)("ui-skeleton-text", className),
144
+ className: (0, import_utils2.cx)("ui-skeleton__text", className),
145
145
  __css: css,
146
146
  ...rest,
147
147
  children: Array(computedNoOfLines).fill(0).map((_, index) => {
@@ -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-RDBUORKW.mjs";
5
+ import "./chunk-2K3PWS4S.mjs";
6
6
  export {
7
7
  SkeletonText
8
8
  };
@@ -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 };
@@ -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,7 +31,7 @@ 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);
34
+ const [styles, mergedProps] = (0, import_core.useComponentStyle)("Skeleton", props);
35
35
  const {
36
36
  className,
37
37
  startColor,
@@ -93,7 +93,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
93
93
  import_core.ui.div,
94
94
  {
95
95
  ref,
96
- className: (0, import_utils.cx)("ui-skeleton", className),
96
+ className: (0, import_utils.cx)("ui-skeleton", "ui-skeleton--loaded", className),
97
97
  ...rest,
98
98
  animation: animation2
99
99
  }
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-2K3PWS4S.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.3.17",
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
  },