@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.
- package/dist/{chunk-S7YD2RXJ.mjs → chunk-2K3PWS4S.mjs} +2 -2
- package/dist/{chunk-YXIFCBXC.mjs → chunk-RDBUORKW.mjs} +3 -3
- package/dist/index.js +4 -4
- package/dist/index.mjs +2 -2
- package/dist/skeleton-circle.js +3 -3
- package/dist/skeleton-circle.mjs +2 -2
- package/dist/skeleton-text.d.mts +2 -2
- package/dist/skeleton-text.d.ts +2 -2
- package/dist/skeleton-text.js +3 -3
- package/dist/skeleton-text.mjs +2 -2
- package/dist/skeleton.d.mts +3 -3
- package/dist/skeleton.d.ts +3 -3
- package/dist/skeleton.js +2 -2
- package/dist/skeleton.mjs +1 -1
- package/package.json +4 -4
|
@@ -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
|
-
|
|
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-
|
|
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-
|
|
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-
|
|
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
|
-
|
|
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-
|
|
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-
|
|
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
package/dist/skeleton-circle.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
|
-
|
|
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-
|
|
127
|
+
className: (0, import_utils2.cx)("ui-skeleton__circle", className),
|
|
128
128
|
rounded: "full",
|
|
129
129
|
boxSize,
|
|
130
130
|
...rest
|
package/dist/skeleton-circle.mjs
CHANGED
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[
|
|
9
|
+
gap?: CSSUIProps["gap"];
|
|
10
10
|
/**
|
|
11
11
|
* The CSS `height` property.
|
|
12
12
|
*/
|
|
13
|
-
textHeight?: CSSUIProps[
|
|
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[
|
|
9
|
+
gap?: CSSUIProps["gap"];
|
|
10
10
|
/**
|
|
11
11
|
* The CSS `height` property.
|
|
12
12
|
*/
|
|
13
|
-
textHeight?: CSSUIProps[
|
|
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,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
|
-
|
|
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-
|
|
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) => {
|
package/dist/skeleton-text.mjs
CHANGED
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[
|
|
8
|
+
startColor?: CSSUIProps["color"];
|
|
9
9
|
/**
|
|
10
10
|
* The color at the animation end.
|
|
11
11
|
*/
|
|
12
|
-
endColor?: CSSUIProps[
|
|
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<
|
|
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[
|
|
8
|
+
startColor?: CSSUIProps["color"];
|
|
9
9
|
/**
|
|
10
10
|
* The color at the animation end.
|
|
11
11
|
*/
|
|
12
|
-
endColor?: CSSUIProps[
|
|
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<
|
|
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
|
-
|
|
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
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/skeleton",
|
|
3
|
-
"version": "0.3.
|
|
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.
|
|
39
|
-
"@yamada-ui/use-animation": "0.4.
|
|
40
|
-
"@yamada-ui/use-value": "0.2.
|
|
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
|
},
|