@lobehub/ui 5.36.4 → 5.36.5
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/es/Skeleton/Skeleton.mjs +72 -0
- package/es/Skeleton/Skeleton.mjs.map +1 -0
- package/es/Skeleton/SkeletonAvatar.d.mts +10 -0
- package/es/Skeleton/SkeletonAvatar.mjs +32 -0
- package/es/Skeleton/SkeletonAvatar.mjs.map +1 -0
- package/es/Skeleton/SkeletonBlock.d.mts +10 -0
- package/es/Skeleton/SkeletonBlock.mjs +23 -0
- package/es/Skeleton/SkeletonBlock.mjs.map +1 -0
- package/es/Skeleton/SkeletonButton.d.mts +10 -0
- package/es/Skeleton/SkeletonButton.mjs +40 -0
- package/es/Skeleton/SkeletonButton.mjs.map +1 -0
- package/es/Skeleton/SkeletonParagraph.d.mts +10 -0
- package/es/Skeleton/SkeletonParagraph.mjs +43 -0
- package/es/Skeleton/SkeletonParagraph.mjs.map +1 -0
- package/es/Skeleton/SkeletonTags.d.mts +10 -0
- package/es/Skeleton/SkeletonTags.mjs +57 -0
- package/es/Skeleton/SkeletonTags.mjs.map +1 -0
- package/es/Skeleton/SkeletonTitle.d.mts +10 -0
- package/es/Skeleton/SkeletonTitle.mjs +30 -0
- package/es/Skeleton/SkeletonTitle.mjs.map +1 -0
- package/es/Skeleton/index.d.mts +22 -0
- package/es/Skeleton/index.d.ts +1 -0
- package/es/Skeleton/index.js +1 -0
- package/es/Skeleton/index.mjs +19 -0
- package/es/Skeleton/index.mjs.map +1 -0
- package/es/Skeleton/style.mjs +47 -0
- package/es/Skeleton/style.mjs.map +1 -0
- package/es/Skeleton/type.d.mts +59 -0
- package/es/base-ui/Skeleton/SkeletonAvatar.mjs +4 -1
- package/es/base-ui/Skeleton/SkeletonAvatar.mjs.map +1 -1
- package/es/base-ui/Skeleton/style.mjs +3 -1
- package/es/base-ui/Skeleton/style.mjs.map +1 -1
- package/es/base-ui/index.d.mts +4 -4
- package/es/base-ui/index.mjs +3 -3
- package/es/hooks/useNativeButton.mjs +5 -0
- package/es/hooks/useNativeButton.mjs.map +1 -1
- package/es/index.d.mts +9 -5
- package/es/index.mjs +8 -4
- package/package.json +1 -1
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import FlexBasic_default from "../Flex/FlexBasic.mjs";
|
|
3
|
+
import { styles } from "./style.mjs";
|
|
4
|
+
import SkeletonAvatar from "./SkeletonAvatar.mjs";
|
|
5
|
+
import SkeletonParagraph from "./SkeletonParagraph.mjs";
|
|
6
|
+
import SkeletonTitle from "./SkeletonTitle.mjs";
|
|
7
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
+
import { cx } from "antd-style";
|
|
9
|
+
//#region src/Skeleton/Skeleton.tsx
|
|
10
|
+
/**
|
|
11
|
+
* @deprecated Use `Skeleton` from `@lobehub/ui/base-ui` instead.
|
|
12
|
+
*/
|
|
13
|
+
const Skeleton = ({ active, avatar = false, title = true, paragraph = true, className, classNames, styles: customStyles, style, width, height, gap = 16, ...rest }) => {
|
|
14
|
+
const showAvatar = Boolean(avatar);
|
|
15
|
+
const showTitle = Boolean(title);
|
|
16
|
+
const showParagraph = Boolean(paragraph);
|
|
17
|
+
const avatarProps = typeof avatar === "object" ? avatar : void 0;
|
|
18
|
+
const titleProps = typeof title === "object" ? title : void 0;
|
|
19
|
+
const paragraphProps = typeof paragraph === "object" ? paragraph : void 0;
|
|
20
|
+
const rootStyle = {
|
|
21
|
+
...style,
|
|
22
|
+
...customStyles?.root,
|
|
23
|
+
...width !== void 0 ? { width } : {},
|
|
24
|
+
...height !== void 0 ? { height } : {}
|
|
25
|
+
};
|
|
26
|
+
const avatarActive = avatarProps?.active ?? active;
|
|
27
|
+
const titleActive = titleProps?.active ?? active;
|
|
28
|
+
const paragraphActive = paragraphProps?.active ?? active;
|
|
29
|
+
return /* @__PURE__ */ jsxs(FlexBasic_default, {
|
|
30
|
+
horizontal: true,
|
|
31
|
+
align: showParagraph ? "flex-start" : "center",
|
|
32
|
+
className: cx(className, classNames?.root),
|
|
33
|
+
gap,
|
|
34
|
+
style: rootStyle,
|
|
35
|
+
width: "100%",
|
|
36
|
+
...rest,
|
|
37
|
+
children: [showAvatar && /* @__PURE__ */ jsx(SkeletonAvatar, {
|
|
38
|
+
...avatarProps,
|
|
39
|
+
active: avatarActive,
|
|
40
|
+
className: cx(styles.avatar, classNames?.avatar, avatarProps?.className),
|
|
41
|
+
style: {
|
|
42
|
+
...avatarProps?.style,
|
|
43
|
+
...customStyles?.avatar
|
|
44
|
+
}
|
|
45
|
+
}), /* @__PURE__ */ jsxs(FlexBasic_default, {
|
|
46
|
+
gap,
|
|
47
|
+
width: "100%",
|
|
48
|
+
children: [showTitle && /* @__PURE__ */ jsx(SkeletonTitle, {
|
|
49
|
+
...titleProps,
|
|
50
|
+
active: titleActive,
|
|
51
|
+
className: cx(classNames?.title, titleProps?.className),
|
|
52
|
+
style: {
|
|
53
|
+
...titleProps?.style,
|
|
54
|
+
...customStyles?.title
|
|
55
|
+
}
|
|
56
|
+
}), showParagraph && /* @__PURE__ */ jsx(SkeletonParagraph, {
|
|
57
|
+
...paragraphProps,
|
|
58
|
+
active: paragraphActive,
|
|
59
|
+
className: cx(classNames?.paragraph, paragraphProps?.className),
|
|
60
|
+
style: {
|
|
61
|
+
...paragraphProps?.style,
|
|
62
|
+
...customStyles?.paragraph
|
|
63
|
+
}
|
|
64
|
+
})]
|
|
65
|
+
})]
|
|
66
|
+
});
|
|
67
|
+
};
|
|
68
|
+
Skeleton.displayName = "Skeleton";
|
|
69
|
+
//#endregion
|
|
70
|
+
export { Skeleton as default };
|
|
71
|
+
|
|
72
|
+
//# sourceMappingURL=Skeleton.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Skeleton.mjs","names":["Flexbox"],"sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport SkeletonAvatar from './SkeletonAvatar';\nimport SkeletonParagraph from './SkeletonParagraph';\nimport SkeletonTitle from './SkeletonTitle';\nimport { styles } from './style';\nimport type { SkeletonProps } from './type';\n\n/**\n * @deprecated Use `Skeleton` from `@lobehub/ui/base-ui` instead.\n */\nconst Skeleton: FC<SkeletonProps> = ({\n active,\n avatar = false,\n title = true,\n paragraph = true,\n className,\n classNames,\n styles: customStyles,\n style,\n width,\n height,\n gap = 16,\n ...rest\n}) => {\n const showAvatar = Boolean(avatar);\n const showTitle = Boolean(title);\n const showParagraph = Boolean(paragraph);\n const avatarProps = typeof avatar === 'object' ? avatar : undefined;\n const titleProps = typeof title === 'object' ? title : undefined;\n const paragraphProps = typeof paragraph === 'object' ? paragraph : undefined;\n const rootStyle = {\n ...style,\n ...customStyles?.root,\n ...(width !== undefined ? { width } : {}),\n ...(height !== undefined ? { height } : {}),\n };\n\n const avatarActive = avatarProps?.active ?? active;\n const titleActive = titleProps?.active ?? active;\n const paragraphActive = paragraphProps?.active ?? active;\n\n return (\n <Flexbox\n horizontal\n align={showParagraph ? 'flex-start' : 'center'}\n className={cx(className, classNames?.root)}\n gap={gap}\n style={rootStyle}\n width={'100%'}\n {...rest}\n >\n {showAvatar && (\n <SkeletonAvatar\n {...avatarProps}\n active={avatarActive}\n className={cx(styles.avatar, classNames?.avatar, avatarProps?.className)}\n style={{\n ...avatarProps?.style,\n ...customStyles?.avatar,\n }}\n />\n )}\n <Flexbox gap={gap} width={'100%'}>\n {showTitle && (\n <SkeletonTitle\n {...titleProps}\n active={titleActive}\n className={cx(classNames?.title, titleProps?.className)}\n style={{\n ...titleProps?.style,\n ...customStyles?.title,\n }}\n />\n )}\n {showParagraph && (\n <SkeletonParagraph\n {...paragraphProps}\n active={paragraphActive}\n className={cx(classNames?.paragraph, paragraphProps?.className)}\n style={{\n ...paragraphProps?.style,\n ...customStyles?.paragraph,\n }}\n />\n )}\n </Flexbox>\n </Flexbox>\n );\n};\n\nSkeleton.displayName = 'Skeleton';\n\nexport default Skeleton;\n"],"mappings":";;;;;;;;;;;;AAgBA,MAAM,YAA+B,EACnC,QACA,SAAS,OACT,QAAQ,MACR,YAAY,MACZ,WACA,YACA,QAAQ,cACR,OACA,OACA,QACA,MAAM,IACN,GAAG,WACC;CACJ,MAAM,aAAa,QAAQ,MAAM;CACjC,MAAM,YAAY,QAAQ,KAAK;CAC/B,MAAM,gBAAgB,QAAQ,SAAS;CACvC,MAAM,cAAc,OAAO,WAAW,WAAW,SAAS,KAAA;CAC1D,MAAM,aAAa,OAAO,UAAU,WAAW,QAAQ,KAAA;CACvD,MAAM,iBAAiB,OAAO,cAAc,WAAW,YAAY,KAAA;CACnE,MAAM,YAAY;EAChB,GAAG;EACH,GAAG,cAAc;EACjB,GAAI,UAAU,KAAA,IAAY,EAAE,MAAM,IAAI,CAAC;EACvC,GAAI,WAAW,KAAA,IAAY,EAAE,OAAO,IAAI,CAAC;CAC3C;CAEA,MAAM,eAAe,aAAa,UAAU;CAC5C,MAAM,cAAc,YAAY,UAAU;CAC1C,MAAM,kBAAkB,gBAAgB,UAAU;CAElD,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO,gBAAgB,eAAe;EACtC,WAAW,GAAG,WAAW,YAAY,IAAI;EACpC;EACL,OAAO;EACP,OAAO;EACP,GAAI;EAPN,UAAA,CASG,cACC,oBAAC,gBAAD;GACE,GAAI;GACJ,QAAQ;GACR,WAAW,GAAG,OAAO,QAAQ,YAAY,QAAQ,aAAa,SAAS;GACvE,OAAO;IACL,GAAG,aAAa;IAChB,GAAG,cAAc;GACnB;EACD,CAAA,GAEH,qBAACA,mBAAD;GAAc;GAAK,OAAO;GAA1B,UAAA,CACG,aACC,oBAAC,eAAD;IACE,GAAI;IACJ,QAAQ;IACR,WAAW,GAAG,YAAY,OAAO,YAAY,SAAS;IACtD,OAAO;KACL,GAAG,YAAY;KACf,GAAG,cAAc;IACnB;GACD,CAAA,GAEF,iBACC,oBAAC,mBAAD;IACE,GAAI;IACJ,QAAQ;IACR,WAAW,GAAG,YAAY,WAAW,gBAAgB,SAAS;IAC9D,OAAO;KACL,GAAG,gBAAgB;KACnB,GAAG,cAAc;IACnB;GACD,CAAA,CAEI;EACF,CAAA,CAAA;;AAEb;AAEA,SAAS,cAAc"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { SkeletonAvatarProps } from "./type.mjs";
|
|
2
|
+
import { FC } from "react";
|
|
3
|
+
//#region src/Skeleton/SkeletonAvatar.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `Skeleton.Avatar` from `@lobehub/ui/base-ui` instead.
|
|
6
|
+
*/
|
|
7
|
+
declare const SkeletonAvatar: FC<SkeletonAvatarProps>;
|
|
8
|
+
//#endregion
|
|
9
|
+
export { SkeletonAvatar as default };
|
|
10
|
+
//# sourceMappingURL=SkeletonAvatar.d.mts.map
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { styles } from "./style.mjs";
|
|
3
|
+
import SkeletonBlock from "./SkeletonBlock.mjs";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
import { cssVar, cx } from "antd-style";
|
|
6
|
+
//#region src/Skeleton/SkeletonAvatar.tsx
|
|
7
|
+
const DEFAULT_SIZE = 40;
|
|
8
|
+
/**
|
|
9
|
+
* @deprecated Use `Skeleton.Avatar` from `@lobehub/ui/base-ui` instead.
|
|
10
|
+
*/
|
|
11
|
+
const SkeletonAvatar = ({ active, shape = "square", size, width, height, style, className, ...rest }) => {
|
|
12
|
+
const defaultSize = size ?? DEFAULT_SIZE;
|
|
13
|
+
const finalWidth = width ?? defaultSize;
|
|
14
|
+
const finalHeight = height ?? defaultSize;
|
|
15
|
+
const borderRadius = shape === "circle" ? "50%" : cssVar.borderRadius;
|
|
16
|
+
return /* @__PURE__ */ jsx(SkeletonBlock, {
|
|
17
|
+
active,
|
|
18
|
+
className: cx(styles.avatar, className),
|
|
19
|
+
height: finalHeight,
|
|
20
|
+
style: {
|
|
21
|
+
borderRadius,
|
|
22
|
+
...style
|
|
23
|
+
},
|
|
24
|
+
width: finalWidth,
|
|
25
|
+
...rest
|
|
26
|
+
});
|
|
27
|
+
};
|
|
28
|
+
SkeletonAvatar.displayName = "SkeletonAvatar";
|
|
29
|
+
//#endregion
|
|
30
|
+
export { SkeletonAvatar as default };
|
|
31
|
+
|
|
32
|
+
//# sourceMappingURL=SkeletonAvatar.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkeletonAvatar.mjs","names":[],"sources":["../../src/Skeleton/SkeletonAvatar.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport { styles } from './style';\nimport type { SkeletonAvatarProps } from './type';\n\nconst DEFAULT_SIZE = 40;\n\n/**\n * @deprecated Use `Skeleton.Avatar` from `@lobehub/ui/base-ui` instead.\n */\nconst SkeletonAvatar: FC<SkeletonAvatarProps> = ({\n active,\n shape = 'square',\n size,\n width,\n height,\n style,\n className,\n ...rest\n}) => {\n const defaultSize = size ?? DEFAULT_SIZE;\n const finalWidth = width ?? defaultSize;\n const finalHeight = height ?? defaultSize;\n const borderRadius = shape === 'circle' ? '50%' : cssVar.borderRadius;\n\n return (\n <SkeletonBlock\n active={active}\n className={cx(styles.avatar, className)}\n height={finalHeight}\n style={{ borderRadius, ...style }}\n width={finalWidth}\n {...rest}\n />\n );\n};\n\nSkeletonAvatar.displayName = 'SkeletonAvatar';\n\nexport default SkeletonAvatar;\n"],"mappings":";;;;;;AASA,MAAM,eAAe;;;;AAKrB,MAAM,kBAA2C,EAC/C,QACA,QAAQ,UACR,MACA,OACA,QACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,cAAc,QAAQ;CAC5B,MAAM,aAAa,SAAS;CAC5B,MAAM,cAAc,UAAU;CAC9B,MAAM,eAAe,UAAU,WAAW,QAAQ,OAAO;CAEzD,OACE,oBAAC,eAAD;EACU;EACR,WAAW,GAAG,OAAO,QAAQ,SAAS;EACtC,QAAQ;EACR,OAAO;GAAE;GAAc,GAAG;EAAM;EAChC,OAAO;EACP,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { SkeletonBlockProps } from "./type.mjs";
|
|
2
|
+
import { FC } from "react";
|
|
3
|
+
//#region src/Skeleton/SkeletonBlock.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `Skeleton` from `@lobehub/ui/base-ui` instead.
|
|
6
|
+
*/
|
|
7
|
+
declare const SkeletonBlock: FC<SkeletonBlockProps>;
|
|
8
|
+
//#endregion
|
|
9
|
+
export { SkeletonBlock as default };
|
|
10
|
+
//# sourceMappingURL=SkeletonBlock.d.mts.map
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import Block from "../Block/Block.mjs";
|
|
3
|
+
import { styles } from "./style.mjs";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
import { cx } from "antd-style";
|
|
6
|
+
//#region src/Skeleton/SkeletonBlock.tsx
|
|
7
|
+
/**
|
|
8
|
+
* @deprecated Use `Skeleton` from `@lobehub/ui/base-ui` instead.
|
|
9
|
+
*/
|
|
10
|
+
const SkeletonBlock = ({ width = "100%", height = "1em", active, style, className }) => {
|
|
11
|
+
return /* @__PURE__ */ jsx(Block, {
|
|
12
|
+
className: cx(styles.base, active && styles.active, className),
|
|
13
|
+
height,
|
|
14
|
+
style,
|
|
15
|
+
variant: "filled",
|
|
16
|
+
width
|
|
17
|
+
});
|
|
18
|
+
};
|
|
19
|
+
SkeletonBlock.displayName = "SkeletonBlock";
|
|
20
|
+
//#endregion
|
|
21
|
+
export { SkeletonBlock as default };
|
|
22
|
+
|
|
23
|
+
//# sourceMappingURL=SkeletonBlock.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkeletonBlock.mjs","names":[],"sources":["../../src/Skeleton/SkeletonBlock.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport Block from '@/Block';\nimport type { SkeletonBlockProps } from '@/Skeleton/type';\n\nimport { styles } from './style';\n\n/**\n * @deprecated Use `Skeleton` from `@lobehub/ui/base-ui` instead.\n */\nconst SkeletonBlock: FC<SkeletonBlockProps> = ({\n width = '100%',\n height = '1em',\n active,\n style,\n className,\n}) => {\n return (\n <Block\n className={cx(styles.base, active && styles.active, className)}\n height={height}\n style={style}\n variant={'filled'}\n width={width}\n />\n );\n};\n\nSkeletonBlock.displayName = 'SkeletonBlock';\n\nexport default SkeletonBlock;\n"],"mappings":";;;;;;;;;AAaA,MAAM,iBAAyC,EAC7C,QAAQ,QACR,SAAS,OACT,QACA,OACA,gBACI;CACJ,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,OAAO,MAAM,UAAU,OAAO,QAAQ,SAAS;EACrD;EACD;EACP,SAAS;EACF;CACR,CAAA;AAEL;AAEA,cAAc,cAAc"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { SkeletonButtonProps } from "./type.mjs";
|
|
2
|
+
import { FC } from "react";
|
|
3
|
+
//#region src/Skeleton/SkeletonButton.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `Skeleton` with an explicit `height` from `@lobehub/ui/base-ui` instead.
|
|
6
|
+
*/
|
|
7
|
+
declare const SkeletonButton: FC<SkeletonButtonProps>;
|
|
8
|
+
//#endregion
|
|
9
|
+
export { SkeletonButton as default };
|
|
10
|
+
//# sourceMappingURL=SkeletonButton.d.mts.map
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import SkeletonBlock from "./SkeletonBlock.mjs";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { cssVar } from "antd-style";
|
|
5
|
+
//#region src/Skeleton/SkeletonButton.tsx
|
|
6
|
+
const HEIGHT_MAP = {
|
|
7
|
+
default: 36,
|
|
8
|
+
large: 46,
|
|
9
|
+
small: 28
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* @deprecated Use `Skeleton` with an explicit `height` from `@lobehub/ui/base-ui` instead.
|
|
13
|
+
*/
|
|
14
|
+
const SkeletonButton = ({ active, block = false, shape = "default", size = "default", width, height, style, className, ...rest }) => {
|
|
15
|
+
const resolvedSize = size ?? "default";
|
|
16
|
+
const baseHeight = height ?? HEIGHT_MAP[resolvedSize];
|
|
17
|
+
const finalWidth = width ?? (block ? "100%" : shape === "circle" ? baseHeight : 80);
|
|
18
|
+
const RADIUS_MAP = {
|
|
19
|
+
default: cssVar.borderRadius,
|
|
20
|
+
large: cssVar.borderRadiusLG,
|
|
21
|
+
small: cssVar.borderRadiusSM
|
|
22
|
+
};
|
|
23
|
+
const borderRadius = shape === "circle" ? "50%" : shape === "round" ? `calc(${cssVar.borderRadius} * 2)` : RADIUS_MAP[resolvedSize];
|
|
24
|
+
return /* @__PURE__ */ jsx(SkeletonBlock, {
|
|
25
|
+
active,
|
|
26
|
+
className,
|
|
27
|
+
height: baseHeight,
|
|
28
|
+
style: {
|
|
29
|
+
borderRadius,
|
|
30
|
+
...style
|
|
31
|
+
},
|
|
32
|
+
width: finalWidth,
|
|
33
|
+
...rest
|
|
34
|
+
});
|
|
35
|
+
};
|
|
36
|
+
SkeletonButton.displayName = "SkeletonButton";
|
|
37
|
+
//#endregion
|
|
38
|
+
export { SkeletonButton as default };
|
|
39
|
+
|
|
40
|
+
//# sourceMappingURL=SkeletonButton.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkeletonButton.mjs","names":[],"sources":["../../src/Skeleton/SkeletonButton.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar } from 'antd-style';\nimport { type FC } from 'react';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport type { SkeletonButtonProps } from './type';\n\nconst HEIGHT_MAP: Record<'large' | 'small' | 'default', number> = {\n default: 36,\n large: 46,\n small: 28,\n};\n\n/**\n * @deprecated Use `Skeleton` with an explicit `height` from `@lobehub/ui/base-ui` instead.\n */\nconst SkeletonButton: FC<SkeletonButtonProps> = ({\n active,\n block = false,\n shape = 'default',\n size = 'default',\n width,\n height,\n style,\n className,\n ...rest\n}) => {\n const resolvedSize = size ?? 'default';\n const baseHeight = height ?? HEIGHT_MAP[resolvedSize];\n const defaultWidth = block ? '100%' : shape === 'circle' ? baseHeight : 80;\n const finalWidth = width ?? defaultWidth;\n\n const RADIUS_MAP: Record<'large' | 'small' | 'default', string> = {\n default: cssVar.borderRadius,\n large: cssVar.borderRadiusLG,\n small: cssVar.borderRadiusSM,\n };\n\n const borderRadius =\n shape === 'circle'\n ? '50%'\n : shape === 'round'\n ? `calc(${cssVar.borderRadius} * 2)`\n : RADIUS_MAP[resolvedSize];\n\n return (\n <SkeletonBlock\n active={active}\n className={className}\n height={baseHeight}\n style={{ borderRadius, ...style }}\n width={finalWidth}\n {...rest}\n />\n );\n};\n\nSkeletonButton.displayName = 'SkeletonButton';\n\nexport default SkeletonButton;\n"],"mappings":";;;;;AAQA,MAAM,aAA4D;CAChE,SAAS;CACT,OAAO;CACP,OAAO;AACT;;;;AAKA,MAAM,kBAA2C,EAC/C,QACA,QAAQ,OACR,QAAQ,WACR,OAAO,WACP,OACA,QACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,eAAe,QAAQ;CAC7B,MAAM,aAAa,UAAU,WAAW;CAExC,MAAM,aAAa,UADE,QAAQ,SAAS,UAAU,WAAW,aAAa;CAGxE,MAAM,aAA4D;EAChE,SAAS,OAAO;EAChB,OAAO,OAAO;EACd,OAAO,OAAO;CAChB;CAEA,MAAM,eACJ,UAAU,WACN,QACA,UAAU,UACR,QAAQ,OAAO,aAAa,SAC5B,WAAW;CAEnB,OACE,oBAAC,eAAD;EACU;EACG;EACX,QAAQ;EACR,OAAO;GAAE;GAAc,GAAG;EAAM;EAChC,OAAO;EACP,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { SkeletonParagraphProps } from "./type.mjs";
|
|
2
|
+
import { FC } from "react";
|
|
3
|
+
//#region src/Skeleton/SkeletonParagraph.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `Skeleton.Text` from `@lobehub/ui/base-ui` instead.
|
|
6
|
+
*/
|
|
7
|
+
declare const SkeletonParagraph: FC<SkeletonParagraphProps>;
|
|
8
|
+
//#endregion
|
|
9
|
+
export { SkeletonParagraph as default };
|
|
10
|
+
//# sourceMappingURL=SkeletonParagraph.d.mts.map
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import FlexBasic_default from "../Flex/FlexBasic.mjs";
|
|
3
|
+
import SkeletonBlock from "./SkeletonBlock.mjs";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
//#region src/Skeleton/SkeletonParagraph.tsx
|
|
6
|
+
const DEFAULT_ROWS = 3;
|
|
7
|
+
/**
|
|
8
|
+
* @deprecated Use `Skeleton.Text` from `@lobehub/ui/base-ui` instead.
|
|
9
|
+
*/
|
|
10
|
+
const SkeletonParagraph = ({ active, rows = DEFAULT_ROWS, gap, width, height, fontSize, lineHeight, style, className, ...rest }) => {
|
|
11
|
+
const rowGap = gap;
|
|
12
|
+
const rowCount = Math.max(rows, 1);
|
|
13
|
+
const baseFontSize = fontSize ?? 14;
|
|
14
|
+
const marginBlock = (height ? height : Math.round(baseFontSize * (lineHeight ?? 1.6))) - baseFontSize;
|
|
15
|
+
const widthList = Array.isArray(width) ? width : null;
|
|
16
|
+
const getRowWidth = (index) => {
|
|
17
|
+
if (widthList) return widthList[index] ?? widthList.at(-1) ?? "100%";
|
|
18
|
+
if (width !== void 0) return width;
|
|
19
|
+
if (index === rowCount - 1) return "66%";
|
|
20
|
+
return "100%";
|
|
21
|
+
};
|
|
22
|
+
const containerStyle = {
|
|
23
|
+
gap: rowGap,
|
|
24
|
+
...style
|
|
25
|
+
};
|
|
26
|
+
return /* @__PURE__ */ jsx(FlexBasic_default, {
|
|
27
|
+
className,
|
|
28
|
+
gap: gap || marginBlock,
|
|
29
|
+
style: containerStyle,
|
|
30
|
+
width: "100%",
|
|
31
|
+
...rest,
|
|
32
|
+
children: Array.from({ length: rowCount }).map((_, index) => /* @__PURE__ */ jsx(SkeletonBlock, {
|
|
33
|
+
active,
|
|
34
|
+
height: baseFontSize,
|
|
35
|
+
width: getRowWidth(index)
|
|
36
|
+
}, index))
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
SkeletonParagraph.displayName = "SkeletonParagraph";
|
|
40
|
+
//#endregion
|
|
41
|
+
export { SkeletonParagraph as default };
|
|
42
|
+
|
|
43
|
+
//# sourceMappingURL=SkeletonParagraph.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkeletonParagraph.mjs","names":["Flexbox"],"sources":["../../src/Skeleton/SkeletonParagraph.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport type { SkeletonParagraphProps } from './type';\n\nconst DEFAULT_ROWS = 3;\n\n/**\n * @deprecated Use `Skeleton.Text` from `@lobehub/ui/base-ui` instead.\n */\nconst SkeletonParagraph: FC<SkeletonParagraphProps> = ({\n active,\n rows = DEFAULT_ROWS,\n gap,\n width,\n height,\n fontSize,\n lineHeight,\n style,\n className,\n ...rest\n}) => {\n const rowGap = gap;\n const rowCount = Math.max(rows, 1);\n const baseFontSize = fontSize ?? 14;\n const resolvedLineHeight = lineHeight ?? 1.6;\n const computedHeight = height ? height : Math.round(baseFontSize * resolvedLineHeight);\n const marginBlock = computedHeight - baseFontSize;\n const widthList = Array.isArray(width) ? width : null;\n\n const getRowWidth = (index: number): string | number => {\n if (widthList) return widthList[index] ?? widthList.at(-1) ?? '100%';\n if (width !== undefined) return width as string | number;\n if (index === rowCount - 1) return '66%';\n return '100%';\n };\n\n const containerStyle = { gap: rowGap, ...style };\n\n return (\n <Flexbox\n className={className}\n gap={gap || marginBlock}\n style={containerStyle}\n width={'100%'}\n {...rest}\n >\n {Array.from({ length: rowCount }).map((_, index) => (\n <SkeletonBlock\n active={active}\n height={baseFontSize}\n key={index}\n width={getRowWidth(index)}\n />\n ))}\n </Flexbox>\n );\n};\n\nSkeletonParagraph.displayName = 'SkeletonParagraph';\n\nexport default SkeletonParagraph;\n"],"mappings":";;;;;AASA,MAAM,eAAe;;;;AAKrB,MAAM,qBAAiD,EACrD,QACA,OAAO,cACP,KACA,OACA,QACA,UACA,YACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,SAAS;CACf,MAAM,WAAW,KAAK,IAAI,MAAM,CAAC;CACjC,MAAM,eAAe,YAAY;CAGjC,MAAM,eADiB,SAAS,SAAS,KAAK,MAAM,gBADzB,cAAc,IAC4C,KAChD;CACrC,MAAM,YAAY,MAAM,QAAQ,KAAK,IAAI,QAAQ;CAEjD,MAAM,eAAe,UAAmC;EACtD,IAAI,WAAW,OAAO,UAAU,UAAU,UAAU,GAAG,EAAE,KAAK;EAC9D,IAAI,UAAU,KAAA,GAAW,OAAO;EAChC,IAAI,UAAU,WAAW,GAAG,OAAO;EACnC,OAAO;CACT;CAEA,MAAM,iBAAiB;EAAE,KAAK;EAAQ,GAAG;CAAM;CAE/C,OACE,oBAACA,mBAAD;EACa;EACX,KAAK,OAAO;EACZ,OAAO;EACP,OAAO;EACP,GAAI;EAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAS,CAAC,CAAC,CAAC,KAAK,GAAG,UACxC,oBAAC,eAAD;GACU;GACR,QAAQ;GAER,OAAO,YAAY,KAAK;EACzB,GAFM,KAEN,CACF;CACM,CAAA;AAEb;AAEA,kBAAkB,cAAc"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { SkeletonTagsProps } from "./type.mjs";
|
|
2
|
+
import { FC } from "react";
|
|
3
|
+
//#region src/Skeleton/SkeletonTags.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `Skeleton` blocks in a `Flexbox horizontal` instead.
|
|
6
|
+
*/
|
|
7
|
+
declare const SkeletonTags: FC<SkeletonTagsProps>;
|
|
8
|
+
//#endregion
|
|
9
|
+
export { SkeletonTags as default };
|
|
10
|
+
//# sourceMappingURL=SkeletonTags.d.mts.map
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import FlexBasic_default from "../Flex/FlexBasic.mjs";
|
|
3
|
+
import SkeletonBlock from "./SkeletonBlock.mjs";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
import { cssVar } from "antd-style";
|
|
6
|
+
//#region src/Skeleton/SkeletonTags.tsx
|
|
7
|
+
const DEFAULT_COUNT = 1;
|
|
8
|
+
const HEIGHT_MAP = {
|
|
9
|
+
large: 28,
|
|
10
|
+
middle: 22,
|
|
11
|
+
small: 20
|
|
12
|
+
};
|
|
13
|
+
const DEFAULT_WIDTH_MAP = {
|
|
14
|
+
large: 64,
|
|
15
|
+
middle: 48,
|
|
16
|
+
small: 36
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* @deprecated Use `Skeleton` blocks in a `Flexbox horizontal` instead.
|
|
20
|
+
*/
|
|
21
|
+
const SkeletonTags = ({ active, className, count = DEFAULT_COUNT, gap, height, size = "middle", style, width, ...rest }) => {
|
|
22
|
+
const resolvedGap = gap !== void 0 ? `${gap}px` : cssVar.paddingXS;
|
|
23
|
+
const resolvedCount = Math.max(count, 1);
|
|
24
|
+
const resolvedHeight = height ?? HEIGHT_MAP[size];
|
|
25
|
+
const widthList = Array.isArray(width) ? width : null;
|
|
26
|
+
const defaultWidth = DEFAULT_WIDTH_MAP[size];
|
|
27
|
+
const RADIUS_MAP = {
|
|
28
|
+
large: cssVar.borderRadius,
|
|
29
|
+
middle: cssVar.borderRadiusSM,
|
|
30
|
+
small: cssVar.borderRadiusXS
|
|
31
|
+
};
|
|
32
|
+
const getWidth = (index) => {
|
|
33
|
+
if (widthList) return widthList[index] ?? widthList.at(-1) ?? defaultWidth;
|
|
34
|
+
if (width !== void 0) return width;
|
|
35
|
+
return defaultWidth;
|
|
36
|
+
};
|
|
37
|
+
return /* @__PURE__ */ jsx(FlexBasic_default, {
|
|
38
|
+
horizontal: true,
|
|
39
|
+
className,
|
|
40
|
+
style: {
|
|
41
|
+
gap: resolvedGap,
|
|
42
|
+
...style
|
|
43
|
+
},
|
|
44
|
+
...rest,
|
|
45
|
+
children: Array.from({ length: resolvedCount }).map((_, index) => /* @__PURE__ */ jsx(SkeletonBlock, {
|
|
46
|
+
active,
|
|
47
|
+
height: resolvedHeight,
|
|
48
|
+
width: getWidth(index),
|
|
49
|
+
style: { borderRadius: RADIUS_MAP[size] }
|
|
50
|
+
}, index))
|
|
51
|
+
});
|
|
52
|
+
};
|
|
53
|
+
SkeletonTags.displayName = "SkeletonTags";
|
|
54
|
+
//#endregion
|
|
55
|
+
export { SkeletonTags as default };
|
|
56
|
+
|
|
57
|
+
//# sourceMappingURL=SkeletonTags.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkeletonTags.mjs","names":["Flexbox"],"sources":["../../src/Skeleton/SkeletonTags.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport type { SkeletonTagsProps } from './type';\n\nconst DEFAULT_COUNT = 1;\n\nconst HEIGHT_MAP: Record<'small' | 'middle' | 'large', number> = {\n large: 28,\n middle: 22,\n small: 20,\n};\n\nconst DEFAULT_WIDTH_MAP: Record<'small' | 'middle' | 'large', number> = {\n large: 64,\n middle: 48,\n small: 36,\n};\n\n/**\n * @deprecated Use `Skeleton` blocks in a `Flexbox horizontal` instead.\n */\nconst SkeletonTags: FC<SkeletonTagsProps> = ({\n active,\n className,\n count = DEFAULT_COUNT,\n gap,\n height,\n size = 'middle',\n style,\n width,\n ...rest\n}) => {\n const resolvedGap = gap !== undefined ? `${gap}px` : cssVar.paddingXS;\n const resolvedCount = Math.max(count, 1);\n const resolvedHeight = height ?? HEIGHT_MAP[size];\n const widthList = Array.isArray(width) ? width : null;\n const defaultWidth = DEFAULT_WIDTH_MAP[size];\n\n const RADIUS_MAP: Record<'large' | 'small' | 'middle', string> = {\n large: cssVar.borderRadius,\n middle: cssVar.borderRadiusSM,\n small: cssVar.borderRadiusXS,\n };\n\n const getWidth = (index: number) => {\n if (widthList) return widthList[index] ?? widthList.at(-1) ?? defaultWidth;\n if (width !== undefined) return width as string | number;\n return defaultWidth;\n };\n\n return (\n <Flexbox horizontal className={className} style={{ gap: resolvedGap, ...style }} {...rest}>\n {Array.from({ length: resolvedCount }).map((_, index) => (\n <SkeletonBlock\n active={active}\n height={resolvedHeight}\n key={index}\n width={getWidth(index)}\n style={{\n borderRadius: RADIUS_MAP[size],\n }}\n />\n ))}\n </Flexbox>\n );\n};\n\nSkeletonTags.displayName = 'SkeletonTags';\n\nexport default SkeletonTags;\n"],"mappings":";;;;;;AAUA,MAAM,gBAAgB;AAEtB,MAAM,aAA2D;CAC/D,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,oBAAkE;CACtE,OAAO;CACP,QAAQ;CACR,OAAO;AACT;;;;AAKA,MAAM,gBAAuC,EAC3C,QACA,WACA,QAAQ,eACR,KACA,QACA,OAAO,UACP,OACA,OACA,GAAG,WACC;CACJ,MAAM,cAAc,QAAQ,KAAA,IAAY,GAAG,IAAI,MAAM,OAAO;CAC5D,MAAM,gBAAgB,KAAK,IAAI,OAAO,CAAC;CACvC,MAAM,iBAAiB,UAAU,WAAW;CAC5C,MAAM,YAAY,MAAM,QAAQ,KAAK,IAAI,QAAQ;CACjD,MAAM,eAAe,kBAAkB;CAEvC,MAAM,aAA2D;EAC/D,OAAO,OAAO;EACd,QAAQ,OAAO;EACf,OAAO,OAAO;CAChB;CAEA,MAAM,YAAY,UAAkB;EAClC,IAAI,WAAW,OAAO,UAAU,UAAU,UAAU,GAAG,EAAE,KAAK;EAC9D,IAAI,UAAU,KAAA,GAAW,OAAO;EAChC,OAAO;CACT;CAEA,OACE,oBAACA,mBAAD;EAAS,YAAA;EAAsB;EAAW,OAAO;GAAE,KAAK;GAAa,GAAG;EAAM;EAAG,GAAI;EAClF,UAAA,MAAM,KAAK,EAAE,QAAQ,cAAc,CAAC,CAAC,CAAC,KAAK,GAAG,UAC7C,oBAAC,eAAD;GACU;GACR,QAAQ;GAER,OAAO,SAAS,KAAK;GACrB,OAAO,EACL,cAAc,WAAW,MAC3B;EACD,GALM,KAKN,CACF;CACM,CAAA;AAEb;AAEA,aAAa,cAAc"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { SkeletonTitleProps } from "./type.mjs";
|
|
2
|
+
import { FC } from "react";
|
|
3
|
+
//#region src/Skeleton/SkeletonTitle.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `Skeleton.Text` from `@lobehub/ui/base-ui` instead.
|
|
6
|
+
*/
|
|
7
|
+
declare const SkeletonTitle: FC<SkeletonTitleProps>;
|
|
8
|
+
//#endregion
|
|
9
|
+
export { SkeletonTitle as default };
|
|
10
|
+
//# sourceMappingURL=SkeletonTitle.d.mts.map
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import SkeletonBlock from "./SkeletonBlock.mjs";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { cssVar } from "antd-style";
|
|
5
|
+
//#region src/Skeleton/SkeletonTitle.tsx
|
|
6
|
+
/**
|
|
7
|
+
* @deprecated Use `Skeleton.Text` from `@lobehub/ui/base-ui` instead.
|
|
8
|
+
*/
|
|
9
|
+
const SkeletonTitle = ({ active, fontSize, lineHeight, height, width = "60%", style, className, ...rest }) => {
|
|
10
|
+
const resolvedLineHeight = lineHeight ?? 1.6;
|
|
11
|
+
const baseFontSize = fontSize !== void 0 ? `${fontSize}px` : cssVar.fontSize;
|
|
12
|
+
const heightMultiplier = 1 + (resolvedLineHeight - 1) * .5;
|
|
13
|
+
const marginMultiplier = (resolvedLineHeight - 1) * .25;
|
|
14
|
+
return /* @__PURE__ */ jsx(SkeletonBlock, {
|
|
15
|
+
active,
|
|
16
|
+
className,
|
|
17
|
+
height: height ?? `round(calc(${baseFontSize} * ${heightMultiplier}), 1px)`,
|
|
18
|
+
width,
|
|
19
|
+
style: {
|
|
20
|
+
marginBlock: `round(calc(${baseFontSize} * ${marginMultiplier}), 1px)`,
|
|
21
|
+
...style
|
|
22
|
+
},
|
|
23
|
+
...rest
|
|
24
|
+
});
|
|
25
|
+
};
|
|
26
|
+
SkeletonTitle.displayName = "SkeletonTitle";
|
|
27
|
+
//#endregion
|
|
28
|
+
export { SkeletonTitle as default };
|
|
29
|
+
|
|
30
|
+
//# sourceMappingURL=SkeletonTitle.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkeletonTitle.mjs","names":[],"sources":["../../src/Skeleton/SkeletonTitle.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar } from 'antd-style';\nimport { type FC } from 'react';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport type { SkeletonTitleProps } from './type';\n\n/**\n * @deprecated Use `Skeleton.Text` from `@lobehub/ui/base-ui` instead.\n */\nconst SkeletonTitle: FC<SkeletonTitleProps> = ({\n active,\n fontSize,\n lineHeight,\n height,\n width = '60%',\n style,\n className,\n ...rest\n}) => {\n const resolvedLineHeight = lineHeight ?? 1.6;\n const baseFontSize = fontSize !== undefined ? `${fontSize}px` : cssVar.fontSize;\n\n // height = baseFontSize * (1 + (lineHeight - 1) * 0.5)\n const heightMultiplier = 1 + (resolvedLineHeight - 1) * 0.5;\n // marginBlock = baseFontSize * (lineHeight - 1) * 0.25\n const marginMultiplier = (resolvedLineHeight - 1) * 0.25;\n\n return (\n <SkeletonBlock\n active={active}\n className={className}\n height={height ?? `round(calc(${baseFontSize} * ${heightMultiplier}), 1px)`}\n width={width}\n style={{\n marginBlock: `round(calc(${baseFontSize} * ${marginMultiplier}), 1px)`,\n ...style,\n }}\n {...rest}\n />\n );\n};\n\nSkeletonTitle.displayName = 'SkeletonTitle';\n\nexport default SkeletonTitle;\n"],"mappings":";;;;;;;;AAWA,MAAM,iBAAyC,EAC7C,QACA,UACA,YACA,QACA,QAAQ,OACR,OACA,WACA,GAAG,WACC;CACJ,MAAM,qBAAqB,cAAc;CACzC,MAAM,eAAe,aAAa,KAAA,IAAY,GAAG,SAAS,MAAM,OAAO;CAGvE,MAAM,mBAAmB,KAAK,qBAAqB,KAAK;CAExD,MAAM,oBAAoB,qBAAqB,KAAK;CAEpD,OACE,oBAAC,eAAD;EACU;EACG;EACX,QAAQ,UAAU,cAAc,aAAa,KAAK,iBAAiB;EAC5D;EACP,OAAO;GACL,aAAa,cAAc,aAAa,KAAK,iBAAiB;GAC9D,GAAG;EACL;EACA,GAAI;CACL,CAAA;AAEL;AAEA,cAAc,cAAc"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { SkeletonAvatarProps, SkeletonBlockProps, SkeletonButtonProps, SkeletonParagraphProps, SkeletonProps, SkeletonTagsProps, SkeletonTitleProps } from "./type.mjs";
|
|
2
|
+
import SkeletonAvatar from "./SkeletonAvatar.mjs";
|
|
3
|
+
import SkeletonBlock from "./SkeletonBlock.mjs";
|
|
4
|
+
import SkeletonButton from "./SkeletonButton.mjs";
|
|
5
|
+
import SkeletonParagraph from "./SkeletonParagraph.mjs";
|
|
6
|
+
import SkeletonTags from "./SkeletonTags.mjs";
|
|
7
|
+
import SkeletonTitle from "./SkeletonTitle.mjs";
|
|
8
|
+
import { ReactNode } from "react";
|
|
9
|
+
//#region src/Skeleton/index.d.ts
|
|
10
|
+
interface ISkeleton {
|
|
11
|
+
(props: SkeletonProps): ReactNode;
|
|
12
|
+
Avatar: typeof SkeletonAvatar;
|
|
13
|
+
Block: typeof SkeletonBlock;
|
|
14
|
+
Button: typeof SkeletonButton;
|
|
15
|
+
Paragraph: typeof SkeletonParagraph;
|
|
16
|
+
Tags: typeof SkeletonTags;
|
|
17
|
+
Title: typeof SkeletonTitle;
|
|
18
|
+
}
|
|
19
|
+
declare const Skeleton: ISkeleton;
|
|
20
|
+
//#endregion
|
|
21
|
+
export { SkeletonAvatar, type SkeletonAvatarProps, SkeletonBlock, type SkeletonBlockProps, SkeletonButton, type SkeletonButtonProps, SkeletonParagraph, type SkeletonParagraphProps, type SkeletonProps, SkeletonTags, type SkeletonTagsProps, SkeletonTitle, type SkeletonTitleProps, Skeleton as default };
|
|
22
|
+
//# sourceMappingURL=index.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './index.d.mts';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './index.mjs';
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import SkeletonBlock from "./SkeletonBlock.mjs";
|
|
2
|
+
import SkeletonAvatar from "./SkeletonAvatar.mjs";
|
|
3
|
+
import SkeletonParagraph from "./SkeletonParagraph.mjs";
|
|
4
|
+
import SkeletonTitle from "./SkeletonTitle.mjs";
|
|
5
|
+
import Skeleton$1 from "./Skeleton.mjs";
|
|
6
|
+
import SkeletonButton from "./SkeletonButton.mjs";
|
|
7
|
+
import SkeletonTags from "./SkeletonTags.mjs";
|
|
8
|
+
//#region src/Skeleton/index.ts
|
|
9
|
+
const Skeleton = Skeleton$1;
|
|
10
|
+
Skeleton.Block = SkeletonBlock;
|
|
11
|
+
Skeleton.Avatar = SkeletonAvatar;
|
|
12
|
+
Skeleton.Title = SkeletonTitle;
|
|
13
|
+
Skeleton.Paragraph = SkeletonParagraph;
|
|
14
|
+
Skeleton.Button = SkeletonButton;
|
|
15
|
+
Skeleton.Tags = SkeletonTags;
|
|
16
|
+
//#endregion
|
|
17
|
+
export { SkeletonAvatar, SkeletonBlock, SkeletonButton, SkeletonParagraph, SkeletonTags, SkeletonTitle, Skeleton as default };
|
|
18
|
+
|
|
19
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","names":["SkeletonParent"],"sources":["../../src/Skeleton/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { SkeletonProps } from '@/Skeleton/type';\n\nimport SkeletonParent from './Skeleton';\nimport SkeletonAvatar from './SkeletonAvatar';\nimport SkeletonBlock from './SkeletonBlock';\nimport SkeletonButton from './SkeletonButton';\nimport SkeletonParagraph from './SkeletonParagraph';\nimport SkeletonTags from './SkeletonTags';\nimport SkeletonTitle from './SkeletonTitle';\n\ninterface ISkeleton {\n (props: SkeletonProps): ReactNode;\n Avatar: typeof SkeletonAvatar;\n Block: typeof SkeletonBlock;\n Button: typeof SkeletonButton;\n Paragraph: typeof SkeletonParagraph;\n Tags: typeof SkeletonTags;\n Title: typeof SkeletonTitle;\n}\n\nconst Skeleton = SkeletonParent as unknown as ISkeleton;\nSkeleton.Block = SkeletonBlock;\nSkeleton.Avatar = SkeletonAvatar;\nSkeleton.Title = SkeletonTitle;\nSkeleton.Paragraph = SkeletonParagraph;\nSkeleton.Button = SkeletonButton;\nSkeleton.Tags = SkeletonTags;\n\nexport default Skeleton;\n\nexport { default as SkeletonAvatar } from './SkeletonAvatar';\nexport { default as SkeletonBlock } from './SkeletonBlock';\nexport { default as SkeletonButton } from './SkeletonButton';\nexport { default as SkeletonParagraph } from './SkeletonParagraph';\nexport { default as SkeletonTags } from './SkeletonTags';\nexport { default as SkeletonTitle } from './SkeletonTitle';\nexport type * from './type';\n"],"mappings":";;;;;;;;AAsBA,MAAM,WAAWA;AACjB,SAAS,QAAQ;AACjB,SAAS,SAAS;AAClB,SAAS,QAAQ;AACjB,SAAS,YAAY;AACrB,SAAS,SAAS;AAClB,SAAS,OAAO"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { createStaticStyles, keyframes } from "antd-style";
|
|
2
|
+
//#region src/Skeleton/style.ts
|
|
3
|
+
const shimmer = keyframes`
|
|
4
|
+
0% {
|
|
5
|
+
opacity: 1;
|
|
6
|
+
}
|
|
7
|
+
50% {
|
|
8
|
+
opacity: .5;
|
|
9
|
+
}
|
|
10
|
+
100% {
|
|
11
|
+
opacity: 1;
|
|
12
|
+
}
|
|
13
|
+
`;
|
|
14
|
+
const styles = createStaticStyles(({ css, cssVar }) => {
|
|
15
|
+
return {
|
|
16
|
+
active: css`
|
|
17
|
+
background: ${cssVar.colorFillSecondary};
|
|
18
|
+
animation: ${shimmer} 2s linear infinite;
|
|
19
|
+
`,
|
|
20
|
+
avatar: css`
|
|
21
|
+
flex-shrink: 0;
|
|
22
|
+
`,
|
|
23
|
+
base: css`
|
|
24
|
+
user-select: none;
|
|
25
|
+
|
|
26
|
+
position: relative;
|
|
27
|
+
|
|
28
|
+
overflow: hidden;
|
|
29
|
+
|
|
30
|
+
border-radius: ${cssVar.borderRadius};
|
|
31
|
+
|
|
32
|
+
background: ${cssVar.colorFillTertiary};
|
|
33
|
+
`,
|
|
34
|
+
text: css`
|
|
35
|
+
display: flex;
|
|
36
|
+
flex: 1;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
gap: ${cssVar.paddingXS};
|
|
39
|
+
|
|
40
|
+
width: 100%;
|
|
41
|
+
`
|
|
42
|
+
};
|
|
43
|
+
});
|
|
44
|
+
//#endregion
|
|
45
|
+
export { styles };
|
|
46
|
+
|
|
47
|
+
//# sourceMappingURL=style.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Skeleton/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\n\nconst shimmer = keyframes`\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: .5;\n }\n 100% {\n opacity: 1;\n }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n return {\n active: css`\n background: ${cssVar.colorFillSecondary};\n animation: ${shimmer} 2s linear infinite;\n `,\n\n avatar: css`\n flex-shrink: 0;\n `,\n\n base: css`\n user-select: none;\n\n position: relative;\n\n overflow: hidden;\n\n border-radius: ${cssVar.borderRadius};\n\n background: ${cssVar.colorFillTertiary};\n `,\n\n text: css`\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: ${cssVar.paddingXS};\n\n width: 100%;\n `,\n };\n});\n"],"mappings":";;AAEA,MAAM,UAAU,SAAS;;;;;;;;;;;AAYzB,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,QAAQ,GAAG;oBACK,OAAO,mBAAmB;mBAC3B,QAAQ;;EAGvB,QAAQ,GAAG;;;EAIX,MAAM,GAAG;;;;;;;uBAOU,OAAO,aAAa;;oBAEvB,OAAO,kBAAkB;;EAGzC,MAAM,GAAG;;;;aAIA,OAAO,UAAU;;;;CAI5B;AACF,CAAC"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { CSSProperties } from "react";
|
|
2
|
+
//#region src/Skeleton/type.d.ts
|
|
3
|
+
interface SkeletonBlockProps {
|
|
4
|
+
active?: boolean;
|
|
5
|
+
className?: string;
|
|
6
|
+
height?: number | string;
|
|
7
|
+
style?: CSSProperties;
|
|
8
|
+
width?: number | string;
|
|
9
|
+
}
|
|
10
|
+
interface SkeletonTitleProps extends Omit<SkeletonBlockProps, 'height'> {
|
|
11
|
+
fontSize?: number;
|
|
12
|
+
height?: number;
|
|
13
|
+
lineHeight?: number;
|
|
14
|
+
width?: number | string;
|
|
15
|
+
}
|
|
16
|
+
interface SkeletonParagraphProps extends Omit<SkeletonBlockProps, 'width' | 'height'> {
|
|
17
|
+
fontSize?: number;
|
|
18
|
+
gap?: number;
|
|
19
|
+
height?: number;
|
|
20
|
+
lineHeight?: number;
|
|
21
|
+
rows?: number;
|
|
22
|
+
width?: number | string | (number | string)[];
|
|
23
|
+
}
|
|
24
|
+
interface SkeletonTagsProps extends Omit<SkeletonBlockProps, 'width'> {
|
|
25
|
+
count?: number;
|
|
26
|
+
gap?: number;
|
|
27
|
+
size?: 'small' | 'middle' | 'large';
|
|
28
|
+
width?: number | string | (number | string)[];
|
|
29
|
+
}
|
|
30
|
+
interface SkeletonAvatarProps extends SkeletonBlockProps {
|
|
31
|
+
shape?: 'circle' | 'square';
|
|
32
|
+
size?: number | string;
|
|
33
|
+
}
|
|
34
|
+
interface SkeletonButtonProps extends SkeletonBlockProps {
|
|
35
|
+
block?: boolean;
|
|
36
|
+
shape?: 'circle' | 'round' | 'default';
|
|
37
|
+
size?: 'large' | 'small' | 'default';
|
|
38
|
+
}
|
|
39
|
+
interface SkeletonProps extends SkeletonBlockProps {
|
|
40
|
+
avatar?: SkeletonAvatarProps | boolean;
|
|
41
|
+
classNames?: {
|
|
42
|
+
avatar?: string;
|
|
43
|
+
paragraph?: string;
|
|
44
|
+
root?: string;
|
|
45
|
+
title?: string;
|
|
46
|
+
};
|
|
47
|
+
gap?: number;
|
|
48
|
+
paragraph?: SkeletonParagraphProps | boolean;
|
|
49
|
+
styles?: {
|
|
50
|
+
avatar?: CSSProperties;
|
|
51
|
+
paragraph?: CSSProperties;
|
|
52
|
+
root?: CSSProperties;
|
|
53
|
+
title?: CSSProperties;
|
|
54
|
+
};
|
|
55
|
+
title?: SkeletonTitleProps | boolean;
|
|
56
|
+
}
|
|
57
|
+
//#endregion
|
|
58
|
+
export { SkeletonAvatarProps, SkeletonBlockProps, SkeletonButtonProps, SkeletonParagraphProps, SkeletonProps, SkeletonTagsProps, SkeletonTitleProps };
|
|
59
|
+
//# sourceMappingURL=type.d.mts.map
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { styles } from "./style.mjs";
|
|
2
3
|
import Skeleton from "./Skeleton.mjs";
|
|
3
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
import { cx } from "antd-style";
|
|
4
6
|
//#region src/base-ui/Skeleton/SkeletonAvatar.tsx
|
|
5
7
|
const DEFAULT_SIZE = 40;
|
|
6
|
-
const SkeletonAvatar = ({ shape = "square", size = DEFAULT_SIZE, width, height, ...rest }) => /* @__PURE__ */ jsx(Skeleton, {
|
|
8
|
+
const SkeletonAvatar = ({ shape = "square", size = DEFAULT_SIZE, width, height, className, ...rest }) => /* @__PURE__ */ jsx(Skeleton, {
|
|
9
|
+
className: cx(styles.avatar, className),
|
|
7
10
|
height: height ?? size,
|
|
8
11
|
radius: shape === "circle" ? "50%" : void 0,
|
|
9
12
|
width: width ?? size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonAvatar.mjs","names":[],"sources":["../../../src/base-ui/Skeleton/SkeletonAvatar.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport Skeleton from './Skeleton';\nimport type { SkeletonAvatarProps } from './type';\n\nconst DEFAULT_SIZE = 40;\n\nconst SkeletonAvatar: FC<SkeletonAvatarProps> = ({\n shape = 'square',\n size = DEFAULT_SIZE,\n width,\n height,\n ...rest\n}) => (\n <Skeleton\n height={height ?? size}\n radius={shape === 'circle' ? '50%' : undefined}\n width={width ?? size}\n {...rest}\n />\n);\n\nSkeletonAvatar.displayName = 'SkeletonAvatar';\n\nexport default SkeletonAvatar;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SkeletonAvatar.mjs","names":[],"sources":["../../../src/base-ui/Skeleton/SkeletonAvatar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport Skeleton from './Skeleton';\nimport { styles } from './style';\nimport type { SkeletonAvatarProps } from './type';\n\nconst DEFAULT_SIZE = 40;\n\nconst SkeletonAvatar: FC<SkeletonAvatarProps> = ({\n shape = 'square',\n size = DEFAULT_SIZE,\n width,\n height,\n className,\n ...rest\n}) => (\n <Skeleton\n className={cx(styles.avatar, className)}\n height={height ?? size}\n radius={shape === 'circle' ? '50%' : undefined}\n width={width ?? size}\n {...rest}\n />\n);\n\nSkeletonAvatar.displayName = 'SkeletonAvatar';\n\nexport default SkeletonAvatar;\n"],"mappings":";;;;;;AASA,MAAM,eAAe;AAErB,MAAM,kBAA2C,EAC/C,QAAQ,UACR,OAAO,cACP,OACA,QACA,WACA,GAAG,WAEH,oBAAC,UAAD;CACE,WAAW,GAAG,OAAO,QAAQ,SAAS;CACtC,QAAQ,UAAU;CAClB,QAAQ,UAAU,WAAW,QAAQ,KAAA;CACrC,OAAO,SAAS;CAChB,GAAI;AACL,CAAA;AAGH,eAAe,cAAc"}
|
|
@@ -21,13 +21,15 @@ const fade = keyframes`
|
|
|
21
21
|
`;
|
|
22
22
|
const styles = createStaticStyles(({ css, cssVar }) => {
|
|
23
23
|
return {
|
|
24
|
+
avatar: css`
|
|
25
|
+
flex: none;
|
|
26
|
+
`,
|
|
24
27
|
base: css`
|
|
25
28
|
user-select: none;
|
|
26
29
|
|
|
27
30
|
position: relative;
|
|
28
31
|
|
|
29
32
|
overflow: hidden;
|
|
30
|
-
flex: none;
|
|
31
33
|
|
|
32
34
|
border-radius: ${cssVar.borderRadius};
|
|
33
35
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Skeleton/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\n\nconst sweep = keyframes`\n 0% {\n translate: -100% 0;\n }\n\n 100% {\n translate: 100% 0;\n }\n`;\n\nconst fade = keyframes`\n 0%,\n 100% {\n opacity: 1;\n }\n\n 50% {\n opacity: .5;\n }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n return {\n base: css`\n user-select: none;\n\n position: relative;\n\n overflow: hidden;\n
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Skeleton/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\n\nconst sweep = keyframes`\n 0% {\n translate: -100% 0;\n }\n\n 100% {\n translate: 100% 0;\n }\n`;\n\nconst fade = keyframes`\n 0%,\n 100% {\n opacity: 1;\n }\n\n 50% {\n opacity: .5;\n }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n return {\n avatar: css`\n flex: none;\n `,\n\n base: css`\n user-select: none;\n\n position: relative;\n\n overflow: hidden;\n\n border-radius: ${cssVar.borderRadius};\n\n background: ${cssVar.colorFillContent};\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n\n &::after {\n display: none;\n }\n }\n `,\n\n fade: css`\n will-change: opacity;\n animation: ${fade} 1.6s ease-in-out infinite;\n `,\n\n sweep: css`\n &::after {\n pointer-events: none;\n will-change: transform;\n content: '';\n\n position: absolute;\n inset: 0;\n\n background: linear-gradient(\n 90deg,\n transparent 0%,\n ${cssVar.colorFill} 50%,\n transparent 100%\n );\n\n animation: ${sweep} 1.4s ease infinite;\n }\n `,\n\n text: css`\n display: flex;\n flex-direction: column;\n width: 100%;\n `,\n };\n});\n"],"mappings":";;AAEA,MAAM,QAAQ,SAAS;;;;;;;;;AAUvB,MAAM,OAAO,SAAS;;;;;;;;;;AAWtB,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,QAAQ,GAAG;;;EAIX,MAAM,GAAG;;;;;;;uBAOU,OAAO,aAAa;;oBAEvB,OAAO,iBAAiB;;;;;;;;;;EAWxC,MAAM,GAAG;;mBAEM,KAAK;;EAGpB,OAAO,GAAG;;;;;;;;;;;;YAYF,OAAO,UAAU;;;;qBAIR,MAAM;;;EAIvB,MAAM,GAAG;;;;;CAKX;AACF,CAAC"}
|
package/es/base-ui/index.d.mts
CHANGED
|
@@ -27,10 +27,6 @@ import Popover from "./Popover/Popover.mjs";
|
|
|
27
27
|
import PopoverGroup from "./Popover/PopoverGroup.mjs";
|
|
28
28
|
import { usePopoverPortalContainer } from "./Popover/PopoverPortal.mjs";
|
|
29
29
|
import "./Popover/index.mjs";
|
|
30
|
-
import { SkeletonAnimation, SkeletonAvatarProps, SkeletonProps, SkeletonTextProps } from "./Skeleton/type.mjs";
|
|
31
|
-
import SkeletonAvatar from "./Skeleton/SkeletonAvatar.mjs";
|
|
32
|
-
import SkeletonText from "./Skeleton/SkeletonText.mjs";
|
|
33
|
-
import Skeleton from "./Skeleton/index.mjs";
|
|
34
30
|
import { ScrollAreaContent, ScrollAreaContentProps, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps } from "./ScrollArea/atoms.mjs";
|
|
35
31
|
import { ScrollAreaProps } from "./ScrollArea/type.mjs";
|
|
36
32
|
import { ScrollArea } from "./ScrollArea/ScrollArea.mjs";
|
|
@@ -114,6 +110,10 @@ import { SelectBehaviorVariant, SelectClassNames, SelectIndicatorVariant, Select
|
|
|
114
110
|
import { SelectArrow, SelectArrowProps, SelectBackdrop, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectIcon, SelectIconProps, SelectItem, SelectItemIndicator, SelectItemIndicatorProps, SelectItemProps, SelectItemText, SelectItemTextProps, SelectList, SelectListProps, SelectPopup, SelectPopupProps, SelectPortal, SelectPortalProps, SelectPositioner, SelectPositionerProps, SelectRoot, SelectScrollDownArrow, SelectScrollDownArrowProps, SelectScrollUpArrow, SelectScrollUpArrowProps, SelectSeparator, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps } from "./Select/atoms.mjs";
|
|
115
111
|
import Select from "./Select/Select.mjs";
|
|
116
112
|
import "./Select/index.mjs";
|
|
113
|
+
import { SkeletonAnimation, SkeletonAvatarProps, SkeletonProps, SkeletonTextProps } from "./Skeleton/type.mjs";
|
|
114
|
+
import SkeletonAvatar from "./Skeleton/SkeletonAvatar.mjs";
|
|
115
|
+
import SkeletonText from "./Skeleton/SkeletonText.mjs";
|
|
116
|
+
import Skeleton from "./Skeleton/index.mjs";
|
|
117
117
|
import { SliderProps, SliderWithInputProps } from "./Slider/type.mjs";
|
|
118
118
|
import Slider from "./Slider/Slider.mjs";
|
|
119
119
|
import SliderWithInput from "./Slider/SliderWithInput.mjs";
|
package/es/base-ui/index.mjs
CHANGED
|
@@ -13,9 +13,6 @@ import DropdownMenu from "./DropdownMenu/DropdownMenu.mjs";
|
|
|
13
13
|
import SplitButton from "./Button/SplitButton.mjs";
|
|
14
14
|
import { styles as styles$1 } from "./ActionIcon/style.mjs";
|
|
15
15
|
import ActionIcon from "./ActionIcon/ActionIcon.mjs";
|
|
16
|
-
import SkeletonAvatar from "./Skeleton/SkeletonAvatar.mjs";
|
|
17
|
-
import SkeletonText from "./Skeleton/SkeletonText.mjs";
|
|
18
|
-
import Skeleton from "./Skeleton/index.mjs";
|
|
19
16
|
import { closeContextMenu, setContextMenuInterceptor, showContextMenu, updateContextMenuItems } from "./ContextMenu/store.mjs";
|
|
20
17
|
import { ContextMenuHost } from "./ContextMenu/ContextMenuHost.mjs";
|
|
21
18
|
import { ContextMenuTrigger } from "./ContextMenu/ContextMenuTrigger.mjs";
|
|
@@ -26,6 +23,9 @@ import { PopoverProvider, usePopoverContext } from "./Popover/context.mjs";
|
|
|
26
23
|
import { usePopoverGroupHandle } from "./Popover/groupContext.mjs";
|
|
27
24
|
import Popover from "./Popover/Popover.mjs";
|
|
28
25
|
import PopoverGroup from "./Popover/PopoverGroup.mjs";
|
|
26
|
+
import SkeletonAvatar from "./Skeleton/SkeletonAvatar.mjs";
|
|
27
|
+
import SkeletonText from "./Skeleton/SkeletonText.mjs";
|
|
28
|
+
import Skeleton from "./Skeleton/index.mjs";
|
|
29
29
|
import { ToastHost, toast, useToast } from "./Toast/imperative.mjs";
|
|
30
30
|
import { ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "./ScrollArea/atoms.mjs";
|
|
31
31
|
import { ScrollArea } from "./ScrollArea/ScrollArea.mjs";
|
|
@@ -48,7 +48,12 @@ const NATIVE_BUTTON_MAP = {
|
|
|
48
48
|
Segmented: false,
|
|
49
49
|
Skeleton: false,
|
|
50
50
|
SkeletonAvatar: false,
|
|
51
|
+
SkeletonBlock: false,
|
|
52
|
+
SkeletonButton: false,
|
|
53
|
+
SkeletonParagraph: false,
|
|
54
|
+
SkeletonTags: false,
|
|
51
55
|
SkeletonText: false,
|
|
56
|
+
SkeletonTitle: false,
|
|
52
57
|
Snippet: false,
|
|
53
58
|
Tag: false,
|
|
54
59
|
Text: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useNativeButton.mjs","names":[],"sources":["../../src/hooks/useNativeButton.ts"],"sourcesContent":["import { isValidElement, type ReactElement, type ReactNode, useMemo } from 'react';\n\nexport interface UseNativeButtonOptions {\n /**\n * The children element that will be used as the trigger\n */\n children: ReactNode;\n /**\n * User-provided nativeButton prop\n */\n nativeButton?: boolean;\n /**\n * Additional nativeButton from trigger props (for DropdownMenu)\n */\n triggerNativeButton?: boolean;\n}\n\nexport interface UseNativeButtonResult {\n /**\n * Whether the trigger element is a native button\n */\n isNativeButtonTriggerElement: boolean;\n /**\n * The resolved nativeButton value to pass to Base UI components\n */\n resolvedNativeButton: boolean | undefined;\n}\n\n/**\n * Map of component displayNames to their nativeButton values.\n * Components that render native <button> elements should be true,\n * components that render non-button elements should be false.\n */\nconst NATIVE_BUTTON_MAP: Record<string, boolean> = {\n A: false,\n ActionIcon: false,\n ActionIconGroup: false,\n Alert: false,\n Avatar: false,\n AvatarGroup: false,\n BaseActionIcon: true,\n BaseButton: true,\n Block: false,\n BottomGradientButton: true,\n Burger: false,\n Button: true,\n Center: false,\n Checkbox: false,\n CheckboxGroup: false,\n Collapse: false,\n ColorSwatches: false,\n CopyButton: false,\n DownloadButton: false,\n EditableText: false,\n Empty: false,\n FileTypeIcon: false,\n Flexbox: false,\n FluentEmoji: false,\n GradientButton: true,\n Highlighter: false,\n Hotkey: false,\n Icon: false,\n Image: false,\n Img: false,\n Input: false,\n InputNumber: false,\n InputPassword: false,\n List: false,\n ListItem: false,\n Select: false,\n Switch: false,\n Markdown: false,\n MaterialFileTypeIcon: false,\n Segmented: false,\n Skeleton: false,\n SkeletonAvatar: false,\n SkeletonText: false,\n Snippet: false,\n Tag: false,\n Text: false,\n TextArea: false,\n ThemeSwitch: false,\n Video: false,\n};\n\n/**\n * Get the displayName of a React component from an element.\n * Handles function components, forwardRef, memo, etc.\n */\nfunction getComponentDisplayName(element: ReactElement): string | undefined {\n const type = element.type;\n\n if (typeof type === 'string') return undefined;\n\n if (typeof type === 'function') {\n return (type as any).displayName || type.name;\n }\n\n if (typeof type === 'object' && type !== null) {\n // Handle forwardRef, memo, etc.\n const displayName =\n (type as any).displayName ||\n (type as any).render?.displayName ||\n (type as any).render?.name ||\n (type as any).type?.displayName ||\n (type as any).type?.name;\n return displayName;\n }\n\n return undefined;\n}\n\n/**\n * Hook to resolve nativeButton prop for Base UI trigger components.\n *\n * When using `render`, Base UI expects the rendered element to be a native <button> by default.\n * If we can infer it's not, we opt out to avoid warnings (users can still override via `nativeButton`).\n */\nexport function useNativeButton({\n children,\n nativeButton,\n triggerNativeButton,\n}: UseNativeButtonOptions): UseNativeButtonResult {\n const isNativeButtonTriggerElement = useMemo(() => {\n if (!isValidElement(children)) return false;\n return typeof children.type === 'string' && children.type === 'button';\n }, [children]);\n\n const resolvedNativeButton = useMemo(() => {\n // User-provided nativeButton takes highest priority\n if (nativeButton !== undefined) return nativeButton;\n // Trigger props nativeButton (for DropdownMenu) takes second priority\n if (triggerNativeButton !== undefined) return triggerNativeButton;\n // If it's a native button element, return true\n if (isNativeButtonTriggerElement) return true;\n // If children is not a valid element, let Base UI decide\n if (!isValidElement(children)) return undefined;\n // If it's a string type but not a button (e.g., 'div'), return false\n if (typeof children.type === 'string') return false;\n\n // Check if it's a known component from the library\n const displayName = getComponentDisplayName(children);\n if (displayName && displayName in NATIVE_BUTTON_MAP) {\n return NATIVE_BUTTON_MAP[displayName];\n }\n\n // For unknown React components, default to false to avoid warnings\n // since most custom components don't render native buttons\n return false;\n }, [children, isNativeButtonTriggerElement, nativeButton, triggerNativeButton]);\n\n return {\n isNativeButtonTriggerElement,\n resolvedNativeButton,\n };\n}\n"],"mappings":";;;;;;;AAiCA,MAAM,oBAA6C;CACjD,GAAG;CACH,YAAY;CACZ,iBAAiB;CACjB,OAAO;CACP,QAAQ;CACR,aAAa;CACb,gBAAgB;CAChB,YAAY;CACZ,OAAO;CACP,sBAAsB;CACtB,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,eAAe;CACf,UAAU;CACV,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,cAAc;CACd,OAAO;CACP,cAAc;CACd,SAAS;CACT,aAAa;CACb,gBAAgB;CAChB,aAAa;CACb,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;CACL,OAAO;CACP,aAAa;CACb,eAAe;CACf,MAAM;CACN,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,sBAAsB;CACtB,WAAW;CACX,UAAU;CACV,gBAAgB;CAChB,cAAc;CACd,SAAS;CACT,KAAK;CACL,MAAM;CACN,UAAU;CACV,aAAa;CACb,OAAO;AACT;;;;;AAMA,SAAS,wBAAwB,SAA2C;CAC1E,MAAM,OAAO,QAAQ;CAErB,IAAI,OAAO,SAAS,UAAU,OAAO,KAAA;CAErC,IAAI,OAAO,SAAS,YAClB,OAAQ,KAAa,eAAe,KAAK;CAG3C,IAAI,OAAO,SAAS,YAAY,SAAS,MAQvC,OALG,KAAa,eACb,KAAa,QAAQ,eACrB,KAAa,QAAQ,QACrB,KAAa,MAAM,eACnB,KAAa,MAAM;AAK1B;;;;;;;AAQA,SAAgB,gBAAgB,EAC9B,UACA,cACA,uBACgD;CAChD,MAAM,+BAA+B,cAAc;EACjD,IAAI,CAAC,eAAe,QAAQ,GAAG,OAAO;EACtC,OAAO,OAAO,SAAS,SAAS,YAAY,SAAS,SAAS;CAChE,GAAG,CAAC,QAAQ,CAAC;CAyBb,OAAO;EACL;EACA,sBAzB2B,cAAc;GAEzC,IAAI,iBAAiB,KAAA,GAAW,OAAO;GAEvC,IAAI,wBAAwB,KAAA,GAAW,OAAO;GAE9C,IAAI,8BAA8B,OAAO;GAEzC,IAAI,CAAC,eAAe,QAAQ,GAAG,OAAO,KAAA;GAEtC,IAAI,OAAO,SAAS,SAAS,UAAU,OAAO;GAG9C,MAAM,cAAc,wBAAwB,QAAQ;GACpD,IAAI,eAAe,eAAe,mBAChC,OAAO,kBAAkB;GAK3B,OAAO;EACT,GAAG;GAAC;GAAU;GAA8B;GAAc;EAAmB,CAIxD;CACrB;AACF"}
|
|
1
|
+
{"version":3,"file":"useNativeButton.mjs","names":[],"sources":["../../src/hooks/useNativeButton.ts"],"sourcesContent":["import { isValidElement, type ReactElement, type ReactNode, useMemo } from 'react';\n\nexport interface UseNativeButtonOptions {\n /**\n * The children element that will be used as the trigger\n */\n children: ReactNode;\n /**\n * User-provided nativeButton prop\n */\n nativeButton?: boolean;\n /**\n * Additional nativeButton from trigger props (for DropdownMenu)\n */\n triggerNativeButton?: boolean;\n}\n\nexport interface UseNativeButtonResult {\n /**\n * Whether the trigger element is a native button\n */\n isNativeButtonTriggerElement: boolean;\n /**\n * The resolved nativeButton value to pass to Base UI components\n */\n resolvedNativeButton: boolean | undefined;\n}\n\n/**\n * Map of component displayNames to their nativeButton values.\n * Components that render native <button> elements should be true,\n * components that render non-button elements should be false.\n */\nconst NATIVE_BUTTON_MAP: Record<string, boolean> = {\n A: false,\n ActionIcon: false,\n ActionIconGroup: false,\n Alert: false,\n Avatar: false,\n AvatarGroup: false,\n BaseActionIcon: true,\n BaseButton: true,\n Block: false,\n BottomGradientButton: true,\n Burger: false,\n Button: true,\n Center: false,\n Checkbox: false,\n CheckboxGroup: false,\n Collapse: false,\n ColorSwatches: false,\n CopyButton: false,\n DownloadButton: false,\n EditableText: false,\n Empty: false,\n FileTypeIcon: false,\n Flexbox: false,\n FluentEmoji: false,\n GradientButton: true,\n Highlighter: false,\n Hotkey: false,\n Icon: false,\n Image: false,\n Img: false,\n Input: false,\n InputNumber: false,\n InputPassword: false,\n List: false,\n ListItem: false,\n Select: false,\n Switch: false,\n Markdown: false,\n MaterialFileTypeIcon: false,\n Segmented: false,\n Skeleton: false,\n SkeletonAvatar: false,\n SkeletonBlock: false,\n SkeletonButton: false,\n SkeletonParagraph: false,\n SkeletonTags: false,\n SkeletonText: false,\n SkeletonTitle: false,\n Snippet: false,\n Tag: false,\n Text: false,\n TextArea: false,\n ThemeSwitch: false,\n Video: false,\n};\n\n/**\n * Get the displayName of a React component from an element.\n * Handles function components, forwardRef, memo, etc.\n */\nfunction getComponentDisplayName(element: ReactElement): string | undefined {\n const type = element.type;\n\n if (typeof type === 'string') return undefined;\n\n if (typeof type === 'function') {\n return (type as any).displayName || type.name;\n }\n\n if (typeof type === 'object' && type !== null) {\n // Handle forwardRef, memo, etc.\n const displayName =\n (type as any).displayName ||\n (type as any).render?.displayName ||\n (type as any).render?.name ||\n (type as any).type?.displayName ||\n (type as any).type?.name;\n return displayName;\n }\n\n return undefined;\n}\n\n/**\n * Hook to resolve nativeButton prop for Base UI trigger components.\n *\n * When using `render`, Base UI expects the rendered element to be a native <button> by default.\n * If we can infer it's not, we opt out to avoid warnings (users can still override via `nativeButton`).\n */\nexport function useNativeButton({\n children,\n nativeButton,\n triggerNativeButton,\n}: UseNativeButtonOptions): UseNativeButtonResult {\n const isNativeButtonTriggerElement = useMemo(() => {\n if (!isValidElement(children)) return false;\n return typeof children.type === 'string' && children.type === 'button';\n }, [children]);\n\n const resolvedNativeButton = useMemo(() => {\n // User-provided nativeButton takes highest priority\n if (nativeButton !== undefined) return nativeButton;\n // Trigger props nativeButton (for DropdownMenu) takes second priority\n if (triggerNativeButton !== undefined) return triggerNativeButton;\n // If it's a native button element, return true\n if (isNativeButtonTriggerElement) return true;\n // If children is not a valid element, let Base UI decide\n if (!isValidElement(children)) return undefined;\n // If it's a string type but not a button (e.g., 'div'), return false\n if (typeof children.type === 'string') return false;\n\n // Check if it's a known component from the library\n const displayName = getComponentDisplayName(children);\n if (displayName && displayName in NATIVE_BUTTON_MAP) {\n return NATIVE_BUTTON_MAP[displayName];\n }\n\n // For unknown React components, default to false to avoid warnings\n // since most custom components don't render native buttons\n return false;\n }, [children, isNativeButtonTriggerElement, nativeButton, triggerNativeButton]);\n\n return {\n isNativeButtonTriggerElement,\n resolvedNativeButton,\n };\n}\n"],"mappings":";;;;;;;AAiCA,MAAM,oBAA6C;CACjD,GAAG;CACH,YAAY;CACZ,iBAAiB;CACjB,OAAO;CACP,QAAQ;CACR,aAAa;CACb,gBAAgB;CAChB,YAAY;CACZ,OAAO;CACP,sBAAsB;CACtB,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,eAAe;CACf,UAAU;CACV,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,cAAc;CACd,OAAO;CACP,cAAc;CACd,SAAS;CACT,aAAa;CACb,gBAAgB;CAChB,aAAa;CACb,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;CACL,OAAO;CACP,aAAa;CACb,eAAe;CACf,MAAM;CACN,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,sBAAsB;CACtB,WAAW;CACX,UAAU;CACV,gBAAgB;CAChB,eAAe;CACf,gBAAgB;CAChB,mBAAmB;CACnB,cAAc;CACd,cAAc;CACd,eAAe;CACf,SAAS;CACT,KAAK;CACL,MAAM;CACN,UAAU;CACV,aAAa;CACb,OAAO;AACT;;;;;AAMA,SAAS,wBAAwB,SAA2C;CAC1E,MAAM,OAAO,QAAQ;CAErB,IAAI,OAAO,SAAS,UAAU,OAAO,KAAA;CAErC,IAAI,OAAO,SAAS,YAClB,OAAQ,KAAa,eAAe,KAAK;CAG3C,IAAI,OAAO,SAAS,YAAY,SAAS,MAQvC,OALG,KAAa,eACb,KAAa,QAAQ,eACrB,KAAa,QAAQ,QACrB,KAAa,MAAM,eACnB,KAAa,MAAM;AAK1B;;;;;;;AAQA,SAAgB,gBAAgB,EAC9B,UACA,cACA,uBACgD;CAChD,MAAM,+BAA+B,cAAc;EACjD,IAAI,CAAC,eAAe,QAAQ,GAAG,OAAO;EACtC,OAAO,OAAO,SAAS,SAAS,YAAY,SAAS,SAAS;CAChE,GAAG,CAAC,QAAQ,CAAC;CAyBb,OAAO;EACL;EACA,sBAzB2B,cAAc;GAEzC,IAAI,iBAAiB,KAAA,GAAW,OAAO;GAEvC,IAAI,wBAAwB,KAAA,GAAW,OAAO;GAE9C,IAAI,8BAA8B,OAAO;GAEzC,IAAI,CAAC,eAAe,QAAQ,GAAG,OAAO,KAAA;GAEtC,IAAI,OAAO,SAAS,SAAS,UAAU,OAAO;GAG9C,MAAM,cAAc,wBAAwB,QAAQ;GACpD,IAAI,eAAe,eAAe,mBAChC,OAAO,kBAAkB;GAK3B,OAAO;EACT,GAAG;GAAC;GAAU;GAA8B;GAAc;EAAmB,CAIxD;CACrB;AACF"}
|
package/es/index.d.mts
CHANGED
|
@@ -192,10 +192,6 @@ import PreviewGroup from "./Image/PreviewGroup.mjs";
|
|
|
192
192
|
import Image from "./Image/index.mjs";
|
|
193
193
|
import A from "./A/index.mjs";
|
|
194
194
|
import { styles } from "./base-ui/DropdownMenu/sharedStyle.mjs";
|
|
195
|
-
import { SkeletonAvatarProps, SkeletonProps, SkeletonTextProps } from "./base-ui/Skeleton/type.mjs";
|
|
196
|
-
import SkeletonAvatar from "./base-ui/Skeleton/SkeletonAvatar.mjs";
|
|
197
|
-
import SkeletonText from "./base-ui/Skeleton/SkeletonText.mjs";
|
|
198
|
-
import Skeleton from "./base-ui/Skeleton/index.mjs";
|
|
199
195
|
import { MotionComponent, MotionComponentType, MotionProvider, useMotionComponent } from "./MotionProvider/index.mjs";
|
|
200
196
|
import { CDN, genCdnUrl } from "./utils/genCdnUrl.mjs";
|
|
201
197
|
import ConfigProvider, { Config, useCdnFn } from "./ConfigProvider/index.mjs";
|
|
@@ -265,6 +261,14 @@ import "./Select/index.mjs";
|
|
|
265
261
|
import { SideNavProps } from "./SideNav/type.mjs";
|
|
266
262
|
import SideNav from "./SideNav/SideNav.mjs";
|
|
267
263
|
import "./SideNav/index.mjs";
|
|
264
|
+
import { SkeletonAvatarProps, SkeletonBlockProps, SkeletonButtonProps, SkeletonParagraphProps, SkeletonProps, SkeletonTagsProps, SkeletonTitleProps } from "./Skeleton/type.mjs";
|
|
265
|
+
import SkeletonAvatar from "./Skeleton/SkeletonAvatar.mjs";
|
|
266
|
+
import SkeletonBlock from "./Skeleton/SkeletonBlock.mjs";
|
|
267
|
+
import SkeletonButton from "./Skeleton/SkeletonButton.mjs";
|
|
268
|
+
import SkeletonParagraph from "./Skeleton/SkeletonParagraph.mjs";
|
|
269
|
+
import SkeletonTags from "./Skeleton/SkeletonTags.mjs";
|
|
270
|
+
import SkeletonTitle from "./Skeleton/SkeletonTitle.mjs";
|
|
271
|
+
import Skeleton from "./Skeleton/index.mjs";
|
|
268
272
|
import { SliderWithInputProps } from "./SliderWithInput/type.mjs";
|
|
269
273
|
import SliderWithInput from "./SliderWithInput/SliderWithInput.mjs";
|
|
270
274
|
import "./SliderWithInput/index.mjs";
|
|
@@ -306,4 +310,4 @@ import { LayoutToc } from "./Layout/components/LayoutToc.mjs";
|
|
|
306
310
|
import Layout from "./Layout/index.mjs";
|
|
307
311
|
import { rehypeStreamAnimated } from "@lobehub/streamdown";
|
|
308
312
|
import { ErrorBoundary, ErrorBoundaryProps } from "react-error-boundary";
|
|
309
|
-
export { A, type AProps, Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, ActionIcon, ActionIconGroup, type ActionIconGroupEvent, type MenuItemType as ActionIconGroupItemType, type ActionIconGroupProps, type ActionIconProps, type ActionIconSize, Alert, type AlertProps, AutoComplete, type AutoCompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type BaseMenuItemType, Block, type BlockProps, Burger, type BurgerProps, Button, type ButtonProps, type CDN, CLASSNAMES, Center, type CenterProps, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, CodeDiff, type CodeDiffProps, CodeEditor, type CodeEditorProps, Collapse, type CollapseItemType, type CollapseProps, type ColorPalettes, type ColorPalettesAlpha, ColorSwatches, type ColorSwatchesProps, type ColorToken, type Config, ConfigProvider, type ContextMenuCheckboxItem, ContextMenuHost, type ContextMenuInterceptor, type ContextMenuItem, ContextMenuTrigger, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, type DiffViewMode, type DivProps, DownloadButton, type DownloadButtonProps, DraggablePanel, DraggablePanelBody, type DraggablePanelBodyProps, DraggablePanelContainer, type DraggablePanelContainerProps, DraggablePanelFooter, type DraggablePanelFooterProps, DraggablePanelHeader, type DraggablePanelHeaderProps, type DraggablePanelProps, DraggableSideNav, type DraggableSideNavProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownMenu, type DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, type DropdownMenuFooterProps, DropdownMenuGroup, DropdownMenuGroupLabel, type DropdownMenuGroupLabelProps, DropdownMenuHeader, type DropdownMenuHeaderProps, DropdownMenuItem, DropdownMenuItemContent, type DropdownMenuItemContentProps, DropdownMenuItemExtra, type DropdownMenuItemExtraProps, DropdownMenuItemIcon, type DropdownMenuItemIconProps, DropdownMenuItemLabel, type DropdownMenuItemLabelProps, type DropdownMenuItemProps, type MenuItemType as DropdownMenuItemType, type DropdownMenuPlacement, DropdownMenuPopup, type DropdownMenuPopupProps, DropdownMenuPortal, type DropdownMenuPortalProps, DropdownMenuPositioner, type DropdownMenuPositionerProps, type DropdownMenuProps, DropdownMenuRoot, DropdownMenuScrollViewport, type DropdownMenuScrollViewportProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, type DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, type DropdownMenuSubmenuTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, type DropdownProps, EditableText, type EditableTextProps, EditorSlashMenu, type EditorSlashMenuGroup, type EditorSlashMenuItems, type EditorSlashMenuOption, EmojiPicker, type EmojiPickerProps, Empty, type EmptyProps, ErrorBoundary, type ErrorBoundaryProps, FileTypeIcon, type FileTypeIconProps, _default as FlexBasic, type FlexBasicProps, _default as Flexbox, type FlexboxProps, FluentEmoji, type FluentEmojiProps, FontLoader, type FontLoaderProps, Footer, type FooterProps, Form, FormGroup, type FormGroupItemType, type FormGroupProps, type FormInstance, FormItem, type FormItemProps, FormModal, type FormModalProps, type FormProps, FormSubmitFooter, type FormSubmitFooterProps, FormTitle, type FormTitleProps, Freeze, type FreezeProps, type GenericItemType, Grid, type GridProps, GroupAvatar, type GroupAvatarProps, GuideCard, type GuideCardProps, DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, Header, type HeaderProps, Highlighter, type HighlighterProps, Hotkey, HotkeyInput, type HotkeyInputProps, type HotkeyProps, HtmlPreview, HtmlPreviewIframe, type HtmlPreviewIframeProps, type HtmlPreviewMode, type HtmlPreviewProps, type HtmlPreviewStreamingMode, I18nProvider, type I18nProviderProps, Icon, type IconProps, IconProvider, type IconSize, Image, type ImagePreviewOptions, type ImageProps, ImageSelect, type ImageSelectItem, type ImageSelectProps, type ImgProps, type ImperativeModalProps, Input, InputNumber, type InputNumberProps, InputOPT, type InputOPTProps, InputPassword, type InputPasswordProps, type InputProps, type ItemType, KeyMapEnum, LOBE_THEME_APP_ID, Layout, LayoutFooter, type LayoutFooterProps, LayoutHeader, type LayoutHeaderProps, LayoutMain, type LayoutMainProps, type LayoutProps, LayoutSidebar, LayoutSidebarInner, type LayoutSidebarInnerProps, type LayoutSidebarProps, LayoutToc, type LayoutTocProps, List, ListItem, type ListItemProps, type ListProps, type LobeCustomStylish, type LobeCustomToken, I18nProvider as LobeUIProvider, Markdown, type MarkdownProps, MaskShadow, type MaskShadowProps, MaterialFileTypeIcon, type MaterialFileTypeIconProps, Menu, type MenuCheckboxItemType, type MenuInfo, type MenuItemType, type MenuProps, Mermaid, type MermaidProps, Meta, type MetaProps, Modal, ModalHost, type ModalHostProps, type ModalInstance, type ModalProps, ModalProvider, MotionComponent, type MotionComponentType, MotionProvider, NeuralNetworkLoading, type NeuralNetworkLoadingProps, NeutralColors, NeutralColorsObj, PatchDiff, type PatchDiffProps, type Placement, type PlacementConfig, Popover, PopoverArrow, type PopoverArrowAtomProps, PopoverArrowIcon, PopoverBackdrop, type PopoverContextValue, PopoverGroup, type PopoverGroupHandle, type PopoverGroupItem, type PopoverPlacement, PopoverPopup, type PopoverPopupAtomProps, PopoverPortal, type PopoverPortalAtomProps, PopoverPositioner, type PopoverPositionerAtomProps, type PopoverProps, PopoverProvider, PopoverRoot, type PopoverTrigger, PopoverTriggerElement, type PopoverTriggerElementProps, PopoverViewport, type PopoverViewportAtomProps, type PresetColorKey, type PresetColorType, type PresetSystemColorKey, type PresetSystemColorType, PreviewGroup, type PreviewGroupProps, PrimaryColors, PrimaryColorsObj, type RawModalComponent, type RawModalComponentProps, type RawModalInstance, type RawModalKeyOptions, type RawModalOptions, ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, type ScrollAreaProps, ScrollAreaRoot, type ScrollAreaRootProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb, type ScrollAreaThumbProps, ScrollAreaViewport, type ScrollAreaViewportProps, ScrollShadow, type ScrollShadowProps, SearchBar, type SearchBarProps, SearchResultCards, type SearchResultCardsProps, Segmented, type SegmentedProps, Select, type SelectProps, _default$1 as ShikiLobeTheme, SideNav, type SideNavProps, Skeleton, SkeletonAvatar, type SkeletonAvatarProps, type SkeletonProps,
|
|
313
|
+
export { A, type AProps, Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, ActionIcon, ActionIconGroup, type ActionIconGroupEvent, type MenuItemType as ActionIconGroupItemType, type ActionIconGroupProps, type ActionIconProps, type ActionIconSize, Alert, type AlertProps, AutoComplete, type AutoCompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type BaseMenuItemType, Block, type BlockProps, Burger, type BurgerProps, Button, type ButtonProps, type CDN, CLASSNAMES, Center, type CenterProps, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, CodeDiff, type CodeDiffProps, CodeEditor, type CodeEditorProps, Collapse, type CollapseItemType, type CollapseProps, type ColorPalettes, type ColorPalettesAlpha, ColorSwatches, type ColorSwatchesProps, type ColorToken, type Config, ConfigProvider, type ContextMenuCheckboxItem, ContextMenuHost, type ContextMenuInterceptor, type ContextMenuItem, ContextMenuTrigger, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, type DiffViewMode, type DivProps, DownloadButton, type DownloadButtonProps, DraggablePanel, DraggablePanelBody, type DraggablePanelBodyProps, DraggablePanelContainer, type DraggablePanelContainerProps, DraggablePanelFooter, type DraggablePanelFooterProps, DraggablePanelHeader, type DraggablePanelHeaderProps, type DraggablePanelProps, DraggableSideNav, type DraggableSideNavProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownMenu, type DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, type DropdownMenuFooterProps, DropdownMenuGroup, DropdownMenuGroupLabel, type DropdownMenuGroupLabelProps, DropdownMenuHeader, type DropdownMenuHeaderProps, DropdownMenuItem, DropdownMenuItemContent, type DropdownMenuItemContentProps, DropdownMenuItemExtra, type DropdownMenuItemExtraProps, DropdownMenuItemIcon, type DropdownMenuItemIconProps, DropdownMenuItemLabel, type DropdownMenuItemLabelProps, type DropdownMenuItemProps, type MenuItemType as DropdownMenuItemType, type DropdownMenuPlacement, DropdownMenuPopup, type DropdownMenuPopupProps, DropdownMenuPortal, type DropdownMenuPortalProps, DropdownMenuPositioner, type DropdownMenuPositionerProps, type DropdownMenuProps, DropdownMenuRoot, DropdownMenuScrollViewport, type DropdownMenuScrollViewportProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, type DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, type DropdownMenuSubmenuTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, type DropdownProps, EditableText, type EditableTextProps, EditorSlashMenu, type EditorSlashMenuGroup, type EditorSlashMenuItems, type EditorSlashMenuOption, EmojiPicker, type EmojiPickerProps, Empty, type EmptyProps, ErrorBoundary, type ErrorBoundaryProps, FileTypeIcon, type FileTypeIconProps, _default as FlexBasic, type FlexBasicProps, _default as Flexbox, type FlexboxProps, FluentEmoji, type FluentEmojiProps, FontLoader, type FontLoaderProps, Footer, type FooterProps, Form, FormGroup, type FormGroupItemType, type FormGroupProps, type FormInstance, FormItem, type FormItemProps, FormModal, type FormModalProps, type FormProps, FormSubmitFooter, type FormSubmitFooterProps, FormTitle, type FormTitleProps, Freeze, type FreezeProps, type GenericItemType, Grid, type GridProps, GroupAvatar, type GroupAvatarProps, GuideCard, type GuideCardProps, DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, Header, type HeaderProps, Highlighter, type HighlighterProps, Hotkey, HotkeyInput, type HotkeyInputProps, type HotkeyProps, HtmlPreview, HtmlPreviewIframe, type HtmlPreviewIframeProps, type HtmlPreviewMode, type HtmlPreviewProps, type HtmlPreviewStreamingMode, I18nProvider, type I18nProviderProps, Icon, type IconProps, IconProvider, type IconSize, Image, type ImagePreviewOptions, type ImageProps, ImageSelect, type ImageSelectItem, type ImageSelectProps, type ImgProps, type ImperativeModalProps, Input, InputNumber, type InputNumberProps, InputOPT, type InputOPTProps, InputPassword, type InputPasswordProps, type InputProps, type ItemType, KeyMapEnum, LOBE_THEME_APP_ID, Layout, LayoutFooter, type LayoutFooterProps, LayoutHeader, type LayoutHeaderProps, LayoutMain, type LayoutMainProps, type LayoutProps, LayoutSidebar, LayoutSidebarInner, type LayoutSidebarInnerProps, type LayoutSidebarProps, LayoutToc, type LayoutTocProps, List, ListItem, type ListItemProps, type ListProps, type LobeCustomStylish, type LobeCustomToken, I18nProvider as LobeUIProvider, Markdown, type MarkdownProps, MaskShadow, type MaskShadowProps, MaterialFileTypeIcon, type MaterialFileTypeIconProps, Menu, type MenuCheckboxItemType, type MenuInfo, type MenuItemType, type MenuProps, Mermaid, type MermaidProps, Meta, type MetaProps, Modal, ModalHost, type ModalHostProps, type ModalInstance, type ModalProps, ModalProvider, MotionComponent, type MotionComponentType, MotionProvider, NeuralNetworkLoading, type NeuralNetworkLoadingProps, NeutralColors, NeutralColorsObj, PatchDiff, type PatchDiffProps, type Placement, type PlacementConfig, Popover, PopoverArrow, type PopoverArrowAtomProps, PopoverArrowIcon, PopoverBackdrop, type PopoverContextValue, PopoverGroup, type PopoverGroupHandle, type PopoverGroupItem, type PopoverPlacement, PopoverPopup, type PopoverPopupAtomProps, PopoverPortal, type PopoverPortalAtomProps, PopoverPositioner, type PopoverPositionerAtomProps, type PopoverProps, PopoverProvider, PopoverRoot, type PopoverTrigger, PopoverTriggerElement, type PopoverTriggerElementProps, PopoverViewport, type PopoverViewportAtomProps, type PresetColorKey, type PresetColorType, type PresetSystemColorKey, type PresetSystemColorType, PreviewGroup, type PreviewGroupProps, PrimaryColors, PrimaryColorsObj, type RawModalComponent, type RawModalComponentProps, type RawModalInstance, type RawModalKeyOptions, type RawModalOptions, ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, type ScrollAreaProps, ScrollAreaRoot, type ScrollAreaRootProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb, type ScrollAreaThumbProps, ScrollAreaViewport, type ScrollAreaViewportProps, ScrollShadow, type ScrollShadowProps, SearchBar, type SearchBarProps, SearchResultCards, type SearchResultCardsProps, Segmented, type SegmentedProps, Select, type SelectProps, _default$1 as ShikiLobeTheme, SideNav, type SideNavProps, Skeleton, SkeletonAvatar, type SkeletonAvatarProps, SkeletonBlock, type SkeletonBlockProps, SkeletonButton, type SkeletonButtonProps, SkeletonParagraph, type SkeletonParagraphProps, type SkeletonProps, SkeletonTags, type SkeletonTagsProps, SkeletonTitle, type SkeletonTitleProps, SliderWithInput, type SliderWithInputProps, Snippet, type SnippetProps, SortableList, type SortableListProps, type SpanProps, type SvgProps, SyntaxHighlighter, type SyntaxHighlighterProps, SyntaxMermaid, type SyntaxMermaidProps, type SystemColorToken, Tabs, type TabsProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, type TextProps, ThemeProvider, type ThemeProviderProps, ThemeSwitch, type ThemeSwitchProps, type ToastAPI, ToastHost, type ToastHostProps, type ToastInstance, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastType, Toc, type TocProps, Tooltip, TooltipGroup, type TooltipProps, type Trigger, Typography, type TypographyProps, Video, type VideoProps, closeContextMenu, combineKeys, copyToClipboard, createModal, createRawModal, findCustomThemeName, genCdnUrl, generateColorNeutralPalette, generateColorPalette, highlighterThemes, containsScript as htmlPreviewContainsScript, isFullHtmlDocument, isHtmlContentClosed, generateCustomStylish as lobeCustomStylish, generateCustomToken as lobeCustomToken, staticStylish as lobeStaticStylish, styles as menuSharedStyles, mermaidThemes, neutralColors, neutralColorsSwatches, placementMap, preprocessMarkdownContent, preventDefault, preventDefaultAndStopPropagation, primaryColors, primaryColorsSwatches, rehypeCustomFootnotes, rehypeKatexDir, rehypeStreamAnimated, remarkBr, remarkColor, remarkCustomFootnotes, remarkGfmPlus, remarkVideo, renderDropdownMenuItems, setContextMenuInterceptor, showContextMenu, stopPropagation, toFloatingUIPlacement, toast, updateContextMenuItems, useAppElement, useCdnFn, useModalContext, useMotionComponent, usePopoverContext, usePopoverGroupHandle, usePopoverPortalContainer, useToast, useTranslation };
|
package/es/index.mjs
CHANGED
|
@@ -40,9 +40,6 @@ import AutoComplete from "./AutoComplete/Select.mjs";
|
|
|
40
40
|
import FluentEmoji from "./FluentEmoji/FluentEmoji.mjs";
|
|
41
41
|
import AvatarGroup from "./Avatar/AvatarGroup/index.mjs";
|
|
42
42
|
import Avatar from "./Avatar/index.mjs";
|
|
43
|
-
import SkeletonAvatar from "./base-ui/Skeleton/SkeletonAvatar.mjs";
|
|
44
|
-
import SkeletonText from "./base-ui/Skeleton/SkeletonText.mjs";
|
|
45
|
-
import Skeleton from "./base-ui/Skeleton/index.mjs";
|
|
46
43
|
import Burger from "./Burger/Burger.mjs";
|
|
47
44
|
import Button from "./Button/Button.mjs";
|
|
48
45
|
import CheckboxGroup from "./Checkbox/CheckboxGroup.mjs";
|
|
@@ -151,10 +148,17 @@ import { ScrollArea } from "./base-ui/ScrollArea/ScrollArea.mjs";
|
|
|
151
148
|
import SearchBar from "./SearchBar/SearchBar.mjs";
|
|
152
149
|
import Select from "./Select/Select.mjs";
|
|
153
150
|
import SideNav from "./SideNav/SideNav.mjs";
|
|
151
|
+
import SkeletonBlock from "./Skeleton/SkeletonBlock.mjs";
|
|
152
|
+
import SkeletonAvatar from "./Skeleton/SkeletonAvatar.mjs";
|
|
153
|
+
import SkeletonParagraph from "./Skeleton/SkeletonParagraph.mjs";
|
|
154
|
+
import SkeletonTitle from "./Skeleton/SkeletonTitle.mjs";
|
|
155
|
+
import SkeletonButton from "./Skeleton/SkeletonButton.mjs";
|
|
156
|
+
import SkeletonTags from "./Skeleton/SkeletonTags.mjs";
|
|
157
|
+
import Skeleton from "./Skeleton/index.mjs";
|
|
154
158
|
import SliderWithInput from "./SliderWithInput/SliderWithInput.mjs";
|
|
155
159
|
import SortableList from "./SortableList/SortableList.mjs";
|
|
156
160
|
import ThemeSwitch from "./ThemeSwitch/ThemeSwitch.mjs";
|
|
157
161
|
import Toc from "./Toc/Toc.mjs";
|
|
158
162
|
import { rehypeStreamAnimated } from "@lobehub/streamdown";
|
|
159
163
|
import { ErrorBoundary } from "react-error-boundary";
|
|
160
|
-
export { A, Accordion, AccordionItem, ActionIcon, ActionIconGroup, Alert, AutoComplete, Avatar, AvatarGroup, Block, Burger, Button, CLASSNAMES, Center, Checkbox, CheckboxGroup, CodeDiff, CodeEditor, Collapse, ColorSwatches, ConfigProvider, ContextMenuHost, ContextMenuTrigger, CopyButton, DatePicker, DownloadButton, DraggablePanel, DraggablePanelBody, DraggablePanelContainer, DraggablePanelFooter, DraggablePanelHeader, DraggableSideNav, Drawer, Dropdown, DropdownMenu, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuHeader, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuTrigger, EditableText, EditorSlashMenu, EmojiPicker, Empty, ErrorBoundary, FileTypeIcon, FlexBasic_default as FlexBasic, FlexBasic_default as Flexbox, FluentEmoji, FontLoader, Footer, Form, FormGroup, FormItem, FormModal, FormSubmitFooter, FormTitle, Freeze, Grid, GroupAvatar, GuideCard, DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, Header, Highlighter, Hotkey, HotkeyInput, HtmlPreview, HtmlPreviewIframe, I18nProvider, Icon, IconProvider, Image, ImageSelect, Input, InputNumber, InputOPT, InputPassword, KeyMapEnum, LOBE_THEME_APP_ID, Layout, LayoutFooter, LayoutHeader, LayoutMain, LayoutSidebar, LayoutSidebarInner, LayoutToc, List, ListItem, I18nProvider as LobeUIProvider, Markdown, MaskShadow, MaterialFileTypeIcon, Menu, Mermaid, Meta, Modal, ModalHost, ModalProvider, MotionComponent, MotionProvider, NeuralNetworkLoading, PatchDiff, Popover, PopoverArrow, PopoverArrowIcon, PopoverBackdrop, PopoverGroup, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverProvider, PopoverRoot, PopoverTriggerElement, PopoverViewport, PreviewGroup, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, ScrollShadow, SearchBar, SearchResultCards, Segmented, Select, lobe_theme_default as ShikiLobeTheme, SideNav, Skeleton, SkeletonAvatar,
|
|
164
|
+
export { A, Accordion, AccordionItem, ActionIcon, ActionIconGroup, Alert, AutoComplete, Avatar, AvatarGroup, Block, Burger, Button, CLASSNAMES, Center, Checkbox, CheckboxGroup, CodeDiff, CodeEditor, Collapse, ColorSwatches, ConfigProvider, ContextMenuHost, ContextMenuTrigger, CopyButton, DatePicker, DownloadButton, DraggablePanel, DraggablePanelBody, DraggablePanelContainer, DraggablePanelFooter, DraggablePanelHeader, DraggableSideNav, Drawer, Dropdown, DropdownMenu, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuHeader, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuTrigger, EditableText, EditorSlashMenu, EmojiPicker, Empty, ErrorBoundary, FileTypeIcon, FlexBasic_default as FlexBasic, FlexBasic_default as Flexbox, FluentEmoji, FontLoader, Footer, Form, FormGroup, FormItem, FormModal, FormSubmitFooter, FormTitle, Freeze, Grid, GroupAvatar, GuideCard, DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, Header, Highlighter, Hotkey, HotkeyInput, HtmlPreview, HtmlPreviewIframe, I18nProvider, Icon, IconProvider, Image, ImageSelect, Input, InputNumber, InputOPT, InputPassword, KeyMapEnum, LOBE_THEME_APP_ID, Layout, LayoutFooter, LayoutHeader, LayoutMain, LayoutSidebar, LayoutSidebarInner, LayoutToc, List, ListItem, I18nProvider as LobeUIProvider, Markdown, MaskShadow, MaterialFileTypeIcon, Menu, Mermaid, Meta, Modal, ModalHost, ModalProvider, MotionComponent, MotionProvider, NeuralNetworkLoading, PatchDiff, Popover, PopoverArrow, PopoverArrowIcon, PopoverBackdrop, PopoverGroup, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverProvider, PopoverRoot, PopoverTriggerElement, PopoverViewport, PreviewGroup, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, ScrollShadow, SearchBar, SearchResultCards, Segmented, Select, lobe_theme_default as ShikiLobeTheme, SideNav, Skeleton, SkeletonAvatar, SkeletonBlock, SkeletonButton, SkeletonParagraph, SkeletonTags, SkeletonTitle, SliderWithInput, Snippet, SortableList, SyntaxHighlighter, SyntaxMermaid, Tabs, Tag, Text, TextArea, ThemeProvider, ThemeSwitch, ToastHost, Toc, Tooltip, TooltipGroup, Typography, Video, closeContextMenu, combineKeys, copyToClipboard, createModal, createRawModal, findCustomThemeName, genCdnUrl, generateColorNeutralPalette, generateColorPalette, highlighterThemes, containsScript as htmlPreviewContainsScript, isFullHtmlDocument, isHtmlContentClosed, generateCustomStylish as lobeCustomStylish, generateCustomToken as lobeCustomToken, staticStylish as lobeStaticStylish, styles as menuSharedStyles, mermaidThemes, neutralColors, neutralColorsSwatches, placementMap, preprocessMarkdownContent, preventDefault, preventDefaultAndStopPropagation, primaryColors, primaryColorsSwatches, rehypeCustomFootnotes, rehypeKatexDir, rehypeStreamAnimated, remarkBr, remarkColor, remarkCustomFootnotes, remarkGfmPlus, remarkVideo, renderDropdownMenuItems, setContextMenuInterceptor, showContextMenu, stopPropagation, toFloatingUIPlacement, toast, updateContextMenuItems, useAppElement, useCdnFn, useModalContext, useMotionComponent, usePopoverContext, usePopoverGroupHandle, usePopoverPortalContainer, useToast, useTranslation };
|