@lobehub/ui 3.4.2 → 3.4.3

package/es/SideNav/SideNav.mjs

@@ -0,0 +1,40 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { useStyles } from "./style.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/SideNav/SideNav.tsx
+const SideNav = memo(({ className, avatar, topActions, bottomActions, ...rest }) => {
+	const { styles, cx } = useStyles();
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		align: "center",
+		className: cx(styles, className),
+		flex: "none",
+		justify: "space-between",
+		...rest,
+		children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
+			align: "center",
+			direction: "vertical",
+			gap: 12,
+			children: [avatar, /* @__PURE__ */ jsx(FlexBasic_default, {
+				align: "center",
+				direction: "vertical",
+				gap: 8,
+				children: topActions
+			})]
+		}), /* @__PURE__ */ jsx(FlexBasic_default, {
+			align: "center",
+			direction: "vertical",
+			gap: 4,
+			children: bottomActions
+		})]
+	});
+});
+SideNav.displayName = "SideNav";
+var SideNav_default = SideNav;
+
+//#endregion
+export { SideNav_default as default };
+//# sourceMappingURL=SideNav.mjs.map

package/es/SideNav/SideNav.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNav.mjs","names":["Flexbox"],"sources":["../../src/SideNav/SideNav.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { useStyles } from './style';\nimport type { SideNavProps } from './type';\n\nconst SideNav = memo<SideNavProps>(({ className, avatar, topActions, bottomActions, ...rest }) => {\n  const { styles, cx } = useStyles();\n\n  return (\n    <Flexbox\n      align={'center'}\n      className={cx(styles, className)}\n      flex={'none'}\n      justify={'space-between'}\n      {...rest}\n    >\n      <Flexbox align=\"center\" direction=\"vertical\" gap={12}>\n        {avatar}\n        <Flexbox align=\"center\" direction=\"vertical\" gap={8}>\n          {topActions}\n        </Flexbox>\n      </Flexbox>\n      <Flexbox align=\"center\" direction=\"vertical\" gap={4}>\n        {bottomActions}\n      </Flexbox>\n    </Flexbox>\n  );\n});\n\nSideNav.displayName = 'SideNav';\n\nexport default SideNav;\n"],"mappings":";;;;;;;;AASA,MAAM,UAAU,MAAoB,EAAE,WAAW,QAAQ,YAAY,eAAe,GAAG,WAAW;CAChG,MAAM,EAAE,QAAQ,OAAO,WAAW;AAElC,QACE,qBAACA;EACC,OAAO;EACP,WAAW,GAAG,QAAQ,UAAU;EAChC,MAAM;EACN,SAAS;EACT,GAAI;aAEJ,qBAACA;GAAQ,OAAM;GAAS,WAAU;GAAW,KAAK;cAC/C,QACD,oBAACA;IAAQ,OAAM;IAAS,WAAU;IAAW,KAAK;cAC/C;KACO;IACF,EACV,oBAACA;GAAQ,OAAM;GAAS,WAAU;GAAW,KAAK;aAC/C;IACO;GACF;EAEZ;AAEF,QAAQ,cAAc;AAEtB,sBAAe"}

package/es/SideNav/index.d.mts

@@ -0,0 +1,3 @@
+import { SideNavProps } from "./type.mjs";
+import { SideNav } from "./SideNav.mjs";
+export { SideNavProps, SideNav as default };

package/es/SideNav/index.mjs

@@ -0,0 +1,3 @@
+import SideNav_default from "./SideNav.mjs";
+
+export { SideNav_default as default };

package/es/SideNav/style.mjs

@@ -0,0 +1,17 @@
+import { createStyles } from "antd-style";
+
+//#region src/SideNav/style.ts
+const useStyles = createStyles(({ css: css$1, token }) => css$1`
+    width: 58px;
+    height: 100%;
+    min-height: 640px;
+    padding-block: 12px;
+    padding-inline: 0;
+    border-inline-end: 1px solid ${token.colorBorderSecondary};
+
+    background: ${token.colorBgContainer};
+  `);
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/SideNav/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/SideNav/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(\n  ({ css, token }) => css`\n    width: 58px;\n    height: 100%;\n    min-height: 640px;\n    padding-block: 12px;\n    padding-inline: 0;\n    border-inline-end: 1px solid ${token.colorBorderSecondary};\n\n    background: ${token.colorBgContainer};\n  `,\n);\n"],"mappings":";;;AAEA,MAAa,YAAY,cACtB,EAAE,YAAK,YAAY,KAAG;;;;;;mCAMU,MAAM,qBAAqB;;kBAE5C,MAAM,iBAAiB;IAExC"}

package/es/SideNav/type.d.mts

@@ -0,0 +1,13 @@
+import { FlexboxProps } from "../Flex/type.mjs";
+import "../Flex/index.mjs";
+import { ReactNode } from "react";
+
+//#region src/SideNav/type.d.ts
+interface SideNavProps extends FlexboxProps {
+  avatar?: ReactNode;
+  bottomActions: ReactNode;
+  topActions?: ReactNode;
+}
+//#endregion
+export { SideNavProps };
+//# sourceMappingURL=type.d.mts.map

package/es/Skeleton/Skeleton.mjs

@@ -0,0 +1,72 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { useStyles } from "./style.mjs";
+import SkeletonAvatar_default from "./SkeletonAvatar.mjs";
+import SkeletonParagraph_default from "./SkeletonParagraph.mjs";
+import SkeletonTitle_default from "./SkeletonTitle.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/Skeleton/Skeleton.tsx
+const Skeleton = ({ active, avatar = false, title = true, paragraph = true, className, classNames, styles: customStyles, style, width, height, gap = 16, ...rest }) => {
+	const { cx, styles } = useStyles();
+	const showAvatar = Boolean(avatar);
+	const showTitle = Boolean(title);
+	const showParagraph = Boolean(paragraph);
+	const avatarProps = typeof avatar === "object" ? avatar : void 0;
+	const titleProps = typeof title === "object" ? title : void 0;
+	const paragraphProps = typeof paragraph === "object" ? paragraph : void 0;
+	const rootStyle = {
+		...style,
+		...customStyles?.root,
+		...width !== void 0 ? { width } : {},
+		...height !== void 0 ? { height } : {}
+	};
+	const avatarActive = avatarProps?.active ?? active;
+	const titleActive = titleProps?.active ?? active;
+	const paragraphActive = paragraphProps?.active ?? active;
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		align: showParagraph ? "flex-start" : "center",
+		className: cx(className, classNames?.root),
+		gap,
+		horizontal: true,
+		style: rootStyle,
+		width: "100%",
+		...rest,
+		children: [showAvatar && /* @__PURE__ */ jsx(SkeletonAvatar_default, {
+			...avatarProps,
+			active: avatarActive,
+			className: cx(styles.avatar, classNames?.avatar, avatarProps?.className),
+			style: {
+				...avatarProps?.style,
+				...customStyles?.avatar
+			}
+		}), /* @__PURE__ */ jsxs(FlexBasic_default, {
+			gap,
+			width: "100%",
+			children: [showTitle && /* @__PURE__ */ jsx(SkeletonTitle_default, {
+				...titleProps,
+				active: titleActive,
+				className: cx(classNames?.title, titleProps?.className),
+				style: {
+					...titleProps?.style,
+					...customStyles?.title
+				}
+			}), showParagraph && /* @__PURE__ */ jsx(SkeletonParagraph_default, {
+				...paragraphProps,
+				active: paragraphActive,
+				className: cx(classNames?.paragraph, paragraphProps?.className),
+				style: {
+					...paragraphProps?.style,
+					...customStyles?.paragraph
+				}
+			})]
+		})]
+	});
+};
+Skeleton.displayName = "Skeleton";
+var Skeleton_default = Skeleton;
+
+//#endregion
+export { Skeleton_default as default };
+//# sourceMappingURL=Skeleton.mjs.map

package/es/Skeleton/Skeleton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.mjs","names":["Skeleton: FC<SkeletonProps>","Flexbox","SkeletonAvatar","SkeletonTitle","SkeletonParagraph"],"sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport SkeletonAvatar from './SkeletonAvatar';\nimport SkeletonParagraph from './SkeletonParagraph';\nimport SkeletonTitle from './SkeletonTitle';\nimport { useStyles } from './style';\nimport type { SkeletonProps } from './type';\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 { cx, styles } = useStyles();\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      align={showParagraph ? 'flex-start' : 'center'}\n      className={cx(className, classNames?.root)}\n      gap={gap}\n      horizontal\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":";;;;;;;;;;AAYA,MAAMA,YAA+B,EACnC,QACA,SAAS,OACT,QAAQ,MACR,YAAY,MACZ,WACA,YACA,QAAQ,cACR,OACA,OACA,QACA,MAAM,IACN,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,WAAW,WAAW;CAClC,MAAM,aAAa,QAAQ,OAAO;CAClC,MAAM,YAAY,QAAQ,MAAM;CAChC,MAAM,gBAAgB,QAAQ,UAAU;CACxC,MAAM,cAAc,OAAO,WAAW,WAAW,SAAS;CAC1D,MAAM,aAAa,OAAO,UAAU,WAAW,QAAQ;CACvD,MAAM,iBAAiB,OAAO,cAAc,WAAW,YAAY;CACnE,MAAM,YAAY;EAChB,GAAG;EACH,GAAG,cAAc;EACjB,GAAI,UAAU,SAAY,EAAE,OAAO,GAAG,EAAE;EACxC,GAAI,WAAW,SAAY,EAAE,QAAQ,GAAG,EAAE;EAC3C;CAED,MAAM,eAAe,aAAa,UAAU;CAC5C,MAAM,cAAc,YAAY,UAAU;CAC1C,MAAM,kBAAkB,gBAAgB,UAAU;AAElD,QACE,qBAACC;EACC,OAAO,gBAAgB,eAAe;EACtC,WAAW,GAAG,WAAW,YAAY,KAAK;EACrC;EACL;EACA,OAAO;EACP,OAAO;EACP,GAAI;aAEH,cACC,oBAACC;GACC,GAAI;GACJ,QAAQ;GACR,WAAW,GAAG,OAAO,QAAQ,YAAY,QAAQ,aAAa,UAAU;GACxE,OAAO;IACL,GAAG,aAAa;IAChB,GAAG,cAAc;IAClB;IACD,EAEJ,qBAACD;GAAa;GAAK,OAAO;cACvB,aACC,oBAACE;IACC,GAAI;IACJ,QAAQ;IACR,WAAW,GAAG,YAAY,OAAO,YAAY,UAAU;IACvD,OAAO;KACL,GAAG,YAAY;KACf,GAAG,cAAc;KAClB;KACD,EAEH,iBACC,oBAACC;IACC,GAAI;IACJ,QAAQ;IACR,WAAW,GAAG,YAAY,WAAW,gBAAgB,UAAU;IAC/D,OAAO;KACL,GAAG,gBAAgB;KACnB,GAAG,cAAc;KAClB;KACD;IAEI;GACF;;AAId,SAAS,cAAc;AAEvB,uBAAe"}

package/es/Skeleton/SkeletonAvatar.d.mts

@@ -0,0 +1,8 @@
+import { SkeletonAvatarProps } from "./type.mjs";
+import { FC } from "react";
+
+//#region src/Skeleton/SkeletonAvatar.d.ts
+declare const SkeletonAvatar: FC<SkeletonAvatarProps>;
+//#endregion
+export { SkeletonAvatar };
+//# sourceMappingURL=SkeletonAvatar.d.mts.map

package/es/Skeleton/SkeletonAvatar.mjs

@@ -0,0 +1,32 @@
+'use client';
+
+import { useStyles } from "./style.mjs";
+import SkeletonBlock_default from "./SkeletonBlock.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Skeleton/SkeletonAvatar.tsx
+const DEFAULT_SIZE = 40;
+const SkeletonAvatar = ({ active, shape = "square", size, width, height, style, className, ...rest }) => {
+	const { cx, styles, theme } = useStyles();
+	const defaultSize = size ?? DEFAULT_SIZE;
+	const finalWidth = width ?? defaultSize;
+	const finalHeight = height ?? defaultSize;
+	const borderRadius = shape === "circle" ? "50%" : `${theme.borderRadius}px`;
+	return /* @__PURE__ */ jsx(SkeletonBlock_default, {
+		active,
+		className: cx(styles.avatar, className),
+		height: finalHeight,
+		style: {
+			borderRadius,
+			...style
+		},
+		width: finalWidth,
+		...rest
+	});
+};
+SkeletonAvatar.displayName = "SkeletonAvatar";
+var SkeletonAvatar_default = SkeletonAvatar;
+
+//#endregion
+export { SkeletonAvatar_default as default };
+//# sourceMappingURL=SkeletonAvatar.mjs.map

package/es/Skeleton/SkeletonAvatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonAvatar.mjs","names":["SkeletonAvatar: FC<SkeletonAvatarProps>","SkeletonBlock"],"sources":["../../src/Skeleton/SkeletonAvatar.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport { useStyles } from './style';\nimport type { SkeletonAvatarProps } from './type';\n\nconst DEFAULT_SIZE = 40;\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 { cx, styles, theme } = useStyles();\n  const defaultSize = size ?? DEFAULT_SIZE;\n  const finalWidth = width ?? defaultSize;\n  const finalHeight = height ?? defaultSize;\n  const borderRadius = shape === 'circle' ? '50%' : `${theme.borderRadius}px`;\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":";;;;;;;AAQA,MAAM,eAAe;AAErB,MAAMA,kBAA2C,EAC/C,QACA,QAAQ,UACR,MACA,OACA,QACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,QAAQ,UAAU,WAAW;CACzC,MAAM,cAAc,QAAQ;CAC5B,MAAM,aAAa,SAAS;CAC5B,MAAM,cAAc,UAAU;CAC9B,MAAM,eAAe,UAAU,WAAW,QAAQ,GAAG,MAAM,aAAa;AAExE,QACE,oBAACC;EACS;EACR,WAAW,GAAG,OAAO,QAAQ,UAAU;EACvC,QAAQ;EACR,OAAO;GAAE;GAAc,GAAG;GAAO;EACjC,OAAO;EACP,GAAI;GACJ;;AAIN,eAAe,cAAc;AAE7B,6BAAe"}

package/es/Skeleton/SkeletonBlock.d.mts

@@ -0,0 +1,8 @@
+import { SkeletonBlockProps } from "./type.mjs";
+import { FC } from "react";
+
+//#region src/Skeleton/SkeletonBlock.d.ts
+declare const SkeletonBlock: FC<SkeletonBlockProps>;
+//#endregion
+export { SkeletonBlock };
+//# sourceMappingURL=SkeletonBlock.d.mts.map

package/es/Skeleton/SkeletonBlock.mjs

@@ -0,0 +1,23 @@
+'use client';
+
+import Block_default from "../Block/Block.mjs";
+import { useStyles } from "./style.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Skeleton/SkeletonBlock.tsx
+const SkeletonBlock = ({ width = "100%", height = "1em", active, style, className }) => {
+	const { cx, styles } = useStyles();
+	return /* @__PURE__ */ jsx(Block_default, {
+		className: cx(styles.base, active && styles.active, className),
+		height,
+		style,
+		variant: "filled",
+		width
+	});
+};
+SkeletonBlock.displayName = "SkeletonBlock";
+var SkeletonBlock_default = SkeletonBlock;
+
+//#endregion
+export { SkeletonBlock_default as default };
+//# sourceMappingURL=SkeletonBlock.mjs.map

package/es/Skeleton/SkeletonBlock.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonBlock.mjs","names":["SkeletonBlock: FC<SkeletonBlockProps>","Block"],"sources":["../../src/Skeleton/SkeletonBlock.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport Block from '@/Block';\nimport { SkeletonBlockProps } from '@/Skeleton/type';\n\nimport { useStyles } from './style';\n\nconst SkeletonBlock: FC<SkeletonBlockProps> = ({\n  width = '100%',\n  height = '1em',\n  active,\n  style,\n  className,\n}) => {\n  const { cx, styles } = useStyles();\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":";;;;;;;AASA,MAAMA,iBAAyC,EAC7C,QAAQ,QACR,SAAS,OACT,QACA,OACA,gBACI;CACJ,MAAM,EAAE,IAAI,WAAW,WAAW;AAClC,QACE,oBAACC;EACC,WAAW,GAAG,OAAO,MAAM,UAAU,OAAO,QAAQ,UAAU;EACtD;EACD;EACP,SAAS;EACF;GACP;;AAIN,cAAc,cAAc;AAE5B,4BAAe"}

package/es/Skeleton/SkeletonButton.d.mts

@@ -0,0 +1,8 @@
+import { SkeletonButtonProps } from "./type.mjs";
+import { FC } from "react";
+
+//#region src/Skeleton/SkeletonButton.d.ts
+declare const SkeletonButton: FC<SkeletonButtonProps>;
+//#endregion
+export { SkeletonButton };
+//# sourceMappingURL=SkeletonButton.d.mts.map

package/es/Skeleton/SkeletonButton.mjs

@@ -0,0 +1,40 @@
+'use client';
+
+import { useStyles } from "./style.mjs";
+import SkeletonBlock_default from "./SkeletonBlock.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Skeleton/SkeletonButton.tsx
+const HEIGHT_MAP = {
+	default: 36,
+	large: 46,
+	small: 28
+};
+const SkeletonButton = ({ active, block = false, shape = "default", size = "default", width, height, style, className, ...rest }) => {
+	const { theme } = useStyles();
+	const resolvedSize = size ?? "default";
+	const baseHeight = height ?? HEIGHT_MAP[resolvedSize];
+	const finalWidth = width ?? (block ? "100%" : shape === "circle" ? baseHeight : 80);
+	const RADIUS_MAP = {
+		default: theme.borderRadius,
+		large: theme.borderRadiusLG,
+		small: theme.borderRadiusSM
+	};
+	return /* @__PURE__ */ jsx(SkeletonBlock_default, {
+		active,
+		className,
+		height: baseHeight,
+		style: {
+			borderRadius: shape === "circle" ? "50%" : shape === "round" ? `${theme.borderRadius * 2}px` : RADIUS_MAP[resolvedSize],
+			...style
+		},
+		width: finalWidth,
+		...rest
+	});
+};
+SkeletonButton.displayName = "SkeletonButton";
+var SkeletonButton_default = SkeletonButton;
+
+//#endregion
+export { SkeletonButton_default as default };
+//# sourceMappingURL=SkeletonButton.mjs.map

package/es/Skeleton/SkeletonButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonButton.mjs","names":["HEIGHT_MAP: Record<'large' | 'small' | 'default', number>","SkeletonButton: FC<SkeletonButtonProps>","RADIUS_MAP: Record<'large' | 'small' | 'default', number>","SkeletonBlock"],"sources":["../../src/Skeleton/SkeletonButton.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport { useStyles } from './style';\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\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 { theme } = useStyles();\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', number> = {\n    default: theme.borderRadius,\n    large: theme.borderRadiusLG,\n    small: theme.borderRadiusSM,\n  };\n\n  const borderRadius =\n    shape === 'circle'\n      ? '50%'\n      : shape === 'round'\n        ? `${theme.borderRadius * 2}px`\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,MAAMA,aAA4D;CAChE,SAAS;CACT,OAAO;CACP,OAAO;CACR;AAED,MAAMC,kBAA2C,EAC/C,QACA,QAAQ,OACR,QAAQ,WACR,OAAO,WACP,OACA,QACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,EAAE,UAAU,WAAW;CAC7B,MAAM,eAAe,QAAQ;CAC7B,MAAM,aAAa,UAAU,WAAW;CAExC,MAAM,aAAa,UADE,QAAQ,SAAS,UAAU,WAAW,aAAa;CAGxE,MAAMC,aAA4D;EAChE,SAAS,MAAM;EACf,OAAO,MAAM;EACb,OAAO,MAAM;EACd;AASD,QACE,oBAACC;EACS;EACG;EACX,QAAQ;EACR,OAAO;GAAE,cAXX,UAAU,WACN,QACA,UAAU,UACR,GAAG,MAAM,eAAe,EAAE,MAC1B,WAAW;GAOQ,GAAG;GAAO;EACjC,OAAO;EACP,GAAI;GACJ;;AAIN,eAAe,cAAc;AAE7B,6BAAe"}

package/es/Skeleton/SkeletonParagraph.d.mts

@@ -0,0 +1,8 @@
+import { SkeletonParagraphProps } from "./type.mjs";
+import { FC } from "react";
+
+//#region src/Skeleton/SkeletonParagraph.d.ts
+declare const SkeletonParagraph: FC<SkeletonParagraphProps>;
+//#endregion
+export { SkeletonParagraph };
+//# sourceMappingURL=SkeletonParagraph.d.mts.map

package/es/Skeleton/SkeletonParagraph.mjs

@@ -0,0 +1,44 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import SkeletonBlock_default from "./SkeletonBlock.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Skeleton/SkeletonParagraph.tsx
+const DEFAULT_ROWS = 3;
+const SkeletonParagraph = ({ active, rows = DEFAULT_ROWS, gap, width, height, fontSize, lineHeight, style, className, ...rest }) => {
+	const rowGap = gap;
+	const rowCount = Math.max(rows, 1);
+	const baseFontSize = fontSize ?? 14;
+	const resolvedLineHeight = lineHeight ?? 1.6;
+	const marginBlock = (height ? height : Math.round(baseFontSize * resolvedLineHeight)) - baseFontSize;
+	const widthList = Array.isArray(width) ? width : null;
+	const getRowWidth = (index) => {
+		if (widthList) return widthList[index] ?? widthList.at(-1) ?? "100%";
+		if (width !== void 0) return width;
+		if (index === rowCount - 1) return "66%";
+		return "100%";
+	};
+	const containerStyle = {
+		gap: rowGap,
+		...style
+	};
+	return /* @__PURE__ */ jsx(FlexBasic_default, {
+		className,
+		gap: gap || marginBlock,
+		style: containerStyle,
+		width: "100%",
+		...rest,
+		children: Array.from({ length: rowCount }).map((_, index) => /* @__PURE__ */ jsx(SkeletonBlock_default, {
+			active,
+			height: baseFontSize,
+			width: getRowWidth(index)
+		}, index))
+	});
+};
+SkeletonParagraph.displayName = "SkeletonParagraph";
+var SkeletonParagraph_default = SkeletonParagraph;
+
+//#endregion
+export { SkeletonParagraph_default as default };
+//# sourceMappingURL=SkeletonParagraph.mjs.map

package/es/Skeleton/SkeletonParagraph.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonParagraph.mjs","names":["SkeletonParagraph: FC<SkeletonParagraphProps>","Flexbox","SkeletonBlock"],"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,MAAMA,qBAAiD,EACrD,QACA,OAAO,cACP,KACA,OACA,QACA,UACA,YACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,SAAS;CACf,MAAM,WAAW,KAAK,IAAI,MAAM,EAAE;CAClC,MAAM,eAAe,YAAY;CACjC,MAAM,qBAAqB,cAAc;CAEzC,MAAM,eADiB,SAAS,SAAS,KAAK,MAAM,eAAe,mBAAmB,IACjD;CACrC,MAAM,YAAY,MAAM,QAAQ,MAAM,GAAG,QAAQ;CAEjD,MAAM,eAAe,UAAmC;AACtD,MAAI,UAAW,QAAO,UAAU,UAAU,UAAU,GAAG,GAAG,IAAI;AAC9D,MAAI,UAAU,OAAW,QAAO;AAChC,MAAI,UAAU,WAAW,EAAG,QAAO;AACnC,SAAO;;CAGT,MAAM,iBAAiB;EAAE,KAAK;EAAQ,GAAG;EAAO;AAEhD,QACE,oBAACC;EACY;EACX,KAAK,OAAO;EACZ,OAAO;EACP,OAAO;EACP,GAAI;YAEH,MAAM,KAAK,EAAE,QAAQ,UAAU,CAAC,CAAC,KAAK,GAAG,UACxC,oBAACC;GACS;GACR,QAAQ;GAER,OAAO,YAAY,MAAM;KADpB,MAEL,CACF;GACM;;AAId,kBAAkB,cAAc;AAEhC,gCAAe"}

package/es/Skeleton/SkeletonTags.d.mts

@@ -0,0 +1,8 @@
+import { SkeletonTagsProps } from "./type.mjs";
+import { FC } from "react";
+
+//#region src/Skeleton/SkeletonTags.d.ts
+declare const SkeletonTags: FC<SkeletonTagsProps>;
+//#endregion
+export { SkeletonTags };
+//# sourceMappingURL=SkeletonTags.d.mts.map

package/es/Skeleton/SkeletonTags.mjs

@@ -0,0 +1,58 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { useStyles } from "./style.mjs";
+import SkeletonBlock_default from "./SkeletonBlock.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Skeleton/SkeletonTags.tsx
+const DEFAULT_COUNT = 1;
+const HEIGHT_MAP = {
+	large: 28,
+	middle: 22,
+	small: 20
+};
+const DEFAULT_WIDTH_MAP = {
+	large: 64,
+	middle: 48,
+	small: 36
+};
+const SkeletonTags = ({ active, className, count = DEFAULT_COUNT, gap, height, size = "middle", style, width, ...rest }) => {
+	const { theme } = useStyles();
+	const resolvedGap = gap ?? theme.paddingXS ?? 4;
+	const resolvedCount = Math.max(count, 1);
+	const resolvedHeight = height ?? HEIGHT_MAP[size];
+	const widthList = Array.isArray(width) ? width : null;
+	const defaultWidth = DEFAULT_WIDTH_MAP[size];
+	const RADIUS_MAP = {
+		large: theme.borderRadius,
+		middle: theme.borderRadiusSM,
+		small: theme.borderRadiusXS
+	};
+	const getWidth = (index) => {
+		if (widthList) return widthList[index] ?? widthList.at(-1) ?? defaultWidth;
+		if (width !== void 0) return width;
+		return defaultWidth;
+	};
+	return /* @__PURE__ */ jsx(FlexBasic_default, {
+		className,
+		horizontal: true,
+		style: {
+			gap: resolvedGap,
+			...style
+		},
+		...rest,
+		children: Array.from({ length: resolvedCount }).map((_, index) => /* @__PURE__ */ jsx(SkeletonBlock_default, {
+			active,
+			height: resolvedHeight,
+			style: { borderRadius: RADIUS_MAP[size] },
+			width: getWidth(index)
+		}, index))
+	});
+};
+SkeletonTags.displayName = "SkeletonTags";
+var SkeletonTags_default = SkeletonTags;
+
+//#endregion
+export { SkeletonTags_default as default };
+//# sourceMappingURL=SkeletonTags.mjs.map

package/es/Skeleton/SkeletonTags.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonTags.mjs","names":["HEIGHT_MAP: Record<'small' | 'middle' | 'large', number>","DEFAULT_WIDTH_MAP: Record<'small' | 'middle' | 'large', number>","SkeletonTags: FC<SkeletonTagsProps>","RADIUS_MAP: Record<'large' | 'small' | 'middle', number>","Flexbox","SkeletonBlock"],"sources":["../../src/Skeleton/SkeletonTags.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport { useStyles } from './style';\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 { theme } = useStyles();\n  const resolvedGap = gap ?? theme.paddingXS ?? 4;\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', number> = {\n    large: theme.borderRadius,\n    middle: theme.borderRadiusSM,\n    small: theme.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 className={className} horizontal style={{ gap: resolvedGap, ...style }} {...rest}>\n      {Array.from({ length: resolvedCount }).map((_, index) => (\n        <SkeletonBlock\n          active={active}\n          height={resolvedHeight}\n          key={index}\n          style={{\n            borderRadius: RADIUS_MAP[size],\n          }}\n          width={getWidth(index)}\n        />\n      ))}\n    </Flexbox>\n  );\n};\n\nSkeletonTags.displayName = 'SkeletonTags';\n\nexport default SkeletonTags;\n"],"mappings":";;;;;;;;AAUA,MAAM,gBAAgB;AAEtB,MAAMA,aAA2D;CAC/D,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAMC,oBAAkE;CACtE,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAMC,gBAAuC,EAC3C,QACA,WACA,QAAQ,eACR,KACA,QACA,OAAO,UACP,OACA,OACA,GAAG,WACC;CACJ,MAAM,EAAE,UAAU,WAAW;CAC7B,MAAM,cAAc,OAAO,MAAM,aAAa;CAC9C,MAAM,gBAAgB,KAAK,IAAI,OAAO,EAAE;CACxC,MAAM,iBAAiB,UAAU,WAAW;CAC5C,MAAM,YAAY,MAAM,QAAQ,MAAM,GAAG,QAAQ;CACjD,MAAM,eAAe,kBAAkB;CAEvC,MAAMC,aAA2D;EAC/D,OAAO,MAAM;EACb,QAAQ,MAAM;EACd,OAAO,MAAM;EACd;CAED,MAAM,YAAY,UAAkB;AAClC,MAAI,UAAW,QAAO,UAAU,UAAU,UAAU,GAAG,GAAG,IAAI;AAC9D,MAAI,UAAU,OAAW,QAAO;AAChC,SAAO;;AAGT,QACE,oBAACC;EAAmB;EAAW;EAAW,OAAO;GAAE,KAAK;GAAa,GAAG;GAAO;EAAE,GAAI;YAClF,MAAM,KAAK,EAAE,QAAQ,eAAe,CAAC,CAAC,KAAK,GAAG,UAC7C,oBAACC;GACS;GACR,QAAQ;GAER,OAAO,EACL,cAAc,WAAW,OAC1B;GACD,OAAO,SAAS,MAAM;KAJjB,MAKL,CACF;GACM;;AAId,aAAa,cAAc;AAE3B,2BAAe"}

package/es/Skeleton/SkeletonTitle.d.mts

@@ -0,0 +1,8 @@
+import { SkeletonTitleProps } from "./type.mjs";
+import { FC } from "react";
+
+//#region src/Skeleton/SkeletonTitle.d.ts
+declare const SkeletonTitle: FC<SkeletonTitleProps>;
+//#endregion
+export { SkeletonTitle };
+//# sourceMappingURL=SkeletonTitle.d.mts.map

package/es/Skeleton/SkeletonTitle.mjs

@@ -0,0 +1,31 @@
+'use client';
+
+import { useStyles } from "./style.mjs";
+import SkeletonBlock_default from "./SkeletonBlock.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Skeleton/SkeletonTitle.tsx
+const DEFAULT_FONT_SIZE = 18;
+const SkeletonTitle = ({ active, fontSize, lineHeight, height, width = "60%", style, className, ...rest }) => {
+	const { theme } = useStyles();
+	const baseFontSize = fontSize ?? theme.fontSize ?? DEFAULT_FONT_SIZE;
+	const resolvedLineHeight = lineHeight ?? 1.6;
+	const marginBlock = (height ? height : Math.round(baseFontSize * resolvedLineHeight)) - baseFontSize;
+	return /* @__PURE__ */ jsx(SkeletonBlock_default, {
+		active,
+		className,
+		height: Math.round(baseFontSize + marginBlock * .5),
+		style: {
+			marginBlock: Math.round(marginBlock * .5 / 2),
+			...style
+		},
+		width,
+		...rest
+	});
+};
+SkeletonTitle.displayName = "SkeletonTitle";
+var SkeletonTitle_default = SkeletonTitle;
+
+//#endregion
+export { SkeletonTitle_default as default };
+//# sourceMappingURL=SkeletonTitle.mjs.map

package/es/Skeleton/SkeletonTitle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonTitle.mjs","names":["SkeletonTitle: FC<SkeletonTitleProps>","SkeletonBlock"],"sources":["../../src/Skeleton/SkeletonTitle.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport { useStyles } from './style';\nimport type { SkeletonTitleProps } from './type';\n\nconst DEFAULT_FONT_SIZE = 18;\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 { theme } = useStyles();\n  const baseFontSize = fontSize ?? theme.fontSize ?? DEFAULT_FONT_SIZE;\n  const resolvedLineHeight = lineHeight ?? 1.6;\n  const computedHeight = height ? height : Math.round(baseFontSize * resolvedLineHeight);\n  const marginBlock = computedHeight - baseFontSize;\n\n  return (\n    <SkeletonBlock\n      active={active}\n      className={className}\n      height={Math.round(baseFontSize + marginBlock * 0.5)}\n      style={{\n        marginBlock: Math.round((marginBlock * 0.5) / 2),\n        ...style,\n      }}\n      width={width}\n      {...rest}\n    />\n  );\n};\n\nSkeletonTitle.displayName = 'SkeletonTitle';\n\nexport default SkeletonTitle;\n"],"mappings":";;;;;;;AAQA,MAAM,oBAAoB;AAE1B,MAAMA,iBAAyC,EAC7C,QACA,UACA,YACA,QACA,QAAQ,OACR,OACA,WACA,GAAG,WACC;CACJ,MAAM,EAAE,UAAU,WAAW;CAC7B,MAAM,eAAe,YAAY,MAAM,YAAY;CACnD,MAAM,qBAAqB,cAAc;CAEzC,MAAM,eADiB,SAAS,SAAS,KAAK,MAAM,eAAe,mBAAmB,IACjD;AAErC,QACE,oBAACC;EACS;EACG;EACX,QAAQ,KAAK,MAAM,eAAe,cAAc,GAAI;EACpD,OAAO;GACL,aAAa,KAAK,MAAO,cAAc,KAAO,EAAE;GAChD,GAAG;GACJ;EACM;EACP,GAAI;GACJ;;AAIN,cAAc,cAAc;AAE5B,4BAAe"}

package/es/Skeleton/index.d.mts

@@ -0,0 +1,23 @@
+import { SkeletonAvatarProps, SkeletonBlockProps, SkeletonButtonProps, SkeletonParagraphProps, SkeletonProps, SkeletonTagsProps, SkeletonTitleProps } from "./type.mjs";
+import { SkeletonAvatar } from "./SkeletonAvatar.mjs";
+import { SkeletonBlock } from "./SkeletonBlock.mjs";
+import { SkeletonButton } from "./SkeletonButton.mjs";
+import { SkeletonParagraph } from "./SkeletonParagraph.mjs";
+import { SkeletonTags } from "./SkeletonTags.mjs";
+import { SkeletonTitle } from "./SkeletonTitle.mjs";
+import { ReactNode } from "react";
+
+//#region src/Skeleton/index.d.ts
+interface ISkeleton {
+  (props: SkeletonProps): ReactNode;
+  Avatar: typeof SkeletonAvatar;
+  Block: typeof SkeletonBlock;
+  Button: typeof SkeletonButton;
+  Paragraph: typeof SkeletonParagraph;
+  Tags: typeof SkeletonTags;
+  Title: typeof SkeletonTitle;
+}
+declare const Skeleton: ISkeleton;
+//#endregion
+export { SkeletonAvatar, SkeletonAvatarProps, SkeletonBlock, SkeletonBlockProps, SkeletonButton, SkeletonButtonProps, SkeletonParagraph, SkeletonParagraphProps, SkeletonProps, SkeletonTags, SkeletonTagsProps, SkeletonTitle, SkeletonTitleProps, Skeleton as default };
+//# sourceMappingURL=index.d.mts.map

package/es/Skeleton/index.mjs

@@ -0,0 +1,21 @@
+import SkeletonBlock_default from "./SkeletonBlock.mjs";
+import SkeletonAvatar_default from "./SkeletonAvatar.mjs";
+import SkeletonParagraph_default from "./SkeletonParagraph.mjs";
+import SkeletonTitle_default from "./SkeletonTitle.mjs";
+import Skeleton_default$1 from "./Skeleton.mjs";
+import SkeletonButton_default from "./SkeletonButton.mjs";
+import SkeletonTags_default from "./SkeletonTags.mjs";
+
+//#region src/Skeleton/index.ts
+const Skeleton = Skeleton_default$1;
+Skeleton.Block = SkeletonBlock_default;
+Skeleton.Avatar = SkeletonAvatar_default;
+Skeleton.Title = SkeletonTitle_default;
+Skeleton.Paragraph = SkeletonParagraph_default;
+Skeleton.Button = SkeletonButton_default;
+Skeleton.Tags = SkeletonTags_default;
+var Skeleton_default = Skeleton;
+
+//#endregion
+export { SkeletonAvatar_default as SkeletonAvatar, SkeletonBlock_default as SkeletonBlock, SkeletonButton_default as SkeletonButton, SkeletonParagraph_default as SkeletonParagraph, SkeletonTags_default as SkeletonTags, SkeletonTitle_default as SkeletonTitle, Skeleton_default as default };
+//# sourceMappingURL=index.mjs.map

package/es/Skeleton/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["SkeletonParent","SkeletonBlock","SkeletonAvatar","SkeletonTitle","SkeletonParagraph","SkeletonButton","SkeletonTags"],"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,QAAQC;AACjB,SAAS,SAASC;AAClB,SAAS,QAAQC;AACjB,SAAS,YAAYC;AACrB,SAAS,SAASC;AAClB,SAAS,OAAOC;AAEhB,uBAAe"}

package/es/Skeleton/style.mjs

@@ -0,0 +1,49 @@
+import { createStyles, keyframes } from "antd-style";
+
+//#region src/Skeleton/style.ts
+const shimmer = keyframes`
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: .5;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+const useStyles = createStyles(({ css: css$1, token }) => {
+	const spacing = token.paddingXS ?? 8;
+	return {
+		active: css$1`
+      background: ${token.colorFillSecondary};
+      animation: ${shimmer} 2s linear infinite;
+    `,
+		avatar: css$1`
+      flex-shrink: 0;
+    `,
+		base: css$1`
+      user-select: none;
+
+      position: relative;
+
+      overflow: hidden;
+
+      border-radius: ${token.borderRadius}px;
+
+      background: ${token.colorFillTertiary};
+    `,
+		text: css$1`
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      gap: ${spacing}px;
+
+      width: 100%;
+    `
+	};
+});
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/Skeleton/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Skeleton/style.ts"],"sourcesContent":["import { createStyles, 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 useStyles = createStyles(({ css, token }) => {\n  const spacing = token.paddingXS ?? 8;\n  return {\n    active: css`\n      background: ${token.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: ${token.borderRadius}px;\n\n      background: ${token.colorFillTertiary};\n    `,\n\n    text: css`\n      display: flex;\n      flex: 1;\n      flex-direction: column;\n      gap: ${spacing}px;\n\n      width: 100%;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAM,UAAU,SAAS;;;;;;;;;;;AAYzB,MAAa,YAAY,cAAc,EAAE,YAAK,YAAY;CACxD,MAAM,UAAU,MAAM,aAAa;AACnC,QAAO;EACL,QAAQ,KAAG;oBACK,MAAM,mBAAmB;mBAC1B,QAAQ;;EAGvB,QAAQ,KAAG;;;EAIX,MAAM,KAAG;;;;;;;uBAOU,MAAM,aAAa;;oBAEtB,MAAM,kBAAkB;;EAGxC,MAAM,KAAG;;;;aAIA,QAAQ;;;;EAIlB;EACD"}