@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.
Files changed (39) hide show
  1. package/es/Skeleton/Skeleton.mjs +72 -0
  2. package/es/Skeleton/Skeleton.mjs.map +1 -0
  3. package/es/Skeleton/SkeletonAvatar.d.mts +10 -0
  4. package/es/Skeleton/SkeletonAvatar.mjs +32 -0
  5. package/es/Skeleton/SkeletonAvatar.mjs.map +1 -0
  6. package/es/Skeleton/SkeletonBlock.d.mts +10 -0
  7. package/es/Skeleton/SkeletonBlock.mjs +23 -0
  8. package/es/Skeleton/SkeletonBlock.mjs.map +1 -0
  9. package/es/Skeleton/SkeletonButton.d.mts +10 -0
  10. package/es/Skeleton/SkeletonButton.mjs +40 -0
  11. package/es/Skeleton/SkeletonButton.mjs.map +1 -0
  12. package/es/Skeleton/SkeletonParagraph.d.mts +10 -0
  13. package/es/Skeleton/SkeletonParagraph.mjs +43 -0
  14. package/es/Skeleton/SkeletonParagraph.mjs.map +1 -0
  15. package/es/Skeleton/SkeletonTags.d.mts +10 -0
  16. package/es/Skeleton/SkeletonTags.mjs +57 -0
  17. package/es/Skeleton/SkeletonTags.mjs.map +1 -0
  18. package/es/Skeleton/SkeletonTitle.d.mts +10 -0
  19. package/es/Skeleton/SkeletonTitle.mjs +30 -0
  20. package/es/Skeleton/SkeletonTitle.mjs.map +1 -0
  21. package/es/Skeleton/index.d.mts +22 -0
  22. package/es/Skeleton/index.d.ts +1 -0
  23. package/es/Skeleton/index.js +1 -0
  24. package/es/Skeleton/index.mjs +19 -0
  25. package/es/Skeleton/index.mjs.map +1 -0
  26. package/es/Skeleton/style.mjs +47 -0
  27. package/es/Skeleton/style.mjs.map +1 -0
  28. package/es/Skeleton/type.d.mts +59 -0
  29. package/es/base-ui/Skeleton/SkeletonAvatar.mjs +4 -1
  30. package/es/base-ui/Skeleton/SkeletonAvatar.mjs.map +1 -1
  31. package/es/base-ui/Skeleton/style.mjs +3 -1
  32. package/es/base-ui/Skeleton/style.mjs.map +1 -1
  33. package/es/base-ui/index.d.mts +4 -4
  34. package/es/base-ui/index.mjs +3 -3
  35. package/es/hooks/useNativeButton.mjs +5 -0
  36. package/es/hooks/useNativeButton.mjs.map +1 -1
  37. package/es/index.d.mts +9 -5
  38. package/es/index.mjs +8 -4
  39. 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":";;;;AAOA,MAAM,eAAe;AAErB,MAAM,kBAA2C,EAC/C,QAAQ,UACR,OAAO,cACP,OACA,QACA,GAAG,WAEH,oBAAC,UAAD;CACE,QAAQ,UAAU;CAClB,QAAQ,UAAU,WAAW,QAAQ,KAAA;CACrC,OAAO,SAAS;CAChB,GAAI;AACL,CAAA;AAGH,eAAe,cAAc"}
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 flex: none;\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,MAAM,GAAG;;;;;;;;uBAQU,OAAO,aAAa;;oBAEvB,OAAO,iBAAiB;;;;;;;;;;EAWxC,MAAM,GAAG;;mBAEM,KAAK;;EAGpB,OAAO,GAAG;;;;;;;;;;;;YAYF,OAAO,UAAU;;;;qBAIR,MAAM;;;EAIvB,MAAM,GAAG;;;;;CAKX;AACF,CAAC"}
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"}
@@ -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";
@@ -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, SkeletonText, type SkeletonTextProps, 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 };
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, SkeletonText, 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 };
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 };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lobehub/ui",
3
- "version": "5.36.4",
3
+ "version": "5.36.5",
4
4
  "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
5
5
  "keywords": [
6
6
  "lobehub",