@lobehub/ui 5.36.2 → 5.36.4

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 (63) hide show
  1. package/es/Image/Image.mjs +2 -3
  2. package/es/Image/Image.mjs.map +1 -1
  3. package/es/Video/index.mjs +3 -4
  4. package/es/Video/index.mjs.map +1 -1
  5. package/es/base-ui/Input/style.d.mts +1 -1
  6. package/es/base-ui/Modal/Modal.mjs +1 -1
  7. package/es/base-ui/Modal/Modal.mjs.map +1 -1
  8. package/es/base-ui/Modal/imperative.mjs +3 -1
  9. package/es/base-ui/Modal/imperative.mjs.map +1 -1
  10. package/es/base-ui/Modal/style.mjs +8 -6
  11. package/es/base-ui/Modal/style.mjs.map +1 -1
  12. package/es/base-ui/Skeleton/Skeleton.mjs +20 -0
  13. package/es/base-ui/Skeleton/Skeleton.mjs.map +1 -0
  14. package/es/{Skeleton → base-ui/Skeleton}/SkeletonAvatar.d.mts +1 -1
  15. package/es/base-ui/Skeleton/SkeletonAvatar.mjs +16 -0
  16. package/es/base-ui/Skeleton/SkeletonAvatar.mjs.map +1 -0
  17. package/es/base-ui/Skeleton/SkeletonText.d.mts +7 -0
  18. package/es/base-ui/Skeleton/SkeletonText.mjs +36 -0
  19. package/es/base-ui/Skeleton/SkeletonText.mjs.map +1 -0
  20. package/es/base-ui/Skeleton/index.d.mts +13 -0
  21. package/es/base-ui/Skeleton/index.mjs +11 -0
  22. package/es/base-ui/Skeleton/index.mjs.map +1 -0
  23. package/es/base-ui/Skeleton/style.mjs +77 -0
  24. package/es/base-ui/Skeleton/style.mjs.map +1 -0
  25. package/es/base-ui/Skeleton/type.d.mts +23 -0
  26. package/es/base-ui/index.d.mts +5 -1
  27. package/es/base-ui/index.mjs +4 -1
  28. package/es/eslint/index.mjs +27 -1
  29. package/es/eslint/index.mjs.map +1 -1
  30. package/es/hooks/useNativeButton.mjs +1 -5
  31. package/es/hooks/useNativeButton.mjs.map +1 -1
  32. package/es/index.d.mts +5 -9
  33. package/es/index.mjs +4 -8
  34. package/es/static-css/baseline.mjs +0 -1
  35. package/es/static-css/baseline.mjs.map +1 -1
  36. package/package.json +1 -1
  37. package/es/Skeleton/Skeleton.mjs +0 -69
  38. package/es/Skeleton/Skeleton.mjs.map +0 -1
  39. package/es/Skeleton/SkeletonAvatar.mjs +0 -29
  40. package/es/Skeleton/SkeletonAvatar.mjs.map +0 -1
  41. package/es/Skeleton/SkeletonBlock.d.mts +0 -7
  42. package/es/Skeleton/SkeletonBlock.mjs +0 -20
  43. package/es/Skeleton/SkeletonBlock.mjs.map +0 -1
  44. package/es/Skeleton/SkeletonButton.d.mts +0 -7
  45. package/es/Skeleton/SkeletonButton.mjs +0 -37
  46. package/es/Skeleton/SkeletonButton.mjs.map +0 -1
  47. package/es/Skeleton/SkeletonParagraph.d.mts +0 -7
  48. package/es/Skeleton/SkeletonParagraph.mjs +0 -40
  49. package/es/Skeleton/SkeletonParagraph.mjs.map +0 -1
  50. package/es/Skeleton/SkeletonTags.d.mts +0 -7
  51. package/es/Skeleton/SkeletonTags.mjs +0 -54
  52. package/es/Skeleton/SkeletonTags.mjs.map +0 -1
  53. package/es/Skeleton/SkeletonTitle.d.mts +0 -7
  54. package/es/Skeleton/SkeletonTitle.mjs +0 -27
  55. package/es/Skeleton/SkeletonTitle.mjs.map +0 -1
  56. package/es/Skeleton/index.d.mts +0 -22
  57. package/es/Skeleton/index.d.ts +0 -1
  58. package/es/Skeleton/index.js +0 -1
  59. package/es/Skeleton/index.mjs +0 -19
  60. package/es/Skeleton/index.mjs.map +0 -1
  61. package/es/Skeleton/style.mjs +0 -47
  62. package/es/Skeleton/style.mjs.map +0 -1
  63. package/es/Skeleton/type.d.mts +0 -59
@@ -1,40 +0,0 @@
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
- const SkeletonParagraph = ({ active, rows = DEFAULT_ROWS, gap, width, height, fontSize, lineHeight, style, className, ...rest }) => {
8
- const rowGap = gap;
9
- const rowCount = Math.max(rows, 1);
10
- const baseFontSize = fontSize ?? 14;
11
- const marginBlock = (height ? height : Math.round(baseFontSize * (lineHeight ?? 1.6))) - baseFontSize;
12
- const widthList = Array.isArray(width) ? width : null;
13
- const getRowWidth = (index) => {
14
- if (widthList) return widthList[index] ?? widthList.at(-1) ?? "100%";
15
- if (width !== void 0) return width;
16
- if (index === rowCount - 1) return "66%";
17
- return "100%";
18
- };
19
- const containerStyle = {
20
- gap: rowGap,
21
- ...style
22
- };
23
- return /* @__PURE__ */ jsx(FlexBasic_default, {
24
- className,
25
- gap: gap || marginBlock,
26
- style: containerStyle,
27
- width: "100%",
28
- ...rest,
29
- children: Array.from({ length: rowCount }).map((_, index) => /* @__PURE__ */ jsx(SkeletonBlock, {
30
- active,
31
- height: baseFontSize,
32
- width: getRowWidth(index)
33
- }, index))
34
- });
35
- };
36
- SkeletonParagraph.displayName = "SkeletonParagraph";
37
- //#endregion
38
- export { SkeletonParagraph as default };
39
-
40
- //# sourceMappingURL=SkeletonParagraph.mjs.map
@@ -1 +0,0 @@
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\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;AAErB,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"}
@@ -1,7 +0,0 @@
1
- import { SkeletonTagsProps } from "./type.mjs";
2
- import { FC } from "react";
3
- //#region src/Skeleton/SkeletonTags.d.ts
4
- declare const SkeletonTags: FC<SkeletonTagsProps>;
5
- //#endregion
6
- export { SkeletonTags as default };
7
- //# sourceMappingURL=SkeletonTags.d.mts.map
@@ -1,54 +0,0 @@
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
- const SkeletonTags = ({ active, className, count = DEFAULT_COUNT, gap, height, size = "middle", style, width, ...rest }) => {
19
- const resolvedGap = gap !== void 0 ? `${gap}px` : cssVar.paddingXS;
20
- const resolvedCount = Math.max(count, 1);
21
- const resolvedHeight = height ?? HEIGHT_MAP[size];
22
- const widthList = Array.isArray(width) ? width : null;
23
- const defaultWidth = DEFAULT_WIDTH_MAP[size];
24
- const RADIUS_MAP = {
25
- large: cssVar.borderRadius,
26
- middle: cssVar.borderRadiusSM,
27
- small: cssVar.borderRadiusXS
28
- };
29
- const getWidth = (index) => {
30
- if (widthList) return widthList[index] ?? widthList.at(-1) ?? defaultWidth;
31
- if (width !== void 0) return width;
32
- return defaultWidth;
33
- };
34
- return /* @__PURE__ */ jsx(FlexBasic_default, {
35
- horizontal: true,
36
- className,
37
- style: {
38
- gap: resolvedGap,
39
- ...style
40
- },
41
- ...rest,
42
- children: Array.from({ length: resolvedCount }).map((_, index) => /* @__PURE__ */ jsx(SkeletonBlock, {
43
- active,
44
- height: resolvedHeight,
45
- width: getWidth(index),
46
- style: { borderRadius: RADIUS_MAP[size] }
47
- }, index))
48
- });
49
- };
50
- SkeletonTags.displayName = "SkeletonTags";
51
- //#endregion
52
- export { SkeletonTags as default };
53
-
54
- //# sourceMappingURL=SkeletonTags.mjs.map
@@ -1 +0,0 @@
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\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;AAEA,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"}
@@ -1,7 +0,0 @@
1
- import { SkeletonTitleProps } from "./type.mjs";
2
- import { FC } from "react";
3
- //#region src/Skeleton/SkeletonTitle.d.ts
4
- declare const SkeletonTitle: FC<SkeletonTitleProps>;
5
- //#endregion
6
- export { SkeletonTitle as default };
7
- //# sourceMappingURL=SkeletonTitle.d.mts.map
@@ -1,27 +0,0 @@
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
- const SkeletonTitle = ({ active, fontSize, lineHeight, height, width = "60%", style, className, ...rest }) => {
7
- const resolvedLineHeight = lineHeight ?? 1.6;
8
- const baseFontSize = fontSize !== void 0 ? `${fontSize}px` : cssVar.fontSize;
9
- const heightMultiplier = 1 + (resolvedLineHeight - 1) * .5;
10
- const marginMultiplier = (resolvedLineHeight - 1) * .25;
11
- return /* @__PURE__ */ jsx(SkeletonBlock, {
12
- active,
13
- className,
14
- height: height ?? `round(calc(${baseFontSize} * ${heightMultiplier}), 1px)`,
15
- width,
16
- style: {
17
- marginBlock: `round(calc(${baseFontSize} * ${marginMultiplier}), 1px)`,
18
- ...style
19
- },
20
- ...rest
21
- });
22
- };
23
- SkeletonTitle.displayName = "SkeletonTitle";
24
- //#endregion
25
- export { SkeletonTitle as default };
26
-
27
- //# sourceMappingURL=SkeletonTitle.mjs.map
@@ -1 +0,0 @@
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\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":";;;;;AAQA,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"}
@@ -1,22 +0,0 @@
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
@@ -1 +0,0 @@
1
- export * from './index.d.mts';
@@ -1 +0,0 @@
1
- export * from './index.mjs';
@@ -1,19 +0,0 @@
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
@@ -1 +0,0 @@
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"}
@@ -1,47 +0,0 @@
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
@@ -1 +0,0 @@
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"}
@@ -1,59 +0,0 @@
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