@yamada-ui/skeleton 0.1.11 → 0.2.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.
@@ -19,6 +19,7 @@ var Skeleton = forwardRef((props, ref) => {
19
19
  fadeDuration = 0.4,
20
20
  speed = 0.8,
21
21
  isLoaded,
22
+ isFitContent,
22
23
  ...rest
23
24
  } = omitThemeProps(mergedProps);
24
25
  const isMounted = useIsMounted();
@@ -53,7 +54,7 @@ var Skeleton = forwardRef((props, ref) => {
53
54
  timingFunction: "linear"
54
55
  });
55
56
  const css = {
56
- w: "full",
57
+ w: isFitContent ? "fit-content" : "full",
57
58
  h: "4",
58
59
  boxShadow: "none",
59
60
  backgroundClip: "padding-box",
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  Skeleton
3
- } from "./chunk-LK7WNBJJ.mjs";
3
+ } from "./chunk-IYTD2ZGA.mjs";
4
4
 
5
5
  // src/skeleton-circle.tsx
6
6
  import { forwardRef as forwardRef2 } from "@yamada-ui/core";
package/dist/index.js CHANGED
@@ -42,6 +42,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
42
42
  fadeDuration = 0.4,
43
43
  speed = 0.8,
44
44
  isLoaded,
45
+ isFitContent,
45
46
  ...rest
46
47
  } = (0, import_core.omitThemeProps)(mergedProps);
47
48
  const isMounted = (0, import_utils.useIsMounted)();
@@ -76,7 +77,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
76
77
  timingFunction: "linear"
77
78
  });
78
79
  const css = {
79
- w: "full",
80
+ w: isFitContent ? "fit-content" : "full",
80
81
  h: "4",
81
82
  boxShadow: "none",
82
83
  backgroundClip: "padding-box",
package/dist/index.mjs CHANGED
@@ -1,10 +1,10 @@
1
1
  import {
2
2
  SkeletonCircle,
3
3
  SkeletonText
4
- } from "./chunk-I64RKGOG.mjs";
4
+ } from "./chunk-J7ZVFXMK.mjs";
5
5
  import {
6
6
  Skeleton
7
- } from "./chunk-LK7WNBJJ.mjs";
7
+ } from "./chunk-IYTD2ZGA.mjs";
8
8
  export {
9
9
  Skeleton,
10
10
  SkeletonCircle,
@@ -42,6 +42,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
42
42
  fadeDuration = 0.4,
43
43
  speed = 0.8,
44
44
  isLoaded,
45
+ isFitContent,
45
46
  ...rest
46
47
  } = (0, import_core.omitThemeProps)(mergedProps);
47
48
  const isMounted = (0, import_utils.useIsMounted)();
@@ -76,7 +77,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
76
77
  timingFunction: "linear"
77
78
  });
78
79
  const css = {
79
- w: "full",
80
+ w: isFitContent ? "fit-content" : "full",
80
81
  h: "4",
81
82
  boxShadow: "none",
82
83
  backgroundClip: "padding-box",
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  SkeletonCircle
3
- } from "./chunk-I64RKGOG.mjs";
4
- import "./chunk-LK7WNBJJ.mjs";
3
+ } from "./chunk-J7ZVFXMK.mjs";
4
+ import "./chunk-IYTD2ZGA.mjs";
5
5
  export {
6
6
  SkeletonCircle
7
7
  };
@@ -3,7 +3,13 @@ import { UIProps } from '@yamada-ui/core';
3
3
  import { SkeletonProps } from './skeleton.js';
4
4
 
5
5
  type SkeletonTextOptions = {
6
+ /**
7
+ * The CSS `gap` property.
8
+ */
6
9
  gap?: UIProps['gap'];
10
+ /**
11
+ * The CSS `height` property.
12
+ */
7
13
  textHeight?: UIProps['height'];
8
14
  };
9
15
  type SkeletonTextProps = SkeletonProps & SkeletonTextOptions;
@@ -43,6 +43,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
43
43
  fadeDuration = 0.4,
44
44
  speed = 0.8,
45
45
  isLoaded,
46
+ isFitContent,
46
47
  ...rest
47
48
  } = (0, import_core.omitThemeProps)(mergedProps);
48
49
  const isMounted = (0, import_utils.useIsMounted)();
@@ -77,7 +78,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
77
78
  timingFunction: "linear"
78
79
  });
79
80
  const css = {
80
- w: "full",
81
+ w: isFitContent ? "fit-content" : "full",
81
82
  h: "4",
82
83
  boxShadow: "none",
83
84
  backgroundClip: "padding-box",
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  SkeletonText
3
- } from "./chunk-I64RKGOG.mjs";
4
- import "./chunk-LK7WNBJJ.mjs";
3
+ } from "./chunk-J7ZVFXMK.mjs";
4
+ import "./chunk-IYTD2ZGA.mjs";
5
5
  export {
6
6
  SkeletonText
7
7
  };
@@ -2,11 +2,38 @@ import * as _yamada_ui_core from '@yamada-ui/core';
2
2
  import { HTMLUIProps, ThemeProps, CSSUIProps } from '@yamada-ui/core';
3
3
 
4
4
  type SkeletonOptions = {
5
+ /**
6
+ * The color at the animation start.
7
+ */
5
8
  startColor?: CSSUIProps['color'];
9
+ /**
10
+ * The color at the animation end.
11
+ */
6
12
  endColor?: CSSUIProps['color'];
13
+ /**
14
+ * If `true`, it'll render its children with a nice fade transition.
15
+ *
16
+ * @default false
17
+ */
7
18
  isLoaded?: boolean;
19
+ /**
20
+ * The animation speed in seconds.
21
+ *
22
+ * @default 0.8
23
+ */
8
24
  speed?: string | number;
25
+ /**
26
+ * The fadeIn duration in seconds. Requires `isLoaded` toggled to `true` in order to see the transition.
27
+ *
28
+ * @default 0.4
29
+ */
9
30
  fadeDuration?: string | number;
31
+ /**
32
+ * If `true`, the skeleton will take the width of it's children.
33
+ *
34
+ * @default false
35
+ */
36
+ isFitContent?: boolean;
10
37
  };
11
38
  type SkeletonProps = HTMLUIProps<'div'> & ThemeProps<'Skeleton'> & SkeletonOptions;
12
39
  declare const Skeleton: _yamada_ui_core.Component<"div", SkeletonProps>;
package/dist/skeleton.js CHANGED
@@ -38,6 +38,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
38
38
  fadeDuration = 0.4,
39
39
  speed = 0.8,
40
40
  isLoaded,
41
+ isFitContent,
41
42
  ...rest
42
43
  } = (0, import_core.omitThemeProps)(mergedProps);
43
44
  const isMounted = (0, import_utils.useIsMounted)();
@@ -72,7 +73,7 @@ var Skeleton = (0, import_core.forwardRef)((props, ref) => {
72
73
  timingFunction: "linear"
73
74
  });
74
75
  const css = {
75
- w: "full",
76
+ w: isFitContent ? "fit-content" : "full",
76
77
  h: "4",
77
78
  boxShadow: "none",
78
79
  backgroundClip: "padding-box",
package/dist/skeleton.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  Skeleton
3
- } from "./chunk-LK7WNBJJ.mjs";
3
+ } from "./chunk-IYTD2ZGA.mjs";
4
4
  export {
5
5
  Skeleton
6
6
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/skeleton",
3
- "version": "0.1.11",
3
+ "version": "0.2.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.3.0",
39
- "@yamada-ui/use-animation": "0.1.11",
40
- "@yamada-ui/use-value": "0.1.11",
38
+ "@yamada-ui/core": "0.3.1",
39
+ "@yamada-ui/use-animation": "0.1.12",
40
+ "@yamada-ui/use-value": "0.1.12",
41
41
  "@yamada-ui/use-previous": "0.1.1",
42
42
  "@yamada-ui/utils": "0.1.1"
43
43
  },
@@ -73,6 +73,6 @@
73
73
  "build:fast": "tsup src",
74
74
  "clean": "rimraf dist .turbo",
75
75
  "typecheck": "tsc --noEmit",
76
- "gen:types": "tsx ../../../scripts/generate-types"
76
+ "gen:docs": "tsx ../../../scripts/generate-docs"
77
77
  }
78
78
  }