@lobehub/ui 3.4.2 → 3.4.3

package/es/EmojiPicker/type.d.mts

@@ -0,0 +1,63 @@
+import { AvatarProps as AvatarProps$1 } from "../Avatar/type.mjs";
+import { PopoverProps } from "antd";
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/EmojiPicker/type.d.ts
+interface AvatarUploaderProps {
+  compressSize?: number;
+  onChange: (avatar: string) => void;
+  onUpload?: (file: File) => void;
+  shape?: 'circle' | 'square';
+  texts?: {
+    draggerDesc?: string;
+    fileTypeError?: string;
+    uploadBtn?: string;
+  };
+}
+interface EmojiPickerCustomEmoji {
+  emojis: [{
+    id: string;
+    keywords?: string[];
+    name: string;
+    skins: {
+      src: string;
+    }[];
+  }];
+  id: string;
+  name: string;
+}
+interface EmojiPickerCustomTab {
+  label: ReactNode;
+  render: (handleAvatarChange: (avatar: string) => void) => ReactNode;
+  value: string;
+}
+interface EmojiPickerProps extends Omit<AvatarProps$1, 'onChange' | 'avatar'> {
+  allowDelete?: boolean;
+  allowUpload?: boolean;
+  compressSize?: number;
+  customEmojis?: EmojiPickerCustomEmoji[];
+  customRender?: (avatar: string) => ReactNode;
+  customTabs?: EmojiPickerCustomTab[];
+  defaultAvatar?: string;
+  defaultOpen?: boolean;
+  loading?: boolean;
+  locale?: string;
+  onChange?: (emoji: string) => void;
+  onDelete?: () => void;
+  onOpenChange?: (open: boolean) => void;
+  onUpload?: AvatarUploaderProps['onUpload'];
+  open?: boolean;
+  popupClassName?: string;
+  popupProps?: Omit<PopoverProps, 'onOpenChange' | 'defaultOpen' | 'content' | 'open' | 'rootClassName' | 'trigger'>;
+  popupStyle?: CSSProperties;
+  size?: number;
+  texts?: AvatarUploaderProps['texts'] & {
+    delete?: string;
+    emoji?: string;
+    upload?: string;
+  };
+  value?: string;
+}
+//#endregion
+export { AvatarUploaderProps, EmojiPickerCustomEmoji, EmojiPickerCustomTab, EmojiPickerProps };
+//# sourceMappingURL=type.d.mts.map

package/es/Empty/Empty.d.mts

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

package/es/Empty/Empty.mjs

@@ -0,0 +1,79 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import Block_default from "../Block/Block.mjs";
+import Icon_default from "../Icon/Icon.mjs";
+import Text_default from "../Text/Text.mjs";
+import FluentEmoji_default from "../FluentEmoji/FluentEmoji.mjs";
+import { Empty } from "antd";
+import { useTheme } from "antd-style";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/Empty/Empty.tsx
+const Empty$1 = ({ title, description, icon, image, emoji, imageSize = 48, iconColor, action, children, imageProps, align, actionProps, type = "default", titleProps, descriptionProps, ...rest }) => {
+	const theme = useTheme();
+	const isPage = type === "page";
+	const alignValue = align || (isPage ? "flex-start" : "center");
+	const isCenter = alignValue === "center";
+	const fallbackImage = Empty.PRESENTED_IMAGE_SIMPLE;
+	const cover = image || emoji || icon ? image ? image : /* @__PURE__ */ jsxs(Block_default, {
+		align: "center",
+		flex: "none",
+		height: imageSize,
+		justify: "center",
+		variant: "outlined",
+		width: imageSize,
+		...imageProps,
+		style: {
+			marginBottom: 4,
+			...imageProps?.style
+		},
+		children: [icon && /* @__PURE__ */ jsx(Icon_default, {
+			color: iconColor || (theme.isDarkMode ? theme.colorTextQuaternary : theme.colorTextSecondary),
+			icon,
+			size: imageSize * .66
+		}), emoji && /* @__PURE__ */ jsx(FluentEmoji_default, {
+			emoji,
+			size: imageSize * .75,
+			type: "anim"
+		})]
+	}) : fallbackImage;
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		align: alignValue,
+		gap: 8,
+		padding: 16,
+		...rest,
+		children: [
+			cover,
+			/* @__PURE__ */ jsxs(FlexBasic_default, {
+				align: alignValue,
+				gap: isPage ? 4 : 1,
+				children: [title && /* @__PURE__ */ jsx(Text_default, {
+					align: isCenter ? "center" : void 0,
+					fontSize: isPage ? 24 : 16,
+					weight: "bold",
+					...titleProps,
+					children: title
+				}), description && /* @__PURE__ */ jsx(Text_default, {
+					align: isCenter ? "center" : void 0,
+					color: isPage ? theme.colorTextSecondary : theme.colorTextDescription,
+					fontSize: isPage ? 16 : 14,
+					...descriptionProps,
+					children: description
+				})]
+			}),
+			children,
+			action && /* @__PURE__ */ jsx(FlexBasic_default, {
+				gap: 4,
+				...actionProps,
+				children: action
+			})
+		]
+	});
+};
+Empty$1.displayName = "Empty";
+var Empty_default = Empty$1;
+
+//#endregion
+export { Empty_default as default };
+//# sourceMappingURL=Empty.mjs.map

package/es/Empty/Empty.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Empty.mjs","names":["Empty: FC<EmptyProps>","AntEmpty","Block","Icon","FluentEmoji","Flexbox","Text","Empty"],"sources":["../../src/Empty/Empty.tsx"],"sourcesContent":["'use client';\n\nimport { Empty as AntEmpty } from 'antd';\nimport { useTheme } from 'antd-style';\nimport { type FC } from 'react';\n\nimport Block from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport FluentEmoji from '@/FluentEmoji';\nimport Icon from '@/Icon';\nimport Text from '@/Text';\n\nimport type { EmptyProps } from './type';\n\nconst Empty: FC<EmptyProps> = ({\n  title,\n  description,\n  icon,\n  image,\n  emoji,\n  imageSize = 48,\n  iconColor,\n  action,\n  children,\n  imageProps,\n  align,\n  actionProps,\n  type = 'default',\n  titleProps,\n  descriptionProps,\n  ...rest\n}) => {\n  const theme = useTheme();\n  const isPage = type === 'page';\n  const alignValue = align || (isPage ? 'flex-start' : 'center');\n  const isCenter = alignValue === 'center';\n\n  const fallbackImage = AntEmpty.PRESENTED_IMAGE_SIMPLE;\n  const hasImage = image || emoji || icon;\n  const cover = hasImage ? (\n    image ? (\n      image\n    ) : (\n      <Block\n        align={'center'}\n        flex={'none'}\n        height={imageSize}\n        justify=\"center\"\n        variant={'outlined'}\n        width={imageSize}\n        {...imageProps}\n        style={{\n          marginBottom: 4,\n          ...imageProps?.style,\n        }}\n      >\n        {icon && (\n          <Icon\n            color={\n              iconColor || (theme.isDarkMode ? theme.colorTextQuaternary : theme.colorTextSecondary)\n            }\n            icon={icon}\n            size={imageSize * 0.66}\n          />\n        )}\n        {emoji && <FluentEmoji emoji={emoji} size={imageSize * 0.75} type={'anim'} />}\n      </Block>\n    )\n  ) : (\n    fallbackImage\n  );\n\n  return (\n    <Flexbox align={alignValue} gap={8} padding={16} {...rest}>\n      {cover}\n      <Flexbox align={alignValue} gap={isPage ? 4 : 1}>\n        {title && (\n          <Text\n            align={isCenter ? 'center' : undefined}\n            fontSize={isPage ? 24 : 16}\n            weight={'bold'}\n            {...titleProps}\n          >\n            {title}\n          </Text>\n        )}\n        {description && (\n          <Text\n            align={isCenter ? 'center' : undefined}\n            color={isPage ? theme.colorTextSecondary : theme.colorTextDescription}\n            fontSize={isPage ? 16 : 14}\n            {...descriptionProps}\n          >\n            {description}\n          </Text>\n        )}\n      </Flexbox>\n      {children}\n      {action && (\n        <Flexbox gap={4} {...actionProps}>\n          {action}\n        </Flexbox>\n      )}\n    </Flexbox>\n  );\n};\n\nEmpty.displayName = 'Empty';\n\nexport default Empty;\n"],"mappings":";;;;;;;;;;;;AAcA,MAAMA,WAAyB,EAC7B,OACA,aACA,MACA,OACA,OACA,YAAY,IACZ,WACA,QACA,UACA,YACA,OACA,aACA,OAAO,WACP,YACA,kBACA,GAAG,WACC;CACJ,MAAM,QAAQ,UAAU;CACxB,MAAM,SAAS,SAAS;CACxB,MAAM,aAAa,UAAU,SAAS,eAAe;CACrD,MAAM,WAAW,eAAe;CAEhC,MAAM,gBAAgBC,MAAS;CAE/B,MAAM,QADW,SAAS,SAAS,OAEjC,QACE,QAEA,qBAACC;EACC,OAAO;EACP,MAAM;EACN,QAAQ;EACR,SAAQ;EACR,SAAS;EACT,OAAO;EACP,GAAI;EACJ,OAAO;GACL,cAAc;GACd,GAAG,YAAY;GAChB;aAEA,QACC,oBAACC;GACC,OACE,cAAc,MAAM,aAAa,MAAM,sBAAsB,MAAM;GAE/D;GACN,MAAM,YAAY;IAClB,EAEH,SAAS,oBAACC;GAAmB;GAAO,MAAM,YAAY;GAAM,MAAM;IAAU;GACvE,GAGV;AAGF,QACE,qBAACC;EAAQ,OAAO;EAAY,KAAK;EAAG,SAAS;EAAI,GAAI;;GAClD;GACD,qBAACA;IAAQ,OAAO;IAAY,KAAK,SAAS,IAAI;eAC3C,SACC,oBAACC;KACC,OAAO,WAAW,WAAW;KAC7B,UAAU,SAAS,KAAK;KACxB,QAAQ;KACR,GAAI;eAEH;MACI,EAER,eACC,oBAACA;KACC,OAAO,WAAW,WAAW;KAC7B,OAAO,SAAS,MAAM,qBAAqB,MAAM;KACjD,UAAU,SAAS,KAAK;KACxB,GAAI;eAEH;MACI;KAED;GACT;GACA,UACC,oBAACD;IAAQ,KAAK;IAAG,GAAI;cAClB;KACO;;GAEJ;;AAId,QAAM,cAAc;AAEpB,oBAAeE"}

package/es/Empty/index.d.mts

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

package/es/Empty/index.mjs

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

package/es/Empty/type.d.mts

@@ -0,0 +1,29 @@
+import { FlexboxProps } from "../Flex/type.mjs";
+import "../Flex/index.mjs";
+import { BlockProps } from "../Block/type.mjs";
+import "../Block/index.mjs";
+import { IconProps } from "../Icon/type.mjs";
+import "../Icon/index.mjs";
+import { TextProps } from "../Text/type.mjs";
+import "../Text/index.mjs";
+import { ReactNode } from "react";
+
+//#region src/Empty/type.d.ts
+interface EmptyProps extends Omit<FlexboxProps, 'title'> {
+  action?: ReactNode;
+  actionProps?: Omit<FlexboxProps, 'children'>;
+  description?: ReactNode;
+  descriptionProps?: Omit<TextProps, 'children'>;
+  emoji?: string;
+  icon?: IconProps['icon'];
+  iconColor?: IconProps['color'];
+  image?: ReactNode;
+  imageProps?: Omit<BlockProps, 'children'>;
+  imageSize?: number;
+  title?: ReactNode;
+  titleProps?: Omit<TextProps, 'children'>;
+  type?: 'default' | 'page';
+}
+//#endregion
+export { EmptyProps };
+//# sourceMappingURL=type.d.mts.map

package/es/FileTypeIcon/FileTypeIcon.d.mts

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

package/es/FileTypeIcon/FileTypeIcon.mjs

@@ -0,0 +1,67 @@
+'use client';
+
+import Center_default from "../Flex/Center.mjs";
+import { useStyles } from "./style.mjs";
+import FileIcon_default from "./components/FileIcon.mjs";
+import FolderIcon_default from "./components/FolderIcon.mjs";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/FileTypeIcon/FileTypeIcon.tsx
+const FileTypeIcon = ({ icon, color, filetype, type = "file", size = 48, style, variant, className, ref, ...rest }) => {
+	const { cx, styles, theme } = useStyles();
+	const isMono = variant === "mono";
+	const filetypeShort = useMemo(() => filetype && filetype.length > 4 ? filetype.slice(0, 4) : filetype, [filetype]);
+	const fontSize = useMemo(() => {
+		if (filetypeShort && filetypeShort.length > 3) return 24 / (4 + (filetypeShort.length - 3));
+		return 6;
+	}, [filetypeShort]);
+	const iconColor = useMemo(() => isMono ? theme.isDarkMode ? theme.colorFill : theme.colorBgContainer : color || theme.geekblue, [
+		isMono,
+		theme.isDarkMode,
+		theme.colorFill,
+		theme.colorBgContainer,
+		color
+	]);
+	const content = type === "file" ? /* @__PURE__ */ jsx(FileIcon_default, {
+		filetypeShort,
+		fontSize,
+		hasIcon: !!icon,
+		iconColor,
+		isMono,
+		size,
+		...rest
+	}) : /* @__PURE__ */ jsx(FolderIcon_default, {
+		filetype,
+		fontSize,
+		hasIcon: !!icon,
+		iconColor,
+		isMono,
+		size,
+		...rest
+	});
+	if (!icon) return content;
+	return /* @__PURE__ */ jsxs(Center_default, {
+		className: cx(styles.container, className),
+		flex: "none",
+		height: size,
+		ref,
+		style,
+		width: size,
+		...rest,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: styles.inner,
+			style: {
+				fontSize: size / 2.4,
+				top: type === "file" ? "20%" : "16%"
+			},
+			children: icon
+		}), content]
+	});
+};
+FileTypeIcon.displayName = "FileTypeIcon";
+var FileTypeIcon_default = FileTypeIcon;
+
+//#endregion
+export { FileTypeIcon_default as default };
+//# sourceMappingURL=FileTypeIcon.mjs.map

package/es/FileTypeIcon/FileTypeIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileTypeIcon.mjs","names":["FileTypeIcon: FC<FileTypeIconProps>","FileIcon","FolderIcon","Center"],"sources":["../../src/FileTypeIcon/FileTypeIcon.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, useMemo } from 'react';\n\nimport { Center } from '@/Flex';\n\nimport FileIcon from './components/FileIcon';\nimport FolderIcon from './components/FolderIcon';\nimport { useStyles } from './style';\nimport type { FileTypeIconProps } from './type';\n\nconst FileTypeIcon: FC<FileTypeIconProps> = ({\n  icon,\n  color,\n  filetype,\n  type = 'file',\n  size = 48,\n  style,\n  variant,\n  className,\n  ref,\n  ...rest\n}) => {\n  const { cx, styles, theme } = useStyles();\n  const isMono = variant === 'mono';\n\n  const filetypeShort = useMemo(\n    () => (filetype && filetype.length > 4 ? filetype.slice(0, 4) : filetype),\n    [filetype],\n  );\n\n  const fontSize = useMemo(() => {\n    if (filetypeShort && filetypeShort.length > 3) {\n      return 24 / (4 + (filetypeShort.length - 3));\n    }\n    return 6;\n  }, [filetypeShort]);\n\n  const iconColor = useMemo(\n    () =>\n      isMono\n        ? theme.isDarkMode\n          ? theme.colorFill\n          : theme.colorBgContainer\n        : color || theme.geekblue,\n    [isMono, theme.isDarkMode, theme.colorFill, theme.colorBgContainer, color],\n  );\n\n  const content =\n    type === 'file' ? (\n      <FileIcon\n        filetypeShort={filetypeShort}\n        fontSize={fontSize}\n        hasIcon={!!icon}\n        iconColor={iconColor}\n        isMono={isMono}\n        size={size}\n        {...rest}\n      />\n    ) : (\n      <FolderIcon\n        filetype={filetype}\n        fontSize={fontSize}\n        hasIcon={!!icon}\n        iconColor={iconColor}\n        isMono={isMono}\n        size={size}\n        {...rest}\n      />\n    );\n\n  if (!icon) return content;\n\n  return (\n    <Center\n      className={cx(styles.container, className)}\n      flex={'none'}\n      height={size}\n      ref={ref}\n      style={style}\n      width={size}\n      {...rest}\n    >\n      <div\n        className={styles.inner}\n        style={{\n          fontSize: size / 2.4,\n          top: type === 'file' ? '20%' : '16%',\n        }}\n      >\n        {icon}\n      </div>\n      {content}\n    </Center>\n  );\n};\n\nFileTypeIcon.displayName = 'FileTypeIcon';\n\nexport default FileTypeIcon;\n"],"mappings":";;;;;;;;;;AAWA,MAAMA,gBAAuC,EAC3C,MACA,OACA,UACA,OAAO,QACP,OAAO,IACP,OACA,SACA,WACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,QAAQ,UAAU,WAAW;CACzC,MAAM,SAAS,YAAY;CAE3B,MAAM,gBAAgB,cACb,YAAY,SAAS,SAAS,IAAI,SAAS,MAAM,GAAG,EAAE,GAAG,UAChE,CAAC,SAAS,CACX;CAED,MAAM,WAAW,cAAc;AAC7B,MAAI,iBAAiB,cAAc,SAAS,EAC1C,QAAO,MAAM,KAAK,cAAc,SAAS;AAE3C,SAAO;IACN,CAAC,cAAc,CAAC;CAEnB,MAAM,YAAY,cAEd,SACI,MAAM,aACJ,MAAM,YACN,MAAM,mBACR,SAAS,MAAM,UACrB;EAAC;EAAQ,MAAM;EAAY,MAAM;EAAW,MAAM;EAAkB;EAAM,CAC3E;CAED,MAAM,UACJ,SAAS,SACP,oBAACC;EACgB;EACL;EACV,SAAS,CAAC,CAAC;EACA;EACH;EACF;EACN,GAAI;GACJ,GAEF,oBAACC;EACW;EACA;EACV,SAAS,CAAC,CAAC;EACA;EACH;EACF;EACN,GAAI;GACJ;AAGN,KAAI,CAAC,KAAM,QAAO;AAElB,QACE,qBAACC;EACC,WAAW,GAAG,OAAO,WAAW,UAAU;EAC1C,MAAM;EACN,QAAQ;EACH;EACE;EACP,OAAO;EACP,GAAI;aAEJ,oBAAC;GACC,WAAW,OAAO;GAClB,OAAO;IACL,UAAU,OAAO;IACjB,KAAK,SAAS,SAAS,QAAQ;IAChC;aAEA;IACG,EACL;GACM;;AAIb,aAAa,cAAc;AAE3B,2BAAe"}

package/es/FileTypeIcon/components/FileIcon.mjs

@@ -0,0 +1,47 @@
+import { useStyles } from "../style.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/FileTypeIcon/components/FileIcon.tsx
+const FileIcon = ({ size, isMono, hasIcon, iconColor, filetypeShort, className, fontSize, style, ...rest }) => {
+	const { cx, styles, theme } = useStyles();
+	return /* @__PURE__ */ jsxs("svg", {
+		className: cx(styles.icon, !hasIcon && className),
+		height: size,
+		style: hasIcon ? void 0 : style,
+		viewBox: "0 0 24 24",
+		width: size,
+		xmlns: "http://www.w3.org/2000/svg",
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6z",
+				fill: iconColor
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2l6 6h-4a2 2 0 01-2-2V2z",
+				fill: isMono ? theme.colorFill : "#fff",
+				fillOpacity: ".5"
+			}),
+			filetypeShort && /* @__PURE__ */ jsx("text", {
+				fill: isMono ? theme.colorTextSecondary : "#fff",
+				fontSize,
+				fontWeight: "bold",
+				textAnchor: "middle",
+				x: "50%",
+				y: "70%",
+				children: filetypeShort.toUpperCase()
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6z",
+				fill: "transparent",
+				stroke: theme.colorFillSecondary,
+				strokeWidth: .5
+			})
+		]
+	});
+};
+var FileIcon_default = FileIcon;
+
+//#endregion
+export { FileIcon_default as default };
+//# sourceMappingURL=FileIcon.mjs.map

package/es/FileTypeIcon/components/FileIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileIcon.mjs","names":["FileIcon: FC<FileIconProps>"],"sources":["../../../src/FileTypeIcon/components/FileIcon.tsx"],"sourcesContent":["import { type FC } from 'react';\n\nimport { SvgProps } from '@/types';\n\nimport { useStyles } from '../style';\n\ninterface FileIconProps extends SvgProps {\n  filetypeShort?: string;\n  fontSize?: number;\n  hasIcon?: boolean;\n  iconColor?: string;\n  isMono?: boolean;\n  size?: number;\n}\n\nconst FileIcon: FC<FileIconProps> = ({\n  size,\n  isMono,\n  hasIcon,\n  iconColor,\n  filetypeShort,\n  className,\n  fontSize,\n  style,\n  ...rest\n}) => {\n  const { cx, styles, theme } = useStyles();\n  return (\n    <svg\n      className={cx(styles.icon, !hasIcon && className)}\n      height={size}\n      style={hasIcon ? undefined : style}\n      viewBox=\"0 0 24 24\"\n      width={size}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...rest}\n    >\n      <path d=\"M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6z\" fill={iconColor} />\n      <path\n        d=\"M14 2l6 6h-4a2 2 0 01-2-2V2z\"\n        fill={isMono ? theme.colorFill : '#fff'}\n        fillOpacity=\".5\"\n      />\n      {filetypeShort && (\n        <text\n          fill={isMono ? theme.colorTextSecondary : '#fff'}\n          fontSize={fontSize}\n          fontWeight=\"bold\"\n          textAnchor=\"middle\"\n          x=\"50%\"\n          y=\"70%\"\n        >\n          {filetypeShort.toUpperCase()}\n        </text>\n      )}\n      <path\n        d=\"M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6z\"\n        fill={'transparent'}\n        stroke={theme.colorFillSecondary}\n        strokeWidth={0.5}\n      />\n    </svg>\n  );\n};\n\nexport default FileIcon;\n"],"mappings":";;;;AAeA,MAAMA,YAA+B,EACnC,MACA,QACA,SACA,WACA,eACA,WACA,UACA,OACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,QAAQ,UAAU,WAAW;AACzC,QACE,qBAAC;EACC,WAAW,GAAG,OAAO,MAAM,CAAC,WAAW,UAAU;EACjD,QAAQ;EACR,OAAO,UAAU,SAAY;EAC7B,SAAQ;EACR,OAAO;EACP,OAAM;EACN,GAAI;;GAEJ,oBAAC;IAAK,GAAE;IAA4D,MAAM;KAAa;GACvF,oBAAC;IACC,GAAE;IACF,MAAM,SAAS,MAAM,YAAY;IACjC,aAAY;KACZ;GACD,iBACC,oBAAC;IACC,MAAM,SAAS,MAAM,qBAAqB;IAChC;IACV,YAAW;IACX,YAAW;IACX,GAAE;IACF,GAAE;cAED,cAAc,aAAa;KACvB;GAET,oBAAC;IACC,GAAE;IACF,MAAM;IACN,QAAQ,MAAM;IACd,aAAa;KACb;;GACE;;AAIV,uBAAe"}

package/es/FileTypeIcon/components/FolderIcon.mjs

@@ -0,0 +1,35 @@
+import { useStyles } from "../style.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/FileTypeIcon/components/FolderIcon.tsx
+const FolderIcon = ({ size, isMono, hasIcon, iconColor, filetype, className, fontSize, style, ...rest }) => {
+	const { cx, styles, theme } = useStyles();
+	return /* @__PURE__ */ jsxs("svg", {
+		className: cx(styles.icon, !hasIcon && className),
+		height: size,
+		style: hasIcon ? void 0 : style,
+		viewBox: "0 0 24 24",
+		width: size,
+		xmlns: "http://www.w3.org/2000/svg",
+		...rest,
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M10.46 5.076l-.92-.752A1.446 1.446 0 008.626 4H3.429c-.38 0-.743.147-1.01.41A1.386 1.386 0 002 5.4v13.2c0 .371.15.727.418.99.268.262.632.41 1.01.41h17.143c.38 0 .743-.148 1.01-.41.268-.263.419-.619.419-.99V6.8c0-.371-.15-.727-.418-.99a1.444 1.444 0 00-1.01-.41h-9.198c-.334 0-.657-.115-.914-.324z",
+			fill: iconColor,
+			stroke: theme.colorFillSecondary,
+			strokeWidth: .5
+		}), !hasIcon && filetype && /* @__PURE__ */ jsx("text", {
+			fill: isMono ? theme.colorTextSecondary : "#fff",
+			fontSize,
+			fontWeight: "bold",
+			textAnchor: "middle",
+			x: "50%",
+			y: "70%",
+			children: filetype.toUpperCase()
+		})]
+	});
+};
+var FolderIcon_default = FolderIcon;
+
+//#endregion
+export { FolderIcon_default as default };
+//# sourceMappingURL=FolderIcon.mjs.map

package/es/FileTypeIcon/components/FolderIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FolderIcon.mjs","names":["FolderIcon: FC<FolderIconProps>"],"sources":["../../../src/FileTypeIcon/components/FolderIcon.tsx"],"sourcesContent":["import { type FC } from 'react';\n\nimport { SvgProps } from '@/types';\n\nimport { useStyles } from '../style';\n\ninterface FolderIconProps extends SvgProps {\n  filetype?: string;\n  fontSize?: number;\n  hasIcon?: boolean;\n  iconColor?: string;\n  isMono?: boolean;\n  size?: number;\n}\n\nconst FolderIcon: FC<FolderIconProps> = ({\n  size,\n  isMono,\n  hasIcon,\n  iconColor,\n  filetype,\n  className,\n  fontSize,\n  style,\n  ...rest\n}) => {\n  const { cx, styles, theme } = useStyles();\n  return (\n    <svg\n      className={cx(styles.icon, !hasIcon && className)}\n      height={size}\n      style={hasIcon ? undefined : style}\n      viewBox=\"0 0 24 24\"\n      width={size}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...rest}\n    >\n      <path\n        d=\"M10.46 5.076l-.92-.752A1.446 1.446 0 008.626 4H3.429c-.38 0-.743.147-1.01.41A1.386 1.386 0 002 5.4v13.2c0 .371.15.727.418.99.268.262.632.41 1.01.41h17.143c.38 0 .743-.148 1.01-.41.268-.263.419-.619.419-.99V6.8c0-.371-.15-.727-.418-.99a1.444 1.444 0 00-1.01-.41h-9.198c-.334 0-.657-.115-.914-.324z\"\n        fill={iconColor}\n        stroke={theme.colorFillSecondary}\n        strokeWidth={0.5}\n      />\n      {!hasIcon && filetype && (\n        <text\n          fill={isMono ? theme.colorTextSecondary : '#fff'}\n          fontSize={fontSize}\n          fontWeight=\"bold\"\n          textAnchor=\"middle\"\n          x=\"50%\"\n          y=\"70%\"\n        >\n          {filetype.toUpperCase()}\n        </text>\n      )}\n    </svg>\n  );\n};\n\nexport default FolderIcon;\n"],"mappings":";;;;AAeA,MAAMA,cAAmC,EACvC,MACA,QACA,SACA,WACA,UACA,WACA,UACA,OACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,QAAQ,UAAU,WAAW;AACzC,QACE,qBAAC;EACC,WAAW,GAAG,OAAO,MAAM,CAAC,WAAW,UAAU;EACjD,QAAQ;EACR,OAAO,UAAU,SAAY;EAC7B,SAAQ;EACR,OAAO;EACP,OAAM;EACN,GAAI;aAEJ,oBAAC;GACC,GAAE;GACF,MAAM;GACN,QAAQ,MAAM;GACd,aAAa;IACb,EACD,CAAC,WAAW,YACX,oBAAC;GACC,MAAM,SAAS,MAAM,qBAAqB;GAChC;GACV,YAAW;GACX,YAAW;GACX,GAAE;GACF,GAAE;aAED,SAAS,aAAa;IAClB;GAEL;;AAIV,yBAAe"}

package/es/FileTypeIcon/index.d.mts

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

package/es/FileTypeIcon/index.mjs

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

package/es/FileTypeIcon/style.mjs

@@ -0,0 +1,23 @@
+import { createStyles } from "antd-style";
+
+//#region src/FileTypeIcon/style.ts
+const useStyles = createStyles(({ css: css$1 }) => {
+	return {
+		container: css$1`
+      position: relative;
+    `,
+		icon: css$1`
+      position: relative;
+      flex: none;
+      line-height: 1;
+    `,
+		inner: css$1`
+      position: absolute;
+      z-index: 1;
+    `
+	};
+});
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/FileTypeIcon/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/FileTypeIcon/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css }) => {\n  return {\n    container: css`\n      position: relative;\n    `,\n    icon: css`\n      position: relative;\n      flex: none;\n      line-height: 1;\n    `,\n    inner: css`\n      position: absolute;\n      z-index: 1;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,iBAAU;AACjD,QAAO;EACL,WAAW,KAAG;;;EAGd,MAAM,KAAG;;;;;EAKT,OAAO,KAAG;;;;EAIX;EACD"}

package/es/FileTypeIcon/type.d.mts

@@ -0,0 +1,17 @@
+import { DivProps, SvgProps } from "../types/index.mjs";
+import { ReactNode, Ref } from "react";
+
+//#region src/FileTypeIcon/type.d.ts
+type IconProps = SvgProps & DivProps;
+interface FileTypeIconProps extends IconProps {
+  color?: string;
+  filetype?: string;
+  icon?: ReactNode;
+  ref?: Ref<HTMLDivElement>;
+  size?: number;
+  type?: 'file' | 'folder';
+  variant?: 'color' | 'mono';
+}
+//#endregion
+export { FileTypeIconProps };
+//# sourceMappingURL=type.d.mts.map

package/es/Flex/Center.d.mts

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

package/es/Flex/Center.mjs

@@ -0,0 +1,16 @@
+import FlexBasic_default from "./FlexBasic.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Flex/Center.tsx
+const Center = ({ children, ref, ...props }) => /* @__PURE__ */ jsx(FlexBasic_default, {
+	...props,
+	align: "center",
+	justify: "center",
+	ref,
+	children
+});
+var Center_default = Center;
+
+//#endregion
+export { Center_default as default };
+//# sourceMappingURL=Center.mjs.map

package/es/Flex/Center.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Center.mjs","names":["Center: FC<CenterProps>","FlexBasic"],"sources":["../../src/Flex/Center.tsx"],"sourcesContent":["import { type FC } from 'react';\n\nimport FlexBasic from './FlexBasic';\nimport type { CenterProps } from './type';\n\nconst Center: FC<CenterProps> = ({ children, ref, ...props }) => (\n  <FlexBasic {...props} align=\"center\" justify=\"center\" ref={ref}>\n    {children}\n  </FlexBasic>\n);\n\nexport default Center;\n"],"mappings":";;;;AAKA,MAAMA,UAA2B,EAAE,UAAU,KAAK,GAAG,YACnD,oBAACC;CAAU,GAAI;CAAO,OAAM;CAAS,SAAQ;CAAc;CACxD;EACS;AAGd,qBAAe"}

package/es/Flex/FlexBasic.d.mts

@@ -0,0 +1,8 @@
+import { FlexBasicProps } from "./type.mjs";
+import * as react49 from "react";
+
+//#region src/Flex/FlexBasic.d.ts
+declare const _default: react49.NamedExoticComponent<FlexBasicProps>;
+//#endregion
+export { _default };
+//# sourceMappingURL=FlexBasic.d.mts.map

package/es/Flex/FlexBasic.mjs

@@ -0,0 +1,48 @@
+'use client';
+
+import { getCssValue, getFlexDirection, isHorizontal, isSpaceDistribution } from "./utils.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Flex/FlexBasic.tsx
+const FlexBasic = ({ visible, flex, gap, direction, horizontal, align, justify, distribution, height, width, padding, paddingInline, paddingBlock, prefixCls, as: Container = "div", className, style, children, wrap, ref, ...props }) => {
+	const justifyContent = justify || distribution;
+	const calcWidth = () => {
+		if (isHorizontal(direction, horizontal) && !width && isSpaceDistribution(justifyContent)) return "100%";
+		return getCssValue(width);
+	};
+	const finalWidth = calcWidth();
+	const mergedStyle = {
+		...flex !== void 0 ? { "--lobe-flex": String(flex) } : {},
+		...direction || horizontal ? { "--lobe-flex-direction": getFlexDirection(direction, horizontal) } : {},
+		...wrap !== void 0 ? { "--lobe-flex-wrap": wrap } : {},
+		...justifyContent !== void 0 ? { "--lobe-flex-justify": justifyContent } : {},
+		...align !== void 0 ? { "--lobe-flex-align": align } : {},
+		...finalWidth !== void 0 ? { "--lobe-flex-width": finalWidth } : {},
+		...height !== void 0 ? { "--lobe-flex-height": getCssValue(height) } : {},
+		...padding !== void 0 ? { "--lobe-flex-padding": getCssValue(padding) } : {},
+		...paddingInline !== void 0 ? { "--lobe-flex-padding-inline": getCssValue(paddingInline) } : {},
+		...paddingBlock !== void 0 ? { "--lobe-flex-padding-block": getCssValue(paddingBlock) } : {},
+		...gap !== void 0 ? { "--lobe-flex-gap": getCssValue(gap) } : {},
+		...style
+	};
+	const baseClassName = "lobe-flex";
+	const mergedClassName = [
+		baseClassName,
+		visible === false ? `${baseClassName}--hidden` : void 0,
+		prefixCls ? `${prefixCls}-flex` : void 0,
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Container, {
+		ref,
+		...props,
+		className: mergedClassName,
+		style: mergedStyle,
+		children
+	});
+};
+var FlexBasic_default = memo(FlexBasic);
+
+//#endregion
+export { FlexBasic_default as default };
+//# sourceMappingURL=FlexBasic.mjs.map

package/es/Flex/FlexBasic.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexBasic.mjs","names":["FlexBasic: FC<FlexBasicProps>","mergedStyle: CSSProperties"],"sources":["../../src/Flex/FlexBasic.tsx"],"sourcesContent":["'use client';\n\nimport { type CSSProperties, type ElementType, type FC, memo } from 'react';\n\nimport type { FlexBasicProps } from './type';\nimport { getCssValue, getFlexDirection, isHorizontal, isSpaceDistribution } from './utils';\n\nconst FlexBasic: FC<FlexBasicProps> = ({\n  visible,\n  flex,\n  gap,\n  direction,\n  horizontal,\n  align,\n  justify,\n  distribution,\n  height,\n  width,\n  padding,\n  paddingInline,\n  paddingBlock,\n  prefixCls,\n  as: Container = 'div' as ElementType,\n  className,\n  style,\n  children,\n  wrap,\n  ref,\n  ...props\n}) => {\n  const justifyContent = justify || distribution;\n\n  const calcWidth = () => {\n    if (isHorizontal(direction, horizontal) && !width && isSpaceDistribution(justifyContent))\n      return '100%';\n\n    return getCssValue(width);\n  };\n  const finalWidth = calcWidth();\n\n  const cssVars: Record<string, string | number> = {\n    ...(flex !== undefined ? { '--lobe-flex': String(flex) } : {}),\n    ...(direction || horizontal\n      ? { '--lobe-flex-direction': getFlexDirection(direction, horizontal) }\n      : {}),\n    ...(wrap !== undefined ? { '--lobe-flex-wrap': wrap } : {}),\n    ...(justifyContent !== undefined ? { '--lobe-flex-justify': justifyContent } : {}),\n    ...(align !== undefined ? { '--lobe-flex-align': align } : {}),\n    ...(finalWidth !== undefined ? { '--lobe-flex-width': finalWidth } : {}),\n    ...(height !== undefined ? { '--lobe-flex-height': getCssValue(height) } : {}),\n    ...(padding !== undefined ? { '--lobe-flex-padding': getCssValue(padding) } : {}),\n    ...(paddingInline !== undefined\n      ? { '--lobe-flex-padding-inline': getCssValue(paddingInline) }\n      : {}),\n    ...(paddingBlock !== undefined\n      ? { '--lobe-flex-padding-block': getCssValue(paddingBlock) }\n      : {}),\n    ...(gap !== undefined ? { '--lobe-flex-gap': getCssValue(gap) } : {}),\n  };\n\n  const mergedStyle: CSSProperties = { ...(cssVars as CSSProperties), ...style };\n\n  const baseClassName = 'lobe-flex';\n  const mergedClassName = [\n    baseClassName,\n    visible === false ? `${baseClassName}--hidden` : undefined,\n    prefixCls ? `${prefixCls}-flex` : undefined,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <Container ref={ref} {...props} className={mergedClassName} style={mergedStyle}>\n      {children}\n    </Container>\n  );\n};\n\nexport default memo(FlexBasic);\n"],"mappings":";;;;;;;AAOA,MAAMA,aAAiC,EACrC,SACA,MACA,KACA,WACA,YACA,OACA,SACA,cACA,QACA,OACA,SACA,eACA,cACA,WACA,IAAI,YAAY,OAChB,WACA,OACA,UACA,MACA,KACA,GAAG,YACC;CACJ,MAAM,iBAAiB,WAAW;CAElC,MAAM,kBAAkB;AACtB,MAAI,aAAa,WAAW,WAAW,IAAI,CAAC,SAAS,oBAAoB,eAAe,CACtF,QAAO;AAET,SAAO,YAAY,MAAM;;CAE3B,MAAM,aAAa,WAAW;CAsB9B,MAAMC,cAA6B;EAnBjC,GAAI,SAAS,SAAY,EAAE,eAAe,OAAO,KAAK,EAAE,GAAG,EAAE;EAC7D,GAAI,aAAa,aACb,EAAE,yBAAyB,iBAAiB,WAAW,WAAW,EAAE,GACpE,EAAE;EACN,GAAI,SAAS,SAAY,EAAE,oBAAoB,MAAM,GAAG,EAAE;EAC1D,GAAI,mBAAmB,SAAY,EAAE,uBAAuB,gBAAgB,GAAG,EAAE;EACjF,GAAI,UAAU,SAAY,EAAE,qBAAqB,OAAO,GAAG,EAAE;EAC7D,GAAI,eAAe,SAAY,EAAE,qBAAqB,YAAY,GAAG,EAAE;EACvE,GAAI,WAAW,SAAY,EAAE,sBAAsB,YAAY,OAAO,EAAE,GAAG,EAAE;EAC7E,GAAI,YAAY,SAAY,EAAE,uBAAuB,YAAY,QAAQ,EAAE,GAAG,EAAE;EAChF,GAAI,kBAAkB,SAClB,EAAE,8BAA8B,YAAY,cAAc,EAAE,GAC5D,EAAE;EACN,GAAI,iBAAiB,SACjB,EAAE,6BAA6B,YAAY,aAAa,EAAE,GAC1D,EAAE;EACN,GAAI,QAAQ,SAAY,EAAE,mBAAmB,YAAY,IAAI,EAAE,GAAG,EAAE;EAGF,GAAG;EAAO;CAE9E,MAAM,gBAAgB;CACtB,MAAM,kBAAkB;EACtB;EACA,YAAY,QAAQ,GAAG,cAAc,YAAY;EACjD,YAAY,GAAG,UAAU,SAAS;EAClC;EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;AAEZ,QACE,oBAAC;EAAe;EAAK,GAAI;EAAO,WAAW;EAAiB,OAAO;EAChE;GACS;;AAIhB,wBAAe,KAAK,UAAU"}

package/es/Flex/Flexbox.d.mts

@@ -0,0 +1 @@
+import { _default } from "./FlexBasic.mjs";

package/es/Flex/index.d.mts

@@ -0,0 +1,5 @@
+import { CenterProps, ContentPosition, FlexBasicProps, FlexDirection, FlexboxProps } from "./type.mjs";
+import { Center } from "./Center.mjs";
+import { _default } from "./FlexBasic.mjs";
+import "./Flexbox.mjs";
+export { Center, type CenterProps, type ContentPosition, _default as FlexBasic, type FlexBasicProps, type FlexDirection, _default as Flexbox, type FlexboxProps };

package/es/Flex/index.mjs

@@ -0,0 +1,4 @@
+import FlexBasic_default from "./FlexBasic.mjs";
+import Center_default from "./Center.mjs";
+
+export { Center_default as Center, FlexBasic_default as FlexBasic, FlexBasic_default as Flexbox };