@lobehub/ui 3.4.2 → 3.4.3

package/es/EditableText/ControlInput.d.mts

@@ -0,0 +1,21 @@
+import { ActionIconProps } from "../ActionIcon/type.mjs";
+import "../ActionIcon/index.mjs";
+import { InputProps } from "../Input/type.mjs";
+import "../Input/index.mjs";
+import "react";
+
+//#region src/EditableText/ControlInput.d.ts
+interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {
+  onChange?: (value: string) => void;
+  onChangeEnd?: (value: string) => void;
+  onValueChanging?: (value: string) => void;
+  submitIcon?: ActionIconProps['icon'];
+  texts?: {
+    reset?: string;
+    submit?: string;
+  };
+  value?: string;
+}
+//#endregion
+export { ControlInputProps };
+//# sourceMappingURL=ControlInput.d.mts.map

package/es/EditableText/ControlInput.mjs

@@ -0,0 +1,85 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
+import Input_default from "../Input/Input.mjs";
+import { memo, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RotateCcw, Save } from "lucide-react";
+
+//#region src/EditableText/ControlInput.tsx
+const ControlInput = memo(({ value, onChange, onValueChanging, onChangeEnd, onCompositionEnd, onCompositionStart, onPressEnter, onFocus, submitIcon, style, texts, ...rest }) => {
+	const ref = useRef(null);
+	const [input, setInput] = useState(value || "");
+	const isChineseInput = useRef(false);
+	useEffect(() => {
+		if (value !== void 0) setInput(value);
+	}, [value]);
+	const handleUpload = () => {
+		onChange?.(input);
+		ref?.current?.blur();
+		onChangeEnd?.(input);
+	};
+	return /* @__PURE__ */ jsx(Input_default, {
+		autoFocus: true,
+		onChange: (e) => {
+			setInput(e.target.value);
+			onValueChanging?.(e.target.value);
+		},
+		onCompositionEnd: (e) => {
+			isChineseInput.current = false;
+			onCompositionEnd?.(e);
+		},
+		onCompositionStart: (e) => {
+			isChineseInput.current = true;
+			onCompositionStart?.(e);
+		},
+		onFocus,
+		onPressEnter: (e) => {
+			if (!e.shiftKey && !isChineseInput.current) {
+				e.preventDefault();
+				handleUpload();
+				onPressEnter?.(e);
+			}
+		},
+		ref,
+		style: {
+			width: "100%",
+			...style
+		},
+		suffix: value === input ? /* @__PURE__ */ jsx("span", {}) : /* @__PURE__ */ jsxs(FlexBasic_default, {
+			gap: 2,
+			horizontal: true,
+			style: {
+				marginRight: -4,
+				zIndex: 1
+			},
+			children: [/* @__PURE__ */ jsx(ActionIcon_default, {
+				icon: RotateCcw,
+				onClick: (e) => {
+					e.preventDefault();
+					setInput(value || "");
+				},
+				size: "small",
+				title: texts?.reset || "Reset"
+			}), /* @__PURE__ */ jsx(ActionIcon_default, {
+				icon: submitIcon || Save,
+				onClick: (e) => {
+					e.preventDefault();
+					handleUpload();
+				},
+				size: "small",
+				title: texts?.submit || "Submit",
+				variant: "filled"
+			})]
+		}),
+		value: input,
+		...rest
+	});
+});
+ControlInput.displayName = "ControlInput";
+var ControlInput_default = ControlInput;
+
+//#endregion
+export { ControlInput_default as default };
+//# sourceMappingURL=ControlInput.mjs.map

package/es/EditableText/ControlInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlInput.mjs","names":["Input","Flexbox","ActionIcon"],"sources":["../../src/EditableText/ControlInput.tsx"],"sourcesContent":["'use client';\n\nimport type { InputRef } from 'antd';\nimport { RotateCcw, Save } from 'lucide-react';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport ActionIcon, { type ActionIconProps } from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport Input, { type InputProps } from '@/Input';\n\nexport interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {\n  onChange?: (value: string) => void;\n  onChangeEnd?: (value: string) => void;\n  onValueChanging?: (value: string) => void;\n  submitIcon?: ActionIconProps['icon'];\n  texts?: {\n    reset?: string;\n    submit?: string;\n  };\n  value?: string;\n}\n\nconst ControlInput = memo<ControlInputProps>(\n  ({\n    value,\n    onChange,\n    onValueChanging,\n    onChangeEnd,\n    onCompositionEnd,\n    onCompositionStart,\n    onPressEnter,\n    onFocus,\n    submitIcon,\n    style,\n    texts,\n    ...rest\n  }) => {\n    const ref = useRef<InputRef>(null);\n    const [input, setInput] = useState<string>(value || '');\n\n    const isChineseInput = useRef(false);\n\n    useEffect(() => {\n      if (value !== undefined) setInput(value);\n    }, [value]);\n\n    const handleUpload = () => {\n      onChange?.(input);\n      ref?.current?.blur();\n      onChangeEnd?.(input);\n    };\n\n    return (\n      <Input\n        autoFocus\n        onChange={(e) => {\n          setInput(e.target.value);\n          onValueChanging?.(e.target.value);\n        }}\n        onCompositionEnd={(e) => {\n          isChineseInput.current = false;\n          onCompositionEnd?.(e);\n        }}\n        onCompositionStart={(e) => {\n          isChineseInput.current = true;\n          onCompositionStart?.(e);\n        }}\n        onFocus={onFocus}\n        onPressEnter={(e) => {\n          if (!e.shiftKey && !isChineseInput.current) {\n            e.preventDefault();\n            handleUpload();\n            onPressEnter?.(e);\n          }\n        }}\n        ref={ref}\n        style={{\n          width: '100%',\n          ...style,\n        }}\n        suffix={\n          value === input ? (\n            <span />\n          ) : (\n            <Flexbox\n              gap={2}\n              horizontal\n              style={{\n                marginRight: -4,\n                zIndex: 1,\n              }}\n            >\n              <ActionIcon\n                icon={RotateCcw}\n                onClick={(e) => {\n                  e.preventDefault();\n                  setInput(value || '');\n                }}\n                size=\"small\"\n                title={texts?.reset || 'Reset'}\n              />\n              <ActionIcon\n                icon={submitIcon || Save}\n                onClick={(e) => {\n                  e.preventDefault();\n                  handleUpload();\n                }}\n                size=\"small\"\n                title={texts?.submit || 'Submit'}\n                variant={'filled'}\n              />\n            </Flexbox>\n          )\n        }\n        value={input}\n        {...rest}\n      />\n    );\n  },\n);\n\nControlInput.displayName = 'ControlInput';\n\nexport default ControlInput;\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,eAAe,MAClB,EACC,OACA,UACA,iBACA,aACA,kBACA,oBACA,cACA,SACA,YACA,OACA,OACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAiB,KAAK;CAClC,MAAM,CAAC,OAAO,YAAY,SAAiB,SAAS,GAAG;CAEvD,MAAM,iBAAiB,OAAO,MAAM;AAEpC,iBAAgB;AACd,MAAI,UAAU,OAAW,UAAS,MAAM;IACvC,CAAC,MAAM,CAAC;CAEX,MAAM,qBAAqB;AACzB,aAAW,MAAM;AACjB,OAAK,SAAS,MAAM;AACpB,gBAAc,MAAM;;AAGtB,QACE,oBAACA;EACC;EACA,WAAW,MAAM;AACf,YAAS,EAAE,OAAO,MAAM;AACxB,qBAAkB,EAAE,OAAO,MAAM;;EAEnC,mBAAmB,MAAM;AACvB,kBAAe,UAAU;AACzB,sBAAmB,EAAE;;EAEvB,qBAAqB,MAAM;AACzB,kBAAe,UAAU;AACzB,wBAAqB,EAAE;;EAEhB;EACT,eAAe,MAAM;AACnB,OAAI,CAAC,EAAE,YAAY,CAAC,eAAe,SAAS;AAC1C,MAAE,gBAAgB;AAClB,kBAAc;AACd,mBAAe,EAAE;;;EAGhB;EACL,OAAO;GACL,OAAO;GACP,GAAG;GACJ;EACD,QACE,UAAU,QACR,oBAAC,WAAO,GAER,qBAACC;GACC,KAAK;GACL;GACA,OAAO;IACL,aAAa;IACb,QAAQ;IACT;cAED,oBAACC;IACC,MAAM;IACN,UAAU,MAAM;AACd,OAAE,gBAAgB;AAClB,cAAS,SAAS,GAAG;;IAEvB,MAAK;IACL,OAAO,OAAO,SAAS;KACvB,EACF,oBAACA;IACC,MAAM,cAAc;IACpB,UAAU,MAAM;AACd,OAAE,gBAAgB;AAClB,mBAAc;;IAEhB,MAAK;IACL,OAAO,OAAO,UAAU;IACxB,SAAS;KACT;IACM;EAGd,OAAO;EACP,GAAI;GACJ;EAGP;AAED,aAAa,cAAc;AAE3B,2BAAe"}

package/es/EditableText/EditableText.d.mts

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

package/es/EditableText/EditableText.mjs

@@ -0,0 +1,82 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
+import ControlInput_default from "./ControlInput.mjs";
+import { memo, useMemo } from "react";
+import useMergeState from "use-merge-value";
+import { cx } from "antd-style";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Edit3 } from "lucide-react";
+import { useHotkeys } from "react-hotkeys-hook";
+
+//#region src/EditableText/EditableText.tsx
+const EditableText = memo(({ value, showEditIcon = true, onChange, editing, onEditingChange, onChangeEnd, onFocus, onBlur, className, inputProps, onValueChanging, gap = 8, style, size = "small", styles, classNames, variant = "borderless", ...rest }) => {
+	const [edited, setEdited] = useMergeState(false, {
+		onChange: onEditingChange,
+		value: editing
+	});
+	useHotkeys("esc", () => {
+		setEdited(false);
+	}, {
+		enableOnFormTags: true,
+		enabled: edited,
+		preventDefault: true
+	});
+	const height = useMemo(() => {
+		if (!size) return 32;
+		switch (size) {
+			case "large": return 40;
+			case "middle": return 32;
+			case "small": return 24;
+		}
+	}, [size]);
+	const input = /* @__PURE__ */ jsx(ControlInput_default, {
+		className: cx(className, classNames?.input),
+		onBlur,
+		onChange,
+		onChangeEnd: (v) => {
+			onChangeEnd?.(v);
+			setEdited(false);
+		},
+		onFocus,
+		onValueChanging,
+		size,
+		style: {
+			height,
+			...style,
+			...styles?.input
+		},
+		value,
+		variant,
+		...inputProps
+	});
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: value }), showEditIcon && /* @__PURE__ */ jsx(ActionIcon_default, {
+		icon: Edit3,
+		onClick: () => {
+			setEdited(!edited);
+		},
+		size: "small",
+		title: "Edit"
+	})] });
+	return /* @__PURE__ */ jsx(FlexBasic_default, {
+		align: "center",
+		className: cx(className, classNames?.container),
+		gap,
+		horizontal: true,
+		style: {
+			height,
+			width: "100%",
+			...style,
+			...styles?.container
+		},
+		...rest,
+		children: edited ? input : content
+	});
+});
+EditableText.displayName = "EditableText";
+var EditableText_default = EditableText;
+
+//#endregion
+export { EditableText_default as default };
+//# sourceMappingURL=EditableText.mjs.map

package/es/EditableText/EditableText.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableText.mjs","names":["useControlledState","ControlInput","ActionIcon","Flexbox"],"sources":["../../src/EditableText/EditableText.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Edit3 } from 'lucide-react';\nimport { memo, useMemo } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport ControlInput from './ControlInput';\nimport type { EditableTextProps } from './type';\n\nconst EditableText = memo<EditableTextProps>(\n  ({\n    value,\n    showEditIcon = true,\n    onChange,\n    editing,\n    onEditingChange,\n    onChangeEnd,\n    onFocus,\n    onBlur,\n    className,\n    inputProps,\n    onValueChanging,\n    gap = 8,\n    style,\n    size = 'small',\n    styles,\n    classNames,\n    variant = 'borderless',\n    ...rest\n  }) => {\n    const [edited, setEdited] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    useHotkeys(\n      'esc',\n      () => {\n        setEdited(false);\n      },\n      {\n        enableOnFormTags: true,\n        enabled: edited,\n        preventDefault: true,\n      },\n    );\n\n    const height = useMemo(() => {\n      if (!size) return 32;\n      switch (size) {\n        case 'large': {\n          return 40;\n        }\n        case 'middle': {\n          return 32;\n        }\n        case 'small': {\n          return 24;\n        }\n      }\n    }, [size]);\n\n    const input = (\n      <ControlInput\n        className={cx(className, classNames?.input)}\n        onBlur={onBlur}\n        onChange={onChange}\n        onChangeEnd={(v) => {\n          onChangeEnd?.(v);\n          setEdited(false);\n        }}\n        onFocus={onFocus}\n        onValueChanging={onValueChanging}\n        size={size}\n        style={{\n          height,\n          ...style,\n          ...styles?.input,\n        }}\n        value={value as string}\n        variant={variant}\n        {...inputProps}\n      />\n    );\n\n    const content = (\n      <>\n        <span>{value}</span>\n        {showEditIcon && (\n          <ActionIcon\n            icon={Edit3}\n            onClick={() => {\n              setEdited(!edited);\n            }}\n            size=\"small\"\n            title={'Edit'}\n          />\n        )}\n      </>\n    );\n\n    return (\n      <Flexbox\n        align={'center'}\n        className={cx(className, classNames?.container)}\n        gap={gap}\n        horizontal\n        style={{\n          height,\n          width: '100%',\n          ...style,\n          ...styles?.container,\n        }}\n        {...rest}\n      >\n        {edited ? input : content}\n      </Flexbox>\n    );\n  },\n);\n\nEditableText.displayName = 'EditableText';\n\nexport default EditableText;\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,eAAe,MAClB,EACC,OACA,eAAe,MACf,UACA,SACA,iBACA,aACA,SACA,QACA,WACA,YACA,iBACA,MAAM,GACN,OACA,OAAO,SACP,QACA,YACA,UAAU,cACV,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAaA,cAAmB,OAAO;EACpD,UAAU;EACV,OAAO;EACR,CAAC;AAEF,YACE,aACM;AACJ,YAAU,MAAM;IAElB;EACE,kBAAkB;EAClB,SAAS;EACT,gBAAgB;EACjB,CACF;CAED,MAAM,SAAS,cAAc;AAC3B,MAAI,CAAC,KAAM,QAAO;AAClB,UAAQ,MAAR;GACE,KAAK,QACH,QAAO;GAET,KAAK,SACH,QAAO;GAET,KAAK,QACH,QAAO;;IAGV,CAAC,KAAK,CAAC;CAEV,MAAM,QACJ,oBAACC;EACC,WAAW,GAAG,WAAW,YAAY,MAAM;EACnC;EACE;EACV,cAAc,MAAM;AAClB,iBAAc,EAAE;AAChB,aAAU,MAAM;;EAET;EACQ;EACX;EACN,OAAO;GACL;GACA,GAAG;GACH,GAAG,QAAQ;GACZ;EACM;EACE;EACT,GAAI;GACJ;CAGJ,MAAM,UACJ,8CACE,oBAAC,oBAAM,QAAa,EACnB,gBACC,oBAACC;EACC,MAAM;EACN,eAAe;AACb,aAAU,CAAC,OAAO;;EAEpB,MAAK;EACL,OAAO;GACP,IAEH;AAGL,QACE,oBAACC;EACC,OAAO;EACP,WAAW,GAAG,WAAW,YAAY,UAAU;EAC1C;EACL;EACA,OAAO;GACL;GACA,OAAO;GACP,GAAG;GACH,GAAG,QAAQ;GACZ;EACD,GAAI;YAEH,SAAS,QAAQ;GACV;EAGf;AAED,aAAa,cAAc;AAE3B,2BAAe"}

package/es/EditableText/index.d.mts

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

package/es/EditableText/index.mjs

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

package/es/EditableText/type.d.mts

@@ -0,0 +1,25 @@
+import { FlexboxProps } from "../Flex/type.mjs";
+import "../Flex/index.mjs";
+import { ControlInputProps } from "./ControlInput.mjs";
+import { CSSProperties } from "react";
+
+//#region src/EditableText/type.d.ts
+interface EditableTextProps extends Omit<FlexboxProps, 'onChange' | 'onBlur' | 'onFocus'>, Pick<ControlInputProps, 'onChange' | 'value' | 'onChangeEnd' | 'onValueChanging' | 'texts' | 'variant' | 'onBlur' | 'onFocus' | 'size'> {
+  className?: string;
+  classNames?: {
+    container?: string;
+    input?: string;
+  };
+  editing?: boolean;
+  inputProps?: Omit<ControlInputProps, 'onChange' | 'value' | 'onChangeEnd' | 'onValueChanging' | 'texts' | 'className' | 'style' | 'onBlur' | 'onFocus' | 'size'>;
+  onEditingChange?: (editing: boolean) => void;
+  showEditIcon?: boolean;
+  style?: CSSProperties;
+  styles?: {
+    container?: CSSProperties;
+    input?: CSSProperties;
+  };
+}
+//#endregion
+export { EditableTextProps };
+//# sourceMappingURL=type.d.mts.map

package/es/EmojiPicker/AvatarUploader.mjs

@@ -0,0 +1,121 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import Center_default from "../Flex/Center.mjs";
+import Icon_default from "../Icon/Icon.mjs";
+import Text_default from "../Text/Text.mjs";
+import Button_default from "../Button/Button.mjs";
+import Tag_default from "../Tag/Tag.mjs";
+import { Upload, message } from "antd";
+import { memo, useCallback, useRef, useState } from "react";
+import { useTheme } from "antd-style";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ImageUpIcon } from "lucide-react";
+import AvatarEditor from "react-avatar-editor";
+
+//#region src/EmojiPicker/AvatarUploader.tsx
+const { Dragger } = Upload;
+const createUploadImageHandler = (onUploadImage) => (file) => {
+	const reader = new FileReader();
+	reader.readAsDataURL(file);
+	reader.addEventListener("load", () => {
+		onUploadImage(String(reader.result));
+	});
+};
+const AvatarUploader = memo(({ shape, onChange, texts, compressSize = 256, onUpload }) => {
+	const editor = useRef(null);
+	const [previewImage, setPreviewImage] = useState("");
+	const theme = useTheme();
+	const beforeUpload = useCallback((file) => {
+		if (!(file.type === "image/jpeg" || file.type === "image/png" || file.type === "image/gif" || file.type === "image/webp")) {
+			message.error(texts?.fileTypeError || "You can only upload image file!");
+			return;
+		}
+		return createUploadImageHandler((avatar) => {
+			setPreviewImage(avatar);
+		})(file);
+	}, []);
+	const handleUpload = () => {
+		if (!editor.current) return;
+		const canvasScaled = editor.current.getImageScaledToCanvas();
+		onChange(canvasScaled.toDataURL());
+		if (!onUpload) return;
+		canvasScaled.toBlob((blob) => {
+			if (blob) onUpload(new File([blob], "avatar.webp", { type: "image/webp" }));
+		}, "image/webp", .95);
+	};
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		padding: 10,
+		style: { position: "relative" },
+		width: "100%",
+		children: [!previewImage && /* @__PURE__ */ jsx(Dragger, {
+			accept: "image",
+			beforeUpload,
+			itemRender: () => void 0,
+			maxCount: 1,
+			multiple: false,
+			children: /* @__PURE__ */ jsxs(Center_default, {
+				gap: 16,
+				height: compressSize,
+				width: compressSize,
+				children: [
+					/* @__PURE__ */ jsx(Icon_default, {
+						color: theme.colorTextDescription,
+						icon: ImageUpIcon,
+						size: 48
+					}),
+					/* @__PURE__ */ jsx(Text_default, {
+						color: theme.colorTextSecondary,
+						children: texts?.draggerDesc || "Click or Drag image to this area to upload"
+					}),
+					/* @__PURE__ */ jsxs(Center_default, {
+						gap: 4,
+						horizontal: true,
+						children: [
+							/* @__PURE__ */ jsx(Tag_default, { children: "JPG" }),
+							/* @__PURE__ */ jsx(Tag_default, { children: "PNG" }),
+							/* @__PURE__ */ jsx(Tag_default, { children: "GIF" }),
+							/* @__PURE__ */ jsx(Tag_default, { children: "WEBP" })
+						]
+					})
+				]
+			})
+		}), previewImage && /* @__PURE__ */ jsxs(Center_default, {
+			gap: 8,
+			style: { position: "relative" },
+			width: "100%",
+			children: [/* @__PURE__ */ jsx(AvatarEditor, {
+				border: 0,
+				borderRadius: shape === "square" ? void 0 : compressSize / 2,
+				height: compressSize,
+				image: previewImage,
+				ref: editor,
+				width: compressSize
+			}), /* @__PURE__ */ jsxs(FlexBasic_default, {
+				gap: 8,
+				horizontal: true,
+				style: { position: "relative" },
+				width: "100%",
+				children: [/* @__PURE__ */ jsx(Button_default, {
+					icon: ChevronLeftIcon,
+					onClick: () => setPreviewImage(""),
+					style: { flex: "none" }
+				}), /* @__PURE__ */ jsx(Button_default, {
+					onClick: handleUpload,
+					style: {
+						flex: 1,
+						fontWeight: 500
+					},
+					type: "primary",
+					children: texts?.uploadBtn || "Crop and Upload"
+				})]
+			})]
+		})]
+	});
+});
+AvatarUploader.displayName = "AvatarUploader";
+var AvatarUploader_default = AvatarUploader;
+
+//#endregion
+export { AvatarUploader_default as default };
+//# sourceMappingURL=AvatarUploader.mjs.map

package/es/EmojiPicker/AvatarUploader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarUploader.mjs","names":["Flexbox","Center","Icon","Text","Tag","Button"],"sources":["../../src/EmojiPicker/AvatarUploader.tsx"],"sourcesContent":["'use client';\n\nimport { type GetProp, Upload, type UploadProps, message } from 'antd';\nimport { useTheme } from 'antd-style';\nimport { ChevronLeftIcon, ImageUpIcon } from 'lucide-react';\nimport { memo, useCallback, useRef, useState } from 'react';\nimport AvatarEditor from 'react-avatar-editor';\n\nimport Button from '@/Button';\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Tag from '@/Tag';\nimport Text from '@/Text';\n\nimport { AvatarUploaderProps } from './type';\n\ntype FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];\n\nconst { Dragger } = Upload;\n\nconst createUploadImageHandler = (onUploadImage: (base64: string) => void) => (file: any) => {\n  const reader = new FileReader();\n  reader.readAsDataURL(file);\n  reader.addEventListener('load', () => {\n    onUploadImage(String(reader.result));\n  });\n};\n\nconst AvatarUploader = memo<AvatarUploaderProps>(\n  ({ shape, onChange, texts, compressSize = 256, onUpload }) => {\n    const editor = useRef<any>(null);\n    const [previewImage, setPreviewImage] = useState('');\n    const theme = useTheme();\n\n    const beforeUpload = useCallback((file: FileType) => {\n      const isJpgOrPng =\n        file.type === 'image/jpeg' ||\n        file.type === 'image/png' ||\n        file.type === 'image/gif' ||\n        file.type === 'image/webp';\n      if (!isJpgOrPng) {\n        message.error(texts?.fileTypeError || 'You can only upload image file!');\n        return;\n      }\n      return createUploadImageHandler((avatar) => {\n        setPreviewImage(avatar);\n      })(file);\n    }, []);\n\n    const handleUpload = () => {\n      if (!editor.current) return;\n      const canvasScaled = editor.current.getImageScaledToCanvas() as HTMLCanvasElement;\n      const dataUrl = canvasScaled.toDataURL();\n      onChange(dataUrl);\n\n      if (!onUpload) return;\n\n      // 使用 toBlob 直接获取 Blob，然后创建 File 对象\n      canvasScaled.toBlob(\n        (blob) => {\n          if (blob) {\n            const file = new File([blob], 'avatar.webp', { type: 'image/webp' });\n            onUpload(file);\n          }\n        },\n        'image/webp',\n        0.95,\n      ); // 0.95 是图片质量\n    };\n\n    return (\n      <Flexbox padding={10} style={{ position: 'relative' }} width={'100%'}>\n        {!previewImage && (\n          <Dragger\n            accept={'image'}\n            beforeUpload={beforeUpload}\n            itemRender={() => void 0}\n            maxCount={1}\n            multiple={false}\n          >\n            <Center gap={16} height={compressSize} width={compressSize}>\n              <Icon color={theme.colorTextDescription} icon={ImageUpIcon} size={48} />\n              <Text color={theme.colorTextSecondary}>\n                {texts?.draggerDesc || 'Click or Drag image to this area to upload'}\n              </Text>\n              <Center gap={4} horizontal>\n                <Tag>JPG</Tag>\n                <Tag>PNG</Tag>\n                <Tag>GIF</Tag>\n                <Tag>WEBP</Tag>\n              </Center>\n            </Center>\n          </Dragger>\n        )}\n        {previewImage && (\n          <Center gap={8} style={{ position: 'relative' }} width={'100%'}>\n            <AvatarEditor\n              border={0}\n              borderRadius={shape === 'square' ? undefined : compressSize / 2}\n              height={compressSize}\n              image={previewImage}\n              ref={editor}\n              width={compressSize}\n            />\n\n            <Flexbox gap={8} horizontal style={{ position: 'relative' }} width={'100%'}>\n              <Button\n                icon={ChevronLeftIcon}\n                onClick={() => setPreviewImage('')}\n                style={{ flex: 'none' }}\n              />\n              <Button onClick={handleUpload} style={{ flex: 1, fontWeight: 500 }} type={'primary'}>\n                {texts?.uploadBtn || 'Crop and Upload'}\n              </Button>\n            </Flexbox>\n          </Center>\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nAvatarUploader.displayName = 'AvatarUploader';\n\nexport default AvatarUploader;\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAM,EAAE,YAAY;AAEpB,MAAM,4BAA4B,mBAA6C,SAAc;CAC3F,MAAM,SAAS,IAAI,YAAY;AAC/B,QAAO,cAAc,KAAK;AAC1B,QAAO,iBAAiB,cAAc;AACpC,gBAAc,OAAO,OAAO,OAAO,CAAC;GACpC;;AAGJ,MAAM,iBAAiB,MACpB,EAAE,OAAO,UAAU,OAAO,eAAe,KAAK,eAAe;CAC5D,MAAM,SAAS,OAAY,KAAK;CAChC,MAAM,CAAC,cAAc,mBAAmB,SAAS,GAAG;CACpD,MAAM,QAAQ,UAAU;CAExB,MAAM,eAAe,aAAa,SAAmB;AAMnD,MAAI,EAJF,KAAK,SAAS,gBACd,KAAK,SAAS,eACd,KAAK,SAAS,eACd,KAAK,SAAS,eACC;AACf,WAAQ,MAAM,OAAO,iBAAiB,kCAAkC;AACxE;;AAEF,SAAO,0BAA0B,WAAW;AAC1C,mBAAgB,OAAO;IACvB,CAAC,KAAK;IACP,EAAE,CAAC;CAEN,MAAM,qBAAqB;AACzB,MAAI,CAAC,OAAO,QAAS;EACrB,MAAM,eAAe,OAAO,QAAQ,wBAAwB;AAE5D,WADgB,aAAa,WAAW,CACvB;AAEjB,MAAI,CAAC,SAAU;AAGf,eAAa,QACV,SAAS;AACR,OAAI,KAEF,UADa,IAAI,KAAK,CAAC,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC,CACtD;KAGlB,cACA,IACD;;AAGH,QACE,qBAACA;EAAQ,SAAS;EAAI,OAAO,EAAE,UAAU,YAAY;EAAE,OAAO;aAC3D,CAAC,gBACA,oBAAC;GACC,QAAQ;GACM;GACd,kBAAkB,KAAK;GACvB,UAAU;GACV,UAAU;aAEV,qBAACC;IAAO,KAAK;IAAI,QAAQ;IAAc,OAAO;;KAC5C,oBAACC;MAAK,OAAO,MAAM;MAAsB,MAAM;MAAa,MAAM;OAAM;KACxE,oBAACC;MAAK,OAAO,MAAM;gBAChB,OAAO,eAAe;OAClB;KACP,qBAACF;MAAO,KAAK;MAAG;;OACd,oBAACG,yBAAI,QAAS;OACd,oBAACA,yBAAI,QAAS;OACd,oBAACA,yBAAI,QAAS;OACd,oBAACA,yBAAI,SAAU;;OACR;;KACF;IACD,EAEX,gBACC,qBAACH;GAAO,KAAK;GAAG,OAAO,EAAE,UAAU,YAAY;GAAE,OAAO;cACtD,oBAAC;IACC,QAAQ;IACR,cAAc,UAAU,WAAW,SAAY,eAAe;IAC9D,QAAQ;IACR,OAAO;IACP,KAAK;IACL,OAAO;KACP,EAEF,qBAACD;IAAQ,KAAK;IAAG;IAAW,OAAO,EAAE,UAAU,YAAY;IAAE,OAAO;eAClE,oBAACK;KACC,MAAM;KACN,eAAe,gBAAgB,GAAG;KAClC,OAAO,EAAE,MAAM,QAAQ;MACvB,EACF,oBAACA;KAAO,SAAS;KAAc,OAAO;MAAE,MAAM;MAAG,YAAY;MAAK;KAAE,MAAM;eACvE,OAAO,aAAa;MACd;KACD;IACH;GAEH;EAGf;AAED,eAAe,cAAc;AAE7B,6BAAe"}

package/es/EmojiPicker/EmojiPicker.d.mts

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

package/es/EmojiPicker/EmojiPicker.mjs

@@ -0,0 +1,162 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import Icon_default from "../Icon/Icon.mjs";
+import Tooltip_default from "../Tooltip/Tooltip.mjs";
+import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
+import Avatar_default from "../Avatar/index.mjs";
+import Tabs_default from "../Tabs/Tabs.mjs";
+import AvatarUploader_default from "./AvatarUploader.mjs";
+import { useStyles } from "./style.mjs";
+import { Popover } from "antd";
+import { memo, useRef, useState } from "react";
+import useMergeState from "use-merge-value";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SmileIcon, TrashIcon, UploadIcon } from "lucide-react";
+import useSWR from "swr";
+import data from "@emoji-mart/data";
+import Picker from "@emoji-mart/react";
+
+//#region src/EmojiPicker/EmojiPicker.tsx
+const DEFAULT_AVATAR = "🤖";
+const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, locale = "en-US", allowUpload, allowDelete, texts, onDelete, compressSize = 256, customEmojis, className, loading, onUpload, customTabs = [], popupClassName, popupStyle, customRender, open, defaultOpen = false, onOpenChange, popupProps, shape, ...rest }) => {
+	const ref = useRef(null);
+	const [visible, setVisible] = useMergeState(defaultOpen, {
+		defaultValue: defaultOpen,
+		onChange: onOpenChange,
+		value: open
+	});
+	const [tab, setTab] = useState("emoji");
+	const { cx, styles, theme } = useStyles();
+	const { data: i18n } = useSWR(locale, async () => await import(`@emoji-mart/data/i18n/${locale.split("-")[0]}.json`), {
+		revalidateOnFocus: false,
+		revalidateOnMount: false
+	});
+	const [ava, setAva] = useMergeState(defaultAvatar, {
+		defaultValue: defaultAvatar,
+		onChange,
+		value
+	});
+	const handleAvatarChange = (emoji) => {
+		setAva(emoji);
+		setVisible(false);
+	};
+	const items = [
+		{
+			key: "emoji",
+			label: /* @__PURE__ */ jsx(Tooltip_default, {
+				title: texts?.emoji || "Emoji",
+				children: /* @__PURE__ */ jsx(Icon_default, {
+					icon: SmileIcon,
+					size: {
+						size: 20,
+						strokeWidth: 2.5
+					}
+				})
+			})
+		},
+		allowUpload && {
+			key: "upload",
+			label: /* @__PURE__ */ jsx(Tooltip_default, {
+				title: texts?.upload || "Upload",
+				children: /* @__PURE__ */ jsx(Icon_default, {
+					icon: UploadIcon,
+					size: {
+						size: 20,
+						strokeWidth: 2.5
+					}
+				})
+			})
+		},
+		...customTabs.map((tab$1) => ({
+			key: tab$1.value,
+			label: tab$1.label
+		}))
+	].filter(Boolean);
+	const showTabs = allowDelete || items && items.length > 1;
+	return /* @__PURE__ */ jsx(Popover, {
+		arrow: false,
+		content: /* @__PURE__ */ jsxs(FlexBasic_default, {
+			className: cx(styles.picker, popupClassName),
+			ref,
+			style: {
+				minWidth: 310,
+				paddingTop: showTabs ? 4 : 0,
+				...popupStyle
+			},
+			children: [
+				showTabs && /* @__PURE__ */ jsxs(FlexBasic_default, {
+					align: "center",
+					className: styles.tabs,
+					horizontal: true,
+					justify: "space-between",
+					paddingInline: 10,
+					children: [/* @__PURE__ */ jsx(Tabs_default, {
+						activeKey: tab,
+						compact: true,
+						items,
+						onChange: (key) => setTab(key),
+						size: "small"
+					}), allowDelete && /* @__PURE__ */ jsx(ActionIcon_default, {
+						icon: TrashIcon,
+						onClick: () => {
+							handleAvatarChange(defaultAvatar);
+							onDelete?.();
+						},
+						size: {
+							blockSize: 32,
+							size: 18
+						},
+						title: texts?.delete || "Delete"
+					})]
+				}),
+				tab === "emoji" && /* @__PURE__ */ jsx(Picker, {
+					custom: customEmojis,
+					data,
+					i18n,
+					icons: "outline",
+					locale: locale.split("-")[0],
+					navPosition: showTabs ? "bottom" : "top",
+					onEmojiSelect: (e) => handleAvatarChange(e.src || e.native),
+					previewPosition: "none",
+					skinTonePosition: "none",
+					theme: theme.isDarkMode ? "dark" : "light"
+				}),
+				tab === "upload" && /* @__PURE__ */ jsx(AvatarUploader_default, {
+					compressSize,
+					onChange: handleAvatarChange,
+					onUpload,
+					shape,
+					texts
+				}),
+				customTabs.map((item) => tab === item.value && /* @__PURE__ */ jsx(FlexBasic_default, {
+					padding: 10,
+					children: item.render(handleAvatarChange)
+				}, item.value))
+			]
+		}),
+		defaultOpen,
+		onOpenChange: (v) => {
+			if (loading) return;
+			setVisible(v);
+		},
+		open: visible,
+		placement: "bottom",
+		rootClassName: styles.popover,
+		trigger: ["click"],
+		...popupProps,
+		children: customRender ? customRender(ava) : /* @__PURE__ */ jsx(Avatar_default, {
+			avatar: ava,
+			className: cx(styles.root, className),
+			loading,
+			shape,
+			...rest
+		})
+	});
+});
+EmojiPicker.displayName = "EmojiPicker";
+var EmojiPicker_default = EmojiPicker;
+
+//#endregion
+export { EmojiPicker_default as default };
+//# sourceMappingURL=EmojiPicker.mjs.map

package/es/EmojiPicker/EmojiPicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.mjs","names":["items: TabsProps['items']","Tooltip","Icon","tab","Flexbox","Tabs","ActionIcon","AvatarUploader","Avatar"],"sources":["../../src/EmojiPicker/EmojiPicker.tsx"],"sourcesContent":["'use client';\n\nimport data from '@emoji-mart/data';\nimport Picker from '@emoji-mart/react';\nimport { Popover } from 'antd';\nimport { SmileIcon, TrashIcon, UploadIcon } from 'lucide-react';\nimport { memo, useRef, useState } from 'react';\nimport useSWR from 'swr';\nimport useMergeState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport Avatar from '@/Avatar';\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Tabs, { TabsProps } from '@/Tabs';\nimport Tooltip from '@/Tooltip';\n\nimport AvatarUploader from './AvatarUploader';\nimport { useStyles } from './style';\nimport type { EmojiPickerProps } from './type';\n\nconst DEFAULT_AVATAR = '🤖';\n\nconst EmojiPicker = memo<EmojiPickerProps>(\n  ({\n    value,\n    defaultAvatar = DEFAULT_AVATAR,\n    onChange,\n    locale = 'en-US',\n    allowUpload,\n    allowDelete,\n    texts,\n    onDelete,\n    compressSize = 256,\n    customEmojis,\n    className,\n    loading,\n    onUpload,\n    customTabs = [],\n    popupClassName,\n    popupStyle,\n    customRender,\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    popupProps,\n    shape,\n    ...rest\n  }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const [visible, setVisible] = useMergeState(defaultOpen, {\n      defaultValue: defaultOpen,\n      onChange: onOpenChange,\n      value: open,\n    });\n    const [tab, setTab] = useState<'emoji' | 'upload'>('emoji');\n\n    const { cx, styles, theme } = useStyles();\n\n    const { data: i18n } = useSWR(\n      locale,\n      async () => await import(`@emoji-mart/data/i18n/${locale.split('-')[0]}.json`),\n      { revalidateOnFocus: false, revalidateOnMount: false },\n    );\n\n    const [ava, setAva] = useMergeState(defaultAvatar, {\n      defaultValue: defaultAvatar,\n      onChange,\n      value,\n    });\n\n    const handleAvatarChange = (emoji: string) => {\n      setAva(emoji);\n      setVisible(false);\n    };\n\n    const items: TabsProps['items'] = [\n      {\n        key: 'emoji',\n        label: (\n          <Tooltip title={texts?.emoji || 'Emoji'}>\n            <Icon icon={SmileIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n          </Tooltip>\n        ),\n      },\n      allowUpload && {\n        key: 'upload',\n        label: (\n          <Tooltip title={texts?.upload || 'Upload'}>\n            <Icon icon={UploadIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n          </Tooltip>\n        ),\n      },\n      ...customTabs.map((tab) => ({ key: tab.value, label: tab.label })),\n    ].filter(Boolean) as TabsProps['items'];\n\n    const showTabs = allowDelete || (items && items.length > 1);\n\n    const content = (\n      <Flexbox\n        className={cx(styles.picker, popupClassName)}\n        ref={ref}\n        style={{ minWidth: 310, paddingTop: showTabs ? 4 : 0, ...popupStyle }}\n      >\n        {showTabs && (\n          <Flexbox\n            align={'center'}\n            className={styles.tabs}\n            horizontal\n            justify={'space-between'}\n            paddingInline={10}\n          >\n            <Tabs\n              activeKey={tab}\n              compact\n              items={items}\n              onChange={(key) => setTab(key as any)}\n              size={'small'}\n            />\n            {allowDelete && (\n              <ActionIcon\n                icon={TrashIcon}\n                onClick={() => {\n                  handleAvatarChange(defaultAvatar);\n                  onDelete?.();\n                }}\n                size={{\n                  blockSize: 32,\n                  size: 18,\n                }}\n                title={texts?.delete || 'Delete'}\n              />\n            )}\n          </Flexbox>\n        )}\n        {tab === 'emoji' && (\n          <Picker\n            custom={customEmojis}\n            data={data}\n            i18n={i18n}\n            icons={'outline'}\n            locale={locale.split('-')[0]}\n            navPosition={showTabs ? 'bottom' : 'top'}\n            onEmojiSelect={(e: any) => handleAvatarChange(e.src || e.native)}\n            previewPosition={'none'}\n            skinTonePosition={'none'}\n            theme={theme.isDarkMode ? 'dark' : 'light'}\n          />\n        )}\n        {tab === 'upload' && (\n          <AvatarUploader\n            compressSize={compressSize}\n            onChange={handleAvatarChange}\n            onUpload={onUpload}\n            shape={shape}\n            texts={texts}\n          />\n        )}\n        {customTabs.map(\n          (item) =>\n            tab === item.value && (\n              <Flexbox key={item.value} padding={10}>\n                {item.render(handleAvatarChange)}\n              </Flexbox>\n            ),\n        )}\n      </Flexbox>\n    );\n\n    return (\n      <Popover\n        arrow={false}\n        content={content}\n        defaultOpen={defaultOpen}\n        onOpenChange={(v) => {\n          if (loading) return;\n          setVisible(v);\n        }}\n        open={visible}\n        placement={'bottom'}\n        rootClassName={styles.popover}\n        trigger={['click']}\n        {...popupProps}\n      >\n        {customRender ? (\n          customRender(ava)\n        ) : (\n          <Avatar\n            avatar={ava}\n            className={cx(styles.root, className)}\n            loading={loading}\n            shape={shape}\n            {...rest}\n          />\n        )}\n      </Popover>\n    );\n  },\n);\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":"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"}

package/es/EmojiPicker/index.d.mts

@@ -0,0 +1,3 @@
+import { AvatarUploaderProps, EmojiPickerCustomEmoji, EmojiPickerCustomTab, EmojiPickerProps } from "./type.mjs";
+import { EmojiPicker } from "./EmojiPicker.mjs";
+export { AvatarUploaderProps, EmojiPickerCustomEmoji, EmojiPickerCustomTab, EmojiPickerProps, EmojiPicker as default };

package/es/EmojiPicker/index.mjs

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

package/es/EmojiPicker/style.mjs

@@ -0,0 +1,47 @@
+import { createStyles } from "antd-style";
+import chroma from "chroma-js";
+
+//#region src/EmojiPicker/style.ts
+const useStyles = createStyles(({ css: css$1, token, prefixCls }) => ({
+	picker: css$1`
+    position: relative;
+
+    em-emoji-picker {
+      --rgb-accent: ${chroma(token.colorPrimary).rgb().join(",")};
+      --shadow: none;
+      --rgb-background: ${chroma(token.colorBgElevated).rgb().join(",")};
+      --border-radius: 0;
+    }
+  `,
+	popover: css$1`
+    .${prefixCls}-popover-container {
+      overflow: hidden;
+      padding: 0;
+    }
+  `,
+	root: css$1`
+    position: relative;
+    transition: background 150ms ${token.motionEaseOut};
+
+    &:hover {
+      background: ${token.colorFillSecondary};
+    }
+  `,
+	tabs: css$1`
+    border-block-end: 1px solid ${token.colorBorderSecondary};
+
+    .ant-tabs-tab {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      width: 32px;
+      height: 32px;
+      padding: 0 !important;
+    }
+  `
+}));
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/EmojiPicker/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/EmojiPicker/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\nimport chroma from 'chroma-js';\n\nexport const useStyles = createStyles(({ css, token, prefixCls }) => ({\n  picker: css`\n    position: relative;\n\n    em-emoji-picker {\n      --rgb-accent: ${chroma(token.colorPrimary) .rgb() .join(',')};\n      --shadow: none;\n      --rgb-background: ${chroma(token.colorBgElevated) .rgb() .join(',')};\n      --border-radius: 0;\n    }\n  `,\n  popover: css`\n    .${prefixCls}-popover-container {\n      overflow: hidden;\n      padding: 0;\n    }\n  `,\n  root: css`\n    position: relative;\n    transition: background 150ms ${token.motionEaseOut};\n\n    &:hover {\n      background: ${token.colorFillSecondary};\n    }\n  `,\n  tabs: css`\n    border-block-end: 1px solid ${token.colorBorderSecondary};\n\n    .ant-tabs-tab {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: 32px;\n      height: 32px;\n      padding: 0 !important;\n    }\n  `,\n}));\n"],"mappings":";;;;AAGA,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,iBAAiB;CACpE,QAAQ,KAAG;;;;sBAIS,OAAO,MAAM,aAAa,CAAE,KAAK,CAAE,KAAK,IAAI,CAAC;;0BAEzC,OAAO,MAAM,gBAAgB,CAAE,KAAK,CAAE,KAAK,IAAI,CAAC;;;;CAIxE,SAAS,KAAG;OACP,UAAU;;;;;CAKf,MAAM,KAAG;;mCAEwB,MAAM,cAAc;;;oBAGnC,MAAM,mBAAmB;;;CAG3C,MAAM,KAAG;kCACuB,MAAM,qBAAqB;;;;;;;;;;;;CAY5D,EAAE"}